:root {
  --bg: #08131a;
  --grid: #0e2029;
  --panel: #0a1920;
  --deep: #061017;
  --line: #14303a;
  --line2: #1c3f4b;
  --mint: #39f2b0;
  --sky: #7cc6ff;
  --pink: #ff8ab8;
  --amber: #ffd166;
  --lilac: #b9a6ff;
  --orange: #ff9f6b;
  --text: #eafff7;
  --soft: #a8c7be;
  --muted: #6f8f88;
  --red: #ff6b6b;
  --pix: 'Silkscreen', ui-monospace, monospace;
  --head: 'Manrope', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --gut: 32px;
  --wrap: 1240px;
  --step: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  color: var(--text);
  font-family: var(--head);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
main, .foot { overflow-x: clip; }
::selection { background: var(--mint); color: var(--bg); }
a { color: inherit; }
button { font: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- shared bits ---------- */
.chip {
  font-family: var(--pix);
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1;
  padding: 5px 8px 4px;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.chip-preview { color: var(--amber); background: rgba(255, 209, 102, .07); border-color: rgba(255, 209, 102, .5); }

.kicker {
  font-family: var(--pix);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--mint);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kicker::before {
  content: "";
  width: 8px; height: 8px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  flex: none;
}
.kicker-amber { color: var(--amber); }

.btn {
  font-family: var(--pix);
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 24px 15px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  clip-path: var(--step);
  transition: transform .08s ease, filter .15s ease;
  user-select: none;
}
.btn-primary {
  background: var(--mint);
  color: #04221a;
  border-bottom: 5px solid #17a676;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(3px); border-bottom-width: 2px; }
.btn-ghost {
  color: var(--text);
  background: rgba(57, 242, 176, .06);
  box-shadow: inset 0 0 0 2px var(--line2);
  padding-bottom: 20px;
}
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--mint); color: var(--mint); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.pos { color: var(--mint); }
.neg { color: var(--red); }
.flat { color: var(--muted); }

@keyframes blink { 50% { opacity: .25; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- hud header ---------- */
.hud {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 19, 26, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hud-in { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--pix); font-size: 20px; letter-spacing: .02em; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.hud-nav { display: flex; gap: 2px; margin-left: auto; }
.hud-nav a {
  font-family: var(--pix);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
  text-decoration: none;
  padding: 10px 12px;
}
.hud-nav a:hover { color: var(--mint); }
.hud-nav a:hover::before { content: "> "; }

/* ---------- hero ---------- */
.hero { padding: 64px 0 96px; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.hero h1 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(44px, 7.3vw, 112px);
  line-height: .95;
  letter-spacing: -.045em;
  margin: 6px 0 0;
}
.hero h1 .l2 { display: block; color: var(--mint); }
.lede { font-size: 19px; line-height: 1.55; color: var(--soft); max-width: 540px; margin: 28px 0 30px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.fine { margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.status { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; color: var(--soft); font-size: 14px; }
.status .chip { flex: none; }
.hud-stats {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .7fr);
  margin: 36px 0 0;
  border: 1px solid var(--line2);
  background: rgba(6, 16, 23, .7);
  max-width: 600px;
}
.hud-stats div { padding: 12px 14px; border-left: 1px solid var(--line2); min-width: 0; }
.hud-stats div:first-child { border-left: 0; }
.hud-stats dt { font-family: var(--pix); font-size: 11px; letter-spacing: .1em; color: var(--muted); margin-bottom: 4px; }
.hud-stats dd { margin: 0; font-family: var(--mono); font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* stage */
.stage {
  position: relative;
  border: 1px solid var(--line2);
  background:
    radial-gradient(ellipse 60% 45% at 50% 46%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%),
    linear-gradient(180deg, #0a1a22, #071118);
  padding: 20px 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background .4s;
}
.stage::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px);
}
.corner { position: absolute; width: 18px; height: 18px; border: 0 solid var(--c); transition: border-color .4s; }
.corner.tl { top: -1px; left: -1px; border-top-width: 3px; border-left-width: 3px; }
.corner.tr { top: -1px; right: -1px; border-top-width: 3px; border-right-width: 3px; }
.corner.bl { bottom: -1px; left: -1px; border-bottom-width: 3px; border-left-width: 3px; }
.corner.br { bottom: -1px; right: -1px; border-bottom-width: 3px; border-right-width: 3px; }
.stage-bar { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.stage-tag { font-family: var(--pix); font-size: 11px; letter-spacing: .12em; color: var(--muted); }

.bot-zone { position: relative; width: min(300px, 74%); margin: 26px auto 0; }
.bot-float { position: relative; z-index: 2; animation: floaty 3.4s ease-in-out infinite; }
.hero-bot {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px color-mix(in srgb, var(--c) 35%, transparent));
  transform-origin: 50% 70%;
}
.hero-bot path { transition: fill .2s; }
.blink { transform-box: fill-box; transform-origin: center; animation: eyeblink 5s infinite; }
@keyframes eyeblink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.pad {
  position: relative;
  z-index: 1;
  width: 86%;
  height: 34px;
  margin: -36px auto 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--c) 55%, transparent) 0%, color-mix(in srgb, var(--c) 12%, transparent) 55%, transparent 72%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent);
}
.beam {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 14px;
  width: 64%;
  height: 160%;
  transform: translateX(-50%);
  background: linear-gradient(0deg, color-mix(in srgb, var(--c) 45%, transparent), transparent 85%);
  clip-path: polygon(12% 100%, 88% 100%, 100% 0, 0 0);
  opacity: 0;
  pointer-events: none;
}
.particles { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.particles i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: var(--c); }

.nameplate {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  margin-top: 22px;
  background: var(--deep);
  border: 2px solid var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 12%, transparent);
  padding: 14px 16px 12px;
  transition: border-color .4s, box-shadow .4s;
}
.np-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.np-name { font-family: var(--pix); font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--c); min-height: 31px; }
.np-lvl { font-family: var(--pix); font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.np-style { font-family: var(--pix); font-size: 11px; letter-spacing: .1em; color: var(--muted); margin-top: 6px; }
.np-style b { color: var(--text); font-weight: 400; margin-left: 6px; }
.np-quote { font-family: var(--mono); font-size: 14px; color: var(--soft); margin: 10px 0 10px; min-height: 22px; }
.np-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px dashed var(--line2); padding-top: 9px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.np-meta b { color: var(--text); font-weight: 400; }
.btn-wide { width: 100%; max-width: 420px; margin-top: 16px; position: relative; z-index: 2; }
.stage .btn-primary { background: var(--c); border-bottom-color: color-mix(in srgb, var(--c) 58%, #000); transition: transform .08s ease, filter .15s ease, background .3s; }
.stage-note { position: relative; z-index: 2; margin: 14px 0 0; max-width: 420px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---------- sections ---------- */
.sec { padding: 88px 0; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.sec h2 {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1;
  letter-spacing: -.04em;
  margin: 0;
}
.sec-sub { color: var(--soft); font-size: 17px; max-width: 640px; margin: 18px 0 36px; }
.note { margin: 16px 0 0; color: var(--muted); font-size: 13px; }

/* ---------- roster ---------- */
.roster-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.roster-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 12px 12px 12px;
  transition: border-color .15s, background .15s, transform .15s;
}
.card::before, .card::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 0 solid var(--c);
  opacity: 0;
  transition: opacity .15s, transform .15s;
}
.card::before { top: -6px; left: -6px; border-top-width: 3px; border-left-width: 3px; transform: translate(4px, 4px); }
.card::after { bottom: -6px; right: -6px; border-bottom-width: 3px; border-right-width: 3px; transform: translate(-4px, -4px); }
.card:hover, .card.is-sel { border-color: color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 7%, var(--panel)); }
.card:hover::before, .card:hover::after, .card.is-sel::before, .card.is-sel::after { opacity: 1; transform: none; }
.card:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.portrait {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.2;
  background:
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--c) 20%, transparent), transparent 62%),
    var(--deep);
  border: 1px solid var(--line);
  overflow: hidden;
}
.portrait::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, transparent) 0 2px, transparent 2px 12px);
  mask-image: linear-gradient(0deg, #000, transparent);
  -webkit-mask-image: linear-gradient(0deg, #000, transparent);
  opacity: .6;
}
.portrait svg { width: 58%; height: auto; position: relative; z-index: 1; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.card:hover .portrait svg, .card.is-sel .portrait svg { transform: translateY(-5px) scale(1.07); }
.card .p1 {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-family: var(--pix); font-size: 11px; letter-spacing: .06em; line-height: 1;
  background: var(--c); color: #06141a; padding: 4px 6px 3px;
  opacity: 0; transform: translateY(-4px); transition: .15s;
}
.card.is-sel .p1 { opacity: 1; transform: none; }
.c-name { display: block; font-family: var(--pix); font-weight: 700; font-size: 17px; line-height: 1.2; margin-top: 12px; color: var(--text); }
.card:hover .c-name, .card.is-sel .c-name { color: var(--c); }
.c-style { display: block; font-family: var(--pix); font-size: 11px; letter-spacing: .08em; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-stats { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line2); font-family: var(--mono); font-size: 12.5px; }
.c-stats .wr { color: var(--soft); }

.dossier {
  --c: var(--mint);
  position: sticky;
  top: 84px;
  background: var(--deep);
  border: 2px solid var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 10%, transparent);
  padding: 16px 18px 18px;
  transition: border-color .25s, box-shadow .25s;
}
.d-bar { display: flex; justify-content: space-between; align-items: center; font-family: var(--pix); font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.d-portrait {
  margin-top: 12px;
  display: grid;
  place-items: center;
  aspect-ratio: 1.5;
  background:
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 24%, transparent), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 4px),
    #08161d;
  border: 1px solid var(--line);
}
.d-portrait svg { width: 44%; height: auto; animation: floaty 3s ease-in-out infinite; }
.d-name { font-family: var(--pix); font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--c); margin-top: 14px; }
.d-style { display: inline-block; font-family: var(--pix); font-size: 11px; letter-spacing: .1em; color: var(--deep); background: var(--c); padding: 4px 8px 3px; margin-top: 6px; }
.d-desc { color: var(--soft); font-size: 14.5px; margin: 12px 0 14px; min-height: 44px; }
.d-stats { border-top: 1px dashed var(--line2); padding-top: 10px; }
.d-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 13px; }
.d-row span { font-family: var(--pix); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.d-row b { font-family: var(--mono); font-weight: 400; font-size: 14px; }
.meter { height: 10px; margin: 2px 0 8px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 10px); }
.meter i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--c) 0 8px, transparent 8px 10px); transition: width .4s steps(10); }
.d-quote { margin-top: 12px; border-top: 1px dashed var(--line2); padding-top: 10px; }
.d-qlabel { font-family: var(--pix); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.d-quote p { margin: 6px 0 0; font-family: var(--mono); font-size: 13.5px; color: var(--text); }

/* ---------- feed + board ---------- */
.arena { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.panel { background: var(--deep); border: 1px solid var(--line2); display: flex; flex-direction: column; min-width: 0; }
.panel-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px 12px;
  background: #0b1c24;
  border-bottom: 1px solid var(--line2);
  font-family: var(--pix); font-size: 12px; letter-spacing: .1em;
}
.panel-bar .chip { margin-left: auto; }
.live-dot { width: 8px; height: 8px; background: var(--amber); box-shadow: 0 0 10px var(--amber); animation: blink 1s steps(2) infinite; flex: none; }

.feed-box { flex: 1; position: relative; min-height: 0; }
.feed { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; overflow: hidden; font-family: var(--mono); font-size: 13.5px; }
.feed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(0deg, var(--deep), transparent); pointer-events: none; }
.feed li {
  display: grid;
  grid-template-columns: 70px 56px minmax(0, 1fr) auto 62px;
  column-gap: 14px;
  row-gap: 3px;
  align-items: baseline;
  padding: 11px 16px;
  border-bottom: 1px solid #0f232c;
}
.feed li.new { animation: feedin .6s ease-out; }
@keyframes feedin {
  0% { background: color-mix(in srgb, var(--c) 22%, transparent); opacity: 0; transform: translateY(-8px); }
  40% { opacity: 1; transform: none; }
  100% { background: transparent; }
}
.f-t { color: var(--muted); font-size: 12px; }
.f-n { color: var(--c); font-weight: 600; }
.f-a { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.f-p { text-align: right; white-space: nowrap; }
.f-p.in { color: var(--muted); }
.f-s { text-align: right; color: var(--muted); font-size: 12px; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.f-s:hover { color: var(--text); }
.f-q { grid-column: 3 / -1; color: #8fb3a9; font-size: 13px; }
.f-q.held { color: var(--muted); }

.board-head, .board li {
  display: grid;
  grid-template-columns: 22px 30px minmax(0, 1fr) 46px 96px;
  align-items: center;
  column-gap: 10px;
}
.board-head { padding: 10px 16px 8px; font-family: var(--pix); font-size: 11px; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid #0f232c; }
.board-head span:nth-child(4), .board-head span:nth-child(5) { text-align: right; }
.board { list-style: none; margin: 0; padding: 0; position: relative; flex: 1; }
.board li { padding: 9px 16px; border-bottom: 1px solid #0f232c; background: var(--deep); position: relative; }
.board li.top { background: linear-gradient(90deg, rgba(255, 209, 102, .1), var(--deep) 70%); }
.board li.flash { animation: rowflash .8s ease-out; }
@keyframes rowflash { from { box-shadow: inset 3px 0 0 var(--c); background-color: color-mix(in srgb, var(--c) 14%, var(--deep)); } }
.b-rank { font-family: var(--pix); font-size: 12px; color: var(--muted); }
.board li.top .b-rank { color: var(--amber); }
.b-face svg { width: 30px; height: 30px; display: block; }
.b-who { min-width: 0; }
.b-name { display: flex; align-items: center; gap: 6px; font-family: var(--pix); font-weight: 700; font-size: 13px; color: var(--c); line-height: 1.2; }
.b-style { display: block; font-family: var(--pix); font-size: 11px; margin-top: 2px; letter-spacing: .08em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bonus { font-family: var(--pix); font-weight: 400; font-size: 11px; letter-spacing: .06em; color: #2a1d00; background: var(--amber); padding: 3px 5px 2px; line-height: 1; }
.b-wr, .b-sol { font-family: var(--mono); font-size: 13px; text-align: right; white-space: nowrap; }
.b-wr { color: var(--soft); }
.board-foot { border-top: 1px solid var(--line2); padding: 14px 16px 16px; background: #0b1c24; }
.split { display: flex; justify-content: space-between; align-items: baseline; }
.split-label { font-family: var(--pix); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.split-time { font-family: var(--mono); font-weight: 600; font-size: 26px; color: var(--amber); letter-spacing: .02em; }
.board-foot p { margin: 6px 0 0; color: var(--soft); font-size: 13.5px; }

/* ---------- level map ---------- */
.map {
  position: relative;
  border: 1px solid var(--line2);
  background:
    radial-gradient(circle at 15% 20%, rgba(57, 242, 176, .06), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255, 209, 102, .06), transparent 40%),
    var(--deep);
  padding: 72px 28px 48px;
  overflow: hidden;
}
.map::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(57, 242, 176, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 242, 176, .035) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.road { fill: none; stroke: #0f2630; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.road-dots { fill: none; stroke: var(--line2); stroke-width: 6; stroke-dasharray: 6 12; stroke-linecap: butt; animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -18; } }
.stages { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.stg { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.stg:nth-child(even) { margin-top: 150px; }
.node {
  position: relative;
  width: 76px; height: 76px;
  display: grid; place-items: center;
  background: #0c1f28;
  clip-path: var(--step);
  box-shadow: inset 0 0 0 3px var(--c), inset 0 -10px 0 rgba(0, 0, 0, .35);
  transition: transform .25s, background .25s;
}
.node span { font-family: var(--pix); font-weight: 700; font-size: 30px; color: var(--c); line-height: 1; }
.node-goal::after {
  content: "";
  position: absolute; inset: 8px;
  border: 2px dashed color-mix(in srgb, var(--c) 50%, transparent);
}
.stg.on .node { background: color-mix(in srgb, var(--c) 22%, #0c1f28); transform: translateY(-3px); }
.stg-copy { margin-top: 16px; max-width: 220px; }
.stg-k { font-family: var(--pix); font-size: 11px; letter-spacing: .14em; color: var(--c); margin: 0; }
.stg h3 { font-family: var(--head); font-weight: 800; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; margin: 6px 0 8px; }
.stg-copy p:last-child { margin: 0; color: var(--soft); font-size: 14.5px; line-height: 1.5; }
.map-sprite {
  position: absolute;
  z-index: 3;
  width: 46px; height: 46px;
  left: 0; top: 0;
  transition: left .55s cubic-bezier(.5, 0, .5, 1), top .55s cubic-bezier(.5, 0, .5, 1);
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
}
.map-sprite svg { width: 100%; height: 100%; display: block; }
.map-sprite.hop svg { animation: hop .55s ease-out; }
@keyframes hop { 0% { transform: translateY(0); } 45% { transform: translateY(-28px) rotate(-8deg); } 100% { transform: translateY(0); } }

.rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line2);
  border-top: 0;
  background: #0a1820;
}
.rule { padding: 18px 22px 20px; border-left: 1px solid var(--line2); }
.rule:first-child { border-left: 0; }
.rule-k { font-family: var(--pix); font-size: 11px; letter-spacing: .12em; color: var(--c); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.rule-k::before { content: ""; width: 10px; height: 10px; background: var(--c); }
.rule p:last-child { margin: 0; color: var(--soft); font-size: 14.5px; }

/* ---------- honest ---------- */
.honest {
  position: relative;
  border: 2px solid var(--amber);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 209, 102, .028) 0 14px, transparent 14px 28px),
    #0a151a;
  box-shadow: 0 0 0 6px rgba(255, 209, 102, .06);
}
.honest-head { display: flex; align-items: center; gap: 20px; padding: 28px 32px 24px; border-bottom: 1px dashed rgba(255, 209, 102, .35); }
.warn {
  flex: none;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: var(--amber);
  color: #2a1d00;
  font-family: var(--pix); font-weight: 700; font-size: 38px;
  clip-path: var(--step);
  animation: blink 1.6s steps(2) infinite;
}
.honest-head .kicker { margin-bottom: 8px; }
.honest-grid { display: grid; grid-template-columns: 1fr 1fr; }
.honest-col { padding: 26px 32px 28px; }
.honest-col + .honest-col { border-left: 1px dashed rgba(255, 209, 102, .35); }
.honest-col h3 { font-family: var(--pix); font-weight: 700; font-size: 16px; letter-spacing: .04em; line-height: 1.35; color: var(--amber); margin: 0 0 14px; }
.honest-col ul { list-style: none; margin: 0; padding: 0; }
.honest-col li { position: relative; padding-left: 22px; margin: 0 0 10px; color: var(--text); font-size: 16px; line-height: 1.5; }
.honest-col li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--amber); }
.big-quote {
  margin: 20px 0 0;
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--text);
  border-left: 4px solid var(--red);
  padding-left: 16px;
}
.honest-foot { display: flex; align-items: center; gap: 14px; padding: 16px 32px; border-top: 1px dashed rgba(255, 209, 102, .35); background: rgba(255, 209, 102, .05); }
.honest-foot p { margin: 0; color: var(--text); font-size: 15px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); background: rgba(6, 16, 23, .8); padding: 44px 0 56px; }
.foot-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 18px; }
.foot-brand svg { width: 72px; height: 72px; flex: none; }
.foot-word { font-family: var(--pix); font-weight: 700; font-size: 44px; line-height: 1; margin: 0; }
.foot-line { margin: 8px 0 0; color: var(--soft); }
.foot-meta { text-align: right; }
.foot-meta p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.insert { font-family: var(--pix); font-size: 13px !important; letter-spacing: .12em; color: var(--mint) !important; animation: blink 1.2s steps(2) infinite; margin-bottom: 8px !important; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .roster-wrap { grid-template-columns: minmax(0, 1fr) 300px; }
  .roster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feed li { grid-template-columns: 62px 50px minmax(0, 1fr) auto 56px; column-gap: 12px; }
  .arena { grid-template-columns: minmax(0, 1fr); }
  .feed-box { flex: none; }
  .feed { position: relative; inset: auto; height: 520px; }
  .hud-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hud-stats div:nth-child(3) { border-left: 0; }
  .hud-stats div:nth-child(n+3) { border-top: 1px solid var(--line2); }
}

@media (max-width: 900px) {
  :root { --gut: 16px; }
  .hud-nav { display: none; }
  .hud-in { justify-content: space-between; height: 58px; }
  .brand { font-size: 18px; }
  .brand-mark { width: 26px; height: 26px; }
  .hero { padding: 36px 0 64px; }
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hide-sm { display: none; }
  .lede { font-size: 17px; margin: 22px 0 22px; }
  .hud-stats { margin-top: 28px; }
  .stage { padding: 16px 16px 18px; }
  .bot-zone { width: min(240px, 66%); margin-top: 18px; }
  .np-name { font-size: 24px; }

  .sec { padding: 64px 0; }
  .sec-head { align-items: flex-start; flex-direction: column; gap: 14px; }
  .sec-head .chip { order: -1; align-self: flex-start; }
  .sec-sub { font-size: 16px; margin: 14px 0 26px; }

  .roster-wrap { grid-template-columns: minmax(0, 1fr); }
  .roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 10px; }
  .c-name { font-size: 15px; margin-top: 10px; }
  .portrait { aspect-ratio: 1.6; }
  .c-stats { font-size: 12px; flex-wrap: wrap; gap: 2px 8px; }
  .dossier { position: relative; top: 0; order: -1; display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; padding: 14px; }
  .d-bar { grid-column: 1 / -1; }
  .d-portrait { grid-column: 1; grid-row: 2 / span 2; aspect-ratio: 1; margin-top: 12px; }
  .d-portrait svg { width: 62%; }
  .d-name { grid-column: 2; grid-row: 2; align-self: end; font-size: 26px; margin-top: 12px; }
  .d-style { grid-column: 2; grid-row: 3; justify-self: start; align-self: start; }
  .d-desc, .d-stats, .d-quote { grid-column: 1 / -1; }
  .d-desc { min-height: 0; margin: 12px 0; }

  .feed { font-size: 13px; }
  .feed li { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 10px; padding: 10px 14px; }
  .feed .f-t { grid-row: 1; grid-column: 1; font-size: 12px; }
  .feed .f-n { grid-row: 1; grid-column: 2; }
  .feed .f-p { grid-row: 1; grid-column: 3; }
  .feed .f-a { grid-row: 2; grid-column: 1 / 3; white-space: normal; }
  .feed .f-s { grid-row: 2; grid-column: 3; }
  .feed .f-q { grid-row: 3; grid-column: 1 / -1; }
  .board-head, .board li { grid-template-columns: 18px 28px minmax(0, 1fr) 40px 88px; column-gap: 8px; padding-left: 14px; padding-right: 14px; }

  .map { padding: 48px 16px 28px; }
  .stages { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .stg { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; }
  .stg:nth-child(even) { margin-top: 0; padding-left: 44px; }
  .node { width: 60px; height: 60px; flex: none; }
  .node span { font-size: 24px; }
  .stg-copy { margin-top: 0; max-width: none; }
  .stg h3 { font-size: 20px; margin: 4px 0 6px; }
  .map-sprite { width: 36px; height: 36px; }

  .rules { grid-template-columns: minmax(0, 1fr); }
  .rule { border-left: 0; border-top: 1px solid var(--line2); padding: 16px; }
  .rule:first-child { border-top: 0; }

  .honest-head { padding: 20px 16px 18px; gap: 14px; }
  .warn { width: 48px; height: 48px; font-size: 28px; }
  .honest-grid { grid-template-columns: minmax(0, 1fr); }
  .honest-col { padding: 20px 16px 20px; }
  .honest-col + .honest-col { border-left: 0; border-top: 1px dashed rgba(255, 209, 102, .35); }
  .honest-col li { font-size: 15px; }
  .honest-foot { padding: 14px 16px; align-items: flex-start; flex-direction: column; gap: 10px; }

  .foot-in { flex-direction: column; align-items: flex-start; }
  .foot-meta { text-align: left; }
  .foot-word { font-size: 34px; }
  .foot-brand svg { width: 56px; height: 56px; }
}

@media (max-width: 400px) {
  .board-head, .board li { grid-template-columns: 18px 22px minmax(0, 1fr) 38px 84px; column-gap: 6px; }
  .b-face svg { width: 22px; height: 22px; }
}
@media (max-width: 369px) {
  .board-head, .board li { grid-template-columns: 18px minmax(0, 1fr) 38px 84px; }
  .b-face, .board-head span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}