:root {
  color-scheme: dark;
  --ink: #100b12;
  --ink-soft: #19101a;
  --panel: #211421;
  --panel-2: #2a1929;
  --paper: #f4edda;
  --paper-dim: #baadab;
  --amber: #ffc400;
  --amber-dark: #7f5000;
  --cyan: #00d9ff;
  --cyan-dark: #00647a;
  --rose: #ff4667;
  --line: #5f4c5e;
  --shadow: #050306;
  --bar-height: 68px;
  --app-height: 100vh;
  --display: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue Condensed", Impact, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--ink);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

body[data-game-screen="match"] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  inset: 0;
  height: var(--app-height);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
canvas:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.compatibility-notice {
  position: fixed;
  z-index: 2000;
  right: 14px;
  bottom: 14px;
  left: 14px;
  margin: 0;
  padding: 14px;
  border: 2px solid var(--amber);
  color: var(--paper);
  background: var(--ink);
  font-weight: 900;
  text-align: center;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--paper);
  font-weight: 900;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.arcade-shell {
  min-height: 100dvh;
  overflow-x: hidden;
  background-color: var(--ink);
  background-image: none;
}

.global-bar {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  min-height: calc(var(--bar-height) + env(safe-area-inset-top));
  padding: calc(10px + env(safe-area-inset-top)) clamp(14px, 2vw, 30px) 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(16, 11, 18, 0.94);
  box-shadow: 0 7px 0 rgba(5, 3, 6, 0.55);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  text-decoration: none;
}

.brand-mark {
  position: relative;
  width: 43px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--amber);
  clip-path: polygon(8% 18%, 26% 18%, 26% 0, 43% 0, 50% 15%, 57% 0, 74% 0, 74% 18%, 92% 18%, 85% 100%, 15% 100%);
}

.brand-mark b {
  position: relative;
  z-index: 2;
  margin-top: 6px;
  font: 900 15px/1 var(--display);
  letter-spacing: -1px;
}

.brand-mark i {
  position: absolute;
  top: 8px;
  width: 4px;
  height: 4px;
  background: var(--ink);
}

.brand-mark i:first-child { left: 9px; }
.brand-mark i:nth-child(2) { left: 19px; }
.brand-mark i:nth-child(3) { right: 9px; }

.brand-type {
  display: grid;
  gap: 2px;
}

.brand-type strong {
  font: 900 clamp(18px, 1.8vw, 25px)/0.9 var(--display);
  letter-spacing: -0.035em;
}

.brand-type strong span {
  color: var(--amber);
}

.brand-type small {
  color: var(--paper-dim);
  font: 800 8px/1 var(--body);
  letter-spacing: 0.17em;
}

.global-actions {
  display: flex;
  align-items: stretch;
  gap: 9px;
}

.connection-pill,
.sound-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.connection-pill {
  padding: 0 12px;
  color: var(--paper-dim);
}

.connection-pill strong {
  color: var(--paper);
}

.status-light {
  width: 7px;
  height: 7px;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.13);
}

.sound-toggle {
  padding: 0 12px;
  cursor: pointer;
}

.sound-toggle:hover {
  color: var(--amber);
  border-color: var(--amber);
}

.sound-glyph {
  color: var(--cyan);
  font-weight: 1000;
  letter-spacing: -0.35em;
  transform: rotate(180deg);
}

.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

.home-screen {
  height: 100vh;
  height: 100dvh;
  padding: calc(var(--bar-height) + env(safe-area-inset-top) + 12px) clamp(12px, 2vw, 30px) max(14px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 11px;
  overflow: hidden;
}

.home-screen::before,
.queue-screen::before,
.results-screen::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -5vw;
  bottom: 1vh;
  width: 34vw;
  height: 31vh;
  opacity: 0.09;
  color: var(--paper);
  background: currentColor;
  clip-path: polygon(0 90%, 9% 90%, 9% 72%, 18% 72%, 18% 55%, 28% 55%, 28% 37%, 38% 37%, 38% 18%, 47% 18%, 47% 0, 56% 0, 56% 18%, 65% 18%, 65% 37%, 75% 37%, 75% 55%, 84% 55%, 84% 72%, 94% 72%, 94% 90%, 100% 90%, 100% 100%, 0 100%);
}

.broadcast-ticker {
  position: relative;
  z-index: 1;
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--paper-dim);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.broadcast-ticker p {
  margin: 0;
}

.broadcast-ticker p strong {
  color: var(--paper);
}

.ticker-tag {
  align-self: stretch;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  background: var(--rose);
  font-weight: 1000;
}

.ticker-right {
  margin-left: auto !important;
  display: flex;
  gap: 22px;
}

.ticker-right span:first-child {
  color: var(--cyan);
}

.home-stage {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(310px, 27vw, 408px);
  gap: clamp(10px, 1.25vw, 18px);
}

.cut-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  clip-path: polygon(0 0, calc(100% - 23px) 0, 100% 23px, 100% 100%, 17px 100%, 0 calc(100% - 17px));
}

.cut-panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 23px;
  height: 23px;
  border-left: 1px solid var(--line);
  background: var(--ink);
  transform: skew(45deg) translateX(12px);
  pointer-events: none;
}

.ranked-card {
  min-width: 0;
  min-height: 0;
  padding: clamp(14px, 1.6vw, 24px);
  display: grid;
  grid-template-rows: auto minmax(250px, 1fr) auto;
  gap: clamp(10px, 1.4vh, 16px);
  overflow: hidden;
  background: var(--ink-soft);
}

.ranked-card::before {
  content: "H//C";
  position: absolute;
  right: -0.04em;
  bottom: -0.18em;
  color: var(--paper);
  opacity: 0.025;
  font: 1000 clamp(140px, 22vw, 360px)/1 var(--display);
  letter-spacing: -0.12em;
  white-space: nowrap;
}

.ranked-heading {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--paper-dim);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.eyebrow span {
  color: var(--amber);
}

.ranked-heading h1,
.queue-header h1,
.result-card h1,
.modal-heading h2 {
  margin: 0;
  font: 1000 clamp(48px, 6vw, 92px)/0.76 var(--display);
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.ranked-heading h1 em,
.queue-header h1 em,
.result-card h1 em,
.modal-heading h2 em {
  color: var(--amber);
  font-style: normal;
  -webkit-text-stroke: 1px var(--amber);
}

.mode-stamp {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  padding: 6px;
  display: grid;
  align-content: center;
  justify-items: center;
  color: var(--ink);
  background: var(--amber);
  transform: rotate(3deg);
  box-shadow: 5px 5px 0 var(--paper);
}

.mode-stamp span {
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 0.15em;
}

.mode-stamp strong {
  font: 1000 27px/0.85 var(--display);
}

.arena-preview {
  position: relative;
  z-index: 1;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid #6c5669;
  background:
    linear-gradient(90deg, rgba(255, 180, 18, 0.1), rgba(9, 5, 13, 0.14) 47%, rgba(39, 215, 255, 0.1)),
    url("/assets/hive-crown-arena-v2.jpg") center / cover no-repeat,
    #170e18;
  box-shadow: inset 0 0 0 7px var(--ink);
}

.arena-preview::before,
.arena-preview::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: 9px;
}

.arena-preview::before {
  left: 0;
  background: var(--amber);
}

.arena-preview::after {
  right: 0;
  background: var(--cyan);
}

.dot-cloud {
  position: absolute;
  z-index: 0;
  top: -18px;
  width: 42%;
  height: 60%;
  overflow: hidden;
  opacity: 0.13;
}

.dot-cloud::before {
  content: "••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••";
  display: block;
  width: 100%;
  color: currentColor;
  font: 700 10px/14px monospace;
  letter-spacing: 7px;
  overflow-wrap: anywhere;
}

.dot-cloud-left {
  left: 0;
  color: var(--amber);
  transform: rotate(-9deg);
}

.dot-cloud-right {
  right: 0;
  color: var(--cyan);
  transform: rotate(9deg);
}

.arena-caption {
  position: absolute;
  z-index: 5;
  left: 23px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.arena-caption span { color: var(--paper-dim); }
.arena-caption strong { color: var(--paper); }
.arena-caption-top { top: 16px; }

.arena-boundary {
  position: absolute;
  z-index: 2;
  inset: 44px clamp(48px, 7vw, 105px) 43px;
  border: 1px solid #584657;
  background: var(--ink-soft);
  clip-path: polygon(9% 0, 91% 0, 100% 20%, 100% 80%, 91% 100%, 9% 100%, 0 80%, 0 20%);
  box-shadow: inset 0 0 0 5px var(--ink);
}

.arena-boundary::before,
.arena-boundary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  opacity: 0.09;
}

.arena-boundary::before { left: 0; background: var(--amber); }
.arena-boundary::after { right: 0; background: var(--cyan); }

.center-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #6b5569;
}

.center-spine::before,
.center-spine::after {
  content: "";
  position: absolute;
  left: -14px;
  width: 28px;
  height: 12px;
  border: 1px solid #6b5569;
  background: var(--ink-soft);
}

.center-spine::before { top: 17%; }
.center-spine::after { bottom: 17%; }

.flight-line {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  border-top: 1px dashed #614f60;
}

.flight-line-one { top: 31%; }
.flight-line-two { bottom: 31%; }

.goal {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 37px;
  height: 62px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  font: 1000 17px/1 var(--display);
  clip-path: polygon(0 17%, 38% 17%, 38% 0, 100% 0, 100% 100%, 38% 100%, 38% 83%, 0 83%);
}

.goal-amber { left: 4px; color: var(--ink); background: var(--amber); }
.goal-cyan { right: 4px; color: var(--ink); background: var(--cyan); transform: translateY(-50%) rotate(180deg); }
.goal-cyan span { transform: rotate(180deg); }

.crawler-rail {
  position: absolute;
  z-index: 3;
  left: 11%;
  right: 11%;
  bottom: 18%;
  height: 6px;
  border-top: 2px solid var(--paper-dim);
  border-bottom: 1px solid #5d4a5c;
}

.crawler-rail::after {
  content: "SNAIL LANE";
  position: absolute;
  right: 0;
  bottom: 7px;
  color: var(--cyan);
  font: 1000 6px/1 var(--body);
  letter-spacing: 0.12em;
}

.rail-notch {
  position: absolute;
  top: -5px;
  width: 1px;
  height: 10px;
  background: var(--paper-dim);
}

.rail-notch.n1 { left: 0; }
.rail-notch.n2 { left: 25%; }
.rail-notch.n3 { left: 50%; }
.rail-notch.n4 { left: 75%; }
.rail-notch.n5 { right: 0; }

.crawler-token {
  position: absolute;
  left: 46%;
  bottom: -5px;
  width: 36px;
  height: 24px;
}

.crawler-token b {
  position: absolute;
  z-index: 2;
  left: 3px;
  bottom: 3px;
  width: 21px;
  height: 21px;
  border: 4px solid var(--paper);
  border-radius: 50%;
  background: var(--ink-soft);
  box-shadow: inset 0 0 0 3px var(--amber);
}

.crawler-token b::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  border: 2px solid var(--paper);
  border-left-color: transparent;
  border-radius: 50%;
}

.crawler-token span {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 25px;
  height: 9px;
  border-radius: 8px 9px 3px 5px;
  background: var(--paper);
}

.crawler-token i {
  position: absolute;
  right: 2px;
  bottom: 9px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--paper);
  border-right: 2px solid var(--paper);
  transform: skew(12deg);
}

.preview-eggs {
  position: absolute;
  z-index: 4;
  top: 7px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--paper-dim);
}

.preview-eggs-amber { left: 9px; }
.preview-eggs-cyan { right: 9px; }

.preview-eggs small {
  font: 1000 6px/1 var(--body);
  letter-spacing: 0.1em;
}

.preview-eggs span {
  width: 8px;
  height: 11px;
  border-radius: 50% 50% 46% 46%;
  background: currentColor;
  transform: rotate(8deg);
}

.preview-eggs-amber span { color: var(--amber); }
.preview-eggs-cyan span { color: var(--cyan); }

.fighter {
  position: absolute;
  z-index: 4;
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transform: rotate(45deg);
  box-shadow: 3px 3px 0 var(--ink);
}

.fighter b {
  font: 1000 12px/1 var(--display);
  transform: rotate(-45deg);
}

.fighter i {
  position: absolute;
  width: 8px;
  height: 14px;
  border: 2px solid currentColor;
  background: var(--ink-soft);
}

.fighter i:first-child { left: -8px; top: 5px; }
.fighter i:last-child { right: -8px; bottom: 5px; }
.fighter-amber { background: var(--amber); }
.fighter-cyan { background: var(--cyan); }
.sovereign-a { left: 16%; top: 15%; width: 34px; height: 34px; }
.drone-a1 { left: 30%; top: 48%; }
.drone-a2 { left: 19%; bottom: 15%; }
.striker-a { left: 39%; top: 16%; }
.sovereign-b { right: 15%; top: 24%; width: 34px; height: 34px; }
.drone-b1 { right: 27%; top: 53%; }
.drone-b2 { right: 19%; bottom: 13%; }
.striker-b { right: 39%; top: 13%; }

.hiveberry {
  position: absolute;
  z-index: 3;
  width: 11px;
  height: 11px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 3px var(--ink);
}

.hiveberry::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 4px;
  width: 5px;
  height: 4px;
  border-radius: 5px 0;
  background: var(--amber);
  transform: rotate(-28deg);
}

.berry-one { left: 46%; top: 40%; }
.berry-two { right: 34%; bottom: 25%; }
.berry-three { left: 34%; top: 22%; }

.team-plaque {
  position: absolute;
  z-index: 5;
  top: 50%;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  transform: translateY(-50%);
  font: 1000 10px/1 var(--display);
  letter-spacing: 0.06em;
}

.team-plaque b { font-size: 20px; }
.team-plaque-amber { left: 9px; background: var(--amber); }
.team-plaque-cyan { right: 9px; background: var(--cyan); }

.victory-key {
  position: absolute;
  z-index: 5;
  right: 22px;
  bottom: 8px;
  left: 22px;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  list-style: none;
}

.victory-key li {
  min-width: 0;
  padding: 4px 7px 5px;
  display: grid;
  gap: 1px;
  border-left: 3px solid var(--paper);
  background: rgba(16, 11, 18, 0.9);
  box-shadow: 3px 3px 0 rgba(5, 3, 6, 0.65);
}

.victory-key small,
.victory-key strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.victory-key small {
  color: var(--paper-dim);
  font: 900 6px/1 var(--body);
  letter-spacing: 0.12em;
}

.victory-key strong {
  color: var(--paper);
  font: 1000 8px/1 var(--display);
  letter-spacing: 0.03em;
}

.victory-key .victory-military { border-left-color: var(--amber); }
.victory-key .victory-economic { border-left-color: var(--rose); }
.victory-key .victory-snail { border-left-color: var(--cyan); }
.victory-military small { color: var(--amber); }
.victory-economic small { color: var(--rose); }
.victory-snail small { color: var(--cyan); }

.match-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.cta-copy p,
.cta-copy span {
  margin: 0;
}

.cta-copy p {
  color: var(--paper);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.cta-copy span {
  color: var(--paper-dim);
  font-size: 12px;
}

.cta-buttons {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.button {
  min-height: 52px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  display: inline-grid;
  align-content: center;
  justify-items: start;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  transition: transform 120ms ease, box-shadow 120ms ease, color 120ms ease, background-color 120ms ease;
}

.button span,
.button:not(:has(span)) {
  font: 1000 15px/1 var(--display);
  letter-spacing: 0.04em;
}

.button small {
  margin-top: 4px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.button b {
  position: absolute;
  right: 12px;
  top: 50%;
  font-size: 18px;
  transform: translateY(-50%);
}

.button:hover {
  transform: translate(-2px, -2px);
}

.button:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.button-primary {
  position: relative;
  min-width: 196px;
  padding-right: 42px;
  border-color: var(--amber);
  color: var(--ink);
  background: var(--amber);
  box-shadow: 6px 6px 0 var(--paper);
}

.button-primary:hover {
  background: var(--paper);
  border-color: var(--paper);
  box-shadow: 8px 8px 0 var(--amber);
}

.button-ghost {
  color: var(--paper);
  background: var(--panel-2);
}

.button-ghost:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}

.player-rail {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
}

.identity-card,
.ladder-card {
  padding: 14px 16px;
}

.identity-card {
  background: var(--panel-2);
}

.identity-topline,
.identity-main,
.next-rank,
.ladder-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.identity-topline .eyebrow { margin: 0; }

.ready-tag,
.region-code {
  padding: 3px 6px;
  color: var(--ink);
  background: var(--cyan);
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 0.12em;
}

.identity-main {
  margin: 11px 0 9px;
  justify-content: flex-start;
}

.player-emblem {
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--amber);
  clip-path: polygon(50% 0, 90% 18%, 100% 64%, 73% 100%, 27% 100%, 0 64%, 10% 18%);
}

.player-emblem span {
  font: 1000 17px/1 var(--display);
}

.player-name {
  display: block;
  width: min(100%, 190px);
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: 0;
  color: var(--paper);
  background: transparent;
  font: 1000 clamp(18px, 1.8vw, 25px)/0.95 var(--display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.player-name:hover,
.player-name:focus-visible {
  border-bottom-color: var(--cyan);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.identity-main p {
  margin: 5px 0 0;
  color: var(--paper-dim);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.rating-block {
  margin-left: auto;
  display: grid;
  justify-items: end;
}

.rating-block small {
  color: var(--paper-dim);
  font-size: 7px;
  font-weight: 900;
}

.rating-block strong {
  font: 1000 27px/0.9 var(--display);
}

.rating-block span {
  color: var(--cyan);
  font-size: 8px;
  font-weight: 900;
}

.rating-meter {
  height: 5px;
  background: var(--ink);
}

.rating-meter span {
  height: 100%;
  display: block;
  background: var(--amber);
}

.next-rank {
  margin: 6px 0 0;
  color: var(--paper-dim);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.ladder-card {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--ink-soft);
}

.ladder-heading {
  align-items: start;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.ladder-heading h2 {
  margin: 0;
  font: 1000 29px/0.8 var(--display);
  letter-spacing: -0.04em;
}

.leaderboard-list {
  min-height: 0;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-rows: repeat(10, minmax(19px, 1fr));
}

.leaderboard-list li {
  min-height: 0;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #39283a;
  color: var(--paper-dim);
  font-size: clamp(7px, 0.7vw, 10px);
  font-weight: 800;
  letter-spacing: 0.07em;
}

.leaderboard-list li:first-child {
  color: var(--amber);
}

.leaderboard-list li:nth-child(2) {
  color: var(--cyan);
}

.leaderboard-list strong {
  overflow: hidden;
  color: var(--paper);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-name {
  overflow: hidden;
  color: var(--paper);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-row.is-you {
  background: var(--panel-2);
  box-shadow: inset 3px 0 0 var(--amber);
}

.leaderboard-row.is-empty {
  grid-row: 1 / -1;
  color: var(--paper-dim);
}

.ladder-rank {
  font: 1000 12px/1 var(--display);
}

.how-to-card {
  min-height: 64px;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  background: var(--panel-2);
}

.how-to-card:hover {
  border-color: var(--amber);
}

.how-index {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--paper);
  font: 1000 26px/1 var(--display);
}

.how-to-card span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.how-to-card small {
  color: var(--paper-dim);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.how-to-card strong {
  font: 1000 18px/1 var(--display);
  letter-spacing: 0.02em;
}

.how-to-card b {
  color: var(--amber);
  font-size: 23px;
}

/* Matchmaking queue */
.queue-screen {
  padding: calc(var(--bar-height) + env(safe-area-inset-top) + 28px) clamp(18px, 4vw, 64px) max(25px, env(safe-area-inset-bottom));
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--ink);
}

.queue-screen::before {
  top: 21%;
  right: auto;
  bottom: auto;
  left: -10vw;
  width: 42vw;
  height: 47vh;
  color: var(--amber);
  transform: rotate(-90deg);
}

.queue-noise,
.result-burst {
  position: absolute;
  z-index: 0;
  left: -2vw;
  right: -2vw;
  top: 45%;
  overflow: hidden;
  color: var(--paper);
  opacity: 0.035;
  font: 1000 clamp(70px, 11vw, 170px)/0.65 var(--display);
  letter-spacing: -0.1em;
  white-space: nowrap;
  transform: rotate(-5deg);
}

.queue-layout {
  position: relative;
  z-index: 2;
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: minmax(230px, 0.78fr) minmax(230px, 0.7fr) minmax(320px, 1.3fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: clamp(22px, 4vw, 64px);
}

.queue-header h1 {
  font-size: clamp(61px, 8vw, 116px);
}

.queue-header h1 em {
  color: transparent;
  -webkit-text-stroke: 2px var(--amber);
}

.queue-core {
  position: relative;
  width: min(28vw, 285px);
  aspect-ratio: 1;
  margin: auto;
  display: grid;
  place-items: center;
}

.queue-orbit {
  position: absolute;
  border: 2px solid var(--line);
  transform: rotate(45deg);
}

.orbit-one {
  inset: 7%;
  border-color: var(--amber);
  animation: orbit 5s steps(8, end) infinite;
}

.orbit-two {
  inset: 20%;
  border-color: var(--cyan);
  animation: orbit-reverse 3.5s steps(8, end) infinite;
}

.queue-orbit::before,
.queue-orbit::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: currentColor;
}

.queue-orbit::before { top: -7px; left: calc(50% - 6px); }
.queue-orbit::after { bottom: -7px; right: calc(50% - 6px); }

.queue-crown {
  position: relative;
  z-index: 2;
  width: 31%;
  height: 31%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--paper);
  clip-path: polygon(0 8%, 28% 30%, 50% 0, 72% 30%, 100% 8%, 84% 100%, 16% 100%);
}

.queue-crown span {
  margin-top: 17%;
  font: 1000 clamp(18px, 2.5vw, 36px)/1 var(--display);
}

.queue-core > b {
  position: absolute;
  bottom: -5px;
  color: var(--paper-dim);
  font-size: 8px;
  letter-spacing: 0.22em;
}

.queue-readout {
  display: grid;
  align-content: center;
}

.queue-readout p {
  margin: 0 0 4px;
  color: var(--paper-dim);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.queue-readout strong {
  font: 1000 clamp(72px, 10vw, 145px)/0.78 var(--display);
  letter-spacing: -0.07em;
}

.queue-readout span {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--cyan);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.queue-roster {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.queue-team > p {
  margin: 0 0 7px;
  color: var(--paper-dim);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.queue-team > p span { color: var(--paper); }
.queue-team ol {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  list-style: none;
}

.queue-team li {
  min-height: 49px;
  padding: 7px 9px;
  display: grid;
  align-content: center;
  border: 1px solid var(--line);
  background: var(--panel);
}

.queue-team li b {
  font: 1000 13px/1 var(--display);
}

.queue-team li small {
  margin-top: 5px;
  color: var(--paper-dim);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.queue-team-amber li { border-bottom-color: var(--amber); }
.queue-team-cyan li { border-bottom-color: var(--cyan); }
.queue-team-amber .slot-filled { color: var(--ink); background: var(--amber); border-color: var(--amber); }
.queue-team-amber .slot-filled small { color: var(--ink); }
.queue-versus { color: var(--paper-dim); font: 1000 18px/1 var(--display); }

.leave-queue {
  grid-column: 3;
  justify-self: end;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 18px;
  font: 900 10px/1 var(--body);
  letter-spacing: 0.1em;
}

.leave-queue span {
  padding: 4px 6px;
  border: 1px solid var(--line);
  font-size: 7px;
}

@keyframes orbit {
  to { transform: rotate(405deg); }
}

@keyframes orbit-reverse {
  to { transform: rotate(-315deg); }
}

/* Live match */
.match-screen {
  height: 100vh;
  height: 100dvh;
  height: var(--app-height);
  overflow: hidden;
  background: #080609;
}

#game-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: #140d15;
  touch-action: none;
}

.match-hud {
  position: absolute;
  z-index: 10;
  top: calc(var(--bar-height) + env(safe-area-inset-top) + 10px);
  left: 50%;
  width: min(1040px, calc(100% - 28px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  transform: translateX(-50%);
  filter: drop-shadow(5px 7px 0 rgba(5, 3, 6, 0.7));
  pointer-events: none;
}

.hud-team {
  min-height: 62px;
  padding: 9px 14px;
  display: grid;
  grid-template-columns: minmax(82px, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  color: var(--ink);
}

.hud-team-amber {
  background: var(--amber);
  clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
}

.hud-team-cyan {
  grid-template-columns: auto auto minmax(82px, 1fr);
  background: var(--cyan);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 15px 100%);
}

.hud-team-name,
.hud-stat {
  display: grid;
}

.hud-team-cyan .hud-team-name { justify-items: end; }
.hud-team-name small,
.hud-stat small,
.hud-center span,
.hud-center small {
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 0.12em;
}

.hud-team-name strong {
  font: 1000 clamp(22px, 2.5vw, 35px)/0.8 var(--display);
}

.hud-stat b {
  font: 1000 13px/1 var(--display);
  white-space: nowrap;
}

.hud-eggs b {
  letter-spacing: 0.08em;
}

.hud-berries b {
  color: #391023;
}

.hud-center {
  min-width: 155px;
  padding: 7px 18px 10px;
  display: grid;
  justify-items: center;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--line);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}

.hud-center span { color: var(--paper-dim); }
.hud-center strong { font: 1000 30px/0.95 var(--display); }
.hud-center small { color: var(--rose); }

.player-match-card {
  --player-accent: var(--amber);
  position: absolute;
  z-index: 12;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(17px, env(safe-area-inset-bottom));
  width: min(390px, calc(100% - 36px));
  padding: 12px 14px 11px;
  border: 1px solid rgba(244, 237, 218, 0.3);
  border-left: 5px solid var(--player-accent);
  color: var(--paper);
  background: rgba(7, 9, 13, 0.91);
  box-shadow: 8px 8px 0 rgba(5, 3, 6, 0.62), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.player-match-card[data-team="cyan"] { --player-accent: var(--cyan); }
.player-match-card[data-state="down"] { --player-accent: var(--rose); }
.player-match-card[data-moving="true"],
.player-match-card[data-acting="true"] {
  border-bottom-color: var(--player-accent);
}

.player-match-card[data-acting="true"] {
  box-shadow: 8px 8px 0 rgba(5, 3, 6, 0.62), 0 0 24px color-mix(in srgb, var(--player-accent) 26%, transparent);
}

.player-match-heading,
.player-match-role-row,
.player-match-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.player-match-heading {
  margin-bottom: 7px;
  color: var(--player-accent);
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 0.14em;
}

.player-you-badge {
  padding: 4px 7px 4px 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  background: var(--paper);
  font: 1000 10px/1 var(--display);
  letter-spacing: 0.08em;
  box-shadow: 3px 3px 0 var(--player-accent);
}

.player-you-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--player-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--player-accent) 18%, transparent);
}

.player-match-role-row {
  align-items: baseline;
}

.player-match-role-row strong {
  color: var(--paper);
  font: 1000 clamp(20px, 2.2vw, 28px)/0.9 var(--display);
  letter-spacing: -0.02em;
}

.player-match-role-row span {
  color: var(--paper-dim);
  font: 900 8px/1 var(--body);
  letter-spacing: 0.08em;
  text-align: right;
}

.player-match-card[data-state="down"] .player-match-role-row strong,
.player-match-card[data-carrying="true"] .player-match-rail span:first-child {
  color: var(--player-accent);
}

.player-match-card > p {
  margin: 8px 0 9px;
  color: rgba(244, 237, 218, 0.86);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.35;
}

.player-match-rail {
  padding-top: 7px;
  border-top: 1px solid rgba(244, 237, 218, 0.16);
}

.player-match-rail span {
  color: var(--paper-dim);
  font: 900 7px/1 var(--body);
  letter-spacing: 0.1em;
}

.player-match-rail span:last-child {
  color: var(--player-accent);
  text-align: right;
}

.proof-ribbon {
  position: absolute;
  z-index: 13;
  top: calc(var(--bar-height) + env(safe-area-inset-top) + 91px);
  right: max(18px, env(safe-area-inset-right));
  width: min(690px, calc(100% - 36px));
  padding: 8px 10px 9px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  border: 1px solid rgba(244, 237, 218, 0.3);
  border-top: 3px solid var(--cyan);
  color: var(--paper);
  background: rgba(4, 10, 15, 0.93);
  box-shadow: 8px 8px 0 rgba(5, 3, 6, 0.62);
  pointer-events: none;
}

.proof-ribbon-heading {
  min-width: 152px;
  padding: 3px 9px 3px 3px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-right: 1px solid rgba(244, 237, 218, 0.18);
}

.proof-ribbon-heading span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--cyan);
  font: 1000 11px/1 var(--display);
  letter-spacing: 0.08em;
}

.proof-ribbon-heading span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 4px rgba(255, 70, 103, 0.15), 0 0 14px rgba(255, 70, 103, 0.8);
}

.proof-ribbon-heading strong {
  color: var(--paper-dim);
  font-size: 6px;
  line-height: 1.2;
  letter-spacing: 0.16em;
}

.proof-ribbon-stats {
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1.08fr 1fr 0.9fr 0.95fr 1.08fr;
  align-items: stretch;
}

.proof-ribbon-stats div {
  min-width: 0;
  padding: 3px 8px;
  display: grid;
  align-content: center;
  gap: 4px;
  border-right: 1px solid rgba(244, 237, 218, 0.12);
}

.proof-ribbon-stats div:last-child { border-right: 0; }

.proof-ribbon-stats dt {
  color: var(--paper-dim);
  font-size: 6px;
  font-weight: 1000;
  letter-spacing: 0.11em;
  white-space: nowrap;
}

.proof-ribbon-stats dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--paper);
  font: 1000 10px/1 var(--display);
  letter-spacing: 0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proof-ribbon-stats div:nth-child(2) dd,
.proof-ribbon-stats div:nth-child(3) dd { color: var(--amber); }
.proof-ribbon-stats div:nth-child(4) dd,
.proof-ribbon-stats div:nth-child(5) dd { color: var(--cyan); }

.match-announcer {
  position: absolute;
  z-index: 15;
  top: 32%;
  left: 50%;
  margin: 0;
  padding: 8px 16px;
  color: var(--ink);
  background: var(--paper);
  font: 1000 clamp(24px, 4vw, 62px)/1 var(--display);
  text-transform: uppercase;
  transform: translateX(-50%) rotate(-2deg);
  box-shadow: 8px 8px 0 var(--amber);
}

.match-announcer:empty {
  display: none;
}

.match-announcer[data-team="cyan"] { box-shadow: 8px 8px 0 var(--cyan); }
.match-announcer[data-team="amber"] { box-shadow: 8px 8px 0 var(--amber); }

.desktop-controls {
  position: absolute;
  z-index: 12;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(13px, env(safe-area-inset-bottom));
  display: flex;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(244, 237, 218, 0.2);
  background: rgba(7, 9, 13, 0.87);
  box-shadow: 6px 6px 0 rgba(5, 3, 6, 0.62);
}

.control-feedback {
  min-width: 116px;
  min-height: 47px;
  padding: 5px 7px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  align-items: center;
  column-gap: 8px;
  border: 1px solid transparent;
  color: var(--paper-dim);
  background: rgba(244, 237, 218, 0.04);
  transition: color 100ms ease, border-color 100ms ease, background 100ms ease, transform 100ms ease;
}

.control-feedback small {
  grid-column: 1 / -1;
  font-size: 6px;
  font-weight: 1000;
  letter-spacing: 0.14em;
}

.control-feedback b {
  font: 1000 12px/1 var(--display);
  letter-spacing: 0.04em;
}

.control-feedback.is-active {
  color: var(--ink);
  border-color: var(--amber);
  background: var(--amber);
  transform: translateY(-2px);
}

.control-feedback.is-active kbd {
  color: var(--paper);
  border-color: var(--ink);
  background: var(--ink);
}

kbd {
  min-width: 24px;
  padding: 4px 6px;
  display: inline-block;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--line);
  color: var(--paper);
  background: var(--panel);
  font: 900 10px/1 var(--body);
  text-align: center;
  box-shadow: none;
}

.touch-controls {
  position: absolute;
  z-index: 20;
  left: max(13px, env(safe-area-inset-left));
  right: max(13px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: none;
  align-items: end;
  justify-content: space-between;
  pointer-events: none;
}

.touch-dpad {
  width: 152px;
  height: 152px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 4px;
  transform: rotate(45deg);
}

.touch-button {
  min-width: 48px;
  min-height: 48px;
  border: 1px solid rgba(244, 237, 218, 0.45);
  color: var(--paper);
  background: rgba(33, 20, 33, 0.84);
  font-weight: 1000;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: auto;
}

.touch-button:active,
.touch-button.is-active {
  color: var(--ink);
  background: var(--amber);
}

.touch-dpad .touch-button {
  transform: rotate(-45deg);
}

.touch-up { grid-area: 1 / 2; }
.touch-left { grid-area: 2 / 1; }
.touch-down { grid-area: 3 / 2; }
.touch-right { grid-area: 2 / 3; }

.touch-action {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 3px solid var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(16, 11, 18, 0.72);
}

.touch-action span { max-width: 78px; font: 1000 19px/0.9 var(--display); }
.touch-action small { font-size: 7px; letter-spacing: 0.1em; }

/* Result overlay */
.results-screen {
  padding: calc(var(--bar-height) + env(safe-area-inset-top) + 20px) 18px max(20px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #120c14;
}

.results-screen::before {
  right: 4vw;
  bottom: 3vh;
  width: 46vw;
  height: 44vh;
  color: var(--amber);
  opacity: 0.16;
}

.result-burst {
  top: 37%;
  color: var(--amber);
  opacity: 0.08;
  transform: rotate(7deg);
}

.result-card {
  position: relative;
  z-index: 2;
  width: min(680px, 100%);
  padding: clamp(22px, 4vw, 54px);
  overflow: hidden;
  background: var(--panel);
  box-shadow: 13px 13px 0 var(--amber);
}

.result-index {
  position: absolute;
  right: 20px;
  top: 15px;
  color: var(--paper);
  opacity: 0.06;
  font: 1000 clamp(110px, 20vw, 240px)/0.8 var(--display);
}

.result-card h1 {
  position: relative;
  font-size: clamp(64px, 11vw, 128px);
}

.result-card h1 em { color: var(--amber); }

.result-reason {
  max-width: 500px;
  margin: 18px 0 21px;
  color: var(--paper-dim);
  font-size: 14px;
}

.result-rating {
  padding: 13px 15px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-left: 5px solid var(--cyan);
  color: var(--ink);
  background: var(--paper);
}

.result-rating span {
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 0.14em;
}

.result-rating strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: #00647a;
  font: 1000 clamp(28px, 4vw, 47px)/1 var(--display);
}

.result-rating small { font-size: 10px; font-weight: 800; }

.result-stats {
  margin: 15px 0 21px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.result-stats div {
  padding: 11px;
  border-right: 1px solid var(--line);
}

.result-stats div:last-child { border: 0; }
.result-stats dt { color: var(--paper-dim); font-size: 7px; font-weight: 900; letter-spacing: 0.1em; }
.result-stats dd { margin: 3px 0 0; font: 1000 18px/1 var(--display); }

.result-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Rules dialog */
.how-to-modal {
  width: min(980px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  color: var(--paper);
  background: var(--ink-soft);
  box-shadow: 12px 12px 0 var(--amber);
}

.how-to-modal:not([open]) {
  display: none;
}

.how-to-modal::backdrop {
  background: rgba(5, 3, 6, 0.88);
}

.how-to-modal form {
  padding: clamp(20px, 4vw, 46px);
}

.modal-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}

.modal-heading h2 {
  font-size: clamp(47px, 7.5vw, 90px);
}

.modal-close {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  color: var(--paper);
  background: var(--panel);
  font: 300 31px/1 var(--body);
  cursor: pointer;
}

.modal-close:hover { color: var(--ink); background: var(--amber); border-color: var(--amber); }

.modal-intro {
  max-width: 600px;
  margin: 17px 0 24px;
  color: var(--paper-dim);
}

.manual-section {
  padding: 17px 0;
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 18px;
  border-top: 1px solid var(--line);
}

.manual-label {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.manual-label span {
  color: var(--amber);
  font: 1000 13px/1 var(--display);
}

.manual-label h3 {
  margin: 0;
  font: 1000 15px/1 var(--display);
  letter-spacing: 0.04em;
}

.path-grid,
.role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.path-card {
  min-height: 143px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.path-card b {
  color: var(--amber);
  font: 1000 27px/1 var(--display);
}

.path-card h4,
.role-grid h4 {
  margin: 8px 0 5px;
  font: 1000 14px/1 var(--display);
  letter-spacing: 0.03em;
}

.path-card p,
.role-grid p {
  margin: 0;
  color: var(--paper-dim);
  font-size: 10px;
  line-height: 1.45;
}

.path-seeds b { color: var(--rose); }
.path-crawler b { color: var(--cyan); }

.role-grid article {
  padding: 9px;
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  gap: 10px;
}

.role-grid article > strong {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--paper);
  font: 1000 18px/1 var(--display);
  transform: rotate(45deg);
}

.role-grid article > strong::first-letter { transform: rotate(-45deg); }
.role-grid h4 { margin-top: 0; }

.key-guide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.key-guide p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.key-guide p > span { display: inline-flex; gap: 3px; }
.key-guide b { color: var(--paper-dim); font-size: 8px; letter-spacing: 0.08em; }
.space-key { min-width: 68px; }

.manual-mobile-note {
  grid-column: 2;
  margin: 11px 0 0;
  padding: 9px 11px;
  border-left: 4px solid var(--cyan);
  color: var(--paper-dim);
  background: rgba(0, 217, 255, 0.06);
  font-size: 9px;
  line-height: 1.45;
}

.manual-mobile-note strong {
  color: var(--cyan);
  letter-spacing: 0.08em;
}

.manual-ready {
  margin: 6px 0 5px auto;
  display: grid;
}

.toast {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  max-width: min(440px, calc(100% - 28px));
  padding: 12px 18px;
  color: var(--ink);
  background: var(--paper);
  border-left: 7px solid var(--amber);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  transform: translateX(-50%);
  box-shadow: 7px 7px 0 var(--shadow);
}

@media (max-width: 1020px) {
  .home-screen {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .home-stage {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .cta-copy { display: none; }
  .match-actions { justify-content: flex-end; }
  .queue-layout { grid-template-columns: 1fr 0.8fr 1fr; }
  .hud-team { gap: 8px; }
}

@media (max-width: 820px) {
  :root { --bar-height: 61px; }

  .global-bar {
    gap: 9px;
  }

  .brand-type small,
  .online-label,
  .sound-label {
    display: none;
  }

  .connection-pill,
  .sound-toggle { padding: 0 9px; }

  .home-screen {
    padding-left: 10px;
    padding-right: 10px;
  }

  .broadcast-ticker { overflow: hidden; }
  .broadcast-ticker > p:not(:first-of-type) { display: none; }
  .broadcast-ticker > p:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .home-stage {
    display: block;
  }

  .ranked-card {
    min-height: calc(100dvh - 118px);
    grid-template-rows: auto minmax(330px, 1fr) auto;
  }

  .player-rail {
    margin-top: 10px;
    grid-template-rows: auto auto auto;
  }

  .ladder-card { min-height: 400px; }
  .leaderboard-list { grid-template-rows: repeat(10, 29px); }
  .leaderboard-list li { font-size: 9px; }

  .queue-layout {
    grid-template-columns: 1fr 1fr;
    gap: 23px;
  }

  .queue-core { width: min(39vw, 240px); }
  .queue-readout { grid-column: 1 / -1; text-align: center; }
  .queue-roster { grid-column: 1 / -1; }
  .leave-queue { grid-column: 1 / -1; }

  .hud-team {
    min-height: 51px;
    padding: 6px 9px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .hud-team-name { display: none; }
  .hud-team-cyan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hud-team-cyan .hud-stat { text-align: right; }
  .hud-stat { min-width: 0; }
  .hud-stat small {
    overflow: hidden;
    font-size: 8px;
    letter-spacing: 0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hud-center { min-width: 108px; padding-inline: 10px; }
  .hud-center span { display: none; }
  .desktop-controls { display: none; }
  .touch-controls { display: flex; }

  .player-match-card {
    left: 50%;
    bottom: max(174px, calc(env(safe-area-inset-bottom) + 164px));
    width: min(390px, calc(100% - 28px));
    transform: translateX(-50%);
    padding: 7px 10px;
  }

  .player-match-heading { margin-bottom: 3px; }
  .player-match-role-row strong { font-size: 17px; }
  .player-match-card > p {
    margin: 4px 0 5px;
    display: -webkit-box;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.3;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .player-match-rail { display: flex; }
  .player-match-rail span {
    min-width: 0;
    overflow: hidden;
    font-size: 8px;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .proof-ribbon {
    top: calc(var(--bar-height) + env(safe-area-inset-top) + 67px);
    right: 50%;
    width: calc(100% - 18px);
    padding: 6px 7px;
    grid-template-columns: 1fr;
    gap: 5px;
    transform: translateX(50%);
  }

  .proof-ribbon-heading {
    min-width: 0;
    padding: 0 2px 5px;
    grid-template-columns: auto 1fr;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid rgba(244, 237, 218, 0.18);
  }

  .proof-ribbon-heading strong { font-size: 8px; text-align: right; }
  .proof-ribbon-stats div { padding: 2px 5px; }
  .proof-ribbon-stats dt {
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
  }
  .proof-ribbon-stats dd { font-size: 9px; }

  .manual-section {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .manual-mobile-note { grid-column: 1; }
}

@media (max-width: 560px) {
  .brand-lockup { gap: 8px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-type strong { font-size: 17px; }
  .connection-pill { min-height: 34px; padding-inline: 7px; gap: 4px; }
  .sound-toggle { min-width: 34px; min-height: 34px; justify-content: center; }

  .ranked-card {
    min-height: calc(100dvh - 111px);
    padding: 13px;
    grid-template-rows: auto minmax(305px, 1fr) auto;
  }

  .ranked-heading h1 { font-size: clamp(43px, 16vw, 66px); }
  .mode-stamp { width: 48px; height: 48px; }
  .mode-stamp strong { font-size: 23px; }
  .arena-boundary { inset: 42px 25px 43px; }
  .arena-caption { left: 18px; }
  .victory-key { right: 17px; left: 17px; gap: 3px; }
  .victory-key li { padding-inline: 5px; }
  .victory-key strong { font-size: 7px; }
  .team-plaque span { display: none; }
  .team-plaque { padding: 5px; }
  .team-plaque-amber { left: 9px; }
  .team-plaque-cyan { right: 9px; }
  .fighter { width: 23px; height: 23px; }
  .fighter b { font-size: 9px; }
  .fighter i { width: 6px; height: 10px; }

  .match-actions { display: block; }
  .cta-buttons { width: 100%; }
  .button { min-height: 50px; padding-inline: 13px; }
  .button-primary { min-width: 0; flex: 1; }
  .cta-buttons .button-ghost { min-width: 110px; }

  .queue-screen {
    padding-left: 14px;
    padding-right: 14px;
    overflow: auto;
  }

  .queue-layout { display: block; text-align: center; }
  .queue-header h1 { font-size: 55px; }
  .queue-core { width: min(56vw, 220px); margin-block: 30px; }
  .queue-readout strong { font-size: 86px; }
  .queue-roster { margin-top: 28px; display: block; text-align: left; }
  .queue-versus { margin: 10px 0; text-align: center; }
  .queue-team ol { grid-template-columns: repeat(2, 1fr); }
  .leave-queue { margin: 20px 0 0 auto; }

  .match-hud {
    top: calc(var(--bar-height) + env(safe-area-inset-top) + 5px);
    width: calc(100% - 10px);
  }

  .hud-team-name strong { font-size: 17px; }
  .hud-stat b { font-size: 9px; }
  .hud-stat small { font-size: 8px; }
  .hud-center { min-width: 79px; }
  .hud-center strong { font-size: 21px; }
  .hud-center small { font-size: 8px; letter-spacing: 0.05em; }

  .touch-dpad { width: 152px; height: 152px; }
  .touch-action { width: 84px; height: 84px; }
  .touch-action span { max-width: 68px; font-size: 16px; }

  .player-match-card {
    bottom: max(174px, calc(env(safe-area-inset-bottom) + 164px));
    padding: 9px 10px 8px;
  }

  .player-match-heading { margin-bottom: 5px; }
  .player-match-role-row strong { font-size: 18px; }
  .player-match-role-row span { font-size: 8px; }
  .player-match-card > p { margin: 5px 0 6px; font-size: 9px; }
  .player-match-rail { padding-top: 5px; }
  .player-match-rail span { font-size: 8px; }

  .proof-ribbon {
    top: calc(var(--bar-height) + env(safe-area-inset-top) + 58px);
  }

  .proof-ribbon-heading span { font-size: 9px; }
  .proof-ribbon-stats div { padding-inline: 3px; }
  .proof-ribbon-stats dt { font-size: 7px; letter-spacing: 0.04em; }
  .proof-ribbon-stats dd { font-size: 9px; }

  .result-card { padding: 22px 17px; box-shadow: 8px 8px 0 var(--amber); }
  .result-card h1 { font-size: clamp(56px, 19vw, 90px); }
  .result-rating { grid-template-columns: 1fr; }
  .result-rating strong { grid-row: auto; grid-column: auto; }
  .result-stats { grid-template-columns: repeat(2, 1fr); }
  .result-stats div:nth-child(2) { border-right: 0; }
  .result-stats div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .result-actions { display: grid; grid-template-columns: 1fr; }
  .result-actions .button { width: 100%; }

  .how-to-modal { width: calc(100% - 16px); max-height: calc(100dvh - 16px); box-shadow: 7px 7px 0 var(--amber); }
  .how-to-modal form { padding: 18px 15px; }
  .modal-heading h2 { font-size: 45px; }
  .path-grid,
  .role-grid,
  .key-guide { grid-template-columns: 1fr; }
  .path-card { min-height: 0; }
  .controls-section .key-guide { gap: 15px; }
  .manual-ready { width: 100%; }
}

@media (pointer: coarse) and (orientation: landscape) {
  :root { --bar-height: 52px; }
  .global-bar { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .brand-mark { width: 33px; height: 33px; }
  .brand-type small { display: none; }
  .match-hud { top: calc(var(--bar-height) + env(safe-area-inset-top) + 4px); }
  .touch-dpad { width: 144px; height: 144px; }
  .touch-action { width: 80px; height: 80px; }
  .touch-action span { font-size: 15px; }
  .player-match-card {
    top: calc(var(--bar-height) + env(safe-area-inset-top) + 59px);
    bottom: auto;
    left: 50%;
    width: min(340px, calc(100% - 28px));
    padding-block: 7px;
    transform: translateX(-50%);
  }
  .player-match-card > p,
  .player-match-rail { display: none; }
  .proof-ribbon {
    top: calc(var(--bar-height) + env(safe-area-inset-top) + 122px);
    width: clamp(300px, calc(100% - 190px), 520px);
  }
  .proof-ribbon-heading { display: none; }
}

@media (hover: none), (pointer: coarse) {
  .desktop-controls { display: none; }
  .touch-controls { display: flex; }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1000px) {
  :root { --bar-height: 52px; }
  .desktop-controls { display: none; }
  .touch-controls { display: flex; }
  .touch-dpad { width: 144px; height: 144px; }
  .touch-action { width: 80px; height: 80px; }
  .player-match-card {
    top: calc(var(--bar-height) + env(safe-area-inset-top) + 59px);
    bottom: auto;
    left: 50%;
    width: min(340px, calc(100% - 28px));
    padding-block: 7px;
    transform: translateX(-50%);
  }
  .player-match-card > p,
  .player-match-rail { display: none; }
  .proof-ribbon {
    top: calc(var(--bar-height) + env(safe-area-inset-top) + 122px);
    width: clamp(300px, calc(100% - 190px), 520px);
  }
  .proof-ribbon-heading { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@supports not (height: 100dvh) {
  .arcade-shell,
  .screen {
    min-height: 100vh;
  }

  .home-screen {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }
}

@media (prefers-contrast: more) {
  :root {
    --paper-dim: #f4edda;
    --line: #a997a7;
  }

  .cut-panel,
  .arena-preview,
  .leaderboard-list li {
    border-color: var(--paper);
  }
}