/* STRIKE · karrylab theme (matches the quizzes / STAR Log look: ink, glass, brass) */
:root {
  --ink: #0b1118; --ink-2: #111a25;
  --glass: rgba(255,255,255,.055); --glass-strong: rgba(255,255,255,.09);
  --edge: rgba(255,255,255,.13); --edge-soft: rgba(255,255,255,.07);
  --text: #ece7da; --muted: #94a0ae;
  --brass: #d9b26a; --brass-dim: rgba(217,178,106,.16);
  --ok: #58d0c0; --ok-dim: rgba(88,208,192,.14);
  --bad: #ef7a67; --bad-dim: rgba(239,122,103,.14);
  --radius: 16px; --radius-sm: 10px;
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,"JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;
}
* { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--ink); color: var(--text);
  font: 16px/1.55 var(--sans); padding-top: env(safe-area-inset-top); padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
.bg { position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(60rem 38rem at 12% -8%, rgba(217,178,106,.16), transparent 60%),
              radial-gradient(52rem 40rem at 105% 8%, rgba(88,208,192,.12), transparent 62%),
              radial-gradient(40rem 30rem at 50% 115%, rgba(80,110,190,.14), transparent 60%), var(--ink); }
.bg::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--edge-soft) 1px, transparent 1px), linear-gradient(90deg, var(--edge-soft) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 20%, #000 0%, transparent 70%); opacity: .5; }

/* HUD + footer */
.hud { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; align-items: center; padding: .65rem clamp(1rem,4vw,2rem);
  font: .72rem/1.3 var(--mono); letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--edge-soft);
  background: rgba(11,17,24,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hud-grow { flex: 1; } .hud .ok { color: var(--ok); } .hud .bad { color: var(--bad); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: .45rem; box-shadow: 0 0 10px currentColor; }
.foot { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; justify-content: center; padding: 1rem; font: .7rem/1.3 var(--mono); letter-spacing: .08em; color: var(--muted); border-top: 1px solid var(--edge-soft); }

main { flex: 1; width: 100%; max-width: 880px; margin: 0 auto; padding: clamp(1.25rem,4vw,2.5rem) clamp(1rem,4vw,1.5rem) 2rem; outline: none; }
.hero { margin-bottom: 1.5rem; }
.hero .tag { display: block; margin-bottom: .7rem; }
.tag { font: .72rem/1 var(--mono); letter-spacing: .1em; color: var(--brass); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(2.1rem,6vw,3.1rem); line-height: 1.05; }
h2 { font-size: 1.3rem; margin-bottom: .6rem; } h3 { font-size: 1.05rem; margin: .9rem 0 .4rem; }
.sub { color: var(--muted); margin: .6rem 0 0; max-width: 58ch; }
.muted { color: var(--muted); } .small { font-size: .85rem; }

/* panels */
.card { background: var(--glass); border: 1px solid var(--edge); border-radius: var(--radius); padding: clamp(1rem,3vw,1.5rem); margin: 0 0 1rem;
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); }
.row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: end; margin: .7rem 0; }

/* controls */
label { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; color: var(--muted); }
input, select { font: 1rem/1.4 var(--sans); color: var(--text); background: rgba(0,0,0,.28); border: 1px solid var(--edge); border-radius: var(--radius-sm); padding: .65rem .75rem; min-height: 44px; }
select option { background: #101822; color: var(--text); }
input[type=range] { padding: 0; min-height: 30px; width: 100%; accent-color: var(--brass); background: transparent; border: 0; }
input[type=number] { width: 7rem; font-family: var(--mono); } input[type=search] { width: 100%; }
input[type=checkbox] { accent-color: var(--brass); }
.btn { appearance: none; cursor: pointer; font: 600 .95rem/1 var(--sans); padding: .85rem 1.2rem; border-radius: 12px; border: 1px solid var(--edge);
  color: var(--text); background: var(--glass-strong); transition: background .15s, border-color .15s, transform .1s; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.btn:hover { background: rgba(255,255,255,.14); } .btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brass); color: #1a1408; border-color: var(--brass); } .btn.primary:hover { background: #e6c07a; }
.btn.ghost { background: transparent; } .btn.big { width: 100%; min-height: 52px; font-size: 1.05rem; }
.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.sticky { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 3; }
details summary { cursor: pointer; color: var(--brass); font-weight: 600; min-height: 32px; }
details[open] summary { margin-bottom: .4rem; }

/* video */
.videoWrap { position: relative; margin: .8rem 0; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--edge); }
.videoWrap video { width: 100%; display: block; max-height: 60vh; } .videoWrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
progress { flex: 1; min-width: 120px; height: 8px; accent-color: var(--brass); }
.msg { min-height: 1.3em; margin: .5rem 0 0; font-size: .9rem; color: var(--muted); } .msg.err { color: var(--bad); } .msg.ok { color: var(--ok); }
.metricGrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: .6rem; }
.metric { border: 1px solid var(--edge); border-radius: 12px; padding: .6rem .8rem; background: rgba(255,255,255,.03); }
.metric b { display: block; font: 600 1.15rem var(--mono); } .metric span { font: .72rem var(--mono); color: var(--muted); letter-spacing: .03em; }
.tip { border: 1px solid var(--edge); border-left-width: 4px; border-radius: 12px; padding: .8rem 1rem; margin: .7rem 0; background: rgba(255,255,255,.03); }
.tip.good { border-left-color: var(--ok); } .tip.warn { border-left-color: var(--brass); }
.tip h3 { margin: 0 0 .2rem; font-size: 1.02rem; } .tip p { margin: .25rem 0; font-size: .95rem; } .tip .impact { color: var(--muted); font-size: .86rem; }
.badge { display: inline-block; font: .68rem var(--mono); letter-spacing: .06em; border-radius: 999px; padding: .15rem .55rem; border: 1px solid currentColor; margin-left: .4rem; vertical-align: middle; }
.badge.good { color: var(--ok); } .badge.warn { color: var(--brass); }

/* lists */
.list { display: flex; flex-direction: column; gap: .5rem; margin: .7rem 0; }
.item { display: flex; justify-content: space-between; gap: .7rem; align-items: center; border: 1px solid var(--edge); border-radius: 12px; padding: .65rem .85rem; background: rgba(255,255,255,.035);
  cursor: pointer; text-align: left; font: inherit; color: inherit; min-height: 44px; width: 100%; }
button.item:hover { background: rgba(255,255,255,.08); }
.item small { color: var(--muted); display: block; font: .75rem var(--mono); margin-top: .15rem; }
.sel { padding: .5rem 0; } .out { font: 600 .95rem var(--mono); min-height: 1.3em; margin: .5rem 0; color: var(--brass); }
.slider { margin: .9rem 0; } .slider .head { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; } .slider output { font-family: var(--mono); color: var(--brass); white-space: nowrap; }
.check { flex-direction: row; gap: .6rem; align-items: flex-start; font-size: .85rem; margin: .7rem 0; } .check input { min-height: auto; margin-top: .2rem; flex: none; width: 1.1rem; height: 1.1rem; }
form#authForm label { margin: .7rem 0; } form#authForm input[type=text], form#authForm input[type=password] { width: 100%; }

/* results */
.simGrid { display: grid; grid-template-columns: minmax(0,260px) 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 560px) { .simGrid { grid-template-columns: 1fr; } .lane-svg { max-height: 440px; margin: 0 auto; } }
.lane-svg { width: 100%; height: auto; display: block; }
.lane-wood { fill: rgba(217,178,106,.17); stroke: var(--edge); stroke-width: 1; } .lane-oil { fill: var(--ok); }
.lane-grid { stroke: var(--edge); stroke-width: .5; } .lane-arrow { fill: rgba(236,231,218,.35); } .lane-foul { stroke: var(--brass); stroke-width: 1.5; }
.lane-note { font: 8px var(--mono); fill: var(--muted); letter-spacing: .04em; }
.pocket { fill: var(--bad); } .bp { fill: var(--ink); stroke: var(--brass); stroke-width: 2; }
.path-main { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .path-ghost { stroke: var(--brass); stroke-width: 2.5; stroke-dasharray: 5 4; stroke-linecap: round; }
dl.facts { margin: .5rem 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.2rem; } dl.facts dt { color: var(--muted); font-size: .88rem; } dl.facts dd { margin: 0; font: 600 .95rem var(--mono); }
.rank { border: 1px solid var(--edge); border-radius: 12px; padding: .8rem 1rem; margin: .7rem 0; background: rgba(255,255,255,.03); }
.rank .top { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.delta { font: 700 1rem var(--mono); white-space: nowrap; } .delta.pos { color: var(--ok); } .delta.neg { color: var(--bad); }
.rank ul { margin: .5rem 0 0 1.1rem; padding: 0; font-size: .9rem; color: #d6d2c5; }
.bar { height: 6px; border-radius: 99px; background: var(--edge-soft); overflow: hidden; margin: .5rem 0; } .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass), var(--ok)); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; } th, td { text-align: left; padding: .5rem .3rem; border-bottom: 1px solid var(--edge-soft); } th { font: .72rem var(--mono); color: var(--muted); letter-spacing: .06em; font-weight: 600; }
.disclaimer { font-size: .8rem; color: var(--muted); border-top: 1px solid var(--edge-soft); margin-top: 1rem; padding-top: .7rem; }

/* tab bar */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; z-index: 5; padding-bottom: env(safe-area-inset-bottom);
  background: rgba(11,17,24,.82); border-top: 1px solid var(--edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tabs button { flex: 1; font: .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: .9rem .3rem; min-height: 56px; background: none; border: 0; color: var(--muted); cursor: pointer; }
.tabs button.on { color: var(--brass); box-shadow: inset 0 2px 0 var(--brass); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }