@font-face {
      font-family: 'Outfit';
      src: url('../font/Outfit/Outfit-VariableFont_wght.ttf') format('truetype');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Comfortaa';
      src: url('../font/Comfortaa/Comfortaa-VariableFont_wght.ttf') format('truetype');
      font-weight: 300 700;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Caveat';
      src: url('../font/Caveat/Caveat-VariableFont_wght.ttf') format('truetype');
      font-weight: 400 700;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Bungee';
      src: url('../font/Bungee/Bungee-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Pacifico';
      src: url('../font/Pacifico/Pacifico-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Bangers';
      src: url('../font/Bangers/Bangers-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    button, input, select, textarea { font-family: inherit; }

    :root {
      --bg:              #0c0e14;
      --surface:         #12151e;
      --surface-2:       #181b26;
      --surface-3:       #1e2132;
      --border:          rgba(255,255,255,0.07);
      --border-2:        rgba(255,255,255,0.13);
      --text:            #e6e9f4;
      --text-dim:        #8b91b0;
      --text-muted:      #4e5470;
      --accent:          #5b8af0;
      --accent-soft:     rgba(91,138,240,0.16);
      --accent-dim:      rgba(91,138,240,0.07);
      --correct:         #3dca72;
      --correct-soft:    rgba(61,202,114,0.12);
      --correct-border:  rgba(61,202,114,0.32);
      --wrong:           #f05b5b;
      --wrong-soft:      rgba(240,91,91,0.12);
      --wrong-border:    rgba(240,91,91,0.32);
    }

    html, body {
      height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: 'Outfit', system-ui, -apple-system, sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    .app {
      height: 100dvh;
      display: flex;
      align-items: stretch;
      justify-content: center;
    }

    .phone {
      width: 100%;
      max-width: 430px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      background: radial-gradient(ellipse at 50% 40%, #0d1f4a 0%, #060e28 50%, #000 100%);
    }

    /* ── LOADING SCREEN ──────────────────────── */
    #loading-overlay {
      position: absolute; inset: 0; z-index: 999;
      display: flex; align-items: center; justify-content: center;
      pointer-events: all;
      background: radial-gradient(ellipse at 50% 40%, #0d1f4a 0%, #060e28 50%, #000 100%);
      transition: opacity 0.7s ease;
    }
    #loading-overlay.done { opacity: 0; pointer-events: none; }
    #loading-pct {
      font-family: 'Outfit', system-ui, sans-serif;
      font-size: clamp(72px, 22vw, 108px);
      font-weight: 900;
      color: rgba(225, 232, 250, 0.88);
      letter-spacing: -0.03em;
      opacity: 0;
      transition: opacity 0.25s ease;
      font-variant-numeric: tabular-nums;
    }
    #loading-pct.visible { opacity: 1; }

    /* ── SCREENS ─────────────────────────────── */
    .screen { display: none; }
    .screen.active { display: block; flex: 1; min-height: 0; overflow-y: auto; position: relative; z-index: 2; background: var(--bg); }

    @keyframes screen-enter-fwd {
      from { opacity: 0; transform: scale(0.94); }
      to   { opacity: 1; transform: scale(1);    }
    }
    @keyframes screen-enter-back {
      from { opacity: 0; transform: scale(1.05); }
      to   { opacity: 1; transform: scale(1);    }
    }
    .screen-enter-right { animation: screen-enter-fwd  0.25s ease-out both; }
    .screen-enter-left  { animation: screen-enter-back 0.25s ease-out both; }

    /* ── LAUNCH TRANSITION — menu → hra/učebnice ── */
    @keyframes launchUp {
      0%   { transform: translateY(-20%);                 opacity: 1; }
      100% { transform: translateY(calc(-110vh - 20%));  opacity: 0; }
    }
    @keyframes launchDown {
      0%   { transform: translateY(calc(-110vh - 20%));  opacity: 0; }
      100% { transform: translateY(-20%);                opacity: 1; }
    }
    .launch-up { animation: launchUp 0.6s cubic-bezier(0.4, 0, 1, 1) forwards; }
    #screen-game.active { display: flex; flex-direction: column; overflow-y: hidden; }

    /* ── MENU ────────────────────────────────── */
    #screen-menu {
      padding: 28px;
      text-align: center;
    }
    #screen-menu.active,
    #screen-summary.active {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .menu-icon { font-size: 140px; margin-bottom: 14px; line-height: 1; }
    .menu-title {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }
    .menu-sub {
      color: var(--text-muted);
      font-size: 14px;
      margin-bottom: 44px;
    }
    .menu-btns { display: flex; flex-direction: column; gap: 10px; }

    .color-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }
    .color-swatch {
      aspect-ratio: 1;
      border-radius: 10px;
      cursor: pointer;
      user-select: none;
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--swatch-color) 22%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--swatch-color) 18%, transparent) 0%, color-mix(in srgb, var(--swatch-color) 28%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--swatch-color) 42%, transparent);
      outline: 1.5px solid color-mix(in srgb, var(--swatch-color) 25%, transparent);
      outline-offset: -8px;
      box-shadow: 0 0 14px color-mix(in srgb, var(--swatch-color) 28%, transparent), inset 0 1px 0 rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
      transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
    }
    .color-swatch:hover  { transform: scale(1.06); }
    .color-swatch.active {
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--swatch-color) 42%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--swatch-color) 38%, transparent) 0%, color-mix(in srgb, var(--swatch-color) 52%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--swatch-color) 85%, transparent);
      box-shadow: 0 0 22px color-mix(in srgb, var(--swatch-color) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.15);
      transform: scale(1.08);
    }

    #screen-settings.active { display: flex; flex-direction: column; background: transparent; }
    .config-body {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 16px 16px 24px;
      display: flex; flex-direction: column; gap: 40px;
      overflow-y: auto; max-height: 88%;
    }
    .settings-section { display: flex; flex-direction: column; gap: 12px; }

    .font-btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .font-btn {
      height: 56px; display: flex; align-items: center; justify-content: center;
      border-radius: 4px; cursor: pointer; user-select: none;
      color: rgba(225,232,250,0.90);
      background: radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%), linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%), linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
      outline: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
      outline-offset: -10px;
      box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
      transition: filter 0.12s, transform 0.1s;
    }
    .font-btn:active { transform: scale(0.97); }
    .font-btn.active { background: radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 52%), linear-gradient(175deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 36%, transparent 36%), linear-gradient(160deg, color-mix(in srgb, var(--accent) 38%, transparent) 0%, color-mix(in srgb, var(--accent) 52%, #080e1a) 100%); border: 1.5px solid color-mix(in srgb, var(--accent) 85%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.15); }
    .font-btn-full { grid-column: 1 / -1; }
    /* Font-size korekce globální — Bungee (all-caps, heavy) */
    body[data-font="bungee"] .menu-title { font-size: 21px; }
    body[data-font="bungee"] .btn        { font-size: 11px; }
    body[data-font="bungee"] .q-chip     { font-size: 11px; }
    body[data-font="bungee"] .ans-btn    { font-size: 10px; }
    /* Font-size korekce globální — Pacifico (decorative script) */
    body[data-font="pacifico"] .menu-title { font-size: 24px; }
    body[data-font="pacifico"] .btn        { font-size: 13px; }
    /* Font-size korekce globální — Bangers (display, all-caps) */
    body[data-font="bangers"] .menu-title { font-size: 28px; }
    body[data-font="bangers"] .btn        { font-size: 13px; }
    body[data-font="pacifico"] .q-chip     { font-size: 13px; }
    body[data-font="pacifico"] .ans-btn    { font-size: 11px; }
    /* Font-size korekce globální — Caveat (handwriting, opticky menší) */
    body[data-font="caveat"] .q-chip  { font-size: 17px; }
    body[data-font="caveat"] .ans-btn { font-size: 15px; }

    /* ── BUTTONS ─────────────────────────────── */
    .btn {
      display: block;
      width: 100%;
      padding: 15px 20px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--text);
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
      text-align: center;
    }
    .btn:hover        { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
    .btn-accent {
      background: transparent;
      border-color: transparent;
      color: var(--text);
    }
    .btn-accent:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
    .btn:active  { transform: scale(0.98); }
    .btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

    .btn-primary {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
      letter-spacing: 0.01em;
    }
    .btn-primary:hover { filter: brightness(0.88); }

    .btn-ghost {
      background: transparent;
      border-color: transparent;
      color: var(--text-dim);
    }
    .btn-ghost:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

    /* ── SETUP FLOW ──────────────────────────── */
    #screen-diff.active,
    #screen-types.active,
    #screen-continents.active {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 14px 16px 24px;
      gap: 10px;
      background: transparent;
      overflow: visible;
    }
    #screen-diff.active { overflow: visible; }

    .diff-btn {
      flex: 1; max-height: 72px;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 20px; gap: 16px;
      border-radius: 4px; cursor: pointer; font-family: inherit; user-select: none; text-align: left;
      color: rgba(225,232,250,0.90);
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
      outline: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
      outline-offset: -10px;
      box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
      transition: filter 0.12s, transform 0.1s;
    }
    .diff-btn:hover  { filter: brightness(1.12); }
    .diff-btn:active { transform: scale(0.98); }
    .diff-btn-text { display: flex; flex-direction: column; gap: 4px; }
    .diff-btn-name { font-size: 18px; font-weight: 800; letter-spacing: 0.03em; }
    .diff-btn-desc { font-size: 12px; opacity: 0.65; }

    .preset-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex-shrink: 0; }
    .preset-pill {
      padding: 10px 6px; border-radius: 4px; cursor: pointer; text-align: center;
      font-family: inherit; user-select: none;
      color: rgba(225,232,250,0.90);
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
      outline: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
      outline-offset: -8px;
      box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255,255,255,0.07);
      backdrop-filter: blur(12px);
      transition: filter 0.12s, transform 0.1s;
    }
    .preset-pill:hover  { filter: brightness(1.12); }
    .preset-pill:active { transform: scale(0.97); }
    .preset-pill.active {
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 38%, transparent) 0%, color-mix(in srgb, var(--accent) 52%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--accent) 85%, transparent);
      box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent), inset 0 1px 0 rgba(255,255,255,0.14);
    }
    .preset-pill-name { font-size: 13px; font-weight: 700; }
    .preset-pill-desc { font-size: 11px; opacity: 0.65; margin-top: 3px; }

    /* Check rows — glass toggle buttons */
    .check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-shrink: 0; }
    #screen-continents .check-list { grid-template-columns: 1fr; }
    .check-row {
      height: 64px; display: flex; align-items: center; justify-content: center; gap: 8px;
      border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
      user-select: none;
      color: rgba(225,232,250,0.90);
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
      outline: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
      outline-offset: -8px;
      box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255,255,255,0.07);
      backdrop-filter: blur(12px);
      transition: filter 0.12s, transform 0.1s;
      opacity: 0.55;
    }
    .check-row:hover  { filter: brightness(1.12); }
    .check-row:active { transform: scale(0.97); }
    .check-row.on {
      opacity: 1;
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 38%, transparent) 0%, color-mix(in srgb, var(--accent) 52%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--accent) 85%, transparent);
      box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent), inset 0 1px 0 rgba(255,255,255,0.14);
    }
    .check-label { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
    .check-meta { font-size: 10px; opacity: 0.55; }

    .setup-error { text-align: center; color: var(--wrong); font-size: 13px; display: none; flex-shrink: 0; }

    /* Action buttons (standalone, outside menu1-panel) */
    .btn-action-green {
      flex-shrink: 0; height: 64px; width: 100%;
      background:
        radial-gradient(ellipse at 18% 28%, rgba(140,255,180,0.38) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 36%, transparent 36%),
        linear-gradient(160deg, rgba(25,200,75,0.32) 0%, rgba(5,120,35,0.42) 100%);
      border: 1.5px solid rgba(35,210,85,0.40);
      outline: 1.5px solid rgba(45,230,100,0.25);
      outline-offset: -10px;
      box-shadow: 0 0 22px rgba(20,200,70,0.42), inset 0 1px 0 rgba(255,255,255,0.15);
      backdrop-filter: blur(12px);
      color: rgba(55,230,105,0.95);
      text-shadow: 0 0 10px rgba(30,210,80,0.45), 0 0 24px rgba(20,180,60,0.2);
    }
    .btn-action-red {
      flex-shrink: 0; height: 64px; width: 100%;
      background:
        radial-gradient(ellipse at 18% 28%, rgba(255,220,140,0.40) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 36%, transparent 36%),
        linear-gradient(160deg, rgba(255,110,20,0.32) 0%, rgba(180,30,5,0.42) 100%);
      border: 1.5px solid rgba(255,130,40,0.40);
      outline: 1.5px solid rgba(255,140,50,0.25);
      outline-offset: -10px;
      box-shadow: 0 0 22px rgba(255,90,10,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
      backdrop-filter: blur(12px);
      color: rgba(255,175,90,0.95);
      text-shadow: 0 0 10px rgba(255,130,40,0.45), 0 0 24px rgba(255,100,20,0.2);
    }
    .btn-action-green:hover, .btn-action-red:hover { filter: brightness(1.12); }
    .btn-action-green:active, .btn-action-red:active { transform: scale(0.97); }
    .btn-action-green, .btn-action-red { text-transform: none; letter-spacing: 0.02em; }


    /* ── GAME ────────────────────────────────── */

    #screen-game.active {
      display: flex; flex-direction: column;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 50% 25%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 40%, #0d1f4a 0%, #060e28 50%, #000 100%);
    }

    .game-topbar {
      padding: 14px 16px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .game-topbar .score-wrong,
    .game-topbar .score-correct {
      font-size: 18px;
      font-weight: 800;
      min-width: 48px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      border: 1.5px solid transparent;
      flex-shrink: 0;
      letter-spacing: 0.01em;
    }
    .game-topbar .score-wrong {
      color: rgba(225,232,250,0.95);
      background: color-mix(in srgb, var(--wrong) 35%, rgba(0,0,0,0.4));
      border-color: color-mix(in srgb, var(--wrong) 55%, transparent);
      box-shadow: 0 0 10px color-mix(in srgb, var(--wrong) 30%, transparent);
    }
    .game-topbar .score-correct {
      color: rgba(225,232,250,0.95);
      background: color-mix(in srgb, var(--correct) 35%, rgba(0,0,0,0.4));
      border-color: color-mix(in srgb, var(--correct) 55%, transparent);
      box-shadow: 0 0 10px color-mix(in srgb, var(--correct) 30%, transparent);
    }

    .progress-track {
      flex: 1;
      height: 36px;
      background: color-mix(in srgb, var(--accent) 12%, rgba(0,0,0,0.45));
      border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
      box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 28%, transparent),
                  inset 0 1px 0 rgba(255,255,255,0.06);
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }
    .progress-fill {
      position: absolute;
      inset: 0;
      right: auto;
      background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 55%, #080e1a) 0%,
        color-mix(in srgb, var(--accent) 85%, rgba(255,255,255,0.15)) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
      transition: width 0.4s ease;
      width: 0%;
    }
    .q-counter {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 800;
      color: rgba(225,232,250,0.90);
      text-shadow: 0 1px 3px rgba(0,0,0,0.6);
      pointer-events: none;
    }

    .flag-area {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      position: relative;
    }
    .flag-wrap {
      width: 100%;
      max-height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .flag-wrap img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      display: block;
      filter: brightness(0.85) saturate(0.85);
      transition: filter 1s ease;
    }

    .q-area {
      padding: 0 16px 10px;
      cursor: pointer;
      user-select: none;
    }
    .q-chip {
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
      box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
      border-radius: 4px;
      padding: 9px 14px;
      font-size: 15px;
      font-weight: 700;
      color: rgba(225,232,250,0.90);
      overflow: hidden;
    }
    .q-chip-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    #qIcon, #qIconEnd { display: flex; align-items: center; }
    #qLabel { display: inline-block; }
    #qSub { color: rgba(225,232,250,0.90); }

    .answers-area { padding: 0 16px 16px; display: flex; flex-direction: column; overflow: hidden; }
    .answers-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: minmax(52px, 90px);
      gap: 8px;
      min-height: var(--grid-min-h, 0px);
    }
    @keyframes flagOut {
      from { transform: translateX(0);     opacity: 1; }
      to   { transform: translateX(-40px); opacity: 0; }
    }
    @keyframes flagIn {
      from { transform: translateX(40px); opacity: 0; }
      to   { transform: translateX(0);    opacity: 1; }
    }
    .flag-exit  { animation: flagOut 0.22s ease forwards; }
    .flag-enter { animation: flagIn  0.3s  ease forwards; }

    @keyframes chipOut {
      from { transform: translateY(0);     opacity: 1; }
      to   { transform: translateY(-16px); opacity: 0; }
    }
    @keyframes chipSlideIn {
      from { transform: translateX(-36px); opacity: 0; }
      to   { transform: translateX(0);     opacity: 1; }
    }
    @keyframes chipIn {
      from { transform: translateY(16px); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }

    @keyframes ansExit {
      from { opacity: 1; transform: scale(1); }
      to   { opacity: 0; transform: scale(0.88) translateY(4px); }
    }
    @keyframes fadeHide { from { opacity: 1; } to { opacity: 0; } }
    @keyframes ansFly {
      from { opacity: 0; transform: scale(0.35) translateY(40px); }
      to   { opacity: 1; transform: scale(1)    translateY(0); }
    }

    .ans-btn {
      height: 100%;
      border-radius: 4px;
      border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
      outline: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
      outline-offset: -10px;
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%);
      box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
      color: rgba(225,232,250,0.90);
      font-size: 13px;
      font-weight: 700;
      padding: 10px 8px;
      cursor: pointer;
      transition: filter 0.12s, transform 0.08s, opacity 0.15s;
      text-align: center;
      line-height: 1.3;
      display: flex;
      align-items: center;
      justify-content: center;
      word-break: break-word;
      animation: ansFly 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) both;
    }
    .ans-btn:hover:not(:disabled) {
      filter: brightness(1.15);
      transform: translateY(-1px);
    }
    .ans-btn:disabled { cursor: default; }
    .ans-btn.correct  { background: var(--correct-soft); border-color: var(--correct-border); color: var(--correct); }
    .ans-btn.wrong    { background: var(--wrong-soft);   border-color: var(--wrong-border);   color: var(--wrong);   }
    .ans-btn.dim      { opacity: 0.3; }
    .ans-btn.ans-placeholder {
      visibility: hidden;
      pointer-events: none;
      animation: none !important;
    }

    /* Colors question — grayscale flag */
    .flag-wrap img.flag-grayscale { filter: grayscale(1); }

    /* Colors question — swatch answer */
    .swatch-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; pointer-events: none; }
    .swatch { width: 36px; height: 36px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); flex-shrink: 0; }

    .score-wrong   { color: var(--wrong); }
    .score-correct { color: var(--correct); }

    /* ── GAME BOTTOM ZONE ────────────────────── */
    .game-bottom { position: relative; flex-shrink: 0; display: flex; flex-direction: column; }

    /* ── FLAG STAMP ──────────────────────────── */
    .flag-stamp {
      position: absolute;
      top: 50%; left: 50%;
      width: 168px; height: 168px;
      display: flex; align-items: center; justify-content: center;
      pointer-events: none;
      z-index: 10;
      opacity: 0;
      border-radius: 50%;
      background: rgba(8, 14, 28, 0.62);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
    }
    .flag-stamp.ok  { color: var(--correct); animation: stampFade 5.5s linear forwards; }
    .flag-stamp.bad { color: var(--wrong);   animation: stampFade 5.5s linear forwards; }
    @keyframes stampFade {
      0%   { opacity: 0; transform: translate(calc(-50% + var(--sx,0px)), calc(-50% + var(--sy,0px))) rotate(var(--sr,0deg)) scale(0); }
      4%   { opacity: 1; transform: translate(calc(-50% + var(--sx,0px)), calc(-50% + var(--sy,0px))) rotate(var(--sr,0deg)) scale(1.12); }
      6%   { opacity: 1; transform: translate(calc(-50% + var(--sx,0px)), calc(-50% + var(--sy,0px))) rotate(var(--sr,0deg)) scale(1); }
      82%  { opacity: 1; }
      100% { opacity: 0; transform: translate(calc(-50% + var(--sx,0px)), calc(-50% + var(--sy,0px))) rotate(var(--sr,0deg)) scale(1); }
    }

    /* ── RESULT PANEL ────────────────────────── */
    .result-panel {
      display: none;
      position: absolute;
      inset: 0 16px 16px 16px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 16px 20px;
      border-radius: 4px;
      cursor: pointer;
      z-index: 1;
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .result-panel.show { display: flex; animation: resultIn 0.22s ease forwards; }
    .result-panel.ok  {
      border: 1.5px solid color-mix(in srgb, var(--correct) 55%, transparent);
      animation: resultIn 0.22s ease forwards, resultPulseOk 1.8s ease 0.22s infinite;
    }
    .result-panel.bad {
      border: 1.5px solid color-mix(in srgb, var(--wrong) 55%, transparent);
      animation: resultIn 0.22s ease forwards, resultPulseBad 1.8s ease 0.22s infinite;
    }
    @keyframes resultIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes resultPulseOk  {
      0%,100% { box-shadow: 0 0 12px color-mix(in srgb, var(--correct) 18%, transparent), inset 0 1px 0 rgba(255,255,255,0.08); }
      50%     { box-shadow: 0 0 24px color-mix(in srgb, var(--correct) 40%, transparent), inset 0 1px 0 rgba(255,255,255,0.08); }
    }
    @keyframes resultPulseBad {
      0%,100% { box-shadow: 0 0 12px color-mix(in srgb, var(--wrong) 18%, transparent), inset 0 1px 0 rgba(255,255,255,0.08); }
      50%     { box-shadow: 0 0 24px color-mix(in srgb, var(--wrong) 40%, transparent), inset 0 1px 0 rgba(255,255,255,0.08); }
    }
    .result-head { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
    .result-panel.ok  .result-head { color: var(--correct); }
    .result-panel.bad .result-head { color: var(--wrong); }
    .result-label { font-size: 13px; color: var(--text-muted); margin-bottom: 2px; }
    .result-value { font-size: 16px; font-weight: 700; color: var(--text); }
    .result-hint  { font-size: 11px; color: var(--text-muted); margin-top: 8px; opacity: 0.65; }
    .result-map-btn {
      margin-top: 10px;
      padding: 6px 14px;
      border-radius: 4px;
      border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
      background: transparent;
      color: rgba(225,232,250,0.75);
      font-family: inherit;
      font-size: 13px;
      cursor: pointer;
      display: flex; align-items: center; gap: 6px;
      transition: border-color 0.12s, color 0.12s, background 0.12s;
    }
    .result-map-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

    /* ── SOUND SLIDERS ───────────────────────── */
    .sound-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
    .sound-row:last-child { border-bottom: none; }
    .sound-row-label { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; min-width: 130px; }
    .sound-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: var(--surface-3); outline: none; cursor: pointer; }
    .sound-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; }
    .sound-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; }

    /* ── STATS ───────────────────────────────── */
    /* ── CONFIG HEADER + BACK BTN (shared) ─────── */
    .config-header { display: none; }
    .back-btn { display: none; }

    /* ── STATS ───────────────────────────────── */
    #screen-stats.active {
      display: flex; flex-direction: column;
      background:
        radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 40%, #0d1f4a 0%, #060e28 50%, #000 100%);
    }
    .stats-body { flex: 1; overflow-y: auto; padding: 12px 16px 32px; display: flex; flex-direction: column; gap: 10px; }

    .stats-hero {
      text-align: center; padding: 18px 16px 16px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 12px; backdrop-filter: blur(8px);
    }
    .stats-big-pct { font-size: 72px; font-weight: 900; color: var(--accent); line-height: 1; letter-spacing: -0.03em; }
    .stats-big-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

    .stats-anim {
      opacity: 0;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 12px; padding: 14px 16px;
      backdrop-filter: blur(8px);
    }
    .stats-anim.go { animation: statsFadeUp 0.32s ease forwards; }
    @keyframes statsFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    .stats-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }

    .stat-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
    .stat-bar-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--text-dim); }
    .stat-bar-label { font-size: 13px; font-weight: 600; width: 114px; flex-shrink: 0; }
    .stat-bar-track { flex: 1; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
    .stat-bar-fill { height: 100%; border-radius: 4px; background: var(--accent); width: 0%; transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
    .stat-bar-pct { font-size: 12px; color: var(--text-dim); width: 34px; text-align: right; flex-shrink: 0; }

    .stats-flags { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .stat-flag-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; text-align: center; min-width: 0; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
    .stat-flag-card:hover { border-color: var(--accent); background: var(--accent-dim); }
    .stat-flag-img { height: 26px; width: 40px; object-fit: cover; border-radius: 2px; }
    .stat-flag-sub { font-size: 9px; color: var(--text-muted); }

    .stats-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 16px 0; line-height: 1.6; }

    /* ── MAP OVERLAY ──────────────────────────── */
    .map-overlay {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 300;
      display: none;
      flex-direction: column;
    }
    .map-overlay.show { display: flex; }
    .map-header {
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      border-bottom: 1px solid var(--border);
    }
    .map-country-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .map-country-flag { height: 22px; border-radius: 3px; flex-shrink: 0; }
    .map-country-name { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .map-controls { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
    .map-legend {
      display: flex;
      gap: 14px;
      font-size: 11px;
      color: var(--text-muted);
      align-items: center;
    }
    .map-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
    .map-container {
      flex: 1;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      background: #07111f;
    }
    .map-container svg {
      width: 100%;
      height: 100%;
      max-height: 100%;
    }

    /* Game menu (pause) */
    .gmenu-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(4px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 200;
    }
    .gmenu-overlay.show { display: flex; }
    .gmenu-panel {
      width: min(100%, 300px);
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
      box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
      border-radius: 4px;
      padding: 28px 24px;
      text-align: center;
    }
    .gmenu-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-dim);
      margin-bottom: 18px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .gmenu-btns { display: flex; flex-direction: column; gap: 16px; }
    .gmenu-btns .btn {
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
      outline: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
      outline-offset: -10px;
      box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
      border-radius: 4px;
      color: rgba(225,232,250,0.90);
    }
    .gmenu-btns .btn:hover {
      filter: brightness(1.15);
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%);
      border-color: color-mix(in srgb, var(--accent) 42%, transparent);
      color: rgba(225,232,250,0.90);
    }

    /* ── SUMMARY ─────────────────────────────── */
    @keyframes sumFadeUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes sumPop {
      0%   { opacity: 0; transform: scale(0.7); }
      70%  { transform: scale(1.06); }
      100% { opacity: 1; transform: scale(1); }
    }
    .sum-anim { opacity: 0; }
    .sum-anim.go { animation: sumFadeUp 0.38s ease forwards; }

    #screen-summary { padding: 20px 16px 20px; overflow-y: auto; }
    #screen-summary.active {
      justify-content: center;
      background:
        radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 40%, #0d1f4a 0%, #060e28 50%, #000 100%);
    }

    .sum-hero {
      text-align: center; margin-bottom: 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px; padding: 24px 20px 20px;
      backdrop-filter: blur(8px);
    }
    .sum-emoji { margin-bottom: 10px; display: flex; justify-content: center; font-size: 52px; line-height: 1; }
    .sum-emoji.go { animation: sumPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
    .sum-pct { font-size: 72px; font-weight: 900; color: var(--accent); line-height: 1; letter-spacing: -0.03em; }
    .sum-pct-label { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

    .sum-cats {
      display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 12px; padding: 12px 14px;
      backdrop-filter: blur(8px);
    }
    .sum-cat-row {
      display: flex; align-items: center; gap: 10px;
      padding: 7px 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .sum-cat-row:last-child { border-bottom: none; padding-bottom: 0; }
    .sum-cat-row:first-child { padding-top: 0; }
    .sum-cat-icon  { flex-shrink: 0; display: flex; align-items: center; color: var(--text-muted); }
    .sum-cat-label { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; }
    .sum-cat-score { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
    .sum-cat-bar   { width: 48px; height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
    .sum-cat-fill  { height: 100%; border-radius: 3px; background: var(--accent); width: 0%; transition: width 0.65s cubic-bezier(0.22,1,0.36,1); }

    .sum-extra { text-align: center; font-size: 12px; color: var(--text-muted); margin-bottom: 12px; min-height: 18px; }
    .sum-extra strong { color: var(--text-dim); }

    #screen-summary .sum-btns { margin-top: 0; display: flex; flex-direction: column; gap: 9px; }

    /* ── HISTORY ─────────────────────────────── */
    #screen-history.active {
      display: flex; flex-direction: column;
      background:
        radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 40%, #0d1f4a 0%, #060e28 50%, #000 100%);
    }
    .hist-list { flex: 1; overflow-y: auto; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 5px; }

    .hist-row { border-radius: 8px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.04); overflow: hidden; flex-shrink: 0; backdrop-filter: blur(6px); }
    .hist-row-head {
      display: flex; align-items: center; gap: 9px;
      padding: 9px 11px; cursor: pointer; user-select: none;
      transition: background 0.1s;
    }
    .hist-row-head:hover { background: rgba(255,255,255,0.05); }
    .hist-result { font-size: 14px; font-weight: 900; flex-shrink: 0; width: 16px; text-align: center; }
    .hist-result.ok  { color: var(--correct); }
    .hist-result.bad { color: var(--wrong); }
    .hist-flag { height: 16px; border-radius: 2px; flex-shrink: 0; object-fit: cover; }
    .hist-country { font-size: 13px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hist-type { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

    .hist-detail {
      display: none; padding: 12px 14px 14px;
      font-size: 14px; line-height: 1.7; color: var(--text-dim);
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .hist-row.open .hist-detail { display: block; }

    .hist-actions { display: flex; gap: 8px; margin-top: 12px; }
    .hist-act-btn {
      padding: 8px 16px; border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.12);
      background: transparent; color: var(--text-dim);
      font-size: 13px; font-weight: 700; cursor: pointer;
      transition: border-color 0.12s, color 0.12s, background 0.12s;
      font-family: inherit;
    }
    .hist-act-btn:hover      { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
    .hist-act-btn.warn:hover { border-color: var(--wrong);  color: var(--wrong);  background: var(--wrong-soft); }


    /* ── MENU REDESIGN v1.2 ─────────────────────── */
    #screen-menu { padding: 0; background: transparent; pointer-events: none; }
    #screen-menu .menu1-panel { pointer-events: auto; }

    /* ── LOGO GLOBE ─────────────────────────────── */
    #menu-globe-wrap {
      position: absolute;
      top: 0; left: -5%;
      width: 110%; height: 100%;
      overflow: visible;
      pointer-events: none;
      z-index: 1;
      transform-origin: 50% 50%;
      will-change: transform, opacity, top, left, width, height;
    }
    #menu-globe-wrap canvas { pointer-events: all; }
    #menu-globe-wrap.map-globe-active {
      top: 0;
      z-index: 320;
      pointer-events: auto;
      background: #07111e;
    }

    .map-globe-overlay {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: min(100vw, 430px);
      z-index: 340;
      display: none;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(7,17,31,0.18) 0%, rgba(7,17,31,0.04) 24%, rgba(7,17,31,0) 40%);
    }
    .map-globe-overlay.show { display: block; }
    .map-globe-namebar {
      pointer-events: none;
      position: absolute;
      top: 12px;
      left: 12px;
      right: 12px;
      z-index: 1;
    }
    .map-globe-namepill {
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 16px;
      text-align: center;
      font-weight: 800;
      letter-spacing: 0.01em;
      color: rgba(225,232,250,0.92);
      border-radius: 8px;
      border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
      outline: 1.5px solid color-mix(in srgb, var(--accent) 24%, transparent);
      outline-offset: -8px;
      background:
        radial-gradient(ellipse at 20% 26%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 54%),
        linear-gradient(175deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        color-mix(in srgb, var(--accent) 12%, rgba(10,22,40,0.82));
      box-shadow:
        0 0 18px color-mix(in srgb, var(--accent) 24%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.14);
      backdrop-filter: blur(10px);
      text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 20%, transparent);
    }
    .map-globe-flag-btn {
      pointer-events: auto;
      position: absolute;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      padding: 0;
      border: none;
      background: transparent;
      cursor: pointer;
      border-radius: 6px;
    }
    .map-globe-flag {
      display: block;
      width: auto;
      height: auto;
      max-width: min(36vw, 170px);
      max-height: 12vh;
      object-fit: contain;
      border-radius: 4px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    }
    .map-globe-flag-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 4px;
      pointer-events: none;
      background:
        linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.28));
      mix-blend-mode: multiply;
    }

    .menu-logo { flex: 1; min-height: 52%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px 0; position: relative; z-index: 2; pointer-events: none; }
    .menu-close-btn { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: none; border: none; color: var(--text-dim); font-size: 22px; cursor: pointer; border-radius: 8px; display: grid; place-items: center; transition: background 0.12s, color 0.12s; font-family: inherit; }
    .menu-close-btn:hover { background: var(--surface-2); color: var(--text); }
    .menu1-panel {
      position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
      display: flex; flex-direction: column; justify-content: center;
      padding: 14px 16px; gap: 24px;
    }
    .menu-main-btn { flex: 1; max-height: 72px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; border-radius: 4px; border: 1.5px solid transparent; color: var(--accent); font-size: 20px; font-weight: 800; font-family: inherit; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: filter 0.15s, transform 0.1s, color 0.3s; text-shadow: 0 0 10px var(--accent-soft), 0 0 24px var(--accent-dim); }
    .menu-main-btn:active { transform: scale(0.97); }
    .menu-main-btn svg    { width: 36px; height: 36px; }

    /* HRÁT — oranžová skleněná, dvojitý okraj */
    .menu1-panel .menu-main-btn:nth-child(1) {
      background:
        radial-gradient(ellipse at 18% 28%, rgba(255,220,140,0.40) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 36%, transparent 36%),
        linear-gradient(160deg, rgba(255,110,20,0.32) 0%, rgba(180,30,5,0.42) 100%);
      border: 1.5px solid rgba(255,130,40,0.40);
      outline: 1.5px solid rgba(255,140,50,0.25);
      outline-offset: -10px;
      box-shadow: 0 0 22px rgba(255,90,10,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
      backdrop-filter: blur(12px);
    }
    .menu1-panel .menu-main-btn:nth-child(1) { color: rgba(255,175,90,0.95); text-shadow: 0 0 10px rgba(255,130,40,0.45), 0 0 24px rgba(255,100,20,0.2); }
    .menu1-panel .menu-main-btn:nth-child(1):hover { filter: brightness(1.12); }

    /* UČIT SE — zelená skleněná, dvojitý okraj */
    .menu1-panel .menu-main-btn:nth-child(2) {
      background:
        radial-gradient(ellipse at 18% 28%, rgba(140,255,180,0.38) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 36%, transparent 36%),
        linear-gradient(160deg, rgba(25,200,75,0.32) 0%, rgba(5,120,35,0.42) 100%);
      border: 1.5px solid rgba(35,210,85,0.40);
      outline: 1.5px solid rgba(45,230,100,0.25);
      outline-offset: -10px;
      box-shadow: 0 0 22px rgba(20,200,70,0.42), inset 0 1px 0 rgba(255,255,255,0.15);
      backdrop-filter: blur(12px);
    }
    .menu1-panel .menu-main-btn:nth-child(2) { color: rgba(55,230,105,0.95); text-shadow: 0 0 10px rgba(30,210,80,0.45), 0 0 24px rgba(20,180,60,0.2); }
    .menu1-panel .menu-main-btn:nth-child(2):hover { filter: brightness(1.12); }

    .menu-sec-row { flex: 1; max-height: 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .menu-sec-btn {
      display: flex; align-items: center; justify-content: center; padding: 16px;
      border-radius: 4px; cursor: pointer; font-family: inherit;
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
      outline: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
      outline-offset: -10px;
      box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
      color: rgba(225,232,250,0.90);
      transition: filter 0.12s;
    }
    .menu-sec-btn:hover { filter: brightness(1.15); }
    .menu-sec-btn svg { width: 26px; height: 26px; }

    /* ── LEARN SUBMENU ──────────────────────────── */
    #screen-learn.active { display: flex; flex-direction: column; background: transparent; }
    .learn-btn {
      flex: 1; max-height: 72px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
      border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 20px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
      color: rgba(225,232,250,0.90);
      transition: filter 0.15s, transform 0.1s;
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
      outline: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
      outline-offset: -10px;
      box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
    }
    .learn-btn:hover  { filter: brightness(1.12); }
    .learn-btn:active { transform: scale(0.97); }
    .learn-btn svg    { width: 36px; height: 36px; }


    /* ── ATLAS ──────────────────────────────────── */
    #screen-atlas.active { display: flex; flex-direction: column; }
    @keyframes atlasItemIn {
      from { opacity: 0; transform: translateY(-8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .atlas-search-wrap { padding: 16px 16px 8px; }
    .atlas-search {
      width: 100%; box-sizing: border-box; padding: 12px 16px;
      border-radius: 4px; font-size: 15px; font-family: inherit; outline: none;
      color: rgba(225,232,250,0.90);
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
      outline: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
      outline-offset: -10px;
      box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
    }
    .atlas-search::placeholder { color: rgba(225,232,250,0.40); }
    .atlas-regions { display: flex; gap: 8px; padding: 0 16px 10px; }
    .atlas-region-btn {
      flex: 1; height: 44px; display: flex; align-items: center; justify-content: center;
      border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700;
      color: rgba(225,232,250,0.90); white-space: nowrap;
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%);
      border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
      outline: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent);
      outline-offset: -8px;
      box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 1px 0 rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
      transition: filter 0.12s, transform 0.1s;
    }
    .atlas-region-btn:active { transform: scale(0.97); }
    .atlas-region-btn.on {
      background:
        radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 52%),
        linear-gradient(175deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 36%, transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 32%, transparent) 0%, color-mix(in srgb, var(--accent) 48%, #080e1a) 100%);
      border-color: color-mix(in srgb, var(--accent) 75%, transparent);
      box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 42%, transparent), inset 0 1px 0 rgba(255,255,255,0.12);
    }
    .atlas-list {
      flex: 1; overflow-y: auto; margin: 0 16px 16px;
      border-radius: 4px;
      border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
      box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent);
      backdrop-filter: blur(12px);
      scrollbar-width: none;
    }
    .atlas-list::-webkit-scrollbar { display: none; }
    .atlas-row { display: flex; align-items: center; gap: 14px; padding: 13px 10px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); cursor: pointer; border-radius: 4px; transition: background 0.1s; background: color-mix(in srgb, var(--accent) 14%, transparent); margin: 4px; }
    .atlas-row:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
    .atlas-row:last-child { border-bottom: none; }
    .atlas-flag { width: 64px; height: 43px; object-fit: contain; border-radius: 3px; flex-shrink: 0; }
    .atlas-name { flex: 1; font-size: 15px; font-weight: 600; color: var(--text); }
    .atlas-sub  { font-size: 12px; color: var(--text-muted); }
    .atlas-arrow { color: var(--accent); font-size: 18px; margin-right: 4px; }
    .atlas-empty { text-align: center; color: var(--text-muted); padding: 40px 20px; font-size: 14px; }

    /* ── ATLAS DETAIL ───────────────────────────── */
    #screen-atlas-detail.active { display: flex; flex-direction: column; }
    .detail-scroll { flex: 1; overflow-y: auto; }
    .detail-flag-wrap { padding: 20px 16px 12px; display: flex; justify-content: center; }
    .detail-flag { max-width: 100%; max-height: 180px; border-radius: 6px; }
    .detail-name { font-size: 24px; font-weight: 900; text-align: center; padding: 0 16px 4px; color: var(--text); }
    .detail-sub  { font-size: 13px; text-align: center; color: var(--text-muted); padding: 0 16px 16px; }
    .detail-section { padding: 0 16px 12px; }
    .detail-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px; }
    .detail-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
    .detail-row:last-child { border-bottom: none; }
    .detail-row-label { color: var(--text-muted); font-weight: 600; }
    .detail-row-val   { color: var(--text); font-weight: 700; text-align: right; max-width: 60%; }
    .neighbor-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
    .neighbor-row:last-child { border-bottom: none; }
    .neighbor-flag { width: 36px; height: 24px; object-fit: contain; border-radius: 2px; flex-shrink: 0; }
    .neighbor-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
    .neighbor-btns { display: flex; gap: 5px; }
    .neighbor-btn  { padding: 5px 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-size: 11px; font-weight: 700; cursor: pointer; transition: background 0.1s, border-color 0.1s, color 0.1s; font-family: inherit; }
    .neighbor-btn:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
    .detail-map-btn { display: block; width: 100%; margin: 10px 0 0; padding: 13px; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent-dim); color: var(--accent); font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; text-align: center; transition: background 0.15s; box-sizing: border-box; }
    .detail-map-btn:hover { background: var(--accent); color: var(--bg); }

    /* ── STUDY ──────────────────────────────────── */
    #screen-study.active { display: flex; flex-direction: column; background: transparent; }
    .study1-cfg { position: absolute; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px; gap: 48px; }
    .study1-count-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; flex-shrink: 0; }
    .study1-region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-shrink: 0; }
    .study1-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; height: 72px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; color: rgba(225,232,250,0.90); background: radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 52%), linear-gradient(175deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 36%, transparent 36%), linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, #080e1a) 100%); border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent); outline: 1.5px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: -10px; box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(12px); transition: filter 0.12s, transform 0.1s; }
    .study1-btn:active { transform: scale(0.97); }
    .study1-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
    .study1-btn.on { background: radial-gradient(ellipse at 18% 28%, color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 52%), linear-gradient(175deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 36%, transparent 36%), linear-gradient(160deg, color-mix(in srgb, var(--accent) 38%, transparent) 0%, color-mix(in srgb, var(--accent) 52%, #080e1a) 100%); border: 1.5px solid color-mix(in srgb, var(--accent) 85%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.15); }
    .study1-full { grid-column: 1 / -1; }
    .study1-start-btn { flex: 0 0 72px; display: flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 18px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(55,230,105,0.95); text-shadow: 0 0 10px rgba(30,210,80,0.45), 0 0 24px rgba(20,180,60,0.2); background: radial-gradient(ellipse at 18% 28%, rgba(140,255,180,0.38) 0%, transparent 52%), linear-gradient(175deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 36%, transparent 36%), linear-gradient(160deg, rgba(25,200,75,0.32) 0%, rgba(5,120,35,0.42) 100%); border: 1.5px solid rgba(35,210,85,0.40); outline: 1.5px solid rgba(45,230,100,0.25); outline-offset: -10px; box-shadow: 0 0 22px rgba(20,200,70,0.42), inset 0 1px 0 rgba(255,255,255,0.15); backdrop-filter: blur(12px); transition: filter 0.15s, transform 0.1s; }
    .study1-start-btn:hover { filter: brightness(1.12); }
    .study1-start-btn:active { transform: scale(0.97); }
    .study-progress-bar { padding: 6px 16px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
    .study-start-btn { padding: 16px; border-radius: 10px; border: none; background: var(--accent); color: var(--bg); font-size: 17px; font-weight: 800; cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
    .study-start-btn:hover { opacity: 0.85; }
    /* Study — cinematic stage */
    .study-stage    { flex: 1; position: relative; overflow: hidden; }
    .study-tap-zone { position: absolute; inset: 0; z-index: 10; cursor: pointer; }
    .study-flag-wrap { position: absolute; left: 0; right: 0; }
    .study-flag-img  { display: block; width: 100%; height: auto; }
    .study-name-wrap { position: absolute; left: 0; right: 0; text-align: center; padding: 0 16px; }
    .study-name-text { font-size: 26px; font-weight: 900; color: var(--accent); line-height: 1.25; }
    .study-info-wrap { position: absolute; left: 16px; right: 16px; }
    .study-info-row  { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
    .study-info-row:last-child { border-bottom: none; }
    .study-info-label { color: var(--text-muted); font-weight: 600; }
    .study-info-val   { color: var(--text); font-weight: 700; text-align: right; }

    @keyframes studyDepthFlag {
      0%   { opacity: 0; transform: scale(0.04); }
      52%  { opacity: 1; transform: scale(1.13); }
      76%  { transform: scale(0.97); }
      100% { opacity: 1; transform: scale(1); }
    }
    @keyframes studyDepthName {
      0%   { opacity: 0; transform: scale(0.04); }
      52%  { opacity: 1; transform: scale(1.09); }
      78%  { transform: scale(0.98); }
      100% { opacity: 1; transform: scale(1); }
    }
    @keyframes studyDepthInfo {
      0%   { opacity: 0; transform: scale(0.12) translateX(-18px); }
      58%  { opacity: 1; transform: scale(1.04); }
      100% { opacity: 1; transform: scale(1) translateX(0); }
    }
    @keyframes studyFadeOut { to { opacity: 0; } }

    .sdf  { animation: studyDepthFlag 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
    .sdn  { animation: studyDepthName 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
    .sdi  { animation: studyDepthInfo 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
    .sfo  { animation: studyFadeOut 0.4s ease forwards; }

    .study-done       { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px 16px; text-align: center; }
    .study-done-icon  { font-size: 64px; }
    .study-done-title { font-size: 24px; font-weight: 900; color: var(--text); }
    .study-done-sub   { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; }

    /* ── MAP — atlas button (explore mód) ───────── */
    .map-atlas-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; font-family: inherit; display: none; }
    .map-atlas-btn.show { display: block; }
    .map-atlas-btn:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }