/* ============================================================
   Letterbox · kawaii airmail theme
   Baloo 2 + Nunito · pastel pink/blue/purple · ink outlines
   ============================================================ */

@font-face{
  font-family:'Bellunora';
  src:url('/fonts/Bellunora.woff2') format('woff2'),
      url('/fonts/Bellunora.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
:root{
  --pink:#ff7fb8;  --pink-2:#f9d7e6;  --pink-dk:#e2619d;
  --blue:#6fb7ff;  --blue-2:#d3e9ff;  --blue-dk:#3f96d8;
  --purple:#d9b877;--purple-2:#3a3524;   /* gold accent takes the accent role */
  --yellow:#f2d898;
  --mint:#8fd8b4;
  --bg:#101018;
  --ink:#ece6d6;        /* warm ivory */
  --ink-2:#a49db0;
  --paper:#1b1c26;
  --line:#2c2d3e;
  --hard:0 5px 0 rgba(6,6,10,.9);
  --shadow:0 16px 36px rgba(0,0,0,.5);
  --gold:#e8c87a;
  --cinnabar:#d8443c;
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --my1:#5aa0e8; --my2:#2f6fb5; --my3:#3f96d8; /* per-user, set by JS */
}
body.me-behzad{ --my1:#f47fb3; --my2:#c74a86; --my3:#e2619d; }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Manrope',system-ui,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(900px 560px at 8% -6%, rgba(216,68,60,.16) 0%, transparent 60%),
    radial-gradient(860px 560px at 96% -2%, rgba(111,183,255,.15) 0%, transparent 62%),
    radial-gradient(820px 640px at 50% 110%, rgba(232,200,122,.13) 0%, transparent 64%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.view-mailbox{ overflow:hidden; }
h1,h2,h3,h4,.stamp-name,.pill-btn,.tab,.mini-logo span{ font-family:'Cinzel','Manrope',serif; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--purple); outline-offset:2px; border-radius:8px; }
.hidden{ display:none !important; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#4a4636; border-radius:99px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--gold); }

/* ---------------- floating sparkles ---------------- */
.sparkles{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.sparkles span{
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle, #f2d898 0%, rgba(232,200,122,0) 72%);
  box-shadow:0 0 12px 3px rgba(232,200,122,.32);
  opacity:.5; animation:sparkleFloat 9s ease-in-out infinite;
}
.sparkles span:nth-child(3n){ background:radial-gradient(circle,#9fd0ff 0%,rgba(111,183,255,0) 72%); box-shadow:0 0 12px 3px rgba(111,183,255,.30); border-radius:60% 40% 55% 45%; width:11px; height:7px; }
.sparkles span:nth-child(3n+1){ background:radial-gradient(circle,#ff9fc6 0%,rgba(255,127,184,0) 72%); box-shadow:0 0 12px 3px rgba(255,127,184,.28); border-radius:45% 55% 40% 60%; width:10px; height:6px; }
.sparkles span:nth-child(1){ left:5%;  top:14%; animation-duration:8.5s; }
.sparkles span:nth-child(2){ left:14%; top:64%; animation-duration:11s; animation-delay:-2s; }
.sparkles span:nth-child(3){ left:24%; top:30%; animation-duration:9.5s; animation-delay:-4s; }
.sparkles span:nth-child(4){ left:33%; top:82%; animation-duration:12s; animation-delay:-1s; }
.sparkles span:nth-child(5){ left:45%; top:8%;  animation-duration:10s; animation-delay:-6s; }
.sparkles span:nth-child(6){ left:57%; top:74%; animation-duration:9s;  animation-delay:-3s; }
.sparkles span:nth-child(7){ left:66%; top:22%; animation-duration:12.5s; animation-delay:-5s; }
.sparkles span:nth-child(8){ left:75%; top:56%; animation-duration:10.5s; animation-delay:-7s; }
.sparkles span:nth-child(9){ left:84%; top:12%; animation-duration:9.8s; animation-delay:-2.5s; }
.sparkles span:nth-child(10){ left:92%; top:70%; animation-duration:11.5s; animation-delay:-4.5s; }
.sparkles span:nth-child(11){ left:3%;  top:44%; animation-duration:10.8s; animation-delay:-8s; }
.sparkles span:nth-child(12){ left:52%; top:40%; animation-duration:9.2s; animation-delay:-1.5s; }
@keyframes sparkleFloat{
  0%,100%{ transform:translateY(0) rotate(-6deg); opacity:.35; }
  50%    { transform:translateY(-26px) rotate(8deg); opacity:.8; }
}
.artlib{ position:absolute; width:0; height:0; overflow:hidden; }

/* ============================================================
   LANDING
   ============================================================ */
.screen{ position:relative; z-index:2; }
#landing{
  position:relative;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  padding:26px clamp(14px,4vw,40px) 18px;
}
/* ---- gate split-screen: video locked to the RIGHT half, controls on the LEFT half ---- */
.gate-video{
  position:absolute; top:0; right:0; width:50vw; height:100%;
  object-fit:cover; object-position:center 30%;   /* fills the half, keeps the face */
  background:#000; pointer-events:none;
  opacity:0; visibility:hidden;
  transition:opacity .7s ease, visibility .7s;
}
.pre-open .gate-video{ opacity:1; visibility:visible; }
/* gate = exactly one screen, no scroll; left half keeps the black bg + buttons */
.pre-open #landing{
  background:#000; height:100vh; height:100dvh; overflow:hidden;
  transition:background-color .7s ease;
}
body.pre-open{ overflow:hidden; }
.pre-open #landing{ justify-content:center; gap:clamp(8px,2.5vh,22px); }
.pre-open .choose{ flex:none; max-width:none; padding:0 50vw 0 0; }
.pre-open .choose-mid h2{ margin-bottom:10px; }

/* ALS title sits centered over the LEFT half while the gate is up;
   the classic mail icon + tagline belong to the OPENED view only */
.pre-open .logo-row{ align-self:stretch; margin-right:50vw; }
.pre-open .logo-mark,
.pre-open .logo-word p{ display:none; }

/* floating white star dots (gate only) */
.gate-stars{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .8s ease, visibility .8s;
}
.pre-open .gate-stars{ opacity:1; visibility:visible; }
.gate-stars i{
  position:absolute; left:var(--x); top:var(--y);
  width:calc(var(--s,3px) * 1.5); height:calc(var(--s,3px) * 1.5); border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,.6) 38%, rgba(255,255,255,0) 74%);
  box-shadow:0 0 7px 1.5px rgba(255,255,255,.4);
  animation:gsFloat var(--fd,13s) ease-in-out infinite alternate,
            gsTwinkle var(--td,6s) ease-in-out infinite;
  animation-delay:0s, var(--d1,0s);
}
@keyframes gsFloat{
  from{ transform:translate(0,0); }
  to{ transform:translate(var(--dx,8px), -24px); }
}
@keyframes gsTwinkle{
  0%,100%{ opacity:.16; }
  50%{ opacity:calc(var(--o,.35) + .35); }
}

/* @Ali Dehshiri credit, bottom-left of the gate */
.gate-credit{
  position:absolute; left:clamp(16px,3.5vw,44px); bottom:16px; margin:0; z-index:1;
  font-size:13.5px; font-weight:700; letter-spacing:1.6px;
  color:rgba(232,200,122,.72);
  text-shadow:0 0 12px rgba(0,0,0,.8);
  opacity:0; visibility:hidden; transition:opacity .8s ease, visibility .8s;
}
.pre-open .gate-credit{ opacity:1; visibility:visible; }
#landing > *:not(.gate-video):not(.gate-stars):not(.gate-credit):not(.gate-back){ position:relative; z-index:1; }

/* circular back button, top-left — only on the revealed landing, never on the gate */
.gate-back{
  position:fixed; top:22px; left:22px; z-index:5;
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; padding:0; cursor:pointer;
  background:rgba(12,12,18,.72); border:2.5px solid rgba(232,200,122,.85);
  box-shadow:0 8px 20px rgba(0,0,0,.55), inset 0 0 16px rgba(232,200,122,.14);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility .45s, transform .16s ease, box-shadow .16s ease;
}
.gate-back svg{ width:30px; height:30px; display:block; }
.gate-back svg path{ stroke:#f2d898; filter:drop-shadow(0 0 6px rgba(232,200,122,.6)); }
.gate-back:hover{
  transform:scale(1.07);
  box-shadow:0 10px 26px rgba(0,0,0,.6), 0 0 20px rgba(232,200,122,.5), inset 0 0 16px rgba(232,200,122,.28);
}
.gate-back:active{ transform:scale(.95); }
body:not(.pre-open) .gate-back{ opacity:1; visibility:visible; }
/* the two nav banners belong to the gate screen only */
body:not(.pre-open) #navVpn,
body:not(.pre-open) #navAi{ display:none; }
.logo-row{ display:flex; flex-direction:column; align-items:center; gap:4px; animation:riseIn .7s ease both; }
.logo-mark{ width:104px; height:89px; filter:drop-shadow(0 8px 16px rgba(232,200,122,.45)); animation:bob 4s ease-in-out infinite; }
.logo-word{ text-align:center; }
.logo-word h1{
  margin:0; font-size:clamp(56px,8.4vw,86px); font-weight:400; letter-spacing:1px; line-height:1.15; font-family:'Bellunora','Cinzel',cursive;
  background:linear-gradient(120deg,#f9ebc4 5%,#e8c87a 48%,#c9a24e 95%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.55));
}
.seal{
  display:inline-grid; place-items:center; width:.74em; height:.74em; margin-left:.3em;
  background:var(--cinnabar); color:#fff; -webkit-text-fill-color:#fff;
  border-radius:.12em; font-family:'Ma Shan Zheng',serif; font-size:.66em; font-weight:400;
  transform:rotate(-6deg); box-shadow:0 3px 8px rgba(0,0,0,.45);
  border:1.5px solid rgba(232,200,122,.75); line-height:1;
}
.seal.mini{ font-size:.78em; width:1.1em; height:1.1em; margin-left:.4em; vertical-align:.05em; }
.logo-word p{ margin:6px 0 0; font-size:15px; color:var(--ink-2); font-weight:700; }

.choose{
  flex:1; width:100%; max-width:1180px;
  display:flex; align-items:center; justify-content:center; gap:clamp(6px,3vw,44px);
  padding:8px 0 4px;
}
.char-slot{ position:relative; width:clamp(150px,19vw,250px); flex:none; }
.hero-card{
  position:relative; background:#141416; border:4px solid var(--ink); border-radius:24px;
  box-shadow:0 14px 0 rgba(6,6,10,.32), 0 26px 44px rgba(232,200,122,.45);
  transform:rotate(-4deg); animation:bob 5.2s ease-in-out infinite;
}
.hero-card > img{ display:block; width:100%; height:auto; border-radius:20px; }
.hero-live{
  position:absolute; right:-16px; bottom:-16px; width:clamp(74px,8vw,98px); aspect-ratio:1;
  border-radius:50%; overflow:hidden; background:#141416; border:4px solid var(--ink);
  box-shadow:0 6px 0 rgba(6,6,10,.5), 0 14px 26px rgba(154,220,255,.55);
}
.hero-live img{ width:100%; height:100%; object-fit:cover; display:block; }
.live-dot{
  position:absolute; top:4px; right:4px; width:16px; height:16px; border-radius:50%;
  background:#5ad68a; border:2.5px solid var(--ink);
  box-shadow:0 0 10px 3px rgba(90,214,138,.65); animation:pulse 1.6s ease infinite;
}
.charart{ width:clamp(150px,19vw,250px); height:auto; filter:drop-shadow(0 16px 22px rgba(232,200,122,.4)); }
.char-slot.right .hero-card{ transform:rotate(4deg); animation:bob 5.8s ease-in-out infinite reverse; }
.char-slot.right .hero-live{ right:auto; left:-16px; box-shadow:0 6px 0 rgba(6,6,10,.5), 0 14px 26px rgba(255,158,207,.55); }
.charart.left  { transform:rotate(-4deg); animation:bob 5.2s ease-in-out infinite; }
.charart.right { transform:rotate(4deg);  animation:bob 5.8s ease-in-out infinite reverse; }

.choose-mid{ text-align:center; max-width:560px; }
.choose-mid h2{
  margin:0 0 22px; font-size:clamp(24px,3.4vw,32px); font-weight:800; color:var(--ink);
  animation:riseIn .7s .15s ease both;
}
.stamp-row{ display:flex; gap:26px; justify-content:center; flex-wrap:wrap; }

/* postage-stamp buttons */
.stamp{
  position:relative; width:212px; padding:22px 16px 18px;
  background:linear-gradient(160deg,#1d2130 0%,#161c2e 55%,#121726 100%);
  border:4px solid var(--ink); border-radius:20px;
  box-shadow:0 9px 0 rgba(6,6,10,.8), 0 22px 34px rgba(154,220,255,.45);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  transition:transform .18s ease, box-shadow .18s ease;
  animation:stampIn .55s cubic-bezier(.2,1.5,.4,1) both;
}
.stamp.s-behzad{
  background:linear-gradient(160deg,#211a27 0%,#1d1522 55%,#16111f 100%);
  box-shadow:0 9px 0 rgba(6,6,10,.8), 0 22px 34px rgba(255,158,207,.45);
}
.stamp:nth-child(1){ transform:rotate(-2.5deg); animation-delay:.25s; }
.stamp:nth-child(2){ transform:rotate(2.5deg);  animation-delay:.4s; }
.stamp::after{
  content:''; position:absolute; inset:8px; border:3px dashed rgba(232,200,122,.5);
  border-radius:12px; pointer-events:none;
}
.stamp:hover{ transform:rotate(0deg) translateY(-7px) scale(1.04); }
.stamp:active{ transform:rotate(0deg) translateY(3px) scale(.99); box-shadow:0 4px 0 rgba(6,6,10,.8); }
.stamp-ava{
  width:78px; height:78px; border-radius:50%; overflow:hidden;
  background:#fff; border:4px solid var(--ink); box-shadow:0 4px 0 rgba(6,6,10,.35);
}
.stamp-ava svg{ width:100%; height:100%; display:block; }
.stamp-name{ font-size:31px; font-weight:800; letter-spacing:2.5px; color:var(--ink); line-height:1; }
.stamp-sub{ font-size:12.5px; font-weight:800; color:rgba(236,230,214,.8); letter-spacing:.4px; }
.choose-hint{ margin:24px 0 0; font-size:14.5px; font-weight:700; color:var(--ink-2); animation:riseIn .7s .55s ease both; }

/* footer */
.site-footer{ width:100%; max-width:900px; text-align:center; padding-top:2px; }
.sticker-row{ display:flex; justify-content:center; gap:13px; margin-bottom:9px; flex-wrap:wrap; }
.sticker{
  width:46px; height:46px; display:grid; place-items:center; font-size:23px;
  background:#191a24; border:2.5px solid rgba(232,200,122,.75); border-radius:14px;
  box-shadow:0 4px 0 rgba(6,6,10,.55), 0 6px 14px rgba(232,200,122,.18);
  transition:transform .18s ease;
  animation:stickerPop .5s cubic-bezier(.2,1.6,.4,1) both;
}
.sticker:nth-child(odd){ transform:rotate(-7deg); }
.sticker:nth-child(even){ transform:rotate(6deg); }
.sticker:hover{ transform:rotate(0) translateY(-6px) scale(1.14); animation:wiggle .5s ease; }
.sticker:nth-child(1){ animation-delay:.6s; } .sticker:nth-child(2){ animation-delay:.68s; }
.sticker:nth-child(3){ animation-delay:.76s; } .sticker:nth-child(4){ animation-delay:.84s; }
.sticker:nth-child(5){ animation-delay:.92s; } .sticker:nth-child(6){ animation-delay:1s; }
.sticker:nth-child(7){ animation-delay:1.08s; }
.made{ margin:0; font-size:16.5px; font-weight:800; color:var(--ink); }
.made b{ background:linear-gradient(120deg,var(--pink-dk),var(--blue-dk)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.made .sep{ color:var(--purple); margin:0 6px; }
.tiny{ margin:5px 0 0; font-size:12.5px; color:#9aa0aa; font-weight:700; opacity:1; }

/* ============================================================
   LOGIN MODAL
   ============================================================ */
.overlay{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:18px;
  background:rgba(8,9,14,.74); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  animation:fadeIn .2s ease both;
}
.login-card{
  position:relative; width:min(370px,94vw); text-align:center;
  background:var(--paper); border:4px solid var(--ink); border-radius:var(--r-lg);
  box-shadow:0 12px 0 rgba(6,6,10,.35), 0 34px 60px rgba(232,200,122,.45);
  padding:52px 28px 30px; animation:popIn .35s cubic-bezier(.2,1.5,.4,1) both;
}
.login-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:10px;
  border-radius:22px 22px 0 0;
  background:linear-gradient(90deg,rgba(232,200,122,0),rgba(232,200,122,.85) 14%,rgba(232,200,122,.85) 86%,rgba(232,200,122,0));
}
.login-card.shake{ animation:shake .45s ease; }
.x-btn{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  border:3px solid var(--ink); background:var(--paper); font-size:14px; font-weight:900; color:var(--ink);
  box-shadow:0 3px 0 rgba(6,6,10,.5); transition:transform .15s;
}
.x-btn:hover{ transform:rotate(90deg) scale(1.06); }
.login-ava{
  width:118px; height:118px; margin:0 auto 10px; border-radius:50%; overflow:hidden;
  background:linear-gradient(160deg,var(--blue-2),var(--pink-2));
  border:4px solid var(--ink); box-shadow:0 6px 0 rgba(6,6,10,.4);
}
.login-ava svg{ width:100%; height:100%; display:block; }
.login-card h3{ margin:6px 0 14px; font-size:25px; font-weight:800; }
.pw-label{ display:block; font-size:13px; font-weight:800; color:var(--ink-2); margin-bottom:7px; letter-spacing:.6px; text-transform:uppercase; }
.pw-wrap{ position:relative; margin-bottom:10px; }
#pwInput{
  width:100%; padding:14px 48px 14px 18px; font-size:17px; font-weight:700; font-family:inherit;
  color:var(--ink); background:#15161f; border:3px solid rgba(232,200,122,.55); border-radius:999px;
  box-shadow:inset 0 3px 0 rgba(232,200,122,.25); outline:none; letter-spacing:2px;
}
#pwInput:focus{ border-color:var(--purple); box-shadow:0 0 0 4px var(--purple-2); }
.eye-btn{
  position:absolute; right:7px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:none; background:transparent; font-size:19px; border-radius:50%;
}
.eye-btn:hover{ background:var(--purple-2); }
.pw-err{ margin:2px 0 8px; font-size:13.5px; font-weight:800; color:#e2619d; animation:fadeIn .2s; }
.pill-btn{
  width:100%; margin-top:6px; padding:14px 20px; font-size:17.5px; font-weight:800; color:#241c0c;
  background:linear-gradient(135deg,#f9e7bc,#e8c87a 55%,#c9a24e);
  border:3.5px solid var(--ink); border-radius:999px; box-shadow:var(--hard);
  transition:transform .12s, box-shadow .12s; letter-spacing:.4px;
}
.pill-btn:hover{ transform:translateY(-3px); box-shadow:0 8px 0 rgba(6,6,10,.85); }
.pill-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(6,6,10,.85); }
.pill-btn.small{ width:auto; padding:9px 18px; font-size:14.5px; margin-top:0; }
.pill-btn:disabled{ opacity:.6; cursor:wait; transform:none; }

/* ============================================================
   INTRO
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:70; display:grid; place-items:center; align-content:center; gap:16px;
  background:linear-gradient(160deg,#0e0f16,#1a1424 48%,#131a26);
  animation:fadeIn .25s ease both;
}
.intro.outro{ animation:fadeOut .4s ease both; }
.intro-env{ width:170px; animation:introPop .7s cubic-bezier(.2,1.6,.4,1) both; filter:drop-shadow(0 14px 24px rgba(232,200,122,.55)); }
.intro-env svg{ width:100%; display:block; }
.intro p{ margin:0; font-family:'Cinzel',serif; font-weight:700; font-size:18px; letter-spacing:1.5px; color:var(--ink-2); animation:fadeIn .5s .3s both; }

/* ============================================================
   MAILBOX SHELL
   ============================================================ */
#mailbox{
  height:100vh; height:100dvh; display:flex; flex-direction:column;
  max-width:960px; margin:0 auto; padding:14px clamp(10px,3vw,22px) 0;
  animation:riseIn .5s ease both;
}
.topbar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.me-chip,.peer-chip{
  display:flex; align-items:center; gap:10px; padding:7px 12px;
  background:var(--paper); border:3px solid var(--ink); border-radius:999px;
  box-shadow:0 4px 0 rgba(6,6,10,.4); min-width:0;
}
.peer-chip{ justify-self:end; }
.ava{
  width:46px; height:46px; flex:none; border-radius:50%; overflow:hidden;
  background:linear-gradient(160deg,var(--blue-2),var(--pink-2));
  border:3px solid var(--ink);
}
.ava svg{ width:100%; height:100%; display:block; }
.ava{ overflow:hidden; }
.ava img, .stamp-ava img, .login-ava img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.stamp-ava{ position:relative; }
.stamp-ava video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; opacity:0; transition:opacity .45s ease; }
.stamp-ava.video-on video{ opacity:1; }
.chip-txt{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.chip-txt.right{ text-align:right; }
.chip-txt b{ font-size:15.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chip-txt small{ font-size:11.5px; color:var(--ink-2); font-weight:700; display:flex; align-items:center; gap:5px; }
.chip-txt.right small{ justify-content:flex-end; }
.dot{ width:9px; height:9px; border-radius:50%; background:#5ad68a; box-shadow:0 0 0 3px rgba(90,214,138,.25); animation:pulse 1.6s ease infinite; display:inline-block; }
.dot.off{ background:#c9bcd8; box-shadow:none; animation:none; }
.icon-btn{
  width:34px; height:34px; flex:none; border-radius:50%; border:3px solid var(--ink);
  background:#241f2e; font-size:15px; font-weight:900; color:var(--ink);
  box-shadow:0 3px 0 rgba(6,6,10,.45); transition:transform .12s; margin-left:2px;
}
.icon-btn:hover{ transform:translateY(-2px) rotate(-8deg); }
.icon-btn.muted{ opacity:.55; }
.icon-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(6,6,10,.45); }
.mini-logo{ display:flex; flex-direction:column; align-items:center; gap:0; }
.mini-logo svg{ width:52px; height:45px; filter:drop-shadow(0 5px 9px rgba(232,200,122,.45)); }
.mini-logo span{
  font-size:19px; font-weight:400; letter-spacing:1px; font-family:'Bellunora','Cinzel',cursive;
  background:linear-gradient(120deg,#f9ebc4,#e8c87a);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.typing-line{
  align-self:center; margin-top:9px; padding:6px 16px; font-size:13.5px; font-weight:800; color:var(--ink-2);
  background:var(--paper); border:2.5px dashed var(--purple); border-radius:999px;
  animation:fadeIn .2s ease both;
}
.typing-line::after{ content:''; animation:dots 1.2s steps(4) infinite; }

/* tabs */
.tabs{ display:flex; justify-content:center; gap:14px; margin-top:12px; }
.tab{
  position:relative; padding:10px 26px; font-size:17px; font-weight:800; color:var(--ink-2);
  background:var(--paper); border:3px solid var(--ink); border-radius:999px;
  box-shadow:0 4px 0 rgba(6,6,10,.4); transition:transform .15s, box-shadow .15s, background .2s;
  display:flex; align-items:center; gap:8px;
}
.tab:hover{ transform:translateY(-3px); }
.tab.active{
  color:var(--gold);
  background:linear-gradient(135deg,rgba(232,200,122,.30),rgba(232,200,122,.10));
  box-shadow:0 5px 0 rgba(6,6,10,.55), 0 12px 22px rgba(232,200,122,.35);
  transform:translateY(-2px);
}
.badge{
  position:absolute; top:-9px; right:-9px; min-width:24px; height:24px; padding:0 6px;
  display:grid; place-items:center; font-style:normal; font-size:12.5px; font-weight:900; color:#fff;
  background:var(--pink-dk); border:2.5px solid #fff; border-radius:999px;
  box-shadow:0 3px 8px rgba(255,111,174,.6); animation:pop .35s cubic-bezier(.2,1.8,.4,1) both;
}
.list-caption{ text-align:center; margin:11px 0 0; font-size:13.5px; font-weight:800; color:var(--ink-2); letter-spacing:.3px; }

/* ---------------- letters list ---------------- */
.letters{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:18px;
  padding:18px clamp(2px,1.5vw,10px) 22px;
}
.letter{
  position:relative; width:min(640px,94%); padding:16px 20px 13px;
  background:var(--paper); border:3px solid var(--ink); border-radius:16px;
  box-shadow:0 7px 0 rgba(6,6,10,.28), 0 18px 30px rgba(232,200,122,.22);
  animation:letterIn .5s cubic-bezier(.2,1.3,.4,1) both;
}
.letter::before{
  content:''; position:absolute; top:0; left:0; right:0; height:9px;
  border-radius:13px 13px 0 0;
  background:linear-gradient(90deg,rgba(232,200,122,0),rgba(232,200,122,.85) 10%,rgba(232,200,122,.85) 90%,rgba(232,200,122,0));
}
.letter.mine{ margin-left:auto; background:linear-gradient(170deg,rgba(111,183,255,.13),rgba(255,255,255,0) 55%); transform:rotate(.32deg); }
.letter.theirs{ margin-right:auto; background:linear-gradient(170deg,rgba(255,127,184,.13),rgba(255,255,255,0) 55%); transform:rotate(-.32deg); }
.letter.newest{ animation:letterDrop .55s cubic-bezier(.2,1.5,.4,1) both; }

.letter-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-top:5px; }
.postmark{
  width:58px; height:58px; flex:none; border-radius:50%; transform:rotate(-9deg);
  border:2.5px dashed rgba(232,200,122,.5); outline:2px solid rgba(232,200,122,.28); outline-offset:3px;
  display:grid; place-content:center; text-align:center; color:rgba(232,200,122,.85);
  font-weight:900; line-height:1.05; user-select:none;
}
.postmark b{ font-size:15px; letter-spacing:.5px; }
.postmark small{ font-size:8.5px; text-transform:uppercase; letter-spacing:1px; margin-top:2px; }
.stamp-corner{
  position:relative;
  width:52px; height:62px; flex:none; background:#fff; padding:3px;
  border:2.5px solid var(--ink); border-radius:5px;
  box-shadow:0 3px 0 rgba(6,6,10,.35);
  display:grid; place-items:center; transform:rotate(4deg);
}
.letter.mine .stamp-corner{ transform:rotate(-4deg); }
.stamp-corner::before{
  content:''; position:absolute; width:46px; height:56px; border:2px dashed rgba(6,6,10,.4); border-radius:3px;
}
.stamp-corner .ava{ width:44px; height:44px; border-width:2.5px; margin-top:7px; }

.letter-body{ margin-top:7px; font-size:16.5px; line-height:1.6; font-weight:600; color:var(--ink); word-wrap:break-word; overflow-wrap:anywhere; white-space:pre-wrap; }
.letter-body .emoji-big{ font-size:26px; }
.letter-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:10px; padding-top:8px; border-top:2px dashed var(--line);
  font-size:12.5px; font-weight:800; color:var(--ink-2);
}
.letter-meta .seen{ color:#7fc4ff; }
.letter-meta .arrived{ color:var(--pink-dk); }
.meta-dot{ opacity:.5; }

/* empty state */
.empty{
  margin:auto 0; text-align:center; padding:40px 16px; color:var(--ink-2);
  animation:fadeIn .4s ease both;
}
.empty .empty-art{ width:130px; opacity:.9; filter:drop-shadow(0 10px 16px rgba(232,200,122,.35)); animation:bob 4.5s ease-in-out infinite; }
.empty h4{ margin:12px 0 4px; font-size:20px; color:var(--ink); }
.empty p{ margin:0; font-size:14.5px; font-weight:700; }

/* ---------------- media inside letters ---------------- */
.letter-media{ margin-top:10px; }
.letter-media img{
  display:block; max-width:100%; max-height:340px; border-radius:14px;
  border:3px solid rgba(255,127,184,.55); cursor:zoom-in; background:#14151e;
  box-shadow:0 5px 14px rgba(232,200,122,.3);
}
.letter-media video{ display:block; width:100%; max-height:330px; border-radius:14px; border:3px solid var(--blue-2); background:#000; }
.file-card{
  display:flex; align-items:center; gap:12px; margin-top:10px; padding:11px 13px;
  background:#15161f; border:3px dashed var(--purple); border-radius:16px;
}
.file-ico{
  width:46px; height:46px; flex:none; display:grid; place-items:center; font-size:23px;
  background:linear-gradient(160deg,#3a3524,#2a2233);
  border:3px solid var(--ink); border-radius:13px; box-shadow:0 3px 0 rgba(6,6,10,.4);
}
.file-meta{ min-width:0; flex:1; display:flex; flex-direction:column; }
.file-meta b{ font-size:14.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-meta small{ font-size:12px; color:var(--ink-2); font-weight:700; }
.dl-btn{
  flex:none; width:42px; height:42px; border-radius:50%; border:3px solid var(--ink);
  background:var(--mint); font-size:17px; box-shadow:0 3px 0 rgba(6,6,10,.5);
  display:grid; place-items:center; text-decoration:none; color:var(--ink); transition:transform .12s;
}
.dl-btn:hover{ transform:translateY(-3px); }

/* voice player */
.voice{
  display:flex; align-items:center; gap:12px; margin-top:10px; padding:11px 14px;
  background:linear-gradient(135deg,#221a28,#181d2b);
  border:3px solid var(--ink); border-radius:999px; box-shadow:0 4px 0 rgba(6,6,10,.3);
}
.voice-play{
  width:44px; height:44px; flex:none; border-radius:50%; border:3px solid var(--ink);
  background:linear-gradient(150deg,var(--my1),var(--my2)); font-size:17px;
  box-shadow:0 3px 0 rgba(6,6,10,.55); display:grid; place-items:center; transition:transform .12s;
}
.voice-play:hover{ transform:scale(1.08); }
.voice-bars{ flex:1; display:flex; align-items:center; gap:3.5px; height:34px; cursor:pointer; min-width:90px; }
.voice-bars i{
  flex:1; border-radius:99px; background:var(--purple-2); min-width:3px;
  transition:background .15s;
}
.voice-bars i.on{ background:linear-gradient(180deg,var(--pink),var(--pink-dk)); }
.voice.playing .voice-bars i.on{ animation:barDance .8s ease-in-out infinite alternate; }
.voice-bars i:nth-child(3n){ animation-delay:.15s; }
.voice-bars i:nth-child(3n+1){ animation-delay:.3s; }
.voice-time{ font-size:12.5px; font-weight:900; color:var(--ink-2); min-width:70px; text-align:right; font-variant-numeric:tabular-nums; }
.fx-badge{
  padding:3px 9px; font-size:11px; font-weight:900; color:var(--gold); white-space:nowrap;
  background:rgba(232,200,122,.12); border:1.5px solid rgba(232,200,122,.5); border-radius:999px;
}

/* ============================================================
   COMPOSER
   ============================================================ */
.composer{
  position:relative; margin:0 auto; width:100%; max-width:960px;
  padding:12px clamp(4px,1.5vw,10px) 8px; flex:none;
}
.composer::before{
  content:''; position:absolute; top:0; left:clamp(4px,1.5vw,10px); right:clamp(4px,1.5vw,10px); height:9px;
  border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,rgba(232,200,122,0),rgba(232,200,122,.85) 10%,rgba(232,200,122,.85) 90%,rgba(232,200,122,0));
  border:3px solid var(--ink); border-bottom:none;
}
.comp-row{
  display:flex; align-items:flex-end; gap:9px; padding:15px 13px 11px;
  background:var(--paper); border:3px solid var(--ink); border-top:none;
  border-radius:0 0 24px 24px; box-shadow:0 8px 0 rgba(6,6,10,.3), 0 18px 30px rgba(232,200,122,.25);
}
.round-btn{
  width:46px; height:46px; flex:none; border-radius:50%; border:3px solid var(--ink);
  background:#201f2c; font-size:19px; box-shadow:0 3px 0 rgba(6,6,10,.5);
  transition:transform .13s, box-shadow .13s, background .2s; display:grid; place-items:center;
}
.round-btn:hover{ transform:translateY(-4px) rotate(-6deg); background:var(--purple-2); }
.round-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(6,6,10,.5); }
.round-btn.on{ background:var(--yellow); transform:translateY(-2px); }
.round-btn.recording{
  background:linear-gradient(150deg,#ff8f8f,#ff5f7e); color:#fff;
  animation:recPulse 1s ease infinite; border-color:#c73a58;
}
#input{
  flex:1; min-width:0; resize:none; max-height:132px; min-height:46px;
  padding:11px 16px; font-family:inherit; font-size:16px; font-weight:600; line-height:1.5; color:var(--ink);
  background:#15161f; border:3px solid var(--line); border-radius:20px; outline:none;
  transition:border-color .18s, box-shadow .18s;
}
#input:focus{ border-color:var(--purple); box-shadow:0 0 0 4px rgba(232,200,122,.28); background:#1a1b26; }
#input::placeholder{ color:#6d6880; font-weight:600; }
.send-btn{
  width:50px; height:50px; flex:none; border-radius:50%; border:3.5px solid var(--ink);
  background:linear-gradient(150deg,var(--my1),var(--my2)); font-size:21px;
  box-shadow:0 4px 0 rgba(6,6,10,.6); transition:transform .13s, box-shadow .13s;
}
.send-btn:hover{ transform:translateY(-4px) rotate(12deg); }
.send-btn:active{ transform:translateY(3px) scale(.95); box-shadow:0 1px 0 rgba(6,6,10,.6); }
.send-btn:disabled{ opacity:.55; cursor:wait; }
.comp-hint{ text-align:center; font-size:12px; font-weight:700; color:#9aa0aa; opacity:1; margin:7px 0 4px; }

/* emoji panel */
.emoji-panel{
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  width:min(430px,94vw); max-height:254px; overflow-y:auto;
  background:var(--paper); border:3.5px solid var(--ink); border-radius:22px;
  box-shadow:0 8px 0 rgba(6,6,10,.3), 0 26px 46px rgba(232,200,122,.45);
  padding:12px; z-index:40;
  display:grid; grid-template-columns:repeat(8,1fr); gap:4px;
  animation:popIn .22s cubic-bezier(.2,1.5,.4,1) both;
}
.emoji-panel button{
  border:none; background:transparent; font-size:23px; border-radius:10px; padding:4px 0;
  transition:transform .1s, background .15s;
}
.emoji-panel button:hover{ background:var(--purple-2); transform:scale(1.28); }

/* attachment chip */
.chip-row{ display:flex; margin-bottom:8px; animation:fadeIn .18s ease both; }
.file-chip{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:#15161f; border:3px solid var(--purple); border-radius:999px;
  box-shadow:0 4px 0 rgba(6,6,10,.35); max-width:100%;
}
.chip-ico{ font-size:18px; }
.chip-meta{ display:flex; flex-direction:column; min-width:0; }
.chip-meta b{ font-size:13.5px; font-weight:900; max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chip-meta small{ font-size:11.5px; color:var(--ink-2); font-weight:700; }
.file-chip button{
  width:26px; height:26px; flex:none; border-radius:50%; border:2.5px solid var(--ink);
  background:#3a2530; font-size:11px; font-weight:900; color:var(--ink);
}
.file-chip button:hover{ background:#ff8fa8; }

/* recording bar */
.rec-row{
  display:flex; align-items:center; gap:12px; margin-bottom:8px; padding:10px 15px;
  background:linear-gradient(135deg,#2b1a22,#251626);
  border:3px dashed #ff6f91; border-radius:999px;
  animation:fadeIn .18s ease both; flex-wrap:wrap;
}
.rec-dot{ width:13px; height:13px; border-radius:50%; background:#ff4d6d; animation:pulse 1s ease infinite; flex:none; }
.rec-time{ font-weight:900; font-size:14.5px; color:#ff8098; min-width:44px; font-variant-numeric:tabular-nums; }
.fx-row{ flex-basis:100%; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.fx{
  padding:4px 11px; font-size:12px; font-weight:800; color:var(--ink-2);
  background:rgba(255,255,255,.05); border:2px solid rgba(232,200,122,.35); border-radius:999px;
  transition:transform .12s, background .15s;
}
.fx:hover{ transform:translateY(-2px); }
.fx.on{
  color:#241c0c; background:linear-gradient(135deg,#f9e7bc,#e8c87a);
  border-color:var(--gold); box-shadow:0 3px 0 rgba(6,6,10,.5);
}
.rec-bars{ display:flex; align-items:center; gap:3px; height:26px; flex:1; min-width:80px; }
.rec-bars i{ width:4px; height:30%; border-radius:99px; background:#ff8fa8; animation:barBounce .7s ease-in-out infinite alternate; }
.rec-bars i:nth-child(2){ animation-delay:.1s; } .rec-bars i:nth-child(3){ animation-delay:.2s; }
.rec-bars i:nth-child(4){ animation-delay:.3s; } .rec-bars i:nth-child(5){ animation-delay:.15s; }
.rec-bars i:nth-child(6){ animation-delay:.25s; } .rec-bars i:nth-child(7){ animation-delay:.05s; }
.rec-bars i:nth-child(8){ animation-delay:.35s; } .rec-bars i:nth-child(9){ animation-delay:.2s; }
.ghost-btn{
  padding:8px 15px; border-radius:999px; border:3px solid var(--ink); background:var(--paper);
  font-size:13.5px; font-weight:900; color:var(--ink-2); box-shadow:0 3px 0 rgba(6,6,10,.4);
}
.ghost-btn:hover{ background:#ffe9f0; }

/* upload progress */
.send-progress{ height:8px; margin-top:-2px; background:var(--purple-2); border-radius:0 0 10px 10px; overflow:hidden; border:2px solid var(--ink); border-top:none; }
.send-progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--pink),var(--purple),var(--blue)); transition:width .18s ease; }

/* ============================================================
   LIGHTBOX + TOASTS
   ============================================================ */

@keyframes mgBreathe{ 0%,100%{ transform:scale(1) translateY(0); } 50%{ transform:scale(1.025) translateY(-2px); } }

@keyframes mgSweep{ 0%,55%{ transform:translateX(-140%); } 75%,100%{ transform:translateX(140%); } }

/* landing live badges get the same treatment */
.hero-live > img{ animation:mgBreathe 5.5s ease-in-out infinite; transform-origin:50% 40%; }
.hero-live::after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.30) 50%,transparent 58%);
  transform:translateX(-140%); animation:mgSweep 7s ease-in-out infinite;
}


.lightbox{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:26px;
  background:rgba(6,6,10,.82); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:fadeIn .18s ease both;
}
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:18px; border:5px solid #fff; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.lightbox video{ width:min(900px,92vw); border-radius:18px; border:5px solid #fff; }
#lbClose{
  position:absolute; top:20px; right:22px; width:46px; height:46px; border-radius:50%;
  border:3px solid #fff; background:rgba(255,255,255,.15); color:#fff; font-size:19px; font-weight:900;
  transition:transform .15s, background .15s;
}
#lbClose:hover{ transform:rotate(90deg) scale(1.08); background:var(--pink-dk); }
.toasts{ position:fixed; left:50%; bottom:120px; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:9px; align-items:center; pointer-events:none; }
.toast{
  padding:11px 20px; font-size:14.5px; font-weight:900; color:var(--ink);
  background:var(--paper); border:3px solid var(--ink); border-radius:999px;
  box-shadow:0 5px 0 rgba(6,6,10,.5), 0 16px 28px rgba(232,200,122,.4);
  animation:toastIn .35s cubic-bezier(.2,1.5,.4,1) both; display:flex; align-items:center; gap:8px;
  max-width:min(480px,92vw);
}
.toast.ok{ border-color:#2fa86c; } .toast.err{ border-color:#ff4d6d; }
.toast.out{ animation:toastOut .3s ease both; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes fadeOut{ from{opacity:1} to{opacity:0} }
@keyframes riseIn{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }
@keyframes popIn{ from{opacity:0; transform:scale(.82)} to{opacity:1; transform:scale(1)} }
@keyframes pop{ 0%{transform:scale(0)} 70%{transform:scale(1.25)} 100%{transform:scale(1)} }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes wiggle{ 0%,100%{transform:rotate(0)} 30%{transform:rotate(-10deg)} 65%{transform:rotate(9deg)} }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-11px) rotate(-1.5deg)} 40%{transform:translateX(10px) rotate(1.5deg)} 60%{transform:translateX(-7px)} 80%{transform:translateX(6px)} }
@keyframes stampIn{ from{opacity:0; transform:translateY(34px) rotate(-8deg) scale(.85)} to{opacity:1} }
@keyframes stickerPop{ from{opacity:0; transform:scale(0) rotate(30deg)} }
@keyframes letterIn{ from{opacity:0; transform:translateY(20px)} to{opacity:1} }
@keyframes letterDrop{ 0%{opacity:0; transform:translateY(-34px) rotate(-5deg) scale(.9)} 60%{opacity:1} to{opacity:1; transform:rotate(.32deg)} }
@keyframes introPop{ 0%{opacity:0; transform:scale(.3) rotate(-14deg)} 60%{transform:scale(1.12) rotate(4deg)} 100%{opacity:1; transform:scale(1)} }
@keyframes pulse{ 0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.35); opacity:.7} }
@keyframes dots{ 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }
@keyframes recPulse{ 0%,100%{box-shadow:0 3px 0 rgba(6,6,10,.5), 0 0 0 0 rgba(255,79,109,.5)} 50%{box-shadow:0 3px 0 rgba(6,6,10,.5), 0 0 0 9px rgba(255,79,109,0)} }
@keyframes barBounce{ from{height:22%} to{height:92%} }
@keyframes barDance{ from{transform:scaleY(.75)} to{transform:scaleY(1.25)} }
@keyframes toastIn{ from{opacity:0; transform:translateY(24px) scale(.85)} to{opacity:1; transform:none} }
@keyframes toastOut{ to{opacity:0; transform:translateY(-14px) scale(.9)} }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .charart{ width:clamp(110px,16vw,170px); }
  .char-slot{ width:clamp(110px,16vw,170px); }
  .stamp{ width:186px; }
  .stamp-name{ font-size:27px; }
}
@media (max-width:700px){
  .charart, .char-slot{ display:none; }
  .choose{ padding-top:10px; }
  .stamp-row{ gap:16px; }
  .stamp{ width:min(240px,86vw); }
  .topbar{ grid-template-columns:1fr auto 1fr; }
  .chip-txt small{ display:none; }
  .me-chip,.peer-chip{ padding:5px 8px; }
  .ava{ width:40px; height:40px; }
  .tab{ padding:9px 17px; font-size:15.5px; }
  .letter{ width:97%; padding:14px 15px 11px; }
  .letter-body{ font-size:15.5px; }
  .postmark{ width:56px; height:56px; }
  .round-btn{ width:42px; height:42px; font-size:17px; }
  .send-btn{ width:46px; height:46px; }
  .comp-hint{ display:none; }
  .toasts{ bottom:104px; }
}

/* accessibility + weak-GPU relief: still UI, no sparkles */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .sparkles{ display:none !important; }
}


/* ---------------- "Open me" fantasy crest button ---------------- */
.openme{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  margin-top:30px; padding:0; border:none; cursor:pointer; background:none;
  text-decoration:none;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.5));
  transition:transform .18s ease, filter .18s ease;
}
.openme::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg,#f9ebc4,#e8c87a 45%,#a8823c);
  clip-path:polygon(8% 0,92% 0,100% 16%,100% 62%,50% 100%,0 62%,0 16%);
}
.openme:hover{ transform:translateY(-5px) scale(1.05); filter:drop-shadow(0 18px 30px rgba(232,200,122,.4)); }
.openme:active{ transform:translateY(2px) scale(.98); }
.om-face{
  position:relative; z-index:2; margin:5px; display:block; padding:16px 48px 20px;
  background:linear-gradient(170deg,#27200f,#120e07);
  clip-path:polygon(8% 0,92% 0,100% 16%,100% 62%,50% 100%,0 62%,0 16%);
  font-family:'Cinzel',serif; font-weight:700; font-size:24px; letter-spacing:3px;
  color:#f2d898; text-shadow:0 0 16px rgba(232,200,122,.7); white-space:nowrap;
}
.openme .wing{ position:absolute; top:16%; width:62px; height:auto; z-index:1; }
.openme .wing path{ fill:#e8c87a; stroke:#7a5c28; stroke-width:2.5; stroke-linejoin:round; }
.openme .wing.wl{ right:100%; margin-right:-6px; transform:scaleX(-1); transform-origin:center; animation:flutL 2.8s ease-in-out infinite; }
.openme .wing.wr{ left:100%; margin-left:-6px; transform-origin:center; animation:flutR 2.8s ease-in-out infinite; }
@keyframes flutL{ 0%,100%{ transform:scaleX(-1) rotate(0deg); } 50%{ transform:scaleX(-1) rotate(13deg); } }
@keyframes flutR{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(-13deg); } }
.spark-pop{
  position:fixed; z-index:999; pointer-events:none; color:#f2d898; font-size:18px;
  text-shadow:0 0 10px rgba(232,200,122,.8); animation:sparkPop .9s ease-out forwards;
}
@keyframes sparkPop{
  0%{ transform:translate(0,0) scale(.6); opacity:1; }
  100%{ transform:translate(var(--dx),var(--dy)) scale(1.25); opacity:0; }
}

/* ---------------- pre-open state: ONLY the "Open me" button ---------------- */
.pre-open .rv{ display:none !important; }
.pre-open .openme{ margin-top:0; }
.pre-open .om-face{ font-size:27px; padding:20px 56px 25px; letter-spacing:3.5px; }
.pre-open .choose{ padding-top:0; }
.openme.om-used{ pointer-events:none; animation:omVanish .7s cubic-bezier(.4,0,.7,1) forwards; }
@keyframes omVanish{
  0%{ opacity:1; transform:scale(1); }
  35%{ transform:scale(1.1); }
  100%{ opacity:0; transform:scale(.55) translateY(-30px); filter:drop-shadow(0 0 40px rgba(232,200,122,.95)); }
}

/* ---------------- push alert card ---------------- */
.push-card{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 140%);
  width:min(420px, 92vw); z-index:1200;
  background:linear-gradient(170deg,#27200f,#14100a);
  border:2px solid rgba(232,200,122,.55); border-radius:18px;
  padding:16px 18px; box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 30px rgba(232,200,122,.15);
  transition:transform .45s cubic-bezier(.2,.9,.25,1.2);
}
.push-card.show{ transform:translate(-50%, 0); }
.push-card b{ display:block; color:#f2d898; font-family:'Cinzel',serif; font-size:16px; margin-bottom:6px; }
.push-card span{ display:block; color:var(--ink-3); font-size:13.5px; line-height:1.55; }
.pc-btns{ display:flex; gap:10px; margin-top:12px; }
.pc-btns button{ flex:1; padding:10px 12px; border-radius:12px; font-weight:700; cursor:pointer; transition:all .15s; }
.pc-yes{ background:linear-gradient(160deg,#f9ebc4,#e8c87a); border:none; color:#241d10; }
.pc-yes:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.pc-no{ background:none; border:2px solid rgba(232,200,122,.3); color:var(--ink-3); }
.pc-no:hover{ border-color:rgba(232,200,122,.6); color:#f2d898; }

/* ---------------- perf polish ---------------- */
.hero-card > img{ opacity:0; transition:opacity .7s ease; }
.hero-card > img.loaded{ opacity:1; }
.letter-body{ cursor:copy; }

/* ---------------- duel game ---------------- */
.game-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 15px 9px; border:none; cursor:pointer;
  background:linear-gradient(160deg,#f9ebc4,#e8c87a 45%,#a8823c);
  clip-path:polygon(10% 0,90% 0,100% 22%,100% 62%,50% 100%,0 62%,0 22%);
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.4)); transition:transform .15s, filter .15s;
}
.game-btn span{ font-family:'Bellunora','Cinzel',cursive; font-size:17px; color:#241d10; letter-spacing:1px; padding:0 2px 4px; }
.game-btn:hover{ transform:translateY(-2px) scale(1.05); filter:drop-shadow(0 10px 18px rgba(232,200,122,.45)); }
.game-btn:active{ transform:translateY(1px) scale(.97); }
.game-ov{ position:fixed; inset:0; z-index:1400; background:rgba(8,6,14,.78); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:16px; }
.game-ov.hidden{ display:none; }
.game-card{ width:min(760px,96vw); max-height:92vh; overflow:auto; background:linear-gradient(170deg,#221b2e,#141020); border:2px solid rgba(232,200,122,.5); border-radius:24px; padding:18px 20px 22px; box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 50px rgba(232,200,122,.08); }
.game-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.game-title{ margin:0; flex:1; text-align:center; font-family:'Bellunora','Cinzel',cursive; font-size:33px; font-weight:400; color:#f2d898; text-shadow:0 0 18px rgba(232,200,122,.4); }
.game-round{ font-size:14px; color:#c9c0e0; letter-spacing:1px; }
.game-players{ display:flex; align-items:stretch; gap:10px; justify-content:center; margin-bottom:14px; }
.gp{ flex:1; display:flex; align-items:center; gap:10px; padding:12px 14px; border:1.5px solid rgba(232,200,122,.25); border-radius:16px; background:rgba(255,255,255,.03); }
.gp.me{ border-color:rgba(232,200,122,.55); }
.gp-ava{ width:46px; height:46px; border-radius:50%; border:2px solid rgba(232,200,122,.6); object-fit:cover; }
.gp-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.gp-info b{ font-family:'Cinzel',serif; color:#f6e7c8; font-size:15px; }
.gp-dots{ display:flex; gap:4px; }
.gdot{ width:12px; height:12px; border-radius:50%; background:#e8c87a; box-shadow:0 0 6px rgba(232,200,122,.5); transition:all .2s; }
.gdot.used{ background:rgba(0,0,0,.35); border:2px solid rgba(232,200,122,.45); box-shadow:none; }
.gdot.out{ background:#b0483f; }
.gp-st{ font-style:normal; font-size:12px; color:#a89fc0; }
.gp-st.win{ color:#8fe38f; font-weight:700; }
.gp-st.out{ color:#e08b84; font-weight:700; }
.gvs{ align-self:center; font-family:'Bellunora','Cinzel',cursive; font-size:26px; color:#c9a45c; }
.g-wait{ text-align:center; padding:28px 10px 34px; color:#a89fc0; font-size:14.5px; line-height:1.7; }
.g-wait b{ color:#f2d898; font-family:'Bellunora','Cinzel',cursive; font-size:18px; font-weight:400; }
.g-imgbox{ display:flex; justify-content:center; margin-bottom:10px; overflow:hidden; border-radius:16px; }
.g-imgbox img{ width:auto; max-width:min(430px,80vw); max-height:330px; height:auto; object-fit:contain; border-radius:16px; border:2px solid rgba(232,200,122,.4); background:radial-gradient(120% 120% at 50% 20%, #fbf1de 0%, #efdcb8 60%, #e2c793 100%); box-shadow:inset 0 0 40px rgba(120,90,40,.18), 0 12px 30px rgba(0,0,0,.45); transition:transform .6s ease, filter .6s ease; transform-origin:50% 45%; }
.g-go{ padding:12px 20px; border:none; border-radius:14px; cursor:pointer; font-family:'Cinzel',serif; font-weight:700; font-size:14px; letter-spacing:1px; color:#241d10; background:linear-gradient(160deg,#f9ebc4,#e8c87a 45%,#a8823c); transition:transform .12s, filter .12s; }
.g-go:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.g-go:disabled{ opacity:.45; cursor:not-allowed; }
.game-result{ margin-top:12px; text-align:center; padding:14px; border-radius:16px; border:2px solid rgba(232,200,122,.4); background:rgba(232,200,122,.07); }
.game-result b{ display:block; font-family:'Bellunora','Cinzel',cursive; font-size:26px; font-weight:400; color:#f2d898; margin-bottom:4px; }
.game-result .gr-sub{ display:block; font-size:13.5px; color:#a89fc0; margin-bottom:10px; }
.g-again{ padding:10px 22px; border:none; border-radius:12px; cursor:pointer; font-family:'Cinzel',serif; font-weight:700; color:#241d10; background:linear-gradient(160deg,#f9ebc4,#e8c87a); }
@media (max-width:560px){ .game-players{ flex-direction:column; } .gvs{ display:none; } .g-imgbox img{ height:220px; } .game-title{ font-size:24px; } }

/* ---------------- word duel: boards + keyboard ---------------- */
.g-imgbox img{ max-height:260px; }
.g-boards{ display:flex; gap:18px; justify-content:center; margin:6px 0 10px; }
.g-board-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.g-bname{ font-family:'Bellunora','Cinzel',cursive; font-size:17px; color:#f2d898; letter-spacing:1px; }
.g-board{ display:flex; flex-direction:column; gap:5px; }
.g-row{ display:flex; gap:5px; }
.g-cell{
  width:clamp(24px,3.4vw,34px); height:clamp(24px,3.4vw,34px);
  display:flex; align-items:center; justify-content:center;
  border-radius:7px; border:1.5px solid rgba(232,200,122,.28);
  background:rgba(255,255,255,.04); color:#f6e7c8;
  font-weight:800; font-size:clamp(12px,1.7vw,17px); text-transform:uppercase;
  transition:background .25s, border-color .25s;
}
.g-cell.g-typed{ border-color:rgba(232,200,122,.85); background:rgba(232,200,122,.12); }
.g-cell.g-g{ background:#4e9c58; border-color:#68bd73; color:#fff; }
.g-cell.g-y{ background:#c9a93a; border-color:#e0c15a; color:#191307; }
.g-cell.g-r{ background:#a94a42; border-color:#c66a61; color:#fff; }
.g-status{ text-align:center; font-size:14.5px; color:#c9c0e0; letter-spacing:.6px; padding:2px 0 8px; }
.g-status b{ color:#f2d898; }
.g-kbd{ display:flex; flex-direction:column; gap:6px; align-items:center; padding-bottom:4px; }
.g-krow{ display:flex; gap:5px; justify-content:center; }
.g-k{
  min-width:clamp(26px,4vw,34px); padding:9px 4px; border-radius:8px; cursor:pointer;
  border:1.5px solid rgba(232,200,122,.3); background:#2a2438; color:#f0e6d2;
  font-weight:800; font-size:14px; text-transform:uppercase; transition:all .12s;
}
.g-k:hover{ border-color:rgba(232,200,122,.7); transform:translateY(-1px); }
.g-k:active{ transform:translateY(1px); }
.g-k-wide{ padding:11px 20px; letter-spacing:1px; font-size:13.5px; min-width:74px; }
.g-k.k-g{ background:#4e9c58; border-color:#68bd73; color:#fff; }
.g-k.k-y{ background:#c9a93a; border-color:#e0c15a; color:#191307; }
.g-k.k-r{ background:#7e3a35; border-color:#a94a42; color:#e9c9c5; }
@media (max-width:700px){
  .g-boards{ gap:12px; }
  .g-cell{ width:clamp(20px,6vw,28px); height:clamp(20px,6vw,28px); font-size:clamp(11px,3.6vw,15px); border-radius:6px; }
  .g-k{ min-width:clamp(26px,8vw,34px); padding:10px 4px; font-size:13.5px; }
}

/* ---------------- game polish: motion + fps ---------------- */
.g-board{ perspective:700px; }
.g-cell{ backface-visibility:hidden; will-change:transform; }
.g-new{ animation:cellFlip .5s cubic-bezier(.2,.8,.3,1) both; }
@keyframes cellFlip{
  0%{ transform:rotateX(92deg) scale(.72); opacity:0; }
  55%{ transform:rotateX(-10deg) scale(1.04); opacity:1; }
  100%{ transform:none; opacity:1; }
}
.g-cursor{ border-color:#f2d898 !important; box-shadow:0 0 10px rgba(242,216,152,.5); animation:curBlink 1.05s steps(2, start) infinite; }
@keyframes curBlink{ 0%,100%{ box-shadow:0 0 10px rgba(242,216,152,.55);} 50%{ box-shadow:0 0 2px rgba(242,216,152,.15);} }
.g-shake{ animation:gShake .38s ease; }
@keyframes gShake{ 0%,100%{ transform:translateX(0);} 20%{ transform:translateX(-7px);} 45%{ transform:translateX(6px);} 70%{ transform:translateX(-3px);} }
.g-imgbox.g-pop{ animation:imgPop .55s cubic-bezier(.2,.9,.25,1.2) both; }
@keyframes imgPop{ 0%{ transform:scale(.9); opacity:.2;} 100%{ transform:none; opacity:1;} }
.game-result{ animation:resPop .5s cubic-bezier(.2,.9,.25,1.25) both; }
@keyframes resPop{ 0%{ transform:scale(.82) translateY(14px); opacity:0;} 100%{ transform:none; opacity:1;} }
.hero-card > img{ will-change:opacity; }

/* ---------------- gate: two buttons + GRS app ---------------- */
.gate-btns{ display:flex; flex-direction:column; align-items:center; gap:30px; margin-top:6px; }
.gate-btns .openme{ margin-top:0; }
.openme.om-cyan{ background:none; }
.openme.om-cyan::before{ background:linear-gradient(160deg,#d4f2ff,#8ed8ff 45%,#4a94c0); }
.openme.om-cyan .om-face{ color:#aeeaff; text-shadow:0 0 16px rgba(140,220,255,.75); background:linear-gradient(170deg,#12222c,#0a141c); }
.openme.om-cyan:hover{ filter:drop-shadow(0 18px 30px rgba(140,220,255,.45)); }
.openme.om-violet{ background:none; }
.openme.om-violet::before{ background:linear-gradient(160deg,#e9ddff,#b78bff 45%,#6d3fc4); }
.openme.om-violet .om-face{ color:#dfc8ff; text-shadow:0 0 16px rgba(183,139,255,.75); background:linear-gradient(170deg,#1e1430,#120a1e); }
.openme.om-violet:hover{ filter:drop-shadow(0 18px 30px rgba(183,139,255,.45)); }
.openme.om-violet .wing path{ fill:#b78bff; stroke:#4d2a86; }
.openme.om-cyan .wing path{ fill:#9fdcff; stroke:#4a7c96; }

#grs{ min-height:100vh; }
.grs-body{ max-width:860px; margin:0 auto; padding:20px 16px 60px; display:flex; flex-direction:column; align-items:center; gap:26px; }
.grs-hero{ text-align:center; margin-top:8px; }
.grs-glow{ font-size:34px; color:#f2d898; filter:drop-shadow(0 0 16px rgba(232,200,122,.7)); }
.grs-hero h2{
  font-family:'Bellunora','Cinzel',serif; font-weight:400; font-size:clamp(44px,7vw,64px);
  background:linear-gradient(180deg,#fdf3d9,#e8c87a 55%,#b98d3f);
  -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:2px;
}
.grs-hero p{ color:var(--ink3); font-size:14.5px; letter-spacing:1.2px; }
.grs-hero p b{ color:var(--gold); }
.grs-apps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; width:100%; }
.grs-apps .stamp{ width:auto; margin:0; padding:20px 8px 16px; }
.grs-ava{ display:flex; align-items:center; justify-content:center; background:transparent; border-color:rgba(232,200,122,.5); }
.grs-ico{ width:64px; height:64px; }
.grs-ico svg{ width:100%; height:100%; display:block; }
.grs-apps .stamp-name{ font-size:17px; letter-spacing:1.5px; color:var(--cream); }
.grs-cta{ margin-top:4px; text-decoration:none; }
.grs-note{ font-size:13px; color:var(--ink3); letter-spacing:.5px; margin-top:-10px; }
.grs-note b{ color:var(--cream); }
.grs-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:100%; }
.grs-step{
  background:rgba(255,255,255,.03); border:1px solid rgba(232,200,122,.25);
  border-radius:14px; padding:14px 13px; position:relative;
}
.grs-step b{ font-family:'Bellunora','Cinzel',serif; font-size:21px; color:var(--gold); position:absolute; top:-12px; left:12px; background:var(--ink); padding:0 8px; }
.grs-step p{ font-size:12.6px; line-height:1.55; color:#d8cfeb; padding-top:8px; }
.grs-step p b{ color:var(--gold); font-family:'Manrope',sans-serif; position:static; background:none; padding:0; }
.grs-console{
  width:100%; background:#0b0a12; border:1.5px solid rgba(232,200,122,.35);
  border-radius:16px; padding:14px 16px; font-family:ui-monospace,'Cascadia Mono',monospace;
  font-size:12.6px; line-height:1.75; color:#9fe8a0; min-height:150px; overflow:hidden;
}
.grs-console .bar{ display:flex; gap:6px; margin-bottom:8px; }
.grs-console .bar i{ width:11px; height:11px; border-radius:50%; display:block; }
.grs-console .cursor{ display:inline-block; width:8px; height:14px; background:#9fe8a0; vertical-align:-2px; animation:blink 1s steps(2) infinite; }
.grs-faq{
  width:100%; background:rgba(232,200,122,.05); border:1px dashed rgba(232,200,122,.35);
  border-radius:14px; padding:14px 18px; font-size:13px; color:#d8cfeb; line-height:1.75;
}
.grs-faq b{ color:var(--gold); font-family:'Cinzel',serif; }
.grs-foot{ font-size:12.5px; color:var(--ink3); text-align:center; }
.grs-foot b{ color:#c9a45c; }
@media (max-width:700px){
  .grs-apps{ grid-template-columns:repeat(2,1fr); }
  .grs-steps{ grid-template-columns:repeat(2,1fr); }
}

/* ---------------- live install progress ---------------- */
.grs-progress{
  width:100%; background:linear-gradient(170deg,#221b2e,#141020);
  border:2px solid rgba(232,200,122,.45); border-radius:18px; padding:18px 20px 16px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.gp-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.gp-head b{ flex:1; font-size:15px; color:var(--cream); letter-spacing:.4px; font-weight:700; }
.gp-pct{ font-family:'Bellunora','Cinzel',serif; font-size:26px; color:#f2d898; min-width:64px; text-align:right; }
.gp-dot{ width:12px; height:12px; border-radius:50%; background:#3a3448; flex:none; }
.gp-dot.on{ background:#6aaa64; box-shadow:0 0 10px rgba(106,170,100,.9); animation:gpPulse 1.2s ease-in-out infinite; }
.gp-dot.done{ background:#f2d898; box-shadow:0 0 12px rgba(242,216,152,.9); }
@keyframes gpPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.35);} }
.gp-bar{ height:20px; border-radius:999px; background:rgba(0,0,0,.45); border:1.5px solid rgba(232,200,122,.35); overflow:hidden; position:relative; }
.gp-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,#b98d3f,#e8c87a 55%,#fdf3d9);
  border-radius:999px; transition:width .7s cubic-bezier(.25,.8,.3,1);
  position:relative;
}
.gp-fill::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  animation:gpShine 1.6s linear infinite;
}
@keyframes gpShine{ from{ transform:translateX(-100%);} to{ transform:translateX(100%);} }
.gp-apps{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.gp-app{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 13px; border-radius:12px; font-size:13.5px;
  background:rgba(255,255,255,.04); border:1.5px solid rgba(232,200,122,.22);
  color:var(--ink3); transition:all .3s ease;
}
.gp-app b{ font-family:'Cinzel',serif; letter-spacing:.6px; font-size:13px; }
.gp-st{ font-style:normal; font-weight:800; font-size:16px; color:#5a5470; }
.gp-app.st-dl{ border-color:rgba(140,220,255,.7); color:#aeeaff; background:rgba(140,220,255,.08); }
.gp-app.st-dl .gp-st{ color:#8ed8ff; animation:gpPulse .9s ease-in-out infinite; }
.gp-app.st-install{ border-color:rgba(232,200,122,.8); color:#f2d898; background:rgba(232,200,122,.09); }
.gp-app.st-install .gp-st{ color:#e8c87a; animation:spin 1.6s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.gp-app.st-ok{ border-color:rgba(106,170,100,.8); color:#a9eca9; background:rgba(106,170,100,.1); }
.gp-app.st-ok .gp-st{ color:#8fe38f; }
.gp-app.st-fail{ border-color:rgba(224,139,132,.8); color:#f2aaa2; background:rgba(224,139,132,.1); }
.gp-app.st-fail .gp-st{ color:#e08b84; }
.gp-hint{ margin-top:13px; font-size:13px; color:var(--ink3); text-align:center; line-height:1.65; opacity:0; transition:opacity .4s; }
.gp-hint.show{ opacity:1; }
.gp-hint b{ color:var(--cream); }
@media (max-width:700px){ .gp-apps{ grid-template-columns:repeat(2,1fr); } }

/* ---- gate: match buttons to the gate video (black plates + warm glow) ---- */
.pre-open .openme .om-face{
  background:linear-gradient(170deg,#1a1a20,#0a0a0d 70%);
  box-shadow:inset 0 0 22px rgba(232,90,60,.22);
}
.pre-open .openme:hover{
  filter:drop-shadow(0 18px 30px rgba(232,140,60,.5)) drop-shadow(0 0 14px rgba(232,90,60,.45));
}
/* VPN / AI keep icy rims but on video-black plates */
.pre-open .openme.om-cyan::before{
  background:linear-gradient(160deg,#d4f2ff,#8ed8ff 45%,#4a94c0);
}
.pre-open .openme.om-cyan .om-face{ background:linear-gradient(170deg,#101418,#07080b 70%); }

/* mobile: video becomes a top banner, buttons below on black */
@media (max-width:640px){
  .gate-video{
    top:0; right:0; width:100vw; height:42vh;
    object-position:center 22%;
  }
  .pre-open #landing{ padding-top:42vh; }
  .pre-open .logo-row{ margin-right:0; }
  .pre-open .logo-word h1{ font-size:clamp(36px,9vw,52px); }
  .pre-open .choose{ padding-right:0; padding-top:0; align-items:center; }
  .pre-open .gate-btns{ gap:14px; }
  .pre-open .om-face{ font-size:19px; padding:13px 34px 16px; letter-spacing:2px; }
  .pre-open .gate-credit{ font-size:11.5px; bottom:10px; }
  /* keep the star layer out of the media zone on phones: slide the whole layer down */
  .pre-open .gate-stars{ top:42vh; }
}

/* ============================================================
   GAMES HUB
   ============================================================ */
.games-hub{
  position:fixed; inset:0; z-index:210; overflow-y:auto;
  background:
    radial-gradient(900px 500px at 50% -12%, rgba(183,139,255,.16), transparent 62%),
    radial-gradient(700px 480px at 12% 110%, rgba(109,63,196,.14), transparent 60%),
    radial-gradient(700px 480px at 88% 108%, rgba(232,200,122,.07), transparent 60%),
    #0e0a16;
  display:flex; flex-direction:column; align-items:center;
  padding:38px 18px 44px;
  animation:ghIn .38s cubic-bezier(.22,1,.36,1);
}
@keyframes ghIn{ from{ opacity:0; transform:scale(.965); } to{ opacity:1; transform:none; } }
.games-hub.hidden{ display:none; }
.gh-bg{ position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.gh-bg i{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.gh-bg i:nth-child(1){ width:420px; height:420px; left:-140px; top:-120px; background:rgba(183,139,255,.20); }
.gh-bg i:nth-child(2){ width:380px; height:380px; right:-130px; bottom:-110px; background:rgba(109,63,196,.24); }
.gh-bg i:nth-child(3){ width:260px; height:260px; left:55%; top:60%; background:rgba(232,200,122,.08); }
.gh-head{ position:relative; z-index:1; text-align:center; margin-bottom:30px; }
.gh-sword{ font-size:34px; display:block; filter:drop-shadow(0 0 16px rgba(183,139,255,.65)); animation:ghSway 3.6s ease-in-out infinite; }
@keyframes ghSway{ 0%,100%{ transform:rotate(-5deg); } 50%{ transform:rotate(5deg); } }
.gh-crest h2{
  font-family:'Bellunora','Cinzel',serif; font-weight:400;
  font-size:clamp(38px,6vw,56px); letter-spacing:2px; margin-top:2px;
  background:linear-gradient(180deg,#f3e9ff,#b78bff 55%,#7a4fd0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(183,139,255,.35));
}
.gh-crest p{ color:#9d8fc0; font-size:14px; letter-spacing:1.6px; margin-top:4px; }
.gh-me{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:12px; padding:7px 15px; border-radius:999px; width:max-content; margin-inline:auto;
  background:rgba(24,16,42,.72); border:1px solid rgba(183,139,255,.34);
  font-size:13px; letter-spacing:.6px; color:#cdbff2;
}
.gh-me-ava{ width:26px; height:26px; border-radius:50%; object-fit:cover; border:1.5px solid rgba(183,139,255,.65); }
.gh-me b{ color:#fff; font-family:'Cinzel',serif; letter-spacing:1.2px; }
.gh-me-ava.hidden, .gh-me.hidden{ display:none; }
.gh-x{ position:absolute; top:-6px; right:-46px; }
@media (max-width:560px){ .gh-x{ right:0; top:-40px; } }
.gh-rail{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:34px; align-items:stretch; justify-content:center;
  width:min(880px,100%);
}
/* ---- poster card ---- */
.gcard{
  position:relative; cursor:pointer; text-align:left;
  width:340px; max-width:92vw; padding:0; border:none; background:none;
  border-radius:22px; overflow:hidden;
  border:1.5px solid rgba(183,139,255,.4);
  background:linear-gradient(175deg,#1d1430,#120b1e);
  box-shadow:0 26px 60px rgba(0,0,0,.6), 0 0 0 rgba(183,139,255,0);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex; flex-direction:column;
}
.gcard:not(.ghost):hover{
  transform:translateY(-7px) scale(1.02);
  border-color:rgba(183,139,255,.85);
  box-shadow:0 34px 70px rgba(0,0,0,.68), 0 0 34px rgba(183,139,255,.28);
}
.gcard:not(.ghost):active{ transform:translateY(-2px) scale(.995); }
.gcard-art{ position:relative; display:block; aspect-ratio:3/2.15; overflow:hidden; }
.gcard-art img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.25) contrast(1.06) brightness(.86); transition:transform .35s ease, filter .35s ease; }
.gcard:not(.ghost):hover .gcard-art img{ transform:scale(1.06); filter:grayscale(0) contrast(1.1) brightness(.95); }
.gcard-shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,11,30,.10) 38%, rgba(18,11,30,.92) 100%); }
.gcard-tiles{ position:absolute; left:0; right:0; bottom:12px; display:flex; gap:6px; justify-content:center; }
.gt{
  font-family:'Cinzel',serif; font-weight:800; font-size:19px; line-height:34px;
  width:34px; height:34px; border-radius:7px; text-align:center; color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.5); animation:gtPop .5s ease both;
}
.gt:nth-child(2){ animation-delay:.07s; } .gt:nth-child(3){ animation-delay:.14s; }
.gt:nth-child(4){ animation-delay:.21s; } .gt:nth-child(5){ animation-delay:.28s; }
@keyframes gtPop{ from{ opacity:0; transform:translateY(8px) scale(.7); } to{ opacity:1; transform:none; } }
.gt.g{ background:#5b9c4e; } .gt.y{ background:#c9a53c; } .gt.r{ background:#b85450; } .gt.n{ background:#3a2f52; color:#b7a6d8; }
.gcard-body{ display:flex; flex-direction:column; gap:7px; padding:18px 20px 20px; }
.gcard-title{
  font-family:'Bellunora','Cinzel',serif; font-weight:400; font-size:30px; letter-spacing:1.5px;
  background:linear-gradient(180deg,#f3e9ff,#c9a9ff 60%,#8b5fe0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 20px rgba(183,139,255,.25);
}
.gcard-sub{ color:#a497c4; font-size:13.5px; line-height:1.5; }
.gcard-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:3px; }
.gcard-meta i{
  font-style:normal; font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  color:#cdbdf2; background:rgba(183,139,255,.12); border:1px solid rgba(183,139,255,.32);
  padding:4px 10px; border-radius:99px;
}
.gcard-cta{
  margin-top:11px; text-align:center; padding:12px 10px 13px; border-radius:13px;
  font-family:'Cinzel',serif; font-weight:700; font-size:15.5px; letter-spacing:2px; color:#efe4ff;
  background:linear-gradient(160deg,#7a4fd0,#4d2a86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px rgba(109,63,196,.4);
  transition:filter .18s ease;
}
.gcard:not(.ghost):hover .gcard-cta{ filter:brightness(1.16); }
/* ---- ghost (future game) ---- */
.gcard.ghost{
  width:230px; opacity:.62; cursor:default;
  border-style:dashed; border-color:rgba(157,143,192,.35);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  justify-content:center;
}
.gcard-empty{
  display:flex; align-items:center; justify-content:center; aspect-ratio:3/1.7;
  background:linear-gradient(170deg,#181026,#100a1a);
}
.gcard-q{
  font-family:'Cinzel',serif; font-size:52px; color:#4d3f6b;
  animation:qPulse 2.6s ease-in-out infinite;
}
@keyframes qPulse{ 0%,100%{ opacity:.45; transform:scale(1); } 50%{ opacity:.9; transform:scale(1.08); } }
.gcard.ghost .gcard-body{ padding:14px 16px 18px; }
.gcard.ghost .gcard-title{ font-size:22px; filter:grayscale(.4) brightness(.8); }
.gcard.ghost .gcard-sub{ font-size:12px; }
@media (max-width:700px){
  .gh-rail{ gap:22px; }
  .gcard{ width:min(340px,92vw); }
  .gcard.ghost{ width:min(230px,70vw); }
}

/* ============================================================
   GAMES HUB — dual CTA buttons
   ============================================================ */
.gcard-ctas{ display:flex; flex-direction:column; gap:9px; margin-top:11px; }
.gcard-cta{
  display:block; width:100%; margin:0; border:none; cursor:pointer;
  text-align:center; padding:12px 10px 13px; border-radius:13px;
  font-family:'Cinzel',serif; font-weight:700; font-size:15.5px; letter-spacing:2px; color:#efe4ff;
  background:linear-gradient(160deg,#7a4fd0,#4d2a86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px rgba(109,63,196,.4);
  transition:filter .18s ease, transform .15s ease;
}
.gcard-cta:hover{ filter:brightness(1.16); transform:translateY(-2px); }
.gcard-cta:active{ transform:translateY(1px); }
.gcard-cta.alt{
  background:linear-gradient(160deg,#3a2f52,#241b38);
  color:#cdbdf2; box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 6px 16px rgba(0,0,0,.35);
  border:1px solid rgba(183,139,255,.3);
}

/* ============================================================
   ARENA (public online multiplayer)
   ============================================================ */
body.arena-open{ overflow:hidden; }
.arena-ov{
  position:fixed; inset:0; z-index:220; overflow-y:auto;
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(94,168,255,.15), transparent 62%),
    radial-gradient(700px 480px at 12% 110%, rgba(109,63,196,.16), transparent 60%),
    radial-gradient(700px 480px at 88% 108%, rgba(255,120,120,.07), transparent 60%),
    #0b0a14;
  display:flex; justify-content:center;
  padding:40px 16px 50px;
  animation:ghIn .38s cubic-bezier(.22,1,.36,1);
}
.arena-ov.hidden{ display:none; }
.ar-bg{ position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.ar-bg i{ position:absolute; border-radius:50%; filter:blur(95px); }
.ar-bg i:nth-child(1){ width:420px; height:420px; left:-140px; top:-120px; background:rgba(94,168,255,.16); }
.ar-bg i:nth-child(2){ width:380px; height:380px; right:-130px; bottom:-110px; background:rgba(109,63,196,.2); }
.ar-bg i:nth-child(3){ width:260px; height:260px; left:58%; top:64%; background:rgba(255,140,140,.07); }
.ar-step{ position:relative; z-index:1; width:min(520px,100%); display:flex; flex-direction:column; align-items:center; gap:20px; }
#arMatch{ width:min(900px,100%); }
.ar-head{ text-align:center; }
.ar-swords{ font-size:32px; display:block; filter:drop-shadow(0 0 16px rgba(120,170,255,.6)); }
.ar-head h2{
  font-family:'Bellunora','Cinzel',serif; font-weight:400;
  font-size:clamp(32px,5vw,46px); letter-spacing:2px; margin-top:2px;
  background:linear-gradient(180deg,#eaf3ff,#8ec4ff 55%,#4d7fd0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 20px rgba(120,170,255,.3));
}
.ar-head p{ color:#93a0c4; font-size:14px; letter-spacing:1.2px; margin-top:4px; }
.ar-head.compact h2{ font-size:clamp(24px,3.6vw,32px); }
.ar-tabs{ display:flex; gap:10px; }
.ar-tab{
  font-family:'Cinzel',serif; font-weight:700; font-size:14.5px; letter-spacing:1.4px;
  padding:10px 22px; border-radius:12px; cursor:pointer; color:#93a0c4;
  background:rgba(255,255,255,.04); border:1px solid rgba(140,180,255,.22);
  transition:all .16s ease;
}
.ar-tab.active{ color:#eaf3ff; background:rgba(94,168,255,.16); border-color:rgba(140,180,255,.6); box-shadow:0 0 18px rgba(94,168,255,.18); }
.ar-form{
  width:100%; display:flex; flex-direction:column; gap:13px;
  background:linear-gradient(175deg,rgba(29,23,48,.9),rgba(16,12,28,.92));
  border:1.5px solid rgba(140,180,255,.3); border-radius:20px; padding:22px 22px 24px;
  box-shadow:0 24px 56px rgba(0,0,0,.55);
}
.ar-form.hidden{ display:none; }
.ar-form label{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase; color:#93a0c4; }
.ar-form input{
  padding:12px 14px; border-radius:11px; font-size:15.5px; font-family:inherit; color:#eef;
  background:rgba(10,8,20,.8); border:1.5px solid rgba(140,180,255,.25); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ar-form input:focus{ border-color:rgba(140,180,255,.75); box-shadow:0 0 14px rgba(94,168,255,.25); }
.ar-lbl{ font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase; color:#93a0c4; margin-top:2px; }
.ar-avatars{ display:grid; grid-template-columns:repeat(8,1fr); gap:8px; }
.ar-ava{
  padding:0; border-radius:12px; cursor:pointer; overflow:hidden; aspect-ratio:1;
  border:2px solid rgba(140,180,255,.22); background:#141022; transition:all .15s ease;
}
.ar-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.ar-ava:hover{ transform:translateY(-3px); border-color:rgba(140,180,255,.6); }
.ar-ava.sel{ border-color:#8ec4ff; box-shadow:0 0 16px rgba(94,168,255,.5); transform:translateY(-2px); }
.ar-btn{
  margin-top:4px; padding:13px 20px 14px; border:none; border-radius:13px; cursor:pointer;
  font-family:'Cinzel',serif; font-weight:700; font-size:16px; letter-spacing:2px; color:#0b0f1a;
  background:linear-gradient(160deg,#dcebff,#8ec4ff 48%,#4d7fd0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px rgba(77,127,208,.4);
  transition:filter .16s ease, transform .15s ease;
}
.ar-btn:hover{ filter:brightness(1.1); transform:translateY(-2px); }
.ar-btn:active{ transform:translateY(1px); }
.ar-btn:disabled{ opacity:.6; cursor:wait; transform:none; }
.ar-back{
  background:none; border:1px solid rgba(147,160,196,.35); color:#93a0c4; cursor:pointer;
  padding:9px 18px; border-radius:11px; font-size:13.5px; letter-spacing:1px; transition:all .15s ease;
}
.ar-back:hover{ color:#eef; border-color:rgba(147,160,196,.8); }
/* ---- lobby ---- */
.ar-me-chip{
  width:100%; display:flex; align-items:center; gap:13px;
  background:rgba(255,255,255,.035); border:1px solid rgba(140,180,255,.25);
  border-radius:16px; padding:12px 16px;
}
.ar-me-chip img{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid rgba(140,180,255,.6); }
.ar-me-txt{ display:flex; flex-direction:column; flex:1; }
.ar-me-txt b{ font-family:'Cinzel',serif; font-size:18px; color:#eef2ff; letter-spacing:1px; }
.ar-me-txt small{ color:#93a0c4; font-size:12.5px; letter-spacing:.8px; }
.ar-logout{ background:none; border:1px solid rgba(255,140,140,.35); color:#e09; cursor:pointer; padding:8px 14px; border-radius:10px; font-size:12.5px; transition:all .15s ease; }
.ar-logout:hover{ background:rgba(255,100,100,.1); }
.ar-queue{ width:100%; display:grid; grid-template-columns:1fr; gap:14px; }
.ar-q{
  display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  padding:20px 14px 18px; border-radius:18px;
  border:1.5px solid rgba(140,180,255,.35);
  background:linear-gradient(175deg,rgba(35,28,58,.95),rgba(16,12,28,.95));
  color:#eef2ff; transition:all .18s ease;
}
.ar-q:hover{ transform:translateY(-4px); border-color:rgba(140,180,255,.8); box-shadow:0 16px 34px rgba(0,0,0,.5), 0 0 26px rgba(94,168,255,.2); }
.ar-q.trio:hover{ border-color:rgba(255,180,120,.8); box-shadow:0 16px 34px rgba(0,0,0,.5), 0 0 26px rgba(255,160,100,.2); }
.ar-q-ic{ font-size:30px; filter:drop-shadow(0 0 12px rgba(140,180,255,.55)); font-family:'Bellunora','Cinzel',serif; }
.ar-q b{ font-family:'Cinzel',serif; font-size:19px; letter-spacing:2px; }
.ar-q small{ color:#93a0c4; font-size:12.5px; }
.ar-waiting{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.ar-waiting.hidden{ display:none; }
.ar-dots{ display:flex; gap:9px; }
.ar-dots i{ width:13px; height:13px; border-radius:50%; background:#8ec4ff; animation:arDot 1.1s ease-in-out infinite; }
.ar-dots i:nth-child(2){ animation-delay:.18s; background:#b78bff; }
.ar-dots i:nth-child(3){ animation-delay:.36s; background:#ffb47a; }
@keyframes arDot{ 0%,100%{ transform:scale(.6); opacity:.4; } 50%{ transform:scale(1.15); opacity:1; } }
.ar-waiting p{ color:#93a0c4; font-size:14.5px; letter-spacing:1px; }
.ar-top{ width:100%; background:rgba(255,255,255,.03); border:1px dashed rgba(183,139,255,.35); border-radius:16px; padding:14px 18px; }
.ar-top h3{ font-family:'Cinzel',serif; font-size:15px; letter-spacing:1.6px; color:#cdbdf2; margin-bottom:9px; }
.ar-top-list{ list-style:none; display:flex; flex-direction:column; gap:7px; counter-reset:arTop; }
.ar-top-list li{ display:flex; align-items:center; gap:11px; }
.ar-top-list img{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:1.5px solid rgba(183,139,255,.45); }
.ar-top-list b{ flex:1; font-family:'Cinzel',serif; font-size:15px; color:#eef2ff; letter-spacing:.8px; }
.ar-top-list small{ color:#93a0c4; font-size:12.5px; }
.ar-top-i{ font-family:'Cinzel',serif; font-weight:800; color:#b78bff; width:20px; text-align:center; }
.ar-top-empty{ color:#93a0c4; font-size:13.5px; font-style:italic; }
.ar-online-cnt{ color:#6f7ea4; font-size:12.5px; letter-spacing:1.2px; }
/* ---- match ---- */
.ar-players{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.ar-p{
  display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.04); border:1.5px solid rgba(140,180,255,.3);
  border-radius:14px; padding:8px 14px 8px 9px;
}
.ar-p.me{ border-color:rgba(232,200,122,.65); background:rgba(232,200,122,.07); }
.ar-p img{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid rgba(140,180,255,.5); }
.ar-p-name{ font-family:'Cinzel',serif; font-size:14.5px; color:#eef2ff; letter-spacing:.8px; }
.ar-p-dots{ display:flex; gap:4px; }
.ar-p-dots .gdot{ width:8px; height:8px; }
.ar-st{ font-style:normal; font-size:12px; color:#93a0c4; letter-spacing:.6px; min-width:52px; text-align:right; }
.ar-st.win{ color:#8ee08a; font-weight:700; }
.ar-st.out{ color:#e08484; }
.ar-st.off{ color:#e8c87a; font-style:italic; animation:arOff 1s ease-in-out infinite alternate; }
@keyframes arOff{ from{ opacity:.55; } to{ opacity:1; } }
.ar-boards{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin:8px 0 10px; }
.ar-status{ min-height:24px; text-align:center; color:#cfe0ff; font-size:15px; letter-spacing:.6px; }
.ar-status b{ color:#8ec4ff; }
.ar-result{
  margin-top:12px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  background:linear-gradient(175deg,rgba(35,28,58,.96),rgba(16,12,28,.96));
  border:1.5px solid rgba(183,139,255,.5); border-radius:20px; padding:22px 26px 24px;
  box-shadow:0 20px 50px rgba(0,0,0,.55), 0 0 34px rgba(183,139,255,.15);
}
.ar-result.hidden{ display:none; }
.ar-res-ic{ font-size:44px; filter:drop-shadow(0 0 20px rgba(255,220,140,.5)); }
.ar-res-t{ font-family:'Bellunora','Cinzel',serif; font-weight:400; font-size:30px; letter-spacing:1.5px; color:#f3e9ff; }
.ar-res-w{ color:#c9b8ee; font-size:15px; }
.ar-res-w em{ font-style:normal; color:#ffd9a0; font-family:'Cinzel',serif; }
.ar-res-sub{ color:#93a0c4; font-size:13px; }
.ar-res-btns{ display:flex; gap:12px; margin-top:8px; align-items:center; }
@media (max-width:700px){
  .ar-avatars{ grid-template-columns:repeat(4,1fr); }
  .ar-queue{ grid-template-columns:1fr; }
  .ar-boards{ gap:14px; }
}

/* ============================================================
   DRAW & GUESS — lobby pictionary
   ============================================================ */
#drawOv .ar-step{ width:min(680px,100%); }
#dwGame{ width:min(720px,100%); }
.dw-code{
  font-family:'Cinzel',serif; letter-spacing:4px; color:#ffd9a0;
  background:rgba(255,217,160,.1); border:1px dashed rgba(255,217,160,.5);
  border-radius:10px; padding:2px 12px 3px; user-select:all;
}
.dw-join{ display:flex; flex-direction:column; gap:10px; width:100%; }
.dw-join label{ display:flex; flex-direction:column; gap:6px; color:#a497c4; font-size:13px; letter-spacing:1px; }
.dw-join input{
  padding:12px 14px; border-radius:12px; border:1.5px solid rgba(140,180,255,.3);
  background:rgba(10,8,20,.7); color:#eef2ff; font-size:18px; letter-spacing:3px;
  text-transform:uppercase; text-align:center; font-family:'Cinzel',serif;
}
.dw-seats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; width:100%; }
.dw-seats li{
  display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:12px;
  background:rgba(20,14,36,.75); border:1px solid rgba(140,180,255,.22);
}
.dw-seats img{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.dw-seats b{ color:#eef2ff; font-size:14.5px; letter-spacing:.5px; }
.dw-seats small{ margin-left:auto; color:#8ee08a; font-size:12px; }
.dw-seats .host-tag{ color:#ffd9a0; font-size:11px; letter-spacing:1px; border:1px solid rgba(255,217,160,.5); border-radius:8px; padding:1px 7px; }
.dw-seats .offline{ opacity:.45; }
.dw-timer{ color:#ffd9a0; font-size:14px; letter-spacing:1px; min-height:20px; }
.dw-board{
  position:relative;
  width:100%; background:#fdfbf5; border-radius:16px;
  border:2px solid rgba(183,139,255,.5); box-shadow:0 14px 40px rgba(0,0,0,.5);
}
#dwCanvas{ display:block; width:100%; height:auto; touch-action:none; cursor:crosshair; border-radius:14px 14px 0 0; }
/* big center word reveal (drawer only) — pops, holds, fades out */
.dw-wordpop{
  position:absolute; inset:0; z-index:6; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; text-align:center;
  background:rgba(14,9,26,.90); backdrop-filter:blur(3px);
  animation:dwPopIn .28s cubic-bezier(.22,1,.36,1);
  pointer-events:none; padding:14px;
}
.dw-wordpop.hidden{ display:none; }
.dw-wordpop.fade{ animation:dwPopOut .8s ease forwards; }
.dw-wordpop-lbl{ font-size:13px; letter-spacing:5px; text-transform:uppercase; color:#b7a6d8; }
.dw-wordpop b{
  font-family:'Cinzel','Bellunora',serif; font-weight:800;
  font-size:clamp(38px,9vw,74px); letter-spacing:5px; line-height:1.05;
  color:#fff; text-transform:uppercase; word-break:break-word;
  text-shadow:0 0 26px rgba(183,139,255,.85), 0 4px 14px rgba(0,0,0,.7);
}
@keyframes dwPopIn{ from{ opacity:0; transform:scale(.86); } to{ opacity:1; transform:none; } }
@keyframes dwPopOut{ from{ opacity:1; } to{ opacity:0; } }
/* persistent word pill at the top of the game */
#dwWordBar{
  display:inline-flex; align-items:center; gap:9px; max-width:94%;
  margin:8px auto 0; padding:9px 20px; border-radius:999px;
  background:linear-gradient(180deg,rgba(40,26,66,.95),rgba(24,15,42,.95));
  border:1.5px solid rgba(183,139,255,.65);
  box-shadow:0 0 22px rgba(183,139,255,.30);
  font-size:15px; letter-spacing:1px; color:#cdbff2;
}
#dwWordBar .dw-wb-word{
  font-family:'Cinzel',serif; font-weight:800; font-size:24px; letter-spacing:3px;
  color:#fff; text-transform:uppercase; text-shadow:0 0 16px rgba(183,139,255,.75);
}
#dwWordBar .dw-wb-hint{
  font-family:'Cinzel',serif; font-weight:800; font-size:22px; letter-spacing:9px;
  color:#ffd9a0; text-shadow:0 0 14px rgba(255,217,160,.55);
}
@media (max-width:520px){ #dwWordBar{ padding:8px 14px; } #dwWordBar .dw-wb-word{ font-size:20px; letter-spacing:2px; } }
.dw-tools{
  position:sticky; bottom:0; z-index:7;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  padding:8px 12px; background:#efe9db; border-top:1px solid #d8cfae;
  border-radius:0 0 14px 14px;
  box-shadow:0 -6px 18px rgba(0,0,0,.28);
}
.dw-tools.hidden{ display:none; }
.dw-eraser.sel{ background:#333; color:#fff; border-color:#333; }
/* keep the canvas short enough on a phone that canvas + tools + chat all fit */
@media (max-width:700px){
  #dwCanvas{ max-height:38vh; object-fit:contain; }
  .dw-chat{ max-height:84px; }
}
.dw-colors{ display:flex; gap:6px; flex-wrap:wrap; }
.dw-colors button{
  width:26px; height:26px; border-radius:50%; border:2px solid rgba(0,0,0,.25);
  cursor:pointer; padding:0;
}
.dw-colors button.sel{ border-color:#111; box-shadow:0 0 0 2px #fff, 0 0 0 4px #111; }
.dw-sizes{ display:flex; gap:4px; align-items:center; }
.dw-sizes button{
  background:none; border:1px solid rgba(0,0,0,.25); border-radius:8px; cursor:pointer;
  width:32px; height:30px; color:#333; font-size:15px;
}
.dw-sizes button.sel{ background:#333; color:#fff; }
.dw-chat{
  list-style:none; margin:0; padding:10px 12px; width:100%; max-height:150px; overflow-y:auto;
  display:flex; flex-direction:column; gap:5px; background:rgba(10,8,20,.65);
  border:1px solid rgba(140,180,255,.2); border-radius:14px; font-size:13.5px;
}
.dw-chat li{ color:#dbe4ff; word-break:break-word; }
.dw-chat li b{ color:#8ec4ff; }
.dw-chat li.sys{ color:#ffd9a0; font-style:italic; }
.dw-guess{ display:flex; gap:8px; width:100%; }
.dw-guess input{
  flex:1; padding:12px 14px; border-radius:12px; border:1.5px solid rgba(140,180,255,.3);
  background:rgba(10,8,20,.7); color:#eef2ff; font-size:15px;
}
.dw-guess .ar-btn{ margin-top:0; padding:10px 18px 11px; font-size:14px; }
.dw-guess.disabled{ opacity:.45; pointer-events:none; }
.dw-sec{ width:100%; display:flex; flex-direction:column; gap:10px; }
.dw-sec h3{ margin:0; color:#c9b8ee; font-size:15px; letter-spacing:1.5px; font-family:'Cinzel',serif; }
.dw-rooms{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; width:100%; max-height:220px; overflow-y:auto; }
.dw-rooms li{ margin:0; }
.dw-room{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  padding:10px 14px; border-radius:13px; border:1px solid rgba(140,180,255,.28);
  background:rgba(20,14,36,.8); color:#eef2ff; transition:all .15s ease;
}
.dw-room:hover{ border-color:rgba(140,180,255,.65); transform:translateY(-2px); }
.dw-room b{ font-size:14.5px; letter-spacing:.4px; }
.dw-room small{ color:#93a0c4; font-size:12px; }
.dw-room .dw-join-btn{ margin-left:auto; color:#8ee08a; font-size:13px; letter-spacing:1px; white-space:nowrap; }
.dw-room-empty{ color:#6f7ea4; font-size:13px; padding:8px 4px; }
.dw-name-lbl{ display:flex; flex-direction:column; gap:6px; color:#a497c4; font-size:13px; letter-spacing:1px; }
.dw-name-lbl input{
  padding:11px 14px; border-radius:12px; border:1.5px solid rgba(140,180,255,.3);
  background:rgba(10,8,20,.7); color:#eef2ff; font-size:15px;
}
.dw-priv-lbl{ display:flex; align-items:center; gap:8px; color:#a497c4; font-size:13.5px; cursor:pointer; }
.dw-priv-lbl input{ width:17px; height:17px; accent-color:#9c36b5; }
.dw-time-track{ width:min(420px,90%); height:7px; margin:2px auto 0; border-radius:4px; background:rgba(140,180,255,.15); overflow:hidden; }
.dw-time-track i{ display:block; height:100%; width:100%; border-radius:4px; background:linear-gradient(90deg,#8ec4ff,#ffd9a0); transition:width 1s linear; }
@media (max-width:700px){ #dwCanvas{ cursor:crosshair; } }