/* ==========================================================================
   OVERBOSS — design tokens + base components
   Dark-first. Load Google Fonts "Chakra Petch" (500/600/700) + "Inter"
   (400/500/600) in the page <head>; system fallbacks are defined below.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Color: foundation ------------------------------------------------ */
  --ob-bg:          #0b0a10;  /* void */
  --ob-surface-1:   #14131b;  /* gunmetal */
  --ob-surface-2:   #1a1924;  /* plate */
  --ob-surface-3:   #262433;  /* raised plate */
  --ob-line:        #33314a;  /* hairline */
  --ob-line-strong: #4a4766;
  --ob-steel:       #8b8aa0;  /* secondary text */
  --ob-text:        #ecebf5;  /* primary text */

  /* ---- Color: signal ---------------------------------------------------- */
  --ob-violet:       #7b3fe4;
  --ob-violet-hover: #9a6bff;
  --ob-violet-deep:  #4b1fa3;
  --ob-red:          #ff2a3d;  /* visor — focus glow, errors, the eye. Sparingly. */
  --ob-red-deep:     #8f0e1c;
  --ob-amber:        #ffb020;
  --ob-green:        #2fd38a;

  /* translucent tints (for washes, glows, badges) */
  --ob-violet-a12: rgba(123, 63, 228, .12);
  --ob-violet-a30: rgba(123, 63, 228, .30);
  --ob-red-a12:    rgba(255, 42, 61, .12);
  --ob-red-a40:    rgba(255, 42, 61, .40);
  --ob-amber-a12:  rgba(255, 176, 32, .12);
  --ob-green-a12:  rgba(47, 211, 138, .12);

  /* ---- Type ------------------------------------------------------------- */
  --ob-font-display: "Chakra Petch", "Bahnschrift", "DIN Alternate", "Arial Narrow", system-ui, sans-serif;
  --ob-font-ui: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --ob-fs-micro: 0.6875rem;  /* 11 — HUD labels */
  --ob-fs-xs:    0.75rem;    /* 12 */
  --ob-fs-sm:    0.8125rem;  /* 13 */
  --ob-fs-md:    0.9375rem;  /* 15 — body */
  --ob-fs-lg:    1.125rem;   /* 18 */
  --ob-fs-xl:    1.5rem;     /* 24 */
  --ob-fs-2xl:   2rem;       /* 32 */
  --ob-fs-3xl:   2.75rem;    /* 44 */
  --ob-fs-4xl:   4rem;       /* 64 */

  --ob-track-display: 0.08em;
  --ob-track-label:   0.22em;
  --ob-lh-tight: 1.05;
  --ob-lh-body:  1.5;

  /* ---- Space (4px base) ------------------------------------------------- */
  --ob-s-1: 4px;  --ob-s-2: 8px;  --ob-s-3: 12px; --ob-s-4: 16px;
  --ob-s-5: 20px; --ob-s-6: 24px; --ob-s-8: 32px; --ob-s-10: 40px;
  --ob-s-12: 48px; --ob-s-16: 64px;

  /* ---- Shape ------------------------------------------------------------ */
  --ob-ch-xs: 4px;   /* badges */
  --ob-ch-sm: 8px;   /* inputs, buttons */
  --ob-ch-md: 14px;  /* cards */
  --ob-ch-lg: 22px;  /* hero panels */
  --ob-radius: 2px;  /* the only rounding allowed */
  --ob-bracket: 14px; /* HUD corner bracket arm length */

  /* ---- Elevation / glow ------------------------------------------------- */
  --ob-shadow-plate: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -18px rgba(0,0,0,.8);
  --ob-glow-violet:  0 0 18px rgba(123, 63, 228, .45);
  --ob-glow-red:     0 0 14px rgba(255, 42, 61, .55);
  --ob-drop-violet:  drop-shadow(0 0 10px rgba(123, 63, 228, .45));
  --ob-drop-red:     drop-shadow(0 0 8px rgba(255, 42, 61, .55)) drop-shadow(0 0 22px rgba(255, 42, 61, .25));

  /* ---- Motion ----------------------------------------------------------- */
  --ob-dur-instant: 80ms;
  --ob-dur-fast:    160ms;
  --ob-dur-base:    280ms;
  --ob-dur-slow:    480ms;
  --ob-dur-boot:    900ms;
  --ob-ease-servo:  cubic-bezier(.2, 1.4, .36, 1);  /* overshoot, then lock */
  --ob-ease-lock:   cubic-bezier(.75, 0, .2, 1);    /* heavy start, hard stop */
  --ob-ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ob-ease-step:   steps(4, end);                  /* mechanical ticks */

  /* ---- Texture ---------------------------------------------------------- */
  --ob-scanlines: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
  --ob-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Base
   ========================================================================== */
.ob-root, .ob-root body {
  background: var(--ob-bg);
  color: var(--ob-text);
  font-family: var(--ob-font-ui);
  font-size: var(--ob-fs-md);
  line-height: var(--ob-lh-body);
  -webkit-font-smoothing: antialiased;
}
.ob-root *, .ob-root *::before, .ob-root *::after { box-sizing: border-box; }
.ob-root ::selection { background: var(--ob-violet); color: #fff; }

/* ---- Type helpers ------------------------------------------------------- */
.ob-display {
  font-family: var(--ob-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ob-track-display);
  line-height: var(--ob-lh-tight);
}
.ob-label {
  font-family: var(--ob-font-display);
  font-weight: 600;
  font-size: var(--ob-fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ob-track-label);
  color: var(--ob-steel);
}
.ob-mono { font-family: var(--ob-font-display); font-variant-numeric: tabular-nums; letter-spacing: .06em; }

/* ==========================================================================
   Chamfered plates
   A chamfered element is clipped; its 1px border is the element's own
   background showing around an inset ::before fill.
   Set --ch (corner cut) and --fill / --edge per instance.
   ========================================================================== */
.ob-chamfer, .ob-panel, .ob-card, .ob-field__frame, .ob-badge {
  --_c: var(--ch, var(--ob-ch-md));
  position: relative;
  isolation: isolate;
  background: var(--edge, var(--ob-line));
  clip-path: polygon(var(--_c) 0, 100% 0, 100% calc(100% - var(--_c)), calc(100% - var(--_c)) 100%, 0 100%, 0 var(--_c));
}
.ob-chamfer::before, .ob-panel::before, .ob-card::before, .ob-field__frame::before, .ob-badge::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--fill, var(--ob-surface-1));
  clip-path: polygon(calc(var(--_c) - .41px) 0, 100% 0, 100% calc(100% - var(--_c) + .41px), calc(100% - var(--_c) + .41px) 100%, 0 100%, 0 calc(var(--_c) - .41px));
}
/* all four corners cut */
.ob-chamfer--4 {
  clip-path: polygon(var(--_c) 0, calc(100% - var(--_c)) 0, 100% var(--_c), 100% calc(100% - var(--_c)), calc(100% - var(--_c)) 100%, var(--_c) 100%, 0 calc(100% - var(--_c)), 0 var(--_c));
}
.ob-chamfer--4::before {
  clip-path: polygon(calc(var(--_c) - .41px) 0, calc(100% - var(--_c) + .41px) 0, 100% calc(var(--_c) - .41px), 100% calc(100% - var(--_c) + .41px), calc(100% - var(--_c) + .41px) 100%, calc(var(--_c) - .41px) 100%, 0 calc(100% - var(--_c) + .41px), 0 calc(var(--_c) - .41px));
}

.ob-panel { --ch: var(--ob-ch-lg); --fill: linear-gradient(180deg, var(--ob-surface-2), var(--ob-surface-1) 60%); padding: var(--ob-s-8); }
.ob-card  { --ch: var(--ob-ch-md); --fill: var(--ob-surface-1); padding: var(--ob-s-6); }

/* glow cannot live inside a clip-path — put it on a wrapper */
.ob-glow-violet { filter: var(--ob-drop-violet); }
.ob-glow-red    { filter: var(--ob-drop-red); }

/* ==========================================================================
   HUD corner brackets — one pseudo-element, eight gradients
   ========================================================================== */
.ob-brackets { position: relative; }
.ob-brackets::after {
  --_b: var(--ob-bracket);
  --_k: var(--bracket-color, var(--ob-steel));
  content: "";
  position: absolute;
  inset: var(--bracket-inset, -6px);
  pointer-events: none;
  background:
    linear-gradient(var(--_k), var(--_k)) top left    / var(--_b) 1px no-repeat,
    linear-gradient(var(--_k), var(--_k)) top left    / 1px var(--_b) no-repeat,
    linear-gradient(var(--_k), var(--_k)) top right   / var(--_b) 1px no-repeat,
    linear-gradient(var(--_k), var(--_k)) top right   / 1px var(--_b) no-repeat,
    linear-gradient(var(--_k), var(--_k)) bottom left / var(--_b) 1px no-repeat,
    linear-gradient(var(--_k), var(--_k)) bottom left / 1px var(--_b) no-repeat,
    linear-gradient(var(--_k), var(--_k)) bottom right/ var(--_b) 1px no-repeat,
    linear-gradient(var(--_k), var(--_k)) bottom right/ 1px var(--_b) no-repeat;
}

/* angled separator: a hairline with a notch */
.ob-sep {
  height: 7px;
  border: 0;
  margin: var(--ob-s-6) 0;
  background:
    linear-gradient(var(--ob-line), var(--ob-line)) left 3px / calc(100% - 48px) 1px no-repeat,
    linear-gradient(135deg, transparent 45%, var(--ob-violet) 45% 55%, transparent 55%) right 30px top 0 / 7px 7px no-repeat,
    linear-gradient(var(--ob-violet), var(--ob-violet)) right 3px / 24px 1px no-repeat;
}

/* uses ::after so it can sit on top of chamfered plates (which own ::before).
   Do not combine with .ob-brackets on the same element — wrap instead. */
.ob-scanlines { position: relative; }
.ob-scanlines::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--ob-scanlines), var(--ob-noise);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.ob-btn {
  --ch: var(--ob-ch-sm);
  --_c: var(--ch);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ob-s-3);
  min-height: 48px;
  padding: 0 var(--ob-s-6);
  border: 0;
  font-family: var(--ob-font-display);
  font-weight: 700;
  font-size: var(--ob-fs-sm);
  text-transform: uppercase;
  letter-spacing: .24em;
  color: #fff;
  background: var(--ob-violet);
  cursor: pointer;
  clip-path: polygon(var(--_c) 0, 100% 0, 100% calc(100% - var(--_c)), calc(100% - var(--_c)) 100%, 0 100%, 0 var(--_c));
  transition: background var(--ob-dur-fast) linear, transform var(--ob-dur-fast) var(--ob-ease-servo);
}
/* charge bar: fills from the left on hover */
.ob-btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--ob-violet-hover), #b48cff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ob-dur-slow) var(--ob-ease-lock);
}
/* glint: a light sweep that passes once per hover */
.ob-btn::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg) translateX(0);
  opacity: 0;
}
.ob-btn:hover::before { transform: scaleX(1); }
.ob-btn:hover::after  { opacity: 1; animation: ob-glint 700ms var(--ob-ease-out) 120ms both; }
.ob-btn:active { transform: translateY(1px) scale(.99); }
.ob-btn:focus-visible { outline: 2px solid var(--ob-red); outline-offset: -5px; }
.ob-btn[disabled], .ob-btn[aria-disabled="true"] { cursor: progress; }

.ob-btn--ghost { background: var(--ob-surface-3); color: var(--ob-text); }
.ob-btn--ghost::before { background: linear-gradient(90deg, #322f45, #3d3a55); }
.ob-btn--danger { background: var(--ob-red-deep); }
.ob-btn--danger::before { background: linear-gradient(90deg, var(--ob-red), #ff5a69); }
.ob-btn--sm { min-height: 36px; padding: 0 var(--ob-s-4); font-size: var(--ob-fs-xs); --ch: 6px; }

@keyframes ob-glint { from { transform: skewX(-20deg) translateX(0); } to { transform: skewX(-20deg) translateX(560%); } }

/* ==========================================================================
   Inputs   <label class="ob-field"><span class="ob-label">…</span>
              <span class="ob-field__frame"><input class="ob-input"></span></label>
   ========================================================================== */
.ob-field { display: grid; gap: var(--ob-s-2); transition: filter var(--ob-dur-base) var(--ob-ease-out); }
.ob-field__frame {
  --ch: var(--ob-ch-sm);
  --fill: var(--ob-bg);
  display: flex;
  align-items: center;
  min-height: 48px;
  transition: background var(--ob-dur-fast) linear;
}
.ob-input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 var(--ob-s-4);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ob-text);
  font: 500 var(--ob-fs-md) / 1 var(--ob-font-ui);
  letter-spacing: .01em;
  caret-color: var(--ob-red);
}
.ob-input::placeholder { color: #5d5b74; }
.ob-input:-webkit-autofill { -webkit-text-fill-color: var(--ob-text); transition: background-color 9999s; box-shadow: 0 0 0 40px var(--ob-bg) inset; }
.ob-field:hover .ob-field__frame { --edge: var(--ob-line-strong); }
/* focus — the visor lights up */
.ob-field:focus-within { filter: var(--ob-drop-red); }
.ob-field:focus-within .ob-field__frame { --edge: var(--ob-red); }
.ob-field:focus-within .ob-label { color: var(--ob-text); }
.ob-field--invalid .ob-field__frame { --edge: var(--ob-red); }

/* ==========================================================================
   Badges
   ========================================================================== */
.ob-badge {
  --ch: var(--ob-ch-xs);
  --fill: var(--ob-surface-3);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px;
  font: 600 var(--ob-fs-micro) / 1.4 var(--ob-font-display);
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ob-text);
}
.ob-badge::after { content: ""; width: 6px; height: 6px; background: currentColor; order: -1; transform: rotate(45deg); }
.ob-badge--violet { --edge: var(--ob-violet); --fill: #1d1430; color: #c7a9ff; }
.ob-badge--red    { --edge: var(--ob-red);    --fill: #2a0d14; color: #ff6b78; }
.ob-badge--amber  { --edge: var(--ob-amber);  --fill: #2a1f0a; color: var(--ob-amber); }
.ob-badge--green  { --edge: var(--ob-green);  --fill: #0c2a1e; color: var(--ob-green); }

/* ==========================================================================
   Motion primitives
   ========================================================================== */
@keyframes ob-plate-in {           /* slide, overshoot, lock */
  0%   { opacity: 0; transform: translateX(var(--from, 32px)); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes ob-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ob-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ob-flicker {            /* visor power-on */
  0%, 12%, 22%, 30% { opacity: .1; }
  8%, 18%, 26%      { opacity: .9; }
  40%, 100%         { opacity: 1; }
}
@keyframes ob-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px); } 30% { transform: translateX(7px); }
  45% { transform: translateX(-5px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-1px); }
}
@keyframes ob-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ob-blink { 50% { opacity: 0; } }

.ob-anim-plate   { animation: ob-plate-in var(--ob-dur-slow) var(--ob-ease-servo) both; }
.ob-anim-flicker { animation: ob-flicker var(--ob-dur-boot) steps(1, end) both; }
.ob-anim-shake   { animation: ob-shake 420ms var(--ob-ease-out) both; }

/* ==========================================================================
   Reduced motion — honoured everywhere
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ob-dur-instant: 0ms; --ob-dur-fast: 0ms; --ob-dur-base: 0ms;
    --ob-dur-slow: 0ms; --ob-dur-boot: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .ob-btn:hover::after { animation: none; opacity: 0; }
}