/* Hangman Vault – Richard Sim © */
@font-face{font-family:Outfit;src:url(fonts/Outfit.ttf);font-weight:100 900;font-display:swap}
@font-face{font-family:GeistMono;src:url(fonts/GeistMono.ttf);font-weight:100 900;font-display:swap}
:root{--bg:#0b1220;--bg2:#0f172a;--card:#111a2e;--card2:#16213a;--line:#24324f;--line2:#334466;--ink:#e6edf7;--mut:#94a3b8;--cyan:#22d3ee;--cyan2:#0891b2;--yellow:#facc15;--ok:#22c55e;--bad:#f43f5e;--amber:#f59e0b;--t0:#f43f5e;--t1:#3b82f6;--t2:#22c55e;--t3:#eab308}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
html,body{margin:0;min-height:100%;font-family:Outfit,'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);background:radial-gradient(1200px 700px at 80% -10%,#15305a55,transparent 60%),radial-gradient(900px 600px at -10% 110%,#0e3b4a44,transparent 60%),linear-gradient(180deg,#0b1220,#0a101c);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:40px 40px;z-index:0;mask-image:linear-gradient(180deg,#000,transparent 85%)}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none;font-size:inherit}
input,textarea{font-family:inherit;font-size:17px;color:var(--ink)}
.hide{display:none!important}
.chip{position:absolute;top:10px;right:12px;z-index:400;background:var(--yellow);color:#1a1a1a;font-weight:700;padding:9px 15px;border-radius:999px;text-decoration:none;box-shadow:0 4px 14px #facc1533,0 2px 6px #0007;min-height:42px;display:flex;align-items:center;font-size:15px;white-space:nowrap;transition:transform .15s,background .15s}
.chip:hover{background:#fde047;transform:translateY(-1px)}.chip .short{display:none}
.scr{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:none;flex-direction:column}.scr.on{display:flex;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.foot{text-align:center;color:var(--mut);font-size:13px;padding:8px 0 10px;margin-top:auto;letter-spacing:.4px}
/* home */
.hwrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:64px 16px 6px;text-align:center}
.emblem{width:110px;height:110px;cursor:pointer;filter:drop-shadow(0 10px 30px #22d3ee33);animation:spin 18s linear infinite}
.emblem svg{width:100%;height:100%;display:block}.emblem.sm{width:46px;height:46px;cursor:default}
@keyframes spin{to{transform:rotate(360deg)}}
.logo{margin:0;font-size:68px;line-height:1;letter-spacing:-1px;font-weight:800}
.lg1{color:var(--ink)}.lg2{background:linear-gradient(90deg,var(--cyan),#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{color:var(--mut);font-size:21px;font-weight:500}
.age{display:inline-block;background:#22d3ee1a;color:#a5f3fc;font-weight:600;font-size:14px;padding:4px 12px;border-radius:999px;border:1px solid #22d3ee55;letter-spacing:.3px}
.agenote{margin:0 0 6px;font-weight:600;color:#a5f3fc}
.intro{max-width:560px;color:#cbd5e1;font-size:17px;margin:2px 0 6px;line-height:1.45}
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(980px,100%)}
.mbtn{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;border:1px solid var(--line2);background:linear-gradient(180deg,var(--card2),var(--card));text-align:left;transition:transform .15s,border-color .15s,box-shadow .15s;min-height:92px;box-shadow:0 10px 30px #0006}
.mbtn:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 12px 34px #22d3ee22}
.mbtn:active{transform:translateY(1px)}
.mbtn .ic{font-size:30px;width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none;background:#ffffff0d;border:1px solid var(--line2)}
.mbtn b{display:block;font-size:21px;font-weight:700}.mbtn small{font-size:14px;color:var(--mut)}
.c1 .ic{background:#22d3ee22;border-color:#22d3ee66}.c2 .ic{background:#facc1522;border-color:#facc1566}.c3 .ic{background:#a78bfa22;border-color:#a78bfa66}
.cont{background:var(--cyan);color:#06202a;border-radius:999px;padding:10px 26px;font-size:18px;font-weight:700;box-shadow:0 6px 20px #22d3ee44}
.hlinks{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.hlinks button{background:#ffffff08;color:#cbd5e1;border:1px solid var(--line2);border-radius:999px;padding:9px 15px;font-size:15px;font-weight:500;min-height:42px;transition:border-color .15s,color .15s}
.hlinks button:hover{border-color:var(--cyan);color:#fff}
/* pages */
.pwrap{width:min(1100px,100%);margin:0 auto;padding:62px 14px 10px;display:flex;flex-direction:column;gap:14px}
.phead{display:flex;align-items:center;gap:12px}.phead h2{margin:0;font-size:30px;font-weight:700;letter-spacing:-.3px}
.back{width:44px;height:44px;border-radius:12px;background:var(--card2);border:1px solid var(--line2);flex:none;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.back:hover{border-color:var(--cyan)}
.back svg{width:20px;height:20px}.back svg path{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.back.sm{width:40px;height:40px}
.lead{color:#cbd5e1;font-size:17px;margin:0}
.offnote{background:#facc1514;border:1px solid #facc1566;color:#fde68a;border-radius:14px;padding:12px 16px;font-size:17px;font-weight:500}
.ocards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ocard{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line2);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px #0006}
.ocard h3{margin:0;font-size:22px}.ocard p{margin:0;font-size:15px;color:var(--mut)}.oic{font-size:36px}
.o1{border-top:3px solid var(--cyan)}.o2{border-top:3px solid var(--yellow)}.o3{border-top:3px solid #a78bfa}
.codebox input{width:100%;font-family:GeistMono,monospace;font-size:38px;letter-spacing:14px;text-align:center;text-transform:uppercase;font-weight:700;border:1px solid var(--line2);border-radius:14px;padding:8px 4px;background:#0a1222;color:var(--ink)}
.codebox input:focus,.fld input:focus,.fld textarea:focus,.lic input:focus,.tnames input:focus,#solveIn:focus{outline:2px solid var(--cyan);outline-offset:1px}
.fld{display:flex;flex-direction:column;font-size:15px;gap:5px;color:#cbd5e1}.fld input,.fld textarea{border:1px solid var(--line2);border-radius:12px;padding:9px 12px;min-height:46px;background:#0a1222}
.fld textarea{font-size:17px;line-height:1.5;resize:vertical;font-family:GeistMono,monospace}.grow{flex:1}
.lic{font-size:15px}.lic input{width:100%;font-family:GeistMono,monospace;font-size:17px;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--line2);border-radius:12px;padding:9px 12px;background:#0a1222;color:var(--ink)}
.lic .ok{background:#22c55e14;border:1px solid #22c55e66;border-radius:12px;padding:8px 10px}.lic .ok button{text-decoration:underline;font-size:14px;color:var(--cyan)}
.big-btn{background:var(--cyan);color:#04222b;border-radius:14px;padding:12px 18px;font-size:19px;font-weight:700;min-height:52px;transition:transform .12s,filter .12s,box-shadow .12s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 6px 18px #22d3ee33;border:1px solid transparent}
.big-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.big-btn:active{transform:translateY(1px)}
.big-btn.go{background:var(--ok);color:#04220f;box-shadow:0 6px 18px #22c55e33}.big-btn:disabled{filter:grayscale(1);opacity:.5;cursor:not-allowed;transform:none}
.big-btn.red{background:#f43f5e;color:#fff;box-shadow:none}.big-btn.blue{background:#1e3a5f;color:#e0f2fe;border-color:#3b82f6;box-shadow:none}.big-btn.white{background:#ffffff0d;color:var(--ink);border-color:var(--line2);box-shadow:none}
.err{color:#fda4af;font-weight:500;min-height:1.2em;font-size:15px}
.sbox{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line2);border-radius:18px;padding:16px;box-shadow:0 10px 30px #0005}
.sbox h3{margin:0 0 12px;font-size:20px;display:flex;align-items:center;gap:10px}
.num{width:26px;height:26px;border-radius:8px;background:#22d3ee22;color:var(--cyan);display:inline-flex;align-items:center;justify-content:center;font-size:15px;border:1px solid #22d3ee55}
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.pk{display:flex;gap:10px;align-items:center;text-align:left;border:1px solid var(--line2);border-radius:14px;padding:8px 10px;background:#0c1527;min-height:58px;font-size:16px;font-weight:600;position:relative;transition:border-color .15s,background .15s,transform .15s}
.pk:hover{border-color:var(--pc,var(--cyan))}
.pk .pi{font-size:22px;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;background:color-mix(in srgb,var(--pc,#22d3ee) 18%,transparent);border:1px solid color-mix(in srgb,var(--pc,#22d3ee) 45%,transparent)}
.pk small{display:block;font-weight:400;font-size:12.5px;color:var(--mut)}
.pk.on{background:color-mix(in srgb,var(--pc,#22d3ee) 14%,#0c1527);border-color:var(--pc,var(--cyan));box-shadow:0 0 0 1px var(--pc,var(--cyan)) inset,0 6px 18px #0006}
.mwrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.mwrow .lab{font-weight:600;color:#cbd5e1}
.mwrow .pk{min-width:180px}.pk.add{border-style:dashed;background:transparent}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid var(--line2);border-radius:12px;padding:8px 14px;background:#0c1527;font-size:16px;font-weight:600;min-height:46px;line-height:1.15;transition:border-color .15s,background .15s}
.seg button:hover{border-color:var(--cyan)}
.seg button small{display:block;font-size:12px;font-weight:400;color:var(--mut)}
.seg button.on{background:#22d3ee1f;border-color:var(--cyan);color:#cffafe;box-shadow:0 0 0 1px var(--cyan) inset}
.orow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0}.olab{width:160px;font-weight:600;font-size:16px;color:#cbd5e1}
.tnames{display:flex;gap:8px;flex-wrap:wrap}.tnames input{width:150px;border:1px solid var(--line2);border-left:5px solid;border-radius:10px;padding:7px 10px;min-height:44px;font-size:16px;background:#0a1222}
.tnames input:nth-child(1){border-left-color:var(--t0)}.tnames input:nth-child(2){border-left-color:var(--t1)}.tnames input:nth-child(3){border-left-color:var(--t2)}.tnames input:nth-child(4){border-left-color:var(--t3)}
.hint{font-size:14.5px;color:var(--mut);margin:6px 0 0}.example{font-size:14.5px;margin-top:8px;color:var(--mut)}
.sgo{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.sgo .big-btn{min-width:200px}
/* my words */
.mwtop{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
.mwlists{display:flex;gap:6px;flex-wrap:wrap}.mwlists button{border:1px solid var(--line2);border-radius:10px;padding:6px 12px;background:#0c1527;font-weight:600;min-height:42px}.mwlists button.on{border-color:var(--cyan);background:#22d3ee1f}
.mwbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}.mwmsg{font-weight:500;min-height:1.3em;font-size:15px}.mwmsg.bad{color:#fda4af}.mwmsg.good{color:#86efac}
/* lobby */
.lobby{display:grid;grid-template-columns:320px 1fr;gap:14px}
.codecard{text-align:center}.bigcode{font-family:GeistMono,monospace;font-size:70px;font-weight:700;letter-spacing:12px;color:var(--cyan);line-height:1.1;text-shadow:0 0 30px #22d3ee55}
.small{font-size:14.5px;color:var(--mut)}.small b{color:var(--ink)}
.tcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.tcol{border:1px solid var(--line2);border-radius:14px;padding:8px;min-height:120px;background:#0c1527}
.tcol h4{margin:0 0 6px;font-size:17px;display:flex;justify-content:space-between;align-items:center}
.tcol .pl{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:9px;background:#ffffff08;border:1px solid var(--line);margin-bottom:5px;font-size:15px}
.tcol .pl .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcol .pl.off{opacity:.5}.tcol .pl.me{border-color:var(--cyan);font-weight:700}
.tcol .pl button{border:1px solid var(--line2);border-radius:7px;padding:2px 7px;font-size:13px;background:#0a1222;min-height:30px}
.tcol .join{width:100%;border:1px dashed var(--cyan);color:var(--cyan);border-radius:10px;padding:8px;font-weight:700;margin-top:4px;min-height:42px}
.waitmsg{display:flex;align-items:center;gap:12px;color:#cbd5e1;font-size:20px;font-weight:500;justify-content:center}
.netst{font-size:13px;background:#facc1522;border-radius:999px;padding:3px 10px;border:1px solid #facc1566;color:#fde68a}.netst:empty{display:none}
/* play */
#scr-play{min-height:100vh;min-height:100dvh}
.topbar{display:flex;align-items:center;gap:10px;padding:8px 150px 6px 10px;flex-wrap:wrap}
.tinfo{display:flex;flex-direction:column;line-height:1.15}.tinfo b{font-size:19px}.tinfo span{font-size:13.5px;color:var(--mut)}
.scores{display:flex;gap:8px;flex-wrap:wrap;flex:1;justify-content:center}
.sc{background:var(--card2);border:1px solid var(--line2);border-radius:12px;padding:3px 11px;display:flex;align-items:center;gap:7px;font-weight:600;font-size:14.5px;min-height:38px;transition:transform .2s,box-shadow .2s,border-color .2s}
.sc i{width:10px;height:10px;border-radius:50%;display:inline-block}
.sc b{font-size:19px;font-family:GeistMono,monospace}.sc.turn{transform:translateY(-1px);border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow) inset,0 0 18px #facc1533}
.sc.hot{border-color:var(--amber);box-shadow:0 0 16px #f59e0b44}.sc.dim{opacity:.7}
.sc.t0 i{background:var(--t0);box-shadow:0 0 8px var(--t0)}.sc.t1 i{background:var(--t1);box-shadow:0 0 8px var(--t1)}.sc.t2 i{background:var(--t2);box-shadow:0 0 8px var(--t2)}.sc.t3 i{background:var(--t3);box-shadow:0 0 8px var(--t3)}
.playgrid{display:grid;grid-template-columns:minmax(300px,1fr) minmax(420px,1.15fr);gap:14px;padding:4px 14px 6px;flex:1;width:min(1300px,100%);margin:0 auto;align-items:start}
.stagecard{background:var(--card);border:1px solid var(--line2);border-radius:18px;overflow:hidden;position:relative;box-shadow:0 14px 40px #0007}
.stage{aspect-ratio:400/300;width:100%;position:relative}
.turnbar{padding:9px 12px;font-size:17px;font-weight:600;text-align:center;border-top:1px solid var(--line2);min-height:44px;background:#0c1527}
.turnbar.t0{box-shadow:inset 4px 0 0 var(--t0)}.turnbar.t1{box-shadow:inset 4px 0 0 var(--t1)}.turnbar.t2{box-shadow:inset 4px 0 0 var(--t2)}.turnbar.t3{box-shadow:inset 4px 0 0 var(--t3)}
.lcount{position:absolute;top:10px;left:10px;background:#0b1220cc;border:1px solid var(--line2);border-radius:999px;padding:3px 11px 3px 9px;font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:7px;font-family:GeistMono,monospace;backdrop-filter:blur(4px)}
.lcount i{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.panel{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line2);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 14px 40px #0007}
.wordrow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;min-height:70px;align-items:flex-end;padding:4px 0}
.wordrow .wd{display:flex;gap:5px}
.wordrow .ls{width:40px;height:54px;border-bottom:3px solid var(--cyan);display:flex;align-items:flex-end;justify-content:center;font-family:GeistMono,monospace;font-size:36px;font-weight:700;line-height:1;padding-bottom:4px;background:linear-gradient(180deg,transparent 40%,#22d3ee0f);border-radius:6px 6px 0 0}
.wordrow .ls.fix{border-bottom-color:transparent;background:none;width:18px}
.wordrow .ls.new{animation:popin .4s ease}.wordrow .ls.miss{color:#fb7185}
@keyframes popin{0%{transform:translateY(-12px);opacity:0;text-shadow:0 0 20px var(--cyan)}100%{transform:none;opacity:1}}
.wordrow.long .ls{width:30px;height:44px;font-size:28px}.wordrow.vlong .ls{width:24px;height:38px;font-size:23px}
.cluebox{display:flex;flex-direction:column;gap:6px;background:#0a1222;border:1px solid var(--line);border-radius:14px;padding:9px 11px}
.crow{display:flex;gap:10px;align-items:center;min-height:38px}
.ctag{flex:none;font-size:11.5px;text-transform:uppercase;letter-spacing:1px;font-weight:700;color:var(--cyan);background:#22d3ee14;border:1px solid #22d3ee44;border-radius:7px;padding:3px 7px;width:92px;text-align:center}
.ctag.d{color:#c4b5fd;background:#a78bfa14;border-color:#a78bfa44}.ctag.x{color:#fde68a;background:#facc1514;border-color:#facc1544}
.htxt{flex:1;font-size:17px;line-height:1.3}.htxt.dim{color:#64748b;font-size:14.5px}
.say{border:1px solid var(--line2);border-radius:10px;background:#ffffff0a;font-size:18px;min-width:40px;min-height:38px;flex:none;transition:border-color .15s}
.say:hover{border-color:var(--cyan)}
.wrongrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:28px;font-size:14.5px;color:var(--mut)}
.wrongrow .wl{background:#f43f5e1a;border:1px solid #f43f5e66;color:#fda4af;border-radius:7px;padding:0 8px;font-weight:700;text-transform:lowercase;font-size:18px;font-family:GeistMono,monospace}
.wrongrow .ww{text-decoration:line-through}
.keys{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.key{border:1px solid var(--line2);border-radius:10px;background:linear-gradient(180deg,#1a2642,#131d33);font-size:22px;font-weight:600;min-height:50px;text-transform:uppercase;transition:transform .08s,background .15s,border-color .15s;font-family:GeistMono,monospace;box-shadow:0 2px 0 #0008}
.key:hover:not(:disabled){border-color:var(--cyan)}
.key:active{transform:translateY(2px);box-shadow:none}
.key.right{background:#22c55e26;border-color:#22c55e88;color:#86efac}.key.wrong{background:#f43f5e14;border-color:#f43f5e44;color:#f43f5e;opacity:.55;text-decoration:line-through}
.key:disabled{cursor:default}.keys.off .key:not(.right):not(.wrong){opacity:.4}
.acts,.tbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.abtn{border:1px solid var(--line2);border-radius:12px;padding:8px 14px;background:#ffffff08;font-weight:600;font-size:15.5px;min-height:44px;transition:border-color .15s}
.abtn:hover:not(:disabled){border-color:var(--cyan)}
.abtn.sm{min-height:38px;font-size:14px;padding:5px 10px}.abtn.red{border-color:#f43f5e66;color:#fda4af}.abtn:disabled{opacity:.4;cursor:default}
.tctl{border-top:1px dashed var(--line2);padding-top:9px;display:flex;flex-direction:column;gap:8px}
.secret{display:flex;gap:10px;align-items:center;justify-content:center}.secret b{font-family:GeistMono,monospace;font-size:20px;letter-spacing:2px;background:#facc1514;border-radius:8px;padding:2px 10px;border:1px solid #facc1566;color:#fde68a}
.tbar{height:20px;border:1px solid var(--line2);border-radius:999px;position:relative;overflow:hidden;background:#0a1222}
.tbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--cyan2),var(--cyan));width:100%;transition:width .25s linear}.tbar.low i{background:linear-gradient(90deg,#be123c,var(--bad))}
.tbar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;font-family:GeistMono,monospace}
.tbar.big{height:28px;margin:6px 0}
/* the vault */
.vault{position:absolute;inset:0;perspective:900px;overflow:hidden}
.vframe{position:absolute;inset:0;width:100%;height:100%;display:block}
.vframe .grid line{stroke:#1d2a44;stroke-width:1}
.vframe .sheen{animation:sheen 9s ease-in-out infinite}
@keyframes sheen{0%,60%{transform:translateX(0)}100%{transform:translateX(720px)}}
.vframe .rivet{fill:#334155;stroke:#0b1220;stroke-width:1.5}
.vframe .ringplate{fill:#131c30;stroke:#2b3a58;stroke-width:3}
.vframe .ringgroove{fill:#090f1c;stroke:#1f2b45;stroke-width:2}
.vframe .inside{opacity:.25;transition:opacity .6s}
.vframe .granted{font:800 22px Outfit,sans-serif;text-anchor:middle;fill:#1f1300;letter-spacing:2px;opacity:0;transition:opacity .5s .6s}
.vframe .burst rect{fill:#fef08a;opacity:0}
.vault.open .vframe .inside{opacity:1}.vault.open .granted{opacity:1}
.vault.open .burst rect{animation:burst 1.4s ease-out .5s}
@keyframes burst{0%{opacity:0}30%{opacity:.85}100%{opacity:0}}
.lt .sock{fill:#070b14;stroke:#2b3a58;stroke-width:2}
.lt .bulb{fill:#3a1219;transition:fill .3s}.lt .glow{fill:none}.lt .shine{fill:#fff;opacity:0}
.lt.on .bulb{fill:var(--cyan)}.lt.on .glow{fill:#22d3ee;opacity:.22;animation:breathe 3s ease-in-out infinite}.lt.on .shine{opacity:.75}
.lt.on.amber .bulb{fill:var(--amber)}.lt.on.amber .glow{fill:var(--amber);opacity:.3;animation-duration:1.2s}
.lt.off .bulb{fill:#3a1219}.lt.off .sock{stroke:#5b1a26}
.lt.blink .bulb{animation:blink .7s steps(2,end)}
@keyframes blink{0%{fill:#fff}25%{fill:#3a1219}50%{fill:#fb7185}75%{fill:#3a1219}100%{fill:#3a1219}}
@keyframes breathe{50%{opacity:.08}}
.vault.locked .lt .bulb{fill:#f43f5e}.vault.locked .lt .glow{fill:#f43f5e;opacity:.3;animation:breathe 1s ease-in-out infinite}.vault.locked .lt .sock{stroke:#9f1239}
.vault.open .lt.on .bulb{fill:#4ade80}.vault.open .lt.on .glow{fill:#4ade80;opacity:.3}
.vdoor{position:absolute;left:24%;top:15.333%;width:52%;height:69.333%;transform-origin:2% 50%;transition:transform 1.2s cubic-bezier(.6,.05,.3,1) .25s,filter 1s;filter:drop-shadow(0 8px 14px #000a)}
.vdoor svg{width:100%;height:100%;display:block;overflow:visible}
.vault.open .vdoor{transform:rotateY(-82deg);filter:drop-shadow(-10px 8px 18px #000c) brightness(.8)}
.vault.shake .vdoor{animation:shake .38s ease}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.vdoor .bolt{fill:#64748b;stroke:#1e293b;stroke-width:1.5}
.vdoor .dedge{fill:#1e293b;stroke:#475569;stroke-width:3}.vdoor .dface{stroke:#0f172a;stroke-width:2}
.vdoor .dline{fill:none;stroke:#0f172a;stroke-width:2;opacity:.7}
.vdoor .dial{transition:transform .7s cubic-bezier(.3,1.4,.5,1);transform-origin:0 0}
.vault.open .vdoor .dial{transition-duration:1s}
.vdoor .dialring{fill:#0f172a;stroke:#64748b;stroke-width:2}
.vdoor .tk{stroke:#64748b;stroke-width:1.2}.vdoor .tk.l{stroke:#cbd5e1;stroke-width:2}
.vdoor .dialface{stroke:#334155;stroke-width:2}
.vdoor .spokes rect{fill:#475569;stroke:#1e293b;stroke-width:1.5}
.vdoor .hub{fill:#facc15;stroke:#854d0e;stroke-width:2}
.vdoor .pointer{fill:var(--cyan)}
.vdoor .readbox{fill:#020617;stroke:#334155;stroke-width:1.5}
.vdoor .readout{font:700 11px GeistMono,monospace;text-anchor:middle;fill:#22d3ee;letter-spacing:1.5px}
.vault.locked .vdoor .readout{fill:#f43f5e}.vault.open .vdoor .readout{fill:#4ade80}
/* overlays */
.ov{position:fixed;inset:0;background:#020617cc;backdrop-filter:blur(3px);z-index:500;display:flex;align-items:center;justify-content:center;padding:14px}
.ovcard{background:linear-gradient(180deg,#17233d,#101a2e);border:1px solid var(--line2);border-radius:20px;box-shadow:0 30px 80px #000a;padding:18px 20px;max-width:520px;width:100%;text-align:center;max-height:92vh;overflow:auto;animation:fadein .2s ease}
.ovcard.wide{max-width:720px}.ovcard h3{margin:4px 0 8px;font-size:26px}.ovcard p{font-size:17px;margin:6px 0;color:#cbd5e1}
.ovbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.speakL{font-family:GeistMono,monospace;font-size:84px;font-weight:700;line-height:1;min-width:120px;height:120px;margin:0 auto;border:1px solid #facc1588;border-radius:22px;background:#facc1514;color:#fde68a;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;box-shadow:0 0 40px #facc1522;padding:0 16px}
.speakL.word{font-size:46px;text-transform:none;height:96px}
#solveIn{width:100%;font-family:GeistMono,monospace;font-size:30px;text-align:center;border:1px solid var(--line2);border-radius:12px;padding:8px;margin-top:8px;text-transform:lowercase;background:#0a1222}
.help{text-align:left}.help ol{padding-left:22px;font-size:16px;line-height:1.45;color:#cbd5e1}.help li{margin:6px 0}.help h3{text-align:center}.help b{color:#fff}
.y{background:#facc15;color:#1a1a1a;padding:0 5px;border-radius:5px}.o{background:#f59e0b;color:#1a1a1a;padding:0 5px;border-radius:5px}.r{background:#f43f5e;color:#fff;padding:0 5px;border-radius:5px}
.plinks{display:grid;gap:10px;margin-top:10px}
.rc .rstate{display:inline-block;font-weight:700;font-size:16px;padding:5px 14px;border-radius:999px;border:1px solid}
.rc .rstate.g{color:#86efac;border-color:#22c55e88;background:#22c55e14}.rc .rstate.r{color:#fda4af;border-color:#f43f5e88;background:#f43f5e14}.rc .rstate.n{color:#cbd5e1;border-color:var(--line2)}
.rc .big-word{font-family:GeistMono,monospace;font-size:44px;font-weight:700;letter-spacing:2px;margin:10px 0 8px;word-break:break-word}
.rline{display:flex;gap:10px;align-items:center;text-align:left;background:#0a1222;border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin:6px 0;font-size:16px}
.rline span:nth-child(2){flex:1}
.rc .pts{font-size:17px;font-weight:700;margin:8px 0;color:#fde68a}
.rc .bigscore{font-family:GeistMono,monospace;font-size:54px;font-weight:700;color:var(--cyan)}.rc .bigscore small{font-size:18px;color:var(--mut)}
.rcemb{width:80px;height:80px;margin:0 auto}.rcemb svg{width:100%;height:100%}
.rc table{margin:8px auto;border-collapse:collapse;font-size:19px}.rc td{padding:5px 14px;border-bottom:1px solid var(--line)}
.banner{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:600;font-size:34px;font-weight:800;padding:14px 28px;border-radius:18px;border:1px solid #ffffff33;box-shadow:0 20px 60px #000a;pointer-events:none;text-align:center;animation:bann .22s ease-out;white-space:nowrap;letter-spacing:-.3px}
.banner small{display:block;font-size:16px;font-weight:600;opacity:.9}
.banner.y{background:#facc15;color:#1a1a1a}.banner.o{background:#f59e0b;color:#1a1a1a}.banner.r{background:#f43f5e;color:#fff}.banner.g{background:#22c55e;color:#04220f}.banner.b{background:#1e3a5f;color:#e0f2fe;border-color:#3b82f6}
@keyframes bann{0%{transform:translate(-50%,-50%) scale(.85);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#e6edf7;color:#0b1220;padding:10px 18px;border-radius:12px;z-index:700;font-size:16px;max-width:90vw;text-align:center;font-weight:500}
.plrow{display:flex;align-items:center;gap:8px;justify-content:space-between;border-bottom:1px solid var(--line);padding:7px 0;font-size:16px;flex-wrap:wrap}
.plrow .btns{display:flex;gap:6px;flex-wrap:wrap}.plrow button{border:1px solid var(--line2);border-radius:9px;padding:4px 9px;background:#0a1222;font-weight:600;min-height:36px}
.plrow button.on{background:#22d3ee1f;border-color:var(--cyan)}
/* sizes */
@media (max-width:980px){
  .playgrid{grid-template-columns:1fr;max-width:640px}
  .topbar{padding-right:110px}
}
@media (max-width:820px){
  .menu,.ocards{grid-template-columns:1fr}.lobby{grid-template-columns:1fr}
  .logo{font-size:52px}.olab{width:100%}
}
@media (max-width:560px){
  .chip .long{display:none}.chip .short{display:inline}.chip{padding:7px 12px;font-size:14px;min-height:38px}
  .logo{font-size:44px}.tag{font-size:17px}.hwrap{padding-top:56px;gap:10px}.emblem{width:84px;height:84px}.intro{font-size:15.5px}
  .mbtn{min-height:74px;padding:10px 14px}.mbtn .ic{width:46px;height:46px;font-size:26px}.mbtn b{font-size:19px}
  .phead h2{font-size:24px}
  .topbar{padding:6px 92px 4px 8px;gap:6px}.tinfo b{font-size:16px}.sc{font-size:13px;padding:2px 8px;min-height:32px}.sc b{font-size:16px}
  .playgrid{padding:2px 6px 4px;gap:8px}.panel{padding:8px;gap:7px;border-radius:16px}.stagecard{border-radius:16px}
  .stage{width:78%;margin:0 auto}
  .turnbar{font-size:15px;padding:6px 8px;min-height:34px}
  .keys{gap:4px}.key{font-size:18px;min-height:42px;border-radius:9px}
  .wordrow .ls{width:28px;height:40px;font-size:26px}.wordrow.long .ls{width:22px;height:34px;font-size:21px}.wordrow.vlong .ls{width:18px;height:30px;font-size:18px}
  .wordrow{gap:6px 10px;min-height:46px}.wordrow .wd{gap:3px}
  .ctag{width:auto;font-size:10.5px;padding:2px 5px}.htxt{font-size:15px}.crow{gap:7px;min-height:32px}.say{min-width:36px;min-height:34px;font-size:16px}
  .abtn{font-size:14px;min-height:40px;padding:6px 10px}
  .banner{font-size:26px;padding:12px 18px;white-space:normal;width:86vw}
  .bigcode{font-size:54px}
  .rc .big-word{font-size:32px}.rline{font-size:14.5px}.sc.dim{display:none}
}
/* the round card leaves the vault in view */
#ovRound{background:#02061766;backdrop-filter:none;align-items:flex-end;padding-bottom:18px}
#ovRound .ovcard{max-width:600px}
@media (min-width:981px){#ovRound{justify-content:flex-end;align-items:center;padding-right:max(14px,calc((100vw - 1300px)/2 + 14px))}#ovRound .ovcard{width:min(600px,calc(50vw - 30px))}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}}