/* DrawGuess main menu (the in-game look stays in style.css) */
:root{--bgtint:rgba(248,248,248,.62)}
html[data-theme=dark]{--bgtint:rgba(8,8,8,.7)}

/* background image layer (only shows when assets/img/bg.* exists) */
#bgimg{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1.2s}
#bgimg.on{opacity:1}
#bgimg::after{content:"";position:absolute;inset:0;background:var(--bgtint)}
body.hasbg .sh{opacity:.22}

/* fixed corner buttons */
#snd{position:fixed;top:14px;left:66px;z-index:20;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--s1);box-shadow:var(--sh1);cursor:pointer;display:grid;place-items:center;transition:transform .2s}
#snd svg{width:20px;height:20px}#snd:hover{transform:scale(1.08)}#snd:active{transform:scale(.92)}
#snd.mute{color:var(--mut)}#snd.mute .w1,#snd.mute .w2{opacity:.15}
#snd:focus-visible,#th:focus-visible,.nv:focus-visible,.tog:focus-visible,.seg button:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

/* shell */
main#home{display:flex;flex-direction:column;gap:18px;max-width:1240px;margin:auto;padding:18px 24px 32px;min-height:100%}
#mtop{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;animation:up .6s both cubic-bezier(.2,.8,.2,1)}
#mtop .logo{font-size:44px;letter-spacing:-1.5px}
#mtop .logo svg{bottom:-10px;height:12px}
#chips{display:flex;gap:10px;align-items:center;margin-inline-end:120px}
.chip,#chips .stat{display:flex;gap:7px;align-items:center;height:38px;padding:0 14px;border-radius:99px;background:var(--s1);border:1px solid var(--line);font-size:13px;color:var(--mut);box-shadow:var(--sh1);width:auto}
.chip b{color:var(--ink);font-weight:800;font-size:15px;min-width:1ch;text-align:center}
#lvc span{order:-1}#coin span{display:none}
#coin i,.cn{display:inline-block;width:14px;height:14px;border-radius:50%;background:#888888;box-shadow:0 0 0 3px rgba(255,200,107,.35);flex:none}
#coin.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.14)}}
#mbody{display:grid;grid-template-columns:208px minmax(0,1fr);gap:22px;align-items:start;flex:1}

/* nav */
#mnav{position:sticky;top:18px;display:grid;gap:4px;padding:8px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh1);z-index:2}
#nvi{position:absolute;border-radius:20px;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 12px 22px -10px var(--pri);transition:top .45s cubic-bezier(.3,1.25,.4,1),left .45s cubic-bezier(.3,1.25,.4,1),width .45s,height .45s;z-index:0}
.nv{position:relative;z-index:1;display:flex;align-items:center;gap:12px;border:0;background:none;padding:13px 16px;border-radius:20px;font-weight:700;font-size:15px;color:var(--mut);cursor:pointer;text-align:start;transition:color .25s,transform .15s;animation:up .5s calc(var(--i)*70ms + .45s) both cubic-bezier(.2,.8,.2,1)}
.nv svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.nv:hover{color:var(--ink)}.nv:active{transform:scale(.96)}
.nv.on{color:#fff}.nv.on svg{transform:scale(1.12) rotate(-6deg)}

/* panels */
#mpanels{position:relative;min-width:0}
.pnl{display:none;background:var(--s1);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh1);padding:26px}
.pnl.on{display:block;animation:pin .45s cubic-bezier(.2,.8,.2,1) both}
.pnl.out{display:block;position:absolute;inset:0 0 auto 0;animation:pout .18s both;pointer-events:none}
@keyframes pin{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes pout{to{opacity:0;transform:translateY(-8px)}}
#p-play{background:none;border:0;box-shadow:none;padding:0}
.ph{margin-bottom:20px}.ph h2{font-size:28px;font-weight:900;line-height:1.3}.ph p{color:var(--mut);max-width:60ch}
[data-s]{animation:rise .42s var(--d,0ms) both cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.note{margin-top:18px;color:var(--mut);font-size:13px}
.owned{display:flex;align-items:center;gap:6px;color:var(--ok);font-weight:700;font-size:13px}
.owned svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.btn .cn{margin-inline-end:6px;vertical-align:-2px}
.btn.shake{animation:shk .35s}
@keyframes shk{25%{transform:translateX(5px)}75%{transform:translateX(-5px)}}

/* play */
.pl-wrap{display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:44px;align-items:center}
#hm{display:grid;gap:14px}
#hm .tag{margin-top:0}

/* segmented + bars */
.sh-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.seg{display:flex;gap:4px;padding:4px;background:var(--s2);border-radius:99px}
.seg button{border:0;background:none;padding:0 18px;min-height:38px;border-radius:99px;font-weight:700;color:var(--mut);cursor:pointer;transition:background .25s,color .25s}
.seg button.on{background:var(--s1);color:var(--ink);box-shadow:var(--sh1)}
.sh-coins{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--mut)}.sh-coins b{color:var(--ink);font-size:18px}

/* shop */
.grid-shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.sc{display:grid;gap:5px;justify-items:center;text-align:center;padding:12px;border-radius:22px;background:var(--s2);border:2px solid transparent;transition:transform .2s,border-color .2s}
.sc:hover{transform:translateY(-3px)}
.sc.eq{border-color:var(--pri)}
.sc b{font-size:15px;margin-top:4px}.sc small{color:var(--mut);font-size:12px;margin-top:-4px}
.sc .btn{width:100%;margin-top:6px;padding:8px;min-height:40px;font-size:14px}
.sc .owned{min-height:40px;margin-top:6px}
.sc [data-low]{filter:saturate(.5);opacity:.85}
.sv{position:relative;width:100%;aspect-ratio:16/10;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.sv svg{width:78%}.sv .fr{width:78%;height:66%;border:6px solid;border-radius:10px}
.tagc{position:absolute;top:6px;inset-inline-start:6px;background:var(--pri);color:#fff;font-size:11px;font-weight:700;padding:1px 9px;border-radius:99px}
.sp{position:fixed;width:8px;height:8px;border-radius:50%;z-index:80;pointer-events:none;animation:spk .65s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes spk{to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}

/* leaderboard */
.podium{display:flex;justify-content:center;align-items:flex-end;gap:14px;margin:6px 0 20px;min-height:230px}
.pd{width:min(130px,29%);display:grid;justify-items:center;gap:2px;text-align:center}
.pd.e{visibility:hidden}
.pa{position:relative;width:58px;height:58px;border-radius:22px;display:grid;place-items:center;color:#fff;font-size:24px;font-weight:800;box-shadow:0 12px 20px -10px rgba(0,0,0,.5)}
.pd.p1 .pa{width:70px;height:70px;border-radius:26px;font-size:30px;box-shadow:0 0 0 4px #888888,0 14px 24px -10px rgba(255,170,0,.6)}
.cr{position:absolute;top:-24px;left:50%;width:30px;margin-left:-15px;color:#888888;animation:flt 2.4s ease-in-out infinite alternate}
.pd b{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}
.pd em{font-style:normal;font-weight:800;color:var(--pri);font-size:15px}
.pb{width:100%;display:grid;place-items:start center;padding-top:8px;border-radius:16px 16px 6px 6px;font-weight:900;font-size:24px;color:rgba(255,255,255,.95);transform-origin:bottom;animation:grow .7s .15s both cubic-bezier(.3,1.2,.4,1)}
@keyframes grow{from{transform:scaleY(.1);opacity:0}}
.p1 .pb{height:104px;background:linear-gradient(#888888,#555555)}
.p2 .pb{height:76px;background:linear-gradient(#cccccc,#888888)}
.p3 .pb{height:58px;background:linear-gradient(#aaaaaa,#666666)}
.pd.you .pa{outline:3px solid var(--pri);outline-offset:3px}
.lrs{display:grid;gap:8px}
.lr{display:flex;align-items:center;gap:12px;padding:8px 14px;border-radius:18px;background:var(--s2)}
.lr .rn{width:30px;text-align:center;font-weight:800;color:var(--mut)}
.lr b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr b small{color:var(--pri);font-weight:600}
.lr .gm{color:var(--mut);font-size:12px}
.lr em{font-style:normal;font-weight:800;color:var(--pri);min-width:48px;text-align:end}
.lr.you{box-shadow:0 0 0 2px var(--pri) inset}
.lr.pin{margin-top:8px;background:var(--s1);box-shadow:0 0 0 2px var(--pri) inset,var(--sh1)}
.empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:36px 12px;color:var(--mut)}
.empty svg{width:60px;fill:none;stroke:var(--pri2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px;animation:flt 3s ease-in-out infinite alternate}
.empty b{color:var(--ink);font-size:18px}.empty span{max-width:36ch}

/* missions */
.msl{display:grid;gap:12px}
.mi{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:22px;background:var(--s2);border:2px solid transparent;transition:border-color .3s}
.mi .mk{width:56px;height:56px;border-radius:18px;background:var(--s1);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.mi .mk svg{width:26px;fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mt{flex:1;min-width:0}.mt b{display:block}.mt small{display:block;color:var(--mut);font-size:13px;margin-bottom:6px}
.mi.rdy{border-color:var(--pri);animation:glow 1.8s ease-in-out infinite alternate}
@keyframes glow{to{box-shadow:0 0 0 6px rgba(0,0,0,.16)}}
.mi.done{opacity:.7}.mi.done .bar>div{background:var(--ok)}
.mi .btn{min-width:96px}

/* profile */
.pcard{display:flex;align-items:center;gap:20px;padding:20px;border-radius:24px;background:var(--s2);margin-bottom:14px}
.av.big{width:88px;height:88px;border-radius:30px;font-size:38px;box-shadow:0 14px 24px -12px rgba(0,0,0,.5)}
.pi{flex:1;min-width:0;display:grid;gap:4px}.pi b{font-size:22px}.pi small{color:var(--mut)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stc{padding:16px 8px;border-radius:20px;background:var(--s2);text-align:center}.stc b{display:block;font-size:28px;line-height:1.3}.stc small{color:var(--mut)}

/* settings modal */
.srow{display:flex;align-items:center;justify-content:space-between;gap:14px}.srow small{display:block;color:var(--mut);font-size:12.5px}
.tog{width:50px;height:28px;border-radius:99px;border:0;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background .25s}
.tog i{position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:inset-inline-start .25s cubic-bezier(.3,1.4,.5,1)}
.tog.on{background:var(--pri)}.tog.on i{inset-inline-start:25px}
.mbody input[type=range]{width:100%;margin-bottom:8px}

/* game: leave button + join transition */
#leave{flex:none}
#wipe{position:fixed;inset:0;z-index:90;background:linear-gradient(135deg,var(--pri),var(--pri2));pointer-events:none;animation:wp .75s cubic-bezier(.7,0,.3,1) forwards}
@keyframes wp{from{clip-path:circle(150% at 50% 50%)}to{clip-path:circle(0% at 50% 50%)}}

/* keep the corner buttons off the timer while playing */
.ingame #top{padding-inline-end:126px}
.ingame #th,.ingame #snd{width:40px;height:40px;top:18px}.ingame #th{left:18px}.ingame #snd{left:66px}

/* tablet */
@media(max-width:1000px){
 .pl-wrap{grid-template-columns:1fr;gap:20px}#art{order:-1;max-width:380px;margin:auto}
 #hm .tag{font-size:25px}
 #chips{margin-inline-end:0}
 main#home{padding-inline:16px}
}
/* phone */
@media(max-width:820px){
 main#home{padding:12px 12px calc(96px + env(safe-area-inset-bottom));gap:12px}
 #mtop{flex-wrap:wrap;padding-top:48px;min-height:0}
 #mtop .logo{font-size:38px}
 #chips{width:100%;margin:0;gap:8px;overflow-x:auto;padding-bottom:4px}
 #chips .stat{flex:none}
 #mbody{grid-template-columns:1fr}
 #mnav{position:fixed;inset:auto 10px calc(10px + env(safe-area-inset-bottom)) 10px;top:auto;grid-template-columns:repeat(5,1fr);gap:0;padding:6px;border-radius:26px;box-shadow:0 -4px 30px -8px rgba(0,0,0,.35);z-index:30}
 .nv{flex-direction:column;gap:2px;padding:8px 2px;font-size:11px;text-align:center;border-radius:20px}
 .nv svg{width:22px;height:22px}
 .pnl{padding:16px}.ph h2{font-size:23px}
 .ingame #top{padding-inline-end:92px}.ingame #th,.ingame #snd{width:34px;height:34px;top:14px}.ingame #th{left:12px}.ingame #snd{left:52px}
 .stats{grid-template-columns:1fr 1fr}
 .podium{gap:8px;min-height:200px}.pd{width:30%}
 .pcard{flex-direction:column;text-align:center}
 .lr .gm{display:none}
 .mi{flex-wrap:wrap}.mi .btn{width:100%}
 .grid-shop{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){#art{display:none}#mtop{padding-top:52px}}
@media(prefers-reduced-motion:reduce){#nvi{transition:none}.cr,.empty svg{animation:none}}

/* Account gate */
#auth-screen{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,rgba(31,22,78,.78),rgba(77,57,160,.7));backdrop-filter:blur(18px)}
#auth-screen.hide{display:none}
.auth-card{width:min(430px,100%);padding:30px;border:1px solid var(--line);border-radius:30px;background:var(--s1);box-shadow:0 30px 90px rgba(12,8,45,.3);display:grid;gap:14px;animation:pin .35s both}
.auth-brand{font-size:28px;font-weight:900;letter-spacing:-1px;color:var(--pri)}
.auth-brand span{color:var(--sky)}
.auth-card h1{font-size:24px;font-weight:900;margin:0}
.auth-card p,.auth-card small{color:var(--mut);font-size:13px;line-height:1.8;margin:0}
#auth-form{display:grid;gap:12px}
#auth-form label{display:grid;gap:6px;font-weight:700;font-size:13px}
#auth-form input{width:100%;border:1px solid var(--line);border-radius:14px;background:var(--s2);padding:12px 14px;color:var(--ink);outline:none}
#auth-form input:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(0,0,0,.14)}
#auth-error{min-height:20px;color:#555555;font-size:13px}
#auth-submit{width:100%;min-height:48px}
#auth-switch{border:0;background:none;color:var(--pri);font-weight:800;cursor:pointer;padding:8px}
.auth-card>small{text-align:center}
@media(max-width:480px){.auth-card{padding:22px;border-radius:24px}}


/* ================= DRAWGUESS LIQUID GLASS DESIGN LAYER ================= */
:root{--glass:rgba(255,255,255,.64);--glass-strong:rgba(255,255,255,.78);--glass-stroke:rgba(255,255,255,.78);--glass-shadow:0 22px 60px rgba(0,0,0,.11),0 3px 12px rgba(0,0,0,.055);--accent-glow:rgba(0,0,0,.22)}
html[data-theme="dark"]{--glass:rgba(30,30,30,.62);--glass-strong:rgba(35,35,35,.82);--glass-stroke:rgba(255,255,255,.10);--glass-shadow:0 22px 60px rgba(0,0,0,.30),0 3px 12px rgba(0,0,0,.18);--accent-glow:rgba(255,255,255,.10)}
body{background-image:radial-gradient(circle at 14% 8%,rgba(141,115,255,.12),transparent 28%),radial-gradient(circle at 88% 75%,rgba(64,183,220,.10),transparent 30%),radial-gradient(var(--dot) 1px,transparent 1.5px);background-size:auto,auto,28px 28px}
#bg .sh{opacity:.34;filter:blur(86px)}
#th,#snd{background:var(--glass-strong);backdrop-filter:blur(18px) saturate(155%);-webkit-backdrop-filter:blur(18px) saturate(155%);border-color:var(--glass-stroke);box-shadow:var(--glass-shadow)}
main#home{max-width:1320px;padding-top:24px}
#mtop{padding:8px 4px 16px;border-bottom:1px solid rgba(0,0,0,.12)}
#mtop .logo{font-size:48px;text-shadow:0 6px 24px rgba(0,0,0,.10)}
#chips .stat,#chips .chip{background:var(--glass);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--glass-stroke);box-shadow:0 8px 24px rgba(42,32,100,.06)}
#mnav,.pnl,.auth-card,.card,#top,#players,#chatbox,#tools{backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%)}
#mnav{background:var(--glass);border-color:var(--glass-stroke);box-shadow:var(--glass-shadow)}
.pnl:not(#p-play){background:var(--glass);border-color:var(--glass-stroke);box-shadow:var(--glass-shadow)}
#auth-screen{background:radial-gradient(circle at 18% 12%,rgba(0,0,0,.38),transparent 36%),linear-gradient(135deg,rgba(22,17,57,.78),rgba(63,46,130,.70));}
.auth-card{background:var(--glass-strong);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);border-color:var(--glass-stroke);box-shadow:0 34px 100px rgba(13,8,46,.34)}
.auth-brand{font-size:34px;letter-spacing:-1.5px}
.auth-card h1{letter-spacing:-.4px}
.auth-card input{background:rgba(255,255,255,.38)}
html[data-theme="dark"] .auth-card input{background:rgba(12,9,34,.35)}
.platform-intro{position:relative;isolation:isolate;max-width:none;margin:22px 0 30px;padding:clamp(24px,4vw,42px);border-radius:32px;border:1px solid var(--glass-stroke);background:linear-gradient(115deg,rgba(0,0,0,.13),var(--glass-strong) 64%,rgba(93,190,226,.10));box-shadow:var(--glass-shadow);backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%);overflow:hidden}
.platform-intro:after{content:"";position:absolute;inset:auto -3% -60% 48%;height:250px;background:radial-gradient(ellipse,rgba(126,100,239,.18),transparent 68%);z-index:-1;pointer-events:none}
.platform-intro .eyebrow{display:inline-flex;align-items:center;gap:8px}.platform-intro .eyebrow i{width:7px;height:7px;border-radius:50%;background:#555555;box-shadow:0 0 0 5px rgba(32,189,145,.12)}
.platform-intro h1{font-size:clamp(26px,3.6vw,42px);letter-spacing:-.8px;line-height:1.45;margin:12px 0 8px}.platform-intro h1 em{background:linear-gradient(90deg,#111111,#555555,#4a9fbd);-webkit-background-clip:text;background-clip:text;color:transparent}.platform-intro p{font-size:14px;line-height:2}
.platform-live{min-width:145px;border-radius:22px;background:var(--glass-strong);border-color:var(--glass-stroke);box-shadow:0 12px 35px rgba(50,40,110,.07)}
.game-section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:8px 0 16px}.game-section-head .eyebrow{color:var(--pri);font-size:11px;font-weight:900;letter-spacing:1px}.game-section-head h2{font-size:clamp(20px,2.5vw,27px);font-weight:900;margin-top:4px}.section-count{font-size:11px;color:var(--mut);padding:7px 12px;border:1px solid var(--glass-stroke);background:var(--glass);border-radius:99px}
.game-tiles{max-width:none;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.game-tile{min-width:0;min-height:220px;padding:26px;border-radius:30px;border:1px solid var(--glass-stroke);background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%);gap:22px;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,border-color .32s}
.game-tile:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.25),transparent 45%);opacity:.8}
.game-tile:hover{transform:translateY(-6px);box-shadow:0 28px 65px rgba(0,0,0,.16);border-color:rgba(255,255,255,.9)}
.draw-tile{background:linear-gradient(120deg,rgba(0,0,0,.06),var(--glass-strong) 70%)}.meme-tile{background:linear-gradient(120deg,rgba(0,0,0,.04),var(--glass-strong) 70%)}
.tile-art{position:relative;width:104px;height:104px;flex-basis:104px;border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(231,225,255,.5));box-shadow:0 18px 35px rgba(59,47,130,.12),inset 0 1px 0 rgba(255,255,255,.9);font-size:48px;overflow:hidden}
.tile-art:after{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.75);border-radius:23px}.tile-art span{position:relative;z-index:1;filter:drop-shadow(0 7px 5px rgba(34,26,80,.12));transition:transform .35s}.game-tile:hover .tile-art span{transform:translateY(-5px) rotate(-7deg)}
.draw-art i{position:absolute;width:85px;height:85px;border:1px solid rgba(0,0,0,.24);border-radius:50%;transform:translate(38px,36px)}.meme-art{background:linear-gradient(145deg,#f1f1f1,#dddddd)}.meme-art i{position:absolute;top:9px;right:12px;width:25px;height:25px;border-radius:50%;background:#888888;color:#fff;font-size:15px;font-style:normal;font-weight:900;display:grid;place-items:center}
.tile-copy{position:relative;z-index:1}.tile-copy h2{font-size:24px;letter-spacing:-.5px;margin:9px 0 5px}.tile-copy p{font-size:13px;line-height:2;margin:0 0 14px}.tile-state{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.15px;padding:6px 11px}.active-state{background:rgba(31,185,133,.12);color:#555555}.active-state i{width:6px;height:6px;border-radius:50%;background:#555555;box-shadow:0 0 0 4px rgba(32,185,129,.12)}.soon-state{background:rgba(237,150,83,.15);color:#555555}
.tile-action{display:inline-flex;align-items:center;gap:18px;border:0;border-radius:14px;padding:11px 16px;color:white;font-size:12px;font-weight:800;cursor:pointer;background:linear-gradient(115deg,#111111,#333333);box-shadow:0 10px 24px rgba(0,0,0,.25);transition:transform .2s,box-shadow .2s}.tile-action:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.33)}.tile-action b{font-size:18px;line-height:1}
.soon-note{display:inline-block;padding:8px 11px;border-radius:12px;background:rgba(237,150,83,.10);font-size:11px}
.home-footnote{display:flex;align-items:center;gap:13px;margin-top:24px;padding:16px 18px;border:1px solid var(--glass-stroke);border-radius:20px;background:var(--glass)}.footnote-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:12px;background:rgba(0,0,0,.12);color:var(--pri);font-size:20px}.home-footnote b,.home-footnote small{display:block}.home-footnote b{font-size:12px}.home-footnote small{font-size:11px;color:var(--mut)}
.site-footer{max-width:none;margin:30px 0 4px;border-color:rgba(0,0,0,.15)}
/* DrawGuess dedicated lobby hub */
.draw-hub{max-width:940px;margin:4px auto 0;padding:4px 2px 22px}.draw-hub-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px}.back-btn{border:1px solid var(--glass-stroke);background:var(--glass);color:var(--mut);border-radius:13px;padding:8px 13px;font-size:12px;font-weight:700;cursor:pointer;transition:.2s}.back-btn:hover{color:var(--ink);transform:translateX(3px)}.back-btn span{font-size:17px;vertical-align:-1px;margin-left:4px}.hub-game-tag{font-size:10px;letter-spacing:1.2px;font-weight:900;color:var(--pri);direction:ltr}.hub-game-tag i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#23bd91;margin-right:7px}
.draw-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 28px;margin-bottom:17px;border-radius:26px;border:1px solid var(--glass-stroke);background:linear-gradient(120deg,rgba(0,0,0,.14),var(--glass-strong));box-shadow:var(--glass-shadow)}.draw-hero h2{font-size:clamp(22px,3vw,31px);font-weight:900;margin:5px 0}.draw-hero h2 em{font-style:normal;color:var(--pri)}.draw-hero p{font-size:12px;color:var(--mut)}.draw-hero-mark{width:74px;height:74px;flex:none;display:grid;place-items:center;border-radius:24px;background:linear-gradient(145deg,#fff,rgba(225,218,255,.8));box-shadow:0 15px 30px rgba(0,0,0,.12);font-size:34px;transform:rotate(-8deg)}
.glass-card{border:1px solid var(--glass-stroke);background:var(--glass);border-radius:24px;box-shadow:var(--glass-shadow);backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%)}.player-name-card{display:flex;align-items:center;gap:12px;padding:13px 16px;margin-bottom:16px}.name-avatar{width:43px;height:43px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#111111,#555555);color:#fff;font-size:18px;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.24)}.name-copy{flex:1;min-width:0}.name-copy b,.name-copy small{display:block}.name-copy b{font-size:12px}.name-copy small{font-size:10px;color:var(--mut)}#name{width:min(175px,42%);min-height:39px;padding:8px 10px;font-size:12px;text-align:center;background:rgba(255,255,255,.35)}
.room-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 16px}.room-action{min-width:0;display:flex;align-items:center;gap:12px;text-align:right;padding:15px 14px;border:1px solid var(--glass-stroke);border-radius:20px;background:var(--glass);box-shadow:var(--glass-shadow);cursor:pointer;transition:transform .22s,box-shadow .22s,border-color .22s}.room-action:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(0,0,0,.13);border-color:rgba(255,255,255,.95)}.room-action:active{transform:scale(.98)}.room-action>span:nth-child(2){flex:1;min-width:0}.room-action b,.room-action small{display:block}.room-action b{font-size:13px}.room-action small{font-size:10px;color:var(--mut);line-height:1.7}.room-action>i{font-style:normal;color:var(--mut);font-size:18px}.action-icon{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:14px;background:rgba(0,0,0,.12);color:var(--pri);font-size:22px}.quick-action .action-icon{background:rgba(255,190,78,.18);color:#777777}.join-action .action-icon{background:rgba(63,156,215,.12);color:#555555}
.public-rooms-panel,.room-form-panel{padding:20px;margin-top:13px;animation:hubRise .35s both}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.panel-heading .eyebrow{font-size:9px;font-weight:900;letter-spacing:1.2px;color:var(--pri)}.panel-heading h3{font-size:18px;font-weight:900;margin:2px 0}.panel-heading p{font-size:11px;color:var(--mut)}.refresh-btn,.form-symbol{width:38px;height:38px;border-radius:13px;border:1px solid var(--glass-stroke);background:var(--glass-strong);display:grid;place-items:center;color:var(--pri);font-size:24px}.refresh-btn{cursor:pointer;transition:transform .25s}.refresh-btn:hover{transform:rotate(90deg)}
.public-room-list{display:grid;gap:9px}.public-room{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid rgba(0,0,0,.12);border-radius:17px;background:rgba(255,255,255,.34);animation:hubRise .3s both}.room-avatar{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(0,0,0,.18),rgba(0,0,0,.06));color:var(--pri);font-size:21px}.room-meta{flex:1;min-width:0}.room-meta b,.room-meta small{display:block}.room-meta b{font-size:12px}.room-meta small{font-size:10px;color:var(--mut)}.room-capacity{display:block;height:4px;max-width:160px;background:rgba(0,0,0,.1);border-radius:99px;margin-top:6px;overflow:hidden}.room-capacity i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#333333,#666666)}.room-join{min-height:36px;padding:5px 12px;font-size:11px}.room-join span{margin-right:6px}.rooms-loading,.rooms-empty{padding:24px 12px;text-align:center;color:var(--mut);font-size:12px}.rooms-empty{display:grid;justify-items:center;gap:7px}.rooms-empty>span{width:48px;height:48px;border-radius:17px;display:grid;place-items:center;background:rgba(0,0,0,.12);color:var(--pri);font-size:25px}.rooms-empty b{color:var(--ink);font-size:13px}.rooms-empty small{font-size:11px}.rooms-empty .btn{margin-top:8px;min-height:38px;font-size:11px}
.form-label{font-size:11px;font-weight:800;margin-bottom:8px}.visibility-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;padding:5px;border-radius:16px;background:rgba(0,0,0,.08)}.visibility-switch button{border:1px solid transparent;background:transparent;border-radius:12px;padding:10px;text-align:right;cursor:pointer;transition:.2s}.visibility-switch button b,.visibility-switch button small{display:block}.visibility-switch button b{font-size:12px}.visibility-switch button small{font-size:10px;color:var(--mut)}.visibility-switch button.on{background:var(--glass-strong);border-color:var(--glass-stroke);box-shadow:0 5px 16px rgba(0,0,0,.08)}.visibility-switch button.on b{color:var(--pri)}
.room-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.room-settings-grid label{display:grid;gap:6px}.room-settings-grid label span{font-size:11px;font-weight:700;color:var(--mut)}.room-settings-grid select{width:100%;min-height:44px;padding:9px 12px;border-radius:13px;border:1px solid var(--glass-stroke);background:var(--glass-strong);color:var(--ink);font:inherit;font-size:12px;outline:0}.room-settings-grid select:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--accent-glow)}.wide-setting{grid-column:1/-1}.create-room-submit{width:100%;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:12px}.create-room-submit span{font-size:20px}.join-code-row{display:flex;gap:9px}.join-code-row input{min-width:0;letter-spacing:7px;text-align:center;direction:ltr;text-transform:uppercase;font-size:21px;font-weight:900;background:var(--glass-strong)}.join-code-row .btn{flex:0 0 100px}.form-hint{display:block;margin-top:9px;font-size:10px;color:var(--mut)}
.hub-enter{animation:hubRise .45s cubic-bezier(.2,.8,.2,1) both}@keyframes hubRise{from{opacity:0;transform:translateY(12px)}}
/* Better glass surface treatment for the active game */
#game{isolation:isolate}#top,#players,#chatbox,#tools{background:var(--glass-strong);border-color:var(--glass-stroke);box-shadow:var(--glass-shadow)}#top{border-radius:22px}#players,#chatbox{border-radius:24px}#tools{border-radius:20px}#stage{border-color:rgba(255,255,255,.86);box-shadow:0 0 0 1px rgba(0,0,0,.16),0 24px 55px rgba(0,0,0,.18)}.ov{background:rgba(248,248,248,.82);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}html[data-theme="dark"] .ov{background:rgba(8,8,8,.82)}.code{background:var(--glass-strong);border-color:rgba(0,0,0,.45);box-shadow:0 12px 30px rgba(0,0,0,.10)}.lob{padding:8px}.room-lobby-kicker{padding:5px 12px;border-radius:99px;background:rgba(0,0,0,.12);color:var(--pri);font-size:11px;font-weight:800}
/* Customizable image surfaces */
body.has-login-bg #auth-screen{background-image:linear-gradient(135deg,rgba(20,14,54,.72),rgba(56,39,122,.62)),var(--login-bg);background-size:cover;background-position:center}body.has-draw-bg #game{background-image:linear-gradient(135deg,rgba(248,248,248,.72),rgba(248,248,248,.86)),var(--draw-bg);background-size:cover;background-position:center;border-radius:24px}html[data-theme="dark"] body.has-draw-bg #game{background-image:linear-gradient(135deg,rgba(8,8,8,.76),rgba(8,8,8,.88)),var(--draw-bg)}
@media(max-width:760px){
 main#home{padding:12px 12px calc(100px + env(safe-area-inset-bottom))}.platform-intro{margin:14px 0 20px;padding:20px;border-radius:24px}.platform-intro h1{font-size:23px}.platform-intro p{font-size:12px}.platform-live{min-width:94px;padding:10px 12px;border-radius:16px}.platform-live b{font-size:19px}.game-section-head{margin:4px 0 12px}.section-count{font-size:9px;padding:6px 8px}.game-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.game-tile{min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:13px;border-radius:20px}.tile-art{width:54px;height:54px;flex-basis:54px;border-radius:17px;font-size:28px}.tile-art:after{inset:5px;border-radius:13px}.tile-copy h2{font-size:15px;margin:7px 0 4px}.tile-copy p{font-size:10px;line-height:1.75;margin-bottom:10px;min-height:52px}.tile-state{font-size:8px;padding:5px 7px}.tile-action{width:100%;justify-content:space-between;padding:9px 10px;font-size:10px;border-radius:11px}.soon-note{font-size:9px;padding:7px}.home-footnote{margin-top:14px;padding:12px;border-radius:16px}.home-footnote small{font-size:10px}.draw-hub{padding:0 0 15px}.draw-hub-top{margin-bottom:13px}.draw-hero{padding:17px;border-radius:20px}.draw-hero h2{font-size:21px}.draw-hero p{font-size:10px}.draw-hero-mark{width:55px;height:55px;border-radius:18px;font-size:26px}.player-name-card{padding:10px 11px;gap:8px}.name-avatar{width:38px;height:38px}.name-copy b{font-size:10px}.name-copy small{font-size:9px}#name{width:38%;font-size:10px}.room-actions{grid-template-columns:1fr;gap:8px}.room-action{padding:11px;border-radius:16px}.action-icon{width:37px;height:37px;border-radius:12px}.room-action b{font-size:12px}.room-action small{font-size:9px}.public-rooms-panel,.room-form-panel{padding:14px;border-radius:19px}.panel-heading h3{font-size:16px}.public-room{padding:9px;gap:8px}.room-avatar{width:34px;height:34px}.room-meta small{font-size:9px}.room-join{padding:5px 9px;min-height:34px}.room-settings-grid{gap:9px}.room-settings-grid select{font-size:11px;min-height:41px}.join-code-row input{font-size:18px}.join-code-row .btn{flex-basis:84px}.glass-card{backdrop-filter:blur(14px) saturate(145%);-webkit-backdrop-filter:blur(14px) saturate(145%)}
}
@media(max-width:370px){.platform-live{min-width:78px;padding:8px}.game-tile{padding:10px}.tile-copy p{min-height:64px}.section-count{display:none}.join-code-row{gap:6px}}
@media(prefers-reduced-motion:reduce){.game-tile,.room-action,.tile-art span,.back-btn,.refresh-btn{transition:none!important;animation:none!important}.game-tile:hover,.room-action:hover{transform:none}}

/* Brand asset slots */
.brand-logo-img{display:block;width:176px;height:54px;object-fit:contain;object-position:right center}.brand-fallback{display:none;font-size:inherit;font-weight:900;color:var(--pri)}.auth-brand img{display:block;width:170px;max-width:70%;height:58px;object-fit:contain;object-position:right center}.auth-brand .brand-fallback{font-size:30px}.logo{height:58px;display:flex;align-items:center}.auth-brand{min-height:58px;display:flex;align-items:center}
@media(max-width:820px){.brand-logo-img{width:142px;height:45px}.logo{height:48px}}

.code b{letter-spacing:7px}

.report-open{position:fixed;z-index:30;top:12px;right:12px;border:1px solid var(--line);background:var(--s1);color:var(--ink);border-radius:14px;padding:8px 13px;box-shadow:var(--sh1);font:700 13px Estedad,Tahoma;cursor:pointer}
.report-modal{position:fixed;z-index:100;inset:0;background:#100b25a8;display:grid;place-items:center;padding:16px;backdrop-filter:blur(8px)}
.report-modal.hide{display:none}.report-card{position:relative;width:min(460px,100%);max-height:90vh;overflow:auto;background:var(--s1);color:var(--ink);border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--sh2);display:grid;gap:12px}
.report-card h2{font-size:22px}.report-card p,.report-card small{color:var(--mut);font-size:13px}.report-card label{display:grid;gap:5px;font-weight:700;font-size:13px}.report-card select,.report-card textarea{width:100%;border:1px solid var(--line);background:var(--s2);color:var(--ink);border-radius:12px;padding:11px;font:inherit}.report-card textarea{min-height:85px;resize:vertical}.report-close{position:absolute;left:15px;top:12px;border:0;background:transparent;font-size:26px;color:var(--mut);cursor:pointer}

/* Connected platform controls and moderation notices */
.platform-stat-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:-12px 0 28px}
.platform-stat-strip>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 17px;border:1px solid var(--glass-stroke);border-radius:17px;background:var(--glass);box-shadow:var(--glass-shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.platform-stat-strip b{font-size:20px;font-weight:900;color:var(--pri)}.platform-stat-strip span{font-size:11px;color:var(--mut)}
#site-announcement{position:relative;z-index:4;max-width:900px;margin:8px auto;padding:11px 16px;border-radius:14px;background:var(--glass-strong);border:1px solid var(--glass-stroke);text-align:center;font-weight:800;box-shadow:var(--glass-shadow)}#site-announcement.hidden{display:none}
#maintenance-banner{position:fixed;z-index:250;inset:0 0 auto 0;padding:11px 16px;text-align:center;background:#333333;color:#fff;font-size:13px;font-weight:800;box-shadow:0 8px 26px #0003}
.account-warning{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px auto 14px;padding:12px 15px;max-width:980px;border-radius:16px;border:1px solid rgba(220,160,55,.4);background:rgba(230,170,54,.12);color:var(--ink)}.account-warning b{color:#555555}.account-warning span{font-size:12px;flex:1}.account-warning button{border:1px solid var(--line);background:var(--glass);border-radius:10px;padding:6px 11px;font-size:11px;color:var(--ink);font-weight:800}
@media(max-width:820px){.platform-stat-strip{gap:7px;margin:-8px 0 17px}.platform-stat-strip>div{padding:10px;border-radius:13px;display:grid;gap:0}.platform-stat-strip b{font-size:17px}.platform-stat-strip span{font-size:9px}}
@media(max-width:380px){.platform-stat-strip span{font-size:8px}}


/* Monochrome overrides for every main-menu surface */
:root{--bgtint:rgba(255,255,255,.68);--glass:rgba(255,255,255,.72);--glass-strong:rgba(255,255,255,.88);--glass-stroke:rgba(0,0,0,.10);--glass-shadow:0 22px 60px rgba(0,0,0,.09),0 3px 12px rgba(0,0,0,.04);--accent-glow:rgba(0,0,0,.10)}
html[data-theme="dark"]{--bgtint:rgba(8,8,8,.78);--glass:rgba(24,24,24,.72);--glass-strong:rgba(30,30,30,.9);--glass-stroke:rgba(255,255,255,.12);--glass-shadow:0 22px 60px rgba(0,0,0,.38),0 3px 12px rgba(0,0,0,.2);--accent-glow:rgba(255,255,255,.10)}
body{background-image:radial-gradient(var(--dot) 1px,transparent 1.5px)!important}
#mtop{border-color:var(--line)!important}#mtop .logo{text-shadow:none!important}
.nv.on{background:var(--ink)!important;color:var(--bg)!important}
html[data-theme="dark"] .nv.on{background:#f2f2f2!important;color:#111!important}
.tile-action,.back-btn,.primary,.btn-primary{background:linear-gradient(135deg,var(--ink),var(--mut))!important;color:var(--bg)!important}
.platform-intro,.game-tile,.platform-live,.home-footnote,.auth-card{border-color:var(--glass-stroke)!important}
.platform-intro{background:linear-gradient(115deg,rgba(0,0,0,.045),var(--glass-strong) 68%)!important}
html[data-theme="dark"] .platform-intro{background:linear-gradient(115deg,rgba(255,255,255,.06),var(--glass-strong) 68%)!important}
.platform-intro h1 em{background:none!important;color:var(--ink)!important;-webkit-text-fill-color:currentColor!important}
.draw-tile,.meme-tile{background:linear-gradient(120deg,rgba(0,0,0,.045),var(--glass-strong) 70%)!important}
html[data-theme="dark"] .draw-tile,html[data-theme="dark"] .meme-tile{background:linear-gradient(120deg,rgba(255,255,255,.06),var(--glass-strong) 70%)!important}
.tile-art{background:linear-gradient(145deg,var(--s1),var(--s2))!important}
.draw-art i{border-color:rgba(0,0,0,.16)!important}
html[data-theme="dark"] .draw-art i{border-color:rgba(255,255,255,.18)!important}
#auth-screen{background:linear-gradient(135deg,rgba(0,0,0,.82),rgba(45,45,45,.72))!important}
.footnote-icon{background:var(--s2)!important;color:var(--ink)!important}