/* Prototype 02: Cobalt Burn */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
body { font-family: var(--font-ui); color: var(--text); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; }

/* ---------- fixed 16:9 stage ---------- */
.viewport { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(ellipse at center, #0a1a33, #000 70%); }
.stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  overflow: hidden; background: var(--bg); font-variant-numeric: tabular-nums; user-select: none;
}
.fx { position: absolute; inset: 0; width: 1920px; height: 1080px; transition: filter var(--dur-panel) var(--ease-out); }
.screen { position: absolute; inset: 0; visibility: hidden; }
.screen.is-on { visibility: visible; }
.overlay { z-index: 5; }
.inventory { transition: filter var(--dur-panel) var(--ease-out); }
/* pause freezes and dims everything underneath */
.stage.is-dimmed .fx, .stage.is-dimmed .inventory { filter: blur(6px) saturate(0.5) brightness(0.55); }

.fx-dots { position: absolute; inset: 0; z-index: 28; pointer-events: none; opacity: 0.07; background: radial-gradient(circle, #fff 1px, transparent 1.4px) 0 0 / 6px 6px; -webkit-mask: linear-gradient(135deg, #000, transparent 45%, transparent 60%, #000); mask: linear-gradient(135deg, #000, transparent 45%, transparent 60%, #000); }
.fx-vignette { position: absolute; inset: 0; z-index: 29; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 0.55) 100%); }

.eyebrow { font-weight: 700; font-size: 14px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--orange); }

/* ---------- shared shapes ---------- */
.band { position: absolute; background: linear-gradient(180deg, #ff8f45, var(--orange) 40%, var(--orange-deep)); }
.band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: var(--hazard); }
.band::before { top: 0; }
.band::after { bottom: 0; }

/* halftone duotone afterimage: the dot mask hides how far the art is enlarged */
.echo { position: absolute; pointer-events: none; mix-blend-mode: screen; opacity: 0.55;
  -webkit-mask: radial-gradient(circle, #000 46%, transparent 48%) 0 0 / 7px 7px; mask: radial-gradient(circle, #000 46%, transparent 48%) 0 0 / 7px 7px; }
.echo img { width: 100%; height: 100%; filter: url(#duo-orange); }

.logo-mark { position: relative; width: 84px; height: 84px; flex: none; }
.logo-mark i { position: absolute; display: block; }
.logo-mark i:first-child { left: 0; top: 0; width: 62px; height: 62px; background: var(--ink); }
.logo-mark i:last-child { right: 0; bottom: 0; width: 32px; height: 32px; background: var(--cobalt); }

/* skewed blade button: the shape skews, the text stays upright */
.menu { display: grid; gap: 10px; }
.blade {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 56px 1fr auto; align-items: center;
  width: 560px; height: 62px; padding: 0 30px 0 26px; text-align: left; outline: none;
  font-weight: 700; font-size: 30px; letter-spacing: 0.06em; text-transform: uppercase;
  translate: 0 0; scale: 1;
  transition: translate var(--dur-focus) var(--ease-out), scale var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out);
}
.blade::before, .blade::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--skew)); }
.blade::before { background: linear-gradient(90deg, rgb(15 37 71 / 0.85), rgb(15 37 71 / 0.35)); box-shadow: inset 3px 0 0 var(--sky); }
.blade::after { background: var(--orange); transform: skewX(var(--skew)) scaleX(0); transform-origin: left; transition: transform var(--dur-focus) var(--ease-out); }
.blade .idx { font-size: 15px; letter-spacing: 0.1em; color: var(--orange); transition: color var(--dur-press) var(--ease-out); }
.blade .meta { font-size: 15px; font-weight: 600; letter-spacing: 0.16em; color: var(--muted); transition: color var(--dur-press) var(--ease-out); }
.blade.is-focus { color: var(--ink); translate: 16px 0; }
.blade.is-focus::after { transform: skewX(var(--skew)) scaleX(1); }
.blade.is-focus .idx, .blade.is-focus .meta { color: var(--ink); }
.blade:active { scale: 0.97; }
.blade.is-locked .label { color: var(--muted); }
.blade.is-locked::after { background: var(--line); }
.blade.is-locked.is-focus, .blade.is-locked.is-focus .label, .blade.is-locked.is-focus .idx, .blade.is-locked.is-focus .meta { color: var(--text); }

/* diamonds: mod sockets, the storage lattice, the spotlight art */
.dia { --rc: var(--line); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--rc); }
.dia > .dia-in { position: absolute; inset: 3px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #000; overflow: hidden; }
.dia .mod-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-focus) var(--ease-out); }

/* ---------- TITLE ---------- */
.t-echo { left: 1110px; top: -70px; width: 640px; height: 1152px; }
.t-band { left: -200px; top: 300px; width: 2400px; height: 330px; transform-origin: 0 0; transform: rotate(-6deg); z-index: 1; }
.logo { position: absolute; left: 150px; top: 318px; z-index: 2; display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; width: 1100px;
  transform-origin: -350px -18px; transform: rotate(-6deg); }
.logo .logo-mark { margin-bottom: 34px; }
.logo-word { display: flex; font-family: var(--font-display); font-weight: 900; font-size: 262px; line-height: 0.82; letter-spacing: -0.005em; color: var(--ink); text-transform: uppercase; }
.logo-word span { display: inline-block; }
.logo-sub { position: relative; flex-basis: 100%; margin: 6px 0 0 112px; width: max-content; padding: 6px 22px 6px 28px; isolation: isolate;
  font-weight: 700; font-size: 26px; letter-spacing: 0.58em; text-transform: uppercase; color: var(--orange); }
.logo-sub::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: skewX(var(--skew)); }
.t-cas { position: absolute; left: 1330px; top: 250px; width: 405px; height: 729px; z-index: 3; }
.t-cas img { width: 100%; height: 100%; filter: drop-shadow(-4px 0 0 rgb(255 122 42 / 0.55)) drop-shadow(0 0 40px rgb(42 98 196 / 0.55)); }
.t-menu { position: absolute; left: 150px; top: 604px; z-index: 4; gap: 8px; }
.t-menu .blade:nth-child(1) { margin-left: 70px; }
.t-menu .blade:nth-child(2) { margin-left: 56px; }
.t-menu .blade:nth-child(3) { margin-left: 42px; }
.t-menu .blade:nth-child(4) { margin-left: 28px; }
.t-menu .blade:nth-child(5) { margin-left: 14px; }
.t-notes { position: absolute; right: 70px; top: 60px; width: 360px; padding: 16px 24px 18px; z-index: 4; isolation: isolate; }
.t-notes::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(6 16 34 / 0.78); box-shadow: inset 3px 0 0 var(--orange); transform: skewX(var(--skew)); }
.t-notes p:last-child { margin-top: 8px; font-size: 17px; line-height: 1.4; color: var(--muted); }
.t-notes b { color: var(--text); font-weight: 700; }

/* ---------- INVENTORY ---------- */
.inventory { background: linear-gradient(180deg, rgb(6 16 31 / 0.5), rgb(6 16 31 / 0.78)); }
.i-head { position: absolute; left: 40px; right: 40px; top: 30px; height: 160px; z-index: 3; }
.crumb { position: absolute; left: 4px; top: 6px; font-weight: 700; font-size: 15px; letter-spacing: 0.3em; color: var(--sky); }
.crumb i { font-style: normal; margin: 0 10px; color: var(--orange); }
.i-title { position: absolute; left: 0; top: 30px; font-family: var(--font-display); font-weight: 900; font-size: 136px; line-height: 0.82; text-transform: uppercase; letter-spacing: -0.005em; }
.i-title::after { content: ""; position: absolute; left: 4px; bottom: -16px; width: 180px; height: 9px; background: var(--hazard); transform: skewX(var(--skew)); }
.callout { --b: var(--orange); position: absolute; left: 640px; top: 24px; width: 560px; padding: 16px 28px 18px 40px; isolation: isolate; }
.callout::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(6 16 34 / 0.82); box-shadow: inset 6px 0 0 var(--b); transform: skewX(var(--skew)); }
.callout-src { display: block; font-weight: 700; font-size: 14px; letter-spacing: 0.32em; color: var(--b); }
.callout-msg { display: block; margin-top: 6px; font-weight: 700; font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; }
.callout.is-ok { --b: var(--sky); }
.callout.is-warn { --b: var(--r-elite); }
.counters { position: absolute; right: 0; top: 0; display: flex; gap: 44px; }
.count { display: flex; flex-direction: column; gap: 8px; }
.count b { font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: 1; }
.count span { font-weight: 700; font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.tabs { position: absolute; right: 0; top: 104px; display: flex; gap: 8px; }
.tab { position: relative; isolation: isolate; height: 42px; padding: 0 24px; font-weight: 700; font-size: 17px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); outline: none; transition: color var(--dur-focus) var(--ease-out); }
.tab::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--line); transform: skewX(var(--skew)); transition: background-color var(--dur-focus) var(--ease-out), border-color var(--dur-focus) var(--ease-out); }
.tab.is-active { color: var(--ink); }
.tab.is-active::before { background: var(--orange); border-color: var(--orange); }
.tab:focus-visible::before { border-color: var(--sky); }

.rig { position: absolute; left: 0; top: 190px; width: 830px; height: 890px; }
.i-band { left: -120px; top: 360px; width: 1100px; height: 160px; transform: rotate(-14deg); opacity: 0.92; }
.i-echo { left: 130px; top: -30px; width: 560px; height: 1008px; opacity: 0.4; }
.i-cas { position: absolute; left: 205px; top: 70px; width: 405px; height: 729px; z-index: 1; filter: drop-shadow(-3px 0 0 rgb(255 122 42 / 0.45)) drop-shadow(0 0 34px rgb(42 98 196 / 0.5)); }

.socket { position: absolute; z-index: 2; outline: none; translate: 0 0; scale: 1; transition: scale var(--dur-focus) var(--ease-out), translate var(--dur-focus) var(--ease-out); }
.socket .dia { position: absolute; inset: 0; transition: background-color var(--dur-focus) var(--ease-out); }
.socket.is-empty .dia { --rc: rgb(42 79 134 / 0.85); }
.socket.is-empty .dia-in { background: rgb(6 16 31 / 0.82); display: grid; place-items: center; }
.socket.is-empty .dia-in::after { content: ""; width: 18%; height: 18%; border: 2px solid var(--line); transform: rotate(45deg); }
.socket.passive .dia { --edge: 1; }
.socket .s-label { position: absolute; left: 50%; top: calc(100% + 2px); max-width: 210px; translate: -50% 0; padding: 3px 12px 4px; text-align: center; pointer-events: none; background: rgb(6 16 34 / 0.88); box-shadow: inset 0 -2px 0 var(--line); white-space: nowrap; }
.s-name { display: block; font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-meta { display: block; margin-top: 1px; font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.socket.passive .s-meta { color: var(--sky); }
.socket.is-current, .socket:focus-visible { scale: 1.06; }
.socket.is-current .dia, .socket:focus-visible .dia { background: var(--sky); }
.socket.is-target .dia { background: var(--orange); }
.socket.is-target::after { content: ""; position: absolute; inset: -10px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--orange-32); animation: socket-call 1.1s var(--ease-out) infinite; z-index: -1; }
@keyframes socket-call { from { opacity: 1; transform: scale(0.9); } to { opacity: 0; transform: scale(1.18); } }
.socket:active { scale: 0.97; }
.weapons { position: absolute; left: 40px; bottom: 34px; display: flex; gap: 14px; z-index: 2; }
.weapon { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 20px 0 14px; outline: none; font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; }
.weapon::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(6 16 34 / 0.85); border: 1px solid var(--line); transform: skewX(var(--skew)); transition: border-color var(--dur-focus) var(--ease-out); }
.weapon em { font-style: normal; color: var(--muted); font-size: 12px; letter-spacing: 0.22em; }
.weapon img { width: 34px; height: 34px; object-fit: contain; }
.weapon.is-current::before, .weapon:focus-visible::before { border-color: var(--sky); }

.store { position: absolute; left: 860px; top: 200px; width: 1020px; height: 370px; z-index: 2; }
.store-head { display: flex; justify-content: space-between; align-items: center; padding-right: 20px; }
.store-head h2 { font-family: var(--font-display); font-weight: 800; font-size: 36px; text-transform: uppercase; letter-spacing: 0.02em; }
.store-head em { margin-left: 10px; font-style: normal; font-family: var(--font-ui); font-weight: 700; font-size: 18px; letter-spacing: 0.12em; color: var(--muted); }
.filters { display: flex; gap: 8px; }
.chip { position: relative; isolation: isolate; height: 34px; padding: 0 18px; font-weight: 700; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); outline: none; transition: color var(--dur-focus) var(--ease-out); }
.chip::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--line); transform: skewX(var(--skew)); transition: background-color var(--dur-focus) var(--ease-out); }
.chip.is-active { color: var(--ink); }
.chip.is-active::before { background: var(--sky); border-color: var(--sky); }
.chip:focus-visible::before { border-color: var(--orange); }
.lattice { position: relative; margin-top: 20px; height: 280px; }
.lattice.is-drop .cell-empty .dia { --rc: var(--orange-32); }
.cell { position: absolute; width: 128px; height: 128px; outline: none; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); scale: 1; transition: scale var(--dur-focus) var(--ease-out); }
.cell .dia { position: absolute; inset: 0; transition: background-color var(--dur-focus) var(--ease-out); }
.cell .cd { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; padding: 1px 7px; background: rgb(0 0 0 / 0.78); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; color: var(--text); }
.cell .new { position: absolute; left: 50%; top: 12px; width: 12px; height: 12px; margin-left: -6px; background: var(--orange); transform: rotate(45deg); box-shadow: 0 0 10px var(--orange); }
.cell.is-current .dia, .cell:focus-visible .dia { background: var(--sky); }
.cell.is-current .mod-img, .cell:focus-visible .mod-img { transform: scale(1.1); }
.cell.is-selected .dia { background: var(--orange); }
.cell.is-selected .dia-in::after { content: ""; position: absolute; inset: 0; background: var(--orange-32); }
.cell:active { scale: 0.96; }
.cell.is-dragging { opacity: 0.35; }
.cell-empty { position: absolute; width: 128px; height: 128px; pointer-events: none; }
.cell-empty .dia { position: absolute; inset: 0; --rc: rgb(42 79 134 / 0.45); }
.cell-empty .dia-in { background: rgb(6 16 31 / 0.6); }
.lattice.is-drop .cell-empty { pointer-events: auto; }

.spot { position: absolute; left: 860px; top: 600px; width: 1020px; height: 440px; z-index: 2; padding: 34px 40px 34px 34px; isolation: isolate;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%); }
.spot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgb(15 37 71 / 0.94), rgb(10 26 51 / 0.9)); }
.spot::after { content: ""; position: absolute; left: 0; top: 0; width: 220px; height: 10px; background: var(--hazard); }
.sp { display: grid; grid-template-columns: 330px 1fr; gap: 40px; height: 100%; align-items: center; }
.sp-art { position: relative; width: 300px; height: 300px; margin-left: 14px; }
.sp-art .dia { position: absolute; inset: 0; }
.sp-art .dia-in { inset: 4px; }
.sp-art::before { content: ""; position: absolute; inset: -16px; border: 1px dashed color-mix(in srgb, var(--rc) 60%, transparent); transform: rotate(45deg) scale(0.71); animation: spin45 40s linear infinite; }
.sp-art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 40%, transparent), transparent 65%); scale: 1.5; }
@keyframes spin45 { to { transform: rotate(405deg) scale(0.71); } }
.sp-art img.gear-img { position: absolute; inset: 40px; width: 220px; height: 220px; object-fit: contain; }
.sp-tags { display: flex; align-items: center; gap: 14px; }
.sp-rar { padding: 4px 10px; background: var(--rc); color: var(--ink); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
.sp-type { font-weight: 700; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.sp-name { margin-top: 12px; font-family: var(--font-display); font-weight: 900; font-size: 84px; line-height: 0.86; text-transform: uppercase; letter-spacing: 0; }
.sp-stats { display: flex; gap: 40px; margin-top: 20px; }
.sp-stat b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 48px; line-height: 0.9; color: var(--rc); }
.sp-stat span { font-weight: 700; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.sp-desc { margin-top: 18px; max-width: 560px; font-size: 20px; line-height: 1.42; color: var(--muted); text-wrap: pretty; }
.sp-status { margin-top: 14px; font-weight: 700; font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sky); }
.sp-empty { height: 100%; display: grid; place-content: center; justify-items: center; gap: 18px; color: var(--muted); font-weight: 700; font-size: 18px; letter-spacing: 0.3em; text-transform: uppercase; }
.sp-empty::before { content: ""; width: 70px; height: 70px; border: 2px dashed var(--line); transform: rotate(45deg); }

/* ---------- PAUSE ---------- */
.pause { background: linear-gradient(90deg, rgb(4 10 21 / 0.2) 40%, rgb(4 10 21 / 0.82) 72%); }
.pause::before { content: ""; position: absolute; inset: 0; background: var(--cobalt); clip-path: polygon(0 0, 990px 0, 800px 100%, 0 100%); }
.p-panel { position: absolute; inset: 0; background: linear-gradient(160deg, #ff8f45, var(--orange) 45%, var(--orange-deep)); clip-path: polygon(0 0, 950px 0, 760px 100%, 0 100%); }
.p-panel::after { content: ""; position: absolute; left: 0; bottom: 0; width: 760px; height: 14px; background: repeating-linear-gradient(-45deg, var(--ink) 0 10px, transparent 10px 20px); }
.p-big { position: absolute; left: 84px; top: 70px; font-family: var(--font-display); font-weight: 900; font-size: 250px; line-height: 0.8; letter-spacing: -0.005em; text-transform: uppercase; color: var(--ink); }
.p-where { position: absolute; left: 96px; top: 300px; font-weight: 700; font-size: 22px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.p-menu { position: absolute; left: 90px; top: 380px; }
.p-menu .blade { color: var(--ink); width: 540px; }
.p-menu .blade::before { background: rgb(6 16 34 / 0.1); box-shadow: inset 3px 0 0 var(--ink); }
.p-menu .blade::after { background: var(--ink); }
.p-menu .blade .idx, .p-menu .blade .meta { color: rgb(6 16 34 / 0.65); }
.p-menu .blade.is-focus, .p-menu .blade.is-focus .idx, .p-menu .blade.is-focus .meta { color: var(--orange); }
.p-menu .blade.is-locked .label { color: rgb(6 16 34 / 0.6); }
.p-menu .blade.is-locked::after { background: rgb(6 16 34 / 0.55); }
.p-menu .blade.is-locked.is-focus .label, .p-menu .blade.is-locked.is-focus .idx, .p-menu .blade.is-locked.is-focus .meta { color: var(--text); }
.p-menu .blade:nth-child(1) { margin-left: 56px; }
.p-menu .blade:nth-child(2) { margin-left: 42px; }
.p-menu .blade:nth-child(3) { margin-left: 28px; }
.p-menu .blade:nth-child(4) { margin-left: 14px; }
.p-right { position: absolute; left: 960px; top: 0; right: 0; bottom: 0; }
.p-echo { left: 90px; top: 40px; width: 440px; height: 998px; opacity: 0.5; }
.p-echo img { filter: url(#duo-sky); }
.p-cas { position: absolute; left: 150px; top: 230px; width: 313px; height: 710px; filter: drop-shadow(3px 0 0 rgb(255 122 42 / 0.5)) drop-shadow(0 0 36px rgb(42 98 196 / 0.6)); }
.p-build { position: absolute; left: 500px; top: 110px; width: 430px; padding: 28px 30px 30px; isolation: isolate; }
.p-build::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(6 16 34 / 0.82); box-shadow: inset 4px 0 0 var(--orange); transform: skewX(-4deg); }
.p-build h2 { margin-top: 10px; font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: 0.9; text-transform: uppercase; }
.p-build h2 em { display: block; margin-top: 6px; font-family: var(--font-ui); font-style: normal; font-weight: 700; font-size: 18px; letter-spacing: 0.3em; color: var(--sky); }
.p-linked { display: grid; gap: 10px; margin-top: 26px; }
.p-linked li { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 16px; }
.p-linked .thumb { position: relative; width: 64px; height: 64px; }
.p-linked .thumb .dia { position: absolute; inset: 0; }
.p-linked b { display: block; font-weight: 700; font-size: 21px; letter-spacing: 0.04em; text-transform: uppercase; }
.p-linked em { display: block; margin-top: 2px; font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.p-linked .none { grid-template-columns: 1fr; color: var(--muted); }
.p-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 30px; padding-top: 22px; border-top: 2px solid var(--line); }
.p-counts .count b { font-size: 52px; }
.p-counts .count:nth-child(3) b { color: var(--r-elite); }
.p-counts .count:nth-child(4) b { color: var(--r-classified); }

/* ---------- transitions ---------- */
.toast { position: absolute; left: 50%; top: 44px; z-index: 25; min-width: 520px; padding: 14px 34px 16px; text-align: center; pointer-events: none; isolation: isolate;
  opacity: 0; transform: translate(-50%, -10px); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.toast::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(6 16 34 / 0.92); box-shadow: inset 6px 0 0 var(--orange); transform: skewX(var(--skew)); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast .callout-src { color: var(--orange); }
.toast-msg { display: block; margin-top: 6px; font-weight: 700; font-size: 21px; letter-spacing: 0.06em; text-transform: uppercase; }

.curtain { position: absolute; top: -10%; bottom: -10%; left: -25%; width: 150%; z-index: 35; visibility: hidden; background: var(--orange); transform: skewX(var(--skew)) translateX(-110%); display: grid; place-items: center; }
.curtain::before, .curtain::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22px; background: var(--hazard); }
.curtain::before { right: 0; }
.curtain::after { left: 0; }
.curtain-core { display: grid; justify-items: center; gap: 20px; transform: skewX(14deg); }
.curtain-core p { font-family: var(--font-display); font-weight: 900; font-size: 64px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }

.boot { position: absolute; inset: 0; z-index: 40; display: none; pointer-events: none; overflow: hidden; }
.boot .half { position: absolute; left: -30%; width: 160%; height: 100%; background: #02060d; transform: rotate(-14deg); }
.boot .half.a { top: -50%; transform-origin: 50% 100%; }
.boot .half.b { top: 50%; transform-origin: 50% 0; }
.boot .slash { position: absolute; z-index: 1; left: -20%; width: 140%; top: 538px; height: 4px; background: var(--orange); box-shadow: 0 0 24px 4px var(--orange-32); transform: rotate(-14deg) scaleX(0); }

/* ---------- reviewer bar ---------- */
.devbar { position: fixed; left: 0; top: 50%; z-index: 100; display: flex; align-items: center; transform: translateY(-50%); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.devbar-tab { writing-mode: vertical-rl; padding: 12px 6px; background: rgb(4 10 21 / 0.88); border: 1px solid var(--line); border-left: 0; color: var(--orange); }
.devbar-body { display: none; align-items: center; gap: 2px; padding: 4px; background: rgb(4 10 21 / 0.94); border: 1px solid var(--line); border-left: 0; }
.devbar:hover .devbar-tab, .devbar:focus-within .devbar-tab { display: none; }
.devbar:hover .devbar-body, .devbar:focus-within .devbar-body { display: flex; }
.devbar a, .devbar button { padding: 8px 10px; color: var(--muted); text-decoration: none; }
.devbar a:hover, .devbar button:hover, .devbar button.is-on { color: var(--orange); }
.devbar-name { padding: 8px 10px; color: var(--text); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.devbar-motion { border-left: 1px solid var(--line) !important; color: var(--sky) !important; }

/* ---------- reduced motion: fades only ---------- */
.reduce-motion .sp-art::before, .reduce-motion .socket.is-target::after { animation: none; }
.reduce-motion .blade::after { transition-duration: 1ms; }