/* Shared neon styling for the ARCADE word-deduction games */
:root{
  --bg:#0a0a16;
  --panel:rgba(12,12,26,.62);
  --accent:#2de2e6;
  --accent2:#ff2e97;
  --gold:#ffd23f;
  --good:#5cf2a8;
  --bad:#ff5d6c;
  --text:#eafcff;
  --dim:rgba(234,252,255,.55);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
/* Kill the mobile double-tap-to-zoom gesture so fast typing isn't read as a double-click */
button,.key,.tile,.hex,.chip,.ct,.et,.cell,.sbtn,.btn,.ghost,.howto-link,.home,.slot{touch-action:manipulation;}
body{
  background:radial-gradient(circle at 50% -10%, #1a1a3a 0%, var(--bg) 55%);
  color:var(--text);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  min-height:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:14px 14px 24px;gap:14px;
  user-select:none;
  touch-action:manipulation;
}
.wrap{width:min(96vw,520px);display:flex;flex-direction:column;gap:14px;flex:1;}
.top{display:flex;flex-direction:column;gap:4px;text-align:center;position:relative;}
.home{position:absolute;left:0;top:2px;color:var(--accent);text-decoration:none;font-size:13px;letter-spacing:.05em;opacity:.85;}
.home:hover{opacity:1;}
.howto-link{position:absolute;right:0;top:2px;color:var(--accent);text-decoration:none;font-size:13px;letter-spacing:.05em;opacity:.85;cursor:pointer;background:none;border:none;font-family:inherit;}
.howto-link:hover{opacity:1;}
.title{font-weight:800;letter-spacing:.22em;font-size:clamp(26px,7vw,38px);
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.tagline{font-size:13px;opacity:.6;letter-spacing:.03em;}
.statbar{display:flex;justify-content:center;gap:22px;}
.statbar .s{display:flex;flex-direction:column;align-items:center;gap:1px;}
.statbar .s b{font-size:20px;font-variant-numeric:tabular-nums;}
.statbar .s span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;}

.panel{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:16px;
  box-shadow:0 16px 50px rgba(0,0,0,.45);padding:14px;}

.btn{cursor:pointer;border:none;border-radius:999px;padding:13px 26px;font-size:15px;font-weight:800;
  letter-spacing:.1em;color:#04121a;background:linear-gradient(90deg,var(--accent),#5cf2c0);
  box-shadow:0 8px 26px rgba(45,226,230,.4);transition:transform .1s,box-shadow .2s;}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(45,226,230,.55);}
.btn:active{transform:translateY(1px) scale(.98);}
.btn.pink{background:linear-gradient(90deg,var(--accent2),#ff7ab5);box-shadow:0 8px 26px rgba(255,46,151,.4);}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.3);}
.ghost{cursor:pointer;border:1px solid rgba(234,252,255,.25);background:rgba(255,255,255,.04);
  color:var(--text);border-radius:999px;padding:11px 20px;font-weight:700;font-size:13px;letter-spacing:.08em;}
.ghost:hover{background:rgba(255,255,255,.09);}

/* on-screen keyboard */
.keyboard{display:flex;flex-direction:column;gap:7px;align-items:center;margin-top:4px;}
.krow{display:flex;gap:6px;justify-content:center;width:100%;}
.key{flex:1;max-width:42px;min-width:0;height:50px;border-radius:9px;border:none;cursor:pointer;
  background:rgba(255,255,255,.09);color:var(--text);font-size:16px;font-weight:700;text-transform:uppercase;
  display:grid;place-items:center;transition:background .12s,transform .05s;}
.key:hover{background:rgba(255,255,255,.16);}
.key:active{transform:scale(.92);}
.key.wide{flex:1.6;max-width:64px;font-size:12px;letter-spacing:.04em;}
.key.no{background:rgba(255,255,255,.03);color:rgba(234,252,255,.28);}
.key.maybe{background:linear-gradient(180deg,#caa01f,#9c7a12);color:#1a1404;}
.key.yes{background:linear-gradient(180deg,#37c98a,#1f9b66);color:#03130c;}

/* A-Z tracker chips */
.tracker{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;}
.chip{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:700;
  font-size:14px;text-transform:uppercase;background:rgba(255,255,255,.07);color:var(--text);
  cursor:pointer;transition:background .12s,transform .05s;}
.chip.no{background:rgba(255,255,255,.02);color:rgba(234,252,255,.22);text-decoration:line-through;}
.chip.maybe{background:linear-gradient(180deg,#caa01f,#9c7a12);color:#1a1404;}
.chip.yes{background:linear-gradient(180deg,#37c98a,#1f9b66);color:#03130c;}

/* toast */
#toast{position:fixed;left:50%;top:18%;transform:translateX(-50%) translateY(-8px);
  background:rgba(8,8,20,.92);border:1px solid rgba(255,255,255,.14);color:var(--text);
  padding:11px 20px;border-radius:12px;font-weight:600;font-size:14px;letter-spacing:.02em;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;box-shadow:0 12px 40px rgba(0,0,0,.5);}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* overlay modal */
.overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(6,6,16,.78);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  transition:opacity .25s;}
.overlay.hidden{opacity:0;pointer-events:none;}
.modal{background:linear-gradient(180deg,rgba(22,22,44,.95),rgba(12,12,26,.95));
  border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:30px 26px;text-align:center;
  display:flex;flex-direction:column;gap:14px;align-items:center;max-width:360px;width:100%;
  box-shadow:0 24px 80px rgba(0,0,0,.6);}
.modal h2{font-size:30px;letter-spacing:.08em;}
.modal h2.win{color:var(--good);}
.modal h2.lose{color:var(--bad);}
.modal .reveal{font-size:14px;opacity:.85;}
.modal .reveal b{color:var(--gold);letter-spacing:.3em;font-size:22px;}
.modal .msg{font-size:14px;opacity:.8;line-height:1.5;}
.modal .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}

.help{font-size:12.5px;line-height:1.6;opacity:.78;}
.help b{color:var(--accent);}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}40%{transform:translateX(7px);}60%{transform:translateX(-5px);}80%{transform:translateX(5px);}}
.shake{animation:shake .35s;}
@keyframes pop{0%{transform:scale(.6);opacity:0;}100%{transform:scale(1);opacity:1;}}
.pop{animation:pop .18s ease;}