/* ============================================================
   GODMODE — visual design system
   Style: "orbital command console" — StarCraft-era military
   sci-fi UI: dark steel, chamfered plates, cyan holography.
   Fonts: Orbitron (display) · Rajdhani (UI) · JetBrains Mono
   (data) · Exo 2 (body). Loaded via Google Fonts in each page.
   ============================================================ */

:root {
  /* -- color tokens ------------------------------------------ */
  --void:        #04070D;   /* page background, deep space      */
  --deep:        #070B13;   /* screen background                */
  --panel:       #0B1322;   /* default plate fill               */
  --raised:      #101C30;   /* hover / raised plate             */
  --inset:       #080E1A;   /* wells, transcript boxes          */

  --edge:        #1C3450;   /* default plate border             */
  --edge-bright: #2E5B8A;   /* lit border / focus               */

  --cyan:        #5EC8F7;   /* primary accent, holographic      */
  --glow:        #2F9DE8;   /* glows, active edges              */

  --steel-l:     #D4DCE4;   /* metallic highlight               */
  --steel-m:     #93A3B4;   /* metallic mid                     */
  --steel-d:     #4E5E70;   /* metallic shadow                  */

  --text:        #D7E3F4;
  --dim:         #7C8DB0;

  --good:        #63E6A5;
  --bad:         #FF6B61;
  --warn:        #FFB454;

  /* -- fonts -------------------------------------------------- */
  --f-display: 'Orbitron', sans-serif;
  --f-ui:      'Rajdhani', sans-serif;
  --f-data:    'JetBrains Mono', monospace;
  --f-body:    'Exo 2', sans-serif;

  /* -- shared gradients --------------------------------------- */
  --grad-panel: linear-gradient(172deg, #101B2E 0%, #0B1322 34%, #081020 100%);
  --grad-plate: linear-gradient(180deg, #14263E 0%, #0D1A2E 8%, #0A1424 60%, #0C1728 100%);
  --grad-btn:   linear-gradient(180deg, #1A3A5F 0%, #12294a 45%, #0D1F3A 100%);
  --grad-btn-hi:linear-gradient(180deg, #2A5788 0%, #1B3D66 45%, #142E52 100%);
  --grad-edge:  linear-gradient(160deg, var(--edge-bright) 0%, var(--edge) 38%, #14263E 75%, var(--edge-bright) 100%);
  --grad-metal: linear-gradient(180deg, #F4F7FA 0%, #C9D3DC 28%, #8B9CAC 52%, #5C6C7E 55%, #AEBBC8 78%, #E9EEF3 100%);
}

/* ============================================================ base */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--void);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 15px;
}

::selection { background: rgba(94, 200, 247, .3); }

/* 1920×1080 art-board that scales to fit the window (js/fit.js) */
.stage {
  width: 1920px;
  height: 1080px;
  position: relative;
  overflow: hidden;
  background: var(--deep);
  transform-origin: top left;
}

/* ============================================================ backgrounds */

/* blueprint grid — coarse + fine lines, barely-there */
.bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(46, 91, 138, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 91, 138, .09) 1px, transparent 1px),
    linear-gradient(rgba(46, 91, 138, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 91, 138, .05) 1px, transparent 1px);
  background-size: 192px 192px, 192px 192px, 48px 48px, 48px 48px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 20%, transparent 100%);
}

/* three-layer starfield */
.bg-stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 31px 47px,   rgba(255,255,255,.7), transparent 1.5px),
    radial-gradient(1px 1px at 149px 113px, rgba(255,255,255,.45), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 233px 29px, rgba(174,222,255,.8), transparent 2px),
    radial-gradient(1px 1px at 87px 191px,  rgba(255,255,255,.35), transparent 1.5px),
    radial-gradient(1px 1px at 291px 157px, rgba(255,255,255,.5), transparent 1.5px),
    radial-gradient(2px 2px at 199px 233px, rgba(94,200,247,.6), transparent 2.5px);
  background-size: 320px 280px;
}

/* planet horizon glow — title / finale screens */
.bg-horizon {
  position: absolute; left: 50%; bottom: -128%;
  width: 220%; aspect-ratio: 1; border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 4%, rgba(47,157,232,.28) 0%, rgba(47,157,232,.08) 9%, transparent 18%),
    #02040A;
  box-shadow:
    0 -3px 42px 6px rgba(94, 200, 247, .40),
    0 -22px 140px 20px rgba(47, 157, 232, .22),
    inset 0 42px 90px -18px rgba(94, 200, 247, .30);
}

/* CRT scanlines — put on the .stage of every screen */
.scanlines::after {
  content: ""; position: absolute; inset: 0; z-index: 90;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 4px);
}

/* soft vignette to focus the console */
.vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 80;
  background: radial-gradient(ellipse 118% 108% at 50% 44%,
    transparent 58%, rgba(2, 4, 9, .55) 100%);
}

/* ============================================================ chamfered plates */

/* base chamfer: cut TL + BR corners; --cut controls the bevel  */
.cham {
  position: relative;
  --cut: 16px;
  clip-path: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut));
  background: var(--grad-edge);           /* shows through as the 1px border */
}
.cham::before {
  content: ""; position: absolute; inset: 1px; z-index: 0;
  clip-path: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut));
  background: var(--grad-panel);
}
.cham > * { position: relative; z-index: 1; }

/* variants */
.cham--raised::before { background: var(--grad-plate); }
.cham--inset::before  { background: var(--inset); }
.cham--sm { --cut: 9px; }

/* holographic top strip on a plate */
.hud-line {
  position: absolute; top: 0; left: var(--cut); right: 24%;
  height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--cyan), rgba(94,200,247,0));
  box-shadow: 0 0 8px rgba(94, 200, 247, .8);
}

/* small corner tick decorations (place inside a plate) */
.tick { position: absolute; width: 10px; height: 10px; z-index: 2; opacity: .8; }
.tick--tr { top: 5px; right: 5px; border-top: 1px solid var(--cyan); border-right: 1px solid var(--cyan); }
.tick--bl { bottom: 5px; left: 5px; border-bottom: 1px solid var(--steel-d); border-left: 1px solid var(--steel-d); }

/* ============================================================ typography */

.overline {
  font-family: var(--f-ui); font-weight: 600;
  font-size: 15px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--dim);
}
.overline--accent { color: var(--cyan); text-shadow: 0 0 12px rgba(94,200,247,.5); }

.h-display {
  font-family: var(--f-display); font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--steel-l);
}

.h-section {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 30px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text);
}

.data-xl { font-family: var(--f-data); font-weight: 700; font-size: 44px; }
.data-lg { font-family: var(--f-data); font-weight: 700; font-size: 32px; }
.data-md { font-family: var(--f-data); font-weight: 400; font-size: 20px; }
.data-sm { font-family: var(--f-data); font-weight: 400; font-size: 15px; }

.body    { font-family: var(--f-body); font-size: 19px; line-height: 1.55; }
.body-sm { font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: var(--dim); }

.good { color: var(--good); }
.bad  { color: var(--bad); }
.warn { color: var(--warn); }
.dim  { color: var(--dim); }
.cyan { color: var(--cyan); }

/* ============================================================ buttons */

.btn {
  --cut: 10px;
  position: relative; display: inline-flex;
  align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px;
  clip-path: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut));
  background: var(--grad-edge);
  font-family: var(--f-ui); font-weight: 600; font-size: 19px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  cursor: pointer; border: 0; user-select: none;
  transition: filter .12s ease;
  /* Buttons live inside plain (non-wrapping) flex rows all over the UI
     (.ov-head, .t-actions, ...) — without this, a tight row shrinks the
     button below its label's width and the browser wraps the text instead
     of the row, breaking Russian labels first since they run longer than
     their English source strings. A button's own label must never wrap. */
  white-space: nowrap; flex-shrink: 0;
}
.btn::before {
  content: ""; position: absolute; inset: 1px; z-index: 0;
  clip-path: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut));
  background: var(--grad-btn);
  transition: background .12s ease;
}
.btn > * , .btn { z-index: 1; }
.btn > span { position: relative; z-index: 1; }
.btn:hover { filter: drop-shadow(0 0 12px rgba(94, 200, 247, .45)); color: #fff; }
.btn:hover::before { background: var(--grad-btn-hi); }

/* primary — cyan charged */
.btn--primary { color: #EAF7FF; }
.btn--primary::before {
  background: linear-gradient(180deg, #1E5D8F 0%, #14436E 45%, #0E3054 100%);
  box-shadow: inset 0 1px 0 rgba(94, 200, 247, .5);
}
.btn--primary:hover { filter: drop-shadow(0 0 16px rgba(94, 200, 247, .65)); }

/* danger */
.btn--danger { color: #FFE4E1; }
.btn--danger::before {
  background: linear-gradient(180deg, #6E2A24 0%, #4E1D19 50%, #3A1512 100%);
}
.btn--danger:hover { filter: drop-shadow(0 0 14px rgba(255, 107, 97, .5)); }

/* ghost — thin outline, quiet actions */
.btn--ghost { color: var(--dim); }
.btn--ghost::before { background: rgba(11, 19, 34, .7); }
.btn--ghost:hover { color: var(--text); }

/* size modifiers */
.btn--lg { padding: 20px 44px; font-size: 23px; }
.btn--sm { padding: 8px 18px; font-size: 15px; letter-spacing: .1em; }

/* Russian labels run longer than their English source strings (e.g. "Далее"
   vs "Next", "Назад" vs "Back") and at the base uppercase+letter-spacing
   size were wrapping to a second line, growing the button taller than its
   English counterpart. Trim just the Russian sizing so both languages sit
   at the same button height. */
html[lang="ru"] .btn { font-size: 16px; letter-spacing: .1em; }
html[lang="ru"] .btn--lg { font-size: 19px; }
html[lang="ru"] .btn--sm { font-size: 13px; letter-spacing: .08em; }

/* ============================================================ widgets */

/* metric card — label / big number / delta / sparkline behind */
.metric {
  min-height: 118px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px 18px 12px;
}
.metric .spark {
  position: absolute; left: 8px; right: 8px; top: 26px; bottom: 10px;
  z-index: 0; opacity: .8;
}
.metric .m-label {
  font-family: var(--f-ui); font-weight: 600; font-size: 14px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
  position: absolute; top: 12px; left: 18px;
}
.metric .m-delta {
  font-family: var(--f-data); font-size: 15px; font-weight: 700;
  position: absolute; top: 11px; right: 16px;
}
.metric .m-value {
  font-family: var(--f-data); font-weight: 700; font-size: 34px;
  color: var(--text); text-shadow: 0 2px 12px rgba(0,0,0,.8);
}

/* status dot for hot-node rows */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 10px; }
.dot--good { background: var(--good); box-shadow: 0 0 8px rgba(99,230,165,.8); }
.dot--mid  { background: var(--cyan); box-shadow: 0 0 8px rgba(94,200,247,.8); }
.dot--bad  { background: var(--bad);  box-shadow: 0 0 8px rgba(255,107,97,.8); }

/* badge — echo / solution / status chips */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px;
  font-family: var(--f-ui); font-weight: 600; font-size: 14px;
  letter-spacing: .16em; text-transform: uppercase;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.chip--echo { background: rgba(255, 107, 97, .12); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(255,107,97,.45); }
.chip--sol  { background: rgba(99, 230, 165, .1);  color: var(--good); box-shadow: inset 0 0 0 1px rgba(99,230,165,.4); }
.chip--live { background: rgba(94, 200, 247, .1);  color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(94,200,247,.4); }
.chip--warn { background: rgba(255, 180, 84, .1);  color: var(--warn); box-shadow: inset 0 0 0 1px rgba(255,180,84,.4); }

/* readout table rows (war room domain cards, advisor desk) */
.readout { width: 100%; border-collapse: collapse; }
.readout td {
  padding: 7px 0;
  border-bottom: 1px solid rgba(46, 91, 138, .18);
  font-family: var(--f-ui); font-weight: 500; font-size: 17px;
  letter-spacing: .04em; color: var(--dim);
}
.readout td:last-child {
  text-align: right; font-family: var(--f-data); font-size: 16px;
  color: var(--text); letter-spacing: 0;
}
.readout tr:last-child td { border-bottom: 0; }

/* news ticker */
.ticker-item { display: inline-flex; align-items: center; gap: 14px; }
.ticker-sep { color: var(--steel-d); margin: 0 22px; }

/* pulsing attention (raised hands) */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pulse { animation: pulse 1.3s ease-in-out infinite; }

/* holographic ring gauge (planet health) */
.gauge { position: relative; width: 120px; height: 120px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge .g-val {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--f-data); font-weight: 700; font-size: 32px;
}
.gauge .g-cap {
  font-family: var(--f-ui); font-weight: 600; font-size: 10px;
  letter-spacing: .2em; color: var(--dim);
}

/* hazard stripe strip — decorative, sparingly */
.hazard {
  height: 6px;
  background: repeating-linear-gradient(
    -45deg, rgba(94,200,247,.35) 0 10px, transparent 10px 20px);
  opacity: .5;
}