/* ═══════════════════════════════════════════════════════════════════════════
   WordScrambleX — app skin + components
   Identity: BRIGHT · POPPY · FUN. Teal + sunny yellow on a deep teal base, with
   a rounded playful font (Fredoka). Maps onto the shared --sx-* system; loads
   AFTER core.css. Shared by control.html (dashboard) and play.html (game window).
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Lilita+One&display=swap');

:root{
  /* app brand */
  --teal:#13d1c4; --teal-deep:#04231f; --yellow:#ffd23f; --yellow-deep:#3a2e00;

  /* ── map the family --sx-* contract onto the teal + yellow identity ── */
  --sx-bg:#06211f;                          /* deep teal, poppy but legible */
  --sx-surface:#0c2d2a; --sx-surface2:#12403a;
  --sx-border:#1d514a; --sx-border2:#2c6f63;
  --sx-text:#effbf8; --sx-muted:#8fbcb4; --sx-muted2:#b6ddd5; --sx-faint:#5f8b83;

  --sx-accent:#13d1c4; --sx-accent2:#ffd23f;
  --sx-accent-ink:#04231f;                  /* deep teal ink reads on teal + yellow */
  --sx-accent-soft:#0a3833; --sx-accent-hover:#2ee6d8;
  --sx-ok:#43e08a; --sx-danger:#ff6f7d;

  --sx-glow-1:#13d1c4; --sx-glow-2:#ffd23f; /* poppy teal + yellow aurora */
  --sx-bg-hi:color-mix(in srgb,var(--sx-bg) 84%,#0fd6c6);
  --sx-bg-lo:color-mix(in srgb,var(--sx-bg) 82%,#000);

  --sx-radius:18px; --sx-radius-sm:12px;
  --sx-shadow:0 22px 48px -20px rgba(0,0,0,.6);

  --sx-font:'Fredoka','Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sx-display:'Lilita One','Fredoka',system-ui,sans-serif;   /* chunky, poppy headlines */
}

::-webkit-scrollbar-thumb{background:var(--sx-accent)}
body{background:var(--sx-bg);color:var(--sx-text);font-family:var(--sx-font);font-weight:400}

/* ── Page shell ─────────────────────────────────────────────────────────── */
.wrap{max-width:1340px;margin:0 auto;padding:24px 26px 46px}
.section-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--sx-muted);margin-bottom:14px}

/* connection status pill (shared) */
.conn{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--sx-muted)}
.conn-dot{width:9px;height:9px;border-radius:50%;background:var(--sx-danger);
  transition:background var(--sx-dur-base) var(--sx-ease)}
.conn-dot.on{background:var(--sx-ok);box-shadow:0 0 12px color-mix(in srgb,var(--sx-ok) 60%,transparent)}

/* ── Buttons: chunky, poppy pills ───────────────────────────────────────── */
.sx-btn{font-family:var(--sx-font);font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:999px;
  border:1.5px solid var(--sx-border2);background:var(--sx-surface2);color:var(--sx-text)}
.sx-btn:hover{border-color:var(--sx-accent);transform:translateY(-2px)}
.sx-btn-primary{background:linear-gradient(135deg,var(--sx-accent),#0fbfae);border-color:transparent;
  color:var(--sx-accent-ink);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--sx-accent) 80%,transparent)}
.sx-btn-primary:hover{filter:brightness(1.06);box-shadow:0 10px 26px -8px color-mix(in srgb,var(--sx-accent) 90%,transparent)}
.sx-btn-yellow{background:linear-gradient(135deg,var(--sx-accent2),#ffbe24);border-color:transparent;
  color:#3a2e00;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--sx-accent2) 75%,transparent)}
.sx-btn-yellow:hover{filter:brightness(1.05)}
.sx-btn-lg{padding:15px 28px;font-size:16px}
.btn-danger{font-family:var(--sx-font);border-radius:999px;font-weight:600}

/* ── Panels / cards ─────────────────────────────────────────────────────── */
.panel{position:relative;border-radius:var(--sx-radius);padding:22px 22px;
  background:linear-gradient(162deg,color-mix(in srgb,var(--sx-surface2) 74%,transparent),
    color-mix(in srgb,var(--sx-surface) 66%,transparent));
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 24px 50px -30px rgba(0,0,0,.7)}
.panel + .panel{margin-top:20px}
.panel-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;
  color:var(--sx-accent);margin-bottom:16px}

/* ── The letter-tile motif ──────────────────────────────────────────────── */
.tile{display:inline-flex;align-items:center;justify-content:center;font-weight:400;
  color:var(--teal-deep);background:linear-gradient(155deg,#7ff0e7,var(--teal) 60%,#0bb6a8);
  border-radius:11px;box-shadow:0 4px 0 #09938985, inset 0 1px 0 rgba(255,255,255,.5);
  font-family:var(--sx-display)}
.tile.power{color:#3a2e00;background:linear-gradient(155deg,#ffe58a,var(--yellow) 58%,#f0b81f);
  box-shadow:0 4px 0 #b58a1585, inset 0 1px 0 rgba(255,255,255,.55)}
.tile.hidden{color:color-mix(in srgb,var(--sx-text) 22%,transparent);
  background:linear-gradient(155deg,#0e332f,#0a2723);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}

/* ── Sign-in gate: the front door shows the game ─────────────────────────── */
.gate{width:100%;min-height:calc(100vh - 200px);display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:48px 20px 64px;gap:0}
.gate-board{display:flex;gap:clamp(5px,1vw,10px);margin-bottom:clamp(26px,4vh,40px);
  perspective:600px}
.gate-board .tile{position:relative;width:clamp(36px,9.2vw,66px);aspect-ratio:1;
  font-size:clamp(20px,4.8vw,38px);
  animation:gate-deal .62s var(--sx-spring, cubic-bezier(.34,1.56,.64,1)) both;
  animation-delay:calc(var(--i) * 70ms);
  transition:transform .18s var(--sx-ease-out,ease-out)}
.gate-board .tile.swap{transform:scale(.8) rotate(var(--tilt,4deg))}
.gate-board .tile .mult{position:absolute;top:-7px;right:-7px;font-family:var(--sx-font);
  font-size:11px;font-weight:700;line-height:1;padding:3px 6px;border-radius:999px;
  color:#3a2e00;background:linear-gradient(135deg,#ffe58a,var(--sx-accent2));
  box-shadow:0 3px 8px -2px rgba(0,0,0,.45)}
@keyframes gate-deal{
  0%{opacity:0;transform:translateY(-30px) rotate(-7deg) scale(.55)}
  100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
.gate-title{font-family:var(--sx-display);font-weight:400;letter-spacing:.4px;
  font-size:clamp(32px,6.2vw,56px);line-height:1.06;margin:0 0 16px}
.gate-title span{color:var(--sx-accent2);text-shadow:0 0 26px color-mix(in srgb,var(--sx-accent2) 40%,transparent)}
.gate-sub{max-width:560px;color:var(--sx-muted2);font-size:clamp(15px,2vw,17.5px);
  line-height:1.55;margin:0 0 26px}
.gate-cta{font-size:16.5px;padding:15px 38px;font-weight:700}
.gate-cta:hover{transform:translateY(-2px) scale(1.03)}
.gate-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:26px}
.gate-chips span{font-size:12.5px;font-weight:600;color:var(--sx-muted);padding:7px 14px;
  border-radius:999px;border:1px solid var(--sx-border);
  background:color-mix(in srgb,var(--sx-surface) 60%,transparent)}
@media (max-width:560px){.gate{min-height:calc(100vh - 150px);padding-top:30px}}
@media (prefers-reduced-motion: reduce){.gate-board .tile{animation:none}}

/* ── LIVE GAME VIEW hero (used only when a live preview is wanted) ───────── */
.hero{position:relative;border-radius:22px;overflow:hidden;margin-bottom:22px;
  background:radial-gradient(120% 100% at 0% 0%,color-mix(in srgb,var(--sx-accent) 18%,transparent),transparent 55%),
    linear-gradient(160deg,var(--sx-surface2),var(--sx-surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sx-accent) 30%,var(--sx-border)),
    0 40px 80px -44px rgba(0,0,0,.8)}
.hero-head{display:flex;align-items:center;gap:14px;padding:20px 24px 15px;flex-wrap:wrap}
.hero-head h2{font-family:var(--sx-display);font-size:22px;font-weight:400;letter-spacing:.4px;display:flex;align-items:center;gap:11px}
.hero-head h2 .dot{width:12px;height:12px;border-radius:4px;
  background:linear-gradient(135deg,var(--sx-accent),var(--sx-accent2));
  box-shadow:0 0 12px color-mix(in srgb,var(--sx-accent) 60%,transparent)}
.hero-head .spacer{flex:1}

.live-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:#062c28;background:var(--sx-accent);
  box-shadow:0 6px 16px -6px color-mix(in srgb,var(--sx-accent) 80%,transparent)}
.live-badge .pulse{width:7px;height:7px;border-radius:50%;background:#062c28;animation:sx-pulse 1.6s var(--sx-ease-in-out) infinite}
@keyframes sx-pulse{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}

.preview-frame{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:#04120f}
.preview-frame iframe{position:absolute;top:0;left:0;width:1920px;height:1080px;border:0;
  transform-origin:top left;pointer-events:none}
.preview-frame:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;border:0;background:#000}

.hero-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:16px 24px 20px}
.hero-actions .spacer{flex:1}

/* ── Game-window launcher card (control page: game lives in its own window) ─ */
.launch{position:relative;overflow:hidden;border-radius:22px;margin-bottom:22px;padding:26px 26px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:radial-gradient(130% 120% at 100% 0%,color-mix(in srgb,var(--sx-accent2) 16%,transparent),transparent 52%),
    radial-gradient(120% 120% at 0% 100%,color-mix(in srgb,var(--sx-accent) 20%,transparent),transparent 55%),
    linear-gradient(150deg,var(--sx-surface2),var(--sx-surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sx-accent) 30%,var(--sx-border)),0 40px 80px -46px rgba(0,0,0,.8)}
.launch-emoji{font-size:44px;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.launch-copy{flex:1;min-width:220px}
.launch-copy h2{font-family:var(--sx-display);font-size:27px;font-weight:400;letter-spacing:.4px;margin-bottom:6px}
.launch-copy p{font-size:14px;color:var(--sx-muted);line-height:1.5;max-width:520px}
.launch-actions{display:flex;gap:11px;flex-wrap:wrap;align-items:center}

/* live-status chip that rides in the launcher */
.round-flag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--sx-muted2)}

/* streamer play bar (inside game window) */
.play-bar{display:flex;gap:11px;align-items:stretch;flex-wrap:wrap}
.play-bar .grow{flex:1;min-width:200px}

/* ── Share / chat-invite block ──────────────────────────────────────────── */
.share{display:grid;gap:14px}
.share-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.link-pill{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;
  padding:12px 15px;border-radius:12px;background:var(--sx-surface);
  border:1.5px solid var(--sx-border);font-family:var(--sx-mono);font-size:13px;color:var(--sx-accent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share small{color:var(--sx-faint);font-size:12.5px;line-height:1.5}

/* ── Mode / difficulty selector cards ───────────────────────────────────── */
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.diff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:11px}
.pick{position:relative;padding:15px 16px;border-radius:14px;cursor:pointer;
  background:color-mix(in srgb,var(--sx-surface2) 55%,transparent);
  border:2px solid var(--sx-border);text-align:left;
  transition:border-color var(--sx-dur-fast) var(--sx-ease),background var(--sx-dur-fast) var(--sx-ease),
    transform var(--sx-dur-fast) var(--sx-spring)}
.pick:hover{border-color:color-mix(in srgb,var(--sx-accent) 55%,var(--sx-border));transform:translateY(-2px)}
.pick.selected{border-color:var(--sx-accent);
  background:color-mix(in srgb,var(--sx-accent) 14%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--sx-accent) 45%,transparent),
    0 14px 30px -18px color-mix(in srgb,var(--sx-accent) 80%,transparent)}
.pick[data-disabled]{opacity:.42;pointer-events:none}
.pick .p-name{font-size:15.5px;font-weight:600;margin-bottom:3px}
.pick.selected .p-name{color:var(--sx-accent)}
.pick .p-desc{font-size:11.5px;color:var(--sx-muted);line-height:1.35}
.diff-grid .pick{text-align:center}

/* ── Settings rows ──────────────────────────────────────────────────────── */
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--sx-border) 55%,transparent)}
.setting-row:last-child{border-bottom:none}
.setting-label{font-size:14.5px;font-weight:500}
.setting-hint{font-size:11.5px;color:var(--sx-faint);line-height:1.4;margin-top:2px;max-width:240px}
.setting-row input[type=number]{width:78px;text-align:center}
.setting-row select{width:auto}
input,select,textarea{font-family:var(--sx-font);border-radius:11px}
input:focus,select:focus,textarea:focus{border-color:var(--sx-accent)}

/* toggle (self-contained) */
.toggle{flex:none;width:46px;height:26px;border-radius:999px;background:#1c4a44;position:relative;
  cursor:pointer;transition:background var(--sx-dur-fast) var(--sx-ease);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.toggle.on{background:var(--sx-accent)}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#dff6f2;box-shadow:0 1px 3px rgba(0,0,0,.5);
  transition:transform var(--sx-dur-base) var(--sx-spring),background var(--sx-dur-fast) var(--sx-ease)}
.toggle.on::after{transform:translateX(20px);background:#04231f}

input[type=range]{-webkit-appearance:none;appearance:none;width:128px;height:7px;border-radius:4px;
  background:var(--sx-surface);outline:none;cursor:pointer;padding:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--sx-accent);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.range-wrap{display:flex;align-items:center;gap:10px}
.range-val{font-size:13px;color:var(--sx-muted);min-width:30px;text-align:right;
  font-variant-numeric:tabular-nums;font-family:var(--sx-mono)}

/* ── Round preview / status ─────────────────────────────────────────────── */
.status-bar{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:13px;
  background:color-mix(in srgb,var(--sx-surface2) 50%,transparent);margin-bottom:16px}
.status-chip{padding:5px 13px;border-radius:999px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.8px}
.status-idle{background:rgba(255,255,255,.08);color:var(--sx-muted2)}
.status-running{background:color-mix(in srgb,var(--sx-ok) 20%,transparent);color:var(--sx-ok)}
.status-paused{background:color-mix(in srgb,var(--sx-accent2) 22%,transparent);color:var(--sx-accent2)}
.status-levelComplete{background:color-mix(in srgb,var(--sx-accent) 22%,transparent);color:var(--sx-accent)}
.status-roundEnd{background:color-mix(in srgb,var(--sx-danger) 18%,transparent);color:var(--sx-danger)}
.status-info{font-size:13.5px;color:var(--sx-muted)}

.preview-letters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:14px 0 8px}
.preview-letters .tile{width:48px;height:56px;font-size:24px}
.valid-count{font-size:13.5px;color:var(--sx-muted);text-align:center;padding:4px 0}
.valid-count b{color:var(--sx-accent)}
.star-display{text-align:center;font-size:19px;letter-spacing:4px;padding:2px 0;min-height:24px}

/* ── Controls button row ────────────────────────────────────────────────── */
.controls{display:flex;flex-wrap:wrap;gap:10px}

/* ── Leaderboard / found words ──────────────────────────────────────────── */
.lb-entry{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;font-size:14px}
.lb-entry:nth-child(odd){background:color-mix(in srgb,var(--sx-surface2) 42%,transparent)}
.lb-rank{width:26px;text-align:center;font-weight:600;color:var(--sx-faint)}
.lb-entry:first-child .lb-rank{color:var(--yellow)}
.lb-name{flex:1;font-weight:500}
.lb-words{font-size:12px;color:var(--sx-faint);font-family:var(--sx-mono)}
.lb-score{font-weight:600;color:var(--sx-accent);font-variant-numeric:tabular-nums}
.fw-list{max-height:210px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.fw-item{display:flex;align-items:center;gap:10px;padding:7px 9px;font-size:13px;border-radius:9px;
  animation:fw-in var(--sx-dur-in) var(--sx-spring)}
@keyframes fw-in{from{opacity:0;transform:translateX(-8px)}}
.fw-item-word{font-weight:600;min-width:78px;text-transform:uppercase;letter-spacing:.5px}
.fw-item-player{flex:1;color:var(--sx-muted);font-size:12.5px}
.fw-item-pts{font-weight:600;color:var(--sx-ok);font-variant-numeric:tabular-nums}
.info-text{font-size:12.5px;color:var(--sx-faint);line-height:1.5}

/* ── In-page Game View: the dashboard becomes the game ──────────────────── */
.game-view{position:fixed;inset:0;z-index:80;display:none;flex-direction:column;background:var(--sx-bg)}
.game-view.on{display:flex}
.gv-top{display:flex;align-items:center;gap:9px;padding:11px 16px;flex-wrap:wrap;
  border-bottom:1px solid var(--sx-border);
  background:color-mix(in srgb,var(--sx-bg) 82%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.gv-top .spacer{flex:1}
.gv-top .status-info{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gv-stage{flex:1;min-height:0;position:relative;overflow:hidden;
  /* blend the 16:9 letterbox into the game's own scene instead of hard black */
  background:radial-gradient(120% 82% at 50% -8%,#1a8ba1 0%,transparent 52%),
    linear-gradient(165deg,#0f5c73 0%,#0c3f60 45%,#0b2b54 100%)}
.gv-stage iframe{position:absolute;top:0;left:0;width:1920px;height:1080px;border:0;
  transform-origin:top left;pointer-events:none}
.gv-stage:fullscreen{background:#000}
.gv-play{display:flex;align-items:center;gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--sx-border);
  background:linear-gradient(160deg,var(--sx-surface2),var(--sx-surface))}
.gv-play input{flex:1;max-width:440px;height:48px;font-size:16px;font-weight:600}
.gv-play .sx-btn{height:48px;padding:0 26px}
.gv-msg{flex:1;font-size:13.5px;font-weight:600;color:var(--sx-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color var(--sx-dur-base) var(--sx-ease)}
.gv-msg.good{color:var(--sx-ok)}
.gv-msg.warn{color:var(--sx-accent2)}
.status-lobby{background:color-mix(in srgb,var(--sx-accent) 22%,transparent);color:var(--sx-accent)}
@media (max-width:720px){
  .gv-top{gap:7px}
  .gv-play input{max-width:none}
  .gv-msg{display:none}
}

/* ── mini toast (copy feedback) ─────────────────────────────────────────── */
.mini-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--sx-surface2);border:1.5px solid var(--sx-border2);color:var(--sx-text);
  padding:12px 20px;border-radius:999px;font-size:14px;font-weight:600;z-index:300;
  box-shadow:var(--sx-shadow);opacity:0;pointer-events:none;
  transition:opacity var(--sx-dur-base) var(--sx-ease),transform var(--sx-dur-base) var(--sx-spring)}
.mini-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.mini-toast b{color:var(--sx-accent)}

/* ── responsive ─────────────────────────────────────────────────────────── */
.grid-3{display:grid;grid-template-columns:1fr 1fr 340px;gap:20px;align-items:start}
@media (max-width:1080px){
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-3 > :last-child{grid-column:1/-1}
}
@media (max-width:720px){
  .wrap{padding:16px 14px 32px}
  .grid-3{grid-template-columns:1fr}
  .mode-grid{grid-template-columns:1fr}
  .launch{padding:20px}
  .launch-emoji{font-size:36px}
}