:root {
  --paper: #eeeee6;
  --ink: #272d26;
  --muted: #82877b;
  --line: #d8dbcf;
  --yellow: #f3c469;
  --dark: #252e27;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: default;
  opacity: .45;
}

button:focus-visible, a:focus-visible, canvas:focus-visible {
  outline: 3px solid #de9541;
  outline-offset: 4px;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
}

button, select {
  touch-action: manipulation;
}

[hidden] {
  display: none!important;
}

.site-header {
  height: 88px;
  border-bottom: 1px solid var(--line);
  padding: 0 4.3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 32px;
  font-weight: 950;
  letter-spacing: -1.7px;
}

.brand svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
}

.brand-dot {
  color: #ba7a35;
}

.site-header nav {
  height: 100%;
  display: flex;
  gap: 36px;
  align-items: center;
  margin-right: auto;
  margin-left: 68px;
  font-size: 13px;
  font-weight: 700;
}

.nav-active {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.nav-active:after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 3px;
  left: 0;
  right: 0;
  background: var(--ink);
}

.nav-link {
  background: none;
  color: #85897e;
  padding: 10px 0;
}

.nav-link span {
  margin-left: 7px;
}

.version {
  font: 10px var(--mono);
  letter-spacing: .6px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.version-number {
  margin-left: 8px;
  border: 1px solid #cfd2c5;
  padding: 4px 6px;
  color: #777d70;
}

.status-dot {
  display: inline-block;
  background: #6b8263;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

main {
  max-width: 1600px;
  margin: auto;
  padding: 35px 4.3% 0;
}

.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.eyebrow {
  font: 9px var(--mono);
  letter-spacing: 1.7px;
  font-weight: 600;
}

.page-heading .eyebrow {
  color: #848878;
  margin-bottom: 9px;
}

h1 {
  font-size: 34px;
  letter-spacing: -1.3px;
  margin: 0;
  font-weight: 800;
}

.player-profile {
  display: flex;
  gap: 10px;
  align-items: center;
}

.avatar-mini {
  height: 38px;
  width: 38px;
  border-radius: 50%;
  background: #ded8c3;
  border: 4px solid #e5e3d6;
  color: #4b5144;
  text-align: center;
  padding-top: 4px;
}

.player-profile strong {
  display: block;
  font: 10px var(--mono);
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.player-profile div > span {
  display: block;
  font-size: 10px;
  color: #777e70;
}

.profile-badge {
  font-size: 21px;
  margin-left: 13px;
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 298px;
  gap: 25px;
  align-items: start;
}

.arena-meta {
  height: 38px;
  display: flex;
  justify-content: space-between;
  font: 10px var(--mono);
  align-items: flex-start;
  letter-spacing: .6px;
}

.arena-meta > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.arena-dot {
  width: 7px;
  height: 7px;
  background: #c0904a;
  transform: rotate(45deg);
}

.meta-divider {
  margin: 0 6px;
  color: #b2b7a7;
}

.practice-label {
  font-size: 9px;
  color: #777f71;
}

.arena-frame {
  position: relative;
  background: #d6d8b9;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 0 #b6beac;
}

#arena {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5/3;
  outline-offset: -3px;
}

.game-hud {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 20px;
  right: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.round-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 8px var(--mono);
  letter-spacing: .8px;
  color: #dee1c9;
  background: #303b30;
  padding: 9px 11px;
  border-radius: 3px;
}

.round-chip .status-dot {
  background: #edc975;
  width: 5px;
  height: 5px;
}

.hud-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 11px var(--mono);
  color: #3f4c3d;
}

.hud-right > span {
  padding-right: 8px;
}

.icon-button {
  height: 28px;
  width: 28px;
  background: #e3e5cc99;
  border: 1px solid #7e927e44;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  pointer-events: auto;
  font-size: 17px;
}

.icon-button:hover {
  background: #faf6de;
}

#sound-slash {
  position: absolute;
  font-size: 19px;
}

.audio-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; padding: 7px 0; margin-top: 8px; color: #61715d; }
.audio-controls label { font-size: 10px; font-weight: 600; }
.audio-controls input { flex: 1; min-width: 90px; max-width: 200px; height: 44px; margin: 0; accent-color: #748c65; cursor: pointer; }
.audio-controls output { min-width: 38px; font: 9px var(--mono); text-align: right; }
.audio-controls > span { flex-basis: 100%; font-size: 9px; color: #7d886e; line-height: 1.5; }

.start-overlay {
  position: absolute;
  top: 20%;
  left: 5%;
  max-width: 55%;
  isolation: isolate;
  pointer-events: none;
}

.start-overlay::before {
  content: '';
  position: absolute;
  inset: -14px -25px;
  background: linear-gradient(90deg, #e5e6cddd, #e5e6cd88 75%, transparent);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}

.tiny-tag {
  font: 8px var(--mono);
  letter-spacing: 1.2px;
  background: #eae8cbbf;
  padding: 6px 8px;
  border: 1px solid #f6f2d750;
  display: inline-block;
}

.start-overlay h2 {
  font-size: clamp(25px, 3vw, 45px);
  letter-spacing: -1.7px;
  line-height: 1.03;
  margin: 14px 0 13px;
  font-weight: 900;
  color: #273b2c;
  text-shadow: 0 1px 15px #e4e2c29c;
}

.start-overlay p {
  font-size: 11px;
  line-height: 1.65;
  color: #526046;
  margin: 0 0 18px;
}

.primary-button {
  background: var(--yellow);
  border: 1px solid #d3a247;
  border-radius: 3px;
  box-shadow: 0 3px 0 #ad7931;
  padding: 13px 17px;
  min-width: 180px;
  font-size: 11px;
  font-weight: 750;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  transition: transform .15s, background .15s;
  pointer-events: auto;
}

.primary-button:hover {
  background: #f8d68b;
  transform: translateY(-1px);
}

.primary-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #ad7931;
}

.primary-button > span {
  font-size: 18px;
}

.start-footnote {
  display: block;
  font: 7px var(--mono);
  letter-spacing: .7px;
  color: #617054;
  margin-top: 13px;
}

.arena-bottom {
  position: absolute;
  bottom: 16px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  font: 8px var(--mono);
  letter-spacing: 1px;
  color: #bfc8a9;
  pointer-events: none;
}

.small-diamond {
  color: var(--yellow);
  margin-right: 5px;
}

.floor-marker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.floor-marker i {
  width: 1px;
  height: 9px;
  background: #717f60;
}

.roster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
  gap: 9px;
}

.fighter-card {
  background: #e4e6dc;
  border: 1px solid #d4d9cb;
  border-radius: 4px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 62px;
  position: relative;
}

.fighter-card.is-you {
  border-color: #b2bca3;
  background: #e8eade;
}

.fighter-card.out {
  opacity: .4;
}

.fighter-portrait {
  height: 31px;
  width: 27px;
  border-radius: 6px 6px 4px 4px;
  background: var(--fighter);
  border: 2px solid #465143;
  position: relative;
  flex-shrink: 0;
  box-shadow: inset 0 -6px #00000015;
}

.fighter-portrait:before {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 7px;
  height: 8px;
  background: #344534;
  border-radius: 2px;
}

.fighter-portrait:after {
  content: '••';
  position: absolute;
  left: 6px;
  top: 2px;
  letter-spacing: 2px;
  color: #f6ecc8;
  font-size: 11px;
}

.fighter-info {
  min-width: 0;
  flex: 1;
}

.fighter-info strong {
  font: 8px var(--mono);
  font-weight: 650;
  letter-spacing: .4px;
  display: block;
  white-space: nowrap;
}

.fighter-info small {
  display: block;
  font: 7px var(--mono);
  margin-top: 5px;
  color: #7a8271;
}

.fighter-damage {
  font: 19px var(--mono);
  font-weight: 600;
  margin-left: auto;
  letter-spacing: -1.3px;
}

.fighter-damage span {
  font-size: 9px;
  color: #7a8271;
}

.under-arena {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 21px 0 18px;
  border-bottom: 1px solid var(--line);
  gap: 10px;
}

.battle-note {
  display: flex;
  gap: 12px;
  align-items: center;
}

.outline-star {
  font-size: 29px;
  color: #768267;
}

.battle-note strong {
  font-size: 11px;
  font-weight: 700;
}

.battle-note p {
  font-size: 10px;
  color: #818575;
  margin: 5px 0 0;
}

.text-button {
  font-size: 10px;
  background: none;
  white-space: nowrap;
}

.text-button span {
  margin-left: 6px;
}

.keyboard-strip {
  display: flex;
  gap: 19px;
  align-items: center;
  color: #808678;
  font-size: 8px;
  padding: 17px 0;
  flex-wrap: wrap;
}

.keyboard-strip > span {
  display: flex;
  gap: 4px;
  align-items: center;
}

kbd {
  font: 8px var(--mono);
  border: 1px solid #cbd0c0;
  background: #e8e9e0;
  border-radius: 3px;
  padding: 3px 4px;
  min-width: 20px;
  display: inline-block;
  text-align: center;
  box-shadow: 0 1px 0 #ccd1c0;
  color: #535e4e;
  margin-right: 2px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sidebar-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #e0e5d7;
  border: 1px solid #cbd3bf;
  border-radius: 5px;
}

.sidebar-tabs button {
  flex: 1;
  padding: 10px 5px;
  border-radius: 3px;
  background: transparent;
  color: #7b866c;
  font-size: 10px;
  font-weight: 600;
}

.sidebar-tabs button[aria-selected="true"] {
  background: #f2f1e5;
  color: #34472c;
  box-shadow: 0 1px 3px #384d2620;
}

.tower-panels {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.lab-card {
  background: #e8eddf;
  border: 1px solid #c6d1b7;
  border-radius: 5px;
  padding: 18px;
}

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

.lab-heading .eyebrow {
  color: #899876;
  font-size: 7px;
  letter-spacing: 1px;
}

.lab-heading h2 {
  margin: 7px 0 0;
  font-size: 22px;
  letter-spacing: -.8px;
}

.lab-live {
  border: 1px solid #c2ccb2;
  border-radius: 3px;
  padding: 4px 5px;
  font: 6px var(--mono);
  color: #839171;
  white-space: nowrap;
}

.lab-live.has-modifiers {
  background: #f3c469;
  border-color: #cfad60;
  color: #66522a;
}

.lab-intro {
  font-size: 10px;
  line-height: 1.65;
  color: #7d886e;
  margin: 12px 0 14px;
}

.night-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px 7px 5px;
  margin-bottom: 12px;
  color: #e8edde;
  border: 1px solid #405971;
  border-radius: 5px;
  background: linear-gradient(120deg, #263e54, #192f47);
  cursor: pointer;
  overflow: hidden;
}

.night-illustration { width: 50px; height: 56px; flex-shrink: 0; }
.night-illustration svg { display: block; width: 100%; height: 100%; }
.night-switch .modifier-copy strong { color: #e7ecdd; font-size: 11px; }
.night-switch .modifier-copy small { color: #93a9bc; font-size: 7px; }
.night-switch input { position: absolute; right: 10px; opacity: 0; width: 30px; height: 30px; cursor: pointer; }
.night-switch .switch-track { background: #496278; border-color: #567187; }
.night-switch input:checked + .switch-track { background: #acd7e3; border-color: #bce3e9; }
.night-switch input:checked + .switch-track::after { transform: translateX(13px); background: #314961; }
.night-switch input:focus-visible + .switch-track { outline: 2px solid #efc374; outline-offset: 3px; }
.night-switch:has(input:checked) { border-color: #93c5d4; box-shadow: 0 0 18px #5e8e9b1a; }

.chicken-control {
  border: 1px solid #d7c6ab;
  border-radius: 5px;
  padding: 0 10px;
  margin-bottom: 14px;
  background: #eee6d3;
}

.chicken-switch { border-bottom: 0; min-height: 67px; gap: 6px; }
.chicken-portrait { width: 54px; height: 52px; flex-shrink: 0; }
.chicken-portrait svg { display: block; width: 100%; height: 100%; }
.chicken-switch .modifier-copy strong { font-size: 11px; color: #665d46; }
.chicken-switch .modifier-copy small { color: #9a876c; }
.chicken-switch input:checked + .switch-track { background: #bd846b; border-color: #ad785f; }
.chicken-control-footer { display: flex; justify-content: space-between; align-items: center; gap: 5px; padding: 7px 0; border-top: 1px solid #e1d5bd; }
.chicken-control-footer > span { font: 6px var(--mono); color: #a48b69; }
.chicken-control-footer button { padding: 5px 6px; border: 1px solid #d2bda0; border-radius: 3px; background: #e6d6b8; color: #886746; font-size: 7px; }
.chicken-control-footer button:hover:not(:disabled) { background: #eac7a0; }

.player-kit { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 59px; margin-top: 12px; padding: 9px 14px; border: 1px solid #d0d8c5; border-radius: 4px; background: #e5e9dc; }
.kit-main { display: flex; gap: 8px; align-items: center; }
.kit-main > div { display: flex; flex-direction: column; gap: 4px; }
.kit-label { font: 6px var(--mono); letter-spacing: .8px; color: #91a07f; }
.kit-main strong { font-size: 11px; font-weight: 600; color: #526443; }
.kit-instruction { font-size: 8px; color: #8b987a; }
.kit-art { width: 53px; height: 42px; flex-shrink: 0; }
.kit-art svg { width: 100%; height: 100%; display: block; }
.kit-boost { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
#kit-boost-charges { color: #68a2b0; font-size: 13px; letter-spacing: 3px; }
.kit-boost small { font: 7px var(--mono); color: #719698; }
.fighter-card.has-jets { box-shadow: inset 0 -2px #83bbc7; }

.armory-card { border: 1px solid #c9d2ba; background: #e9ece0; border-radius: 5px; padding: 18px; }
.armory-heading .eyebrow { font-size: 7px; color: #8b9979; letter-spacing: .9px; }
.armory-heading h2 { font-size: 23px; line-height: 1.12; letter-spacing: -.8px; margin: 10px 0; max-width: 220px; }
.armory-heading p { font-size: 10px; color: #8b967b; line-height: 1.7; margin: 0 0 18px; }
.gear-cards { display: flex; flex-direction: column; gap: 12px; }
.gear-card { position: relative; padding: 14px; border: 1px solid #ccd4bf; border-radius: 5px; background: #f0f0e6; overflow: hidden; }
.gear-card-top { display: flex; justify-content: space-between; align-items: center; gap: 7px; margin: -8px -3px 0; }
.gear-card-art { width: 94px; height: 75px; flex-shrink: 0; position: relative; }
.gear-card-art::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--gear-color); opacity: .12; }
.gear-card-art svg { position: relative; width: 100%; height: 100%; display: block; }
.gear-card-label { font: 6px/1.6 var(--mono); letter-spacing: .65px; color: #899779; text-align: right; }
.gear-card h3 { margin: 5px 0 7px; font-size: 16px; letter-spacing: -.4px; }
.gear-card > p { font-size: 9px; color: #88947a; line-height: 1.6; margin: 0 0 10px; }
.gear-instructions { font: 7px/1.6 var(--mono); border-top: 1px solid #dee1d3; padding-top: 8px; color: #8d967f; }
.gear-card button { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 1px solid #c2ccb2; background: #e1e6d3; border-radius: 3px; margin-top: 10px; padding: 10px; font-size: 9px; color: #576b44; }
.gear-card button:hover { background: #d6dfc4; border-color: #a3b78a; }
.armory-feedback { font: 8px/1.6 var(--mono); color: #6d8962; margin: 13px 0 0; }
.armory-note { display: flex; gap: 8px; align-items: flex-start; border-top: 1px solid #d1dac3; margin-top: 14px; padding-top: 12px; color: #8f9c7e; }
.armory-note > span { font-size: 17px; }
.armory-note > p { font: 7px/1.7 var(--mono); margin: 0; }

.arena-frame.is-night { background: #10263b; }
.is-night .hud-right { color: #cbd6dc; }
.is-night .icon-button { background: #23425baa; border-color: #69839955; color: #cbdde8; }
.is-night .icon-button:hover { background: #3b5974; }
.is-night .night-button { color: #f0d49d; border-color: #a8bbbe; }
.is-night .start-overlay::before { background: linear-gradient(90deg, #122c42ef, #173547aa 70%, transparent); }
.is-night .start-overlay h2 { color: #edf0d9; text-shadow: 0 2px 20px #04132055; }
.is-night .start-overlay p { color: #baccc6; }
.is-night .start-footnote { color: #8aafa9; }
.is-night .tiny-tag { background: #5c7a8155; border-color: #98b7b34d; color: #dce7d9; }
.is-night .arena-bottom { color: #b5c8cf; }

@media (max-width: 850px) and (min-width: 601px) {
  .gear-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gear-card { display: flex; flex-direction: column; padding: 11px; }
  .gear-card-top { flex-direction: column; gap: 0; align-items: flex-start; }
  .gear-card-label { text-align: left; }
  .gear-card h3 { margin-top: 11px; }
  .gear-card > p { flex: 1; }
  .night-switch, .chicken-control { max-width: 100%; }
  .night-switch .modifier-copy strong, .chicken-switch .modifier-copy strong { font-size: 13px; }
  .night-switch .modifier-copy small, .chicken-switch .modifier-copy small { font-size: 10px; }
}

@media (max-width: 600px) {
  .night-switch .modifier-copy strong, .chicken-switch .modifier-copy strong { font-size: 13px; }
  .night-switch .modifier-copy small, .chicken-switch .modifier-copy small { font-size: 9px; }
  .chicken-control-footer { padding: 4px 0; }
  .chicken-control-footer > span { font-size: 7px; }
  .chicken-control-footer button { min-height: 36px; font-size: 9px; padding: 5px 9px; }
  .player-kit { padding: 9px; align-items: flex-start; }
  .kit-label { font-size: 6px; }
  .kit-main strong { font-size: 10px; }
  .kit-instruction { font-size: 7px; max-width: 155px; line-height: 1.4; }
  .kit-art { width: 35px; height: 34px; }
  .kit-boost small { font-size: 6px; max-width: 105px; text-align: right; line-height: 1.5; }
  .armory-heading h2 { max-width: 270px; font-size: 25px; }
  .armory-heading p { font-size: 12px; }
  .gear-card { padding: 16px; }
  .gear-card-art { width: 115px; height: 85px; }
  .gear-card-label { font-size: 8px; }
  .gear-card h3 { font-size: 20px; }
  .gear-card > p { font-size: 12px; }
  .gear-instructions { font-size: 9px; }
  .gear-card button { min-height: 44px; font-size: 11px; }
  .armory-feedback, .armory-note > p { font-size: 9px; }
}

.lab-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.lab-presets button {
  flex: 1;
  padding: 9px 5px;
  border: 1px solid #c4cdb5;
  border-radius: 3px;
  background: #edf0e3;
  color: #596d44;
  font-size: 8px;
  white-space: nowrap;
}

.lab-presets button:hover, .lab-presets button[aria-pressed="true"] {
  background: #d8e3c7;
  border-color: #95ab79;
}

.lab-frequency {
  margin: 15px 0;
}

.frequency-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
}

.frequency-heading label > span:first-child {
  display: inline-block;
  width: 19px;
  color: #768c5f;
  font-size: 15px;
}

.frequency-heading output {
  font: 10px var(--mono);
  font-weight: 600;
  color: #6f8654;
}

.lab-frequency input[type="range"] {
  --range-progress: 0%;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 24px;
  margin: 3px 0 0;
  cursor: pointer;
  background: transparent;
  touch-action: pan-y;
}

.lab-frequency input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #839b66 var(--range-progress), #cad4bc var(--range-progress));
  height: 4px;
  border-radius: 2px;
}

.lab-frequency input[type="range"]::-moz-range-track {
  background: linear-gradient(to right, #839b66 var(--range-progress), #cad4bc var(--range-progress));
  height: 4px;
  border-radius: 2px;
}

.lab-frequency input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 2px solid #50643f;
  border-radius: 50%;
  background: #e9eedb;
  box-shadow: 0 1px 2px #516b3830;
}

.lab-frequency input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid #50643f;
  border-radius: 50%;
  background: #e9eedb;
}

.lab-frequency input:focus-visible {
  outline: 2px solid #b18a47;
  outline-offset: 2px;
  border-radius: 3px;
}

.range-caption {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font: 6px var(--mono);
  color: #95a184;
}

.lab-toggles {
  border-top: 1px solid #cfd7c2;
  padding-top: 5px;
}

.modifier-switch {
  display: flex;
  align-items: center;
  position: relative;
  gap: 9px;
  min-height: 52px;
  cursor: pointer;
  border-bottom: 1px solid #d8dfcc;
}

.modifier-symbol {
  color: #849b6b;
  font-size: 21px;
  width: 20px;
  flex-shrink: 0;
  text-align: center;
}

.modifier-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.modifier-copy strong {
  font-size: 10px;
  font-weight: 600;
}

.modifier-copy small {
  font-size: 7px;
  line-height: 1.4;
  color: #909e7f;
}

.modifier-switch input {
  position: absolute;
  right: 0;
  width: 32px;
  height: 30px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch-track {
  display: block;
  height: 17px;
  width: 30px;
  flex-shrink: 0;
  background: #c7d2ba;
  border: 1px solid #bbc8aa;
  border-radius: 12px;
  pointer-events: none;
}

.switch-track::after {
  content: '';
  display: block;
  width: 11px;
  height: 11px;
  margin: 2px;
  border-radius: 50%;
  background: #f4f3e9;
  box-shadow: 0 1px 2px #3e522033;
  transition: transform .15s;
}

.modifier-switch input:checked + .switch-track {
  background: #7f9d59;
  border-color: #728f4d;
}

.modifier-switch input:checked + .switch-track::after {
  transform: translateX(13px);
}

.modifier-switch input:focus-visible + .switch-track {
  outline: 2px solid #aa8443;
  outline-offset: 3px;
}

.modifier-switch:has(input:checked) .modifier-symbol {
  color: #4b6b32;
}

.lab-effective {
  display: flex;
  justify-content: space-between;
  background: #dce5d0;
  border: 1px solid #c9d5ba;
  border-radius: 3px;
  padding: 9px 10px;
  margin: 15px 0;
  gap: 8px;
  font: 6px var(--mono);
  color: #81936c;
}

.lab-effective b {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #536b3e;
  margin-top: 5px;
}

.lab-triggers {
  display: flex;
  gap: 6px;
}

.lab-triggers button {
  flex: 1;
  background: #eadeb6;
  border: 1px solid #d0c290;
  border-radius: 3px;
  padding: 10px 4px;
  font-size: 9px;
  color: #736139;
}

.lab-triggers button:hover:not(:disabled) {
  background: #f0cd83;
}

.lab-feedback {
  font: 7px/1.6 var(--mono);
  min-height: 23px;
  color: #8a9579;
  margin: 9px 0;
}

.lab-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

#lab-restart {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 5px;
  background: #34452d;
  color: #ebeddd;
  padding: 12px;
  font-size: 9px;
  border-radius: 3px;
}

#lab-restart:hover { background: #4a6139; }

#lab-reset {
  background: transparent;
  padding: 12px 5px;
  color: #7d8d6a;
  font-size: 9px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lab-footnote {
  font: 6px/1.7 var(--mono);
  color: #98a48b;
  margin: 11px 0 0;
  text-align: center;
}

.tower-card {
  border: 1px solid #d0d5c7;
  border-radius: 5px;
  padding: 18px 18px 0;
  background: #e6e9df;
}

.section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.section-top h2 {
  font-size: 12px;
  letter-spacing: -.1px;
  margin: 0;
  font-weight: 700;
}

.section-top > span {
  color: #6e7c63;
  font-size: 20px;
  line-height: 1;
}

.rank-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 23px 0 12px;
}

.rank-block .eyebrow {
  font-size: 8px;
  letter-spacing: 1px;
  color: #849078;
}

.rank-number {
  font-size: 55px;
  font-weight: 750;
  letter-spacing: -2.5px;
  line-height: 1.05;
}

.rank-number span {
  font-size: 25px;
  margin-left: 10px;
  color: #79886b;
  vertical-align: middle;
}

.best-rank {
  font: 7px var(--mono);
  color: #828c77;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.best-rank strong {
  font: 21px var(--mono);
  color: #4d5b42;
}

.best-rank > span {
  font-size: 8px;
}

.tower-ladder {
  padding: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ladder-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 18px;
  font: 8px var(--mono);
  color: #9ba391;
}

.ladder-bar {
  height: 6px;
  flex: 1;
  background: repeating-linear-gradient(90deg, #cdd4c3 0px, #cdd4c3 23px, #e6e9df 23px, #e6e9df 26px);
  border: 1px solid #bcc6b1;
}

.ladder-row.active {
  color: #596746;
  font-weight: bold;
}

.ladder-row.active .ladder-bar {
  height: 14px;
  background: repeating-linear-gradient(90deg, #a6b795 0px, #a6b795 23px, #c3cfb8 23px, #c3cfb8 26px);
  border-color: #7e966b;
  position: relative;
}

.ladder-row.active .ladder-bar:after {
  content: 'YOU ARE HERE';
  font: 6px var(--mono);
  position: absolute;
  right: 5px;
  top: 2px;
  letter-spacing: .5px;
  color: #304424;
}

.tower-footer {
  padding: 12px 0;
  border-top: 1px solid #cbd3c2;
  display: flex;
  justify-content: space-between;
  font: 8px var(--mono);
  letter-spacing: .5px;
  color: #758467;
}

.tower-footer .status-dot {
  margin-right: 5px;
  width: 5px;
  height: 5px;
}

.tower-footer b {
  font-weight: 500;
}

.edict-card {
  padding: 16px 18px;
  background: #eddfb8;
  border: 1px solid #dacc9c;
  border-radius: 5px;
}

.edict-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 8px var(--mono);
  font-weight: 600;
  letter-spacing: .4px;
  color: #796537;
}

.edict-label > span:first-child {
  font-size: 13px;
}

.edict-live {
  margin-left: auto;
  font-size: 6px;
  border: 1px solid #b9ab7a;
  border-radius: 2px;
  padding: 3px 4px;
}

.edict-title {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 16px 0 10px;
}

.law-symbol {
  font-size: 31px;
  color: #7c693b;
  width: 29px;
  text-align: center;
}

.edict-title h2 {
  font-size: 19px;
  letter-spacing: -.6px;
  margin: 0 0 5px;
  font-weight: 750;
}

.edict-title div > span {
  font: 7px var(--mono);
  color: #8e7e56;
}

.edict-card > p {
  font-size: 10px;
  line-height: 1.7;
  color: #7c7050;
  margin: 0 0 13px;
}

.edict-footer {
  border-top: 1px solid #d6c799;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  font: 7px var(--mono);
  color: #8c7d54;
  gap: 8px;
}

.edict-footer > span:last-child {
  color: #796130;
  font-weight: 600;
  font-size: 6px;
}

.council-card {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 17px 18px;
  background: #efefe7;
}

.council-card > p:first-of-type {
  font-size: 10px;
  line-height: 1.7;
  color: #858778;
  margin: 13px 0;
}

.council-card > p strong {
  color: #585f50;
  font-weight: 500;
}

.vote-icon {
  border: 1px solid #bfc6b3;
  height: 17px;
  width: 18px;
  text-align: center;
  font-size: 12px!important;
}

.law-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.law-option {
  display: flex;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #d9ddcf;
  border-radius: 3px;
  cursor: pointer;
  gap: 9px;
  font-size: 10px;
  transition: background .15s;
  background: #e9ebe1;
}

.law-option:hover {
  background: #e1e5d5;
}

.law-option:has(input:checked) {
  background: #dde4ce;
  border-color: #adb99b;
}

.law-option input {
  appearance: none;
  width: 11px;
  height: 11px;
  border: 1px solid #afb99f;
  border-radius: 50%;
  margin: 0;
  display: grid;
  place-content: center;
}

.law-option input:checked:before {
  content: '';
  width: 5px;
  height: 5px;
  background: #536541;
  border-radius: 50%;
}

.law-option input:focus-visible {
  outline: 2px solid #9c732f;
  outline-offset: 3px;
}

.option-symbol {
  font-size: 13px;
  color: #788467;
  display: inline-block;
  width: 17px;
}

.option-votes {
  margin-left: auto;
  font: 8px var(--mono);
  color: #869176;
}

.vote-button {
  background: #303c2d;
  color: #ebeddd;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 11px;
  padding: 12px 13px;
}

.vote-button:hover:not(:disabled) {
  background: #495b3e;
}

.vote-button > span {
  color: #c0cdaf;
}

.council-note {
  text-align: center;
  font: 7px/1.7 var(--mono);
  color: #979b8c;
  margin: 10px 0 0;
}

.vote-feedback {
  font: 8px/1.6 var(--mono);
  color: #5a6b48;
  margin: 8px 0 0;
}

.vote-feedback:empty {
  display: none;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  margin-top: 30px;
  padding: 23px 0;
  font: 7px var(--mono);
  letter-spacing: .7px;
  color: #939a89;
  gap: 15px;
}

.site-footer > span:first-child {
  color: #646f59;
  font-weight: 600;
}

.site-footer b {
  font-weight: normal;
  color: #65715b;
}

.outcome-overlay, .pause-overlay {
  position: absolute;
  inset: 0;
  background: #223125b8;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.outcome-card {
  background: #eef0df;
  border: 1px solid #cad1b5;
  border-radius: 6px;
  padding: 27px 36px;
  text-align: center;
  max-width: 400px;
  margin: 15px;
  box-shadow: 0 10px 50px #13271855;
}

.outcome-card .eyebrow {
  color: #7e8b6f;
  font-size: 8px;
}

.outcome-card h2, .pause-overlay h2 {
  font-size: 36px;
  letter-spacing: -1px;
  margin: 10px 0;
}

.outcome-card > p {
  font-size: 11px;
  line-height: 1.6;
  color: #7b866d;
  margin: 8px 0;
}

.floor-transition {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  margin: 14px 0;
  font: 40px var(--mono);
  letter-spacing: -3px;
}

.floor-transition > span:first-child {
  opacity: .35;
}

.floor-transition > span:nth-child(2) {
  font-size: 28px;
  color: #8c9f77;
}

.floor-transition strong {
  font-weight: 600;
}

.outcome-card .consequence {
  font-size: 9px;
  max-width: 260px;
  min-height: 15px;
}

.outcome-card .primary-button {
  margin: 17px auto 0;
}

.pause-overlay {
  flex-direction: column;
  color: #e8e8d2;
  gap: 10px;
}

.pause-overlay .tiny-tag {
  color: #31412c;
}

.pause-overlay h2 {
  margin: 5px 0 15px;
}

.touch-controls {
  display: none;
}

dialog {
  max-width: 570px;
  width: calc(100% - 30px);
  padding: 35px;
  background: #eeefe5;
  border: 1px solid #bdc6af;
  border-radius: 8px;
  color: var(--ink);
  max-height: 90svh;
  box-shadow: 0 20px 80px #14231055;
}

dialog::backdrop {
  background: #213121ad;
  backdrop-filter: blur(4px);
}

.dialog-close {
  position: absolute;
  right: 15px;
  top: 11px;
  font-size: 25px;
  background: transparent;
  color: #839074;
}

dialog > h2 {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -1px;
  max-width: 380px;
  margin: 15px 0 28px;
}

.guide-step {
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
}

.guide-step > b {
  font: 11px var(--mono);
  color: #97a282;
  padding-top: 3px;
}

.guide-step h3 {
  font-size: 13px;
  margin: 0 0 7px;
}

.guide-step p {
  font-size: 11px;
  line-height: 1.7;
  margin: 0;
  color: #717e63;
}

.guide-keys {
  display: flex;
  gap: 10px 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 17px;
  font-size: 9px;
  color: #768466;
}

.guide-mobile {
  font-size: 10px;
  color: #879078;
  margin: 18px 0 0;
}

.arena-frame:fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #243325;
}

.arena-frame:fullscreen canvas {
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: 5/3;
}

.arena-frame:fullscreen .start-overlay {
  top: 25%;
  left: 15%;
}

@media (min-width: 1500px) {
  .game-layout {
    grid-template-columns: minmax(0, 1fr) 325px;
    gap: 28px;
  }

  .start-overlay h2 {
    font-size: 48px;
  }

  .start-overlay p {
    font-size: 13px;
  }

  .sidebar {
    gap: 18px;
  }

  .council-card, .edict-card {
    padding: 20px;
  }

  .council-card > p:first-of-type, .edict-card > p {
    font-size: 11px;
  }

  .law-option {
    padding: 11px;
  }

}

@media (max-width: 1120px) {
  .site-header {
    padding: 0 25px;
    height: 76px;
  }

  main {
    padding: 28px 25px 0;
  }

  .game-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 18px;
  }

  .site-header nav {
    margin-left: 30px;
  }

  .start-overlay h2 {
    font-size: 31px;
  }

  .start-overlay {
    top: 19%;
  }

  .start-overlay p {
    font-size: 9px;
    margin-bottom: 12px;
  }

  .primary-button {
    padding: 9px 12px;
    min-width: 160px;
  }

  .start-footnote {
    font-size: 6px;
  }

  .fighter-card {
    padding: 9px 7px;
    gap: 6px;
  }

  .fighter-damage {
    font-size: 15px;
  }

  .fighter-portrait {
    width: 22px;
    height: 27px;
  }

  .fighter-info strong {
    font-size: 7px;
  }

  .fighter-info small {
    font-size: 6px;
  }

  .fighter-portrait:after {
    left: 4px;
  }

  .keyboard-strip {
    gap: 11px;
  }

  .sidebar {
    gap: 12px;
  }

  .tower-card {
    padding: 15px 15px 0;
  }

  .rank-block {
    margin-top: 18px;
  }

  .rank-number {
    font-size: 48px;
  }

  .tower-ladder {
    gap: 2px;
  }

  .edict-card, .council-card {
    padding: 14px;
  }

  .edict-title {
    margin-top: 11px;
  }

  .law-option {
    padding: 7px 9px;
  }

  .site-footer {
    margin-top: 23px;
  }

}

@media (max-width: 850px) {
  .version {
    font-size: 8px;
  }

  .site-header nav {
    margin-left: auto;
    margin-right: 10px;
    gap: 20px;
  }

  .version-number {
    display: none;
  }

  .page-heading h1 {
    font-size: 29px;
  }

  .game-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: flex;
    gap: 15px;
  }

  .tower-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .lab-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
  .lab-frequency { max-width: 100%; }
  .lab-presets button { padding: 12px; font-size: 10px; }
  .lab-feedback, .lab-footnote { font-size: 8px; }
  .lab-triggers button, #lab-restart, #lab-reset { font-size: 11px; }
  .modifier-copy small { font-size: 9px; }
  .modifier-copy strong { font-size: 11px; }

  .tower-card {
    grid-column: 1;
    grid-row: 1;
  }

  .edict-card {
    grid-column: 1;
    grid-row: 2;
  }

  .council-card {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
  }

  .council-card .law-options {
    margin-top: 22px;
    gap: 13px;
  }

  .council-card .law-option {
    padding: 15px;
  }

  .council-card .vote-button {
    padding: 16px;
    margin-top: 20px;
  }

  .council-card > p:first-of-type {
    font-size: 12px;
    margin-top: 19px;
  }

  .start-overlay h2 {
    font-size: 42px;
  }

  .start-overlay p {
    font-size: 12px;
  }

  .start-overlay .primary-button {
    padding: 13px 17px;
  }

  .rank-block {
    margin: 12px 0;
  }

  .tower-ladder {
    gap: 2px;
  }

  .ladder-row {
    height: 15px;
  }

  .roster {
    gap: 9px;
  }

  .fighter-card {
    padding: 12px;
    gap: 10px;
  }

  .fighter-info strong {
    font-size: 9px;
  }

  .fighter-info small {
    font-size: 8px;
  }

  .fighter-damage {
    font-size: 23px;
  }

  .keyboard-strip {
    justify-content: center;
  }

  .site-footer > span:nth-child(2) {
    display: none;
  }

}

@media (pointer: coarse), (max-width: 600px) {
  .touch-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0 3px;
    gap: 15px;
    touch-action: none;
    user-select: none;
  }

  .touch-controls > div {
    display: flex;
    gap: 8px;
  }

  .touch-controls button {
    height: 52px;
    width: 52px;
    border: 1px solid #bfcab1;
    background: #dbe3ce;
    border-radius: 9px;
    font-size: 24px;
    box-shadow: 0 2px 0 #b2bda4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .touch-controls button:active, .touch-controls button.pressed {
    background: #afbf97;
    transform: translateY(2px);
    box-shadow: none;
  }

  .touch-controls button small {
    font: 6px var(--mono);
    letter-spacing: .5px;
  }

  .touch-controls button.touch-dash {
    font: 9px var(--mono);
    background: #e5e8dc;
    width: 44px;
  }

  .touch-controls button.touch-attack {
    background: #ecc471;
    border-color: #c8a252;
    box-shadow: 0 2px 0 #c49a48;
  }

  .keyboard-strip {
    display: none;
  }

}

@media (pointer: coarse) {
  .fullscreen-button {
    display: none;
  }
}

@media (max-width: 600px) {
  .tower-panels { display: flex; }
  .lab-toggles { display: flex; flex-direction: column; }
  .lab-card { padding: 18px; }
  .lab-live { font-size: 8px; }
  .lab-heading .eyebrow { font-size: 8px; }
  .lab-intro { font-size: 11px; }
  .frequency-heading { font-size: 12px; }
  .frequency-heading output { font-size: 12px; }
  .range-caption { font-size: 8px; }
  .modifier-switch { min-height: 61px; }
  .modifier-copy strong { font-size: 12px; }
  .modifier-copy small { font-size: 10px; }
  .lab-effective { padding: 12px; font-size: 8px; }
  .lab-effective b { font-size: 15px; }
  .sidebar-tabs button { min-height: 44px; font-size: 11px; }
  .lab-triggers button, #lab-restart, #lab-reset { min-height: 44px; }
  .lab-frequency input[type="range"] { height: 36px; }
  .site-header {
    height: 68px;
    padding: 0 18px;
    gap: 10px;
  }

  .brand {
    font-size: 25px;
    gap: 5px;
  }

  .brand svg {
    width: 27px;
  }

  .site-header nav {
    margin: 0 0 0 auto;
    gap: 18px;
    font-size: 11px;
  }

  .version {
    display: none;
  }

  .nav-active {
    display: none!important;
  }

  main {
    padding: 24px 16px 0;
  }

  .page-heading {
    margin-bottom: 25px;
  }

  .page-heading .eyebrow {
    font-size: 7px;
    letter-spacing: 1.1px;
    margin-bottom: 8px;
  }

  h1, .page-heading h1 {
    font-size: 25px;
    letter-spacing: -1px;
  }

  .player-profile {
    display: none;
  }

  .arena-meta {
    font-size: 8px;
    height: 28px;
  }

  .practice-label {
    font-size: 7px;
  }

  .arena-meta > div {
    gap: 6px;
  }

  .meta-divider {
    margin: 0 3px;
  }

  .arena-frame {
    border-radius: 5px;
  }

  #arena {
    aspect-ratio: 5/3;
  }

  .game-hud {
    top: 9px;
    left: 10px;
    right: 8px;
  }

  .round-chip {
    font-size: 6px;
    padding: 6px;
    gap: 5px;
    letter-spacing: .3px;
  }

  .round-chip .status-dot {
    width: 4px;
    height: 4px;
  }

  .hud-right {
    gap: 4px;
    font-size: 8px;
  }

  .hud-right > span {
    padding-right: 2px;
  }

  .icon-button {
    width: 23px;
    height: 23px;
    font-size: 14px;
  }

  .fullscreen-button {
    display: none;
  }

  .start-overlay {
    top: 22%;
    left: 5%;
    max-width: 65%;
  }

  .tiny-tag {
    font-size: 5px;
    padding: 4px 5px;
    letter-spacing: .8px;
  }

  .start-overlay h2 {
    font-size: 26px;
    letter-spacing: -1px;
    margin: 7px 0;
  }

  .start-overlay p {
    font-size: 7px;
    line-height: 1.55;
    margin-bottom: 9px;
  }

  .start-overlay .primary-button {
    font-size: 8px;
    padding: 6px 10px;
    min-width: 135px;
    gap: 15px;
  }

  .primary-button > span {
    font-size: 13px;
  }

  .start-footnote {
    display: none;
  }

  .arena-bottom {
    bottom: 9px;
    left: 11px;
    right: 11px;
    font-size: 5px;
    letter-spacing: .4px;
  }

  .floor-marker {
    gap: 5px;
  }

  .roster {
    gap: 5px;
    margin-top: 12px;
  }

  .fighter-card {
    padding: 8px 6px;
    gap: 6px;
    min-height: 53px;
  }

  .fighter-portrait {
    width: 21px;
    height: 26px;
    flex-shrink: 0;
  }

  .fighter-portrait:before {
    left: 2px;
    right: 2px;
  }

  .fighter-portrait:after {
    font-size: 9px;
    left: 3px;
    top: 3px;
  }

  .fighter-info strong {
    font-size: 6px;
    letter-spacing: 0;
  }

  .fighter-info small {
    font-size: 5px;
    margin-top: 3px;
  }

  .fighter-damage {
    font-size: 12px;
    position: absolute;
    right: 5px;
    bottom: 7px;
  }

  .fighter-damage span {
    font-size: 7px;
  }

  .fighter-card .fighter-info {
    align-self: flex-start;
    padding-top: 4px;
  }

  .under-arena {
    padding: 17px 0;
    align-items: flex-start;
  }

  .battle-note {
    gap: 8px;
  }

  .outline-star {
    font-size: 25px;
  }

  .battle-note strong {
    font-size: 10px;
  }

  .battle-note p {
    font-size: 8px;
    line-height: 1.5;
    max-width: 250px;
  }

  .text-button {
    font-size: 8px;
    padding: 4px 0;
  }

  .sidebar {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 5px;
  }

  .tower-card, .edict-card, .council-card {
    grid-column: auto;
    grid-row: auto;
  }

  .tower-card {
    padding: 18px 18px 0;
  }

  .rank-block {
    margin: 17px 0 11px;
  }

  .tower-ladder {
    gap: 3px;
  }

  .ladder-row {
    height: 17px;
  }

  .edict-card, .council-card {
    padding: 18px;
  }

  .council-card .law-options {
    margin-top: 15px;
    gap: 8px;
  }

  .council-card .law-option {
    padding: 12px;
  }

  .council-card .vote-button {
    margin-top: 13px;
    padding: 14px;
  }

  .council-card > p:first-of-type {
    font-size: 11px;
    margin-top: 14px;
  }

  .edict-card > p {
    font-size: 11px;
  }

  .edict-title div > span {
    font-size: 8px;
  }

  .edict-label {
    font-size: 8px;
  }

  .edict-footer {
    font-size: 8px;
  }

  .edict-footer > span:last-child {
    font-size: 7px;
  }

  .council-note {
    font-size: 8px;
  }

  .vote-feedback {
    font-size: 9px;
  }

  .site-footer {
    font-size: 6px;
    letter-spacing: .3px;
    padding: 18px 0;
  }

  .outcome-card {
    padding: 15px 23px;
    max-width: 280px;
  }

  .outcome-card .eyebrow {
    font-size: 6px;
  }

  .outcome-card h2 {
    font-size: 25px;
    margin: 5px 0;
  }

  .outcome-card > p {
    font-size: 8px;
    margin: 4px 0;
  }

  .floor-transition {
    font-size: 28px;
    margin: 6px 0;
    gap: 13px;
  }

  .floor-transition > span:nth-child(2) {
    font-size: 20px;
  }

  .outcome-card .consequence {
    font-size: 7px;
    margin-top: 3px;
    line-height: 1.4;
  }

  .outcome-card .primary-button {
    margin-top: 8px;
    font-size: 9px;
    padding: 7px 10px;
    min-width: 145px;
  }

  .pause-overlay h2 {
    font-size: 27px;
    margin-bottom: 5px;
  }

  .pause-overlay {
    gap: 5px;
  }

  dialog {
    padding: 27px 22px;
  }

  dialog > h2 {
    font-size: 27px;
  }

  .guide-step {
    gap: 13px;
  }

}

/* Match controls and equipment. */
.match-size { padding: 13px 12px 9px; border: 1px solid #c5d0b5; border-radius: 5px; background: #e1e7d5; margin: 16px 0 7px; }
.match-size .frequency-heading label { font-size: 13px; font-weight: 650; }
.match-size output { font: 8px var(--mono); color: #6b8052; }
.match-size input { width: 100%; accent-color: #8ca86b; margin: 10px 0 4px; cursor: pointer; }
.match-size p { font: 7px/1.5 var(--mono); color: #7d8b6e; margin: 9px 0 0; }
#match-silhouettes { display: flex; gap: 9px; padding: 10px 0 3px; }
.match-person { width: 26px; height: 33px; background: #c8d1bb; border: 2px solid #a6b299; border-radius: 7px 7px 4px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9fae93; opacity: .4; }
.match-person i { font: 700 15px/9px var(--mono); letter-spacing: 1px; font-style: normal; }
.match-person small { font: 5px var(--mono); padding-top: 4px; }
.match-person.active { background: #8fa990; color: #e7edcf; border-color: #657e64; opacity: 1; }
.match-person.human { background: #b8df83; color: #4e643d; border-color: #7c9b57; }
.round-option { padding: 13px 0; }
.bounty-control { margin-bottom: 15px; }
.bounty-control .modifier-symbol { color: #af8c42; }
.bounty-control > button { border: 1px solid #d2c39b; border-radius: 3px; background: #eae0c3; color: #8d7541; width: 100%; display: flex; justify-content: space-between; padding: 8px 10px; font-size: 9px; margin-top: 5px; }
.bounty-control > button:hover { background: #f1d995; }
.start-chicken-option { display: flex; gap: 8px; align-items: center; border-top: 1px solid #e1d5bd; padding: 11px 0; cursor: pointer; }
.start-chicken-option input { width: 15px; height: 15px; accent-color: #b88864; flex-shrink: 0; }
.start-chicken-option span { display: flex; flex-direction: column; gap: 4px; }
.start-chicken-option strong { font-size: 9px; color: #8a7152; }
.start-chicken-option small { font-size: 7px; color: #a38b6e; }
.roster { grid-template-columns: repeat(var(--fighter-count, 4), minmax(0, 1fr)); }
.fighter-card.has-crown { border-color: #c7a65e; background: #ece4c5; box-shadow: inset 0 2px #e5ba5e; }
.bounty-banner { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 5px 13px; min-height: 51px; border: 1px solid #d5c69f; border-radius: 4px; background: #ebe5d0; }
#bounty-art { width: 48px; height: 40px; flex-shrink: 0; }
#bounty-art svg { width: 100%; height: 100%; }
.bounty-banner > div { display: flex; flex-direction: column; gap: 4px; }
.bounty-banner strong { font: 8px var(--mono); letter-spacing: .6px; color: #9a7e44; }
.bounty-banner div > span { font-size: 9px; color: #ab976c; }
.bounty-reward { margin-left: auto; flex-shrink: 0; font: 20px var(--mono); color: #b69b58; }
.bounty-banner.is-yours { border-color: #ca9d42; background: #f2dfac; box-shadow: 0 0 16px #d9ad5525; }
.bounty-banner.is-yours strong { color: #8c6a28; }
.player-kit { flex-wrap: wrap; }
.kit-main { flex: 1; }
.kit-hook { display: flex; align-items: center; gap: 6px; background: #d7e7da; border: 1px solid #a8c5ad; border-radius: 4px; color: #5d806b; padding: 4px 9px 4px 3px; min-height: 43px; }
#hook-art { display: block; width: 44px; height: 34px; }
#hook-art svg { width: 100%; height: 100%; }
.kit-hook > span:last-child { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.kit-hook strong { font: 8px var(--mono); }
.kit-hook small { font: 6px var(--mono); color: #7c9f87; }
.kit-hook.attached { background: #b9dcd1; border-color: #6d9e8c; }
.kit-hook:hover:not(:disabled) { background: #c3ddc6; }
.kit-hook:disabled { opacity: .6; }
.touch-hook { background: #d1e6d9; color: #527e6d; }
.profile-bird { width: 47px; height: 52px; flex-shrink: 0; }
#round-clock { color: #d1e3da; }
.match-person.match-bird { width: 30px; height: 44px; background: none; border: 0; border-radius: 0; opacity: .25; }
.match-person.match-bird.active { opacity: 1; }
.match-bird canvas { display: block; width: 29px; height: 35px; }
.match-bird small { color: #738b76; font-size: 6px; padding: 0; }
.bird-portrait { width: 32px; height: 39px; flex-shrink: 0; margin: -6px 0; }
.sidebar-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sidebar-tabs button { padding-inline: 3px; }
.locker-card { border: 1px solid #baccc0; border-radius: 7px; background: #e9eee4; padding: 17px; }
.locker-heading .eyebrow { font-size: 7px; letter-spacing: 1px; color: #718c7d; }
.locker-heading h2 { margin: 10px 0 6px; font-size: 25px; line-height: 1.06; letter-spacing: -.9px; color: #314e48; }
.locker-heading p { margin: 0 0 16px; font-size: 10px; color: #789285; }
.bird-preview { position: relative; border: 1px solid #bccfc1; border-radius: 5px; overflow: hidden; background: radial-gradient(ellipse at 50% 50%, #ecf0df, #d5e3d9); }
.bird-preview canvas { display: block; width: 100%; height: auto; }
.preview-badge { position: absolute; top: 10px; left: 11px; font: 6px var(--mono); letter-spacing: 1px; color: #638375; }
#preview-pose-label { position: absolute; bottom: 9px; left: 0; width: 100%; text-align: center; font: 6px var(--mono); letter-spacing: .5px; color: #6c8b7b; }
.pose-controls { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: 8px 0 20px; }
.pose-controls button { min-height: 28px; border: 1px solid #c2d2c2; border-radius: 3px; background: #e0e9dd; font-size: 8px; padding: 4px 0; color: #668370; }
.pose-controls button[aria-pressed="true"] { color: #f6edcf; background: #507e73; border-color: #446e65; }
.locker-group { margin: 17px 0; }
.player-settings-form { margin: 16px 0 20px; min-width: 0; }
.player-settings-form > label { display: block; margin-bottom: 7px; color: #456859; font-size: 12px; font-weight: 650; }
.player-settings-row { display: flex; flex-wrap: wrap; gap: 7px; }
.player-settings-row input { flex: 1 1 110px; min-width: 0; width: 110px; min-height: 44px; padding: 8px; border: 1px solid #a8bea7; border-radius: 4px; background: #f7f7ec; color: #315247; font: 16px/1.3 Arial, Helvetica, sans-serif; }
.player-settings-row input[aria-invalid="true"] { border-color: #ad5149; }
.player-settings-row button { flex: 0 0 auto; min-height: 44px; padding: 9px 11px; border: 1px solid #52755e; border-radius: 4px; background: #456858; color: #fff9df; font-size: 12px; font-weight: 650; }
.player-settings-row input:focus-visible, .player-settings-row button:focus-visible { outline: 3px solid #507e73; outline-offset: 2px; }
.player-settings-form > p { margin: 8px 0 0; color: #617a68; font-size: 10px; line-height: 1.5; }
.locker-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 8px; }
.locker-group-heading h3 { color: #456859; font-size: 11px; margin: 0; font-weight: 650; }
.locker-group-heading > span { color: #8ba190; font: 5px var(--mono); letter-spacing: .5px; }
.color-picker { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
.color-picker button { aspect-ratio: 1; border-radius: 50%; background: var(--swatch); border: 2px solid #3d5f4e44; padding: 0; position: relative; }
.color-picker button[aria-pressed="true"] { box-shadow: 0 0 0 2px #edf0df, 0 0 0 3.5px #537961; }
.color-picker button[aria-pressed="true"]::after { content: '✓'; display: block; color: #2c5145; font: 700 10px sans-serif; text-shadow: 0 1px #ffffff66; }
.cosmetic-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.cosmetic-picker button { display: flex; flex-direction: column; align-items: center; padding: 1px 2px 7px; min-width: 0; border: 1px solid #c4d1bc; border-radius: 4px; background: #eff1e6; color: #75856b; }
.cosmetic-picker button:hover { background: #dbe9d7; }
.cosmetic-picker button[aria-pressed="true"] { border-color: #6f9980; background: #d8e7d0; box-shadow: inset 0 0 0 1px #6f9980; color: #385f48; }
.cosmetic-picker canvas { display: block; width: 42px; height: 44px; max-width: 100%; }
.cosmetic-picker button > span { font-size: 7px; white-space: nowrap; }
.finish-heading { display: flex; justify-content: space-between; align-items: center; margin: 15px 0 7px; color: #587467; font-size: 9px; }
.finish-heading > span + span { font: 6px var(--mono); letter-spacing: .6px; color: #789285; }
.finish-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finish-picker canvas { width: 57px; height: 59px; }
.finish-picker button > span { white-space: normal; text-align: center; line-height: 1.3; }
.finish-picker button:focus-visible { outline: 3px solid #507e73; outline-offset: 2px; }
.finish-note { font-size: 8px; line-height: 1.5; color: #6d8275; margin: 7px 0 0; }
.victory-dance-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.victory-dance-picker canvas { width: 54px; height: 54px; }
.victory-dance-picker button > span { white-space: normal; text-align: center; line-height: 1.3; }
.victory-dance-picker button:focus-visible { outline: 3px solid #507e73; outline-offset: 2px; }
.locker-actions { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 12px; gap: 5px; }
.locker-actions button { border: 1px solid #b8cdba; background: #d8e6d3; border-radius: 3px; font-size: 9px; color: #5a785c; padding: 9px; }
.locker-actions > span { font: 5px var(--mono); letter-spacing: .5px; color: #7d9480; }
#play-look { width: 100%; min-width: 0; font-size: 11px; padding: 12px; }
#locker-feedback { font: 10px/1.6 var(--mono); color: #617a68; text-align: center; margin: 12px 0 0; }
@media (min-width: 601px) and (max-width: 850px) {
  .locker-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 25px; }
  .locker-heading, .bird-preview, .pose-controls { grid-column: 1; }
  .bird-preview { grid-row: 2; align-self: start; }
  .locker-group { grid-column: 2; margin: 5px 0 14px; }
  .locker-group:nth-of-type(4) { grid-row: 1; align-self: end; }
  .locker-group:nth-of-type(5) { grid-row: 2; }
  .locker-group:nth-of-type(6) { grid-row: 3; }
  .locker-group:nth-of-type(7) { grid-row: 4; }
  .victory-dance-group { grid-row: 5; }
  .pose-controls { grid-row: 3; align-self: start; margin-top: 0; }
  .player-settings-form { grid-column: 1; grid-row: 4; align-self: start; margin-top: 0; }
  .locker-actions, #play-look, #locker-feedback { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .sidebar-tabs button { font-size: 10px; }
  .locker-card { padding: 16px; }
  .locker-heading h2 { font-size: 28px; }
  .locker-heading p { font-size: 12px; }
  .locker-group-heading h3 { font-size: 13px; }
  .locker-group-heading > span { font-size: 6px; }
  .pose-controls button { min-height: 44px; font-size: 10px; }
  .color-picker { gap: 5px; }
  .color-picker button { min-height: 29px; }
  .cosmetic-picker button { min-height: 68px; }
  .cosmetic-picker canvas { width: 47px; height: 49px; }
  .cosmetic-picker button > span { font-size: 9px; }
  .locker-actions button, #play-look { min-height: 44px; font-size: 12px; }
  .locker-actions > span { font-size: 6px; }
  #locker-feedback { font-size: 11px; }
}
@media (min-width: 601px) and (max-width: 850px) {
  .gear-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .roster.large-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .match-size { padding: 13px; }
  .match-size output { font-size: 10px; }
  .match-size p { font-size: 8px; }
  .match-size input { min-height: 28px; }
  .match-person { width: 30px; height: 36px; }
  .round-option .modifier-copy strong { font-size: 13px; }
  .round-option .modifier-copy small { font-size: 10px; }
  .bounty-control > button { min-height: 44px; font-size: 11px; }
  .start-chicken-option { min-height: 49px; }
  .start-chicken-option strong { font-size: 11px; }
  .start-chicken-option small { font-size: 8px; }
  .bounty-banner { padding: 5px 9px; gap: 7px; }
  #bounty-art { width: 34px; height: 34px; }
  .bounty-banner strong { font-size: 6px; letter-spacing: .3px; }
  .bounty-banner div > span { font-size: 8px; line-height: 1.4; }
  .bounty-reward { font-size: 16px; }
  .player-kit { gap: 7px; }
  .kit-main { flex-basis: 50%; }
  .kit-hook { padding-right: 6px; }
  #hook-art { width: 31px; height: 30px; }
  .kit-hook strong { font-size: 7px; }
  .kit-hook small { font-size: 6px; max-width: 104px; line-height: 1.4; }
  .touch-controls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .touch-controls > div { display: contents; }
  .touch-controls button { width: 100%; min-width: 0; height: 50px; padding: 0; }
  .touch-controls button.touch-dash { width: 100%; font-size: 8px; }
  .touch-controls .touch-hook { font-size: 25px; }
  .touch-controls .touch-hook small { font-size: 7px; }
}

/* Map selection and health remain outside the action and legible at six players. */
.map-picker { margin-bottom: 15px; }
.map-options { display:flex; gap:8px; flex-wrap:wrap; }
.map-options button { border:1px solid #c8c9b5; background:transparent; color:#68715d; border-radius:9px; padding:11px 14px; font:700 13px var(--font-body, sans-serif); cursor:pointer; display:flex; align-items:center; gap:9px; min-height:44px; }
.map-options button span { font-size:10px; opacity:.6; }
.map-options button b { font-size:8px; letter-spacing:.1em; background:#dcd4ad; padding:3px 5px; border-radius:3px; }
.map-options button[aria-pressed="true"] { background:#3d5148; color:#fff4d8; border-color:#3d5148; box-shadow:0 3px 0 #283b32; }
.map-options button[aria-pressed="true"] b { color:#40544b; background:#e2c981; }
.map-options button:focus-visible { outline:3px solid #b28a47; outline-offset:3px; }
.map-options button[hidden] { display:none; }
.map-options button strong { font:inherit; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.map-options:has(#arena-map) { align-items:center; gap:10px; }
.arena-map-label { flex-shrink:0; font-size:12px; font-weight:700; color:#52614f; }
#arena-map { display:block; width:min(440px,100%); min-width:0; min-height:44px; padding:10px 34px 10px 13px; border:1px solid #b4c0a9; border-left:4px solid #507363; border-radius:8px; background:#f4f3e8; color:#314b3b; font:700 16px Arial,Helvetica,sans-serif; cursor:pointer; text-overflow:ellipsis; }
#arena-map:hover:not(:disabled) { border-color:#79916f; background:#faf9ee; }
#arena-map:focus-visible { outline:3px solid #b28a47; outline-offset:3px; }
#arena-map:disabled { cursor:default; opacity:.6; }
#arena-map option,#arena-map optgroup { font-size:16px; }
.play-view .map-options:has(#arena-map) { justify-content:center; }
@media(max-width:600px) {
  .map-options:has(#arena-map) { flex-wrap:nowrap; gap:8px; }
  .arena-map-label { font-size:11px; }
  #arena-map { flex:1; width:auto; padding-inline:10px 28px; }
}
@media(max-width:980px) and (pointer:coarse) {
  body.mobile-round.mobile-paused .map-options:has(#arena-map) { overflow:visible; }
  body.mobile-round.mobile-paused .arena-map-label { color:#d0dec4; }
  body.mobile-round.mobile-paused #arena-map { flex:1; width:auto; min-height:44px; background:#284938; border-color:#98b77b; color:#eff5e4; color-scheme:dark; }
}
.creator-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:12px; }
.creator-links a { color:#3d655d; font-size:12px; font-weight:750; text-underline-offset:4px; min-height:30px; display:inline-flex; align-items:center; }
.creator-links a:focus-visible { outline:3px solid #b28a47; outline-offset:4px; border-radius:3px; }
.play-view .creator-links { justify-content:center; margin-top:7px; gap:8px 20px; }
.map-picker p { margin:10px 0 0; font-size:12px; line-height:1.5; color:#747b68; }
.fighter-info { min-width:0; }
.fighter-health { display:block; width:100%; min-width:25px; height:5px; border-radius:4px; overflow:hidden; background:#d7d9c7; margin-top:7px; }
.fighter-health i { display:block; height:100%; width:var(--health,100%); background:var(--health-color,#73ae83); border-radius:inherit; transition:width .18s ease-out,background .2s; }
.fighter-damage { font-variant-numeric:tabular-nums; }
.fighter-damage span { font-size:9px; margin-left:2px; }
@media(max-width:480px) { .map-options { gap:6px; } .map-options button { padding:10px; font-size:12px; gap:6px; } .map-picker p { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .fighter-health i { transition:none; } }

/* Play view keeps the fight on screen; the complete workbench stays one click away. */
.play-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.play-brand { font-weight:900; font-size:25px; letter-spacing:-1px; color:#30483d; text-decoration:none; }
.play-brand span { color:#b78a49; padding-left:5px; }
.mode-picker,.play-tools { display:flex; align-items:center; gap:6px; }
.play-tools { flex-wrap:wrap; justify-content:flex-end; min-width:0; }
.mode-picker button,.play-tools button,#new-series { background:transparent; border:1px solid #bfc7b5; border-radius:7px; color:#52614f; padding:10px 12px; min-height:42px; cursor:pointer; font:700 12px var(--sans,sans-serif); }
.mode-picker button { display:flex; align-items:center; gap:7px; }
.mode-picker small { font:8px var(--mono); opacity:.7; }
.mode-picker button[aria-pressed="true"] { color:#fff5d9; background:#3d5148; border-color:#3d5148; }
#open-lab { background:#e8cd8d; border-color:#c8ad73; color:#3c493b; }
.mode-note { margin:0 0 12px; color:#727c69; font-size:11px; }
.play-view .site-header,.play-view .page-heading,.play-view .site-footer { display:none; }
.play-view main { padding:10px 16px; max-width:1500px; margin:auto; }
.play-view .game-layout { display:block; }
.play-view .arena-column { margin:auto; max-width:min(100%,calc((100dvh - 157px) * 1.6667)); }
.play-view .mode-note { display:none; }
.play-view .map-picker { margin-bottom:8px; }
.play-view .map-options { justify-content:center; }
.play-view .map-options button { padding:7px 12px; min-height:36px; font-size:11px; border-radius:6px; }
.play-view .map-picker p,.play-view .arena-meta,.play-view .bounty-banner,.play-view .player-kit,.play-view .roster,.play-view .under-arena,.play-view .keyboard-strip { display:none !important; }
.play-view .arena-frame { box-shadow:0 8px 30px #233e3025; border:1px solid #526858; }
.play-view .sidebar { position:fixed; z-index:90; top:10px; bottom:10px; right:10px; width:min(430px,calc(100vw - 20px)); display:none; overflow-y:auto; overscroll-behavior:contain; background:#e9ecdf; border:1px solid #aebca4; border-radius:12px; padding:14px; box-shadow:0 18px 60px #132a4250; }
.play-view.drawer-open .sidebar { display:block; }
.drawer-scrim { position:fixed; inset:0; z-index:80; border:0; background:#14272a75; backdrop-filter:blur(3px); cursor:pointer; }
.drawer-heading { display:none; }
.play-view .drawer-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.drawer-heading h2 { font-size:24px; letter-spacing:-.7px; margin:0; }
#close-lab { width:44px; height:44px; border:1px solid #bfccb2; border-radius:8px; background:transparent; cursor:pointer; font-size:28px; }
.audio-settings { margin-bottom:14px; padding:12px 0; border-block:1px solid #ccd3bd; }
.audio-settings .audio-controls,.music-controls { display:grid; grid-template-columns:86px minmax(0,1fr) 40px; gap:8px; margin:0; align-items:center; font-size:10px; }
.audio-settings .audio-controls { padding:0 0 8px; }
.audio-settings label { font-size:10px; }
.audio-settings input[type="range"] { min-width:0; width:100%; height:32px; accent-color:#72895d; }
.audio-settings output { text-align:right; font:9px var(--mono); }
#sound-status,#music-status { grid-column:1/-1; font-size:9px; line-height:1.45; color:#6b7961; }
.sound-test { min-height:36px; padding:8px 12px; margin:8px 0; border:1px solid #a6b294; border-radius:6px; background:#edf1df; color:#45533e; font:600 10px var(--mono); cursor:pointer; }
.sound-test:disabled { opacity:.6; cursor:wait; }
#sound-test-note { display:block; font-size:10px; line-height:1.5; color:#6b7961; }
.motion-setting { display:flex; align-items:center; gap:7px; margin-top:10px; flex-wrap:wrap; min-height:32px; cursor:pointer; }
.motion-setting input { accent-color:#697f56; width:16px; height:16px; }
.motion-setting small { color:#75806b; font-size:9px; }
.compact-kit { position:absolute; z-index:3; bottom:37px; left:18px; display:flex; align-items:center; gap:10px; padding:8px 11px; color:#eef4dc; background:#112b30dc; border:1px solid #60797466; border-radius:7px; font:10px var(--mono); pointer-events:none; }
.dash-meter { min-width:32px; padding:3px 0 5px; text-align:center; color:#a4b9b0; background:linear-gradient(#b7dcac,#b7dcac) left bottom/var(--dash-fill,100%) 2px no-repeat; transition:color .12s; }
.dash-meter[data-ready="true"] { color:#e0f1bc; }
.touch-controls button.touch-dash { background-image:linear-gradient(#8fba99,#8fba99); background-size:var(--dash-fill,100%) 3px; background-position:left bottom; background-repeat:no-repeat; }
.compact-health { display:flex; align-items:center; gap:4px; }
.compact-health b { font-size:16px; }
.compact-health i { width:54px; height:5px; background:#506061; border-radius:4px; overflow:hidden; margin-left:4px; }
.compact-health em { display:block; width:100%; height:100%; background:#b9f46d; transition:width .15s ease-out; }
#hud-weapon { font-size:10px; letter-spacing:.5px; }
#hud-ammo,#hud-hook { color:#dfcca0; }
#hud-crown { color:#ffcf6d; font-size:17px; }
.result-portrait canvas { width:80px; height:96px; }
.result-portrait { width:80px; height:96px; margin:0 auto 4px; }
.outcome-card { max-height:calc(100% - 12px); overflow-y:auto; overscroll-behavior:contain; }
.rematch-line { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:12px; color:#627257; font-size:10px; }
.rematch-line label { display:flex; align-items:center; gap:5px; cursor:pointer; }
.rematch-line input { accent-color:#6b845b; }
.rematch-line button { border:0; border-bottom:1px solid #8a9979; background:transparent; color:#405b41; padding:6px; cursor:pointer; font-size:10px; }
.series-board { margin:0 auto 10px; max-width:1000px; }
.series-heading { display:flex; align-items:center; justify-content:space-between; font:9px var(--mono); color:#66765d; margin-bottom:6px; }
#new-series { min-height:28px; padding:4px 8px; font-size:10px; }
#series-scores { display:flex; gap:6px; }
.series-player { flex:1; min-width:0; border:1px solid #bac7ae; background:#dde4d0; border-radius:6px; padding:6px 9px; display:flex; align-items:center; justify-content:space-between; gap:7px; }
.series-player.is-you { border-color:#6f8962; background:#d6e5c5; }
.series-player.is-winner { background:#f0d290; border-color:#b69c57; }
.series-player > span { font:8px var(--mono); }
.series-player b { font-size:19px; color:#374d3c; }
.series-player b small { font-size:9px; font-weight:400; color:#7b876e; }
.series-player i { font:7px var(--mono); letter-spacing:1px; color:#748863; }
body.play-view:has(.series-board:not([hidden])) .arena-column { max-width:min(100%,calc((100dvh - 223px) * 1.6667)); }
.reduce-motion *, .reduce-motion *::before,.reduce-motion *::after { scroll-behavior:auto!important; }
.reduce-motion .compact-health em,.reduce-motion .fighter-health i { transition:none; }
.play-toolbar button:focus-visible,#new-series:focus-visible { outline:3px solid #b79251; outline-offset:3px; }
@media(max-width:850px) {
  .play-brand { font-size:20px; }
  .play-toolbar { gap:7px; }
  .mode-picker button,.play-tools button { padding:8px; font-size:11px; }
  .mode-picker small { display:none; }
  .series-player i { display:none; }
}
@media(max-width:600px) {
  .play-view main { padding:8px; }
  .play-toolbar { flex-wrap:wrap; gap:5px; margin-bottom:7px; }
  .play-brand { font-size:19px; margin-right:auto; }
  .mode-picker { order:3; width:100%; }
  .mode-picker button { flex:1; min-height:36px; }
  .play-tools button { min-height:36px; font-size:10px; }
  .play-view .arena-column { max-width:100%; }
  .play-view .map-options button { min-height:36px; font-size:10px; }
  .play-view .touch-controls { padding-top:9px; gap:6px; }
  .play-view .touch-controls button { min-width:44px; }
  .compact-kit { bottom:23px; left:8px; gap:5px; padding:5px 7px; font-size:7px; }
  .compact-health b { font-size:11px; }
  .compact-health i { width:30px; height:4px; }
  #hud-weapon { font-size:7px; }
  #hud-crown { font-size:11px; }
  .result-portrait { display:block; width:64px; height:77px; margin:0 auto 2px; }
  .result-portrait canvas { width:64px; height:77px; }
  .outcome-card { padding:10px 15px!important; width:90%; }
  .outcome-card h2 { font-size:22px; margin:5px 0; }
  .outcome-card p { font-size:9px; line-height:1.4; margin:5px 0; }
  .outcome-card .floor-transition { margin:5px 0; font-size:18px; }
  .outcome-card .primary-button { padding:8px 13px; min-height:36px; font-size:10px; }
  .rematch-line { font-size:8px; gap:5px; margin-top:6px; }
  .series-player { padding:5px; flex-direction:column; gap:2px; }
  .series-player b { font-size:15px; }
  .series-player > span { font-size:7px; }
  body.play-view:has(.series-board:not([hidden])) .arena-column { max-width:100%; }
}
@media(max-height:550px) and (min-width:601px) {
  .play-view .play-brand,.play-view #view-toggle { display:none; }
  .play-view .play-toolbar { margin-bottom:3px; }
  .play-view .mode-picker button,.play-view .play-tools button { min-height:30px; padding:5px 8px; }
  .play-view .map-picker { margin-bottom:3px; }
  .play-view .map-options button { min-height:28px; padding:3px 10px; }
  .play-view .arena-column { max-width:min(100%,calc((100dvh - 115px) * 1.6667)); }
  body.play-view:has(.series-board:not([hidden])) .arena-column { max-width:min(100%,calc((100dvh - 175px) * 1.6667)); }
}


.sound-research-link { display:inline-block; margin-top:10px; font:10px var(--mono); color:#547064; text-underline-offset:3px; }
.arena-frame:has(.start-overlay:not([hidden])) .compact-kit { display:none; }

/* Scale overlays with the actual arena, including short landscape windows. */
.arena-frame { container: arena / inline-size; }
@container arena (max-width:600px) {
  .start-overlay { top:16%; max-width:64%; }
  .start-overlay .tiny-tag { font-size:6px; padding:5px 8px; }
  .start-overlay h2 { font-size:clamp(19px,5cqw,29px); line-height:1.04; letter-spacing:-1px; margin:9px 0 7px; }
  .start-overlay p { font-size:9px; line-height:1.45; margin:0 0 9px; }
  .start-overlay .primary-button { min-height:38px; min-width:140px; font-size:10px; padding:8px 12px; }
  .start-footnote { display:none; }
  .game-hud { left:12px; right:12px; top:10px; gap:6px; }
  .round-chip { font-size:7px; padding:6px 8px; }
  .hud-right { gap:5px; }
  .hud-right .icon-button { width:26px; height:26px; font-size:14px; }
  #round-clock { font-size:8px; }
  .arena-bottom { bottom:9px; left:11px; right:11px; font-size:6px; }
  .result-portrait { display:block; width:64px; height:77px; margin:0 auto 2px; }
  .result-portrait canvas { width:64px; height:77px; }
  .outcome-card { padding:10px 15px!important; width:90%; }
  .outcome-card h2,.pause-overlay h2 { font-size:22px; margin:5px 0; }
  .outcome-card p { font-size:9px; line-height:1.4; margin:5px 0; }
  .outcome-card .floor-transition { margin:5px 0; font-size:18px; }
  .outcome-card .primary-button { padding:8px 13px; min-height:36px; font-size:10px; margin-top:8px; }
  .rematch-line { font-size:8px; gap:5px; margin-top:6px; }
  .compact-kit { bottom:23px; left:8px; gap:5px; padding:5px 7px; font-size:7px; }
}
@media (max-height:550px) and (min-width:601px) {
  .result-portrait { width:44px; height:53px; margin:0 auto 2px; }
  .result-portrait canvas { width:44px; height:53px; }
}
@media (pointer:coarse) and (min-width:601px) and (max-height:550px) {
  .play-view .arena-column { max-width:min(100%,calc((100dvh - 155px) * 1.6667)); }
  body.play-view:has(.series-board:not([hidden])) .arena-column { max-width:min(100%,calc((100dvh - 215px) * 1.6667)); }
  .play-view .touch-controls { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; padding:6px 0 0; width:min(480px,calc(100vw - 32px)); position:relative; left:50%; transform:translateX(-50%); }
  .play-view .touch-controls > div { display:contents; }
  .play-view .touch-controls button { width:100%; height:44px; min-width:44px; padding:0; }
}

.mode-picker #play-rank { display:inline; font-size:8px; }

/* A phone round uses the whole available screen. Controls float at the safe
   edges; map and workshop chrome return when the player pauses. */
@media (max-width:600px), (pointer:coarse) and (max-width:950px) and (max-height:600px) {
  body.mobile-round { width:100%; height:100dvh; overflow:hidden; overscroll-behavior:none; background:#182d2b; }
  body.mobile-round main { height:100dvh; max-width:none; margin:0; padding:0; }
  body.mobile-round .site-header,
  body.mobile-round .page-heading,
  body.mobile-round .site-footer,
  body.mobile-round .mode-note,
  body.mobile-round .series-board,
  body.mobile-round .mode-picker,
  body.mobile-round .play-brand,
  body.mobile-round #view-toggle,
  body.mobile-round .arena-meta,
  body.mobile-round .bounty-banner,
  body.mobile-round .player-kit,
  body.mobile-round .roster,
  body.mobile-round .under-arena,
  body.mobile-round .keyboard-strip { display:none!important; }
  body.mobile-round .game-layout { display:block; margin:0; }
  body.mobile-round .arena-column { max-width:none!important; width:100%; margin:0; padding:0; }
  body.mobile-round .arena-frame { position:fixed; inset:0; width:100%; height:100dvh; border:0; border-radius:0; box-shadow:none; }
  body.mobile-round #arena { width:100%; height:100%; aspect-ratio:auto; }
  body.mobile-round .play-toolbar { position:fixed; z-index:20; top:max(8px,env(safe-area-inset-top)); left:max(10px,env(safe-area-inset-left)); right:calc(max(10px,env(safe-area-inset-right)) + 51px); display:block; margin:0; padding:0; }
  body.mobile-round .play-tools { display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:5px; width:100%; }
  body.mobile-round .play-tools button { min-width:0; min-height:44px; padding:7px 9px; border:1px solid #d5e5d349; border-radius:9px; background:#18302ab8; color:#eef4df; font-size:10px; white-space:nowrap; box-shadow:none; backdrop-filter:blur(8px); }
  body.mobile-round .play-tools #controller-button { flex:1; max-width:170px; overflow:hidden; text-overflow:ellipsis; }
  body.mobile-round .play-tools button span { display:none; }
  body.mobile-round .game-hud { position:fixed; z-index:20; top:max(8px,env(safe-area-inset-top)); right:max(10px,env(safe-area-inset-right)); left:auto; gap:0; }
  body.mobile-round .round-chip,
  body.mobile-round #round-clock,
  body.mobile-round #sound-toggle,
  body.mobile-round #night-toggle,
  body.mobile-round #fullscreen-button,
  body.mobile-round .arena-bottom { display:none; }
  body.mobile-round .hud-right { gap:0; }
  body.mobile-round #pause-button { width:44px; height:44px; border:1px solid #d5e5d349; border-radius:9px; background:#18302ab8; color:#eef4df; font-size:20px; backdrop-filter:blur(8px); pointer-events:auto; }
  body.mobile-round .compact-kit { top:calc(max(8px,env(safe-area-inset-top)) + 49px); bottom:auto; left:max(12px,env(safe-area-inset-left)); padding:4px 6px; gap:7px; border:0; border-radius:5px; background:#15352b70; font-size:9px; pointer-events:none; }
  body.mobile-round .compact-kit .compact-health,
  body.mobile-round #hud-dash,
  body.mobile-round #hud-crown { display:none; }
  body.mobile-round #hud-weapon { font-size:9px; }
  body.mobile-round .map-picker { display:none; }
  body.mobile-round.mobile-paused .map-picker { display:block; position:fixed; z-index:22; top:calc(max(8px,env(safe-area-inset-top)) + 52px); left:max(10px,env(safe-area-inset-left)); right:max(10px,env(safe-area-inset-right)); margin:0; padding:7px; border:1px solid #d5e5d349; border-radius:9px; background:#18302aeb; backdrop-filter:blur(10px); }
  body.mobile-round.mobile-paused .map-options { display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:6px; overflow-x:auto; scrollbar-width:thin; }
  body.mobile-round.mobile-paused .map-options button { flex-shrink:0; min-height:40px; padding:8px 10px; font-size:11px; color:#e6edda; border-color:#8ca08d70; white-space:nowrap; }
  body.mobile-round.mobile-paused .map-options button[aria-pressed=true] { color:#1d3e31; background:#d4e7ac; border-color:#d4e7ac; }
  body.mobile-round .map-picker .creator-links,
  body.mobile-round .map-picker p { display:none; }
  body.mobile-round .sidebar { position:fixed; z-index:90; top:max(8px,env(safe-area-inset-top)); bottom:max(8px,env(safe-area-inset-bottom)); right:max(8px,env(safe-area-inset-right)); width:min(430px,calc(100vw - 16px)); display:none; overflow:auto; background:#e8edde; border:1px solid #a3b39b; border-radius:12px; padding:14px; }
  body.mobile-round.drawer-open .sidebar { display:block; }
  body.mobile-round .drawer-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
  body.mobile-round .touch-controls { position:fixed; z-index:15; bottom:max(12px,env(safe-area-inset-bottom)); left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); display:flex; justify-content:space-between; align-items:flex-end; gap:12px; width:auto; padding:0; margin:0; transform:none; pointer-events:none; }
  body.mobile-round .touch-controls > div { display:flex; gap:8px; pointer-events:none; }
  body.mobile-round .touch-controls > div:last-child { display:grid; grid-template-columns:repeat(2,52px); grid-template-rows:repeat(2,52px); }
  body.mobile-round .touch-controls button { width:52px; min-width:52px; height:52px; padding:0; border:1px solid #e4eedb72; border-radius:14px; background-color:#163c3159; color:#f3f7e9; box-shadow:none; text-shadow:0 1px 4px #0c261eb0; pointer-events:auto; }
  body.mobile-round .touch-controls button small { color:#e2ebda; font-size:7px; }
  body.mobile-round .touch-controls button.touch-dash { width:52px; font-size:8px; }
  body.mobile-round .touch-controls button:active,
  body.mobile-round .touch-controls button.pressed { background-color:#b9e5b382; color:#fff; transform:scale(.97); }
  body.mobile-round.controller-active .touch-controls,
  body.mobile-round.mobile-paused .touch-controls { display:none; }
  body.mobile-round .pause-overlay,
  body.mobile-round .outcome-overlay { padding:max(72px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  body.mobile-round .outcome-card { max-height:calc(100dvh - 100px); overflow:auto; }
  body.mobile-round .outcome-card .primary-button { min-height:44px; }
}
@media (pointer:coarse) and (min-width:601px) and (max-width:950px) and (max-height:600px) {
  body.mobile-round .play-tools { max-width:360px; }
  body.mobile-round .touch-controls > div:last-child { display:flex; gap:8px; }
  body.mobile-round .touch-controls button,
  body.mobile-round .touch-controls button.touch-dash { width:48px; min-width:48px; height:48px; }
  body.mobile-round.mobile-paused .map-picker { right:auto; max-width:calc(100vw - max(10px,env(safe-area-inset-left)) - max(10px,env(safe-area-inset-right))); }
}

.duel-loadout label{display:block;font-size:13px;font-weight:700;margin-bottom:10px}.duel-loadout select{width:100%;min-height:40px;border:1px solid #42605c;border-radius:8px;background:#193935;color:#eef1d8;padding:9px 12px;font:inherit}.duel-loadout[hidden]{display:none}

/* Points stay in screen space: the camera, recoil and night lighting never
   make the standings shake or shrink. Rows move without reflowing the arena. */
.scoreboard { --scoreboard-row:27px; --scoreboard-step:30px; width:178px; max-width:calc(100% - 24px); color:#f2f7e8; font:10px var(--mono); font-variant-numeric:tabular-nums; pointer-events:none; user-select:none; }
.scoreboard[hidden] { display:none!important; }
.scoreboard--live { position:absolute; z-index:3; top:55px; right:17px; }
.scoreboard-heading { display:flex; min-height:22px; align-items:center; justify-content:space-between; gap:8px; padding:0 4px 3px 7px; }
.scoreboard-title { color:#e7efdb; font-size:8px; font-weight:700; letter-spacing:1.2px; text-shadow:0 1px 4px #102926; }
.scoreboard-list { position:relative; height:calc(var(--scoreboard-count,0) * var(--scoreboard-step)); margin:0; padding:0; list-style:none; }
.scoreboard-row { --scoreboard-slot:0; --scoreboard-pulse:0; --scoreboard-surface:#17332ef2; position:absolute; left:0; top:0; width:100%; height:var(--scoreboard-row); display:grid; grid-template-columns:14px 25px minmax(0,1fr) auto; align-items:center; gap:5px; padding:0 8px 0 8px; box-sizing:border-box; border:1px solid #cee6d42e; border-radius:5px; background:linear-gradient(90deg,color-mix(in srgb,var(--player-color,#c8ed78) 32%,transparent),color-mix(in srgb,var(--player-color,#c8ed78) 12%,transparent)),var(--scoreboard-surface); transform:translateY(calc(var(--scoreboard-slot) * var(--scoreboard-step))); box-shadow:inset 0 0 0 1px rgb(237 255 208 / calc(var(--scoreboard-pulse) * .65)),0 2px 5px #0928221c; }
.scoreboard-color { position:absolute; left:-1px; top:3px; bottom:3px; width:4px; border-radius:3px; background:var(--player-color,#c8ed78); }
/* Finish paints belong to the HUD, leaving the fighter's solid particle color
   intact. Only backgrounds animate: rank swaps own the row transform. */
.scoreboard-row[data-finish="rainbow"] {
  --scoreboard-finish:linear-gradient(90deg,#ee78a855,#efc26c55,#8ed69b55,#75c9e755,#b69ee555,#ee78a855,#efc26c55,#8ed69b55,#75c9e755,#b69ee555,#ee78a855);
  --scoreboard-stripe:linear-gradient(180deg,#ee78a8,#efc26c,#8ed69b,#75c9e7,#b69ee5,#ee78a8,#efc26c,#8ed69b,#75c9e7,#b69ee5,#ee78a8);
  --scoreboard-finish-duration:13.5s;
  border-color:#d4bbde66;
}
.scoreboard-row[data-finish="diamond"] {
  --scoreboard-finish:linear-gradient(115deg,#476f9b33,#82cddd33,#edffff44,#8ed7e233,#a6b9e333,#476f9b33,#82cddd33,#edffff44,#8ed7e233,#a6b9e333,#476f9b33);
  --scoreboard-stripe:linear-gradient(180deg,#476f9b,#82cddd,#edffff,#8ed7e2,#a6b9e3,#476f9b,#82cddd,#edffff,#8ed7e2,#a6b9e3,#476f9b);
  --scoreboard-finish-duration:4.6s;
  --scoreboard-glint:#edffff;
  border-color:#a1def466;
}
.scoreboard-row[data-finish="gold"] {
  --scoreboard-finish:linear-gradient(115deg,#85532633,#c18c3633,#fff0b044,#dda94233,#a46d2933,#85532633,#c18c3633,#fff0b044,#dda94233,#a46d2933,#85532633);
  --scoreboard-stripe:linear-gradient(180deg,#855326,#c18c36,#fff0b0,#dda942,#a46d29,#855326,#c18c36,#fff0b0,#dda942,#a46d29,#855326);
  --scoreboard-finish-duration:5.4s;
  --scoreboard-glint:#fff0b2;
  border-color:#eed58066;
}
.scoreboard-row:is([data-finish="rainbow"],[data-finish="diamond"],[data-finish="gold"]) {
  background:var(--scoreboard-finish) 50% 50% / 200% 100%,var(--scoreboard-surface);
  animation:scoreboard-finish-flow var(--scoreboard-finish-duration) linear infinite;
}
.scoreboard-row:is([data-finish="rainbow"],[data-finish="diamond"],[data-finish="gold"]) .scoreboard-color {
  background:var(--scoreboard-stripe) 50% 50% / 100% 200%;
  animation:scoreboard-stripe-flow var(--scoreboard-finish-duration) linear infinite;
}
.scoreboard-row:is([data-finish="rainbow"],[data-finish="diamond"],[data-finish="gold"]) .scoreboard-rank { color:#d6e2d6; }
.scoreboard-row:is([data-finish="diamond"],[data-finish="gold"]) { animation-direction:alternate; }
.scoreboard-row:is([data-finish="diamond"],[data-finish="gold"])::after {
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:.6;
  background:radial-gradient(ellipse 1px 3px at 43% 84%,var(--scoreboard-glint) 40%,transparent 100%),radial-gradient(ellipse 3px 1px at 43% 84%,var(--scoreboard-glint) 40%,transparent 100%),radial-gradient(ellipse 1px 2px at 71% 13%,var(--scoreboard-glint) 40%,transparent 100%),radial-gradient(ellipse 2px 1px at 71% 13%,var(--scoreboard-glint) 40%,transparent 100%);
  animation:scoreboard-finish-glint var(--scoreboard-finish-duration) ease-in-out infinite;
}
@keyframes scoreboard-finish-flow { from { background-position:0% 50%; } to { background-position:100% 50%; } }
@keyframes scoreboard-stripe-flow { from { background-position:50% 0%; } to { background-position:50% 100%; } }
@keyframes scoreboard-finish-glint { 0%,100% { opacity:.25; } 45% { opacity:.85; } 65% { opacity:.45; } }
.scoreboard-rank { color:#9fb8a9; font-size:9px; text-align:center; }
.scoreboard-portrait { display:block; width:25px; height:25px; border-radius:4px; background:#eef5e919; }
.scoreboard-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:600; }
.scoreboard-points { display:block; min-width:21px; font-size:12px; text-align:right; color:#f5f9e9; transform:scale(calc(1 + var(--scoreboard-pulse) * .1)); transform-origin:right center; }
.scoreboard-gain { position:absolute; right:3px; top:-9px; z-index:2; padding:1px 3px; border-radius:3px; color:#ddffb5; background:#16352e; font-size:8px; opacity:var(--scoreboard-pulse); transform:translateY(calc((1 - var(--scoreboard-pulse)) * -6px)); }
.scoreboard-gain:empty { display:none; }
.scoreboard-row.is-human .scoreboard-name { color:#eaffc9; }
.scoreboard-row.is-leading .scoreboard-rank { color:#f4d98c; }
.scoreboard-row.is-out { --scoreboard-surface:#23332ff2; }
.scoreboard-row.is-out .scoreboard-portrait { filter:saturate(.55); opacity:.78; }
.scoreboard-reset { pointer-events:auto; cursor:pointer; width:28px; height:22px; min-height:0; padding:0; border:1px solid #d9e6cc45; border-radius:4px; background:#193c32; color:#d9e7cf; font-size:17px; line-height:1; }
.scoreboard-reset:hover { color:#fff; background:#35594a; }
.scoreboard-reset:focus-visible { outline:2px solid #ebf7a9; outline-offset:2px; }
.scoreboard.is-night .scoreboard-row { --scoreboard-surface:#0b1e29f5; border-color:#b1d0e044; }
.scoreboard.is-night .scoreboard-title { color:#dbe8ee; }
.scoreboard.is-night .scoreboard-row.is-human .scoreboard-name { color:#daf6d5; }
.scoreboard--result { position:relative; width:100%; max-width:300px; margin:12px auto 8px; text-align:left; --scoreboard-row:28px; --scoreboard-step:31px; }
.scoreboard.scoreboard--result .scoreboard-title { color:#405d4b; text-shadow:none; }
.scoreboard--result .scoreboard-heading { min-height:18px; }
.scoreboard--result .scoreboard-name { font-size:11px; }
.scoreboard-rail { display:flex; justify-content:flex-end; }
.scoreboard-rail .scoreboard--live { position:relative; inset:auto; margin:4px 0; }
.scoreboard-rail .scoreboard-title { color:#405d4b; text-shadow:none; }
.scoreboard.is-reduced-motion .scoreboard-points,.scoreboard.is-reduced-motion .scoreboard-gain { transform:none; }
.scoreboard.is-reduced-motion .scoreboard-gain { display:none; }
.scoreboard.is-reduced-motion .scoreboard-row,.scoreboard.is-reduced-motion .scoreboard-color,.scoreboard.is-reduced-motion .scoreboard-row::after { animation:none; }
@container arena (max-width:600px) {
  .scoreboard--live { top:44px; right:12px; width:148px; --scoreboard-row:23px; --scoreboard-step:26px; }
  .scoreboard--live .scoreboard-heading { min-height:18px; }
  .scoreboard--live .scoreboard-title { font-size:7px; }
  .scoreboard--live .scoreboard-row { grid-template-columns:11px 21px minmax(0,1fr) auto; gap:4px; padding:0 6px; }
  .scoreboard--live .scoreboard-portrait { width:21px; height:21px; }
  .scoreboard--live .scoreboard-name { font-size:9px; }
  .scoreboard--live .scoreboard-points { font-size:11px; min-width:18px; }
}
@media (max-width:600px), (pointer:coarse) and (max-width:950px) and (max-height:600px) {
  body.mobile-round .scoreboard--live { top:calc(max(8px,env(safe-area-inset-top)) + 78px); right:max(10px,env(safe-area-inset-right)); }
  body.mobile-round .scoreboard-reset { width:32px; height:28px; }
  body.mobile-round.mobile-paused .scoreboard--live { visibility:hidden; }
  body.mobile-round .scoreboard--result { margin:8px auto; --scoreboard-row:25px; --scoreboard-step:28px; }
  body.mobile-round .scoreboard--result .scoreboard-portrait { width:23px; height:23px; }
}
@media (prefers-reduced-motion:reduce) {
  .scoreboard-points,.scoreboard-gain { transform:none!important; }
  .scoreboard-gain { display:none; }
  .scoreboard-row,.scoreboard-color,.scoreboard-row::after { animation:none!important; }
}