:root {
  color-scheme: dark;
  --ink: #f4f1e8;
  --muted: #99a4b8;
  --dim: #647187;
  --bg: #070a12;
  --panel: #0d1320;
  --panel-2: #111a2a;
  --line: #25314a;
  --line-hot: #52637e;
  --acid: #f1b84b;
  --acid-soft: rgba(241, 184, 75, .12);
  --orange: #ffdc7c;
  --pink: #a98fe8;
  --cyan: #69d4d0;
  --danger: #ef6a64;
  --sidebar: 244px;
  --mono: "DM Mono", monospace;
  --sans: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--bg); font-family: var(--sans); }
button, input, select, textarea { font: inherit; }
button, a, select, input, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
::selection { color: #111; background: var(--acid); }

.ambient-grid { position: fixed; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(circle at 8% 14%, rgba(255,255,255,.8) 0 1px, transparent 1.5px), radial-gradient(circle at 38% 74%, rgba(105,212,208,.75) 0 1px, transparent 1.5px), radial-gradient(circle at 72% 21%, rgba(241,184,75,.75) 0 1px, transparent 1.5px), radial-gradient(circle at 94% 67%, rgba(255,255,255,.65) 0 1px, transparent 1.5px); background-size: 211px 193px, 257px 241px, 179px 229px, 303px 187px; animation: star-drift 18s linear infinite alternate; }
@keyframes star-drift { to { transform: translate3d(-8px, 6px, 0); opacity: .7; } }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: var(--sidebar); padding: 28px 20px; display: flex; flex-direction: column; background: rgba(12,12,16,.96); border-right: 1px solid var(--line); backdrop-filter: blur(16px); scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
.brand { display: flex; gap: 13px; align-items: center; color: var(--ink); text-decoration: none; margin: 0 6px 36px; }
.brand > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.brand strong { letter-spacing: .14em; font-size: .9rem; }
.brand small { color: var(--dim); font: .58rem var(--mono); letter-spacing: .08em; }
.brand-mark { position: relative; display: grid; width: 36px; height: 36px; padding: 3px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); border: 1px solid #314561; border-radius: 5px; background: #070b13; box-shadow: 0 0 22px rgba(105,212,208,.13); }
.brand-mark i { background: var(--cyan); border: 1px solid #071019; box-shadow: inset 0 0 5px rgba(255,255,255,.22), 0 0 9px rgba(105,212,208,.25); }
.brand-mark i:nth-child(3) { background: var(--orange); box-shadow: inset 0 0 5px rgba(255,255,255,.22), 0 0 12px rgba(241,184,75,.45); }
.brand-mark::after { content: "S"; position: absolute; inset: 12px; display: grid; place-items: center; color: #10131a; font: 700 .45rem var(--mono); }
.brand-mark i:nth-child(1) { grid-area: 1 / 2; }.brand-mark i:nth-child(2) { grid-area: 2 / 1; }.brand-mark i:nth-child(3) { grid-area: 2 / 2; }.brand-mark i:nth-child(4) { grid-area: 2 / 3; }.brand-mark i:nth-child(5) { grid-area: 3 / 2; }
.main-nav { display: grid; gap: 4px; }
.main-nav { scrollbar-width: none; }
.main-nav::-webkit-scrollbar { display: none; }
.nav-item { appearance: none; border: 0; background: transparent; padding: 11px 10px; border-radius: 4px; text-align: left; color: #8c8993; cursor: pointer; font-size: .8rem; letter-spacing: .02em; transition: .16s ease; }
.nav-item span { display: inline-block; width: 32px; color: #57545d; font: .62rem var(--mono); }
.nav-item:hover { color: var(--ink); background: #17171c; }
.nav-item.is-active { color: var(--acid); background: var(--acid-soft); box-shadow: inset 2px 0 var(--acid); }
.nav-item.is-active span { color: var(--acid); }
.sidebar-note { margin-top: auto; padding: 15px; border: 1px solid var(--line); background: #101014; }
.sidebar-note span { color: var(--acid); font: .61rem var(--mono); letter-spacing: .1em; }
.sidebar-note span i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 8px var(--acid); }
.sidebar-note p { margin: 9px 0 0; color: var(--dim); font-size: .69rem; line-height: 1.5; }

main { margin-left: var(--sidebar); min-width: 0; }
.topbar { min-height: 100px; padding: 22px 34px; display: flex; gap: 24px; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: rgba(9,9,13,.88); backdrop-filter: blur(14px); }
.topbar h1 { margin: 4px 0 0; font-size: 1.12rem; font-weight: 500; }
.eyebrow { margin: 0; color: #77747f; font: .63rem var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.eyebrow.acid { color: var(--acid); }
.top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.save-state { margin-right: 6px; color: #77747f; font: .62rem var(--mono); }
.save-state i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--acid); }
.button { appearance: none; min-height: 38px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--acid); border-radius: 3px; color: #10110c; background: var(--acid); font: 500 .68rem var(--mono); letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: transform .14s ease, filter .14s ease, background .14s ease; }
.button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.button.quiet { color: #aaa7b0; border-color: var(--line); background: #131318; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }

.view { display: none; padding: 34px; max-width: 1540px; margin: 0 auto; animation: view-in .22s ease; }
.view.is-active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } }
.card { border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(145deg, rgba(25,25,31,.94), rgba(15,15,20,.97)); box-shadow: 0 22px 60px rgba(0,0,0,.12); }
.hero { position: relative; min-height: 420px; padding: 50px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 40px; overflow: hidden; border-color: #36363b; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 73% 45%, rgba(223,255,87,.1), transparent 31%), linear-gradient(120deg, transparent 45%, rgba(255,255,255,.025) 45%); }
.hero-copy { position: relative; z-index: 1; align-self: center; }
.hero h2, .page-intro h2, .reward-panel h2 { margin: 15px 0; font-size: clamp(2rem, 4vw, 4.25rem); line-height: .97; letter-spacing: -.055em; }
.hero h2 em { color: var(--acid); font-style: normal; }
.hero-lede { max-width: 690px; color: #aaa7ae; font-size: 1rem; line-height: 1.65; }
.hero-actions { margin-top: 25px; display: flex; gap: 9px; }
.hero-tags { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 30px; color: #77747c; font: .58rem var(--mono); letter-spacing: .09em; }
.hero-tags span::before { content: "◆"; color: var(--acid); margin-right: 7px; }
.hero-board { position: relative; min-height: 330px; align-self: center; border: 1px solid #34343b; background: repeating-linear-gradient(0deg, transparent 0 25px, rgba(255,255,255,.04) 25px 26px), repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,.04) 25px 26px), #0c0c11; box-shadow: inset 0 0 80px #000; }
.hero-board::after { content: "WEIGHTED BAG / LIVE"; position: absolute; right: 10px; top: 10px; color: #4c4a53; font: .54rem var(--mono); }
.hero-rival { position: absolute; z-index: 2; top: 24px; left: 24px; right: 24px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; font: .58rem var(--mono); color: #85828c; }
.hero-rival b { color: var(--danger); font-size: .8rem; }.hero-rival i { grid-column: 1 / -1; display: block; height: 4px; background: #292930; }.hero-rival i::after { content: ""; display: block; width: var(--hp); height: 100%; background: var(--danger); }
.block-sculpture { position: absolute; inset: 0; background: linear-gradient(var(--pink),var(--pink)) 30% 35%/25px 25px, linear-gradient(var(--pink),var(--pink)) calc(30% + 26px) 35%/25px 25px, linear-gradient(var(--pink),var(--pink)) calc(30% + 26px) calc(35% + 26px)/25px 25px, linear-gradient(var(--pink),var(--pink)) calc(30% + 52px) calc(35% + 26px)/25px 25px, linear-gradient(var(--cyan),var(--cyan)) 65% 48%/25px 25px, linear-gradient(var(--cyan),var(--cyan)) 65% calc(48% + 26px)/25px 25px, linear-gradient(var(--cyan),var(--cyan)) 65% calc(48% + 52px)/25px 25px, linear-gradient(var(--cyan),var(--cyan)) calc(65% + 26px) calc(48% + 52px)/25px 25px, linear-gradient(var(--acid),var(--acid)) 18% 72%/25px 25px, linear-gradient(var(--acid),var(--acid)) calc(18% + 26px) 72%/25px 25px, linear-gradient(var(--acid),var(--acid)) calc(18% + 52px) 72%/25px 25px, linear-gradient(var(--acid),var(--acid)) calc(18% + 26px) calc(72% - 26px)/25px 25px, linear-gradient(var(--acid),var(--acid)) calc(18% + 26px) calc(72% + 26px)/25px 25px; background-repeat: no-repeat; filter: drop-shadow(0 0 8px rgba(223,255,87,.2)); }
.combo-stamp { position: absolute; right: 24px; bottom: 22px; display: grid; padding: 14px 18px; border: 1px solid var(--acid); background: rgba(9,9,13,.84); transform: rotate(-2deg); }
.combo-stamp small,.combo-stamp span { color: var(--acid); font: .55rem var(--mono); }.combo-stamp strong { font-size: 2.1rem; line-height: 1; }

.principle-grid, .three-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.principle { min-height: 180px; padding: 25px; }.principle > span { color: var(--acid); font: .57rem var(--mono); letter-spacing: .1em; }.principle h3 { margin: 35px 0 8px; font-size: 1rem; }.principle p, .system p, .reward-spec p { color: #85828b; font-size: .78rem; line-height: 1.55; }
.split-layout { margin-top: 18px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }.split-layout > .card { padding: 27px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }.section-heading h3 { margin: 7px 0 0; font-size: 1.05rem; }.status-tag { padding: 5px 8px; border: 1px solid #4d5141; color: var(--acid); background: var(--acid-soft); font: .55rem var(--mono); }
.loop-list { list-style: none; padding: 0; margin: 20px 0 0; }.loop-list li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }.loop-list li > b { color: #55525c; font: .64rem var(--mono); }.loop-list strong { font-size: .78rem; }.loop-list p { margin: 3px 0 0; color: #77747e; font-size: .7rem; }.loop-list time { color: var(--acid); font: .62rem var(--mono); }
.question-card textarea, label textarea, label input, label select { width: 100%; margin-top: 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: #0d0d12; }
.question-card textarea, label textarea { padding: 13px; line-height: 1.55; resize: vertical; }.question-card h3 { margin: 9px 0 16px; }.field-help { color: #706d76; font-size: .68rem; line-height: 1.5; }

.page-intro { margin-bottom: 26px; display: flex; gap: 24px; justify-content: space-between; align-items: flex-end; }.page-intro h2 { margin: 9px 0 8px; font-size: clamp(2rem,4vw,3.4rem); }.page-intro p:last-child { max-width: 760px; margin: 0; color: #85828c; line-height: 1.55; font-size: .84rem; }.build-badge { min-width: 210px; padding: 13px 15px; display: grid; grid-template-columns: 10px 1fr; border: 1px solid var(--line); background: var(--panel); font: .56rem var(--mono); }.build-badge i { width: 6px; height: 6px; margin-top: 3px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 9px var(--acid); }.build-badge b { grid-column: 2; margin-top: 3px; color: var(--acid); }

.arena-toolbar { min-height: 64px; margin-bottom: 14px; padding: 11px 14px; display: flex; align-items: center; gap: 12px; }.arena-toolbar label { display: flex; align-items: center; gap: 8px; color: #85828c; font: .59rem var(--mono); }.arena-toolbar select { width: auto; min-width: 160px; margin: 0; padding: 8px 30px 8px 10px; }.arena-toolbar p { margin: 0 0 0 auto; color: #77747d; font: .62rem var(--mono); }
.arena-layout { display: grid; grid-template-columns: minmax(200px, .75fr) minmax(340px, 1.35fr) minmax(210px, .8fr); gap: 14px; align-items: stretch; }.fighter-panel,.loadout-panel { padding: 22px; }.fighter-panel h3 { margin: 15px 0 5px; }.fighter-quip { min-height: 48px; margin: 0; color: #76737d; font-size: .72rem; line-height: 1.5; }
.rival-avatar { height: 120px; margin: 20px 0; position: relative; border: 1px solid #302d31; background: radial-gradient(circle at center, rgba(255,93,93,.14), transparent 55%), #0d0c10; overflow: hidden; }.rival-avatar i { position: absolute; background: #b64a4a; border: 2px solid #361719; }.rival-avatar i:nth-child(1) { width: 54px; height: 48px; left: calc(50% - 27px); top: 38px; transform: rotate(45deg); }.rival-avatar i:nth-child(2),.rival-avatar i:nth-child(3) { width: 23px; height: 23px; top: 22px; }.rival-avatar i:nth-child(2) { left: calc(50% - 38px); transform: rotate(22deg); }.rival-avatar i:nth-child(3) { right: calc(50% - 38px); transform: rotate(-22deg); }
.health-label { margin-top: 18px; display: flex; justify-content: space-between; color: #85828c; font: .58rem var(--mono); }.health-label b { color: var(--ink); }.health-bar { height: 8px; margin-top: 7px; background: #292830; }.health-bar i { display: block; width: 100%; height: 100%; background: var(--danger); transition: width .2s ease; }.attack-clock { margin-top: 20px; padding: 14px; display: grid; grid-template-columns: 1fr auto; border: 1px solid #343139; background: #0d0d12; }.attack-clock span,.attack-clock small { color: #77747e; font: .54rem var(--mono); }.attack-clock strong { color: var(--orange); }.attack-clock small { grid-column: 1 / -1; margin-top: 7px; }.battle-log { height: 150px; margin-top: 14px; overflow: auto; mask-image: linear-gradient(to bottom, transparent, #000 12%, #000); }.battle-log p { margin: 0; padding: 8px 0; border-bottom: 1px solid #27262d; color: #8b8891; font-size: .66rem; line-height: 1.4; }.battle-log time { margin-right: 7px; color: var(--acid); font: .5rem var(--mono); }
.forge-stage { padding: 14px; overflow: hidden; }.forge-hud { min-height: 36px; display: flex; justify-content: space-between; gap: 10px; color: #6f6c76; font: .56rem var(--mono); }.forge-hud b { display: block; margin-top: 3px; color: var(--ink); font-size: .7rem; }.board-frame { position: relative; width: min(100%, 384px); margin: 0 auto; border: 1px solid #51505a; background: #07070a; box-shadow: 0 0 40px rgba(0,0,0,.55), 0 0 28px rgba(223,255,87,.035); }.board-frame canvas { display: block; width: 100%; height: auto; aspect-ratio: 6 / 11; outline: 0; }.game-overlay { position: absolute; inset: 0; padding: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: rgba(8,8,12,.88); backdrop-filter: blur(3px); }.game-overlay[hidden] { display: none; }.game-overlay strong { margin: 13px 0 8px; font-size: 1.35rem; letter-spacing: .07em; }.game-overlay p { max-width: 230px; margin: 0; color: #85828d; font-size: .72rem; line-height: 1.55; }.board-flash { position: absolute; inset: 0; pointer-events: none; border: 0 solid var(--acid); opacity: 0; }.board-flash.pulse { animation: board-pulse .26s ease; }@keyframes board-pulse { 35% { opacity: 1; border-width: 5px; box-shadow: inset 0 0 40px rgba(223,255,87,.35); } }
.pending-meter { width: min(100%,384px); min-height: 38px; margin: 10px auto 0; padding: 7px 9px; display: grid; grid-template-columns: 82px 1fr auto; gap: 8px; align-items: center; border: 1px solid #2c2b32; color: #68656e; font: .52rem var(--mono); }.pending-meter > div { display: flex; gap: 4px; }.pending-meter i { width: 8px; height: 14px; background: var(--danger); }.pending-meter b { color: #8e8b94; }
.turn-owner { margin: 16px 0; padding: 13px; border-left: 2px solid var(--acid); background: var(--acid-soft); }.turn-owner span,.next-rack > span,.hold-rack > span,.bag-readout > span { display: block; color: #73707a; font: .54rem var(--mono); letter-spacing: .08em; }.turn-owner strong { display: block; margin-top: 5px; font-size: .8rem; }.next-rack,.hold-rack,.bag-readout { margin-top: 20px; }.next-rack > div { margin-top: 8px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.mini-piece { min-height: 56px; padding: 7px 3px; display: grid; place-items: center; border: 1px solid #2e2d35; background: #0d0d12; color: var(--piece); font: 600 .67rem var(--mono); }.mini-piece small { display: block; color: #5d5a63; font-size: .48rem; }.hold-rack > div { min-height: 47px; margin-top: 8px; display: grid; place-items: center; border: 1px dashed #383740; color: #5d5a63; font: .6rem var(--mono); }.control-card { margin-top: 18px; padding: 12px; border: 1px solid #2d2c33; background: #101015; }.control-card strong { color: var(--acid); font: .58rem var(--mono); }.control-card p { margin: 8px 0 0; color: #797680; font-size: .61rem; line-height: 2.2; }.control-card kbd { min-width: 20px; margin: 0 2px; padding: 2px 5px; border: 1px solid #494751; border-bottom-width: 2px; border-radius: 2px; color: #b7b4bd; background: #202027; font: .56rem var(--mono); }.bag-readout > div { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }.bag-chip { padding: 4px 6px; border: 1px solid #34333b; color: var(--chip); background: #101015; font: .51rem var(--mono); }
.reward-overlay { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(5,5,8,.88); backdrop-filter: blur(8px); }.reward-overlay[hidden] { display: none; }.reward-panel { width: min(900px,100%); padding: 35px; }.reward-panel h2 { font-size: 2.6rem; }.reward-panel > p:not(.eyebrow) { color: #85828c; }.reward-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 25px; }.reward-card { min-height: 210px; padding: 20px; border: 1px solid #3b3941; color: var(--ink); background: #141419; text-align: left; cursor: pointer; }.reward-card:hover { border-color: var(--acid); transform: translateY(-2px); }.reward-card span { color: var(--acid); font: .56rem var(--mono); }.reward-card strong { display: block; margin: 25px 0 8px; font-size: 1.05rem; }.reward-card p { color: #817e87; font-size: .72rem; line-height: 1.5; }.reward-card b { display: block; margin-top: 18px; color: var(--acid); font: .6rem var(--mono); }

.legend { display: flex; gap: 14px; color: #74717b; font: .55rem var(--mono); }.legend i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: #777; }.legend .base { background: var(--cyan); }.legend .uncommon { background: var(--acid); }.legend .rare { background: var(--pink); }
.vault-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }.shape-card { position: relative; min-height: 220px; padding: 20px; overflow: hidden; }.shape-card::after { content: attr(data-rarity); position: absolute; top: 13px; right: 13px; color: var(--shape); font: .5rem var(--mono); letter-spacing: .08em; }.shape-card h3 { margin: 12px 0 4px; }.shape-card > p { margin: 0; color: #77747e; font-size: .68rem; }.shape-preview { height: 90px; margin-top: 17px; display: grid; place-items: center; border: 1px solid #2d2c34; background: #0d0d12; }.shape-grid { display: grid; grid-template-columns: repeat(var(--cols),15px); grid-template-rows: repeat(var(--rows),15px); }.shape-grid i { grid-column: calc(var(--x) + 1); grid-row: calc(var(--y) + 1); background: var(--shape); border: 1px solid rgba(0,0,0,.35); box-shadow: inset 0 0 5px rgba(255,255,255,.18); }.shape-meta { margin-top: 13px; display: flex; gap: 8px; flex-wrap: wrap; }.shape-meta span { padding: 4px 6px; border: 1px solid #303038; color: #7c7982; font: .5rem var(--mono); }.design-rule { margin-top: 18px; padding: 28px; }.design-rule h3 { margin: 8px 0 20px; }.design-rule > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }.design-rule span { color: #7c7982; font-size: .7rem; line-height: 1.5; }.design-rule b { display: block; margin-bottom: 4px; color: var(--acid); font: .55rem var(--mono); }

.route-map { position: relative; min-height: 280px; padding: 38px; display: flex; gap: 35px; align-items: center; justify-content: space-between; overflow: hidden; }.route-line { position: absolute; left: 9%; right: 9%; top: 50%; height: 1px; background: linear-gradient(90deg,var(--acid),#4a494f 70%,var(--pink)); }.route-node { position: relative; z-index: 1; width: 150px; min-height: 100px; padding: 14px; display: grid; text-align: left; border: 1px solid #434149; color: var(--ink); background: #111116; cursor: pointer; }.route-node span { color: #66636d; font: .55rem var(--mono); }.route-node b { margin-top: 12px; }.route-node small { color: #74717a; }.route-node.cleared { border-color: #69714c; }.route-node.cleared::after { content: "CLEARED"; color: var(--acid); font: .48rem var(--mono); }.route-node.current { border-color: var(--acid); box-shadow: 0 0 25px rgba(223,255,87,.13); }.route-node.current::after { content: "CURRENT"; color: var(--acid); font: .48rem var(--mono); }.route-node.boss { border-color: var(--pink); }.route-branch { display: grid; gap: 12px; }.reward-spec { padding: 25px; }.reward-spec > span { color: var(--acid); font: .58rem var(--mono); }.reward-spec h3 { margin: 28px 0 8px; }.reward-spec b { display: block; margin-top: 20px; color: #aaa7b0; font: .56rem var(--mono); }.economy-table,.decision-table { margin-top: 18px; padding: 28px; }
.table-wrap { margin-top: 20px; overflow-x: auto; }.table-wrap table { width: 100%; border-collapse: collapse; min-width: 650px; }.table-wrap th { color: #6f6c75; font: 500 .55rem var(--mono); letter-spacing: .08em; text-align: left; }.table-wrap th,.table-wrap td { padding: 13px 12px; border-bottom: 1px solid #2c2b32; }.table-wrap td { color: #8b8891; font-size: .7rem; }.table-wrap td:first-child { color: var(--ink); font-weight: 600; }

.lab-layout { display: grid; grid-template-columns: minmax(280px,.68fr) minmax(480px,1.32fr); gap: 18px; }.lab-controls { padding: 25px; }.lab-control { margin-top: 18px; }.range-heading { display: flex; justify-content: space-between; align-items: center; }.range-heading label { color: #aaa7af; font-size: .72rem; }.range-heading output { color: var(--acid); font: .58rem var(--mono); }.lab-control input { width: 100%; accent-color: var(--acid); }.lab-control small { color: #5e5b64; font-size: .58rem; }.lab-controls > .button { width: 100%; margin-top: 24px; }.lab-results { display: grid; gap: 18px; }.lab-results > .card { padding: 25px; }.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.metric-grid article { min-height: 95px; padding: 17px; border: 1px solid var(--line); background: var(--panel); }.metric-grid span { color: #6f6c75; font: .54rem var(--mono); }.metric-grid strong { display: block; margin: 8px 0 2px; font-size: 1.5rem; }.metric-grid small { color: #5d5a63; font-size: .58rem; }.probability-bars { margin-top: 20px; display: grid; gap: 8px; }.probability-row { display: grid; grid-template-columns: 70px 1fr 45px; gap: 10px; align-items: center; color: #89868f; font: .58rem var(--mono); }.probability-row i { height: 8px; background: #292830; }.probability-row i::after { content: ""; display: block; width: var(--value); height: 100%; background: var(--color); }.probability-row b { color: #aaa7b0; font-weight: 500; text-align: right; }.sample-stream { min-height: 94px; margin-top: 18px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; }.sample-stream span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #393740; color: var(--color); background: #0e0e13; font: .5rem var(--mono); }

.systems-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.system { min-height: 185px; padding: 24px; display: grid; grid-template-columns: 40px 1fr; gap: 10px; }.system > span { color: var(--acid); font-size: 1.2rem; }.system h3 { margin: 8px 0; font-size: .94rem; }
.filter-row { margin-bottom: 15px; display: flex; gap: 7px; }.filter-row button { padding: 7px 12px; border: 1px solid var(--line); color: #77747e; background: #111116; font: .56rem var(--mono); cursor: pointer; }.filter-row button.is-active { color: #111; border-color: var(--acid); background: var(--acid); }.feature-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }.board-lane { min-height: 420px; padding: 14px; border: 1px solid var(--line); background: #0d0d12; }.lane-heading { margin: 3px 3px 15px; display: flex; justify-content: space-between; }.lane-heading h3 { margin: 0; font: .66rem var(--mono); }.lane-heading span { color: var(--acid); font: .6rem var(--mono); }.feature-list { display: grid; gap: 8px; }.feature-card { padding: 14px; border: 1px solid #302f36; background: #17171d; }.feature-card.is-hidden { display: none; }.feature-card span { color: var(--acid); font: .5rem var(--mono); }.feature-card h4 { margin: 8px 0; font-size: .76rem; }.feature-card p { margin: 0; color: #74717b; font-size: .64rem; line-height: 1.45; }.feature-card footer { margin-top: 12px; display: flex; justify-content: space-between; }.feature-card button { padding: 2px 5px; border: 0; color: #66636c; background: none; font: .55rem var(--mono); cursor: pointer; }.feature-card button:hover { color: var(--ink); }.empty-state { padding: 20px; color: #56535d; font: .6rem var(--mono); text-align: center; border: 1px dashed #2c2b32; }
.playtest-layout { grid-template-columns: 1.25fr .75fr; }.playtest-metrics { margin-bottom: 18px; }.playtest-list { display: grid; gap: 9px; }.playtest-entry { padding: 18px; border: 1px solid var(--line); background: #121217; }.playtest-entry header { display: flex; justify-content: space-between; color: #68656e; font: .54rem var(--mono); }.playtest-entry h3 { margin: 10px 0; font-size: .83rem; }.playtest-entry p { color: #7f7c85; font-size: .68rem; line-height: 1.5; }.playtest-entry footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid #29282f; color: var(--acid); font-size: .65rem; }.hypothesis-card ul,.milestone ul { padding-left: 18px; color: #817e87; font-size: .69rem; line-height: 1.7; }.assumption { margin-top: 20px; padding: 14px; border-left: 2px solid var(--acid); background: var(--acid-soft); }.assumption strong { color: var(--acid); font: .57rem var(--mono); }.assumption p { margin: 7px 0 0; color: #8e8b94; font-size: .68rem; line-height: 1.5; }
.milestones { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }.milestone { min-height: 300px; padding: 22px; display: grid; grid-template-columns: 36px 1fr; gap: 8px; border: 1px solid var(--line); background: #111116; }.milestone > span { color: #5e5b64; font: .68rem var(--mono); }.milestone small { color: #696670; font: .52rem var(--mono); }.milestone h3 { margin: 18px 0 8px; }.milestone p { color: #7c7982; font-size: .7rem; line-height: 1.55; }.milestone.now { border-color: #62674b; background: linear-gradient(145deg,rgba(223,255,87,.08),#111116 55%); }.milestone.now > span,.milestone.now small { color: var(--acid); }.doc-links { display: grid; margin-top: 20px; }.doc-links a { padding: 14px 0; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: #aaa7b0; font-size: .72rem; text-decoration: none; }.doc-links a span { color: var(--acid); }

dialog { width: min(560px,calc(100% - 32px)); padding: 0; border: 1px solid #494750; border-radius: 5px; color: var(--ink); background: #141419; box-shadow: 0 30px 90px #000; }dialog::backdrop { background: rgba(5,5,8,.84); backdrop-filter: blur(5px); }dialog form { padding: 25px; }.dialog-heading { display: flex; justify-content: space-between; margin-bottom: 20px; }.dialog-heading h2 { margin: 6px 0 0; }.icon-button { width: 30px; height: 30px; border: 1px solid var(--line); color: #8b8891; background: #0f0f14; cursor: pointer; }dialog label { display: block; margin-top: 14px; color: #8b8891; font-size: .68rem; }label input,label select { height: 39px; padding: 0 10px; }.compact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.dialog-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 8px; }

/* Fleeting-aligned console language and combat feedback */
.sidebar { background: rgba(8, 12, 21, .95); border-color: rgba(104,126,164,.18); }
.topbar { background: rgba(7,10,18,.9); border-color: rgba(104,126,164,.18); }
.card { background: linear-gradient(145deg, rgba(17,26,42,.95), rgba(11,17,29,.97)); box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.hero { border-color: #2b3b57; box-shadow: 0 24px 100px rgba(0,0,0,.35), inset 0 0 80px rgba(45,70,104,.08); }
.hero { min-height: 0; grid-template-columns: minmax(0,1fr) minmax(340px,.88fr); gap: clamp(34px,5vw,76px); align-items: center; }
.hero::before { background: radial-gradient(circle at 77% 43%, rgba(105,212,208,.12), transparent 34%), radial-gradient(circle at 15% 70%, rgba(241,184,75,.05), transparent 28%); }
.hero-copy { min-width: 0; }.hero h2 { max-width: 650px; font-size: clamp(2.5rem,4.3vw,4.6rem); }.hero-board { width: 100%; min-width: 0; }
.hero-board { border-color: #2a3a56; background: radial-gradient(circle at 55% 45%, rgba(32,62,85,.32), transparent 45%), repeating-linear-gradient(0deg, transparent 0 25px, rgba(105,212,208,.05) 25px 26px), repeating-linear-gradient(90deg, transparent 0 25px, rgba(105,212,208,.05) 25px 26px), #080c16; }
.nav-item.is-active { color: var(--ink); }.button { font-weight: 700; box-shadow: 4px 4px 0 rgba(241,184,75,.14); }.button.quiet { color: var(--ink); background: transparent; }.forge-stage,.fighter-panel,.loadout-panel { box-shadow: none; }.forge-stage { border-color: #31425e; }.board-frame { border-color: #405472; background: #050812; box-shadow: 0 0 55px rgba(0,0,0,.6), 0 0 28px rgba(105,212,208,.07); }.game-overlay { background: rgba(5,8,18,.76); }
.rival-stack-head { margin-top: 16px; display: flex; justify-content: space-between; color: #7e899d; font: .53rem var(--mono); letter-spacing: .06em; }.rival-stack-head b { color: var(--cyan); font-weight: 500; }
.enemy-stack { height: 88px; margin-top: 7px; padding: 6px; display: grid; grid-template-columns: repeat(10,1fr); grid-template-rows: repeat(8,1fr); gap: 2px; border: 1px solid #27334a; background: #050812; overflow: hidden; }
.enemy-stack i { min-width: 0; min-height: 0; background: rgba(105,126,154,.08); border: 1px solid rgba(105,126,154,.08); transition: background .16s ease, box-shadow .16s ease, transform .16s ease; }.enemy-stack i.is-filled { background: var(--cyan); border-color: rgba(255,255,255,.15); box-shadow: 0 0 7px rgba(105,212,208,.38); animation: enemy-cell-in .22s ease both; }.enemy-stack i.is-gap { background: rgba(241,184,75,.12); }
@keyframes enemy-cell-in { from { opacity: 0; transform: translateY(-5px) scale(.65); } }
.rival-panel.is-hit { animation: rival-hit .34s ease; }.rival-panel.is-hit .enemy-stack { box-shadow: 0 0 24px rgba(105,212,208,.3); }
@keyframes rival-hit { 25% { transform: translateX(-4px); border-color: var(--cyan); } 55% { transform: translateX(3px); } }
.oracle-avatar { background: radial-gradient(circle at center, rgba(169,143,232,.18), transparent 58%), #080b15; }.oracle-avatar i { background: #7e65ba; border-color: #241a3b; box-shadow: 0 0 18px rgba(169,143,232,.25); }
.active-curse { min-height: 76px; margin-top: 16px; padding: 11px; display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center; border: 1px solid rgba(169,143,232,.35); background: rgba(169,143,232,.07); }.active-curse > i { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(169,143,232,.5); color: #cbbdf0; font-style: normal; }.active-curse b,.active-curse small { display: block; }.active-curse b { color: #d8cff1; font: .56rem var(--mono); }.active-curse small { margin-top: 5px; color: #8490a4; font-size: .55rem; line-height: 1.4; }
.forge-stage.is-cursed { animation: curse-cast .5s ease; }.forge-stage.is-cursed .board-frame { animation: curse-board .8s ease; }
@keyframes curse-cast { 25% { transform: translateX(-3px); border-color: var(--pink); } 55% { transform: translateX(3px); } }
@keyframes curse-board { 35% { box-shadow: 0 0 60px rgba(169,143,232,.38), inset 0 0 55px rgba(169,143,232,.14); } }
.money-float { position: absolute; z-index: 5; left: 50%; top: 22%; pointer-events: none; opacity: 0; color: var(--orange); font: 700 1.05rem var(--mono); text-shadow: 0 0 15px rgba(241,184,75,.75); transform: translate(-50%,0); }.money-float.is-active { animation: money-rise .85s ease both; }
@keyframes money-rise { 0% { opacity: 0; transform: translate(-50%,15px) scale(.8); } 20%,70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-38px) scale(1.12); } }
.board-flash.drop { animation: hard-drop-flash .18s ease; }.board-flash.send { animation: send-flash .4s ease; }
@keyframes hard-drop-flash { 35% { opacity: .8; background: linear-gradient(180deg,rgba(105,212,208,.28),transparent 55%); } }
@keyframes send-flash { 30% { opacity: 1; border-right: 6px solid var(--cyan); box-shadow: inset -32px 0 45px rgba(105,212,208,.2), 30px 0 55px rgba(105,212,208,.23); } }
#credit-count.is-paid { animation: credit-tick .45s ease; color: var(--orange); }
@keyframes credit-tick { 35% { transform: scale(1.35); text-shadow: 0 0 12px var(--orange); } }
.hold-rack.is-locked > div { padding: 9px; display: flex; flex-direction: column; gap: 3px; color: #718098; background: repeating-linear-gradient(135deg,rgba(37,49,74,.18) 0 7px,rgba(17,26,42,.36) 7px 14px); }.hold-rack.is-locked b { color: #8e9aae; font: .59rem var(--mono); }.hold-rack.is-locked small { color: var(--acid); font: .48rem var(--mono); }
.mini-piece.is-blind { color: var(--pink); background: repeating-linear-gradient(135deg,rgba(169,143,232,.13) 0 6px,rgba(8,13,23,.7) 6px 12px); animation: fog-pulse 1s ease-in-out infinite alternate; }@keyframes fog-pulse { to { opacity: .55; } }
.payout-recap { margin: 20px 0 13px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.payout-recap span { padding: 13px; border: 1px solid var(--line); background: rgba(6,10,18,.48); color: var(--muted); font: .55rem var(--mono); }.payout-recap b { display: block; margin-top: 7px; color: var(--orange); font-size: 1rem; }.payout-recap span:last-child { border-color: rgba(241,184,75,.45); background: rgba(241,184,75,.07); }
.augment-market { margin-top: 18px; padding: 28px; }.augment-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }.augment-grid article { min-height: 150px; padding: 15px; display: grid; grid-template-columns: 30px 1fr; gap: 10px; border: 1px solid var(--line); background: rgba(6,10,18,.55); }.augment-grid article > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(105,212,208,.4); color: var(--cyan); font: .65rem var(--mono); }.augment-grid b { font-size: .75rem; }.augment-grid p { margin: 7px 0 0; color: var(--muted); font-size: .64rem; line-height: 1.5; }.augment-grid strong { grid-column: 2; align-self: end; color: var(--acid); font: .64rem var(--mono); }
.attack-clock { background: #080d17; border-color: var(--line); }.control-card,.mini-piece,.hold-rack > div { background: #090e18; border-color: var(--line); }.turn-owner { background: rgba(105,212,208,.08); border-color: var(--cyan); }.turn-owner strong,.control-card strong { color: var(--cyan); }.bag-chip { background: #090e18; border-color: var(--line); }
.gallery-count { min-width: 105px; padding: 13px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(13,19,32,.8); }.gallery-count strong { color: var(--acid); font: 1.5rem var(--mono); }.gallery-count span { color: var(--muted); font: .52rem var(--mono); }.upgrade-filters { flex-wrap: wrap; }.upgrade-gallery { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; }.upgrade-card { position: relative; min-height: 245px; padding: 19px; display: flex; flex-direction: column; }.upgrade-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(105,212,208,.45); color: var(--cyan); background: rgba(105,212,208,.06); font: 1rem var(--mono); box-shadow: 0 0 18px rgba(105,212,208,.08); }.upgrade-card-head { margin-top: 18px; display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font: .5rem var(--mono); }.upgrade-card-head b { color: var(--acid); }.upgrade-card h3 { margin: 9px 0 7px; font-size: .9rem; }.upgrade-card p { margin: 0; color: var(--muted); font-size: .66rem; line-height: 1.55; }.upgrade-card button { margin-top: auto; padding: 8px; border: 1px solid var(--line); color: #7f8ba0; background: #080d17; font: .51rem var(--mono); cursor: pointer; }.upgrade-card button:hover,.upgrade-card button.is-pinned { color: #171006; border-color: var(--acid); background: var(--acid); }.upgrade-thesis { margin-top: 16px; padding: 26px; display: grid; grid-template-columns: .7fr 1.3fr; gap: 30px; align-items: center; }.upgrade-thesis h3 { margin: 8px 0 0; }.upgrade-thesis > p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.65; }

/* Forge Codex */
.codex-volume { min-width: 130px; padding: 12px 15px; display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid #31425e; background: #090e18; }.codex-volume > span { color: #718099; font: .5rem var(--mono); }.codex-volume > strong { grid-row: span 2; color: var(--orange); font: 2.6rem/1 var(--mono); }.codex-volume small { color: #66748b; font: .48rem var(--mono); }.codex-volume small b { color: var(--cyan); }
.codex-shell { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 18px; align-items: start; }.codex-index { position: sticky; top: 96px; padding: 22px; box-shadow: none; }.codex-search { display: grid; gap: 8px; margin-top: 22px; color: #748097; font: .52rem var(--mono); }.codex-search input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #2c3c56; color: var(--ink); background: #060a12; font: .65rem var(--mono); }.codex-filters { margin-top: 18px; display: grid; gap: 5px; }.codex-filters button { min-height: 35px; padding: 7px 10px; border: 1px solid transparent; color: #78869d; background: transparent; font: .57rem var(--mono); text-align: left; cursor: pointer; }.codex-filters button:hover { border-color: #31425e; color: var(--ink); }.codex-filters button.is-active { border-color: rgba(241,184,75,.5); color: var(--orange); background: rgba(241,184,75,.07); }.codex-note { margin-top: 22px; padding: 14px; border-left: 2px solid var(--cyan); background: rgba(105,212,208,.05); }.codex-note strong { color: var(--cyan); font: .52rem var(--mono); }.codex-note p { margin: 8px 0 0; color: #738198; font-size: .61rem; line-height: 1.55; }.pinned-note { border-color: var(--orange); }.pinned-note > b { display: block; margin-top: 8px; color: var(--orange); font: 1.8rem var(--mono); }.codex-index .legend { margin-top: 20px; display: grid; gap: 8px; }
.codex-pages.vault-grid,.codex-pages.upgrade-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }.codex-entry { position: relative; min-width: 0; padding: 0; overflow: hidden; border: 1px solid #2c3c56; background: linear-gradient(145deg,#101a2b,#0a111e 68%); box-shadow: 0 18px 50px rgba(0,0,0,.22); }.codex-entry::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg,transparent 0 31px,rgba(105,126,154,.035) 31px 32px); }.codex-entry > header { position: relative; z-index: 1; min-height: 35px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #273650; color: #607088; font: .48rem var(--mono); }.codex-entry > header b { color: var(--shape,var(--orange)); font-weight: 500; }
.codex-entry.shape-card { min-height: 480px; padding: 0; display: grid; grid-template-rows: auto 150px 1fr; }.shape-card::after { display: none; }.codex-entry .shape-preview { position: relative; z-index: 1; height: auto; margin: 0; border: 0; border-bottom: 1px solid #273650; background: radial-gradient(circle,rgba(105,212,208,.08),transparent 60%),#070c15; }.codex-entry .shape-grid { transform: scale(1.55); }.codex-entry-copy { position: relative; z-index: 1; padding: 19px; }.codex-entry-copy h3 { margin: 8px 0 7px; font-size: 1.05rem; }.codex-entry-copy > p:not(.eyebrow) { min-height: 34px; margin: 0; color: #8895a9; font-size: .7rem; }.codex-entry dl { margin: 17px 0 0; display: grid; gap: 9px; }.codex-entry dl div { padding-top: 8px; display: grid; grid-template-columns: 92px 1fr; gap: 9px; border-top: 1px solid #233149; }.codex-entry dt { color: #65758d; font: .48rem var(--mono); }.codex-entry dd { margin: 0; color: #8c9aae; font-size: .61rem; line-height: 1.4; }
.codex-entry.upgrade-card { min-height: 510px; padding: 0; display: flex; }.upgrade-title-row { position: relative; z-index: 1; padding: 18px 18px 13px; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; }.upgrade-title-row h3 { margin: 5px 0 0; font-size: 1rem; }.upgrade-title-row > strong { color: var(--orange); font: 1rem var(--mono); }.upgrade-effect { position: relative; z-index: 1; min-height: 66px; padding: 14px 18px; border-block: 1px solid #273650; color: #a8b3c4 !important; background: rgba(105,212,208,.045); font-size: .72rem !important; }.upgrade-card dl { position: relative; z-index: 1; padding: 0 18px; }.upgrade-card button { position: relative; z-index: 1; margin: auto 18px 18px; }.upgrade-card.is-pinned { border-color: rgba(241,184,75,.75); box-shadow: 0 0 0 1px rgba(241,184,75,.18),0 18px 50px rgba(0,0,0,.25); }.upgrade-card.is-pinned button { color: #15100a; border-color: var(--orange); background: var(--orange); }.codex-empty { grid-column: 1/-1; }

/* Playtest lab */
.experiment-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }.experiment-card { min-height: 330px; padding: 17px; display: flex; flex-direction: column; border: 1px solid #2b3b55; background: linear-gradient(160deg,#111b2d,#090f1a); }.experiment-card header { display: flex; justify-content: space-between; color: #607089; font: .49rem var(--mono); }.experiment-card header b { color: var(--orange); }.experiment-card h3 { margin: 10px 0 8px; font-size: .85rem; }.experiment-card > p:not(.eyebrow) { color: #7f8da3; font-size: .63rem; line-height: 1.5; }.experiment-card > div { margin-top: auto; padding: 10px; border-left: 2px solid var(--cyan); background: rgba(105,212,208,.05); }.experiment-card > div strong,.experiment-card > div span { display: block; }.experiment-card > div strong { color: var(--cyan); font: .48rem var(--mono); }.experiment-card > div span { margin-top: 5px; color: #8492a7; font-size: .59rem; line-height: 1.4; }.experiment-card button { margin-top: 12px; min-height: 34px; border: 1px solid #344862; color: var(--ink); background: #0a111d; font: .51rem var(--mono); cursor: pointer; }.experiment-card button:hover { color: #15110a; border-color: var(--orange); background: var(--orange); }.playtest-protocol { margin-top: 18px; padding: 22px; display: grid; grid-template-columns: .7fr 1.3fr; gap: 24px; }.playtest-protocol h3 { margin: 8px 0; }.playtest-protocol ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; list-style: none; }.playtest-protocol li { padding: 11px; display: grid; grid-template-columns: 28px 1fr; gap: 7px; border: 1px solid #293951; color: #8290a5; font-size: .63rem; line-height: 1.45; }.playtest-protocol li b { color: var(--orange); font: .55rem var(--mono); }.evidence-heading { margin: 28px 0 12px; }.playtest-entry small { color: var(--cyan); font: .49rem var(--mono); }

/* MVP command center */
.mvp-score { min-width: 145px; padding: 14px; display: grid; border: 1px solid #344862; background: #080d17; }.mvp-score span,.mvp-score small { color: #748299; font: .5rem var(--mono); }.mvp-score strong { margin: 5px 0; color: var(--orange); font: 1.8rem var(--mono); }.mvp-progress { padding: 24px; display: grid; grid-template-columns: 1fr .75fr; gap: 30px; align-items: center; }.mvp-progress h3 { margin: 8px 0; }.mvp-progress p { margin: 0; color: #7f8ca1; font-size: .7rem; }.mvp-progress-track { height: 14px; padding: 3px; border: 1px solid #31445f; background: #050912; }.mvp-progress-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--cyan),var(--orange)); transition: width .25s ease; }.mvp-layout { margin-top: 15px; display: grid; grid-template-columns: 1.4fr .6fr; gap: 15px; }.mvp-checklist-panel { padding: 23px; }.mvp-checklist { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }.mvp-item { min-height: 66px; padding: 11px; display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; border: 1px solid #293950; color: #8997aa; background: #080e18; font-size: .64rem; line-height: 1.4; cursor: pointer; }.mvp-item input { margin: 2px 0 0; accent-color: var(--cyan); }.mvp-item b { display: block; margin-bottom: 4px; color: var(--orange); font: .48rem var(--mono); }.mvp-item.is-done { color: #6f7e91; border-color: rgba(105,212,208,.22); background: rgba(105,212,208,.035); }.mvp-item.is-done span { text-decoration: line-through; text-decoration-color: rgba(105,212,208,.35); }.priority-stack { display: grid; gap: 9px; }.priority-card { padding: 18px; border: 1px solid #2d3d56; background: #0b121f; }.priority-card > span { color: #718097; font: .51rem var(--mono); }.priority-card h3 { margin: 10px 0 6px; font-size: .83rem; }.priority-card p { margin: 0; color: #79879c; font-size: .62rem; line-height: 1.5; }.priority-card.now { border-color: rgba(241,184,75,.55); }.priority-card.now > span { color: var(--orange); }.priority-card.next { border-color: rgba(105,212,208,.4); }.priority-card.next > span { color: var(--cyan); }.priority-card.later { opacity: .72; }.distraction-guard { margin: 15px 0; padding: 25px; display: grid; grid-template-columns: .65fr 1fr 1fr; gap: 25px; align-items: center; }.distraction-guard h3 { margin: 8px 0; }.distraction-guard blockquote { margin: 0; padding-left: 16px; border-left: 2px solid var(--orange); color: var(--ink); font-size: 1.05rem; line-height: 1.4; }.distraction-guard > p { margin: 0; color: #7e8ca1; font-size: .68rem; line-height: 1.6; }

@media (max-width: 1150px) {
  .arena-layout { grid-template-columns: minmax(210px,.75fr) minmax(330px,1.25fr); }.loadout-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.loadout-panel > * { margin-top: 0; }.loadout-panel > .eyebrow { grid-column: 1 / -1; }.bag-readout { grid-column: span 2; }
  .vault-grid { grid-template-columns: repeat(2,1fr); }.milestones { grid-template-columns: repeat(2,1fr); }.augment-grid { grid-template-columns: repeat(2,1fr); }.upgrade-gallery { grid-template-columns: repeat(2,1fr); }.experiment-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
  :root { --sidebar: 0px; }.sidebar { position: sticky; top: 0; width: 100%; height: auto; padding: 10px 14px; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }.brand { margin: 0 12px 0 0; flex: 0 0 auto; }.brand-mark { width: 25px; height: 25px; padding: 2px; }.brand-mark::after { inset: 8px; font-size: .34rem; }.brand small,.sidebar-note { display: none; }.main-nav { display: flex; gap: 3px; }.nav-item { white-space: nowrap; padding: 9px 10px; }.nav-item span { display: none; }main { margin-left: 0; }.topbar { padding: 16px 20px; }.topbar > div:first-child,.save-state { display: none; }.top-actions { width: 100%; }.view { padding: 24px 20px; }.hero { padding: 35px; grid-template-columns: 1fr; }.hero h2 { max-width: 720px; }.hero-board { min-height: 290px; }.principle-grid,.three-grid,.systems-grid { grid-template-columns: repeat(2,1fr); }.split-layout,.lab-layout { grid-template-columns: 1fr; }.arena-layout { grid-template-columns: 1fr minmax(330px,1.2fr); }.loadout-panel { grid-template-columns: repeat(2,1fr); }.vault-grid,.upgrade-gallery { grid-template-columns: repeat(2,1fr); }.codex-shell { grid-template-columns: 1fr; }.codex-index { position: static; }.codex-filters { grid-template-columns: repeat(3,1fr); }.experiment-grid { grid-template-columns: repeat(2,1fr); }.mvp-layout { grid-template-columns: 1fr; }.feature-board { grid-template-columns: 1fr; }.board-lane { min-height: 0; }.route-map { flex-wrap: wrap; }.route-line { display: none; }.design-rule > div { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px) {
  .sidebar { align-items: flex-start; }.brand > span:last-child { display: none; }.main-nav { overflow-x: auto; }.nav-item { font-size: .7rem; }.topbar { min-height: 58px; }.button { min-height: 34px; padding: 0 11px; }.view { padding: 20px 14px; }.page-intro { align-items: flex-start; flex-direction: column; }.hero { padding: 27px 22px; min-height: 0; }.hero h2 { font-size: clamp(2.2rem,12vw,3.5rem); }.hero-board { min-height: 260px; }.hero-actions { flex-direction: column; }.principle-grid,.three-grid,.systems-grid,.vault-grid,.milestones,.augment-grid,.upgrade-gallery,.experiment-grid,.codex-pages.vault-grid,.codex-pages.upgrade-gallery { grid-template-columns: 1fr; }.codex-filters { grid-template-columns: 1fr 1fr; }.codex-entry.shape-card,.codex-entry.upgrade-card { min-height: 0; }.upgrade-thesis { grid-template-columns: 1fr; }.playtest-protocol,.mvp-progress,.distraction-guard { grid-template-columns: 1fr; }.playtest-protocol ol,.mvp-checklist { grid-template-columns: 1fr; }.split-layout > .card { padding: 21px; }.arena-toolbar { align-items: stretch; flex-direction: column; }.arena-toolbar label { justify-content: space-between; }.arena-toolbar p { margin: 5px 0; }.arena-layout { grid-template-columns: 1fr; }.fighter-panel { order: 2; }.forge-stage { order: 1; }.loadout-panel { order: 3; display: grid; grid-template-columns: 1fr; }.bag-readout { grid-column: auto; }.rival-avatar { height: 90px; }.fighter-quip { min-height: 0; }.battle-log { height: 100px; }.reward-grid,.payout-recap { grid-template-columns: 1fr; }.reward-panel { max-height: calc(100vh - 30px); padding: 24px; overflow: auto; }.reward-card { min-height: 150px; }.route-map { align-items: stretch; flex-direction: column; }.route-node { width: 100%; }.route-branch { width: 100%; }.metric-grid { grid-template-columns: 1fr; }.design-rule > div { grid-template-columns: 1fr; }.compact-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }