/* ══════════════════════════════════════════════════════════════════════════
       DESIGN TOKENS — change colours / radii / font here to retheme the game.
       Everything in the UI is built from these variables.
    ══════════════════════════════════════════════════════════════════════════ */
    :root {
      /* ── Backgrounds (dark mode — pure black) ── */
      --bg:          #111111;
      --surface:     #1c1c1c;
      --surface-dk:  #0a0a0a;
      --surface-hl:  #262626;
      --surface-ac:  #2d2d2d;

      /* ── Borders ── */
      --border:      #2a2a2a;
      --border-mid:  #444444;

      /* ── Text (opaque — avoids Arabic glyph overlap rendering issues) ── */
      --text:        #ffffff;
      --text-sub:    #c4c4c4;
      --text-muted:  #888888;
      --text-faint:  #646464;
      --text-ghost:  #414141;
      /* Opaque equivalents for game text to prevent clipping */
      --text-op:       #ffffff;
      --text-muted-op: #888888;

      /* ── Accent ── */
      --accent:      #38bdf8;
      --accent-lt:   #7dd3fc;
      --accent-dk:   #1a1a1a;

      /* ── Status ── */
      --green:       #4ade80;
      --green-dk:    rgba(74,222,128,0.12);
      --red:         #f87171;
      --red-dk:      rgba(248,113,113,0.12);
      --red-dkk:     rgba(248,113,113,0.18);
      --yellow:      #fbbf24;

      /* ── Wordle tile states ── */
      --wrd-correct:    #13ac71;
      --wrd-present:    #ebbe0d;
      --wrd-absent:     #6e6e6e;
      --wrd-correct-dk: #097b4d;
      --wrd-present-dk: #ae8a20;
      --wrd-absent-dk:  #454545;

      /* ── Wordle keyboard default key ── */
      --kb-key:    #323232;
      --kb-text:   #ffffff;
      --kb-key-dk: #1e1e1e;

      /* ── Wordle action keys ── */
      --key-action:    #2a2a2a;
      --key-action-lt: rgba(255,255,255,0.9);
      --key-action-hl: #333333;

      /* ── Shape ── */
      --r-sm: 0.4rem;
      --r:    0.75rem;
      --r-md: 1rem;
      --r-lg: 1.5rem;
      --r-xl: 2rem;

      /* ── Typography ── */
      --font: 'IBM Plex Sans Arabic', 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

      /* ── Fluid base — scales all rem values with viewport ── */
      font-size: clamp(14px, 1.2vw, 20px);
    }

    /* ── Material Symbols ── */
    .material-symbols-rounded {
      font-family: 'Material Symbols Rounded';
      font-weight: normal; font-style: normal;
      font-size: 1.25em; line-height: 1;
      letter-spacing: normal; text-transform: none;
      display: inline-block; white-space: nowrap;
      direction: ltr; user-select: none;
      vertical-align: middle;
      font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    /* ── Reset ── */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      background: var(--bg); color: var(--text);
      font-family: var(--font);
    }
    #main-content {
      flex: 1;
      display: flex; flex-direction: column; align-items: center;
      width: 100%;
    }

    /* ── Custom Scrollbar (Global) ── */
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--bg); border-radius: 5px; }
    ::-webkit-scrollbar-thumb { 
      background: var(--border-mid); 
      border-radius: 10px; 
      border: 3px solid var(--bg); 
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
    /* Firefox support */
    * { scrollbar-width: thin; scrollbar-color: var(--border-mid) var(--bg); }

    /* ── Unified Fixed Nav (all screens) ── */
    body:not(:has(#home-screen.active)) .hn-pill { display: none; }
    body:not(:has(#home-screen.active)) .site-nav-inner { display: flex; justify-content: space-between; align-items: center; }
    #site-nav {
      width: 100%;
      background: var(--bg);
      padding-top: 14px;
    }
    .site-nav-inner {
      max-width: clamp(520px, 72vw, 1060px); margin: 0 auto;
      padding: 0 2rem;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      height: 56px;
    }

    /* ── Single logo — invert in dark mode ── */
    .site-logo-img { display: block; }
    html:not(.light) .site-logo-img { filter: brightness(0) invert(1); }

    /* ── Screens ── */
    .screen {
      display: none; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center; gap: 1.5rem;
      padding: 2rem; width: 100%; max-width: clamp(520px, 58vw, 860px);
    }
    .screen.active { 
      display: flex; 
      animation: screen-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
    }
    @keyframes screen-pop {
      0% { opacity: 0; transform: translateY(12px) scale(0.98); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ── Home ── */
    #home-screen h1 { font-size: 2.6rem; color: var(--accent); }

    .mode-cards { display: flex; flex-direction: column; gap: 0.9rem; width: 100%; }
    .mode-card {
      width: 100%; background: var(--surface); border: 2px solid var(--border);
      border-radius: var(--r-lg); padding: 1.3rem 1.6rem; cursor: pointer;
      transition: border-color 0.2s, transform 0.15s, background 0.2s, box-shadow 0.2s;
      display: flex; flex-direction: row; align-items: center; gap: 1.2rem; text-align: right;
    }
    .mode-card:hover {
      border-color: var(--accent);
      background: var(--surface-hl);
      transform: translateX(-3px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }
    .mode-card:active { transform: scale(0.98); }
    .mode-title { font-size: 1.25rem; font-weight: 700; color: var(--text); }
    .mode-desc  { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }

/* ── Pre-game ── */
    #pregame-screen h2, .game-screen-title { font-size: 1.8rem; font-weight: 700; color: var(--text); text-align: center; margin: 0 0 0.4rem; }
    .option-group { width: 100%; }
    .option-group > p { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.6rem; text-align: right; text-transform: uppercase; letter-spacing: 0.06em; }
    .option-row { display: flex; gap: 0.5rem; justify-content: center; width: 100%; }
    .opt-btn {
      flex: 1; padding: 0.5rem 0.5rem; font-size: 0.88rem;
      border-radius: var(--r-sm); border: 1.5px solid var(--border);
      background: var(--surface-dk); color: var(--text-muted); cursor: pointer;
      transition: border-color 0.2s, color 0.2s, background 0.2s; font-family: inherit; font-weight: 500;
    }
    .opt-btn:hover { border-color: var(--border-mid); color: var(--text); background: var(--surface-hl); }
    .opt-btn.active { border-color: var(--text); background: rgba(0,0,0,0.08); color: var(--text); font-weight: 700; }
    html:not(.light) .opt-btn.active { background: rgba(255,255,255,0.08); }

    .hiscore-display { font-size: 1.1rem; font-weight: 600; color: var(--text-muted); min-height: 1.4em; }
    .hiscore-display span { color: var(--accent); font-weight: 700; }
    .hiscore-new { color: var(--green) !important; }
    .hiscore-new span { color: var(--green) !important; }

    /* ── Shared HUD ── */
    .hud {
      display: grid;
      /* 5 cols: left-stats | sep | center-timer | sep | right-stats */
      grid-template-columns: 1fr auto auto auto 1fr;
      column-gap: 2.5rem;          /* space between all columns incl. around dividers */
      align-items: end;            /* bottom-align content to tallest item (timer) */
      width: 100%;
      margin-inline: auto;
      padding: 0.85rem 1.5rem 1.1rem;
      position: relative;
      overflow: hidden;            /* clips progress bar cleanly to rounded corners */
      background: rgba(0,0,0,0.06);
      border-radius: 18px;
      max-width: 520px;
      direction: ltr;
    }
    html.light .hud {
      background: rgba(0,0,0,0.06);
    }
    /* Left / right stat groups */
    .hud-side {
      display: flex;
      align-items: flex-end;       /* values sit at same baseline as timer bottom */
      gap: 2.5rem;
    }
    .hud-left  { justify-content: flex-start; }
    .hud-right { justify-content: flex-end; }
    /* Center block — timer only, seps are now grid siblings */
    .hud-center {
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
    /* Nav-style thin dividers — stretch to full container height */
    .hud-sep {
      width: 1px;
      align-self: stretch;         /* fills from top to bottom of HUD row */
      background: rgba(255,255,255,0.14);
    }
    html.light .hud-sep { background: rgba(0,0,0,0.13); }
    /* Each stat: label + value, center-aligned */
    .stat-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }
    .stat-label {
      font-size: 0.68rem;
      font-weight: 500;
      color: var(--text-muted);
      letter-spacing: 0.04em;
      white-space: nowrap;
      text-transform: uppercase;
    }
    .stat-val {
      font-size: clamp(1.1rem, 1.55vw, 1.9rem); /* ~65% of timer — clear but secondary */
      font-weight: 700;
      color: var(--text-sub);      /* slightly lighter so timer stays most prominent */
      line-height: 1;
    }
    .timer-display {
      font-size: clamp(1.6rem, 2.4vw, 3rem);
      font-weight: 800; color: var(--text);
      font-variant-numeric: tabular-nums;
      transition: color 0.3s; line-height: 1;
    }
    .timer-display.urgent { color: var(--red); animation: shake 0.5s infinite; }
    .score-value { color: var(--text); font-size: 1.35rem; font-weight: 700; }
    /* Progress bar — absolute strip at bottom of HUD container */
    .progress-wrap {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      background: rgba(255,255,255,0.08);
      /* no border-radius needed — parent overflow:hidden handles corner clipping */
    }
    html.light .progress-wrap { background: rgba(0,0,0,0.07); }
    .progress-bar  { height: 100%; background: #00aaff; border-radius: 0; transition: width 1s linear, background 0.3s; width: 100%; margin: 0 auto; display: block; }
    .progress-bar.urgent { background: var(--red) !important; }
    .restart-wrap { display: flex; justify-content: center; padding: 0.5rem 0 0; }

    /* ── Icon-only buttons ── */
    .btn-icon {
      background: none;
      border: none;
      color: rgba(0,0,0,0.5);
      font-size: 1.25rem;
      cursor: pointer;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
    }
    .btn-icon:hover { background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.88); }
    .btn-icon:active { transform: scale(0.93); }
    html:not(.light) .btn-icon { color: rgba(255,255,255,0.5); }
    html:not(.light) .btn-icon:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.92); }
    /* (wordle-only hud-center override removed — scoped to game HUD above) */

    /* ── Card wrap ── */
    .card-wrap { position: relative; width: 100%; }

    /* ── Fast tooltip ── */
    [data-tooltip] { position: relative; }
    [data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
      background: rgba(0,0,0,0.78); color: #fff; font-size: 0.78rem; white-space: nowrap;
      padding: 3px 8px; border-radius: 5px; pointer-events: none;
      opacity: 0; transition: opacity 0.1s; transition-delay: 0s;
    }
    [data-tooltip]:hover::after { opacity: 1; }

    /* ── Countdown overlay ── */
    #countdown-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      align-items: center; justify-content: center;
      z-index: 1000; flex-direction: column; gap: 1rem;
    }
    #countdown-number {
      font-size: clamp(6rem, 12vw, 16rem); font-weight: 900; color: #ffffff; line-height: 1;
      text-shadow: 0 4px 30px rgba(0,0,0,0.3);
    }
    @keyframes cd-pop {
      0%   { transform: scale(0.3); opacity: 0; filter: blur(10px); }
      30%  { transform: scale(1.1); opacity: 1; filter: blur(0); }
      60%  { transform: scale(1);   opacity: 1; }
      100% { transform: scale(1.3); opacity: 0; }
    }

    /* ── Word Queue ── */
    #word-card {
      width: 100%;
      padding: 0; min-height: 180px;
      display: flex; align-items: center; justify-content: center;
    }
    #word-card  { overflow: hidden; }
    #word-queue { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; direction: rtl; width: 100%; }
    .wq-current { font-size: clamp(3rem, 6vw, 8rem); font-weight: 800; color: var(--text); line-height: 1.2; margin-bottom: 0.6rem; }
    .wq-next1   { font-size: clamp(1.4rem, 2.2vw, 3rem);  color: var(--text-faint); }
    .wq-next2   { font-size: clamp(1.1rem, 1.8vw, 2.4rem); color: var(--text-ghost); }
    .wq-nextn   { font-size: clamp(0.95rem, 1.5vw, 2rem); color: var(--text-ghost); }
    /* slot animation handled via JS FLIP — no container keyframes needed */

    /* ── Game Input ── */
    .game-input {
      width: 100%; padding: 0.9rem 1.2rem; font-size: 1.4rem;
      border-radius: var(--r-lg); border: 2px solid var(--border);
      background: var(--surface); color: var(--text); text-align: right;
      outline: none; transition: border-color 0.2s; font-family: inherit;
    }
    .game-input:focus   { border-color: var(--border-mid); }
    .game-input.correct { border-color: var(--green); }
    .game-input.wrong   { border-color: var(--red); animation: shake 0.3s; }
    .game-input:disabled { opacity: 0.35; cursor: not-allowed; }
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      20%, 60%  { transform: translateX(-6px); }
      40%, 80%  { transform: translateX(6px); }
    }
    .feedback { font-size: 1rem; height: 1.4em; color: var(--green); transition: color 0.2s; }
    .feedback.error { color: var(--red); }
    .upcoming { color: var(--text-faint); transition: color 0.1s; }
    .correct  { color: var(--text); }
    .wrong    { color: var(--red); }
    /* Paragraph Mode Cursor */
    .upcoming.cursor { position: relative; color: var(--text-faint); }
    .upcoming.cursor::after {
      content: ''; position: absolute; right: 0; top: 5%; bottom: 5%;
      width: 3px; background: #00aaff; border-radius: 2px;
      animation: blink 0.9s step-end infinite;
    }

    /* ── Sentence ── */
    #sentence-display {
      width: 100%;
      font-size: clamp(1.2rem, 1.8vw, 2.2rem); line-height: 1.8;
      overflow: hidden;
      margin: 0.75rem 0;
      /* height is set by JS after measuring actual line height */
    }
    #sentence-inner {
      position: relative;
      text-align: right; direction: rtl;
      word-break: normal; overflow-wrap: break-word;
      transition: transform 0.25s ease;
      contain: layout style;
    }
    /* Paragraph word wrapper — inline-block keeps word together; wrapping happens at spaces between */
    #sentence-inner .pw {
      display: inline-block;
      white-space: nowrap;
    }
    #sentence-display span.correct  { color: var(--text); }
    #sentence-display span.wrong    { color: var(--red); background: var(--red-dk); border-radius: 2px; }
    #sentence-display span.cursor   { /* cursor handled by .upcoming.cursor::after */ }
    #sentence-display span.upcoming { color: var(--border-mid); }
    /* #sentence-progress removed — accuracy now lives in HUD */

    /* ══════════════════════════════════════════
       BUTTON SYSTEM — pill component
    ══════════════════════════════════════════ */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
      height: 48px; padding: 0 1.75rem;
      font-size: 0.95rem; font-family: inherit; font-weight: 600;
      border: none; border-radius: 100px;
      cursor: pointer; transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
      white-space: nowrap; text-decoration: none;
    }
    .btn:active { transform: scale(0.96); }
    /* Icon-only square variant */
    .btn-sq { width: 44px; height: 44px; padding: 0; font-size: 1.25rem; border-radius: 12px; }
    /* CTA buttons match the home page play button width */
    #start-btn, #play-again-btn { width: 152px; }
    /* Primary — dark pill (light mode) / white pill (dark mode) */
    .btn-primary {
      background: #1a1a1a; color: #ffffff;
      box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.25);
    }
    .btn-primary:hover {
      background: #333;
      transform: translateY(-2px);
      box-shadow: 0px 6px 0px 0px rgba(0,0,0,0.25);
    }
    .btn-primary:active { transform: translateY(2px); box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.25); }
    html:not(.light) .btn-primary { background: #ffffff; color: #000000; box-shadow: 0px 4px 0px 0px rgba(255,255,255,0.15); }
    html:not(.light) .btn-primary:hover { background: rgba(255,255,255,0.88); box-shadow: 0px 6px 0px 0px rgba(255,255,255,0.15); }
    /* Ghost — outlined pill */
    .btn-ghost {
      background: transparent;
      border: 1.5px solid rgba(0,0,0,0.2);
      color: rgba(0,0,0,0.7);
      font-size: 0.95rem; padding: 0 1.5rem;
    }
    .btn-ghost:hover { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.35); color: #000; transform: translateY(-1px); }
    html:not(.light) .btn-ghost { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); }
    html:not(.light) .btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.35); color: #fff; }

    /* ── End Screen ── */
    #end-screen h2 { font-size: clamp(1.4rem, 2vw, 2.4rem); font-weight: 700; color: var(--text); margin-bottom: -0.5rem; }
    #final-score   { font-size: clamp(4rem, 7vw, 9rem); font-weight: 800; color: var(--text); line-height: 1; margin-bottom: -1rem; }
    #final-label   { font-size: 1.1rem; color: var(--text-muted); }
    #final-sub     { font-size: 0.95rem; color: var(--text-muted); margin-top: -0.5rem; }
    #rating        { font-size: 1rem; color: var(--yellow); }
    .end-stats { display: flex; gap: 3rem; justify-content: center; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: 1.4rem 2rem; width: 100%; }
    .end-stat-val   { font-size: 2rem; font-weight: 800; color: var(--text); }
    .end-stat-label { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
    .end-btns { display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; width: 100%; }
    #end-screen.wordle-end #end-hiscore { display: none; }
    #end-screen.wordle-end .end-btns { margin-top: 0.5rem; }

    /* ── Wordle Grid ── */
    .wordle-grid { display: flex; flex-direction: column; gap: 7px; }
    .wordle-row  { display: flex; gap: 7px; justify-content: center; }
    .wordle-tile {
      width: 58px; height: 58px; border: 2.2px solid rgba(255,255,255,0.16); border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.9rem; font-weight: 700; color: var(--text); background: rgba(255,255,255,0.04);
      user-select: none; backface-visibility: hidden; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.22s;
    }
    .wordle-tile.filled  { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,1); }
    .wordle-tile.correct { background: var(--wrd-correct); border-color: transparent; color: #fff; box-shadow: inset 0px -4px 0px 0px var(--wrd-correct-dk); }
    .wordle-tile.present { background: var(--wrd-present); border-color: transparent; color: #fff; box-shadow: inset 0px -4px 0px 0px var(--wrd-present-dk); }
    .wordle-tile.absent  { background: var(--wrd-absent);  border-color: transparent; color: #fff; box-shadow: inset 0px -4px 0px 0px var(--wrd-absent-dk); }
    @keyframes tile-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
    .wordle-tile.pop { animation: tile-pop 0.1s ease; }
    @keyframes row-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
    .wordle-row.shake { animation: row-shake 0.35s ease; }

    /* ── Wordle Keyboard ── */
    .wordle-keyboard { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 540px; direction: rtl; }
    .wordle-kb-row   { display: flex; gap: 5px; justify-content: center; }
    .wordle-key {
      flex: 1; min-width: 28px; height: 58px; padding: 0 4px;
      border: none; border-radius: 6px;
      background: var(--kb-key); color: var(--kb-text);
      font-size: 1.15rem; font-family: inherit; font-weight: 700;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: background 0.1s, transform 0.05s, color 0.1s; user-select: none;
    }
    .wordle-key:active { transform: scale(0.92); }
    /* Enter key — blue */
    .wordle-key.wide         { flex: 1.65; font-size: 0.9rem; background: #0284c7; color: #fff; font-weight: 700; }
    .wordle-key.wide:hover   { background: #0369a1; transform: translateY(-2px); }
    /* Delete key — red */
    .wordle-key.delete         { flex: 1.65; font-size: 0.9rem; background: #ef4444; color: #fff; font-weight: 700; }
    .wordle-key.delete:hover   { background: #dc2626; transform: translateY(-2px); }
    /* Letter state colours (set after each guess) */
    .wordle-key.correct { background: var(--wrd-correct); color: var(--text); }
    .wordle-key.present { background: var(--wrd-present); color: var(--text); }
    .wordle-key.absent  { background: var(--wrd-absent);  color: var(--text-muted); }

    /* ── Game screen viewport fit ── */
    #word-screen, #sentence-screen {
      height: calc(100dvh - 80px); max-height: calc(100dvh - 80px);
      overflow: hidden;
    }
    /* Wordle screen: allow scroll so the title is never clipped */
    #wordle-screen {
      height: auto; min-height: calc(100dvh - 80px);
      overflow-y: auto;
    }
    /* Game play screens — content near top for mobile friendliness */
    #word-screen, #sentence-screen, #wordle-screen {
      justify-content: flex-start; padding-top: 2rem;
    }
    /* Pregame + end — title at ~200px from viewport top */
    #pregame-screen, #end-screen {
      justify-content: flex-start; padding-top: 80px;
    }
    body:has(#word-screen.active),
    body:has(#sentence-screen.active) { overflow: hidden; }
    body:has(#wordle-screen.active) { overflow: auto; }
    body:has(#pregame-screen.active),
    body:has(#end-screen.active) { overflow: auto; }

    /* ── Auth Modal ── */
    .modal-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.65); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
      align-items: center; justify-content: center;
      z-index: 900; padding: 1rem;
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
      background: #161616;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 36px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
      padding: 2rem;
      width: 100%; max-width: 380px;
      display: flex; flex-direction: column; gap: 1.2rem;
      position: relative;
      transform: translateY(20px); opacity: 0;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    }
    .modal-overlay.open .modal-box { transform: translateY(0); opacity: 1; }
    .modal-close {
      position: absolute; top: 1rem; left: 1rem;
      background: rgba(255,255,255,0.08); border: none;
      color: rgba(255,255,255,0.5);
      font-size: 1.1rem; cursor: pointer;
      border-radius: 50%; width: 34px; height: 34px;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s, color 0.15s;
    }
    .modal-close:hover { background: rgba(255,255,255,0.14); color: #fff; }
    .modal-title { font-size: 1.5rem; font-weight: 700; color: #fff; text-align: center; }
    .modal-sub   { font-size: 0.85rem; color: rgba(255,255,255,0.45); margin-top: -0.6rem; text-align: center; }
    .profile-info { display: flex; flex-direction: column; gap: 0.4rem; }
    .profile-name  { font-size: 1.3rem; font-weight: 700; color: #fff; }
    .profile-email { font-size: 0.85rem; color: rgba(255,255,255,0.45); }
    .profile-badge { font-size: 0.78rem; color: var(--green); background: var(--green-dk); padding: 0.2rem 0.7rem; border-radius: 99px; display: inline-block; font-weight: 600; }
    /* Tab switcher — matches the nav pill */
    .modal-tabs {
      display: flex; gap: 4px;
      border-radius: 100px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.1);
      padding: 4px;
    }
    .modal-tab {
      flex: 1; padding: 0.5rem; font-size: 0.9rem; font-family: inherit;
      background: transparent; border: none; color: rgba(255,255,255,0.45); cursor: pointer;
      border-radius: 100px; transition: background 0.2s, color 0.2s; font-weight: 500;
    }
    .modal-tab.active {
      background: #fff; color: #111;
      font-weight: 700;
      box-shadow: 0px 2px 0px 0px rgba(255,255,255,0.25);
    }
    #auth-guest { display: flex; flex-direction: column; gap: 0.9rem; }
    .auth-form { display: flex; flex-direction: column; gap: 0.75rem; }
    .auth-input {
      width: 100%; padding: 0.8rem 1.1rem; font-size: 0.95rem;
      border-radius: 14px;
      border: 1.5px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.06);
      color: #fff; outline: none;
      font-family: inherit; transition: border-color 0.2s, background 0.2s; text-align: right;
    }
    .auth-input:focus {
      border-color: rgba(255,255,255,0.3);
      background: rgba(255,255,255,0.09);
    }
    .auth-input::placeholder { color: rgba(255,255,255,0.28); }
    .auth-error  { font-size: 0.85rem; color: var(--red); min-height: 1.2em; text-align: center; }
    .auth-footer { font-size: 0.78rem; color: rgba(255,255,255,0.25); text-align: center; }
    /* Primary button — white pill matching mode-play-btn */
    .btn-full {
      width: 100%; font-size: 0.95rem; border: none; border-radius: 100px;
      cursor: pointer; font-family: inherit; font-weight: 700;
      height: 52px; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
      transition: box-shadow 0.15s, transform 0.15s, background 0.15s;
    }
    .btn-full.primary {
      background: #ffffff; color: #111111;
      box-shadow: 0px 4px 0px 0px rgba(255,255,255,0.25);
    }
    .btn-full.primary:hover {
      background: rgba(255,255,255,0.92);
      box-shadow: 0px 6px 0px 0px rgba(255,255,255,0.25);
      transform: translateY(-2px);
    }
    .btn-full.primary:active {
      transform: translateY(2px);
      box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.25);
    }
    .btn-full.danger {
      background: transparent;
      border: 1.5px solid rgba(248,113,113,0.35);
      color: var(--red);
    }
    .btn-full.danger:hover { background: var(--red-dk); }
    .divider { height: 1px; background: rgba(255,255,255,0.08); width: 100%; }
    /* Light mode overrides for modal */
    html.light .modal-box {
      background: #ffffff;
      border-color: rgba(0,0,0,0.08);
      box-shadow: 0 24px 60px rgba(0,0,0,0.15);
    }
    html.light .modal-close { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.4); }
    html.light .modal-close:hover { background: rgba(0,0,0,0.1); color: #000; }
    html.light .modal-title { color: #000; }
    html.light .modal-sub { color: rgba(0,0,0,0.45); }
    html.light .modal-tabs { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.08); }
    html.light .modal-tab { color: rgba(0,0,0,0.45); }
    html.light .modal-tab.active { background: #111; color: #fff; box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2); }
    html.light .auth-input { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #000; }
    html.light .auth-input:focus { border-color: rgba(0,0,0,0.3); background: rgba(0,0,0,0.06); }
    html.light .auth-input::placeholder { color: rgba(0,0,0,0.3); }
    html.light .auth-footer { color: rgba(0,0,0,0.3); }
    html.light .profile-name { color: #000; }
    html.light .profile-email { color: rgba(0,0,0,0.5); }
    html.light .btn-full.primary { background: #111; color: #fff; box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.2); }
    html.light .btn-full.primary:hover { background: #333; box-shadow: 0px 6px 0px 0px rgba(0,0,0,0.2); }
    html.light .divider { background: rgba(0,0,0,0.08); }

    /* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */
    .screen { padding-top: 1.5rem; padding-bottom: 1.5rem; margin: 0 auto; }
    /* Content screens fill space so footer sits at page bottom */
    #about-screen, #howto-screen, #privacy-screen, #contact-screen, #leaderboard-screen {
      min-height: calc(100dvh - 130px);
      padding-top: 80px;
    }

    /* ── Tablet (≤768px) ── */
    @media (max-width: 768px) {
      .screen { max-width: 100%; padding: 1.2rem 1rem; }
      #home-screen h1 { font-size: 2.1rem; }
      .wordle-tile { width: 52px; height: 52px; font-size: 1.7rem; }
      .wordle-key { height: 48px; font-size: 1.05rem; }
      .wq-current { font-size: 2.8rem; }
      #final-score { font-size: 4rem; }
      .end-stats { gap: 1.5rem; }
    }

    /* ── Mobile (≤480px) ── */
    @media (max-width: 480px) {
      /* Wordle can scroll on small phones — grid + keyboard don't fit */
      #wordle-screen { height: auto; max-height: none; overflow-y: auto; }
      body:has(#wordle-screen.active) { overflow: auto; }
      #site-nav { padding-top: 12px; }
      .site-nav-inner { padding: 0 1rem; }
      .screen { padding: 1rem 0.75rem; gap: 1rem; }
      #home-screen h1 { font-size: 1.75rem; }
      #home-screen > p { font-size: 0.95rem; }
      .mode-card { padding: 1rem 1.2rem; }
      .mode-icon { font-size: 2rem; }
      .mode-title { font-size: 1.05rem; }
      .mode-desc { font-size: 0.82rem; }
      #pregame-screen h2, .game-screen-title { font-size: 1.4rem; }
      .opt-btn { padding: 0.5rem 0.4rem; font-size: 0.9rem; }
      .btn { padding: 0.65rem 1.5rem; font-size: 1rem; }
      .wq-current { font-size: 2.2rem; }
      .wq-next1   { font-size: 1.5rem; }
      .wq-next2   { font-size: 1.2rem; }
      .wq-nextn   { font-size: 1rem; }
      #word-card  { min-height: 100px; }
      /* Pregame/end — less top padding so content isn't buried */
      #pregame-screen, #end-screen { padding-top: 40px; }
      /* Wordle — tighter top so grid+keyboard fit better */
      #wordle-screen { padding-top: 1rem; }
      /* Sentence display — breathing room so first char isn't flush with edge */
      #sent-card-wrap { padding: 0 0.5rem; }
      .hud { padding: 0.7rem 1rem 0.9rem; border-radius: 14px; max-width: 100%; }
      .hud-side { gap: 1.1rem; }
      .hud-sep { align-self: stretch; }
      .stat-label { font-size: 0.62rem; }
      .stat-val { font-size: 0.95rem; }
      .timer-display { font-size: 1.5rem; }
      .game-input { font-size: 1.2rem; padding: 0.75rem 1rem; }
      .wordle-tile { width: 44px; height: 44px; font-size: 1.4rem; }
      .wordle-grid { gap: 5px; }
      .wordle-row  { gap: 5px; }
      .wordle-keyboard { gap: 5px; }
      .wordle-kb-row   { gap: 3px; }
      .wordle-key { height: 42px; font-size: 0.88rem; padding: 0 2px; min-width: 20px; }
      .wordle-key.wide, .wordle-key.delete { flex: 1.5; font-size: 0.72rem; }
      #final-score { font-size: 3.2rem; }
      #final-label { font-size: 0.95rem; }
      .end-stats { flex-direction: column !important; gap: 0.8rem; padding: 1.2rem; align-items: stretch; }
      .end-stat { flex-direction: row; justify-content: space-between; width: 100%; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
      .end-stat:last-child { border: none; }
      .end-btns { gap: 0.7rem; flex-direction: row; justify-content: center; width: 100%; }
      .modal-box { padding: 1.5rem 1.2rem; border-radius: 28px; }
      .modal-title { font-size: 1.3rem; }
      /* Leaderboard table — tighter cells on mobile */
      .leaderboard-table th { padding: 0.5rem 0.6rem; font-size: 0.75rem; }
      .leaderboard-table td { padding: 0.5rem 0.6rem; font-size: 0.82rem; }
      /* Shortcut rows — ensure key chips and Arabic labels pair cleanly */
      .shortcut-row { flex-direction: row; align-items: center; padding: 0.5rem 0; }
      .shortcut-desc { font-size: 0.82rem; }
      .shortcut-key  { font-size: 0.75rem; padding: 0.15rem 0.4rem; }
    }

    /* ── Very small (≤360px) ── */
    @media (max-width: 360px) {
      .wordle-tile { width: 38px; height: 38px; font-size: 1.2rem; }
      .wordle-key { height: 38px; font-size: 0.78rem; }
      .wordle-key.wide, .wordle-key.delete { font-size: 0.65rem; }
    }

    /* ══════════════════════════════════════════
       INLINE TYPING — word mode char-by-char
    ══════════════════════════════════════════ */
    .wt-correct { color: var(--text-op); }
    .wt-wrong   { color: var(--red); }
    .wt-waiting { color: var(--text-muted); }
    .wt-cursor { position: relative; color: var(--text-muted); }
    .wt-cursor::after {
      content: ''; position: absolute; right: 0; top: 10%; bottom: 10%;
      width: 3px; background: #00aaff; border-radius: 2px;
      animation: blink 0.9s step-end infinite;
      pointer-events: none;
    }
    @keyframes blink { 50% { opacity: 0; } }
    .wt-cursor.end { display: inline-block; width: 1px; height: 1em; vertical-align: middle; }
    .wt-cursor.end::after { right: auto; left: 0; } /* position on the side of the last char */
    .wt-extra   { color: var(--red); }
    /* Hidden input — captures keyboard without showing a box */
    .game-input.hidden-input {
      position: fixed; top: -200px; left: -200px;
      width: 1px; height: 1px; opacity: 0; pointer-events: none; z-index: -1;
    }

    /* ── Live accuracy in HUD ── */
    .acc-display { color: var(--text-sub); line-height: 1; } /* size + weight inherited from .stat-val */
    .acc-display.good { color: var(--green); }
    .acc-display.bad  { color: var(--red); }


    /* ══════════════════════════════════════════
       DAILY STREAK BADGE
    ══════════════════════════════════════════ */
    /* #streak-badge appearance is controlled by .streak-badge-shared below */

    /* ── Home action row ── */
    .home-actions { display: flex; gap: 0.8rem; align-items: center; justify-content: center; flex-wrap: wrap; }

    /* ══════════════════════════════════════════
       LEADERBOARD SCREEN
    ══════════════════════════════════════════ */
    /* ── Leaderboard Screen ── */
    .content-header { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 100%; }
    .content-header-icon { font-size: 2rem; color: var(--text-muted); }
    .content-header h2 { font-size: 1.8rem; font-weight: 700; color: var(--text); margin: 0; }
    .content-header p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
    .leaderboard-tabs { display: flex; gap: 0.5rem; background: var(--surface-dk); padding: 0.4rem; border-radius: 14px; width: 100%; border: 1.5px solid var(--border); }
    .leaderboard-tab { flex: 1; border: none; background: none; color: var(--text-muted); padding: 0.6rem; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
    .leaderboard-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
    .leaderboard-content { width: 100%; min-height: 300px; display: none; flex-direction: column; gap: 1rem; }
    .leaderboard-content.active { display: flex; }
    
    .leaderboard-table-wrap { width: 100%; overflow-x: auto; border: 1.5px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
    .leaderboard-table { width: 100%; border-collapse: collapse; text-align: right; }
    .leaderboard-table th { padding: 1rem; background: var(--surface-dk); color: var(--text-muted); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1.5px solid var(--border); }
    .leaderboard-table td { padding: 1rem; border-bottom: 1px solid var(--border); color: var(--text); font-size: 0.95rem; }
    .leaderboard-table tr:last-child td { border-bottom: none; }
    .leaderboard-table tr:hover td { background: var(--surface-hl); }
    
    .rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; font-size: 0.85rem; }
    .rank-1 { background: #ffd700; color: #000; }
    .rank-2 { background: #c0c0c0; color: #000; }
    .rank-3 { background: #cd7f32; color: #000; }
    .rank-other { color: var(--text-muted); }

    /* ══════════════════════════════════════════
       EXPERT MODE TOGGLE
    ══════════════════════════════════════════ */
    .expert-toggle-row {
      display: flex; align-items: center; justify-content: center; gap: 1.5rem;
      padding: 0.8rem 1.2rem; background: var(--surface-dk); border-radius: var(--r-md);
      border: 1px solid var(--border); margin: 0 auto; width: fit-content;
    }
    .expert-label { font-size: 1rem; color: var(--text-sub); text-align: right; }
    .expert-label small { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; }
    .toggle-switch { position: relative; width: 50px; height: 28px; cursor: pointer; flex-shrink: 0; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
    .toggle-slider {
      position: absolute; inset: 0; background: var(--border-mid);
      border-radius: 14px; transition: background 0.2s;
    }
    .toggle-slider::before {
      content: ''; position: absolute; width: 22px; height: 22px;
      left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s;
    }
    .toggle-switch input:checked + .toggle-slider { background: #1a1a1a; }
    html:not(.light) .toggle-switch input:checked + .toggle-slider { background: #fff; }
    html:not(.light) .toggle-slider::before { background: #1a1a1a; }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); }

    /* ── Shared Streak Badge Stylings ── */
    .streak-badge-shared {
      display: none; align-items: center; gap: 4px;
      font-size: 0.78rem; font-weight: 500;
      color: #fff;
      background: #f59e0b;
      border: none;
      padding: 0.25rem 0.65rem;
      border-radius: 99px;
    }
    .streak-badge-shared.visible { display: flex; }
    .streak-badge-shared .material-symbols-rounded { color: #fff; font-size: 0.95rem; }

    /* ══════════════════════════════════════════
       WPM HISTORY CHART
    ══════════════════════════════════════════ */
    .history-chart-wrap {
      display: none; width: 100%; background: var(--surface);
      border-radius: var(--r-md); padding: 1rem 1.2rem;
    }
    .history-chart-wrap.visible { display: block; }
    .history-chart-title { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.7rem; text-align: right; }
    .history-bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; direction: ltr; }
    .history-bar {
      flex: 1; background: var(--accent-dk); border-radius: 3px 3px 0 0;
      min-height: 3px; position: relative; cursor: default; transition: background 0.15s;
    }
    .history-bar.current { background: var(--accent); }
    .history-bar:hover { background: var(--accent-lt); }
    .history-bar-val {
      display: none; position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%);
      background: var(--surface-hl); color: var(--text); font-size: 0.68rem;
      padding: 0.12rem 0.28rem; border-radius: var(--r-sm); white-space: nowrap; pointer-events: none;
    }
    .history-bar:hover .history-bar-val { display: block; }

    /* ══════════════════════════════════════════
       RECORDS MODAL
    ══════════════════════════════════════════ */
    /* records-btn is now inside .hn-pill, styled by .hn-pill-btn */
    .records-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
    .records-table th {
      color: var(--text-muted); font-weight: 600; padding: 0.4rem 0.5rem;
      border-bottom: 1px solid var(--border); text-align: right;
    }
    .records-table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--surface-dk); color: var(--text); }
    .records-table td.hi { color: var(--accent); font-weight: 700; }
    .records-empty { color: var(--text-muted); font-size: 1rem; text-align: center; padding: 3rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
    .records-empty::before {
      font-family: 'Material Symbols Rounded';
      font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
      content: 'leaderboard'; font-size: 3rem; opacity: 0.4;
      display: block; direction: ltr;
    }

    /* ══════════════════════════════════════════
       SITE FOOTER
    ══════════════════════════════════════════ */
    .site-footer {
      width: 100%;
      background: var(--bg);
      padding-bottom: 0.5rem;
      margin-bottom: 4px;
    }
    .site-footer-inner {
      max-width: clamp(520px, 72vw, 1060px); margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      flex-direction: row-reverse; padding: 0.65rem 2rem;
    }
    /* Hide footer on game screens */
    body:has(#word-screen.active) .site-footer,
    body:has(#sentence-screen.active) .site-footer,
    body:has(#wordle-screen.active) .site-footer { display: none; }
    .footer-links { display: flex; gap: 0; flex-wrap: wrap; justify-content: flex-start; }
    .footer-link {
      background: none; border: none; font-family: inherit; font-size: 0.88rem;
      color: var(--text-muted); cursor: pointer; padding: 0.45rem 0.55rem;
      border-radius: var(--r-sm); transition: color 0.2s, background 0.2s;
    }
    .footer-link:hover { color: var(--text); background: var(--surface-hl); }
    .footer-sep { color: var(--border); font-size: 0.82rem; line-height: 2; }
    .footer-copy { font-size: 0.8rem; color: var(--text-faint); letter-spacing: 0.02em; white-space: nowrap; }

    /* ══════════════════════════════════════════
       CONTENT PAGES (About, Privacy, Contact, How to Play)
    ══════════════════════════════════════════ */
    .content-page {
      text-align: right; gap: 3rem; padding-top: 2.5rem; padding-bottom: 2.5rem;
    }
    .content-page h2 { font-size: 1.8rem; font-weight: 700; color: var(--text); width: 100%; }
    .content-section { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
    .content-section h3 {
      font-size: 0.9rem; color: var(--text); font-weight: 700;
      padding-bottom: 0.6rem; border-bottom: 1px solid var(--border);
      text-transform: uppercase; letter-spacing: 0.06em;
      display: flex; align-items: center; gap: 0.4rem;
    }
    .content-section h3 .material-symbols-rounded { display: none; }
    .content-section p {
      font-size: 0.93rem; color: var(--text-sub); line-height: 1.9;
    }
    .content-section p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
    .content-section p a:hover { color: var(--accent); }
    .content-section ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; padding: 0; }
    .content-section ul li {
      font-size: 0.92rem; color: var(--text-sub); line-height: 1.8;
      padding-right: 1.2rem; position: relative;
    }
    .content-section ul li::before { content: '›'; position: absolute; right: 0; color: var(--text-muted); font-weight: 700; }

    /* Feature grid — About page */
    .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; width: 100%; }
    .feature-item {
      background: var(--surface); border: 1.5px solid var(--border);
      border-radius: 20px; padding: 1.1rem 1.2rem;
      display: flex; flex-direction: column; gap: 0.4rem;
    }
    .feature-item-icon  { font-size: 1.4rem; color: var(--text-muted); }
    .feature-item-title { font-size: 0.9rem; font-weight: 700; color: var(--text); }
    .feature-item-desc  { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }

    /* Contact cards */
    .contact-card {
      width: 100%; background: var(--surface); border: 1.5px solid var(--border);
      border-radius: 20px; padding: 1rem 1.3rem;
      display: flex; align-items: center; gap: 1rem;
      transition: border-color 0.2s, transform 0.2s;
    }
    .contact-card:hover { border-color: var(--border-mid); transform: translateY(-2px); }
    .contact-card-icon  { font-size: 1.6rem; flex-shrink: 0; }
    .contact-card-body  { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
    .contact-card-label { font-size: 0.75rem; color: var(--text-muted); }
    .contact-card-value { font-size: 0.93rem; color: var(--accent); font-weight: 600; }
    .contact-card a { color: inherit; text-decoration: none; }
    .contact-card a:hover { text-decoration: underline; }

    /* Keyboard shortcut rows */
    .shortcut-table { width: 100%; display: flex; flex-direction: column; }
    .shortcut-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.6rem 0; border-bottom: 1px solid var(--surface-dk); font-size: 0.9rem;
    }
    .shortcut-row:last-child { border-bottom: none; }
    .shortcut-keys { display: flex; gap: 0.4rem; align-items: center; }
    .shortcut-key {
      background: var(--surface-dk); border: 1px solid var(--border);
      border-radius: var(--r-sm); padding: 0.18rem 0.55rem;
      font-size: 0.82rem; color: var(--text-sub); font-family: monospace;
    }
    .shortcut-sep { font-size: 0.75rem; color: var(--text-muted); }
    .shortcut-desc { color: var(--text-sub); }

    /* Wordle legend */
    .wordle-legend { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; }
    .legend-row { display: flex; align-items: center; gap: 0.9rem; font-size: 0.9rem; color: var(--text-sub); }
    .legend-tile {
      width: 32px; height: 32px; border-radius: 4px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; font-weight: 700; color: #fff;
    }
    .legend-tile.correct { background: var(--wrd-correct); color: #fff; box-shadow: inset 0px -4px 0px 0px var(--wrd-correct-dk); }
    .legend-tile.present { background: var(--wrd-present); color: #fff; box-shadow: inset 0px -4px 0px 0px var(--wrd-present-dk); }
    .legend-tile.absent  { background: var(--wrd-absent);  color: #fff; box-shadow: inset 0px -4px 0px 0px var(--wrd-absent-dk); }

    @media (max-width: 480px) {
      .feature-grid { grid-template-columns: 1fr; }
    }

    /* ══════════════════════════════════════════
       LIGHT MODE — override tokens only
    ══════════════════════════════════════════ */
    html.light {
      --bg:          #f4f4f4;
      --surface:     #ffffff;
      --surface-dk:  #ebebeb;
      --surface-hl:  #f0f0f0;
      --surface-ac:  #e6e6e6;
      --border:      #e3e3e3;
      --border-mid:  #c8c8c8;
      /* Text — pure black with opacity */
      --text:        #000000;
      --text-sub:    #3d3d3d;
      --text-muted:  #7a7a7a;
      --text-faint:  #9e9e9e;
      --text-ghost:  #c3c3c3;
      /* Opaque equivalents for light mode */
      --text-op:       #000000;
      --text-muted-op: #7a7a7a;
      --accent-dk:   rgba(56,189,248,0.1);
      --red-dk:      rgba(248,113,113,0.1);
      --red-dkk:     rgba(248,113,113,0.15);
      --green-dk:    rgba(74,222,128,0.12);
      --wrd-correct:    #47c292;
      --wrd-present:    #e6b114;
      --wrd-absent:     #b7b7b7;
      --wrd-correct-dk: #11a167;
      --wrd-present-dk: #b6901f;
      --wrd-absent-dk:  #838383;
      --kb-key:    #e7e7e7;
      --kb-text:   rgba(0,0,0,0.85);
      --kb-key-dk: #cccccc;
      --key-action:  #1a1a1a;
      --key-action-lt: #ffffff;
      --key-action-hl: #333333;
    }

    /* Wordle light mode overrides */
    /* Empty tile */
    html.light .wordle-tile { background: #ffffff; border-color: rgba(0,0,0,0.16); color: rgba(0,0,0,0.85); }
    /* Typing (filled) tile — white bg, solid black border */
    html.light .wordle-tile.filled { background: #ffffff; border-color: rgba(0,0,0,1); color: rgba(0,0,0,0.85); box-shadow: none; }
    /* State tiles — must override the broad html.light .wordle-tile border */
    html.light .wordle-tile.correct { background: var(--wrd-correct); border-color: transparent; color: #fff; box-shadow: inset 0px -4px 0px 0px var(--wrd-correct-dk); }
    html.light .wordle-tile.present { background: var(--wrd-present); border-color: transparent; color: #fff; box-shadow: inset 0px -4px 0px 0px var(--wrd-present-dk); }
    html.light .wordle-tile.absent  { background: var(--wrd-absent);  border-color: transparent; color: #fff; box-shadow: inset 0px -4px 0px 0px var(--wrd-absent-dk); }
    html.light body { background: var(--bg); }

    /* ══════════════════════════════════════════
       HOME SCREEN — FULL REDESIGN
    ══════════════════════════════════════════ */

    /* Body flex adjustments when home is active */
    body:has(#home-screen.active) {
      align-items: stretch;
      justify-content: flex-start;
      overflow: auto;
    }

    /* Home screen overrides */
    #home-screen {
      max-width: none !important;
      width: 100%;
      flex: 1;               /* fill all of #main-content — no fixed min-height needed */
      padding: 0 !important;
      justify-content: flex-start !important;
      align-items: stretch !important;
      gap: 0 !important;
      text-align: right;
    }

    .hn-logo { justify-self: start; }
    .hn-pill { justify-self: center; }
    .hn-actions { justify-self: end; }
    .hn-logo {
      font-size: 1.1rem; font-weight: 700;
      color: var(--text);
      border: 1.5px solid var(--border);
      border-radius: 10px; padding: 0.3rem 0.75rem;
      letter-spacing: -0.01em; flex-shrink: 0;
      cursor: default; user-select: none;
    }
    .hn-pill {
      display: flex; align-items: center; gap: 2px;
      background: rgba(0,0,0,0.06);
      border-radius: 79px; padding: 6px 6px;
    }
    html:not(.light) .hn-pill { background: rgba(255,255,255,0.08); }
    .hn-pill-btn {
      background: none; border: none; font-family: inherit;
      font-size: 0.93rem; font-weight: 500;
      color: rgba(0,0,0,0.64);
      cursor: pointer; padding: 4px 14px;
      border-radius: 20px;
      transition: color 0.15s, background 0.15s;
      white-space: nowrap; display: flex; align-items: center; gap: 5px;
    }
    .hn-pill-btn:hover { background: rgba(0,0,0,0.07); color: #000; }
    .hn-pill-btn:disabled { opacity: 0.4; cursor: default; }
    html:not(.light) .hn-pill-btn { color: rgba(255,255,255,0.65); }
    html:not(.light) .hn-pill-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
    .hn-actions {
      display: flex; align-items: center;
      gap: 6px; flex-shrink: 0;
    }
    .hn-sep {
      width: 1px; height: 16px;
      background: rgba(0,0,0,0.14); flex-shrink: 0;
    }
    html:not(.light) .hn-sep { background: rgba(255,255,255,0.15); }
    .hn-icon-btn {
      background: none; border: none; cursor: pointer;
      color: rgba(0,0,0,0.55);
      padding: 7px; border-radius: 8px;
      transition: color 0.15s, background 0.15s;
      display: flex; align-items: center; font-family: inherit;
    }
    .hn-icon-btn .material-symbols-rounded { font-size: 1.15rem; }
    .hn-icon-btn:hover { color: #000; background: rgba(0,0,0,0.07); }
    html:not(.light) .hn-icon-btn { color: rgba(255,255,255,0.55); }
    html:not(.light) .hn-icon-btn:hover { color: #fff; background: rgba(255,255,255,0.09); }
    .hn-user-btn {
      display: flex; align-items: center; gap: 5px;
      background: none; border: none; cursor: pointer;
      font-family: inherit; font-size: 0.88rem; font-weight: 500;
      color: rgba(0,0,0,0.64);
      padding: 5px 8px; border-radius: 8px;
      transition: color 0.15s, background 0.15s;
    }
    .hn-user-btn .material-symbols-rounded { font-size: 1.15rem; }
    .hn-user-btn:hover { color: #000; background: rgba(0,0,0,0.07); }
    html:not(.light) .hn-user-btn { color: rgba(255,255,255,0.65); }
    html:not(.light) .hn-user-btn:hover { color: #fff; background: rgba(255,255,255,0.09); }

    /* ── Hero ── */
    .home-hero {
      width: 100%;
      flex: 1;               /* fill remaining height inside home-screen */
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; /* vertically center content — spacing auto-adjusts */
      padding: 1rem 0 3.5rem; /* less top, more bottom = content sits higher */
    }
    .home-hero-inner {
      width: 100%; max-width: clamp(520px, 72vw, 1060px);
      display: flex; flex-direction: column;
      align-items: center; gap: 0.35rem;
      padding: 0 2rem;
    }
    #home-screen .mode-cards { margin-top: 24px; }

    /* Streak badge — unified */
    #streak-badge { margin-bottom: 0; }

    /* Home title */
    #home-screen h1 {
      font-size: clamp(1.6rem, 3vw, 2rem) !important;
      font-weight: 700 !important; color: #000 !important;
      line-height: 1.15; text-align: center; margin: 0;
    }
    html:not(.light) #home-screen h1 { color: #fff !important; }

    /* ── Logo ── */
    .hn-logo { border: none !important; padding: 4px !important; background: none !important; cursor: pointer; border-radius: 8px; transition: background 0.15s; }
    .hn-logo:hover { background: rgba(0,0,0,0.07) !important; }
    html:not(.light) .hn-logo:hover { background: rgba(255,255,255,0.09) !important; }

    /* ── Mode cards — Figma gradient design ── */
    .mode-cards {
      display: flex !important; flex-direction: row !important;
      gap: 1rem !important; width: 100%; align-items: stretch;
    }
    .mode-card {
      flex: 1; min-width: 0; position: relative;
      border: none !important;
      border-radius: 40px !important;
      padding: 12px 12px 32px !important;
      display: flex !important; flex-direction: column !important;
      align-items: center !important; gap: 20px !important;
      cursor: pointer; text-align: center !important;
      overflow: hidden;
      box-shadow: 0px 8px 7.2px 0px rgba(0,0,0,0.1);
      transition: transform 0.2s, box-shadow 0.2s !important;
    }
    /* Per-card gradients + 3D inset bottom edge */
    #word-mode-btn     { background: linear-gradient(to bottom, #2f6ae9, #afcbff); }
    #word-mode-btn::after     { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0px -4px 0px 0px #8babf1; }
    #sentence-mode-btn { background: linear-gradient(to bottom, #f75414, #ffc6a7); }
    #sentence-mode-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0px -4px 0px 0px #edb7a2; }
    #wordle-mode-btn   { background: linear-gradient(to bottom, #0fa066, #78f5c6); }
    #wordle-mode-btn::after   { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0px -4px 0px 0px #83e4bd; }

    .mode-card:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 20px 40px rgba(0,0,0,0.18) !important;
    }
    .mode-card:active { transform: scale(0.97) translateY(0) !important; }

    /* Image area — frosted glass panel */
    .mode-card-image {
      width: 100%; height: 214px;
      border-radius: 32px; flex-shrink: 0;
      background: rgba(255,255,255,0.01);
      /* Combined inset shadows: stroke + inner glow — same geometry, perfectly aligned */
      box-shadow:
        inset 0 0 0 2px rgba(255,255,255,0.28),
        inset 0 0 80px rgba(255,255,255,0.18);
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .mode-card-icon {
      font-size: 5.5rem !important;
      color: rgba(255,255,255,0.92);
      position: relative; z-index: 1;
      font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48 !important;
    }

    .mode-card-body {
      display: flex; flex-direction: column;
      align-items: center; gap: 28px;
      width: 100%; padding: 0 8px;
    }
    .mode-card-info {
      display: flex; flex-direction: column;
      align-items: center; gap: 4px; width: 100%;
    }
    .mode-icon { display: none !important; }
    .mode-text { display: contents !important; }
    .mode-title {
      font-size: 1.4rem !important; font-weight: 700 !important;
      color: #ffffff !important; line-height: 1.4 !important;
    }
    .mode-desc {
      font-size: 0.85rem !important; color: rgba(255,255,255,0.85) !important;
      line-height: 1.55 !important;
    }

    /* Play button — white pill with 3D shadow */
    .mode-play-btn {
      width: 152px; height: 48px;
      background: #ffffff; border: none; border-radius: 100px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: #1a1a1a; flex-shrink: 0;
      pointer-events: none;
      box-shadow: 0px 4px 0px 0px rgba(255,255,255,0.45);
      transition: box-shadow 0.15s, transform 0.15s;
    }
    .mode-card:hover .mode-play-btn {
      box-shadow: 0px 6px 0px 0px rgba(255,255,255,0.45);
      transform: translateY(-1px);
    }
    .mode-card:active .mode-play-btn { box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.45); transform: translateY(2px); }
    .mode-play-btn .material-symbols-rounded { font-size: 1.6rem; }


    /* ── Mobile hamburger menu ── */
    .hn-menu-btn { display: none; }
    .hn-mobile-sep { display: none; }

    .mobile-menu {
      display: none;
      position: fixed;
      top: 60px; left: 0; right: 0;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 8px 24px rgba(0,0,0,0.1);
      z-index: 999;
      flex-direction: column;
      padding: 8px;
      direction: rtl;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu-item {
      display: flex; align-items: center; gap: 10px;
      background: none; border: none; font-family: inherit;
      font-size: 0.95rem; font-weight: 500;
      color: var(--text-muted); cursor: pointer;
      padding: 12px 14px; border-radius: 10px;
      text-align: right; width: 100%;
      transition: background 0.15s, color 0.15s;
    }
    .mobile-menu-item .material-symbols-rounded { font-size: 1.1rem; color: var(--text-muted); }
    .mobile-menu-item:hover { background: var(--surface-hl); color: var(--text); }
    .mobile-menu-item:hover .material-symbols-rounded { color: var(--text); }
    .mobile-menu-divider { height: 1px; background: var(--border); margin: 4px 8px; }
    .mobile-menu-backdrop {
      display: none; position: fixed; inset: 0; z-index: 998;
    }
    .mobile-menu-backdrop.open { display: block; }

    @media (max-width: 820px) {
      .mode-cards { flex-direction: column !important; align-items: center !important; }
      .mode-card { width: 100%; max-width: 420px; }
      .mode-card-image { height: 160px; }
      .hn-pill { display: none; }
      .hn-user-btn { display: none; }
      .hn-menu-btn { display: flex; }
      .hn-mobile-sep { display: block; }
      #site-nav { padding-top: 16px; }
      /* Switch nav inner to flex so logo+actions go to edges without grid centering */
      .site-nav-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 100%;
        padding: 0 1rem;
      }
      /* Bigger touch targets for icon buttons on mobile */
      .hn-icon-btn { padding: 10px; }
      .hn-icon-btn .material-symbols-rounded { font-size: 1.35rem; }
      /* Hide the orphaned separator that sits between theme-btn and the hidden auth-btn */
      .hn-actions .hn-sep:not(.hn-mobile-sep) { display: none; }
      .home-hero { padding: 1.5rem 0; }
      .home-hero-inner { padding: 0 1rem; }
      .site-footer-inner {
        padding: 1rem 1rem 0;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
      }
      .footer-links { justify-content: center; flex-wrap: wrap; gap: 4px 0; }
      .footer-copy { text-align: center; }
    }
    /* Key base bg — only neutral keys, not Enter/Delete/state */
    html.light .wordle-key:not(.wide):not(.delete):not(.correct):not(.present):not(.absent) { background: var(--surface-dk); color: var(--text); }