/* ═══════════════════════════════════════════════════════════════════════
   Mognota theme — light mode for the MAIN pages.

   Dark is the default and is simply the pages' own styles (nothing here
   applies). Light is switched on by theme.js setting <html data-theme="light">.

   1. The shared colour variables (every page reads these).
   2. The shell every main page copies: top bar + left sidebar.
   3. Hub / sign-in / modal pieces.
   Game pages do not load this file.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Variables ─────────────────────────────────────── */
html[data-theme="light"]{
  --bg:#f3f5fb;
  --bg2:#ffffff;
  --surface:rgba(255,255,255,.98);
  --border:rgba(30,40,80,.14);
  --text:#14182b;
  --text-dim:#5b6580;
  --gold-text:#9a6200;
  --gold-light:#9a6200;   /* used as TEXT colour on the pages; the pale gold is unreadable on white */
}

/* ── 2. Shell: top bar + sidebar ───────────────────────── */
html[data-theme="light"] .top-nav{background:rgba(255,255,255,.9);border-bottom-color:var(--border)}
html[data-theme="light"] .hub-sidebar{
  background:rgba(255,255,255,.98);border-right-color:rgba(30,40,80,.1);
  box-shadow:2px 0 24px rgba(30,40,80,.08);
}
html[data-theme="light"] .sb-logo{border-bottom-color:rgba(30,40,80,.1)}
html[data-theme="light"] .sb-logo-name{color:var(--text)}
html[data-theme="light"] .sb-nav-item:hover{background:rgba(30,40,80,.05)}
html[data-theme="light"] .sb-nav-item.active{background:rgba(244,124,0,.1);border-color:rgba(244,124,0,.28)}
html[data-theme="light"] .sb-nav-icon{background:rgba(30,40,80,.05);box-shadow:none}
html[data-theme="light"] .sb-nav-item:hover .sb-nav-icon{background:rgba(30,40,80,.09)}
html[data-theme="light"] .sb-nav-item.active .sb-nav-icon{background:rgba(244,124,0,.18);color:#d96f00;box-shadow:none}
html[data-theme="light"] .sb-divider{background:rgba(30,40,80,.12)}
html[data-theme="light"] .sb-online-dot{background:#16a34a}
html[data-theme="light"] .sb-online-num{color:var(--text)}
html[data-theme="light"] .sb-online-lbl{color:var(--text-dim)}
html[data-theme="light"] .nav-av{background:rgba(30,40,80,.06)}
html[data-theme="light"] .nav-friends-btn,
html[data-theme="light"] .nav-bell-btn{background:rgba(30,40,80,.06)}
html[data-theme="light"] .nav-friends-btn:hover,
html[data-theme="light"] .nav-bell-btn:hover{background:rgba(30,40,80,.11)}
html[data-theme="light"] .nav-login-btn:hover{border-color:rgba(30,40,80,.4)}
html[data-theme="light"] #nav-level-badge{background:rgba(30,40,80,.06)!important;border-color:rgba(30,40,80,.22)!important;color:var(--text)!important}

/* ── 3a. Sign-in screen (index.html) ───────────────────── */
html[data-theme="light"] .reg-card{box-shadow:0 12px 40px rgba(30,40,80,.14),0 0 0 1px rgba(30,40,80,.04)}
html[data-theme="light"] .avatar-ring{background:rgba(30,40,80,.04)}
html[data-theme="light"] .field input,
html[data-theme="light"] .room-row input{background:#fff;border-color:rgba(30,40,80,.2)}
html[data-theme="light"] .field input::placeholder,
html[data-theme="light"] .room-row input::placeholder{color:#9aa3bd}
html[data-theme="light"] .google-btn{background:#fff;border-color:rgba(30,40,80,.16)}
html[data-theme="light"] .google-btn:hover{background:#f6f8fc;border-color:rgba(30,40,80,.28)}
html[data-theme="light"] .guest-btn{border-color:rgba(30,40,80,.25)}
html[data-theme="light"] .guest-btn:hover{background:rgba(30,40,80,.05);border-color:rgba(30,40,80,.4)}
html[data-theme="light"] .check-badge.checking{background:rgba(30,40,80,.06);border-color:rgba(30,40,80,.2)}
html[data-theme="light"] .check-badge.idle{border-color:rgba(30,40,80,.08)}
html[data-theme="light"] .name-status.ok{color:#15803d}
html[data-theme="light"] .name-status.err{color:#c0392b}

/* ── 3b. Modals, menus and small pieces (index.html) ───── */
html[data-theme="light"] .modal-box{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 24px 70px rgba(20,24,43,.35)}
html[data-theme="light"] .col-opt:hover{background:rgba(30,40,80,.05)}
html[data-theme="light"] .col-opt.sel{background:rgba(30,40,80,.08)}
html[data-theme="light"] .team-display{background:rgba(30,40,80,.04);border-color:rgba(30,40,80,.1)}
html[data-theme="light"] .modal-cancel{background:rgba(30,40,80,.05);border-color:rgba(30,40,80,.15)}
html[data-theme="light"] .modal-cancel:hover{background:rgba(30,40,80,.1)}
html[data-theme="light"] .custom-choice-menu{background:rgba(255,255,255,.99);box-shadow:0 10px 30px rgba(30,40,80,.25)}
html[data-theme="light"] .custom-choice-menu button,
html[data-theme="light"] .btn-play,
html[data-theme="light"] .btn-join{background:#eef1f8;box-shadow:none;border-color:rgba(30,40,80,.14);color:var(--text)}
html[data-theme="light"] .custom-choice-menu button:hover,
html[data-theme="light"] .btn-play:hover,
html[data-theme="light"] .btn-join:hover{background:#e2e7f3}
html[data-theme="light"] .profile-stats-row{background:rgba(30,40,80,.04);box-shadow:none}
html[data-theme="light"] .profile-edit-btn{background:#eef1f8;box-shadow:none;color:var(--text)}
html[data-theme="light"] .profile-edit-btn:hover{background:#e2e7f3}
html[data-theme="light"] .signout-btn{background:rgba(192,57,43,.08);box-shadow:none}

/* These stay dark by design (they float over the page like a game screen /
   toast), so give them the dark text colours back. */
html[data-theme="light"] .mm-overlay,
html[data-theme="light"] #toast,
html[data-theme="light"] #invite-notif{
  --text:#e8e8ec;--text-dim:#7080a0;--border:rgba(180,140,50,.22);--gold-light:#ffe680;
}

/* ── 3c. Settings page ─────────────────────────────────── */
html[data-theme="light"] body.page-settings .card{
  border-color:rgba(30,40,80,.12);
  box-shadow:0 4px 0 rgba(30,40,80,.08),0 10px 28px rgba(30,40,80,.06);
}
html[data-theme="light"] body.page-settings .card-title{border-bottom-color:rgba(30,40,80,.1)}
html[data-theme="light"] body.page-settings .field input,
html[data-theme="light"] body.page-settings .field select{background:#fff;border-color:rgba(30,40,80,.2)}
html[data-theme="light"] body.page-settings .field select option{background:#fff;color:var(--text)}
html[data-theme="light"] body.page-settings .bot-diff-btn{background:#fff;border-color:rgba(30,40,80,.16)}
html[data-theme="light"] body.page-settings .bot-diff-btn:hover{background:#f1f4fb;color:var(--text)}
html[data-theme="light"] body.page-settings .bot-diff-btn.active{background:rgba(41,121,255,.1);border-color:#2979ff;box-shadow:0 0 12px rgba(41,121,255,.16)}
html[data-theme="light"] body.page-settings .account-row{background:rgba(30,40,80,.04);border-color:rgba(30,40,80,.12)}
html[data-theme="light"] body.page-settings .name-status.ok{color:#15803d}
html[data-theme="light"] body.page-settings .name-status.err{color:#c0392b}
html[data-theme="light"] body.page-settings .avatar-ring-inner{background:#fff}

/* ── 4. Shared tags, pills and accent text (pale-on-dark → readable on light) ── */
html[data-theme="light"] .tag-team{background-color:rgba(41,121,255,.1);border-color:rgba(41,121,255,.3);color:#1d4ed8}
html[data-theme="light"] .tag-live{background-color:rgba(244,124,0,.12);border-color:rgba(244,124,0,.35);color:#c2410c}
html[data-theme="light"] .tag-words{background-color:rgba(147,51,234,.1);border-color:rgba(147,51,234,.3);color:#7e22ce}
html[data-theme="light"] .tag-logic{background-color:rgba(0,160,70,.1);border-color:rgba(0,160,70,.3);color:#15803d}
html[data-theme="light"] .tag-strategy{background-color:rgba(30,40,80,.06);border-color:rgba(30,40,80,.18);color:#475569}
html[data-theme="light"] .tag-ffa{background-color:rgba(202,138,4,.12);border-color:rgba(202,138,4,.35);color:#a16207}
html[data-theme="light"] .gcr-win{color:#15803d;background-color:rgba(0,160,70,.1);border-color:rgba(0,160,70,.28)}
html[data-theme="light"] .gcr-loss{color:#c2410c;background-color:rgba(244,124,0,.1);border-color:rgba(244,124,0,.28)}
html[data-theme="light"] .gcr-speed{color:#a16207;background-color:rgba(212,160,23,.12);border-color:rgba(212,160,23,.3)}
html[data-theme="light"] .gcr-value,
html[data-theme="light"] .gg-info .val{color:#3b4158}
html[data-theme="light"] .name-status.err{color:#c0392b}
html[data-theme="light"] .name-status.ok{color:#15803d}

/* ── 5. Small page-specific colour fixes ───────────────── */
html[data-theme="light"] body.page-learn-more .lm-streak-chip .xp{color:#9a6200}
html[data-theme="light"] body.page-friends .fa-btn.chat{color:#1d4ed8}
html[data-theme="light"] body.page-friends .fa-btn.chat:hover:not(:disabled){color:#1e40af}
html[data-theme="light"] body.page-profile #pub-banner{color:#1d5aa8}
html[data-theme="light"] body.page-support .stat-chip.replied,
html[data-theme="light"] body.page-support .reply-status.replied{color:#15803d}
html[data-theme="light"] body.page-support .stat-chip.pending,
html[data-theme="light"] body.page-support .report-badge.player{color:#c2410c}
html[data-theme="light"] body.page-support .report-badge.other{color:#475569}
html[data-theme="light"] body.page-league .sr-rank.gold{color:#b8860b}
html[data-theme="light"] body.page-league .sr-rank.silver{color:#8a8f99}