:root{
  --bg:#0a0a0a;--bg2:#0d0d0d;--panel:rgba(20,20,20,.95);--panel-2:rgba(25,25,25,.98);
  --line:rgba(255,255,255,.06);--text:#ffffff;--muted:#888888;--cyan:#00ffff;--blue:#00aaff;
  --violet:#aa00ff;--pink:#ff00aa;--orange:#ffaa00;--good:#00ff88;--bad:#ff0055;
  --neon-cyan:#00ffff;--neon-pink:#ff00aa;--neon-violet:#aa00ff;--neon-green:#00ff88;
  --shadow:0 0 30px rgba(0,255,255,.15);--radius:16px;--font-body:"Inter",system-ui,sans-serif;
  --font-display:"Sora",var(--font-body);
  --tile-min:82px;--tile-max:100px;--tile-gap:12px;--grid-pad:20px;--tile-radius:16px;--tile-font:clamp(28px,3vw,40px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);font-family:var(--font-body);
  background:#000;
  overflow:auto;
}
body:before{
  content:"";position:fixed;inset:0;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at center, black 40%, transparent 85%);
  pointer-events:none;
}
#bgfx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;transition:opacity .3s ease}
.bg-media{position:fixed;inset:0;z-index:1;display:none;background-size:cover;background-position:center;pointer-events:none;filter:saturate(1.1) brightness(.9)}
.bg-media .bg-media-video{width:100%;height:100%;object-fit:cover;display:block}
body.board-bg-active #bgfx{opacity:0}
.screen{position:fixed;inset:0;display:none;z-index:5}
.screen.active{display:flex}
html:not([data-ready="1"])[data-start="landing"] #landing,
html:not([data-ready="1"])[data-start="welcome"] #welcome{display:flex}
.center-wrap{width:min(1180px, calc(100vw - 32px));margin:auto}
.card{
  position:relative;
  background:linear-gradient(180deg, rgba(15,15,15,.95), rgba(10,10,10,.98));
  border:1px solid rgba(0,255,255,.15);border-radius:var(--radius);
  box-shadow:0 0 20px rgba(0,255,255,.08), inset 0 0 60px rgba(0,0,0,.5);
}
.button{
  position:relative;overflow:hidden;
  border:2px solid var(--neon-cyan);
  color:var(--neon-cyan);
  background:transparent;
  border-radius:12px;
  padding:16px 24px;
  font:800 15px var(--font-body);
  letter-spacing:.02em;
  cursor:pointer;
  text-transform:uppercase;
  box-shadow:0 0 15px rgba(0,255,255,.3), inset 0 0 15px rgba(0,255,255,.1);
  transition:all .2s ease;
}
.button:hover{
  transform:translateY(-3px) scale(1.02);
  border-color:var(--neon-pink);
  color:var(--neon-pink);
  box-shadow:0 0 30px rgba(255,0,170,.5), inset 0 0 20px rgba(255,0,170,.15);
}
.button:active{
  transform:translateY(1px) scale(.98);
  box-shadow:0 0 10px rgba(0,255,255,.4);
}
.button.primary{
  color:#000;
  border:none;
  background:var(--neon-cyan);
  box-shadow:0 0 25px rgba(0,255,255,.6), 0 0 50px rgba(0,255,255,.3);
}
.button.primary:active{
  transform:scale(0.95);
  box-shadow:0 0 40px rgba(0,255,255,.8), 0 0 80px rgba(0,255,255,.5);
}
.button.primary:hover{
  background:var(--neon-pink);
  box-shadow:0 0 35px rgba(255,0,170,.7), 0 0 60px rgba(255,0,170,.4);
}
.button.small{
  padding:12px 18px;
  font-size:13px;
  border-width:1px;
}
.button::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform:translateX(-100%);
  transition:.5s;
}
.button:hover::before{
  transform:translateX(100%);
}
.button.small{
  padding:10px 15px;
  font-size:13px;
  border-radius:10px;
}
.hotkey-hint{
  display:block;
  margin-top:3px;
  font:700 10px var(--font-body);
  letter-spacing:.12em;
  opacity:.72;
}
.button.primary .hotkey-hint{color:rgba(0,0,0,.72);opacity:.82}
#shuffleBtn{
  border-color:var(--orange);
  color:var(--orange);
  box-shadow:0 0 16px rgba(255,170,0,.35), inset 0 0 12px rgba(255,170,0,.1);
}
#shuffleBtn:hover{
  border-color:var(--neon-green);
  color:var(--neon-green);
  box-shadow:0 0 18px rgba(0,255,136,.35), inset 0 0 12px rgba(0,255,136,.12);
}
.button > *{position:relative;z-index:1}
.button .btn-label{position:relative;z-index:1}
.button[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.input{
  width:100%;padding:16px 18px;border-radius:12px;border:2px solid rgba(0,255,255,.3);
  background:rgba(0,0,0,.8);color:var(--text);font:600 16px var(--font-body);outline:none;
  transition:all .2s ease;
}
.input:focus{
  border-color:var(--neon-cyan);
  box-shadow:0 0 20px rgba(0,255,255,.3), 0 0 40px rgba(0,255,255,.1);
}
.title{font-family:var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--neon-cyan);text-shadow:0 0 10px rgba(0,255,255,.5)}
.subtitle{color:var(--muted);line-height:1.6}
.logo{
  font-family:var(--font-display);font-size:clamp(44px, 8vw, 88px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(135deg, #ffffff 0%, var(--neon-cyan) 40%, var(--neon-pink) 70%, var(--neon-violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 25px rgba(0,255,255,.7)) drop-shadow(0 0 50px rgba(255,0,170,.4)) drop-shadow(0 4px 8px rgba(0,0,0,.5));
  animation:logoGlow 3s ease-in-out infinite;
}
@keyframes logoGlow{
  0%,100%{filter:drop-shadow(0 0 25px rgba(0,255,255,.7)) drop-shadow(0 0 50px rgba(255,0,170,.4)) drop-shadow(0 4px 8px rgba(0,0,0,.5))}
  50%{filter:drop-shadow(0 0 35px rgba(0,255,255,.9)) drop-shadow(0 0 70px rgba(255,0,170,.6)) drop-shadow(0 4px 12px rgba(0,0,0,.6))}
}
@keyframes themePulse{
  0%,100%{transform:scale(1);box-shadow:0 0 20px var(--neon-cyan, rgba(0,255,255,.4))}
  50%{transform:scale(1.08);box-shadow:0 0 35px var(--neon-cyan, rgba(0,255,255,.7)),0 0 60px var(--neon-pink, rgba(255,0,170,.4))}
}
.kicker{
  display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;
  background:rgba(0,255,255,.1);border:1px solid var(--neon-cyan);color:var(--neon-cyan);
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase
}
.menu-card .emoji{font-size:28px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.profile{
  display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.6);
  border:1px solid rgba(0,255,255,.15)
}
.profile{position:relative;overflow:hidden}
.profile > *{position:relative;z-index:1}
.profile .profile-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px;z-index:0;opacity:.95}
.profile-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.level-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.level-badge{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--neon-cyan)}
.xp-bar{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;min-width:80px}
.xp-fill{height:100%;width:0%;background:linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));box-shadow:0 0 12px rgba(0,255,255,.35)}
.xp-text{font-size:11px;color:var(--muted);white-space:nowrap}
.welcome-grid{display:grid;grid-template-columns:1fr 580px;gap:26px;align-items:stretch}
.hero{padding:34px;min-height:650px;display:flex;flex-direction:column;justify-content:center}
.hero p{max-width:680px}
.side-panel{padding:24px;display:flex;flex-direction:column;justify-content:center;min-height:650px;max-width:580px}
.feature{padding:18px;border-radius:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.feature h4{margin:0 0 8px}
.feature p{margin:0;color:var(--muted);line-height:1.5}
.menu-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:22px}
.menu-card{padding:22px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:all .2s ease;border:1px solid rgba(0,255,255,.12);border:1px solid color-mix(in srgb, var(--neon-cyan) 35%, rgba(255,255,255,.08))}
.menu-card:hover{border-color:var(--neon-cyan);transform:translateY(-3px);box-shadow:0 0 25px rgba(0,255,255,.25);box-shadow:0 0 25px color-mix(in srgb, var(--neon-cyan) 45%, transparent)}
.solo-mode-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:18px}
.multi-mode-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:18px}
.solo-mode-card{align-items:flex-start;gap:14px;min-height:230px}
.solo-mode-head{display:flex;gap:12px;align-items:center}
.solo-mode-head h3{margin:0 0 4px}
.solo-mode-head p{margin:0;color:var(--muted);font-size:13px}
.solo-mode-features{margin:0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.5}
.solo-mode-features li{margin-bottom:6px}
.solo-mode-cta{margin-top:auto;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--neon-cyan)}
.menu-card h3{margin:0 0 10px;font-size:24px;color:var(--text)}
.menu-card p{margin:0;color:var(--muted)}
.menu-card .emoji{font-size:28px;color:var(--neon-cyan)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.profile{
  display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.6);
  border:1px solid rgba(0,255,255,.15)
}
.avatar{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg, var(--neon-cyan), var(--neon-pink));color:#000;font-weight:900;font-size:20px;
  box-shadow:0 0 20px rgba(0,255,255,.4)
}
.avatar.avatar-image{background-size:cover;background-position:center;color:transparent;text-shadow:none}
.profile.profile-bg{background-size:cover;background-position:center}
.rating{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.rating strong{font-size:18px;color:#fff;display:block;margin-top:4px}
.lb-wrap{padding:18px;border-radius:16px;background:rgba(0,0,0,.6);border:1px solid rgba(0,255,255,.15)}
.lb-wrap.lb-modes{padding:16px}
.lb-mode-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:12px}
.lb-mode-card{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;min-width:0}
.lb-mode-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.lb-tabs{margin-bottom:10px}
.lb-mode-card .lb-list{max-height:300px}
.daily-countdown h4{margin:0 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.daily-countdown p{margin:0;font-weight:800;color:var(--neon-cyan);font-size:16px}
.daily-countdown .daily-prev{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.08)}
.daily-countdown .daily-prev p{color:var(--text);font-weight:600;font-size:13px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tab{
  padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:transparent;color:#aaa;font-weight:700;cursor:pointer;transition:all .2s;
}
.tab:hover{color:var(--neon-cyan);border-color:var(--neon-cyan)}
.tab.active{border-color:var(--neon-cyan);background:rgba(0,255,255,.15);color:var(--neon-cyan);box-shadow:0 0 15px rgba(0,255,255,.2)}
.lb-list{max-height:340px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:6px}
.lb-row{
  display:grid;grid-template-columns:40px 1fr 100px 1fr 70px;gap:10px;align-items:center;
  padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)
}
.lb-row.top-3{background:linear-gradient(135deg, rgba(0,255,255,.08), rgba(255,0,170,.05));border-color:rgba(0,255,255,.25)}
.lb-row.gold{background:linear-gradient(135deg, rgba(255,170,0,.12), rgba(255,200,0,.05));border-color:rgba(255,170,0,.3)}
.lb-row.silver{background:linear-gradient(135deg, rgba(170,170,170,.12), rgba(200,200,200,.05));border-color:rgba(170,170,170,.3)}
.lb-row.bronze{background:linear-gradient(135deg, rgba(205,127,50,.12), rgba(180,100,50,.05));border-color:rgba(205,127,50,.3)}
.lb-rank{font-family:var(--font-display);font-size:18px;font-weight:800}
.lb-rank.gold{color:#ffaa00}.lb-rank.silver{color:#aaa}.lb-rank.bronze{color:#cd7f32}
.lb-name{font-weight:800;font-size:15px}
.lb-name.me{color:var(--neon-cyan)}
.lb-meta{font-size:12px;color:var(--muted)}
.lb-score{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--neon-cyan)}
.lb-rating{font-family:var(--font-display);font-size:16px;font-weight:700}
.lb-words{font-size:13px;color:var(--muted)}
.match-row{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);margin-bottom:8px}
.match-row.has-winner{border-color:rgba(0,255,255,.15)}
.match-player{flex:1;text-align:center}
.match-player.winner .match-name{color:var(--neon-cyan);font-weight:700}
.match-player.loser{opacity:0.5}
.match-name{font-weight:600;font-size:14px;margin-bottom:2px}
.match-score{font-family:var(--font-display);font-size:20px;font-weight:700;margin-bottom:2px}
.match-player.winner .match-score{color:var(--neon-cyan)}
.match-words{font-size:11px;color:var(--muted);margin-bottom:2px}
.match-rating{font-size:11px;color:var(--muted)}
.match-vs{font-size:12px;color:var(--muted);flex:0}
.match-time{font-size:10px;color:var(--muted);min-width:50px;text-align:right}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.panel-actions{display:flex;gap:8px;align-items:center}
#foundToggle,#detailsToggle{display:none}
body.mobile #foundToggle,body.mobile #detailsToggle{display:inline-flex}
.game-layout{display:grid;grid-template-columns:360px minmax(580px,1fr) 340px;gap:22px;align-items:start;padding:20px 0 40px}
#game{align-items:flex-start;padding-top:10px}
#game .center-wrap{margin:0 auto}
#game .game-layout{margin-top:12px}
.game-side,.game-mid{padding:20px;border-radius:22px}
.game-side{background:rgba(10,10,10,.58);border:1px solid rgba(0,255,255,.12)}
.game-mid{background:rgba(10,10,10,.48);border:1px solid rgba(0,255,255,.12)}
.brand-mini{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.brand-badge{
  width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg, rgba(134,234,220,.98), rgba(183,159,255,.98));
  display:grid;place-items:center;color:#08111f;font-weight:900;font-family:var(--font-display)
}
.status-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0;align-items:stretch}
.stat{padding:16px;border-radius:14px;background:rgba(0,0,0,.6);border:1px solid rgba(0,255,255,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:86px;text-align:center}
.stat-label{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.stat-value{font:800 28px var(--font-display);margin-top:6px;color:var(--neon-cyan);text-shadow:0 0 10px rgba(0,255,255,.5);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.timer-box{padding:18px;border-radius:16px;background:rgba(0,0,0,.6);border:1px solid rgba(0,255,255,.15)}
.timer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.timer-track{height:16px;border-radius:8px;overflow:hidden;background:rgba(0,0,0,.8);border:1px solid rgba(0,255,255,.2)}
.timer-fill{
  height:100%;width:100%;background:linear-gradient(90deg, var(--neon-cyan), var(--neon-pink), var(--neon-violet));
  box-shadow:0 0 15px rgba(0,255,255,.5);transition:width .25s linear
}
.vs-panel{margin-top:16px;padding:18px;border-radius:22px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.09)}
.vs-panel.hidden{display:none}
.vs-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.vs-card{padding:16px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.vs-name{font-weight:800}.vs-score{font:800 34px var(--font-display);margin-top:6px}.vs-sep{font-family:var(--font-display);color:var(--muted)}
.board-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.word-box{width:min(720px,100%);padding:18px 20px;border-radius:16px;background:rgba(0,0,0,.5);border:1px solid rgba(0,255,255,.15)}
.word-current{font:800 clamp(26px, 4vw, 44px) var(--font-display);min-height:54px;letter-spacing:.12em;text-align:center;color:var(--neon-cyan);text-shadow:0 0 20px rgba(0,255,255,.5);font-variant-ligatures:none}
.grid-shell{position:relative;padding:var(--grid-pad);border-radius:24px;background:rgba(0,0,0,.15);border:1px solid rgba(0,255,255,.15);transition:transform 0.3s ease, filter 0.3s ease}
.grid{display:grid;grid-template-columns:repeat(5, minmax(var(--tile-min), var(--tile-max)));gap:var(--tile-gap)}
.tile{
  aspect-ratio:1;border-radius:var(--tile-radius);display:grid;place-items:center;background:rgba(0,0,0,.85);
  border:2px solid rgba(0,255,255,.35);box-shadow:0 0 20px rgba(0,255,255,.25), inset 0 0 25px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.5);
  font:800 var(--tile-font) var(--font-display);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;
  color:#fff;transition:all .12s ease;position:relative;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent
}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%);pointer-events:none}
.tile:hover{transform:scale(1.05);border-color:rgba(0,255,255,.7);box-shadow:0 0 35px rgba(0,255,255,.5)}
.tile.selected{background:rgba(0,255,255,.2);border-color:var(--neon-cyan);box-shadow:0 0 40px rgba(0,255,255,.6), inset 0 0 20px rgba(0,255,255,.2);transform:scale(1.08)}
.grid-shell::before,
.grid-shell::after{
  content:"";position:absolute;inset:-2px;border-radius:22px;pointer-events:none;opacity:0;transition:opacity .25s ease, filter .25s ease;
}
.grid-shell::before{
  background:
    linear-gradient(115deg, transparent 5%, rgba(0,255,255,.0) 12%, rgba(0,255,255,.75) 18%, rgba(255,0,170,.55) 28%, transparent 38%, transparent 52%, rgba(170,0,255,.65) 62%, rgba(0,255,136,.55) 72%, transparent 82%, rgba(0,255,255,.45) 92%, transparent 100%);
  filter:blur(14px);
  mix-blend-mode:screen;
}
.grid-shell::after{
  border:1px solid rgba(0,255,255,.0);
  box-shadow:0 0 0 rgba(0,255,255,0), inset 0 0 0 rgba(0,0,0,0);
}
.grid-shell{
  position:relative;padding:var(--grid-pad);border-radius:24px;background:rgba(0,0,0,.4);border:1px solid rgba(0,255,255,.15)
}
.grid-shell .tile{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.grid{display:grid;grid-template-columns:repeat(5, minmax(var(--tile-min), var(--tile-max)));gap:var(--tile-gap)}
.tile{
  aspect-ratio:1;border-radius:var(--tile-radius);display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(18,26,44,.98), rgba(8,12,24,1));
  border:1px solid rgba(0,255,255,.35);
  box-shadow:
    0 10px 18px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -14px 18px rgba(0,0,0,.65),
    0 0 18px rgba(0,255,255,.2);
  font:800 var(--tile-font) var(--font-display);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;
  color:var(--neon-cyan);transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position:relative;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent
}
.tile::before{
  content:"";position:absolute;inset:1px;border-radius:inherit;
  background:linear-gradient(145deg, rgba(255,255,255,.35), transparent 55%);
  opacity:.6;pointer-events:none
}
.tile::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -6px 10px rgba(0,0,0,.55);
  pointer-events:none
}
.tile:hover{
  transform:scale(1.05);
  border-color:var(--neon-cyan);
  box-shadow:0 0 30px rgba(0,255,255,.45)
}
.tile.selected{
  background:linear-gradient(135deg, rgba(33,242,255,.85), rgba(255,0,170,.8));color:#000;border-color:var(--neon-cyan);
  box-shadow:0 0 35px rgba(0,255,255,.7)
}
.action-row{width:min(720px,100%);display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:12px}
.mobile #game .game-layout{
  display:grid;grid-template-columns:1fr;gap:10px;
  grid-template-areas:
    "mode"
    "board"
    "timer"
    "status"
    "multi"
    "found"
    "details";
}
.mobile #game .game-layout > main.game-mid{display:contents}
.mobile #game .game-layout > aside:first-of-type{display:contents}
.mobile #game .game-layout > main.game-mid .panel-title{grid-area:mode}
.mobile #game .timer-box{grid-area:timer}
.mobile #game .status-strip{grid-area:status}
.mobile #game #multiPanel{grid-area:multi}
.mobile #game .board-wrap{grid-area:board}
.mobile #game .lb-wrap{grid-area:found}
.mobile #game .game-layout > aside:last-of-type{grid-area:details}
.mobile #game .game-layout > main.game-mid .panel-title{
  padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.55);border:1px solid rgba(0,255,255,.12)
}
.mobile #game .game-layout > main.game-mid .panel-title{flex-direction:column;align-items:flex-start;gap:10px}
.mobile #game .game-layout > main.game-mid .panel-title > div:last-child{width:100%;justify-content:space-between}
.mobile #game #modeTitle{font-size:24px}
.mobile #game #modeSub{display:none}
.mobile #game{padding-top:0}
.mobile #game .center-wrap{width:100%;padding:0 2px 24px}
.mobile #game .game-layout{margin-top:0;padding:0}
.mobile #game .game-mid,.mobile #game .game-side{padding:0;background:transparent;border:none}
.mobile #game .timer-box,
.mobile #game .status-strip,
.mobile #game #multiPanel,
.mobile #game .lb-wrap,
.mobile #game .board-wrap,
.mobile #game .game-layout > aside:last-of-type{
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:10px
}
.mobile #game .timer-box{padding:8px}
.mobile #game .timer-box .title{font-size:12px}
.mobile #game #timeText{font-size:18px}
.mobile #game .status-strip{gap:8px}
.mobile #game .stat{padding:8px}
.mobile #game .stat-value{font-size:20px}
.mobile #game .status-strip{margin:0;grid-template-columns:repeat(2,1fr)}
.mobile #game .stat{min-height:72px;padding:12px}
.mobile #game .vs-panel{margin-top:0}
.mobile #game .lb-wrap{margin-top:0}
.mobile #game .board-wrap{gap:10px;align-items:center}
.mobile #game .word-box{width:100%;padding:10px 12px}
.mobile #game .word-box.empty{padding:8px 10px}
.mobile #game .word-current{min-height:32px;font-size:24px}
.mobile #game .grid-shell{width:var(--grid-shell-width, 100%);max-width:100%;margin:0 auto;display:flex;justify-content:center}
.mobile #game .grid{width:fit-content;margin:0 auto;justify-items:stretch;justify-content:center}
.mobile #game .action-row{grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:300px;margin:0 auto}
.mobile #game #submitBtn{grid-column:1 / -1;order:-1}
.mobile #game #clearBtn{order:0}
.mobile #game #undoBtn{order:1}
.mobile #game .action-row .button{padding:12px 10px;font-size:13px}
.mobile #game .action-row .button.primary{padding:16px 12px;font-size:15px}
.mobile #game .found-list{max-height:160px}
.mobile #game .game-layout > aside:last-of-type .feature{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.mobile #game .game-layout > aside:last-of-type .feature h4{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mobile #game .game-layout > aside:last-of-type .feature p{margin:0;font-size:14px;font-weight:700}
.mobile #game .game-layout > aside:last-of-type .feature:last-of-type{display:none}
.mobile .panel-actions .button.small{padding:8px 10px;font-size:11px}
.mobile .lb-wrap.collapsed #foundList{display:none}
.mobile #sessionDetailsBody.collapsed{display:none}
body.mobile #soloMenu .panel-title,
body.mobile #multiMenu .panel-title{flex-direction:column;align-items:flex-start;gap:10px}
body.mobile #soloMenu .panel-title .button[data-back],
body.mobile #multiMenu .panel-title .button[data-back]{width:100%;justify-content:center}
body.mobile #soloMode .title,
body.mobile #soloMenu .title,
body.mobile #multiMode .title,
body.mobile #multiMenu .title{font-size:24px}
body.mobile #soloMode .menu-grid,
body.mobile #soloMenu .menu-grid,
body.mobile #multiMode .menu-grid,
body.mobile #multiMenu .menu-grid{grid-template-columns:1fr;gap:12px}
body.mobile #soloMode .menu-card,
body.mobile #soloMenu .menu-card,
body.mobile #multiMode .menu-card,
body.mobile #multiMenu .menu-card{min-height:auto;padding:16px}
body.mobile{overscroll-behavior-y:contain;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobile .screen{overflow-x:hidden;align-items:flex-start;justify-content:flex-start}
body.mobile .screen{position:relative;inset:auto;min-height:100dvh}
body.mobile .center-wrap{margin:10px auto 24px}
body.mobile #welcome{overflow-x:hidden}
body.mobile #welcome .hero,
body.mobile #welcome .side-panel{width:100%;max-width:100%;overflow:hidden}
body.mobile #welcome .hero > div[style*="display:flex"],
body.mobile #welcome .hero > div[style*="grid-template-columns"]{width:100%}
body.mobile #welcome .hero .logo{max-width:100%}
body.mobile #welcome .hero .logo,
body.mobile #welcome .hero .subtitle,
body.mobile #welcome .hero .feature,
body.mobile #welcome .hero .kicker{word-break:break-word}
body.mobile.in-game{overflow-y:auto}
body.mobile.in-game #game{min-height:100dvh;height:auto;overflow:visible}
body.mobile.in-game #game .center-wrap{min-height:100dvh;height:auto;margin:0 auto;overflow:visible}
body.mobile.in-game #game .game-layout{min-height:100dvh;height:auto;overflow:visible}
@supports (height: 100svh){
  body.mobile.in-game #game{min-height:100svh}
  body.mobile.in-game #game .center-wrap{min-height:100svh}
  body.mobile.in-game #game .game-layout{min-height:100svh}
}
@supports (height: 100dvh){
  body.mobile.in-game #game{min-height:100dvh}
  body.mobile.in-game #game .center-wrap{min-height:100dvh}
  body.mobile.in-game #game .game-layout{min-height:100dvh}
}
body.mobile #landing .center-wrap{width:100%;padding:0 12px 24px}
body.mobile #landing .topbar{flex-direction:column;align-items:flex-start;gap:12px}
body.mobile #landing .logo{font-size:32px;letter-spacing:.08em}
body.mobile #landing .topbar .subtitle{font-size:12px}
body.mobile #landing .topbar > div:last-child{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:10px}
body.mobile #landing .topbar > div:last-child > a.button.small{align-self:flex-start}
body.mobile #landing .profile{width:100%;flex-wrap:wrap;gap:10px;padding:10px 12px}
body.mobile #landing .avatar{width:40px;height:40px;border-radius:10px;font-size:16px}
body.mobile #landing .profile > div{flex:1 1 140px}
body.mobile #landing .profile .rating{font-size:11px}
body.mobile #landing .profile .button.small{padding:8px 10px;font-size:11px;flex:1 1 90px}
body.mobile #landing .menu-grid{grid-template-columns:1fr;gap:14px}
body.mobile #landing .menu-card{min-height:120px;padding:16px}
body.mobile #landing .menu-card h3{font-size:20px}
body.mobile #landing .lb-wrap{margin-top:16px}
body.mobile .center-wrap{width:100%;padding:0 12px}
body.mobile #welcome .center-wrap{width:100%;padding:0 12px 24px}
body.mobile #welcome .hero{padding:18px}
body.mobile #welcome .side-panel{padding:18px}
body.mobile #welcome .kicker{font-size:11px;padding:8px 10px}
body.mobile #welcome .logo{font-size:32px;letter-spacing:.06em}
body.mobile #welcome .hero .subtitle{font-size:14px}
body.mobile #welcome .hero > div[style*="display:flex"]{flex-direction:column !important;align-items:flex-start !important;gap:10px}
body.mobile #welcome .hero > div[style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:10px}
body.mobile #welcome .hero a.button.small{align-self:flex-start}
body.mobile #welcome .feature{padding:14px;border-radius:16px}
body.mobile #welcome .feature h4{font-size:16px;word-break:normal;hyphens:auto}
body.mobile #welcome .feature p{font-size:13px;line-height:1.5;word-break:normal;hyphens:auto}
body.mobile #welcome .hero .subtitle{line-height:1.5;word-break:normal}
body.mobile #landing .lb-row,
body.mobile #welcome .lb-row{
  grid-template-columns:26px 1fr auto;grid-template-rows:auto auto;gap:6px;padding:12px
}
body.mobile #landing .lb-rank,
body.mobile #welcome .lb-rank{grid-row:1 / span 2;font-size:16px}
body.mobile #landing .lb-row > div:nth-child(2),
body.mobile #welcome .lb-row > div:nth-child(2){grid-column:2;grid-row:1;min-width:0}
body.mobile #landing .lb-name,
body.mobile #welcome .lb-name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mobile #landing .lb-meta,
body.mobile #welcome .lb-meta{font-size:11px}
body.mobile #landing .lb-score,
body.mobile #welcome .lb-score{grid-column:3;grid-row:1;justify-self:end;font-size:16px}
body.mobile #landing .lb-rating,
body.mobile #welcome .lb-rating{grid-column:2;grid-row:2;justify-self:start;font-size:12px}
body.mobile #landing .lb-words,
body.mobile #welcome .lb-words{grid-column:3;grid-row:2;justify-self:end;align-self:center;font-size:11px;white-space:nowrap}
.found-list{display:flex;flex-wrap:wrap;gap:10px;max-height:240px;overflow:auto;padding-right:6px}
.badge{padding:10px 12px;border-radius:8px;background:rgba(0,255,255,.1);border:1px solid var(--neon-cyan);color:var(--neon-cyan);font-weight:700}
.start-overlay{
  position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  border-radius:28px;background:rgba(5,8,20,.64);backdrop-filter:blur(16px)
}
.start-overlay.hidden{display:none}
.countdown{font:800 clamp(46px,8vw,88px) var(--font-display);color:var(--cyan);text-shadow:0 0 22px rgba(68,243,255,.35)}
.end-modal{
  position:fixed;inset:0;z-index:8;display:none;background:rgba(4,8,18,.60);backdrop-filter:blur(14px);
  align-items:center;justify-content:center;padding:18px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch
}
.end-modal.show{display:flex}
.end-card{
  width:min(780px, calc(100vw - 28px));padding:24px;border-radius:28px;max-height:calc(100dvh - 36px);
  overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch
}
.end-modal::-webkit-scrollbar,.end-card::-webkit-scrollbar{width:10px;height:10px}
.end-modal::-webkit-scrollbar-thumb,.end-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:999px}
.end-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}
.muted{color:var(--muted)}
.result-score{font:800 58px var(--font-display);margin:8px 0 0}
.end-player-card{border:1px solid rgba(255,255,255,.08)}
.end-player-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.end-player-name{font-weight:800;font-size:18px;color:#fff;margin-top:6px}
.end-result-pill{padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.end-result-pill.winner{background:rgba(0,255,136,.18);border:1px solid rgba(0,255,136,.45);color:#8affc7}
.end-xp-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.end-xp-level{font-weight:800;color:var(--neon-cyan);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.end-xp-gain{font-size:12px;color:var(--muted)}
.end-xp-text{font-size:11px;color:var(--muted);margin-top:6px}
.end-unlocks{border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
.end-unlocks-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.end-unlocks-list{display:flex;flex-direction:column;gap:6px}
.end-unlock-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.32);border:1px solid rgba(0,255,255,.15)}
.end-unlock-item .unlock-icon{width:36px;height:36px;border-radius:8px;background-size:cover;background-position:center;object-fit:cover}
.end-unlock-item .unlock-icon:empty{background:linear-gradient(135deg,var(--neon-cyan),var(--neon-pink))}
.end-unlock-item .unlock-label{flex:1;font-weight:700;font-size:13px}
.end-unlock-item .unlock-level{font-size:11px;color:var(--neon-cyan);font-weight:700}
.end-result-pill.loser{background:rgba(255,94,117,.16);border:1px solid rgba(255,94,117,.35);color:#ffc0cb}
.end-result-pill.draw{background:rgba(0,255,255,.12);border:1px solid rgba(0,255,255,.32);color:#9efcff}
.end-top-title{font-size:12px;color:var(--muted);margin:8px 0 6px}
.end-top-list{display:flex;flex-direction:column;gap:8px}
.end-suggestion{margin-top:12px;padding:10px;border-radius:12px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.08)}
.end-suggestion-word{font:800 20px var(--font-display);letter-spacing:.12em;color:var(--neon-cyan);text-shadow:0 0 16px rgba(0,255,255,.35);margin-top:6px}
.end-word-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.08)}
.end-word-text{font-weight:800;letter-spacing:.03em}
.end-word-points{font-family:var(--font-display);color:var(--neon-cyan)}
.end-stat-toggle{margin-top:10px;padding:8px 10px;font-size:11px;height:36px}
.end-btn-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:6px}
.end-btn-row .button.small{height:36px;display:inline-flex;align-items:center;justify-content:center}
.end-stats-panel{margin-top:10px;padding:10px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08)}
.end-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.end-stat-item{padding:8px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.end-stat-key{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.end-stat-val{margin-top:3px;font-weight:800;color:#fff}
.end-wordlog{margin-top:10px;display:flex;flex-direction:column;gap:6px;max-height:170px;overflow:auto}
.end-wordlog-row{display:flex;justify-content:space-between;gap:10px;padding:7px 9px;border-radius:8px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);font-size:13px}
.end-wordlog-meta{color:var(--muted);font-size:12px}
.wait-banner{
  display:none;margin-top:14px;padding:14px 16px;border-radius:16px;background:rgba(255,179,71,.10);border:1px solid rgba(255,179,71,.25);color:#ffd9a3;font-weight:700
}
.wait-banner.show{display:block}
.floating-score{
  position:absolute;left:50%;top:40%;transform:translateX(-50%) translateY(-50%);z-index:8;
  font:900 48px var(--font-display);color:var(--neon);text-shadow:0 0 20px var(--neon),0 0 40px var(--neon);
  pointer-events:none;opacity:0;pointer-events:none
}
.floating-score.show{animation:floatUp 1s ease-out forwards}
@keyframes floatUp{0%{opacity:1;transform:translateX(-50%) translateY(-30%) scale(0.5)}50%{opacity:1;transform:translateX(-50%) translateY(-60%) scale(1.1)}100%{opacity:0;transform:translateX(-50%) translateY(-100%) scale(1)}}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:9;opacity:0;pointer-events:none;transition:.25s;
  padding:16px 24px;border-radius:16px;background:rgba(8,13,28,.98);border:2px solid var(--neon);box-shadow:var(--shadow),0 0 30px rgba(0,255,255,.3);font:700 20px var(--font-display);color:#fff;min-width:280px;text-align:center
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{position:fixed;inset:0;z-index:99;display:flex;align-items:center;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7)}
.modal-content{position:relative;z-index:1;width:90%;max-width:400px}
#authModal{display:none;position:fixed !important;inset:0 !important;z-index:99999 !important;background:rgba(0,0,0,0.85) !important;width:100% !important;height:100% !important}
#authModal > div:first-child{position:fixed !important;inset:0 !important;background:rgba(0,0,0,0.85) !important;z-index:99998 !important}
#authModal > div:last-child{position:fixed !important;top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;z-index:99999 !important;width:260px !important;max-width:260px !important;background:#0a0a0a !important;border:1px solid #00ffff !important;border-radius:8px !important;padding:14px !important}
.auth-modal-content{width:260px !important;max-width:260px !important;padding:14px !important}
.customize-modal{max-width:980px}
.customize-modal .section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.customize-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}
.customize-preview{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08)}
.preview-profile{padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.35)}
.preview-meta{margin-top:10px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.preview-meta .meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.preview-meta .meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.preview-meta .meta-value{font-size:12px;color:#fff;font-weight:700;text-align:right;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.customize-options{max-height:70vh;overflow:auto;padding-right:6px}
.customize-tabs{display:flex;gap:8px;margin-bottom:10px}
.lb-wrap > .tabs{margin-bottom:12px}
.lb-wrap > .tabs .tab-btn{padding:10px 16px;font-size:14px}
.tab-btn{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);color:var(--muted);padding:8px 10px;border-radius:10px;font-size:12px;cursor:pointer}
.tab-btn.active{border-color:var(--neon-cyan);color:#fff;box-shadow:0 0 14px rgba(0,255,255,.2)}
.customize-search{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.customize-panel{margin-top:6px}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(80px, 1fr));gap:12px;margin-top:10px}
.choice-grid.icons{grid-template-columns:repeat(auto-fit, minmax(72px, 72px));justify-content:flex-start}
.choice-grid.bg{grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));justify-content:flex-start}
.choice-grid.theme{grid-template-columns:repeat(auto-fit, minmax(130px, 1fr))}
.choice-btn{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);border-radius:12px;padding:8px;cursor:pointer;min-height:78px;display:flex;align-items:center;justify-content:center;color:#fff;transition:.15s}
.choice-btn.with-label{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;padding:10px;min-height:110px}
.choice-label{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;text-align:center;line-height:1.2;min-height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.choice-btn:hover{border-color:rgba(255,255,255,.35);transform:translateY(-1px)}
.choice-btn.selected{border-color:var(--neon-cyan);box-shadow:0 0 18px rgba(0,255,255,.25)}
.choice-btn .thumb{width:100%;height:78px;border-radius:10px;background-size:cover;background-position:center}
.choice-btn .video-thumb{width:100%;height:78px;border-radius:10px;object-fit:cover;display:block}
.choice-btn.bg .thumb{height:90px}
.choice-empty{color:var(--muted);font-size:13px}
.choice-btn.locked{opacity:0.6;position:relative}
.lock-badge{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:2px 8px;font-size:10px;color:#fff}
.choice-btn.with-label .lock-badge{bottom:auto;top:6px}
.choice-btn.theme{flex-direction:column;gap:8px;padding:10px;min-height:86px}
.theme-chip{width:100%;height:26px;border-radius:10px;box-shadow:0 0 12px rgba(0,0,0,.35)}
.theme-label{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);color:var(--neon-cyan);font-weight:800;cursor:pointer;display:grid;place-items:center}
.icon-btn:hover{border-color:var(--neon-cyan);box-shadow:0 0 14px rgba(0,255,255,.25)}
.error{color:#ff5555;font-size:14px;padding:10px;border-radius:8px;background:rgba(255,85,85,.1);border:1px solid rgba(255,85,85,.2)}
.footer-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:18px}
.code-box{
  font:800 32px var(--font-display);letter-spacing:.24em;padding:18px 24px;text-align:center;border-radius:20px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)
}
.hidden{display:none !important}.scroll{overflow:auto}
body.modal-open{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:999px}
@media (max-width: 1320px){
  :root{--tile-min:74px;--tile-max:92px}
  .game-layout{grid-template-columns:310px minmax(0,1fr) 300px}
}
@media (max-width: 1020px){
  body{overflow:auto}.screen{position:relative;min-height:100vh}
  .welcome-grid,.menu-grid,.game-layout,.end-grid{grid-template-columns:1fr}
  .hero,.side-panel,.game-side,.game-mid{min-height:auto}
  .center-wrap{width:min(100vw - 20px, 980px);margin:10px auto}
  #game{padding-top:6px}
  #game .center-wrap{margin:0 auto;width:min(100vw - 12px, 980px)}
  #game .game-layout{margin-top:8px}
  .status-strip{grid-template-columns:repeat(2,1fr)}.action-row{grid-template-columns:1fr}.vs-grid{grid-template-columns:1fr}.vs-sep{display:none}
  .customize-layout{grid-template-columns:1fr}
  .customize-options{max-height:none;overflow:visible;padding-right:0}
  .customize-tabs{position:sticky;top:0;background:rgba(6,10,20,.9);padding:8px 0;z-index:2}
  .lb-mode-grid{grid-template-columns:1fr}
  .solo-mode-grid{grid-template-columns:1fr}
  .multi-mode-grid{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .auth-modal-content{padding:22px}
}

@media (max-width: 720px){
  body.mobile .center-wrap{width:100%;padding:0 10px 18px}
  body.mobile #welcome .center-wrap,
  body.mobile #landing .center-wrap,
  body.mobile #soloMode .center-wrap,
  body.mobile #soloMenu .center-wrap,
  body.mobile #multiMode .center-wrap,
  body.mobile #multiMenu .center-wrap,
  body.mobile #game .center-wrap{width:100%;padding-left:10px;padding-right:10px}
  body.mobile .card{border-radius:20px}

  body.mobile #game .game-layout{
    gap:12px;
    grid-template-areas:
      "mode"
      "timer"
      "word"
      "board"
      "actions"
      "status"
      "multi"
      "found"
      "details";
  }
  body.mobile #game .game-layout > main.game-mid .panel-title{
    position:sticky;
    top:8px;
    z-index:6;
    background:rgba(6,10,20,.86);
    backdrop-filter:blur(14px);
    margin-bottom:0;
  }
  body.mobile #game .board-wrap{
    display:contents;
  }
  body.mobile #game .word-box{
    grid-area:word;
    width:100%;
    margin:0;
  }
  body.mobile #game .grid-shell{
    grid-area:board;
    width:var(--grid-shell-width, 100%);
    max-width:100%;
    margin:0 auto;
  }
  body.mobile #game .action-row{
    grid-area:actions;
    position:sticky;
    bottom:10px;
    z-index:6;
    width:100%;
    max-width:none;
    margin:0;
    padding:10px;
    background:rgba(5,8,18,.88);
    border:1px solid rgba(0,255,255,.14);
    border-radius:18px;
    backdrop-filter:blur(12px);
    box-shadow:0 16px 38px rgba(0,0,0,.35);
  }
  body.mobile #game .action-row .button{
    min-height:46px;
  }
  body.mobile #game .timer-box{
    padding:10px 12px;
    border-radius:18px;
  }
  body.mobile #game .status-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  body.mobile #game .stat{
    min-height:68px;
    padding:10px;
  }
  body.mobile #game .stat-value{
    font-size:18px;
  }
  body.mobile #game .lb-wrap,
  body.mobile #game .game-layout > aside:last-of-type,
  body.mobile #game #multiPanel{
    padding:12px;
    border-radius:20px;
  }
  body.mobile #game .found-list{
    max-height:120px;
  }
  body.mobile #game .game-layout > aside:last-of-type .feature{
    padding:12px 0;
  }
  body.mobile #landing .topbar{
    gap:10px;
  }
  body.mobile #landing .profile{
    gap:8px;
    padding:10px 12px;
  }
  body.mobile #welcome .hero{padding:16px}
  body.mobile #welcome .side-panel{padding:16px;gap:12px}
  body.mobile #welcome .hero > div[style*="display:flex"]{gap:12px;align-items:flex-start}
  body.mobile #welcome .hero > div[style*="grid-template-columns"]{grid-template-columns:1fr;gap:10px}
  body.mobile #welcome .lb-wrap,
  body.mobile #landing .lb-wrap{margin-top:14px;padding:14px}
  body.mobile .lb-wrap .tabs,
  body.mobile #welcome .tabs,
  body.mobile #landing .tabs,
  body.mobile #soloMode .tabs,
  body.mobile #soloMenu .tabs,
  body.mobile #multiMode .tabs,
  body.mobile #multiMenu .tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.mobile .lb-wrap .tabs::-webkit-scrollbar,
  body.mobile #welcome .tabs::-webkit-scrollbar,
  body.mobile #landing .tabs::-webkit-scrollbar,
  body.mobile #soloMode .tabs::-webkit-scrollbar,
  body.mobile #soloMenu .tabs::-webkit-scrollbar,
  body.mobile #multiMode .tabs::-webkit-scrollbar,
  body.mobile #multiMenu .tabs::-webkit-scrollbar{display:none}
  body.mobile .lb-wrap .tabs .tab-btn,
  body.mobile #welcome .tabs .tab-btn,
  body.mobile #landing .tabs .tab-btn,
  body.mobile #soloMode .tabs .tab-btn,
  body.mobile #soloMenu .tabs .tab-btn,
  body.mobile #multiMode .tabs .tab-btn,
  body.mobile #multiMenu .tabs .tab-btn{
    flex:0 0 auto;
  }
  body.mobile .lb-list{max-height:220px}
  body.mobile #landing .menu-card,
  body.mobile #welcome .hero,
  body.mobile #welcome .side-panel,
  body.mobile #soloMode .menu-card,
  body.mobile #soloMenu .menu-card,
  body.mobile #multiMode .menu-card,
  body.mobile #multiMenu .menu-card{
    border-radius:18px;
  }
  body.mobile .end-card{
    width:min(100vw - 12px, 780px);
    max-height:calc(100dvh - 12px);
    padding:16px;
    border-radius:22px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  body.mobile .end-modal{
    align-items:flex-start;
    padding:8px;
  }
  body.mobile .end-card .panel-title{
    position:sticky;
    top:0;
    z-index:2;
    margin:0;
    padding-bottom:8px;
    background:linear-gradient(180deg, rgba(4,8,18,.98), rgba(4,8,18,.85));
    backdrop-filter:blur(14px);
  }
  body.mobile .end-grid{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:0;
  }
  body.mobile .end-player-card{
    padding:14px;
    border-radius:18px;
  }
  body.mobile .result-score{
    font-size:44px;
  }
  body.mobile .end-xp-row{
    flex-direction:column;
    align-items:flex-start;
  }
  body.mobile .end-btn-row{
    flex-direction:column;
    align-items:stretch;
  }
  body.mobile .end-btn-row .button.small{
    width:100%;
  }
  body.mobile .end-stats-grid{
    grid-template-columns:1fr;
  }
  body.mobile .footer-actions{
    position:sticky;
    bottom:0;
    margin-top:8px;
    padding-top:8px;
    background:linear-gradient(180deg, rgba(4,8,18,0), rgba(4,8,18,.96));
    border-top:1px solid rgba(255,255,255,.08);
    z-index:2;
  }
  body.mobile .end-wordlog{
    max-height:140px;
  }
}

/* ============================================================
   DEPTHS MODE — the layered stack game
   ------------------------------------------------------------
   Design intent: every tile is a stack of letters. The top
   letter is the one you select. When consumed, it shatters
   into fragments that fly toward the background black hole,
   while the letter beneath rises up from below with a slight
   bounce. Ghost previews of upcoming layers appear at the
   bottom of each tile so the player can plan one move ahead.
   Dead slots (exhausted columns) look visibly inert.
   ============================================================ */

/* --- Depths menu screen --- */
.depths-intro{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:18px;
  padding:16px;
  border-radius:14px;
  background:rgba(0,0,0,0.35);
  border:1px solid var(--line);
}
.depths-intro-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.025);
  border:1px solid var(--line);
}
.depths-intro-item strong{
  display:block;color:#fff;font-size:13px;letter-spacing:.04em;
  margin-bottom:3px;
}
.depths-intro-item p{
  margin:0;color:var(--muted);font-size:12px;line-height:1.5;
}
.depths-intro-ico{
  font-size:22px;color:var(--neon-cyan);
  text-shadow:0 0 12px rgba(33,242,255,0.5);
  flex-shrink:0;line-height:1;
  filter:drop-shadow(0 0 6px rgba(33,242,255,0.4));
}
@media (max-width: 680px){
  .depths-intro{ grid-template-columns:1fr }
}

/* Depths difficulty cards get a subtly different treatment so
   they're visually distinct from classic difficulty cards */
.menu-card.depths-diff{
  background:linear-gradient(180deg, rgba(18,10,32,0.92), rgba(10,6,22,0.95));
  border:1px solid rgba(167,139,250,0.22);
}
.menu-card.depths-diff:hover{
  border-color:var(--neon-violet);
  box-shadow:var(--shadow), 0 0 30px rgba(167,139,250,0.25);
}
.menu-card.depths-diff .emoji{
  color:var(--neon-violet);
  filter:drop-shadow(0 0 12px rgba(167,139,250,0.5));
}

/* --- In-game body flag --- */
body.depths-mode #modeTitle{
  background:linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-violet) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 0 18px rgba(167,139,250,0.4));
}

/* ============================================================
   THE TILES
   ============================================================ */
.tile.depth-tile{
  /* Override the classic tile look — Depths tiles are taller to
     accommodate the stack bars, the main letter, and the preview row. */
  background:
    linear-gradient(180deg,
      rgba(22,30,52,0.95) 0%,
      rgba(14,20,38,0.98) 60%,
      rgba(8,12,24,1) 100%);
  border:1px solid rgba(167,139,250,0.28);
  box-shadow:
    0 0 22px rgba(33,242,255,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -14px 24px rgba(0,0,0,0.55),
    0 6px 14px rgba(0,0,0,0.55);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  /* Reset the base .tile inner padding/grid so we can layout our own children */
  display:block;
  padding:0;
  color:#fff;
}
/* Subtle vignette on the bottom edge so preview letters have a "depth well" feel */
.tile.depth-tile::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:38%;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
  pointer-events:none;
}
/* Top highlight sweep — the same gloss the classic tiles have */
.tile.depth-tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 45%);
  pointer-events:none;
  border-radius:inherit;
}

.tile.depth-tile:hover{
  transform:translateY(-2px) scale(1.02);
  border-color:rgba(33,242,255,0.55);
  box-shadow:
    0 0 32px rgba(33,242,255,0.28),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -14px 26px rgba(0,0,0,0.5),
    0 10px 20px rgba(0,0,0,0.55);
}
.tile.depth-tile.selected{
  background:
    linear-gradient(180deg,
      rgba(33,242,255,0.25) 0%,
      rgba(167,139,250,0.22) 50%,
      rgba(255,92,173,0.20) 100%);
  border-color:var(--neon-cyan);
  box-shadow:
    0 0 36px rgba(33,242,255,0.55),
    0 0 64px rgba(167,139,250,0.30),
    inset 0 0 18px rgba(255,255,255,0.18);
  transform:translateY(-1px) scale(1.05);
}
.tile.depth-tile.selected .depth-letter{
  color:#04101a;
  text-shadow:
    0 0 18px rgba(255,255,255,0.9),
    0 2px 4px rgba(0,0,0,0.3);
}

/* --- Dead / blank tile --- */
.tile.depth-tile.blank{
  background:
    linear-gradient(180deg,
      rgba(8,10,16,0.95) 0%,
      rgba(4,6,12,1) 100%);
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.8),
    inset 0 0 0 1px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.3);
  cursor:not-allowed;
  opacity:0.55;
  filter:saturate(0.2);
}
.tile.depth-tile.blank:hover{
  transform:none;
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.8),
    inset 0 0 0 1px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.3);
}
.tile.depth-tile.blank::before,
.tile.depth-tile.blank::after{ display:none }
.depth-blank-core{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font:800 clamp(28px, 3vw, 42px) var(--font-display);
  color:rgba(255,255,255,0.10);
  /* Small hatched pattern to really sell "dead" */
  background:
    repeating-linear-gradient(45deg,
      transparent 0, transparent 6px,
      rgba(255,255,255,0.025) 6px, rgba(255,255,255,0.025) 8px);
}

/* ============================================================
   STACK-DEPTH INDICATOR (left edge of each tile)
   6 vertical bars that light up based on how many letters
   remain in the column. Quick visual read of "how much life
   this column has left."
   ============================================================ */
.depth-stack-bars{
  position:absolute;
  left:6px;
  top:8px;
  bottom:8px;
  width:4px;
  display:flex;
  flex-direction:column-reverse; /* bars fill bottom-up */
  gap:2px;
  z-index:2;
  pointer-events:none;
}
.depth-stack-bar{
  flex:1;
  border-radius:2px;
  background:rgba(255,255,255,0.06);
  transition:background 0.3s ease, box-shadow 0.3s ease;
}
.depth-stack-bar.on{
  background:linear-gradient(180deg, var(--neon-cyan), var(--neon-violet));
  box-shadow:0 0 6px rgba(33,242,255,0.5);
}
.tile.depth-tile.selected .depth-stack-bar.on{
  background:linear-gradient(180deg, #fff, var(--neon-cyan));
  box-shadow:0 0 8px rgba(255,255,255,0.7);
}

/* ============================================================
   THE MAIN LETTER
   ============================================================ */
.depth-letter{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font:800 var(--tile-font) var(--font-display);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:
    0 0 18px rgba(33,242,255,0.5),
    0 2px 6px rgba(0,0,0,0.8);
  z-index:3;
  /* Nudge up slightly so the preview row at the bottom has breathing room */
  padding-bottom:22%;
  will-change:transform, opacity;
  pointer-events:none;
}

/* Rise animation: when a new layer becomes the top, the letter
   enters from below the tile with a slight bounce-settle.
   Duration matches the 450ms unlock wait in depthsSubmitWord. */
.depth-letter--rising{
  animation:depthLetterRise 440ms cubic-bezier(0.22, 1.3, 0.36, 1) both;
}
@keyframes depthLetterRise{
  0%  { transform:translateY(70%) scale(0.88); opacity:0; filter:blur(2px) }
  30% { opacity:1; filter:blur(0) }
  65% { transform:translateY(-6%) scale(1.04); opacity:1 }
  85% { transform:translateY(2%) scale(0.99); opacity:1 }
  100%{ transform:translateY(0) scale(1); opacity:1 }
}

/* "New letter just arrived" border pulse on the whole tile */
.tile.depth-tile.depth-tile--arrived{
  animation:depthTileArrived 520ms ease-out both;
}
@keyframes depthTileArrived{
  0%  { box-shadow:
          0 0 0 2px rgba(33,242,255,0.85),
          0 0 36px rgba(33,242,255,0.6),
          inset 0 0 20px rgba(33,242,255,0.2),
          0 6px 14px rgba(0,0,0,0.55) }
  60% { box-shadow:
          0 0 0 1px rgba(33,242,255,0.4),
          0 0 22px rgba(33,242,255,0.3),
          inset 0 0 10px rgba(33,242,255,0.08),
          0 6px 14px rgba(0,0,0,0.55) }
  100%{ box-shadow:
          0 0 22px rgba(33,242,255,0.10),
          inset 0 1px 0 rgba(255,255,255,0.06),
          inset 0 -14px 24px rgba(0,0,0,0.55),
          0 6px 14px rgba(0,0,0,0.55) }
}

/* "Breaking" telegraph — brief bright flare before the tile
   shatters. Kept very short (90ms) so it reads as "attention"
   not "animation." */
.tile.depth-tile.depth-tile--breaking{
  animation:depthTileBreaking 90ms ease-out forwards;
}
@keyframes depthTileBreaking{
  0%  { filter:brightness(1); transform:scale(1) }
  50% { filter:brightness(2.2) saturate(1.3); transform:scale(1.08) }
  100%{ filter:brightness(1); transform:scale(1); opacity:0.0 }
}

/* ============================================================
   PREVIEW ROW — ghost letters at the bottom of each tile
   showing what's coming up next, if difficulty allows.
   ============================================================ */
.depth-preview{
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  height:22%;
  pointer-events:none;
  z-index:2;
}
.depth-preview-ch{
  font:700 clamp(11px, 1.2vw, 14px) var(--font-display);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  text-shadow:0 1px 3px rgba(0,0,0,0.7);
  line-height:1;
}
.depth-preview-ch.depth-preview-1{
  color:rgba(233,242,255,0.42);
  font-size:clamp(13px, 1.4vw, 16px);
}
.depth-preview-ch.depth-preview-2{
  color:rgba(233,242,255,0.22);
  font-size:clamp(10px, 1.1vw, 13px);
}
.depth-preview-ch.depth-preview-end{
  color:rgba(255,92,173,0.55);
  font-size:clamp(11px, 1.2vw, 14px);
  text-shadow:0 0 8px rgba(255,92,173,0.4);
}
.tile.depth-tile.selected .depth-preview-ch{
  color:rgba(4,16,26,0.45);
  text-shadow:none;
}

/* ============================================================
   FLYING FRAGMENTS + LETTER GHOST
   These are positioned:fixed children of <body> so we don't
   need to care about tile clipping. The classes are mostly
   for defensive resets — most visual properties are inline.
   ============================================================ */
.depth-fragment{
  /* Prevent any global transitions from interfering with the
     rAF-driven animation. */
  transition:none !important;
  will-change:transform, opacity;
  mix-blend-mode:screen;
}

.depth-letter-ghost{
  position:fixed;
  pointer-events:none;
  z-index:125;
  font:900 clamp(36px, 4vw, 56px) var(--font-display);
  letter-spacing:.02em;
  text-transform:uppercase;
  will-change:transform, opacity;
  transform-origin:center center;
  /* The inline style sets left/top to the tile center, so we
     offset by -50%/-50% here to center the letter on that point. */
  transform:translate(-50%, -50%);
  /* We override transform via JS animation, but need the centering
     baseline. The JS animation sets transform directly; since we
     want the centering translate, we apply it as margin instead: */
  margin:0;
}
/* Actually — we can't both center and animate transform cleanly.
   Let's use a wrapper trick: the element itself is centered by
   margin offsets set in JS, and transform is used purely for
   motion. We'll compute the offset in JS.                    */
.depth-letter-ghost{ transform:none }

/* ============================================================
   GRID-SHELL TREATMENT WHEN IN DEPTHS MODE
   Slightly different background + border to reinforce identity.
   ============================================================ */
body.depths-mode .grid-shell{
  background:
    radial-gradient(ellipse at center top,
      rgba(33,242,255,0.05) 0%,
      transparent 60%),
    radial-gradient(ellipse at center bottom,
      rgba(167,139,250,0.08) 0%,
      transparent 60%),
    rgba(4,8,16,0.55);
  border:1px solid rgba(167,139,250,0.20);
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.6),
    0 0 40px rgba(33,242,255,0.05);
}
body.depths-mode .grid-shell::before{
  /* Subtle animated beam at the bottom, suggesting "down there" */
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:30%;
  background:linear-gradient(180deg, transparent, rgba(167,139,250,0.08));
  pointer-events:none;
  animation:depthsShellPulse 4s ease-in-out infinite;
}
@keyframes depthsShellPulse{
  0%,100% { opacity:0.5 }
  50%     { opacity:1 }
}

/* Depths-mode timer box repurposed as "Letters Left" meter.
   The JS swaps the label text; we just make sure the bar
   looks right with the new color gradient. */
body.depths-mode .timer-box{
  border-color:rgba(167,139,250,0.28);
  background:
    linear-gradient(180deg, rgba(18,10,32,0.6), rgba(10,6,22,0.7));
}
body.depths-mode .timer-head .title{
  color:var(--neon-violet);
  text-shadow:0 0 12px rgba(167,139,250,0.4);
}
body.depths-mode #timeText{
  color:var(--neon-cyan);
  text-shadow:0 0 14px rgba(33,242,255,0.5);
  font-variant-numeric:tabular-nums;
}
body.depths-mode .timer-fill{
  /* JS overrides background inline; this is just the fallback */
  background:linear-gradient(90deg, var(--neon-cyan), var(--neon-violet), var(--neon-pink));
  box-shadow:0 0 14px rgba(167,139,250,0.5);
}

/* Depths mode shuffle button is misleading (nothing to shuffle)
   so we hide it. */
body.depths-mode #shuffleBtn{ display:none }

/* Mobile adjustments: the preview row and stack bars need to
   stay readable at small tile sizes */
@media (max-width: 1020px){
  .depth-letter{ padding-bottom:24% }
  .depth-stack-bars{ width:3px; left:5px }
  .depth-preview{ height:24%; gap:4px }
}

/* Force hide authModal by default */
#authModal{display:none !important}