/* console-theme.css - the base "Console" identity (DESIGN_SPEC.md / R13).
   Always linked (never toggled/disabled) on index.html, host.html, player.html - this is the
   platform shell's default look at Home/Lobby, before any game's own identity takes over.

   Scope discipline (do not violate on a later edit):
   - Defines the --console-* CSS custom-property contract on :root. theme-shakhbata.css and
     theme-seenjeem.css override the SAME variable names under :root[data-theme="..."] - the
     names here are the contract other code (public/common.js's applyGameTheme/clearGameTheme)
     is written against. Do not rename them without updating both theme files.
   - Styles ONLY new .console-* classes (Home/Lobby shell chrome: header, room-code panel,
     library-ish surfaces) plus the game-agnostic #cartridge-boot boot overlay (a brand-new ID,
     not used anywhere yet). It does NOT restyle any existing selector from public/style.css
     (شخبطة's permanent layout) or games/seenjeem/seenjeem.css (سين جيم's permanent board
     styles) - those files own their own selectors untouched.
   - Values mirror DESIGN_SPEC.md section 1.6's already-approved, contrast-checked "platform-shell
     instance" palette (public/design-system.css :root) via var(...,fallback) indirection, so the
     Console identity stays visually consistent with the rest of the shared design system and
     still renders correctly even if design-system.css is ever missing from the page. */

:root {
  /* ---- Console color tokens (the contract) ---- */
  --console-bg: var(--surface-0, #11151C);
  --console-bg-2: var(--surface-2, #242B36);
  --console-panel: var(--surface-1, #1A2028);
  --console-panel-2: var(--surface-2, #242B36);
  --console-line: var(--line, #2C333F);
  --console-text: var(--text-primary, #EDEEF3);
  --console-text-muted: var(--text-muted, #9BA2B0);

  --console-accent: var(--accent-signature, #4FA3B8);      /* muted steel-teal - the "console" identity color */
  --console-accent-d: var(--accent-signature-d, #33717F);
  --console-cta: var(--accent-cta, #F2784F);                /* warm terracotta - primary buttons */
  --console-cta-d: var(--accent-cta-d, #B9552F);
  --console-highlight: var(--accent-highlight, #F5B942);    /* warm amber - the majlis "lamp" glow */
  --console-highlight-d: var(--accent-highlight-d, #B9861F);

  --console-success: var(--semantic-success, #3FCB7C);
  --console-error: var(--semantic-error, #FF5566);
  --console-focus-ring: var(--focus-ring, #F5B942);

  /* ---- Console type scale (aliases design-system.css's structural type tokens under the
     console- name, per this file's brief; falls back to the same literal values if
     design-system.css is absent) ---- */
  --console-font-display: var(--font-display, 'Changa', system-ui, sans-serif);
  --console-font-ui: var(--font-ui, 'Changa', system-ui, sans-serif);

  --console-type-display-1: var(--type-display-1, 400 clamp(2.6rem, 8vw, 5.5rem));
  --console-type-display-2: var(--type-display-2, 400 clamp(2rem, 6vw, 3.6rem));
  --console-type-display-3: var(--type-display-3, 400 clamp(1.5rem, 3.5vw, 2.2rem));

  --console-type-ui-sm: var(--type-ui-sm, 700 0.88rem/1.4);
  --console-type-ui-base: var(--type-ui-base, 500 1rem/1.6);
  --console-type-ui-md: var(--type-ui-md, 700 1.15rem/1.5);
  --console-type-ui-lg: var(--type-ui-lg, 800 1.3rem/1.3);
  --console-type-numeral: var(--type-numeral, 400 clamp(3rem, 10vw, 6.5rem));

  /* ---- Reused structural primitives (not redefined - just referenced with a literal fallback
     so .console-* rules below never depend on load order) ---- */
  --console-radius: var(--radius-lg, 18px);
  --console-radius-sm: var(--radius-sm, 10px);
  --console-shadow: var(--shadow-surface, 0 2px 0 rgba(0,0,0,.5), 0 22px 44px -22px rgba(0,0,0,.85));
}

/* =====================================================================
   Home/Lobby shell chrome - new .console-* classes only. Not yet wired into
   index.html/host.html/player.html markup (that is the HTML-wiring integrator step); available
   here as the primitive set for that step and for later phases to compose.
   ===================================================================== */

.console-shell {
  min-height: 100%;
  background:
    radial-gradient(ellipse 60% 40% at 50% -10%, color-mix(in srgb, var(--console-highlight) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 80% 50% at 100% 110%, color-mix(in srgb, var(--console-accent) 12%, transparent), transparent 70%),
    var(--console-bg);
  color: var(--console-text);
  font-family: var(--console-font-ui);
}

.console-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3, 12px);
  padding: var(--sp-4, 16px) var(--sp-5, 20px);
  background: color-mix(in srgb, var(--console-panel) 88%, transparent);
  border-bottom: 1px solid var(--console-line);
}

.console-header-brand {
  font: var(--console-type-display-3);
  font-family: var(--console-font-display);
  color: var(--console-text);
  letter-spacing: .02em;
  margin: 0;
}

.console-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--console-type-ui-sm);
  font-weight: 800; letter-spacing: 2px;
  color: var(--console-text-muted);
}

.console-panel {
  position: relative;
  background: var(--console-panel);
  border: 1px solid var(--console-line);
  border-radius: var(--console-radius);
  box-shadow: var(--console-shadow);
  padding: var(--sp-5, 20px);
  color: var(--console-text);
}

/* optional top accent stripe, same shape as design-system.css's .ds-card::before */
.console-panel--raised::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--console-accent), var(--console-highlight));
  border-radius: var(--console-radius) var(--console-radius) 0 0;
}

.console-surface {
  background: var(--console-panel-2);
  border: 1px solid var(--console-line);
  border-radius: var(--console-radius-sm);
  padding: var(--sp-4, 16px);
  color: var(--console-text);
}

.console-divider {
  border: none; border-top: 1px solid var(--console-line);
  margin: var(--sp-4, 16px) 0;
}

.console-label {
  font: var(--console-type-ui-sm);
  font-weight: 800;
  color: var(--console-text-muted);
}

/* the room-code display panel - big legible numerals, majlis-lamp glow */
.console-room-code {
  font: var(--console-type-numeral);
  font-family: var(--console-font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--console-highlight);
  text-shadow: 0 0 26px color-mix(in srgb, var(--console-highlight) 55%, transparent);
  text-align: center;
  direction: ltr; /* digits must never reverse under RTL - same convention as style.css's
    .join-url / .code-banner .code rules */
}

/* =====================================================================
   Cartridge boot overlay (host big screen only). Base/game-agnostic structure and the
   reduced-motion guard live here since it is tinted purely from the active theme's variables
   (--console-bg / --console-accent) - the per-game theme files only ever need to change those
   variables, never this element's own CSS. Markup (#cartridge-boot itself) and the
   booting-class toggle are added by the HTML-wiring/common.js steps; this file only styles it.
   ===================================================================== */
#cartridge-boot {
  position: fixed; inset: 0;
  z-index: 9500; /* above design-system.css's --z-connection (9000), the highest existing tier */
  display: flex; align-items: center; justify-content: center;
  background: var(--console-bg);
  color: var(--console-text);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
#cartridge-boot[hidden] { display: none; }
#cartridge-boot::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
    color-mix(in srgb, var(--console-accent) 35%, transparent), transparent 70%);
}
#cartridge-boot.booting {
  opacity: 1;
  pointer-events: auto;
  animation: console-cartridge-boot 1.5s var(--motion-settle, cubic-bezier(.2,.85,.3,1)) forwards;
}
@keyframes console-cartridge-boot {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}
/* Reduced-motion: instant, no overlay at all, even if JS timing races - matches the plan's exact
   mandated fallback rule. */
@media (prefers-reduced-motion: reduce) {
  #cartridge-boot { animation: none; display: none; }
}

/* =====================================================================
   Game-library card-level Locked state (R56/R57). Plumbing for the future per-(game,feature)
   entitlement model (server.js's isGameLocked()/GAMES registry `locked` field) - always false
   for both live games today, so this never actually renders in the shipped product yet.
   Deliberately its own class, not a reuse of style.css's pack-level .badge-soon (that badge is
   for one option inside a game already in progress, e.g. شخبطة's premium sentence packs; this is
   a whole game card on the home library grid, one step up, so it needs its own visual language -
   a dim/desaturate treatment on the card itself plus a lock glyph, rather than a small badge). */
.game-card.game-card-locked {
  cursor: not-allowed;
  filter: grayscale(55%);
  opacity: .62;
}
.game-card.game-card-locked:hover { transform: none; border-color: var(--console-line, var(--line)); }
.game-card.game-card-locked .card-lock-icon {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--console-bg, #11151C) 78%, transparent);
  border: 1px solid var(--console-line, var(--line));
  font-size: .95rem;
  line-height: 1;
}