/* ============================================================
   IGNUS — DOOMSDAY PROTOCOL / MARVEL FAMILY FEUD
   Shared design system (extends the IGNUS visual identity)
   ============================================================ */

/* ---------- fonts (self-hosted, works offline) ---------- */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/BarlowCondensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/BarlowCondensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/BarlowCondensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/BarlowCondensed-800.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url('../assets/fonts/BarlowCondensed-900.woff2') format('woff2'); }

@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/DMSans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/DMSans-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/DMSans-700.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/DMSans-800.woff2') format('woff2'); }

@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/ChakraPetch-500.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/ChakraPetch-600.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/ChakraPetch-700.woff2') format('woff2'); }

:root {
  /* --- IGNUS tokens (extracted from flame-bloom-joy.lovable.app) --- */
  --radius: 3px;
  --background: oklch(9.5% .009 25);
  --foreground: oklch(97% .012 70);
  --card: oklch(15% .012 26);
  --card-2: oklch(12.5% .011 25 / .7);
  --primary: oklch(67% .23 30);
  --primary-fg: oklch(99% .004 65);
  --secondary: oklch(22% .016 27);
  --secondary-fg: oklch(96% .01 70);
  --muted: oklch(20% .012 25);
  --muted-fg: oklch(62% .017 55);
  --accent: oklch(24% .035 29);
  --border: oklch(38% .019 32 / .65);
  --border-soft: oklch(30% .015 28 / .45);
  --ring: oklch(67% .23 30);
  --hot: oklch(76% .16 55);
  --subtle: oklch(45% .025 40);

  /* --- doomsday HUD additions --- */
  --steel: oklch(30% .012 250);
  --panel: linear-gradient(180deg, oklch(17% .011 26 / .92), oklch(12% .010 25 / .94));
  --cyan: oklch(74% .13 225);
  --cyan-dim: oklch(55% .09 225);
  --red: oklch(58% .21 25);
  --amber: oklch(76% .16 55);

  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-tech: 'Chakra Petch', 'DM Sans', system-ui, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* class-level `display` rules must never beat the hidden attribute */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { color-scheme: dark; }
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 14px; border-radius: 999px;
  background: var(--foreground); color: var(--background);
  font: 800 11px var(--font-tech); letter-spacing: .12em; text-decoration: none;
  transform: translateY(-160%); transition: transform .42s var(--ease-out);
}
.skip-link:focus { transform: none; }

::selection { background: var(--primary); color: var(--primary-fg); }

button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
button:disabled { cursor: not-allowed; }
img { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---------- shared HUD textures ---------- */
.hud-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, oklch(70% .08 225 / .055) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(70% .08 225 / .055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 82%);
}

.hud-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(to bottom, oklch(0% 0 0 / .16) 0 1px, transparent 1px 3px);
  opacity: .35;
  mix-blend-mode: multiply;
}

.hud-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 42%, oklch(6% .008 25 / .78) 100%),
    linear-gradient(180deg, oklch(6% .008 25 / .55), transparent 22%, transparent 78%, oklch(6% .008 25 / .75));
}

.hud-noise {
  position: absolute; inset: -50%; pointer-events: none; z-index: 4; opacity: .038;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: noise-shift 1.1s steps(3) infinite;
}
@keyframes noise-shift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-3%, 2%); }
  66%  { transform: translate(2%, -3%); }
  100% { transform: translate(0, 0); }
}

/* corner ticks — technical frame */
.ticks { position: absolute; inset: 14px; pointer-events: none; z-index: 5; }
.ticks i {
  position: absolute; width: 26px; height: 26px;
  border: 1px solid var(--border);
}
.ticks i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ticks i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.ticks i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.ticks i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ---------- typography helpers ---------- */
.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  color: var(--primary);
  font: 800 11px/1 var(--font-sans);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.eyebrow::before, .eyebrow::after {
  content: ''; width: 22px; height: 1px; background: currentColor;
}
.eyebrow.left { justify-content: flex-start; }
.eyebrow.left::before { display: none; }

.sys-label {
  font: 700 10px/1 var(--font-tech);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--subtle);
}

.tech { font-family: var(--font-tech); }

/* ---------- panels ---------- */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.panel-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, oklch(22% .014 27 / .6), transparent);
}
.panel-hd h3 {
  margin: 0;
  font: 800 11px/1 var(--font-tech);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.panel-bd { padding: 12px; }

.hairline { height: 1px; background: var(--border-soft); border: 0; margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 800 12px/1 var(--font-tech);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, oklch(24% .014 27), oklch(17% .012 26));
  color: var(--foreground);
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out),
              transform .12s var(--ease-out), box-shadow .18s var(--ease-out), opacity .18s;
  user-select: none;
  white-space: nowrap;
}
.btn:hover:not(:disabled) {
  border-color: oklch(52% .03 30 / .9);
  background: linear-gradient(180deg, oklch(30% .018 28), oklch(21% .014 27));
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .34; }

.btn-primary {
  background: linear-gradient(180deg, oklch(72% .21 30), oklch(56% .2 28));
  border-color: oklch(78% .17 32 / .7);
  color: var(--primary-fg);
  box-shadow: 0 0 0 0 oklch(67% .23 30 / 0), inset 0 1px 0 oklch(100% 0 0 / .22);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, oklch(78% .2 31), oklch(62% .21 29));
  box-shadow: 0 6px 22px -8px oklch(67% .23 30 / .8), inset 0 1px 0 oklch(100% 0 0 / .3);
}

.btn-danger {
  background: linear-gradient(180deg, oklch(52% .2 25), oklch(40% .18 25));
  border-color: oklch(60% .19 25 / .6);
  color: oklch(99% .004 65);
}
.btn-danger:hover:not(:disabled) { background: linear-gradient(180deg, oklch(58% .21 25), oklch(46% .19 25)); }

.btn-good {
  background: linear-gradient(180deg, oklch(56% .15 155), oklch(44% .12 155));
  border-color: oklch(62% .14 155 / .6);
  color: oklch(99% .004 65);
}
.btn-good:hover:not(:disabled) { background: linear-gradient(180deg, oklch(62% .16 155), oklch(50% .13 155)); }

.btn-ghost { background: transparent; border-color: var(--border-soft); color: var(--muted-fg); }
.btn-ghost:hover:not(:disabled) { color: var(--foreground); border-color: var(--border); background: oklch(24% .014 27 / .6); }

.btn-cy {
  background: linear-gradient(180deg, oklch(30% .06 225), oklch(20% .045 225));
  border-color: oklch(55% .1 225 / .55);
  color: oklch(92% .06 225);
}
.btn-cy:hover:not(:disabled) {
  background: linear-gradient(180deg, oklch(36% .08 225), oklch(24% .055 225));
  box-shadow: 0 0 18px -6px oklch(70% .13 225 / .7);
}

.btn-lg { padding: 16px 22px; font-size: 13px; }
.btn-sm { padding: 8px 10px; font-size: 10px; letter-spacing: .12em; }
.btn-block { width: 100%; }

.btn-grid { display: grid; gap: 7px; }

/* ---------- inputs ---------- */
.field {
  width: 100%;
  background: oklch(8% .008 25 / .9);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 12px;
  font: 600 14px/1.3 var(--font-tech);
  letter-spacing: .06em;
  color: var(--foreground);
}
.field::placeholder { color: oklch(45% .02 40); letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.field:focus { outline: none; border-color: oklch(67% .23 30 / .85); box-shadow: 0 0 0 3px oklch(67% .23 30 / .16); }
.field-sm { padding: 8px 9px; font-size: 12px; }

/* ---------- status chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: 700 9.5px/1 var(--font-tech);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-fg);
  background: oklch(14% .01 26 / .7);
}
.chip.on { color: oklch(80% .12 60); border-color: oklch(70% .16 55 / .6); background: oklch(30% .07 45 / .4); }
.chip.ok  { color: oklch(80% .12 155); border-color: oklch(65% .13 155 / .6); background: oklch(24% .06 155 / .35); }
.chip.bad { color: oklch(74% .16 25); border-color: oklch(62% .18 25 / .6); background: oklch(28% .08 25 / .4); }
.chip.cy  { color: oklch(82% .1 225); border-color: oklch(60% .11 225 / .55); background: oklch(24% .05 225 / .3); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.dot.pulse { animation: dot-pulse 1.6s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

/* ---------- scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: oklch(30% .015 28) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: oklch(28% .015 28); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: oklch(40% .02 30); background-clip: padding-box; }

/* ---------- shared reveal keyframes ---------- */
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slit-open { from { clip-path: inset(50% 0 50% 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes glitch-shift {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 1px); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-2px, -2px); }
  80% { transform: translate(2px, 2px); }
}
@keyframes sweep-y { from { transform: translateY(-100%); } to { transform: translateY(700%); } }
@keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   2026 REDESIGN SYSTEM
   Dark editorial show-control language: warm paper, ember red,
   open composition, tactile controls, and restrained motion.
   ============================================================ */
:root {
  --radius: 12px;
  --background: oklch(8% .012 30);
  --foreground: oklch(96% .018 75);
  --card: oklch(13% .014 30);
  --card-2: oklch(11% .012 30 / .88);
  --primary: oklch(66% .205 28);
  --primary-fg: oklch(98% .01 80);
  --secondary: oklch(19% .016 30);
  --secondary-fg: oklch(96% .015 75);
  --muted: oklch(19% .013 30);
  --muted-fg: oklch(68% .026 58);
  --accent: oklch(24% .035 30);
  --border: oklch(55% .028 55 / .32);
  --border-soft: oklch(55% .024 55 / .18);
  --ring: oklch(76% .12 52);
  --hot: oklch(78% .14 62);
  --subtle: oklch(52% .026 48);
  --cyan: oklch(79% .065 78);
  --cyan-dim: oklch(60% .035 62);
  --panel: linear-gradient(145deg, oklch(16% .016 30 / .95), oklch(11% .012 30 / .96));
  --ease-out: cubic-bezier(.32, .72, 0, 1);
}

body { background: var(--background); }
.panel {
  border-radius: 14px;
  border-color: var(--border-soft);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .035), 0 24px 70px -48px oklch(0% 0 0 / .9);
}
.panel-hd { padding: 14px 16px; background: linear-gradient(180deg, oklch(100% 0 0 / .045), transparent); }
.panel-bd { padding: 16px; }
.btn {
  min-height: 44px;
  border-radius: 999px;
  border-color: oklch(70% .025 55 / .24);
  background: linear-gradient(180deg, oklch(24% .018 30), oklch(16% .014 30));
  transition: transform .42s var(--ease-out), border-color .42s var(--ease-out), background .42s var(--ease-out), box-shadow .42s var(--ease-out), opacity .42s var(--ease-out);
}
.btn:hover:not(:disabled) { border-color: oklch(78% .08 55 / .54); background: linear-gradient(180deg, oklch(30% .024 30), oklch(19% .018 30)); box-shadow: 0 16px 36px -24px oklch(0% 0 0 / .8); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn-primary { background: linear-gradient(135deg, oklch(72% .19 30), oklch(58% .19 26)); border-color: oklch(82% .12 36 / .7); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, oklch(77% .18 31), oklch(63% .19 26)); box-shadow: 0 18px 42px -20px oklch(68% .19 28 / .72); }
.btn-cy { background: linear-gradient(180deg, oklch(28% .022 58), oklch(18% .016 40)); border-color: oklch(70% .08 65 / .34); color: oklch(92% .05 72); }
.btn-cy:hover:not(:disabled) { background: linear-gradient(180deg, oklch(36% .035 58), oklch(22% .02 40)); box-shadow: 0 16px 32px -22px oklch(75% .1 65 / .5); }
.btn-danger { background: linear-gradient(135deg, oklch(58% .2 27), oklch(43% .17 25)); border-color: oklch(72% .12 28 / .54); }
.btn-good { background: linear-gradient(135deg, oklch(54% .13 147), oklch(40% .11 147)); border-color: oklch(70% .1 150 / .46); }
.chip { border-radius: 999px; border-color: oklch(70% .03 55 / .25); background: oklch(100% 0 0 / .04); }
.chip.cy { color: oklch(86% .075 72); border-color: oklch(72% .09 68 / .4); background: oklch(70% .06 68 / .1); }
.field { border-radius: 9px; border-color: oklch(70% .03 55 / .22); }
.field:focus { border-color: oklch(76% .12 52 / .8); box-shadow: 0 0 0 4px oklch(76% .12 52 / .14); }
.dot { box-shadow: 0 0 10px currentColor; }