:root {
      --bg: #f4f6f8;
      --card: rgba(255,255,255,.96);
      --text: #17202a;
      --muted: #697380;
      --border: #d7dde5;
      --accent: #2563eb;
      --sea: #d9edf5;
      --land: #f5f1e8;
      --neighbor: #eceff1;
      --westbank: #e5e6e2;
      --neutral: #e9edf1;
      --neutral-hover: #dbe3ea;
      --outline: #7f8b97;
      --correct: #3aa76d;
      --wrong-temp: #f2c94c;
      --revealed: #dc5a5a;
      --shadow: 0 18px 50px rgba(31,41,55,.12);
      --ui-font: "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      overflow: hidden;
      background: radial-gradient(circle at 15% 10%, rgba(37,99,235,.08), transparent 30%), var(--bg);
      color: var(--text);
      font-family: var(--ui-font);
    }
    button { font: inherit; }

    .app-shell {
      height: 100dvh;
      display: flex;
      flex-direction: column;
      padding: 14px;
      gap: 12px;
    }

    .topbar {
      min-height: 62px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 0 6px;
      direction: rtl;
    }

    .brand { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
    .brand-logo {
      display: block;
      height: 72px;
      width: auto;
      max-width: min(360px, 52vw);
      object-fit: contain;
    }

    .new-game-button {
      border: 1px solid #111827;
      background: #111827;
      color: #fff;
      border-radius: 13px;
      min-height: 44px;
      padding: 10px 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      direction: rtl;
      font-weight: 700;
      font-family: var(--ui-font) !important;
      cursor: pointer;
      box-shadow: 0 3px 10px rgba(17,24,39,.14);
      transition: background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease;
      flex: 0 0 auto;
    }
    .new-game-button:hover { background:#000; border-color:#000; transform:translateY(-1px); box-shadow:0 5px 14px rgba(17,24,39,.20); }
    .new-game-button:focus-visible { outline: 3px solid rgba(17,24,39,.22); outline-offset: 2px; }
    .new-game-button:disabled { opacity: .45; cursor: wait; transform: none; }
    .new-game-icon { font-size: 21px; line-height: 1; font-weight: 500; }

    .ghost-button, .primary-button {
      border: 0; border-radius: 12px; padding: 10px 14px; cursor: pointer;
      transition: transform .12s ease, background .12s ease;
    }
    .ghost-button { background: #fff; color: #25303c; border: 1px solid var(--border); }
    .primary-button { background: #111827; color: #fff; font-weight: 700; }
    .ghost-button:hover, .primary-button:hover { transform: translateY(-1px); }
    .primary-button:disabled {
      background:#e9edf2; color:#7a8591; border:1px solid #dce2e8; box-shadow:none;
      cursor:not-allowed; opacity:1; transform:none;
    }
    .primary-button:disabled:hover { background:#e9edf2; transform:none; }

    .game-layout {
      min-height: 0;
      flex: 1;
      display: grid;
      grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
      gap: 12px;
      direction: rtl;
    }

    .quiz-card, .map-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 20px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .quiz-card {
      padding: 38px 22px 22px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      min-height: 0;
      text-align: center;
    }

    .quiz-main { width: 100%; min-width: 0; text-align: center; }
    .eyebrow { color: var(--muted); font-size: 13px; font-weight: 700; margin-bottom: 8px; }
    .prompt-row {
      min-width: 0;
      direction: rtl;
      text-align: center;
    }
    .city-prompt {
      margin: 0;
      direction: rtl;
      unicode-bidi: isolate;
      min-width: 0;
      font-size: clamp(32px, 4.8vw, 55px);
      line-height: .98;
      letter-spacing: -.045em;
      overflow-wrap: anywhere;
    }
    .emblem-row {
      height: 106px;
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      direction: rtl;
    }
    .city-emblem-wrap {
      width: 94px;
      height: 94px;
      flex: 0 0 94px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: rgba(255,255,255,.72);
      border: 1px solid #e2e7ec;
      overflow: hidden;
      opacity: 0;
      transform: scale(.97);
      transition: opacity .12s ease, transform .12s ease;
    }
    .city-emblem-wrap.visible { opacity: 1; transform: scale(1); }
    .city-emblem {
      display: block;
      width: 82px;
      height: 82px;
      object-fit: contain;
    }
    .locality-name { direction: rtl; unicode-bidi: isolate; }
    .feedback { width: 100%; min-height: 48px; margin-top: 14px; padding: 12px 13px; border-radius: 12px; font-size: 14px; line-height: 1.45; text-align: center; font-family: var(--ui-font); font-weight: 650; background:var(--neutral); transition:opacity .12s ease, margin-top .12s ease, padding .12s ease; }
    .how-button {
      margin-top: auto;
      border: 1px solid #cfd6de;
      background: #f7f9fb;
      color: #303b47;
      font-family: inherit;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 13px;
      border-radius: 999px;
      box-shadow: 0 2px 7px rgba(31,41,55,.08);
      transition: background .12s ease, border-color .12s ease, transform .12s ease;
    }
    .how-button:hover { background: #eef2f6; border-color: #aeb8c3; transform: translateY(-1px); }
    .how-button:focus-visible { outline: 3px solid rgba(37,99,235,.22); outline-offset: 2px; }
    .how-icon {
      width: 20px; height: 20px; border-radius: 50%;
      display: inline-grid; place-items: center;
      border: 1.5px solid #87919c;
      font-size: 13px; line-height: 1;
    }
    .how-modal[hidden] { display: none; }
    .how-modal {
      position: fixed; inset: 0; z-index: 40;
      display: grid; place-items: center;
      background: rgba(17,24,39,.34); padding: 20px;
    }
    .how-box {
      width: min(505px, 100%);
      background: #fff;
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 22px 70px rgba(17,24,39,.26);
      direction: rtl;
      text-align: right;
    }
    .how-box h2 { margin: 0 0 14px; font-size: 24px; }
    .how-box ul {
      margin: 0;
      padding-right: 22px;
      color: #45515e;
      line-height: 1.75;
    }
    .how-box li + li { margin-top: 7px; }
    .how-box .ghost-button { margin-top: 20px; }
    .feedback:empty { background:var(--neutral); opacity:1; }
    .feedback.success { background: #e7f6ee; color: #1f6c45; }
    .feedback.warning { background: #fff7d9; color: #725600; }
    .feedback.reveal { background: #fdeaea; color: #8e3434; }

    .stats-display {
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      direction: ltr;
      width: 100%;
      min-width: 0;
    }
    .timer-row {
      width: 100%;
      display: flex;
      justify-content: center;
      min-width: 0;
    }
    .score-row {
      width: 100%;
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 22px;
      flex-wrap: wrap;
      min-width: 0;
    }
    .timer-display, .city-count-display, .correct-count-display {
      font-size: clamp(30px, 3.4vw, 42px);
      font-weight: 800;
      line-height: 1;
      letter-spacing: .045em;
      color: #111827;
      direction: ltr;
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1;
      white-space: nowrap;
    }
    .timer-display { font-size: clamp(34px, 4vw, 48px); }
    .city-count-display, .correct-count-display { letter-spacing: .01em; }
    .correct-count-display { color: #238151; }
    .restart-panel-button {
      margin-top: 12px;
      border: 1px solid #d4dae1;
      background: #fff;
      color: #35404c;
      border-radius: 12px;
      padding: 9px 13px;
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      direction: rtl;
      font-family: "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: background .12s ease, border-color .12s ease, transform .12s ease;
    }
    .restart-panel-button:hover { background: #f6f8fa; border-color: #b9c2cc; transform: translateY(-1px); }
    .restart-panel-button:disabled { opacity:.48; cursor:not-allowed; transform:none; background:#f7f9fb; }
    .restart-panel-button:focus-visible { outline: 3px solid rgba(37,99,235,.22); outline-offset: 2px; }
    .restart-icon { font-size: 18px; line-height: 1; font-weight: 800; }
    .source-note { margin-top: auto; padding-top: 18px; color: #89929d; font-size: 11px; line-height: 1.45; }

    .map-card { position: relative; min-height: 0; background: var(--sea); direction: ltr; }
    #map { position: absolute; inset: 0; background: var(--sea); }

    .loading-overlay {
      position: absolute; inset: 0; z-index: 8;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      gap: 10px; text-align: center; padding: 28px;
      background: rgba(244,246,248,.94); direction: rtl;
      transition: opacity .25s ease;
    }
    .loading-overlay.hidden { opacity: 0; pointer-events: none; }
    .spinner { width: 34px; height: 34px; border: 3px solid #dce2e9; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .loading-overlay strong { font-size: 17px; }
    .loading-overlay span { color: var(--muted); max-width: 460px; line-height: 1.5; }

    .maplibregl-ctrl-group { border-radius: 11px !important; overflow: hidden; box-shadow: 0 4px 16px rgba(20,30,40,.13) !important; }
    .maplibregl-ctrl-top-left { top: 10px; left: 10px; }
    .maplibregl-canvas:focus { outline: none; }

    .city-label {
      direction: rtl;
      unicode-bidi: isolate;
      white-space: nowrap;
      font-family: "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
      font-weight: 800;
      font-size: 12px;
      line-height: 1;
      color: #17202a;
      background: rgba(255,255,255,.93);
      border: 1px solid rgba(120,132,145,.45);
      border-radius: 999px;
      padding: 5px 7px;
      box-shadow: 0 2px 8px rgba(20,30,40,.18);
      pointer-events: none;
      transform: translateZ(0);
    }
    .city-label.correct { border-color: rgba(35,129,81,.55); }
    .city-label.revealed { border-color: rgba(184,68,68,.55); }
    .city-label.temp { border-color: rgba(169,127,0,.55); }

    .new-game-modal[hidden] { display: none; }
    .new-game-modal {
      position: fixed; inset: 0; z-index: 31; display: grid; place-items: center;
      background: rgba(17,24,39,.36); padding: 20px; overflow-y: auto; overscroll-behavior: contain;
    }
    .new-game-box {
      width: min(720px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain;
      scrollbar-gutter: stable; background: #fff; border-radius: 22px; padding: 26px;
      box-shadow: 0 24px 80px rgba(17,24,39,.28); direction: rtl;
      font-family: inherit;
    }
    .new-game-box,
    .new-game-box button,
    .new-game-box span,
    .new-game-box strong,
    .new-game-box h2 { font-family: var(--ui-font) !important; }
    .new-game-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
    .new-game-head h2 { margin: 0; font-size: 27px; }
    .modal-close-icon {
      width: 38px; height: 38px; border-radius: 10px; border: 1px solid #d8dee6;
      background: #fff; color: #4b5563; cursor: pointer; font-size: 22px; line-height: 1;
    }
    .difficulty-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
    .difficulty-option {
      border: 1px solid #d8dee6; background: #fff; border-radius: 16px; padding: 16px;
      min-height: 105px; text-align: right; cursor: pointer; direction: rtl;
      display: flex; flex-direction: column; justify-content: center; gap: 5px;
      transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
    }
    .difficulty-option:hover { transform: translateY(-1px); border-color: #9aa7b5; box-shadow: 0 5px 16px rgba(31,41,55,.07); }
    .difficulty-option:focus-visible { outline: 3px solid rgba(37,99,235,.20); outline-offset: 2px; }
    .difficulty-option.current { border-color: #2563eb; background: #f4f7ff; }
    .difficulty-title { font-size: 20px; font-weight: 700; color: #17202a; }
    .difficulty-count { font-size: 14px; font-weight: 600; color: #4b5563; }
    .difficulty-note { font-size: 12px; color: #7b8794; line-height: 1.35; }

    .arab-filter-row {
      margin: 0 0 16px; padding: 13px 15px; border: 1px solid #d8dee6; border-radius: 15px;
      background: #f8fafc; display: flex; align-items: center; justify-content: space-between; gap: 14px;
      direction: rtl;
    }
    .arab-filter-label { font-family: var(--ui-font) !important; font-size: 15px; font-weight: 700; color: #273444; }
    .toggle-switch { position: relative; width: 48px; height: 28px; flex: 0 0 auto; cursor: pointer; }
    .toggle-switch input { position: absolute; opacity: 0; pointer-events: none; }
    .toggle-track {
      position: absolute; inset: 0; border-radius: 999px; background: #cbd3dd; transition: background .16s ease;
      box-shadow: inset 0 0 0 1px rgba(31,41,55,.08);
    }
    .toggle-track::after {
      content: ""; position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%;
      background: #fff; box-shadow: 0 1px 5px rgba(31,41,55,.22); transition: transform .16s ease;
    }
    .toggle-switch input:checked + .toggle-track { background: #2563eb; }
    .toggle-switch input:checked + .toggle-track::after { transform: translateX(-20px); }
    .toggle-switch input:focus-visible + .toggle-track { outline: 3px solid rgba(37,99,235,.20); outline-offset: 2px; }
    .toggle-switch input:disabled + .toggle-track { opacity: .45; cursor: wait; }
    .toggle-switch:has(input:disabled) { cursor: wait; }

    .finish-modal[hidden] { display: none; }
    .finish-modal {
      position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
      background: rgba(17,24,39,.36); padding: 20px; overflow-y: auto; overscroll-behavior: contain;
    }
    .finish-box {
      width: min(430px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain;
      scrollbar-gutter: stable; background: #fff; border-radius: 22px; padding: 28px;
      box-shadow: 0 24px 80px rgba(17,24,39,.28); text-align: center;
    }
    .finish-box h2 { margin: 0 0 8px; font-size: 30px; }
    .finish-box p { color: var(--muted); line-height: 1.55; }


    /* ---------- Accounts / leaderboard ---------- */
    .topbar-actions {
      display: flex; align-items: center; justify-content: flex-end; gap: 8px;
      min-width: 0; flex: 0 1 auto;
    }
    .top-action-button {
      border: 1px solid #cfd6df; background: #fff; color: #25303c; border-radius: 13px;
      min-height: 44px; padding: 9px 13px; display: inline-flex; align-items: center;
      justify-content: center; gap: 7px; direction: rtl; font-family: var(--ui-font);
      font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
      box-shadow: 0 3px 10px rgba(31,41,55,.06);
      transition: background .12s ease, border-color .12s ease, transform .12s ease;
    }
    .top-action-button:hover { background: #f6f8fa; border-color: #aeb8c4; transform: translateY(-1px); }
    .top-action-button:focus-visible { outline: 3px solid rgba(37,99,235,.20); outline-offset: 2px; }
    .top-action-button svg { width: 20px; height: 20px; flex: 0 0 auto; }
    .account-top-button { background:#f2f5f8; border-color:#d9e0e7; box-shadow:none; }
    .account-top-button:hover { background:#e9eef3; border-color:#c7d0da; }
    .account-top-button .account-person-icon { color:#52606d; }
    .account-avatar { width: 27px; height: 27px; border-radius: 50%; object-fit: cover; display: none; background: #eef2f6; }
    .account-avatar.visible { display: block; }
    .account-person-icon.hidden { display: none; }

    .user-modal[hidden], .leaderboard-modal[hidden], .username-modal[hidden], .setup-modal[hidden] { display: none; }
    .user-modal, .leaderboard-modal, .username-modal, .setup-modal {
      position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
      background: rgba(17,24,39,.38); padding: 20px; font-family: var(--ui-font);
    }
    .user-box, .leaderboard-box, .username-box, .setup-box {
      width: min(520px,100%); max-height: calc(100dvh - 40px); overflow: auto;
      background: #fff; border-radius: 22px; padding: 25px; direction: rtl; text-align: right;
      box-shadow: 0 24px 80px rgba(17,24,39,.28); font-family: var(--ui-font);
    }
    .leaderboard-box { width: min(720px,100%); padding: 28px 30px 30px; border:1px solid rgba(215,221,229,.9); }
    .modal-head-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
    .modal-head-row h2 { margin:0; font-size:27px; font-family:var(--ui-font); }
    .modal-x {
      width:38px; height:38px; border:1px solid #d8dee6; border-radius:10px;
      background:#fff; color:#4b5563; font: 22px/1 var(--ui-font); cursor:pointer;
    }
    .auth-intro { color:#4e5a67; line-height:1.65; margin:0 0 20px; font-family:var(--ui-font); font-size:14px; font-weight:550; }
    .google-button {
      width:100%; min-height:48px; border:1px solid #cfd6df; border-radius:13px; background:#fff;
      color:#202124; display:flex; align-items:center; justify-content:center; gap:10px;
      font-family:var(--ui-font); font-weight:700; font-size:15px; cursor:pointer;
    }
    .google-button:hover { background:#f7f8f9; }
    .google-g { width:22px; height:22px; flex:0 0 auto; }
    .form-label { display:block; margin-bottom:7px; font-size:13px; font-weight:700; color:#3c4855; }
    .username-input, .leaderboard-select {
      width:100%; min-height:44px; border:1px solid #cfd6df; border-radius:11px; background:#fff;
      padding:9px 11px; color:#17202a; font: 16px var(--ui-font); outline:none;
    }
    .username-input:focus, .leaderboard-select:focus { border-color:#7da5ef; box-shadow:0 0 0 3px rgba(37,99,235,.13); }
    .username-help { min-height:22px; margin-top:6px; color:#697380; font-size:12px; }
    .username-help.good { color:#238151; }
    .username-help.bad { color:#b84444; }
    .modal-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:18px; }
    .modal-actions .primary-button, .modal-actions .ghost-button { min-height:42px; font-family:var(--ui-font); }
    .danger-text-button { border:0; background:transparent; color:#a63f3f; cursor:pointer; padding:8px; font:600 13px var(--ui-font); }
    #profileModal .profile-box { overflow:hidden; padding:0; }
    #profileModal .profile-scroll { max-height:calc(100dvh - 40px); overflow-y:auto; overscroll-behavior:contain; padding:25px; scrollbar-gutter:stable; }
    .profile-hero { display:flex; align-items:center; gap:13px; margin-bottom:18px; }
    .profile-avatar { width:62px; height:62px; border-radius:50%; object-fit:cover; background:#eef2f6; border:1px solid #dce2e9; }
    .profile-name { margin:0; font-size:23px; font-weight:750; }
    .profile-sub { margin:3px 0 0; color:#7a8591; font-size:12px; }
    .profile-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:14px 0 18px; }
    .profile-kpi { background:#f6f8fa; border:1px solid #e1e6eb; border-radius:13px; padding:12px; text-align:center; }
    .profile-kpi strong { display:block; font-size:22px; }
    .profile-kpi span { color:#75808b; font-size:12px; }
    .profile-section-title { margin:18px 0 8px; font-size:15px; font-family:var(--ui-font); font-weight:700; }
    .profile-list { display:flex; flex-direction:column; gap:6px; }
    .profile-list-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:9px 10px; border-radius:10px; background:#f8fafb; font-size:13px; font-family:var(--ui-font) !important; font-weight:500; }
    .profile-list-row span, .profile-list-row strong { font-family:var(--ui-font) !important; }
    .profile-list-row strong { font-weight:700; }
    .profile-list-row .muted { color:#7b8794; }
    .profile-footer-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px solid #edf0f3; }
    .profile-footer-actions .ghost-button, .profile-footer-actions .danger-text-button { font-family:var(--ui-font) !important; font-weight:650; min-height:40px; }
    .empty-state { color:#7b8794; text-align:center; padding:18px 10px; font-size:13px; font-family:var(--ui-font); }

    .leaderboard-controls {
      display:grid; grid-template-columns:minmax(0,1.18fr) minmax(210px,.82fr); gap:14px;
      align-items:end; margin:2px 0 20px; padding:16px; border:1px solid #e1e6eb;
      border-radius:16px; background:#f8fafc;
    }
    .leaderboard-control-group { min-width:0; }
    .leaderboard-controls .form-label { margin-bottom:8px; color:#53606d; font-size:12px; font-weight:700; font-family:var(--ui-font) !important; }
    .leaderboard-select-native { display:none !important; }
    .leaderboard-mode-picker { position:relative; width:100%; }
    .leaderboard-mode-button {
      width:100%; min-height:46px; padding:9px 13px; border:1px solid #cfd6df; border-radius:12px;
      background:#fff; color:#17202a; display:flex; align-items:center; justify-content:space-between;
      gap:12px; direction:rtl; cursor:pointer; text-align:right; font:600 15px/1.35 var(--ui-font) !important;
      transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
    }
    .leaderboard-mode-button:hover { background:#fbfcfd; border-color:#b9c2cc; }
    .leaderboard-mode-button:focus-visible, .leaderboard-mode-button[aria-expanded="true"] { border-color:#7da5ef; box-shadow:0 0 0 3px rgba(37,99,235,.13); outline:none; }
    .leaderboard-mode-chevron { width:12px; height:8px; flex:0 0 auto; color:#6b7682; transition:transform .12s ease; }
    .leaderboard-mode-button[aria-expanded="true"] .leaderboard-mode-chevron { transform:rotate(180deg); }
    .leaderboard-mode-menu {
      position:fixed; z-index:80; max-height:320px; overflow-y:auto;
      padding:5px; border:1px solid #d7dde5; border-radius:12px; background:#fff;
      box-shadow:0 14px 34px rgba(17,24,39,.16); direction:rtl;
    }
    .leaderboard-mode-menu[hidden] { display:none; }
    .leaderboard-mode-option {
      width:100%; min-height:39px; padding:8px 11px; border:0; border-radius:8px; background:transparent;
      color:#273444; display:flex; align-items:center; justify-content:space-between; gap:10px;
      cursor:pointer; text-align:right; font:600 14px/1.35 var(--ui-font) !important;
    }
    .leaderboard-mode-option:hover, .leaderboard-mode-option:focus-visible { background:#f3f6f9; outline:none; }
    .leaderboard-mode-option[aria-selected="true"] { background:#edf3ff; color:#244f9f; }
    .leaderboard-mode-option[aria-selected="true"]::before { content:"✓"; order:2; color:#3569c7; font-weight:800; }

    .leaderboard-filter-card {
      min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:14px;
      padding:8px 13px; border:1px solid #cfd6df; border-radius:12px; background:#fff;
    }
    .leaderboard-filter-label {
      font-family:var(--ui-font) !important; font-size:14px; font-weight:650; color:#273444; white-space:nowrap;
    }
    .leaderboard-toggle { transform:scale(.88); transform-origin:left center; }
    .leaderboard-table-wrap {
      overflow:hidden; border:1px solid #dfe5eb; border-radius:16px; background:#fff;
      box-shadow:0 5px 18px rgba(31,41,55,.045);
    }
    .leaderboard-table {
      width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; direction:rtl;
      font-family:var(--ui-font) !important;
    }
    .leaderboard-table th, .leaderboard-table td {
      height:52px; padding:10px 15px; border-bottom:1px solid #edf0f3; text-align:right;
      font-size:14px; line-height:1.35; font-family:var(--ui-font) !important; color:#24303c;
    }
    .leaderboard-table th {
      height:42px; color:#687583; background:#f4f7f9; font-size:12px; font-weight:700;
    }
    .leaderboard-table tbody tr:last-child td { border-bottom:0; }
    .leaderboard-table tbody tr { background:#fff; transition:background .12s ease; }
    .leaderboard-table tbody tr:hover { background:#fafbfd; }
    .leaderboard-table tr.me td { background:#f4f7ff; }
    .leaderboard-table tr.me td:first-child { box-shadow:inset -3px 0 0 #5b82d8; }
    .leaderboard-rank { width:78px; text-align:center !important; font-variant-numeric:tabular-nums; }
    .leaderboard-nickname { width:auto; }
    .leaderboard-table td:nth-child(2) { font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .leaderboard-score { width:120px; }
    .leaderboard-time { width:105px; }
    .leaderboard-score, .leaderboard-time {
      direction:ltr; text-align:center !important; font-variant-numeric:tabular-nums; font-weight:700;
    }
    .leaderboard-loading {
      text-align:center; padding:32px; color:#6f7a86; font-family:var(--ui-font);
      border:1px dashed #dce2e8; border-radius:14px; background:#fafbfc;
    }
    .rank-number { display:inline-block; min-width:28px; text-align:center; font-weight:700; }
    .rank-medal {
      display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%;
      font-family:var(--ui-font) !important; font-weight:800; font-size:13px; color:#493a16;
      border:2px solid rgba(77,63,34,.18);
      box-shadow:0 2px 6px rgba(31,41,55,.13), inset 0 1px 2px rgba(255,255,255,.78);
    }
    .rank-medal-1 { background:linear-gradient(145deg,#fff7b7,#eabf48); }
    .rank-medal-2 { background:linear-gradient(145deg,#fbfcfd,#c5ccd4); color:#414a55; }
    .rank-medal-3 { background:linear-gradient(145deg,#f3c59f,#ba7444); color:#50301d; }

    .confetti-layer { position:fixed; inset:0; z-index:120; pointer-events:none; overflow:hidden; }
    .confetti-piece { position:absolute; top:-24px; width:10px; height:16px; border-radius:2px; opacity:.96; animation:confettiFall var(--duration) cubic-bezier(.18,.72,.26,1) forwards; }
    .confetti-piece.round { border-radius:50%; width:11px; height:11px; }
    @keyframes confettiFall {
      0% { transform:translate3d(0,-5vh,0) rotate(0deg); opacity:0; }
      10% { opacity:1; }
      100% { transform:translate3d(var(--drift),110vh,0) rotate(var(--spin)); opacity:.92; }
    }

    .toast-stack { position:fixed; left:18px; bottom:18px; z-index:100; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
    .app-toast { max-width:min(380px,calc(100vw - 36px)); background:#17202a; color:#fff; border-radius:12px; padding:11px 14px; box-shadow:0 10px 30px rgba(17,24,39,.22); font:600 13px/1.45 var(--ui-font); direction:rtl; }
    .app-toast.success { background:#1f6c45; }
    .app-toast.error { background:#9b3d3d; }

    .finish-box { width:min(480px,100%); }
    .finish-result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
    .finish-result-card { background:#f6f8fa; border:1px solid #e1e6eb; border-radius:14px; padding:14px; }
    .finish-result-card strong { display:block; font-size:28px; line-height:1; direction:ltr; font-variant-numeric:tabular-nums; }
    .finish-result-card span { display:block; margin-top:6px; color:#77828e; font-size:12px; }
    .finish-mode { color:#5f6975; font-size:13px; font-family:var(--ui-font); }
    .finish-save-status { min-height:22px; margin:10px 0; font-size:13px; color:#697380; font-family:var(--ui-font); }
    .finish-save-status:empty { display:none; }
    .finish-save-status.guest-prompt { display:block; min-height:0; margin:12px 0 14px; font-size:15px; line-height:1.5; font-weight:700; color:#3f4b57; }
    .finish-save-status.success { color:#238151; }
    .finish-save-status.error { color:#b84444; }
    .finish-actions { display:flex; flex-direction:column; gap:9px; }
    .finish-actions button { width:100%; min-height:44px; font-family:var(--ui-font) !important; }
    .finish-actions .ghost-button { font-family:var(--ui-font) !important; font-weight:700; }
    .finish-actions [hidden] { display:none !important; }

    .setup-box code { direction:ltr; display:inline-block; background:#f2f4f7; border-radius:7px; padding:2px 6px; font-size:12px; }
    .setup-box p, .setup-box li { color:#56616d; line-height:1.6; }

    @media (max-width: 820px) {
      .topbar-actions { gap:5px; }
      .top-action-button { min-width:40px; min-height:40px; width:40px; padding:7px; border-radius:11px; }
      .top-action-label { display:none; }
      .new-game-button { min-width:40px; width:40px; padding:7px; }
      .new-game-button > span:last-child { display:none; }
      .account-avatar { width:25px; height:25px; }
      .leaderboard-controls { grid-template-columns:1fr; padding:13px; gap:12px; }
      .leaderboard-box { padding:22px 18px 20px; }
      .leaderboard-table th, .leaderboard-table td { padding:9px 8px; font-size:12px; }
      .leaderboard-rank { width:58px; }
      .leaderboard-score { width:82px; }
      .leaderboard-time { width:74px; }
      .user-box, .leaderboard-box, .username-box, .setup-box { padding:20px; }
      #profileModal .profile-box { padding:0; }
      #profileModal .profile-scroll { max-height:calc(100dvh - 16px); padding:20px; }

      .app-shell { padding: 8px; gap: 8px; }
      .topbar { min-height: 52px; gap: 8px; }
      .brand-logo { height: 50px; max-width: 54vw; }
      .new-game-button { min-height: 40px; padding: 8px 11px; font-size: 13px; gap: 5px; }
      .new-game-icon { font-size: 18px; }
      .new-game-box { padding: 20px; }
      .difficulty-grid { grid-template-columns: 1fr; gap: 8px; }
      .difficulty-option { min-height: 78px; padding: 12px 14px; }
      .game-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
      .quiz-card { padding: 24px 15px 14px; display: flex; flex-direction: column; align-items: center; }
      .quiz-main { min-width: 0; width: 100%; }
      .city-prompt { font-size: clamp(26px,8vw,42px); }
      .emblem-row { height: 82px; margin-top: 8px; }
      .city-emblem-wrap { width: 72px; height: 72px; flex-basis: 72px; border-radius: 12px; }
      .city-emblem { width: 64px; height: 64px; }
      .feedback { margin-top: 8px; min-height: 38px; padding: 8px 10px; }
      .stats-display { margin-top: 10px; gap: 8px; }
      .how-button { margin-top: 14px; }
      .timer-display { font-size: 32px; }
      .city-count-display, .correct-count-display { font-size: 27px; }
      .score-row { gap: 16px; }
      .source-note { display: none; }
    }


    /* ---------- Daily challenge / privacy ---------- */
    .daily-top-button { position:relative; }
    .daily-top-button .daily-dot {
      position:absolute; top:-4px; left:-4px; width:9px; height:9px; border-radius:50%;
      background:#f59e0b; border:2px solid #fff; box-shadow:0 1px 4px rgba(31,41,55,.15);
    }
    .legal-links {
      margin-top:7px; display:flex; justify-content:center; align-items:center; gap:8px;
      flex-wrap:wrap; color:#89939d; font-family:var(--ui-font) !important; font-size:10.5px;
    }
    .legal-links a, .legal-links button {
      color:#7a8591; text-decoration:none; border:0; background:none; padding:2px 0; cursor:pointer;
      font-family:var(--ui-font) !important; font-size:inherit; font-weight:500;
    }
    .legal-links a:hover, .legal-links button:hover { color:#3c4855; text-decoration:underline; }
    .legal-sep { opacity:.45; }

    .daily-box { width:min(530px,100%); }
    .daily-hero {
      display:flex; align-items:center; gap:15px; padding:15px 16px; margin:2px 0 14px;
      border:1px solid #e4e8ed; border-radius:16px; background:linear-gradient(135deg,#fffaf0,#f8fafc);
    }
    .daily-hero-icon {
      width:54px; height:54px; border-radius:15px; display:grid; place-items:center; flex:0 0 auto;
      background:#fff1c7; border:1px solid #f3d987; font-size:28px;
    }
    .daily-hero h3 { margin:0 0 3px; font:700 19px/1.25 var(--ui-font); }
    .daily-date { color:#77828e; font:600 12px/1.4 var(--ui-font); }
    .daily-rules {
      display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:0 0 14px;
    }
    .daily-rule {
      text-align:center; padding:9px 6px; border-radius:11px; background:#f7f9fb; border:1px solid #e6eaee;
      font:600 12px/1.35 var(--ui-font); color:#53606d;
    }
    .daily-status {
      min-height:48px; display:flex; align-items:center; justify-content:center; text-align:center;
      padding:11px 13px; margin-bottom:13px; border-radius:12px; background:#f5f7fa;
      color:#56616d; font:600 13px/1.55 var(--ui-font);
    }
    .daily-status[hidden] { display:none !important; }
    .daily-status.done { background:#f1f8f4; color:#276445; border:1px solid #d7eadf; }
    .daily-actions { display:flex; flex-direction:column; gap:8px; }
    .daily-actions button { width:100%; min-height:44px; font-family:var(--ui-font) !important; }
    .daily-practice-note { color:#7b8794; font:500 11.5px/1.45 var(--ui-font); text-align:center; margin-top:8px; }
    .riddle-top-button { position:relative; }
    .riddle-hero-icon { background:#f2ecff; color:#6941c6; font:800 25px/1 var(--ui-font); }
    .riddle-rule { background:#f7f5ff; border-color:#e7e0ff; color:#5b4a83; }
    .riddle-status.solved { background:#f1f8f4; color:#276445; border:1px solid #d7eadf; }
    .riddle-status.failed { background:#fff7ed; color:#8a5a20; border:1px solid #f2dfc6; }

    .leaderboard-my-position {
      margin-top:12px; min-height:0; font-family:var(--ui-font) !important;
    }
    .my-rank-card {
      display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px;
      border-radius:13px; background:#f3f6fb; border:1px solid #dce4f2; color:#38495c;
      font:600 13px/1.4 var(--ui-font);
    }
    .my-rank-card strong { font-family:var(--ui-font) !important; font-size:15px; color:#23334a; }
    .leaderboard-daily-hint { color:#7b8794; font:500 11px/1.4 var(--ui-font); margin-top:7px; text-align:center; }

    .profile-kpis.phase1 { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .profile-kpis.phase1 .profile-kpi strong { font-size:20px; }
    .profile-footer-actions .delete-account-button { margin-inline-start:auto; color:#a63f3f; }

    .delete-warning {
      padding:13px 14px; border-radius:13px; background:#fff6f6; border:1px solid #f0d2d2;
      color:#7f3535; font:600 13px/1.6 var(--ui-font); margin-bottom:15px;
    }
    .delete-warning strong { font-family:var(--ui-font) !important; }
    .delete-actions { display:flex; gap:9px; justify-content:flex-start; }
    .delete-confirm-button {
      border:0; border-radius:12px; background:#9b3d3d; color:#fff; min-height:42px; padding:9px 15px;
      cursor:pointer; font:700 13px var(--ui-font);
    }
    .delete-confirm-button:disabled { opacity:.55; cursor:wait; }

    .privacy-setting-row {
      display:flex; justify-content:space-between; align-items:center; gap:18px; padding:13px 0;
      border-bottom:1px solid #edf0f3; font-family:var(--ui-font) !important;
    }
    .privacy-setting-row:last-of-type { border-bottom:0; }
    .privacy-setting-copy strong { display:block; font:700 13px/1.35 var(--ui-font); }
    .privacy-setting-copy span { display:block; margin-top:3px; color:#77828e; font:500 11.5px/1.45 var(--ui-font); }
    .privacy-always { color:#28704b; font:700 11.5px var(--ui-font); white-space:nowrap; }
    .privacy-note { margin:12px 0 0; color:#7b8794; font:500 11px/1.5 var(--ui-font); }

    @media (max-width:820px) {
      .daily-rules { grid-template-columns:1fr; }
      .profile-kpis.phase1 { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .profile-footer-actions .delete-account-button { margin-inline-start:0; }
    }


    /* ---------- Phase 2: regional games, sharing, challenges, PWA + mobile ---------- */
    button, input, select, textarea, option { font-family:var(--ui-font) !important; }
    .daily-actions .ghost-button, .daily-actions .primary-button,
    #dailyLeaderboardBtn, #privacyEssentialOnlyBtn {
      font:700 14px/1.35 var(--ui-font) !important;
      letter-spacing:0 !important;
    }
    .my-rank-card, .my-rank-card span, .my-rank-card strong {
      font-family:var(--ui-font) !important; font-synthesis:none;
    }
    .my-rank-card strong { font:700 15px/1.35 var(--ui-font) !important; letter-spacing:0 !important; }

    .regional-games { margin-top:15px; border-top:1px solid #edf0f3; padding-top:13px; }
    .regional-games summary {
      list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:9px 2px; color:#2c3946; font:700 14px/1.35 var(--ui-font); user-select:none;
    }
    .regional-games summary::-webkit-details-marker { display:none; }
    .regional-games summary::after { content:"⌄"; font-size:17px; color:#7b8794; transition:transform .15s ease; margin-inline-start:auto; }
    .regional-games[open] summary::after { transform:rotate(180deg); }
    .regional-games summary small { color:#85909b; font:500 11px/1.3 var(--ui-font); margin-inline-end:auto; }
    .regional-note { margin:0 0 10px; color:#7b8794; font:500 11px/1.45 var(--ui-font); }
    .regional-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .regional-option {
      min-height:58px; border:1px solid #dde3e9; border-radius:12px; background:#fafbfd; color:#2e3a46;
      padding:9px 11px; cursor:pointer; text-align:right; display:flex; align-items:center; justify-content:space-between; gap:10px;
      transition:border-color .12s ease, background .12s ease, transform .12s ease;
      font:700 13px/1.3 var(--ui-font) !important;
    }
    .regional-option:hover { background:#f4f7fa; border-color:#b8c3cf; transform:translateY(-1px); }
    .regional-option small { color:#75818d; font:600 11px/1.2 var(--ui-font); white-space:nowrap; }
    .install-app-button {
      width:100%; margin-top:11px; min-height:39px; border:1px dashed #cbd4de; border-radius:11px; background:#fff;
      color:#53606d; cursor:pointer; font:650 12px/1.3 var(--ui-font) !important;
    }
    .install-app-button:hover { background:#f8fafc; }

    .finish-secondary-actions { display:grid; grid-template-columns:1fr; gap:8px; }
    .finish-secondary-actions button { display:flex; align-items:center; justify-content:center; gap:7px; }
    .finish-secondary-actions button span:first-child { font-size:17px; line-height:1; }
    .challenge-create-cta {
      border-color:#bdcbee !important; background:#f3f6ff !important; color:#234a86 !important;
      box-shadow:0 2px 7px rgba(37,99,235,.06);
    }
    .challenge-create-cta:hover { background:#eaf0ff !important; border-color:#9fb3e4 !important; }

    .challenge-box { width:min(520px,100%); }
    .challenge-hub-note { margin:12px 0 0; color:#7b8794; font:500 11.5px/1.5 var(--ui-font); }
    .challenge-hub-status { margin-top:13px; }
    .challenge-hero {
      display:flex; align-items:center; gap:14px; padding:14px 15px; border:1px solid #e3e8ed; border-radius:15px;
      background:linear-gradient(135deg,#f5f8ff,#fbfcfd); margin-bottom:13px;
    }
    .challenge-icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; flex:0 0 auto; background:#e8eefb; font-size:25px; }
    .battle-title { display:flex; align-items:center; gap:9px; }
    .battle-title-icon { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:#e8eefb; color:#3f5f8f; flex:0 0 auto; }
    .battle-title-icon .battle-mark-svg { width:21px; height:21px; }
    .challenge-icon .battle-mark-svg { width:28px; height:28px; color:#3f5f8f; }
    .challenge-hero strong { display:block; font:700 17px/1.3 var(--ui-font); color:#2a3744; }
    .challenge-hero span { display:block; margin-top:3px; color:#77828e; font:600 12px/1.35 var(--ui-font); }
    .challenge-copy { margin:0 0 13px; color:#5f6c78; font:500 12.5px/1.55 var(--ui-font); }
    .challenge-leaderboard-meta { margin:-5px 0 14px; text-align:center; color:#74808c; font:600 12px/1.4 var(--ui-font); }

    .profile-detail-stats {
      display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:-7px 0 16px;
    }
    .profile-detail-stats > div { padding:9px 8px; border-radius:10px; background:#fafbfc; border:1px solid #e7ebef; text-align:center; }
    .profile-detail-stats span { display:block; color:#7a8591; font:500 10px/1.25 var(--ui-font); }
    .profile-detail-stats strong { display:block; margin-top:3px; color:#334150; font:700 14px/1.2 var(--ui-font); }

    /* ---------- Phase 3: live battles ---------- */
    .battle-setup-box, .battle-lobby-box, .battle-result-box { width:min(560px,100%); }
    .battle-rules-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:12px 0 15px; }
    .battle-rule-pill { padding:9px 7px; border:1px solid #e2e7ec; border-radius:11px; background:#f8fafc; text-align:center; color:#566270; font:650 11px/1.3 var(--ui-font); }
    .battle-form { display:flex; flex-direction:column; gap:11px; margin-top:12px; }
    .battle-field-label { display:flex; flex-direction:column; gap:6px; color:#43505d; font:650 12px/1.35 var(--ui-font); }
    .battle-mode-picker { width:100%; }
    .battle-filter-row { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #e2e7ec; border-radius:12px; padding:10px 12px; background:#fafbfc; }
    .battle-filter-row span { color:#43505d; font:600 13px/1.35 var(--ui-font); }
    .battle-security-note { margin:2px 0 0; color:#7b8794; font:500 11.5px/1.5 var(--ui-font); }
    .battle-lobby-meta { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px; }
    .battle-meta-pill { padding:6px 9px; border-radius:999px; background:#f2f5f8; color:#53606d; font:650 11px/1.2 var(--ui-font); }
    .battle-player-list { display:grid; grid-template-columns:1fr 38px 1fr; align-items:center; gap:8px; margin:14px 0; }
    .battle-player-card { min-width:0; border:1px solid #e1e6eb; border-radius:14px; padding:11px; background:#fff; text-align:center; }
    .battle-player-card.waiting { border-style:dashed; background:#fafbfc; color:#8a949f; }
    .battle-player-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; background:#edf1f5; display:block; margin:0 auto 6px; }
    .battle-player-card strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 13px/1.3 var(--ui-font); }
    .battle-player-card span { display:block; margin-top:2px; color:#7a8591; font:550 10.5px/1.3 var(--ui-font); }
    .battle-player-card .battle-ready-state { margin-top:7px; padding:4px 7px; border-radius:999px; background:#f2f5f8; color:#6d7884; font:650 10px/1.25 var(--ui-font); }
    .battle-player-card .battle-ready-state.ready { background:#edf8f1; color:#2f7650; }
    .battle-vs { text-align:center; color:#65717d; font:750 14px/1 var(--ui-font); }
    .battle-invite-row { display:flex; flex-direction:column; gap:7px; margin-top:12px; direction:rtl; }
    .battle-invite-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; direction:rtl; }
    .battle-invite-actions button { width:100%; min-height:42px; white-space:nowrap; padding:10px 14px; border-radius:12px; font:700 14px/1.35 var(--ui-font) !important; }
    .battle-invite-toggle {
      align-self:center; border:0; background:transparent; color:#6b7784; padding:3px 8px; cursor:pointer;
      font:600 11.5px/1.35 var(--ui-font) !important; text-decoration:underline; text-underline-offset:3px;
    }
    .battle-invite-toggle:hover { color:#334150; }
    .battle-invite-input { width:100%; min-width:0; height:36px; border:1px solid #d8dee5; border-radius:9px; padding:7px 9px; background:#f8fafb; color:#687481; font:500 10.5px/1.2 Arial,sans-serif; direction:ltr; }
    .battle-invite-input[hidden] { display:none; }
    .battle-result-box .modal-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .battle-result-box .modal-actions button { width:100%; min-height:44px; padding:10px 14px; border-radius:12px; font:700 14px/1.35 var(--ui-font) !important; }
    .battle-live-status { margin-top:12px; border-radius:12px; padding:10px 12px; background:#f4f7fb; border:1px solid #e0e6ed; color:#52606d; text-align:center; font:600 12px/1.45 var(--ui-font); }

    .battle-map-hud { position:absolute; z-index:9; top:10px; left:50%; transform:translateX(-50%); width:min(560px,calc(100% - 92px)); pointer-events:none; }
    .battle-map-hud[hidden] { display:none; }
    .battle-hud-card { display:grid; grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr); align-items:center; gap:8px; padding:7px 9px; border:1px solid rgba(214,221,229,.95); border-radius:15px; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 7px 22px rgba(17,24,39,.14); }
    .battle-hud-player { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:7px; min-width:0; direction:rtl; }
    .battle-hud-player.opponent { direction:ltr; }
    .battle-hud-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; background:#edf1f5; }
    .battle-hud-copy { min-width:0; }
    .battle-hud-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#293643; font:700 11.5px/1.2 var(--ui-font); direction:rtl; }
    .battle-hud-copy span { display:block; margin-top:2px; color:#74808c; font:600 9.5px/1.2 var(--ui-font); direction:rtl; }
    .battle-hud-score { min-width:31px; text-align:center; color:#1f6c45; font:750 16px/1 var(--ui-font); direction:ltr; }
    .battle-hud-swords { display:grid; place-items:center; color:#4e5b68; }
    .battle-hud-swords .battle-mark-svg { width:20px; height:20px; }
    .battle-connection-notice { margin:5px auto 0; width:max-content; max-width:100%; padding:5px 9px; border-radius:999px; background:rgba(254,242,242,.96); border:1px solid #f1caca; color:#9a3e3e; font:650 10.5px/1.25 var(--ui-font); text-align:center; }
    .battle-connection-notice[hidden] { display:none; }
    .timer-display.battle-danger { color:#b64040; }

    .battle-countdown-overlay { position:fixed; inset:0; z-index:70; display:grid; place-items:center; background:rgba(17,24,39,.25); pointer-events:none; }
    .battle-countdown-overlay[hidden] { display:none; }
    .battle-countdown-card { min-width:170px; padding:22px 28px; border-radius:22px; background:rgba(255,255,255,.97); box-shadow:0 22px 70px rgba(17,24,39,.26); text-align:center; }
    .battle-countdown-card span { display:block; color:#6d7884; font:650 12px/1.3 var(--ui-font); }
    .battle-countdown-card strong { display:block; margin-top:5px; color:#1d2935; font:800 54px/1 var(--ui-font); font-variant-numeric:tabular-nums; }

    .battle-wait-score { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0; }
    .battle-wait-score > div { padding:12px; border:1px solid #e2e7ec; border-radius:13px; background:#f8fafc; text-align:center; }
    .battle-wait-score strong { display:block; font:750 22px/1.1 var(--ui-font); }
    .battle-wait-score span { display:block; margin-top:4px; color:#78838f; font:550 10.5px/1.3 var(--ui-font); }
    .battle-result-title { text-align:center; margin:2px 0 4px; font:750 28px/1.2 var(--ui-font); }
    .battle-result-sub { text-align:center; margin:0 0 14px; color:#6e7a86; font:550 12px/1.4 var(--ui-font); }
    .battle-result-players { display:grid; grid-template-columns:1fr 34px 1fr; align-items:stretch; gap:8px; }
    .battle-result-player { border:1px solid #e1e6eb; border-radius:14px; padding:12px 9px; text-align:center; background:#fafbfc; min-width:0; }
    .battle-result-player.winner { border-color:#bfdccb; background:#f1f8f4; }
    .battle-result-player .battle-player-avatar { width:46px; height:46px; }
    .battle-result-player strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 13px/1.3 var(--ui-font); }
    .battle-result-player .battle-result-score { display:block; margin-top:8px; color:#24313e; font:800 25px/1 var(--ui-font); direction:ltr; }
    .battle-result-player small { display:block; margin-top:5px; color:#73808c; font:550 10.5px/1.25 var(--ui-font); }

    .battle-profile-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:0 0 10px; }
    .battle-profile-stat { padding:9px 7px; border-radius:10px; background:#f8fafb; border:1px solid #e5e9ed; text-align:center; }
    .battle-profile-stat strong { display:block; color:#334150; font:750 16px/1.15 var(--ui-font); }
    .battle-profile-stat span { display:block; margin-top:3px; color:#7a8591; font:500 9.5px/1.25 var(--ui-font); }
    .battle-history-outcome { font-weight:700; }
    .battle-history-outcome.win { color:#237348; }
    .battle-history-outcome.loss { color:#a14545; }
    .battle-history-outcome.tie { color:#6d7884; }

    @media (max-width:820px) {
      /* The map remains the primary experience. The question becomes a compact bottom sheet. */
      .app-shell { padding:6px; gap:6px; }
      .topbar { min-height:46px; height:46px; padding:0 2px; }
      .brand-logo { height:45px; max-width:48vw; }
      .game-layout { display:block; position:relative; min-height:0; }
      .map-card { position:absolute; inset:0; border-radius:17px; }
      .quiz-card {
        position:absolute; z-index:12; left:7px; right:7px; bottom:max(7px,env(safe-area-inset-bottom));
        width:auto; min-height:0; padding:10px 11px; border-radius:17px; overflow:visible;
        display:grid; grid-template-columns:minmax(0,1fr) 92px; grid-template-areas:"main stats" "how stats";
        align-items:center; column-gap:10px; text-align:right;
        background:rgba(255,255,255,.965); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
        box-shadow:0 12px 35px rgba(17,24,39,.20);
      }
      .quiz-main {
        grid-area:main; display:grid; grid-template-columns:minmax(0,1fr) 52px;
        grid-template-areas:"eyebrow emblem" "prompt emblem" "feedback feedback";
        column-gap:8px; align-items:center; text-align:right;
      }
      .eyebrow { grid-area:eyebrow; margin:0 0 2px; font-size:10.5px; text-align:right; }
      .prompt-row { grid-area:prompt; text-align:right; }
      .city-prompt { font-size:clamp(23px,7vw,34px); line-height:1.03; letter-spacing:-.025em; text-align:right; }
      .emblem-row { grid-area:emblem; height:52px; margin:0; }
      .city-emblem-wrap { width:49px; height:49px; flex-basis:49px; border-radius:10px; }
      .city-emblem { width:43px; height:43px; }
      .feedback { grid-area:feedback; min-height:29px; margin:6px 0 0; padding:5px 7px; font-size:11px; line-height:1.3; text-align:right; }
      .feedback:empty { background:var(--neutral); }
      .stats-display {
        grid-area:stats; align-self:stretch; margin:0; width:92px; padding-inline-start:9px; border-inline-start:1px solid #e7ebef;
        gap:6px; justify-content:center;
      }
      .timer-display { font-size:22px; }
      .city-count-display, .correct-count-display { font-size:17px; }
      .score-row { gap:8px; flex-direction:column; align-items:center; }
      .restart-panel-button { margin-top:1px; min-height:30px; padding:5px 7px; font-size:0; border-radius:9px; }
      .restart-panel-button .restart-icon { font-size:17px; }
      .how-button { grid-area:how; justify-self:start; margin:5px 0 0; padding:5px 8px; min-height:28px; font-size:10.5px; gap:5px; }
      .how-icon { width:16px; height:16px; font-size:10px; }
      .legal-links { display:none; }
      .maplibregl-ctrl-bottom-right { bottom:145px; }
      .maplibregl-ctrl-bottom-left { bottom:145px; }

      .new-game-modal, .user-modal, .leaderboard-modal, .username-modal, .setup-modal, .finish-modal, .how-modal { padding:8px; }
      .new-game-box, .user-box, .leaderboard-box, .username-box, .setup-box, .finish-box, .how-box {
        max-height:calc(100dvh - 16px); overflow:auto; border-radius:18px; padding:18px 16px;
      }
      .regional-grid { grid-template-columns:1fr; }
      .finish-secondary-actions { grid-template-columns:1fr; }
      .profile-detail-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
      .battle-profile-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .battle-map-hud { top:5px; width:calc(100% - 16px); }
      .battle-hud-card { grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr); gap:4px; padding:5px 6px; border-radius:13px; }
      .battle-hud-player { grid-template-columns:27px minmax(0,1fr) auto; gap:4px; }
      .battle-hud-avatar { width:27px; height:27px; }
      .battle-hud-copy strong { font-size:10px; }
      .battle-hud-copy span { font-size:8.5px; }
      .battle-hud-score { font-size:13px; min-width:25px; }
      .battle-rules-strip { grid-template-columns:1fr; }
      .battle-result-box .modal-actions { grid-template-columns:1fr; }
      .leaderboard-table-wrap { overflow-x:auto; }
    }

    @media (max-width:430px) {
      .quiz-card { grid-template-columns:minmax(0,1fr) 82px; column-gap:7px; }
      .stats-display { width:82px; padding-inline-start:7px; }
      .city-prompt { font-size:clamp(21px,7.3vw,31px); }
      .topbar-actions { gap:3px; }
      .top-action-button, .new-game-button { width:34px; min-width:34px; min-height:36px; padding:6px; }
      .brand-logo { max-width:38vw; height:42px; }
    }