/* Caleb's War — base layer: tokens, reset, app layers, backdrop effects.
   "Command Network" palette (bible §2.2 / §8.3). Every size scales with
   --ui (bible §0.2): uiScale = clamp(round(vh / 900, 2), 0.8, 1.6), set by
   app.js; --px = one reference pixel at the current scale. */

:root {
  --ui: 1;
  --px: calc(var(--ui) * 1px);

  --cn-bg: #05080a;
  --cn-bg-2: #0a0f13;
  --cn-panel: rgba(9, 13, 17, 0.86);
  --cn-panel-solid: #0b1014;
  --cn-btn: #11161b;
  --cn-btn-hi: #1c252d;
  --cn-line: #26313a;
  --cn-line-hi: #3a4753;
  --cn-amber: #ffb23f;
  --cn-amber-2: #ffcf7a;
  --cn-amber-dim: rgba(255, 178, 63, 0.35);
  --cn-amber-faint: rgba(255, 178, 63, 0.12);
  --cn-green: #3dff8a;
  --cn-red: #ff4a3d;
  --cn-text: #d8e0e7;
  --cn-text-2: #b3bec8;
  --cn-dim: #8e9aa6;
  --cn-faint: #5a6672;

  --side-allies: #6fa8ff;
  --side-soviets: #ff6a55;
  --side-pale: #c9a8ff;
  --bone: #ede8dd;

  /* Accent follows the last-played side (app sets data-side on the root). */
  --accent: var(--cn-amber);
  --accent-glow: rgba(255, 178, 63, 0.45);
  --tint: rgba(111, 168, 255, 0.1);

  --f-title: "Futura", "Avenir Next Condensed", "DIN Condensed", Impact, sans-serif;
  --f-cond: "Avenir Next Condensed", "DIN Condensed", "Helvetica Neue", "Arial Narrow", sans-serif;
  --f-din: "DIN Condensed", "Avenir Next Condensed", Impact, sans-serif;
  --f-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Monaco, monospace;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

.cw-root[data-side="allies"] { --accent: #6fa8ff; --accent-glow: rgba(111, 168, 255, 0.45); --tint: rgba(111, 168, 255, 0.1); }
.cw-root[data-side="soviets"] { --accent: #ff6a55; --accent-glow: rgba(255, 106, 85, 0.45); --tint: rgba(255, 106, 85, 0.1); }
.cw-root[data-side="pale"] { --accent: #c9a8ff; --accent-glow: rgba(201, 168, 255, 0.45); --tint: rgba(201, 168, 255, 0.1); }

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--cn-bg); color: var(--cn-text);
  font-family: var(--f-ui); font-size: calc(15 * var(--px));
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: calc(2 * var(--px)) solid var(--accent); outline-offset: calc(2 * var(--px)); }
::selection { background: var(--cn-amber-dim); }
u { text-decoration-thickness: calc(2 * var(--px)); text-underline-offset: calc(3 * var(--px)); text-decoration-color: var(--accent); }

/* Thin themed scrollbars (WebKit / Chrome). */
::-webkit-scrollbar { width: calc(8 * var(--px)); height: calc(8 * var(--px)); }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); }
::-webkit-scrollbar-thumb { background: var(--cn-line-hi); border-radius: calc(4 * var(--px)); }
::-webkit-scrollbar-thumb:hover { background: var(--cn-amber-dim); }

/* ------------------------------------------------------------ app layers --- */
.cw-root { position: fixed; inset: 0; overflow: hidden; background: var(--cn-bg); isolation: isolate; }
.cw-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 62% 50%, rgba(22, 40, 54, 0.55), transparent 70%),
    radial-gradient(ellipse at 50% 50%, #0b1319 0%, #05080a 75%); transition: opacity 400ms ease; }
.cw-backdrop::after { /* side tint wash (bible: last played side at 10 %) */
  content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 62% 50%, var(--tint), transparent 65%); }
/* Boot: pure black over the backdrop gradients; the globe canvas draws above it. */
.cw-backdrop::before { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 900ms ease; }
.cw-backdrop[data-boot="1"]::before { opacity: 1; transition: none; }
.cw-backdrop[data-boot="1"] .cw-beams, .cw-backdrop[data-boot="1"] .cw-backdrop-grid { opacity: 0; }
.cw-backdrop-grid { position: absolute; inset: -2px; opacity: 0.5; transition: opacity 900ms ease;
  background-image:
    linear-gradient(rgba(255, 178, 63, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 178, 63, 0.035) 1px, transparent 1px);
  background-size: calc(48 * var(--px)) calc(48 * var(--px));
  mask-image: radial-gradient(ellipse at 60% 50%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 20%, transparent 75%); }
.cw-warroom-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cw-backdrop[data-dim="1"] .cw-warroom-canvas { filter: saturate(0.8) brightness(0.62); }
.cw-backdrop[data-dim="2"] .cw-warroom-canvas { filter: blur(calc(3 * var(--px))) saturate(0.6) brightness(0.45); }

/* Three slow searchlight cones behind the globe (blue, red, violet at ~6 %). */
.cw-beams { position: absolute; inset: 0; opacity: 1; transition: opacity 600ms ease; }
.cw-beam { position: absolute; bottom: -12%; width: 0; height: 0; transform-origin: 50% 100%; }
.cw-beam::before { content: ""; position: absolute; left: calc(-120 * var(--px)); bottom: 0; width: calc(240 * var(--px)); height: 150vh;
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); filter: blur(calc(6 * var(--px)));
  background: linear-gradient(to top, var(--beam) 0%, transparent 85%); }
.cw-beam.b1 { left: 38%; --beam: rgba(84, 140, 255, 0.07); animation: cw-sweep 23s var(--ease-io) infinite alternate; }
.cw-beam.b2 { left: 64%; --beam: rgba(255, 84, 70, 0.06); animation: cw-sweep 29s var(--ease-io) infinite alternate-reverse; }
.cw-beam.b3 { left: 86%; --beam: rgba(170, 120, 255, 0.06); animation: cw-sweep 19s var(--ease-io) -7s infinite alternate; }
@keyframes cw-sweep { from { transform: rotate(-24deg); } to { transform: rotate(22deg); } }

/* CSS planet if WebGL is unavailable (bible §1.3 failure-proofing). */
.cw-planet { position: absolute; width: 60vh; height: 60vh; left: 60.5%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.12), transparent 40%),
    repeating-linear-gradient(0deg, rgba(255, 178, 63, 0.07) 0 1px, transparent 1px 7.5%),
    repeating-linear-gradient(90deg, rgba(255, 178, 63, 0.07) 0 1px, transparent 1px 7.5%),
    radial-gradient(circle at 40% 40%, #1b3a52, #0e2233 55%, #050b12 100%);
  box-shadow: 0 0 80px rgba(109, 143, 174, 0.35), inset -30px -30px 80px rgba(0, 0, 0, 0.7); }

.cw-screens { position: absolute; inset: 0; z-index: 10; }
.cw-screen { position: absolute; inset: 0; overflow: hidden;
  transition: opacity 180ms ease, transform 180ms var(--ease-out); will-change: opacity, transform; }
.cw-screen.enter-fwd { opacity: 0; transform: translateX(calc(12 * var(--px))); }
.cw-screen.enter-back { opacity: 0; transform: translateX(calc(-12 * var(--px))); }
.cw-screen.leave-fwd { opacity: 0; transform: translateX(calc(-12 * var(--px))); pointer-events: none; }
.cw-screen.leave-back { opacity: 0; transform: translateX(calc(12 * var(--px))); pointer-events: none; }
.cw-screen.enter-cut, .cw-screen.leave-cut { transition: none; }
.cw-screen.leave-cut { display: none; }

.cw-fx { position: absolute; inset: 0; z-index: 60; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0, rgba(0, 0, 0, 0.18) 1px, transparent 1px, transparent 3px);
  opacity: 0.55; }
.cw-popups { position: absolute; inset: 0; z-index: 150; pointer-events: none; }
.cw-popups > * { pointer-events: auto; }
.cw-modals { position: absolute; inset: 0; z-index: 200; pointer-events: none; }
.cw-modals > * { pointer-events: auto; }
.cw-toasts { position: absolute; right: calc(24 * var(--px)); bottom: calc(40 * var(--px)); z-index: 210; display: flex; flex-direction: column; gap: calc(8 * var(--px)); pointer-events: none; align-items: flex-end; }
.cw-subs { position: absolute; left: 50%; bottom: calc(58 * var(--px)); transform: translateX(-50%); z-index: 220; pointer-events: none; transition: left 300ms var(--ease-out);
  display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--px)); width: min(92vw, calc(1100 * var(--px))); }

/* While a match runs the frontend steps aside completely. */
.cw-root.cw-ingame > .cw-backdrop, .cw-root.cw-ingame > .cw-fx { display: none; }
.cw-root.cw-ingame > .cw-screens:empty { display: none; }

/* Fade-to-black curtain for match start/end (bible §2.7). */
.cw-curtain { position: absolute; inset: 0; z-index: 190; background: #000; opacity: 0; pointer-events: none; transition: opacity 250ms ease; }
.cw-curtain.is-on { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------ fatal error --- */
#cw-fatal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center;
  background: rgba(3, 5, 7, 0.94); font-family: var(--f-mono); color: #ffd9d4; }
#cw-fatal.is-on { display: flex; }
#cw-fatal .box { width: min(820px, 92vw); max-height: 84vh; overflow: auto; border: 1px solid #ff4a3d; background: #0c0506;
  box-shadow: 0 0 60px rgba(255, 74, 61, 0.25); padding: 22px 26px; }
#cw-fatal h1 { margin: 0 0 6px; font: 700 20px/1.2 var(--f-mono); color: #ff4a3d; letter-spacing: 0.08em; }
#cw-fatal p { margin: 0 0 14px; color: #d8c8c6; font: 13px/1.5 var(--f-ui); }
#cw-fatal pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.45; color: #ffb3a8; background: #140809; padding: 12px; border: 1px solid #3a1413; user-select: text; -webkit-user-select: text; }
#cw-fatal .row { display: flex; gap: 10px; margin-top: 14px; }
#cw-fatal button { background: #1a0c0d; border: 1px solid #ff4a3d; color: #ffd9d4; padding: 8px 16px; font: 700 13px var(--f-mono); letter-spacing: 0.1em; }
#cw-fatal button:hover { background: #2a1112; }

@media (prefers-reduced-motion: reduce) {
  .cw-beam { animation: none; }
  .cw-screen { transition: opacity 120ms linear; transform: none !important; }
}