/* ============================================================
   SOUL GAMES — "Celestial Drift" UI  ·  floating, dark, blurred
   ============================================================
   Fully floating lobby: circular character dial on the left,
   transparent blurred cards on the right, NO outer box.
   Load AFTER your other stylesheets.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --s0:#0c1018; --s1:#141a24; --s2:#1b222e;
  --t0:#eef1f6; --t1:#aab3c2; --t2:#7a8394; --t3:#535b69;
  --hair:rgba(255,255,255,0.08); --hair2:rgba(255,255,255,0.045);
  --acc:#aec6b6; --acc-2:#9bbbce;                 /* sage + soft sky, dual celestial accents */
  --acc-soft:rgba(174,198,182,0.12); --acc-line:rgba(174,198,182,0.30); --acc-glow:rgba(174,198,182,0.38);
  --sky-soft:rgba(155,187,206,0.12); --sky-line:rgba(155,187,206,0.3);
  --live:#5fd07a; --danger:#d4674a;
  --disp:'Cinzel',serif; --body:'IBM Plex Sans',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --card:linear-gradient(180deg,rgba(20,26,36,0.72),rgba(12,16,24,0.80));
  --card-blur:blur(22px) saturate(1.15);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.45);
}

body{font-family:var(--body)}

/* ============================================================
   SHELL — full-bleed, transparent. No box. Just a stage.
   ============================================================ */
#codex-shell{
  position:fixed; inset:0; z-index:1000; display:block;
  background:transparent; border:none; box-shadow:none; border-radius:0;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:opacity .4s ease;
  pointer-events:none;                /* let clicks pass except on actual controls */
}
#codex-shell > *{ pointer-events:auto; }
body.cg-min #codex-shell{ opacity:0; pointer-events:none; }
body.cg-min #cg-dim{ opacity:0; pointer-events:none; }

/* subtle dim so floating UI reads against the bright sky, world still visible */
#cg-dim{
  position:fixed; inset:0; z-index:999;
  background:radial-gradient(120% 90% at 50% 50%, rgba(12,16,24,0.28), rgba(12,16,24,0.52));
  backdrop-filter:blur(3px) saturate(1.05); -webkit-backdrop-filter:blur(3px) saturate(1.05);
  transition:opacity .45s ease; pointer-events:none;
}

/* ---- floating icon rail (left edge, vertically centered) ---- */
.codex-rail{
  position:fixed; top:50%; left:26px; transform:translateY(-50%); z-index:1010;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:10px 8px; border-radius:14px;
  background:var(--card); backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur);
  border:1px solid var(--hair); box-shadow:var(--card-shadow);
}
body.cg-min .codex-rail{ opacity:0; pointer-events:none; transition:opacity .3s; }
.codex-rail .cr-logo{ width:30px; height:30px; border-radius:9px; background:var(--acc-soft); border:1px solid var(--acc-line); display:grid; place-items:center; margin-bottom:6px; }
.codex-rail .cr-logo i{ width:9px; height:9px; background:var(--acc); transform:rotate(45deg); display:block; }
.cr-tab{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; cursor:pointer; color:var(--t3); border:1px solid transparent; transition:.16s; font-size:14px; }
.cr-tab:hover{ color:var(--t1); background:rgba(255,255,255,0.04); }
.cr-tab.on{ color:var(--acc); background:var(--acc-soft); border-color:var(--acc-line); }
.cr-tab.bottom{ margin-top:4px; }

/* ---- top-right ✕ REMOVED (item 3) — the labeled "Close Codex" button is the only one now ---- */
.codex-close{ display:none !important; }

/* ============================================================
   SIDE PANEL → the floating stage. Two zones, no box.
   ============================================================ */
#side-panel{
  position:fixed !important; inset:0 !important; width:auto !important; height:auto !important;
  background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:none !important; box-shadow:none !important; border-radius:0 !important;
  display:block; padding:0; overflow:visible !important; z-index:1001 !important;
  pointer-events:none !important;            /* full-screen stage must NOT block the world */
}
/* re-enable interaction only on the actual floating pieces */
#side-panel .cg-col, #side-panel .cg-card, #side-panel #character-selector,
#side-panel .char-nav-btn, #side-panel #game-modes-container, #side-panel #queue-status,
#side-panel input, #side-panel button, #side-panel #help-controls,
#side-panel #game-controls{ pointer-events:auto; }

/* when minimized, kill ALL interaction in the panel so the lobby is fully usable */
body.cg-min #side-panel{ pointer-events:none !important; }
body.cg-min #side-panel *{ pointer-events:none !important; }

/* lobby-controls becomes a full-screen two-zone layout */
#lobby-controls.panel-section{
  position:fixed; inset:0; display:block; padding:0; background:transparent; border:none; box-shadow:none;
  pointer-events:none;            /* stage passes through; children opt back in above */
}

/* LEFT ZONE → now CENTER. The circular character dial is the centerpiece. */
.cg-col-left{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:340px; display:flex; flex-direction:column; align-items:center; padding:0;
}
.cg-col-left .name-input-section{ display:none; } /* name moves to the right cards */

.cg-col-left .section-title{ display:none; } /* dial speaks for itself */

/* the circular dial — LOCKED dimensions so nothing reflows the arrows */
#character-selector{
  position:relative; width:300px !important; height:300px !important;
  min-width:300px; min-height:300px; max-width:300px; max-height:300px;
  display:flex; align-items:center; justify-content:center; margin:0 auto; flex:0 0 auto;
}
#character-selector::before{
  content:''; position:absolute; inset:0; border-radius:50%; border:1px solid var(--hair);
  background:radial-gradient(circle at 50% 38%, var(--acc-soft), transparent 62%);
}
#character-selector::after{
  content:''; position:absolute; inset:20px; border-radius:50%; border:1px dashed rgba(174,198,182,0.22);
}
.char-preview-container{
  position:relative; z-index:2; width:200px !important; height:200px !important; min-height:0 !important; max-height:none !important;
  border-radius:50% !important; overflow:hidden;
  background:radial-gradient(circle at 50% 32%, rgba(155,187,206,0.14), rgba(12,16,24,0.55)) !important;
  border:1px solid var(--acc-line) !important;
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0;
  box-shadow:0 0 40px var(--acc-glow), inset 0 0 30px rgba(0,0,0,0.4);
}
.char-preview-container #char-preview, .char-preview-container canvas{
  width:100% !important; height:100% !important; border-radius:50%;
}
.char-name{
  position:absolute; bottom:-44px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font:600 15px/1 var(--disp); letter-spacing:2px; color:var(--acc-2); text-shadow:0 0 18px rgba(155,187,206,0.4);
}
/* nav arrows — anchored to the VIEWPORT center (not the column), so nothing
   the column does (canvas load, reflow) can ever move them vertically.
   The dial sits at viewport center, so arrows sit at 50% ± the ring radius. */
.char-nav-btn{
  position:fixed; top:50%; z-index:1002;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--hair);
  background:var(--card); backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur);
  color:var(--t1); cursor:pointer; display:grid; place-items:center; font-size:14px; transition:.16s;
  box-shadow:var(--card-shadow); pointer-events:auto;
}
/* dial is 300px wide, centered on screen → its edges are 150px from center.
   place arrows just outside the ring: center ∓ ~156px */
#char-prev{ left:calc(50% - 156px); transform:translate(-50%, -50%); }
#char-next{ left:calc(50% + 156px); transform:translate(-50%, -50%); }
.char-nav-btn:hover{ color:var(--acc); border-color:var(--acc-line); }
/* hide arrows when codex is minimized (they're position:fixed so need explicit rule) */
body.cg-min .char-nav-btn{ opacity:0; pointer-events:none; transition:opacity .3s; }
body.cg-loading .char-nav-btn{ opacity:0 !important; pointer-events:none !important; }
/* dots under the dial */
.char-dots{ position:absolute; bottom:-74px; left:50%; transform:translateX(-50%); display:flex; gap:5px; flex-wrap:wrap; justify-content:center; max-width:220px; }
.char-dot{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.18); transition:.2s; cursor:pointer; }
.char-dot.active{ background:var(--acc); transform:scale(1.4); box-shadow:0 0 6px var(--acc-glow); }

/* RIGHT ZONE — floating cards stack, right side, vertically centered */
.cg-col-right{
  position:fixed; right:max(4vw,40px); top:50%; transform:translateY(-50%);
  width:340px; display:flex; flex-direction:column; gap:14px; padding:0;
}

/* labeled "Close Codex" button — flows as the last item in the right column,
   same 14px gap as between the name and arena cards */
.cg-close-codex{
  width:100%; z-index:1005; margin-top:0;
  padding:14px; border-radius:12px; cursor:pointer;
  font:600 11px/1 var(--disp); letter-spacing:2px; color:var(--t1);
  background:var(--card); backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur);
  border:1px solid var(--hair); box-shadow:var(--card-shadow); transition:.16s;
}
.cg-close-codex:hover{ color:var(--t0); border-color:var(--acc-line); background:rgba(255,255,255,0.06); }
body.cg-min .cg-close-codex{ display:none; }
.cg-col-right .section-title{
  font:600 9.5px/1 var(--disp); letter-spacing:1.8px; text-transform:uppercase; color:var(--acc);
  display:flex; align-items:center; gap:9px; margin:0 0 13px; white-space:nowrap;
}
.cg-col-right .section-title::after{ content:''; flex:1 1 auto; height:1px; min-width:14px; background:linear-gradient(90deg,var(--acc-line),transparent); }

/* floating card base — applied to the name wrap, mode container */
.cg-card{
  background:var(--card); backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur);
  border:1px solid var(--hair); border-radius:14px; box-shadow:var(--card-shadow); padding:18px;
}

/* name input lives in a floating card (we re-show it here via JS-free move) */
.cg-name-card{ /* wrapper added in HTML */ }
.input-label, label.fld{ display:block; font:500 9px/1 var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--t2); margin-bottom:8px; }
#character-name-input{
  width:100%; padding:12px 14px; background:rgba(255,255,255,0.04); border:1px solid var(--hair); border-radius:9px;
  color:var(--t0); font:400 14px/1 var(--body); transition:.18s;
}
#character-name-input::placeholder{ color:var(--t3); }
#character-name-input:focus{ outline:none; border-color:var(--acc-line); background:rgba(255,255,255,0.06); box-shadow:0 0 0 3px var(--acc-soft); }

/* game mode container becomes a floating card */
#game-modes-container{ display:flex; flex-direction:column; gap:10px; }
.game-mode-card{
  border:1px solid var(--acc-line); border-radius:12px; padding:15px; cursor:pointer;
  background:linear-gradient(180deg,var(--acc-soft),transparent); transition:.16s;
}
.game-mode-card:hover{ background:linear-gradient(180deg,rgba(174,198,182,0.18),transparent); transform:translateY(-1px); }
.game-mode-card.selected, .game-mode-card.active{ border-color:var(--acc); box-shadow:0 0 0 1px var(--acc-line) inset; }
.mode-header{ display:flex; align-items:center; gap:12px; }
.mode-icon{ width:34px; height:34px; flex-shrink:0; border-radius:9px; background:var(--acc-soft); border:1px solid var(--acc-line); display:grid; place-items:center; }
.mode-icon svg{ width:17px; height:17px; fill:var(--acc); }
.mode-info{ flex:1; min-width:0; }
.mode-name{ font:600 15px/1.2 var(--disp); letter-spacing:.5px; color:var(--t0); }
.mode-description{ font:400 11px/1.3 var(--body); color:var(--t2); margin-top:3px; }
.mode-fee{ font:500 15px/1 var(--mono); color:var(--acc); white-space:nowrap; }
.mode-lobby-info{ margin-top:14px; padding-top:13px; border-top:1px solid var(--hair2); }
.mode-stats{ display:flex; justify-content:space-between; gap:8px; }
.mode-stat{ font-size:11px; color:var(--t2); }
.mode-stat .stat-text{ color:var(--t1); font-family:var(--mono); }
.timer-stat .stat-text{ color:var(--t2); }
.mode-prize-row{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding:11px 14px; background:rgba(255,255,255,0.03); border:1px solid var(--hair); border-radius:9px; }
.mode-prize-label{ font:500 9px/1 var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--t2); }
.mode-prize-value{ font:500 16px/1 var(--mono); color:var(--acc); }
.mode-live-game{ display:flex; align-items:center; gap:8px; margin-top:11px; padding-top:11px; border-top:1px solid var(--hair2); font-size:11px; color:var(--t2); }
.live-indicator{ width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 8px var(--live); animation:cg-pulse 1.7s infinite; }
@keyframes cg-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.live-next{ margin-left:auto; color:var(--t3); }

/* queue status card */
.queued-banner{ display:flex; align-items:center; gap:11px; padding:12px; margin-bottom:10px; background:var(--acc-soft); border:1px solid var(--acc-line); border-radius:10px; }
.queued-icon{ width:26px; height:26px; display:grid; place-items:center; background:rgba(95,208,122,0.18); border-radius:50%; color:var(--live); font-size:14px; }
.queued-title{ font:600 12px/1 var(--disp); letter-spacing:2px; color:var(--acc); }
.queued-mode{ font-size:12px; color:var(--t2); margin-top:2px; }
.leave-queue-btn{ margin-left:auto; background:rgba(212,103,74,0.12); border:1px solid rgba(212,103,74,0.3); border-radius:7px; color:var(--danger); width:28px; height:28px; cursor:pointer; transition:.16s; }
.leave-queue-btn:hover{ background:rgba(212,103,74,0.2); }
.queue-details{ display:flex; flex-direction:column; gap:1px; }
.queue-detail-item{ display:flex; align-items:center; justify-content:space-between; padding:9px 11px; background:rgba(255,255,255,0.03); border-radius:7px; }
.queue-detail-item.highlight{ background:var(--acc-soft); }
.queue-label{ font:500 9px/1 var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--t2); }
.queue-value{ font:500 13px/1 var(--mono); color:var(--t0); }
.queue-value.gold{ color:var(--acc); }
.queue-value.timer{ color:var(--t2); }

/* help section REMOVED from the lobby stage — these links live in the rail.
   (kept hidden rather than deleted so the buttons still exist for the rail to click) */
#help-controls{ display:none !important; }
.secondary{ width:100%; padding:10px 14px; font:500 12px/1 var(--body); letter-spacing:.3px; color:var(--t1); background:rgba(255,255,255,0.03); border:1px solid var(--hair); border-radius:9px; cursor:pointer; transition:.16s; text-align:center; }
.secondary:hover{ color:var(--acc); border-color:var(--acc-line); background:var(--acc-soft); }

/* primary + enter button */
.primary, #join-game-btn{
  width:100%; padding:15px; border:none; border-radius:10px; cursor:pointer;
  font:600 13px/1 var(--disp); letter-spacing:2.5px; color:var(--s0);
  background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 70%, #000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 26px var(--acc-glow); transition:.14s;
}
.primary:hover, #join-game-btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.primary:active{ transform:translateY(0); }

/* season timers (game-controls) — floats right like lobby */
#game-controls.panel-section{ position:fixed; right:max(4vw,40px); top:50%; transform:translateY(-50%); width:340px; padding:0; background:transparent; border:none; box-shadow:none; display:flex; flex-direction:column; gap:14px; }
.timer-display{ display:flex; gap:8px; }
.timer-item{ flex:1; display:flex; flex-direction:column; gap:5px; padding:11px 13px; background:var(--card); backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur); border:1px solid var(--hair); border-radius:11px; box-shadow:var(--card-shadow); }
.timer-label{ font:500 9px/1 var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--t2); }
.timer-value{ font:500 17px/1 var(--mono); color:var(--acc); }

/* ============================================================
   TOP BAR — REMOVED (item 3). Only the CA floats, center-top.
   Settings + X + Wallet move INSIDE the codex.
   ============================================================ */
#top-bar{
  position:fixed; top:0; left:0; right:0; height:auto; z-index:1300;
  background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:none !important; box-shadow:none !important; padding:0 !important;
  display:block !important; pointer-events:none;
}
#top-bar > *{ pointer-events:auto; }

/* hide the wordmark + phase/status cluster */
#game-title, #stats-container .phase-indicator, #stats-container .stat-box{ display:none !important; }

/* CA now lives inside the welcome message (item 3) — hide the floating one */
#token-display{ display:none !important; }

/* wallet reconnect prompt — moved to BOTTOM so it never collides with the CA,
   and restyled to match the celestial theme */
#reconnect-prompt{
  top:auto !important; bottom:80px !important; left:50% !important; transform:translateX(-50%) !important;
  background:var(--card) !important; backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur);
  border:1px solid var(--acc-line) !important; border-radius:12px !important;
  box-shadow:var(--card-shadow), 0 0 20px var(--acc-glow) !important; color:var(--t0) !important;
  font:600 12px/1 var(--body) !important; letter-spacing:.3px; padding:12px 20px !important;
}

/* ---- settings + X icons → real members of the rail (bottom) ---- */
#stats-container{ display:contents; }
.settings-btn{
  position:static !important; width:38px; height:38px; flex-shrink:0;
  background:transparent !important; backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid transparent !important; border-radius:10px !important; color:var(--t3) !important;
  box-shadow:none !important; transition:.16s; display:grid; place-items:center;
}
.settings-btn:hover{ color:var(--acc) !important; border-color:var(--acc-line) !important; background:var(--acc-soft) !important; }
.settings-btn svg{ width:18px; height:18px; }
/* the rail holds them; a thin divider separates them from the nav icons */
.codex-rail .cr-railfoot{ margin-top:6px; padding-top:8px; border-top:1px solid var(--hair2); display:flex; flex-direction:column; gap:6px; align-items:center; }
body.cg-min .settings-btn{ opacity:0; pointer-events:none; }

/* ---- connect-wallet + close-codex: IDENTICAL buttons, stacked in column ---- */
#wallet-section{
  position:static !important; width:100%; margin:0; transform:none !important;
}
/* shared button look for both */
.connect-wallet-btn, .cg-close-codex{
  width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:14px; border-radius:12px; cursor:pointer;
  font:600 11px/1 var(--disp); letter-spacing:2px; text-transform:uppercase;
  background:var(--card); backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur);
  border:1px solid var(--hair); box-shadow:var(--card-shadow); color:var(--t1); transition:.16s;
}
.connect-wallet-btn:hover, .cg-close-codex:hover{ color:var(--t0); border-color:var(--acc-line); background:rgba(255,255,255,0.06); transform:none; filter:none; }
.connect-wallet-btn svg{ width:16px; height:16px; fill:var(--t1); }
.connect-wallet-btn:hover svg{ fill:var(--acc); }
.connecting-wallet-btn{
  width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:9px; padding:14px;
  border-radius:12px; font:600 11px/1 var(--disp); letter-spacing:2px; text-transform:uppercase;
  background:var(--card) !important; border:1px solid var(--hair) !important; color:var(--t1); box-shadow:var(--card-shadow);
}
.wallet-connected{
  width:100%; box-sizing:border-box;
  background:var(--card) !important; backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur);
  border:1px solid var(--hair) !important; border-radius:12px !important; box-shadow:var(--card-shadow); padding:12px 14px;
}
body.cg-min #wallet-section{ display:none; }

/* ============================================================
   WELCOME MESSAGE (item 7) — now READABLE over bright sky
   ============================================================ */
#cg-welcome{
  position:fixed; top:74px; left:50%; transform:translateX(-50%); z-index:800;
  text-align:center; pointer-events:none; max-width:90vw;
  padding:22px 40px; border-radius:18px;
  background:linear-gradient(180deg,rgba(12,16,24,0.55),rgba(12,16,24,0.32));
  backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid var(--hair); box-shadow:var(--card-shadow);
  transition:opacity .5s ease;
}
body:not(.cg-min) #cg-welcome{ opacity:0; }
.cg-welcome-eyebrow{ font:600 10px/1 var(--mono); letter-spacing:3px; text-transform:uppercase; color:var(--acc); margin-bottom:12px; }
.cg-welcome-title{ font:700 32px/1.1 var(--disp); letter-spacing:1px; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,0.6); }
.cg-welcome-title span{ color:var(--acc); }
.cg-welcome-sub{ font:400 13px/1.5 var(--body); color:var(--t0); margin-top:12px; letter-spacing:.3px; opacity:0.9; }
.cg-welcome-ca{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:8px 16px; border-radius:20px;
  pointer-events:auto; cursor:pointer;
  background:rgba(255,255,255,0.05); border:1px solid var(--hair);
  font:500 11px/1 var(--mono); letter-spacing:.5px; color:var(--t1); transition:.16s;
}
.cg-welcome-ca:hover{ border-color:var(--acc-line); color:var(--t0); background:rgba(255,255,255,0.08); }
.cg-welcome-ca .ca-k{ color:var(--acc); font-weight:600; }

/* ============================================================
   LAUNCHER + POPULATION (floating)
   ============================================================ */
#cg-launcher{ position:fixed; top:18px; right:26px; z-index:1100; display:flex; align-items:center; gap:11px; padding:10px 18px 10px 14px; border-radius:13px; cursor:pointer; background:var(--card); border:1px solid var(--acc-line); box-shadow:var(--card-shadow), 0 0 24px var(--acc-glow); backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur); opacity:0; transform:translateY(-8px) scale(.96); pointer-events:none; transition:.4s cubic-bezier(.2,.8,.2,1); }
body.cg-min #cg-launcher{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#cg-launcher .lk{ width:34px; height:34px; border-radius:9px; background:var(--acc-soft); border:1px solid var(--acc-line); display:grid; place-items:center; }
#cg-launcher .lk i{ width:10px; height:10px; background:var(--acc); transform:rotate(45deg); display:block; animation:cg-beat 2s ease-in-out infinite; }
@keyframes cg-beat{0%,100%{transform:rotate(45deg) scale(1);opacity:1}50%{transform:rotate(45deg) scale(.82);opacity:.7}}
#cg-launcher .ltxt .a{ font:600 12px/1 var(--disp); letter-spacing:1.5px; color:var(--t0); }
#cg-launcher .ltxt .b{ font:400 10px/1 var(--mono); letter-spacing:.5px; color:var(--t2); margin-top:4px; }

#cg-pop{ position:fixed; top:18px; left:24px; transform:none; z-index:900; display:flex; align-items:center; gap:13px; padding:11px 19px; border-radius:13px; background:var(--card); border:1px solid var(--hair); box-shadow:var(--card-shadow); backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur); }
#cg-pop .pdot{ width:9px; height:9px; border-radius:50%; background:var(--live); box-shadow:0 0 11px var(--live); animation:cg-pulse 1.7s infinite; }
#cg-pop .pn{ font:600 24px/1 var(--disp); color:var(--acc); letter-spacing:1px; text-shadow:0 0 22px var(--acc-glow); }
#cg-pop .pl{ font:500 9px/1.3 var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--t2); }

/* ============================================================
   MODALS — unified dark celestial frosted (ALL of them)
   ============================================================ */
.modal-overlay, #how-to-play-modal, #controls-modal, #game-over-modal, #draw-modal,
#coming-soon-overlay, #welcome-modal{
  backdrop-filter:blur(6px) saturate(1.05); -webkit-backdrop-filter:blur(6px) saturate(1.05);
}
.modal-content, .help-modal-content, .stats-modal-content, .welcome-modal-content,
.victory-modal-content, #coming-soon-modal, #controls-modal .modal-content{
  background:linear-gradient(180deg,rgba(20,26,36,0.96),rgba(12,16,24,0.98)) !important;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--hair) !important; border-radius:16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 80px rgba(0,0,0,0.6) !important; color:var(--t0);
}
.modal-close{ background:rgba(255,255,255,0.05); border:1px solid var(--hair); border-radius:8px; color:var(--t1); transition:.16s; }
.modal-close:hover{ color:var(--t0); border-color:var(--acc-line); background:var(--acc-soft); }

/* modal headers / titles */
.help-modal-header, .stats-modal-header{ border-bottom:1px solid var(--hair2); }
.help-modal-title, .stats-modal-title, .modal-title, .welcome-title, .victory-title{
  font:700 22px/1.1 var(--disp); letter-spacing:1px; color:var(--acc) !important;
}
.help-modal-subtitle, .stats-modal-subtitle, .modal-subtitle, .welcome-subtitle{
  font:500 10px/1.4 var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--t2) !important;
}
.help-modal-icon{ filter:saturate(0.8); }

/* how-to-play numbered steps */
.help-step, .help-modal-body > div, .stat-item-modal{ background:rgba(255,255,255,0.03); border:1px solid var(--hair2); border-radius:10px; }
.help-step-number, .step-number{ background:var(--acc-soft) !important; border:1px solid var(--acc-line); color:var(--acc) !important; border-radius:7px; font-family:var(--mono); }
.help-modal-body, .stats-modal-body, .modal-content p, .modal-content li{ color:var(--t1); }
.help-tip, .help-modal-footer .tip{ background:var(--acc-soft); border:1px solid var(--acc-line); border-radius:10px; color:var(--t1); }
strong, b, .highlight{ color:var(--acc); }
.danger-text, .eliminated{ color:var(--danger) !important; }

/* stats grid */
.stats-grid-modal{ gap:10px; }
.stat-item-modal{ padding:12px; }
.modal-stat-label, .stat-label-modal{ font:500 9px/1 var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--t2); }
.modal-stat-value, .stat-value-modal{ font:600 20px/1 var(--disp); color:var(--acc); }

/* footers / got-it / primary actions inside modals already use .primary */
.help-modal-footer, .stats-modal-footer{ border-top:1px solid var(--hair2); }
.dont-show-again, .checkbox-label{ color:var(--t2); font-size:11px; }

/* wallet modal */
.wallet-option{ background:rgba(255,255,255,0.03); border:1px solid var(--hair); border-radius:10px; transition:.16s; }
.wallet-option:hover{ border-color:var(--acc-line); background:var(--acc-soft); }
.wallet-option-name{ font-family:var(--body); color:var(--t0); font-weight:500; }
.wallet-option-status{ font:400 11px/1 var(--mono); color:var(--t2); }
.wallet-select-cancel{ font-family:var(--body); color:var(--t1); background:rgba(255,255,255,0.03); border:1px solid var(--hair); border-radius:8px; }
.welcome-wallet-info{ background:rgba(255,255,255,0.04); border:1px solid var(--hair); border-radius:9px; }
.welcome-wallet-label{ font:500 9px/1 var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--t2); }
.welcome-wallet-address{ font:400 13px/1 var(--mono); color:var(--t0); }
.welcome-name-hint{ font-size:11px; color:var(--t2); }

/* ============================================================
   KILL FEED + HUD
   ============================================================ */
#kill-feed-list{ display:flex; flex-direction:column; gap:6px; }
.kill-feed-item, #kill-feed-list > div{ font:400 12.5px/1.3 var(--body); color:var(--t1); background:var(--card); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--hair); border-left:2px solid var(--acc-line); border-radius:8px; padding:8px 12px; box-shadow:0 10px 30px rgba(0,0,0,0.4); }
.kill-feed-item .player-name{ color:var(--acc); font-weight:600; }
.movement-hud{ background:var(--card); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--hair); border-radius:11px; box-shadow:var(--card-shadow); font-family:var(--disp); }
.movement-hud-text{ color:var(--acc); letter-spacing:1.5px; font-size:12px; }
.movement-hud-icon{ color:var(--acc); }
#move-reminder .reminder-content{ background:var(--card); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--hair); border-left:3px solid var(--acc); border-radius:11px; box-shadow:var(--card-shadow); }
.reminder-text{ font-family:var(--body); color:var(--t0); }
.reminder-close{ color:var(--t2); background:transparent; border:none; cursor:pointer; }
.reminder-close:hover{ color:var(--acc); }

/* ============================================================
   RESPONSIVE — stack the zones on narrow screens
   ============================================================ */
@media (max-width:900px){
  .cg-col-left{ position:fixed; left:50%; top:130px; transform:translateX(-50%); }
  .cg-col-right{ position:fixed; left:50%; right:auto; top:auto; bottom:20px; transform:translateX(-50%); width:min(360px,92vw); }
  #help-controls{ display:none; } /* keep it clean on small screens; rail still has the links */
}

/* ============================================================
   ITEM 5 — modern restyle of extra UI bits
   (chat hint, chat input, player count, locked name)
   ============================================================ */

/* locked-name confirmation chip on the population stat (item 1) */
#cg-locked-name{
  margin-left:14px; padding:5px 12px; border-radius:8px;
  font:600 12px/1 var(--disp); letter-spacing:1px; color:var(--acc);
  background:var(--acc-soft); border:1px solid var(--acc-line);
  position:relative;
}
#cg-locked-name::before{
  content:'PLAYING AS'; display:block; font:500 7px/1 var(--mono); letter-spacing:1.5px;
  color:var(--t2); margin-bottom:4px;
}

/* in-game chat hint — "Press Enter to chat" (item 6 discoverability) */
#social-chat-hint{
  background:var(--card) !important; backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur);
  border:1px solid var(--hair) !important; border-radius:11px !important;
  box-shadow:var(--card-shadow); color:var(--t1) !important;
  font:500 13px/1 var(--body) !important; letter-spacing:.3px; padding:11px 20px !important;
}
#social-chat-hint kbd{
  display:inline-block; background:var(--acc-soft) !important; border:1px solid var(--acc-line) !important;
  border-radius:5px !important; padding:3px 9px !important; margin:0 3px;
  font:600 11px/1 var(--mono) !important; color:var(--acc) !important;
}

/* in-game chat input */
#social-chat-container{ z-index:1200; }
#social-chat-input{
  background:var(--card) !important; backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur);
  border:1px solid var(--acc-line) !important; border-radius:24px !important;
  color:var(--t0) !important; font-family:var(--body) !important; box-shadow:var(--card-shadow);
}
#social-chat-input:focus{ border-color:var(--acc) !important; box-shadow:0 0 0 3px var(--acc-soft), var(--card-shadow) !important; }
#social-chat-input::placeholder{ color:var(--t3) !important; }

/* social player count badge */
#social-player-count{
  background:var(--card) !important; backdrop-filter:var(--card-blur); -webkit-backdrop-filter:var(--card-blur);
  border:1px solid var(--hair) !important; border-radius:20px !important;
  color:var(--t0) !important; font-family:var(--mono) !important; box-shadow:var(--card-shadow);
}

/* player & tombstone tooltips — match theme */
#player-tooltip, #tombstone-tooltip{
  background:var(--card) !important; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--hair) !important; border-radius:9px !important; color:var(--t0) !important;
  box-shadow:var(--card-shadow); font-family:var(--body) !important;
}

/* coming-soon modal text */
#coming-soon-modal h2{ font-family:var(--disp) !important; color:var(--acc) !important; }
#coming-soon-modal p{ color:var(--t1) !important; }
#coming-soon-close{
  background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 70%,#000)) !important;
  border:none !important; color:var(--s0) !important; border-radius:8px !important;
  font-family:var(--disp) !important; font-weight:600 !important; letter-spacing:1px;
}

/* ============================================================
   SETTINGS PANEL — redesigned to match the celestial popups
   ============================================================ */
#settings-panel{
  background:linear-gradient(180deg,rgba(20,26,36,0.96),rgba(12,16,24,0.98)) !important;
  backdrop-filter:blur(24px) !important; -webkit-backdrop-filter:blur(24px) !important;
  border:1px solid var(--hair) !important; border-radius:16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 80px rgba(0,0,0,0.6) !important;
  color:var(--t0) !important; padding:0 !important; overflow:hidden;
}
.settings-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px !important; border-bottom:1px solid var(--hair2) !important; background:transparent !important;
}
.settings-panel-title{
  display:flex; align-items:center; gap:10px;
  font:700 14px/1 var(--disp) !important; letter-spacing:2px !important; text-transform:uppercase; color:var(--acc) !important;
}
.settings-icon{ filter:grayscale(1) brightness(1.4); opacity:.85; font-size:15px; }
.settings-close-btn{
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,0.05) !important; border:1px solid var(--hair) !important; color:var(--t1) !important;
  font-size:18px; transition:.16s;
}
.settings-close-btn:hover{ color:var(--t0) !important; border-color:var(--acc-line) !important; background:var(--acc-soft) !important; }

.settings-section{ padding:18px 20px !important; border:none !important; }
.settings-section + .settings-section{ border-top:1px solid var(--hair2) !important; }
.settings-section-title{
  font:600 9px/1 var(--mono) !important; letter-spacing:2px !important; text-transform:uppercase; color:var(--t2) !important;
  margin-bottom:16px !important;
}
.settings-row{ margin-bottom:16px !important; }
.settings-row:last-child{ margin-bottom:0 !important; }
.settings-label{ display:block; font:500 12px/1 var(--body) !important; color:var(--t1) !important; margin-bottom:10px !important; }
.settings-toggle-row{ display:flex; align-items:center; gap:14px; }

/* sliders — sage accent */
.settings-slider{
  -webkit-appearance:none; appearance:none; flex:1; height:4px; border-radius:3px;
  background:rgba(255,255,255,0.12) !important; outline:none; cursor:pointer;
}
.settings-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--acc); border:2px solid var(--s1); box-shadow:0 0 8px var(--acc-glow); cursor:pointer;
}
.settings-slider::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--acc); border:2px solid var(--s1);
  box-shadow:0 0 8px var(--acc-glow); cursor:pointer;
}

/* toggle switches — sage when on */
.settings-toggle{ position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; }
.settings-toggle input{ opacity:0; width:0; height:0; }
.settings-toggle-slider{
  position:absolute; inset:0; cursor:pointer; border-radius:22px;
  background:rgba(255,255,255,0.12); border:1px solid var(--hair); transition:.2s;
}
.settings-toggle-slider::before{
  content:''; position:absolute; width:16px; height:16px; left:3px; bottom:2px; border-radius:50%;
  background:var(--t2); transition:.2s;
}
.settings-toggle input:checked + .settings-toggle-slider{ background:var(--acc-soft); border-color:var(--acc-line); }
.settings-toggle input:checked + .settings-toggle-slider::before{ transform:translateX(18px); background:var(--acc); box-shadow:0 0 6px var(--acc-glow); }

/* share-on-X button inside settings */
.share-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px; padding:13px; border-radius:10px; cursor:pointer;
  font:600 11px/1 var(--disp) !important; letter-spacing:2px !important; text-transform:uppercase; color:var(--t1) !important;
  background:var(--card) !important; border:1px solid var(--hair) !important; box-shadow:var(--card-shadow); transition:.16s;
}
.share-btn:hover{ color:var(--t0) !important; border-color:var(--acc-line) !important; background:rgba(255,255,255,0.06) !important; }
.share-btn svg{ fill:currentColor; }

/* ============================================================
   CONNECT WALLET MODAL — celestial theme (was gold)
   ============================================================ */
#wallet-select-modal{
  backdrop-filter:blur(6px) saturate(1.05); -webkit-backdrop-filter:blur(6px) saturate(1.05);
}
.wallet-select-content{
  background:linear-gradient(180deg,rgba(20,26,36,0.97),rgba(12,16,24,0.98)) !important;
  backdrop-filter:blur(24px) !important; -webkit-backdrop-filter:blur(24px) !important;
  border:1px solid var(--hair) !important; border-radius:16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 80px rgba(0,0,0,0.6) !important;
  color:var(--t0) !important;
}
.wallet-select-title{
  font:700 19px/1.1 var(--disp) !important; letter-spacing:1px !important; color:var(--acc) !important;
}
.wallet-select-subtitle{
  font:400 12px/1.4 var(--body) !important; color:var(--t2) !important;
}
.wallet-option{
  background:rgba(255,255,255,0.03) !important; border:1px solid var(--hair) !important; border-radius:11px !important;
  transition:.16s !important;
}
.wallet-option:hover{ border-color:var(--acc-line) !important; background:var(--acc-soft) !important; transform:translateY(-1px); }
.wallet-option-icon{ border-radius:9px !important; }
.wallet-option-name{ font:600 14px/1 var(--body) !important; color:var(--t0) !important; }
.wallet-option-status{
  font:500 9px/1 var(--mono) !important; letter-spacing:1.5px !important; text-transform:uppercase;
  color:var(--acc) !important; background:var(--acc-soft); border:1px solid var(--acc-line); border-radius:6px; padding:4px 9px;
}
.wallet-select-cancel{
  font:600 11px/1 var(--disp) !important; letter-spacing:2px !important; text-transform:uppercase; color:var(--t1) !important;
  background:var(--card) !important; border:1px solid var(--hair) !important; border-radius:10px !important; transition:.16s;
}
.wallet-select-cancel:hover{ color:var(--t0) !important; border-color:var(--acc-line) !important; background:rgba(255,255,255,0.06) !important; }

/* connected-state dropdown — celestial */
.account-dropdown, #account-dropdown{
  background:linear-gradient(180deg,rgba(20,26,36,0.97),rgba(12,16,24,0.98)) !important;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--hair) !important; border-radius:12px !important; box-shadow:var(--card-shadow);
}
.dropdown-item{ color:var(--t1) !important; font-family:var(--body) !important; transition:.14s; }
.dropdown-item:hover{ background:var(--acc-soft) !important; color:var(--t0) !important; }
.dropdown-item.danger{ color:var(--danger) !important; }
.dropdown-wallet-address{ font-family:var(--mono) !important; color:var(--t2) !important; }
.dropdown-divider{ background:var(--hair2) !important; }
.user-name{ font-family:var(--body) !important; color:var(--t0) !important; }
.balance-amount{ font-family:var(--mono) !important; color:var(--acc) !important; }
.balance-currency{ font-family:var(--mono) !important; color:var(--t2) !important; }

/* ============================================================
   IN-GAME UI — complete the celestial theming (item 2)
   ============================================================ */

/* day transition overlay */
.day-transition-content{ color:var(--t0); }
.day-transition-number{
  font:700 64px/1 var(--disp) !important; color:var(--acc) !important; text-shadow:0 0 40px var(--acc-glow) !important;
  letter-spacing:2px;
}
.day-transition-subtitle{ font:500 14px/1.4 var(--body) !important; color:var(--t1) !important; letter-spacing:1px; }
.day-transition-survivors{ font:400 13px/1 var(--mono) !important; color:var(--t2) !important; }

/* players panel */
#players-panel{
  background:linear-gradient(180deg,rgba(20,26,36,0.96),rgba(12,16,24,0.98)) !important;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--hair) !important; box-shadow:var(--card-shadow); color:var(--t0);
}
.players-panel-header{ border-bottom:1px solid var(--hair2) !important; }
.players-panel-title{ font:700 14px/1 var(--disp) !important; letter-spacing:2px !important; color:var(--acc) !important; text-transform:uppercase; }
.players-icon{ filter:grayscale(1) brightness(1.3); }
.players-close{ background:rgba(255,255,255,0.05) !important; border:1px solid var(--hair) !important; border-radius:8px !important; color:var(--t1) !important; transition:.16s; }
.players-close:hover{ color:var(--t0) !important; border-color:var(--acc-line) !important; background:var(--acc-soft) !important; }
.players-panel-stats{ border-bottom:1px solid var(--hair2) !important; }
.players-stat-value{ font:600 18px/1 var(--disp) !important; color:var(--acc) !important; }
.players-stat-label{ font:500 9px/1 var(--mono) !important; letter-spacing:1.5px !important; text-transform:uppercase; color:var(--t2) !important; }
.players-filter{ font:500 11px/1 var(--body) !important; color:var(--t2) !important; background:rgba(255,255,255,0.03) !important; border:1px solid var(--hair) !important; border-radius:8px !important; transition:.14s; }
.players-filter:hover{ color:var(--t1) !important; }
.players-filter.active{ color:var(--acc) !important; background:var(--acc-soft) !important; border-color:var(--acc-line) !important; }
.players-list .player-card{ background:rgba(255,255,255,0.03) !important; border:1px solid var(--hair2) !important; border-radius:9px !important; }
.player-card-name{ color:var(--t0) !important; font-family:var(--body) !important; }

/* victory card internals */
.victory-crown{ filter:drop-shadow(0 0 12px var(--acc-glow)); }
.victory-title{ font:700 28px/1 var(--disp) !important; letter-spacing:3px !important; color:var(--acc) !important; text-shadow:0 0 30px var(--acc-glow); }
.victory-subtitle{ font:400 13px/1.4 var(--body) !important; color:var(--t1) !important; }
.victory-winner-card{ background:rgba(255,255,255,0.03) !important; border:1px solid var(--acc-line) !important; border-radius:12px !important; }
.winner-label{ font:500 9px/1 var(--mono) !important; letter-spacing:1.5px !important; text-transform:uppercase; color:var(--t2) !important; }
.winner-name{ font:600 18px/1 var(--disp) !important; color:var(--t0) !important; letter-spacing:1px; }
.winner-prize, .prize-amount{ font:600 16px/1 var(--mono) !important; color:var(--acc) !important; }
.prize-label{ font:500 9px/1 var(--mono) !important; letter-spacing:1.5px !important; text-transform:uppercase; color:var(--t2) !important; }
.victory-stat{ background:rgba(255,255,255,0.03) !important; border:1px solid var(--hair2) !important; border-radius:10px !important; }
.victory-stat-value{ font:600 22px/1 var(--disp) !important; color:var(--acc) !important; }
.victory-stat-label{ font:500 9px/1 var(--mono) !important; letter-spacing:1.5px !important; text-transform:uppercase; color:var(--t2) !important; }
.leaderboard-title, .victory-leaderboard .leaderboard-title{ font:600 10px/1 var(--mono) !important; letter-spacing:2px !important; text-transform:uppercase; color:var(--t2) !important; }
.leaderboard-list .leaderboard-item{ background:rgba(255,255,255,0.03) !important; border:1px solid var(--hair2) !important; border-radius:8px !important; color:var(--t1) !important; }

/* ============================================================
   LOADING SCREEN — redesigned editorial celestial (item 3)
   slightly transparent, replaces the spinner look
   ============================================================ */
#loading-overlay{
  background:rgba(12,16,24,0.82) !important;       /* slightly transparent */
  backdrop-filter:blur(16px) saturate(1.1) !important; -webkit-backdrop-filter:blur(16px) saturate(1.1) !important;
  transition:opacity .6s cubic-bezier(.4,0,.2,1) !important;   /* smoother fade */
}
/* item 1: while loading, hide the codex shell, dim, welcome + floating chrome
   so they don't flash behind/around the loading screen */
body.cg-loading{ background:#0c1018 !important; }   /* dark base — no white/codex flash on boot */
body.cg-loading #codex-shell,
body.cg-loading #cg-dim,
body.cg-loading #cg-welcome,
body.cg-loading .codex-rail,
body.cg-loading #cg-pop,
body.cg-loading #cg-launcher,
body.cg-loading #top-bar{ opacity:0 !important; pointer-events:none !important; }
.loading-content{
  position:relative; text-align:center !important; padding:60px 80px;
  min-width:440px;
  animation:cg-load-in .7s cubic-bezier(.2,.8,.2,1) both;      /* gentle entrance */
}
@keyframes cg-load-in{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
/* editorial corner brackets */
.loading-content::before, .loading-content::after{
  content:''; position:absolute; width:46px; height:46px; border:2px solid var(--acc-line); pointer-events:none;
}
.loading-content::before{ top:0; left:0; border-right:none; border-bottom:none; }
.loading-content::after{ bottom:0; right:0; border-left:none; border-top:none; }

/* hide the old spinner, replace with a soft pulsing diamond */
.loading-spinner{
  width:auto !important; height:auto !important; border:none !important; border-radius:0 !important;
  animation:none !important; margin:0 auto 28px !important; position:relative;
}
.loading-spinner::before{
  content:''; display:block; width:16px; height:16px; margin:0 auto;
  background:var(--acc); transform:rotate(45deg); box-shadow:0 0 24px var(--acc-glow);
  animation:cg-beat 1.8s ease-in-out infinite;
}
.loading-spinner::after{
  content:'SOUL GAMES'; display:block; margin-top:22px;
  font:600 10px/1 var(--mono); letter-spacing:4px; text-transform:uppercase; color:var(--acc);
}

/* the message styled as an editorial title */
.loading-message{
  font:700 30px/1.15 var(--disp) !important; letter-spacing:1px !important; color:#fff !important;
  margin-bottom:24px !important; text-shadow:0 2px 20px rgba(0,0,0,0.5);
  transition:opacity .3s ease;
}

/* progress bar — sage, smoothly animated */
.loading-progress-container{
  width:240px !important; height:3px !important; background:rgba(255,255,255,0.1) !important;
  border-radius:3px !important; margin:0 auto; overflow:hidden;
}
.loading-progress-bar{
  position:relative; overflow:hidden;
  background:linear-gradient(90deg, var(--acc-2), var(--acc)) !important;
  box-shadow:0 0 12px var(--acc-glow); border-radius:3px;
  transition:width .12s linear !important;     /* light smoothing, lets rAF drive */
}
/* subtle shimmer travelling across the bar while loading */
.loading-progress-bar::after{
  content:''; position:absolute; inset:0; border-radius:3px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation:cg-shimmer 1.6s ease-in-out infinite;
}
@keyframes cg-shimmer{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}