/* v0.4.0 Glass UI visual preview: enabled by header switch; existing fields/storage unchanged */
.glass-toggle{margin-left:auto;flex:0 0 auto;min-width:155px;border-radius:999px;transition:background 180ms cubic-bezier(.22,1,.36,1),border-color 180ms cubic-bezier(.22,1,.36,1),box-shadow 180ms cubic-bezier(.22,1,.36,1)}
.glass-toggle[aria-pressed="true"]{color:#fff5d8;background:linear-gradient(135deg,#46576b9c,#273c4cda);border-color:#b2c6de88;box-shadow:inset 0 1px #fff4,0 5px 22px #0005}
body.glass-on{background:radial-gradient(circle at 84% 10%,#30475a 0,transparent 32%),radial-gradient(circle at 14% 78%,#283b44 0,transparent 30%),linear-gradient(140deg,#10141c,#171e29 65%,#152028)}
body.glass-on .new-game-dialog,
body.glass-on .thumb-tile,
body.glass-on .social-item,
body.glass-on .disclosure,
body.glass-on .x-post-card{
  background:linear-gradient(135deg,rgba(104,128,154,.19),rgba(24,35,52,.77) 46%,rgba(42,56,75,.64));
  border:1px solid rgba(203,222,248,.23);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 32px rgba(0,0,0,.15);
}
body.glass-on .thumb-preview{
  background:radial-gradient(ellipse at 25% 20%,rgba(122,172,202,.19),transparent 60%),linear-gradient(135deg,#172433,#0f151f);
  border:1px solid rgba(204,223,250,.3);
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 12px 30px #0004;
}
body.glass-on .thumb-tile,
body.glass-on .social-item,
body.glass-on .disclosure,
body.glass-on .x-post-card{transition:background 180ms cubic-bezier(.22,1,.36,1),border-color 180ms cubic-bezier(.22,1,.36,1),box-shadow 180ms cubic-bezier(.22,1,.36,1)}
body.glass-on .thumb-tile:hover,
body.glass-on .social-item:hover{border-color:rgba(231,240,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.19),0 15px 34px #0005}
body.glass-on .new-game-dialog::backdrop{backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body.glass-on .new-game-dialog,body.glass-on .thumb-tile,body.glass-on .social-item,body.glass-on .disclosure,body.glass-on .x-post-card{background:#263343}}
@media(prefers-reduced-motion:reduce){.glass-toggle,body.glass-on .thumb-tile,body.glass-on .social-item,body.glass-on .disclosure,body.glass-on .x-post-card{transition:none!important}}
@media(max-width:640px){.glass-toggle{margin-left:0}}

/* v0.4.0 gradient preview: decorative background only; no stream-data schema changes */
.appearance-controls{display:flex;align-items:center;gap:9px;margin-left:auto;flex-wrap:wrap}
.appearance-label{margin:0;color:#d8e0ec;white-space:nowrap;font-size:.82rem}
.appearance-select{width:auto;min-width:190px;max-width:245px;padding:8px 28px 8px 10px;border-radius:10px;background-color:#172435;border-color:#52647b;font-size:.83rem;cursor:pointer}
.appearance-controls .glass-toggle{margin:0;min-width:148px}
/* Keep background texture fixed while scrolling long forms. */
body[data-bg-theme="none"],body.glass-on[data-bg-theme="none"]{background:linear-gradient(140deg,#10141c,#171e29 65%,#152028)}
body[data-bg-theme="blue"],body.glass-on[data-bg-theme="blue"]{
background:radial-gradient(ellipse 56% 56% at 7% 7%,rgba(30,138,215,.55),transparent 83%),radial-gradient(ellipse 48% 52% at 93% 87%,rgba(43,69,176,.50),transparent 83%),linear-gradient(135deg,#0c1728,#0c1220 66%,#101a2d)}
body[data-bg-theme="pink"],body.glass-on[data-bg-theme="pink"]{
background:radial-gradient(ellipse 56% 59% at 9% 6%,rgba(202,65,144,.50),transparent 83%),radial-gradient(ellipse 51% 56% at 95% 88%,rgba(105,69,186,.48),transparent 83%),linear-gradient(135deg,#191323,#101321 68%,#1c142c)}
body[data-bg-theme="honey"],body.glass-on[data-bg-theme="honey"]{
background:radial-gradient(ellipse 56% 60% at 7% 4%,rgba(228,130,52,.49),transparent 84%),radial-gradient(ellipse 48% 54% at 96% 90%,rgba(145,77,115,.38),transparent 84%),linear-gradient(135deg,#201825,#121520 66%,#1a1927)}
body[data-bg-theme="aurora"],body.glass-on[data-bg-theme="aurora"]{
background:radial-gradient(ellipse 58% 60% at 4% 4%,rgba(37,142,210,.53),transparent 79%),radial-gradient(ellipse 50% 65% at 96% 9%,rgba(139,66,182,.45),transparent 80%),radial-gradient(ellipse 62% 50% at 48% 100%,rgba(197,66,127,.31),transparent 80%),linear-gradient(135deg,#101824,#101322 65%,#111725)}
body{background-attachment:fixed!important}
/* Gradients are visible through the glass shell, while inputs remain opaque for readability. */
body.glass-on[data-bg-theme]:not([data-bg-theme="none"]) .panel{
background:linear-gradient(138deg,rgba(31,42,60,.76),rgba(17,25,41,.77));
border-color:rgba(187,211,244,.22);
backdrop-filter:blur(15px) saturate(1.12);-webkit-backdrop-filter:blur(15px) saturate(1.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 10px 32px rgba(0,0,0,.23)
}
body.glass-on[data-bg-theme]:not([data-bg-theme="none"]) .notice{
background:rgba(24,36,54,.77);border-color:rgba(185,209,238,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
body.glass-on[data-bg-theme] .panel{background:#202b3b}
body.glass-on[data-bg-theme] .notice{background:#202b3b}}
@media(max-width:720px){.appearance-controls{width:100%;margin-left:0}.appearance-select{min-width:160px;flex:1}.appearance-controls .glass-toggle{min-width:130px}}
/* v0.4.0 Milky Layered Glass Preview: 2026-11-06 */
:root{--msl-motion:180ms;--msl-ease:cubic-bezier(.22,1,.36,1)}
body.glass-on .panel{
  position:relative;
  border:1px solid rgba(235,246,255,.28)!important;
  backdrop-filter:blur(21px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(21px) saturate(1.25)!important;
}
/* Layered translucent elements; decorative reflections don't eat clicks. */
body.glass-on .social-item,
body.glass-on .thumb-tile,
body.glass-on .disclosure,
body.glass-on .x-post-card{
  position:relative;
  background:linear-gradient(150deg,rgba(221,239,255,.175),rgba(99,131,168,.14) 38%,rgba(17,28,45,.37) 90%)!important;
  border:1px solid rgba(236,246,255,.31)!important;
  backdrop-filter:blur(22px) saturate(1.25);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 1px 0 0 rgba(255,255,255,.065),0 10px 25px rgba(2,7,16,.22);
}
body.glass-on .social-item::before,
body.glass-on .thumb-tile::before,
body.glass-on .new-game-dialog::before{
  content:"";position:absolute;inset:3px;border:1px solid rgba(250,253,255,.095);border-radius:inherit;
  pointer-events:none;z-index:0;
}
body.glass-on .social-item>* ,body.glass-on .thumb-tile>*{position:relative;z-index:1}
body.glass-on .social-item:hover,body.glass-on .thumb-tile:hover{border-color:rgba(250,252,255,.53)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 31px rgba(2,7,16,.27)}
/* Milky capsules, unlike solid primary controls. */
body.glass-on .social-actions .btn:not([data-social-delete]),
body.glass-on .social-drag,
body.glass-on .thumb-tile .btn:not(.primary):not(.thumb-delete),
body.glass-on .dialog-actions .btn:not(.primary),
body.glass-on #closeNewGame{
  position:relative;
  background:linear-gradient(155deg,rgba(247,252,255,.30),rgba(186,209,230,.15) 72%)!important;
  border:1px solid rgba(245,251,255,.45)!important;
  border-radius:13px;
  color:#fff;
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 5px 13px rgba(3,9,18,.16);
  transition:background var(--sp-motion-duration-fast) var(--sp-motion-ease-standard),box-shadow var(--sp-motion-duration-fast) var(--sp-motion-ease-standard),border-color var(--sp-motion-duration-fast) var(--sp-motion-ease-standard),transform var(--sp-motion-duration-fast) var(--sp-motion-ease-standard);
}
body.glass-on .social-actions .btn:not([data-social-delete]):not(:disabled):hover,
body.glass-on .thumb-tile .btn:not(.thumb-delete):not(:disabled):hover,
body.glass-on .dialog-actions .btn:not(.primary):hover,
body.glass-on #closeNewGame:hover{
  background:linear-gradient(145deg,rgba(252,254,255,.44),rgba(196,222,246,.23))!important;
  border-color:rgba(255,255,255,.72)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 7px 17px rgba(3,9,18,.2);
}
body.glass-on .social-actions .btn:not([data-social-delete]):active:not(:disabled),body.glass-on .thumb-tile .btn:not(.thumb-delete):active:not(:disabled){transform:scale(.96)}
body.glass-on .social-actions .btn.danger:not([data-social-delete]){color:#ffd0cf!important;border-color:rgba(255,163,168,.45)!important}
body.glass-on .social-actions .btn:disabled{opacity:.36}
/* Modal: milky glass, but controls and text keep high contrast. */
body.glass-on .new-game-dialog{
  position:fixed;
  background:linear-gradient(135deg,rgba(194,214,238,.30),rgba(31,45,66,.80) 34%,rgba(22,34,52,.89) 90%)!important;
  border:1px solid rgba(255,255,255,.45)!important;
  backdrop-filter:blur(28px) saturate(1.15)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.15)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.33),0 25px 75px rgba(0,0,0,.42);
}
body.glass-on .new-game-dialog::backdrop{background:rgba(5,10,20,.63);backdrop-filter:blur(10px)}
body.glass-on .new-game-dialog input,body.glass-on .new-game-dialog textarea,body.glass-on .new-game-dialog select{background:rgba(9,17,28,.94)}
/* Drag card movement; prevent glass effects from blocking the drag handle. */
.social-item{position:relative}
.social-item .social-drag{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.social-item.is-pointer-dragging{
  z-index:20!important;cursor:grabbing;pointer-events:none;opacity:.90;
  outline:2px solid rgba(250,202,99,.7);outline-offset:2px;
  box-shadow:0 20px 45px rgba(0,0,0,.35)!important;
  transition:none!important;will-change:transform;
}
.social-item.is-pointer-dragging *{pointer-events:none}
.social-item.is-drag-destination{border-color:rgba(252,200,94,.9)!important;}
@media(prefers-reduced-motion:reduce){body.glass-on .social-actions .btn,body.glass-on .thumb-tile .btn{transition:none!important}body.glass-on .social-item{transition:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body.glass-on .panel{background:#24354b!important}body.glass-on .social-item,body.glass-on .thumb-tile,body.glass-on .disclosure{background:#30445e!important}body.glass-on .new-game-dialog{background:#26364b!important}}