/* Shared typography and layout. Responsive rules below only change layout, never shrink essential text. */
:root {
  --paper: #f3f0e7;
  --ink: #20221d;
  --muted: #626657;
  --line: #d5d4c7;
  --orange: #ff6433;
  --orange-ink: #ad3510;
  --orange-heading: #d3481d;
  --yellow: #eddb65;
  --green: #798755;
  --mono: 'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --sans: Arial,Helvetica,sans-serif;
  --hud: #172d44ed;
  --display: Arial,Helvetica,sans-serif;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
[hidden] {
  display: none!important;
}
button,input {
  font: inherit;
}
button,a,input {
  -webkit-tap-highlight-color: transparent;
}
button {
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline: 3px solid #ad3510;
  outline-offset: 5px;
}
::selection {
  background: var(--yellow);
  color: var(--ink);
}
.site-shell {
  max-width: 1552px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3.6vw, 56px);
}
.site-header {
  height: 114px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ink);
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand-mark {
  display: grid;
  grid-template-columns: repeat(3,7px);
  grid-template-rows: repeat(3,7px);
  gap: 3px;
  transform: rotate(-5deg);
}
.brand-mark i {
  background: var(--ink);
}
.brand-mark i:nth-child(3),.brand-mark i:nth-child(7) {
  background: var(--orange);
}
.brand-mark i:nth-child(5) {
  background: transparent;
}
.brand-word {
  font-size: 27px;
  font-weight: 900;
  line-height: .86;
  letter-spacing: -1.4px;
}
.brand-one {
  display: block;
  letter-spacing: 3.8px;
}
.brand-dot {
  vertical-align: top;
  font-size: 10px;
  letter-spacing: 0;
  margin-left: 2px;
}
.main-nav {
  display: flex;
  align-self: stretch;
  gap: clamp(15px, 2vw, 33px);
}
.nav-button {
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  position: relative;
  padding: 0 2px;
  min-height: 44px;
}
.nav-button:hover {
  color: var(--orange);
}
.nav-button.active:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--orange);
}
.nav-button.active {
  color: var(--orange);
}
.nav-button span[aria-hidden] {
  margin-left: 6px;
}
.header-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
}
.header-status strong {
  font-weight: 500;
}
.online-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #78865a;
  box-shadow: 0 0 0 3px #78865a14;
}
.sound-button {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0;
  background: none;
  border: 1px solid var(--line);
  height: 44px;
  min-width: 76px;
  line-height: 1;
  margin-left: 6px;
  padding: 0 7px;
  white-space: nowrap;
}
.sound-button:hover {
  border-color: var(--orange);
  color: var(--orange);
}
body.in-game #site-shell {
  display: none;
}
.alpha-tag {
  margin-left: 13px;
  border: 1px solid var(--line);
  padding: 7px 9px;
  font-size: 10px;
  color: var(--muted);
}
.season-line {
  margin: 28px 0 23px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .7px;
}
.season-label {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.season-label>span {
  font-size: 14px;
  color: var(--orange);
}
.season-note {
  color: var(--muted);
  font-size: 10px;
}
.hero-section {
  display: grid;
  grid-template-columns: 1.04fr 1.25fr .92fr;
  gap: 24px;
  align-items: stretch;
}
.hero-copy {
  padding-top: 11px;
  position: relative;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .5px;
  font-weight: 600;
  display: block;
  line-height: 1.5;
}
.tiny-target {
  color: var(--orange);
  font-size: 15px;
  vertical-align: -1px;
  margin-right: 5px;
}
h1,h2,h3,p {
  margin: 0;
}
h1 {
  font-size: clamp(37px,3.8vw,59px);
  font-weight: 900;
  line-height: .97;
  letter-spacing: -2.7px;
  margin-top: 24px;
}
h1>span {
  color: var(--orange-heading);
}
.hero-description {
  font-size: 14px;
  line-height: 1.7;
  max-width: 330px;
  margin-top: 23px;
  color: var(--muted);
}
.hero-facts {
  display: flex;
  gap: 16px;
  margin-top: 23px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}
.hero-facts b {
  font-size: 19px;
  color: var(--ink);
  margin-right: 4px;
  font-family: var(--sans);
  letter-spacing: -1px;
}
.learn-link {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 264px;
  border-top: 1px solid var(--line);
  padding-top: 17px;
  margin-top: 26px;
  gap: 9px;
  line-height: 1.5;
}
.learn-link span {
  font-size: 18px;
  line-height: .5;
}
.learn-link:hover {
  color: var(--orange);
}
.arena-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--ink);
  background: #d7ddbb;
  overflow: hidden;
  box-shadow: 4px 4px 0 #21231d;
}
.arena-topline,.arena-bottomline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2px;
  height: 36px;
  padding: 0 13px;
  z-index: 1;
  flex-shrink: 0;
}
.arena-topline {
  background: var(--ink);
  color: var(--paper);
}
.arena-topline>span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}
.live-dot {
  width: 5px;
  height: 5px;
  background: var(--yellow);
  border-radius: 50%;
}
.arena-topline>span:last-child {
  opacity: .8;
  font-size: 9px;
}
.arena-bottomline {
  height: 32px;
  background: #e8e8d5;
  border-top: 1px solid var(--ink);
  font-size: 10px;
  font-weight: 700;
}
.arena-bottomline>span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
}
.arena-bottomline>span:last-child {
  font-size: 18px;
}
.orange-dot {
  width: 5px;
  height: 5px;
  background: var(--orange);
}
#lobby-canvas {
  width: 100%;
  height: 100%;
  min-height: 365px;
  flex: 1;
  display: block;
  object-fit: cover;
  image-rendering: pixelated;
}
.map-label {
  position: absolute;
  left: 16px;
  top: 48px;
  background: var(--yellow);
  border: 1px solid var(--ink);
  padding: 7px 9px;
  font-size: 10px;
  letter-spacing: .1px;
  font-family: var(--mono);
  box-shadow: 2px 2px 0 #21231d99;
  max-width: calc(100% - 30px);
  line-height: 1.5;
}
.map-label>span {
  font-size: 13px;
  margin-right: 3px;
  vertical-align: -1px;
}
.map-coordinate {
  position: absolute;
  right: 12px;
  bottom: 44px;
  font-family: var(--mono);
  font-size: 9px;
  padding: 4px 6px;
  background: #f3f0e7c9;
  color: #46503b;
  letter-spacing: .4px;
}
.match-panel {
  padding: 22px;
  background: var(--yellow);
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 4px 0 #21231d;
  position: relative;
  min-width: 0;
}
.panel-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.match-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.match-panel h2 {
  font-size: 32px;
  line-height: .97;
  letter-spacing: -1.3px;
  font-weight: 900;
}
.match-symbol {
  font-size: 38px;
  line-height: .8;
  margin-top: 3px;
}
.mode-pill {
  margin-top: 16px;
  border-top: 1px solid #24271c66;
  border-bottom: 1px solid #24271c66;
  padding: 9px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .2px;
  font-weight: 800;
  line-height: 1.5;
}
.mode-pill>span:first-child {
  font-size: 13px;
}
.mode-pill>span:last-child {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  border: 1px solid #24271c66;
  padding: 3px 5px;
}
.field-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  margin: 16px 0 7px;
  flex-wrap: wrap;
  gap: 6px;
}
.field-label>span {
  opacity: 1;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: #4f512d;
}
.input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ink);
  background: #fffdf2;
  padding: 0 10px;
  height: 48px;
  min-width: 0;
}
.input-wrap>span {
  font-size: 16px;
}
.input-wrap input {
  background: transparent;
  border: 0;
  outline: 0;
  min-width: 0;
  width: 100%;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--ink);
}
.input-wrap:focus-within {
  box-shadow: none;
  outline: 3px solid #ad3510;
  outline-offset: 3px;
}
.input-wrap input:focus-visible {
  outline: none;
}
.input-wrap input::placeholder {
  color: #64664e;
}
.room-input {
  background: #eee5a5;
}
.room-hint {
  margin-top: 7px;
  font-size: 12px;
  opacity: 1;
  line-height: 1.5;
  color: #4f512d;
}
.play-button {
  border: 1px solid var(--ink);
  background: var(--orange);
  color: var(--ink);
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -.8px;
  width: 100%;
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px;
  margin-top: 20px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s,box-shadow .15s,background .15s;
}
.play-button>span:last-child {
  font-size: 31px;
  line-height: 1;
  font-weight: 400;
}
.play-button:hover {
  background: #ff764b;
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.play-button:active {
  transform: translate(3px,3px);
  box-shadow: 0 0 0 var(--ink);
}
.play-button:disabled {
  cursor: wait;
  opacity: .75;
}
.connection-status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  min-height: 32px;
  line-height: 1.5;
  text-align: center;
}
.status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #566239;
  border-radius: 50%;
}
.match-note {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #24271c33;
  margin-top: 16px;
  padding-top: 10px;
  font-size: 11px;
  line-height: 1.5;
  color: #4f512d;
}
.match-note>span {
  font-size: 23px;
}
.heroes-section {
  margin-top: 37px;
  scroll-margin-top: 20px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}
.section-heading>div {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.section-index {
  font-family: var(--mono);
  color: var(--orange-ink);
  font-size: 12px;
  font-weight: 700;
}
.section-heading h2 {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.4px;
}
.section-subtitle {
  font-family: var(--mono);
  font-size: 7px;
  color: var(--muted);
  letter-spacing: .3px;
  margin-left: 7px;
}
.hero-selection-note {
  font-family: var(--mono);
  font-size: 7px;
  color: var(--muted);
  letter-spacing: .3px;
}
.hero-selection-note span {
  margin-left: 10px;
  font-size: 17px;
  color: var(--ink);
}
.hero-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
}
.hero-card {
  background: transparent;
  text-align: left;
  border: 1px solid var(--line);
  padding: 0;
  display: grid;
  align-items: stretch;
  position: relative;
  min-width: 0;
  transition: transform .15s,box-shadow .15s,border-color .15s;
  overflow: visible;
  grid-template-columns: 1fr;
}
.hero-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.hero-card.selected {
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  background: #fffdf2;
}
.hero-card-art {
  position: relative;
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  border-right: 0;
  height: 155px;
  border-bottom: 1px solid var(--line);
}
.art-sigma {
  background: #dddcd1;
}
.art-babushka {
  background: #dedec4;
}
.art-pigeon {
  background: #d4ddd7;
}
.art-goblin {
  background: #e5d5bc;
}
.hero-card-art:after {
  content: '';
  position: absolute;
  bottom: 15px;
  width: 68px;
  height: 8px;
  border-radius: 50%;
  background: #20221d18;
  z-index: 0;
}
.hero-card-art canvas {
  width: 130px;
  height: 130px;
  image-rendering: pixelated;
  position: relative;
  z-index: 1;
  max-width: 100%;
  object-fit: contain;
}
.hero-number {
  position: absolute;
  top: 9px;
  left: 9px;
  font-family: var(--mono);
  font-size: 11px;
  opacity: .8;
}
.hero-card-copy {
  flex: 1;
  padding: 18px;
  min-width: 0;
  display: block;
}
.hero-role {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .1px;
  white-space: normal;
  line-height: 1.4;
}
.hero-card .hero-title {
  font-size: 20px;
  letter-spacing: -.5px;
  white-space: normal;
  font-weight: 900;
  margin-top: 9px;
  display: block;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.hero-card .hero-description-short {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 7px;
  display: block;
}
.hero-skill {
  display: flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  gap: 3px;
  margin-top: 12px;
  white-space: normal;
}
.hero-skill i {
  font-style: normal;
  color: var(--orange);
  font-size: 11px;
}
.selection-check {
  position: absolute;
  right: 0;
  top: 0;
  background: var(--orange);
  font-size: 14px;
  line-height: 26px;
  width: 26px;
  text-align: center;
  display: none;
}
.selected .selection-check {
  display: block;
}
.features-strip {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .25px;
  gap: 20px;
  flex-wrap: wrap;
}
.features-strip>span {
  display: flex;
  align-items: center;
  gap: 9px;
}
.features-strip i {
  font-style: normal;
  font-size: 17px;
  line-height: 1;
  color: var(--orange);
}
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 23px 0 27px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .2px;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.6;
}
.footer-slogan {
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}
.footer-slogan>span {
  color: var(--orange);
  font-size: 14px;
  margin-left: 7px;
}
.footer-version {
  font-size: 10px;
}
.secondary-view {
  padding-bottom: 8px;
  min-height: 660px;
}
.view-heading {
  padding: 25px 0 36px;
}
.view-heading h1 {
  font-size: 62px;
  line-height: 1;
  margin: 17px 0 20px;
}
.view-heading>p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 530px;
}
.leaderboard-wrap {
  border: 1px solid var(--ink);
  background: #fffdf2;
  box-shadow: 4px 4px 0 var(--ink);
  overflow: auto;
}
.leaderboard {
  border-collapse: collapse;
  width: 100%;
  min-width: 570px;
  text-align: left;
}
.leaderboard th {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .5px;
  padding: 18px 24px;
}
.leaderboard td {
  padding: 19px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
}
.leaderboard td:first-child {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--orange-ink);
}
.leaderboard td:nth-child(3) {
  font-weight: 900;
}
.leaderboard tr:last-child td {
  border-bottom: 0;
}
.ranking-empty {
  padding: 45px 20px;
  text-align: center;
}
.ranking-empty>span {
  font-size: 39px;
  color: var(--orange);
}
.ranking-empty h2 {
  font-size: 20px;
  margin: 12px 0;
}
.ranking-empty p {
  font-size: 14px;
  color: var(--muted);
}
.secondary-button {
  background: var(--yellow);
  border: 1px solid var(--ink);
  padding: 13px 20px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 3px 3px 0 var(--ink);
  margin-top: 22px;
  min-height: 44px;
}
.secondary-button span {
  margin-left: 30px;
}
.help-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}
.help-card {
  border: 1px solid var(--ink);
  padding: 25px;
  background: #fffdf2;
}
.help-card h2 {
  font-size: 22px;
  letter-spacing: -.4px;
  line-height: 1.1;
  margin: 17px 0 23px;
}
.control-list {
  margin: 0;
}
.control-list>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  gap: 5px;
}
.control-list dt {
  display: flex;
  gap: 3px;
}
.control-list dd {
  font-size: 13px;
  margin: 0;
}
.control-list kbd {
  font: 9px var(--mono);
  border: 1px solid #b8baab;
  background: var(--paper);
  min-width: 20px;
  padding: 5px;
  text-align: center;
  box-shadow: 0 2px 0 #b8baab;
  font-size: 11px;
}
.help-small {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 22px;
}
.weapons-help {
  background: #e8e9d5;
}
.weapon-explainer {
  display: flex;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #bdc0a9;
}
.weapon-explainer>span {
  color: #535e41;
  font-family: var(--mono);
  font-size: 11px;
}
.weapon-explainer h3 {
  font-size: 14px;
  letter-spacing: .2px;
}
.weapon-explainer p {
  font-size: 13px;
  color: #535e41;
  line-height: 1.65;
  margin-top: 5px;
}
.weapon-explainer:last-child {
  border-bottom: 0;
}
.survival-help {
  background: var(--yellow);
}
.survival-help ol {
  padding-left: 18px;
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}
.survival-help li {
  margin-bottom: 15px;
  padding-left: 5px;
}
.friend-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #b3a740;
  padding-top: 20px;
  margin-top: 22px;
}
.friend-tip>span {
  font-size: 28px;
}
.friend-tip p {
  font-size: 13px;
  line-height: 1.7;
}
.game-view {
  position: fixed;
  inset: 0;
  background: #20251c;
  color: #fffdf2;
  z-index: 30;
  overflow: hidden;
  user-select: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.game-view button:focus-visible {
  outline-offset: 3px;
  outline: 3px solid #fffdf2;
}
.game-view canvas {
  image-rendering: pixelated;
}
.game-view #game-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: default;
}
.game-top-left {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  left: max(24px, env(safe-area-inset-left));
  pointer-events: none;
}
.game-brand {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -1.1px;
  line-height: 1;
  text-shadow: 2px 2px 0 #20221d;
}
.game-brand>span {
  color: var(--orange);
}
.game-brand>small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  margin-top: 7px;
  font-weight: 400;
}
.room-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--hud);
  padding: 0 0 0 10px;
  border: 1px solid #ffffff35;
  margin-top: 13px;
  pointer-events: auto;
  max-width: 240px;
}
.room-badge>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-badge button {
  background: none;
  border: 0;
  color: var(--paper);
  font-size: 22px;
  line-height: 17px;
  margin-left: auto;
  padding: 0 4px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.game-top-center {
  position: absolute;
  left: 50%;
  top: max(20px, env(safe-area-inset-top));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 290px;
}
.game-phase-label {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #20221d;
  margin-bottom: 2px;
}
.alive-chip,.clock-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #20221deb;
  border: 1px solid #fffdf255;
  padding: 10px 13px;
  font-family: var(--mono);
  font-size: 12px;
  box-shadow: 2px 2px 0 #0006;
}
.alive-chip strong {
  color: var(--yellow);
  font-size: 17px;
}
.clock-chip strong {
  font-size: 14px;
  letter-spacing: 1px;
}
.clock-chip>span {
  font-size: 17px;
}
.minimap-wrap {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  top: 82px;
  width: 166px;
  border: 2px solid #fffdf291;
  background: #20221d;
  box-shadow: 3px 3px 0 #0006;
  pointer-events: none;
}
.minimap-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
}
.minimap-wrap>div {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .5px;
  padding: 7px 8px;
}
.minimap-wrap>div>span {
  color: var(--yellow);
}
.kill-feed {
  position: absolute;
  top: 140px;
  left: max(24px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
  font-size: 10px;
  max-width: min(330px, 40vw);
}
.kill-feed>div {
  background: var(--hud);
  border-left: 2px solid var(--orange);
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 11px;
  box-shadow: 2px 2px 0 #0002;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.kill-feed .killer {
  color: var(--yellow);
}
.spectator-banner {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: var(--orange);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 #20221d;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.5px;
  padding: 22px 30px;
  text-align: center;
  pointer-events: none;
  white-space: normal;
  width: max-content;
  max-width: calc(100% - 32px);
  line-height: 1.4;
}
.spectator-banner span {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 8px;
}
.health-hud {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: max(24px, env(safe-area-inset-left));
  width: 270px;
  pointer-events: none;
  padding: 12px;
  background: var(--hud);
  border: 1px solid #fffdf255;
}
.hud-player-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 0 #20221d;
}
.hud-player-icon {
  font-size: 20px;
  line-height: 1;
  color: var(--yellow);
}
.health-row {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 19px;
  margin: 3px 0;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  text-shadow: 1px 1px 0 #20221d;
}
.health-row>span:first-child {
  width: 16px;
  text-align: center;
  font-size: 15px;
}
.health-row>span:last-child {
  width: 28px;
  text-align: right;
}
.health-track {
  height: 13px;
  flex: 1;
  border: 1px solid #fffdf27a;
  box-shadow: 1px 1px 0 #20221d;
  background: #20221dd9;
  overflow: hidden;
}
.health-track>div {
  height: 100%;
  transition: width .15s;
}
.hp-fill {
  width: 100%;
  background: #adce5c;
}
.shield-fill {
  width: 0%;
  background: #76b7df;
}
.shield-row {
  color: #aad3ed;
}
.hp-row {
  color: #c8df90;
}
.supplies-row {
  display: flex;
  gap: 10px;
  padding-left: 1px;
  margin-top: 11px;
  font-family: var(--mono);
  font-size: 10px;
  text-shadow: 1px 1px 0 #20221d;
  flex-wrap: wrap;
}
.supplies-row > span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.supplies-row strong {
  font-size: 13px;
  color: var(--yellow);
}
.supplies-row .supply-short-label {
  display: none;
  text-decoration: none;
}
.supplies-row i {
  font-style: normal;
  font-size: 13px;
}
.inventory-hud {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  min-width: 0;
  width: 380px;
}
.inventory-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  text-shadow: 1px 1px 0 #20221d;
}
.inventory-label>span {
  color: var(--paper);
  font-size: 10px;
}
.inventory {
  display: flex;
  align-items: stretch;
  gap: 5px;
  justify-content: center;
  pointer-events: auto;
}
.inventory-slot,.weapon-slot {
  position: relative;
  border: 1px solid #fffdf255;
  background: var(--hud);
  color: var(--paper);
  height: 72px;
  min-width: 0;
  flex: 1;
  padding: 8px 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow: 2px 2px 0 #0006;
  font-family: var(--mono);
  font-size: 8px;
  cursor: pointer;
}
.inventory-slot.selected,.inventory-slot.active,.weapon-slot.active,.weapon-slot.selected {
  border-color: var(--yellow);
  background: #514b25ee;
  box-shadow: 0 -3px 0 var(--yellow),2px 2px 0 #0006;
  transform: translateY(-3px);
}
.inventory-slot.empty,.weapon-slot.empty,.weapon-slot:disabled {
  opacity: 1;
  color: #c4c6b5;
  background: #20221dd9;
}
.weapon-slot,.tool-slot {
  border-bottom: 3px solid var(--rarity,#fffdf255);
}
.tool-slot { flex: 0 0 80px; border-color:#e5b773; }
.weapon-slot>strong,.tool-slot>strong {
  font-size: 14px;
  margin-top: 23px;
  letter-spacing: .2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weapon-slot>small,.tool-slot>small {
  font-size: 10px;
  white-space: nowrap;
  line-height: 1.3;
  opacity: 1;
}
.tool-slot>strong { font-size: 12px; }
.tool-slot>small { font-size: 8px; white-space: normal; text-align: center; }
.tool-slot:disabled { cursor: default; color: #c4c6b5; background: #20221dd9; }
.equipment-icon {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 42px;
  height: 24px;
  transform: translateX(-50%);
  fill: var(--rarity, #eacb82);
  stroke: currentColor;
  stroke-width: .8px;
  stroke-linejoin: miter;
  pointer-events: none;
}
.tool-slot .equipment-icon { width: 36px; }
.connection-status.error {
  color: #a03927;
}
.weapon-slot .slot-number,.tool-slot .slot-number,.inventory-slot .slot-key,.weapon-slot .slot-key,.inventory-slot .key,.weapon-slot .key {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 10px;
  opacity: 1;
}
.inventory-slot .weapon-name,.weapon-slot .weapon-name {
  font-size: 6px;
  white-space: nowrap;
}
.inventory-slot .weapon-icon,.weapon-slot .weapon-icon {
  font-size: 20px;
  line-height: 1;
  margin-top: 3px;
}
.inventory-slot .ammo,.weapon-slot .ammo {
  font-size: 10px;
  white-space: nowrap;
}
.inventory-slot small,.weapon-slot small {
  font-size: 10px;
  opacity: 1;
}
.inventory-slot.tool-slot small { font-size: 8px; }
.inventory-hint {
  margin-top: 10px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1px;
  text-shadow: 1px 1px 0 #20221d;
  white-space: nowrap;
}
.inventory-hint span {
  margin: 0 7px;
  opacity: .4;
}
.inventory-hint kbd {
  font: 7px var(--mono);
  color: var(--yellow);
  font-size: 11px;
}
.ability-hud {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  min-width: 0;
  pointer-events: none;
  width: 210px;
}
.ability-slot {
  background: var(--hud);
  border: 1px solid #fffdf255;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 2px 2px 0 #0006;
}
.ability-slot kbd {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--yellow);
  color: var(--ink);
  padding: 7px 9px;
}
.ability-slot>div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ability-slot>div>span {
  font-family: var(--mono);
  font-size: 11px;
}
.ability-slot strong {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--yellow);
}
.ability-symbol {
  font-size: 23px;
  color: var(--orange);
}
.dash-slot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px;
  text-shadow: 1px 1px 0 #20221d;
  background: var(--hud);
  border: 1px solid #fffdf255;
}
.dash-slot kbd {
  font: 6px var(--mono);
  border: 1px solid #fffdf255;
  background: #20221da8;
  padding: 4px 5px;
  font-size: 10px;
}
.dash-slot strong {
  margin-left: auto;
  color: var(--yellow);
  font-size: 12px;
}
.touch-controls {
  display: none;
}
.result-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: safe center;
  justify-content: center;
  background: #20221dc7;
  backdrop-filter: blur(5px);
  padding: 25px;
  z-index: 45;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.result-card {
  background: var(--paper);
  color: var(--ink);
  padding: 31px;
  width: min(100%, 470px);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--orange);
  text-align: center;
  flex-shrink: 0;
}
.result-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .5px;
}
.result-star {
  font-size: 72px;
  line-height: 1;
  color: var(--orange);
  margin: 23px 0 13px;
}
.result-card h2 {
  font-size: 37px;
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.02;
}
.result-card>p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 13px;
}
.result-stats {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 19px 0;
  margin-top: 26px;
}
.result-stats>div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.result-stats>div+div {
  border-left: 1px solid var(--line);
}
.result-stats span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.result-stats strong {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
}
.result-stats>div:last-child strong {
  color: var(--orange-heading);
}
.result-card .play-button {
  font-size: 19px;
}
.back-button {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  margin-top: 16px;
  padding: 5px 12px;
  min-height: 44px;
}
.back-button:hover {
  color: var(--orange);
}
.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--ink);
  border: 1px solid var(--paper);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  padding: 14px 22px;
  box-shadow: 4px 4px 0 var(--orange);
  z-index: 70;
  max-width: calc(100% - 40px);
  text-align: center;
  line-height: 1.5;
}
.nav-button.active,.nav-button:hover {
  color: #ae3410;
}
.section-subtitle,.hero-selection-note {
  font-size: 11px;
}
.hero-skill-detail {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 7px;
  color: var(--muted);
}
.game-view #game-canvas:focus-visible {
  outline: none;
}
body.in-game {
  overflow: hidden;
  overscroll-behavior: none;
}
body.in-game .toast {
  top: 125px;
  bottom: auto;
  width: min(460px, calc(100% - 32px));
  max-width: min(460px, calc(100% - 32px));
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 90;
  top: 10px;
  left: 16px;
  transform: translateY(-150%);
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
}
.skip-link:focus {
  transform: translateY(0);
}
.arrow-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.arrow-down-left {
  transform: rotate(180deg);
}
.nav-button .arrow-icon {
  width: 12px;
  height: 12px;
}
.match-symbol .arrow-icon {
  width: 34px;
  height: 34px;
}
.play-button .arrow-icon {
  width: 29px;
  height: 29px;
}
.learn-link .arrow-icon {
  width: 17px;
  height: 17px;
}

@media (max-width: 1150px) {
  .site-header { gap: 15px; }
  .header-status .alpha-tag { display: none; }
  .hero-section { grid-template-columns: 1fr 1.2fr; gap: 24px; }
  .hero-copy { grid-column: 1; grid-row: 1; }
  .arena-preview { grid-column: 2; grid-row: 1 / span 2; }
  .match-panel { grid-column: 1; grid-row: 2; }
  h1 { font-size: clamp(36px, 4.5vw, 52px); }
  .hero-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-card { grid-template-columns: 34% 1fr; }
  .hero-card-art { height: 100%; min-height: 190px; border-right: 1px solid var(--line); border-bottom: 0; }
  .help-grid { grid-template-columns: 1fr 1fr; }
  .survival-help { grid-column: 1 / -1; }
  .health-hud { width: 220px; }
  .inventory-hud { width: 310px; }
  .inventory-label > span { display: none; }
  .ability-hud { width: 180px; }
  .ability-symbol { display: none; }
  .inventory-hint { white-space: normal; line-height: 1.5; }
}

@media (max-width: 700px) {
  .site-header { height: auto; min-height: 112px; flex-wrap: wrap; padding-top: 16px; gap: 8px; }
  .brand { gap: 8px; }
  .brand-mark { grid-template-columns: repeat(3, 5px); grid-template-rows: repeat(3, 5px); gap: 2px; }
  .brand-word { font-size: 23px; }
  .brand-dot { font-size: 8px; }
  .header-status { margin-left: auto; font-size: 10px; gap: 5px; }
  .sound-button { font-size: 10px; min-width: 70px; margin-left: 4px; padding: 0 5px; }
  .main-nav { width: 100%; order: 3; height: 48px; gap: 6px; justify-content: space-between; }
  .nav-button { font-size: 11px; letter-spacing: 0; padding: 0 2px; }
  .season-line { margin: 24px 0; font-size: 10px; letter-spacing: .3px; }
  .season-note { display: none; }
  .hero-section { grid-template-columns: 1fr; gap: 22px; }
  .hero-copy { grid-column: 1; grid-row: 1; padding: 0; }
  .hero-copy h1 { font-size: clamp(34px, 8.8vw, 59px); letter-spacing: -1.7px; line-height: 1.06; margin-top: 20px; }
  .hero-copy h1 br:nth-of-type(1), .hero-copy h1 br:nth-of-type(3) { display: none; }
  .hero-copy h1 > span { white-space: nowrap; }
  .hero-copy h1 > span:first-of-type { margin-right: 6px; }
  .hero-description { max-width: none; margin-top: 20px; }
  .hero-description br { display: none; }
  .hero-facts { margin-top: 18px; gap: 20px; }
  .hero-facts b { font-size: 22px; }
  .learn-link { display: none; }
  .arena-preview { grid-column: 1; grid-row: 3; }
  #lobby-canvas { min-height: 0; height: 320px; flex: auto; }
  .arena-topline, .arena-bottomline { padding: 0 10px; font-size: 10px; }
  .map-label { left: 12px; top: 50px; font-size: 10px; }
  .map-coordinate { font-size: 9px; bottom: 46px; }
  .match-panel { grid-column: 1; grid-row: 2; padding: 22px; }
  .match-panel-heading { align-items: center; }
  .match-panel h2 { font-size: 34px; }
  .mode-pill { margin-top: 18px; }
  .heroes-section { margin-top: 32px; }
  .section-heading h2 { font-size: 18px; }
  .section-subtitle, .hero-selection-note { display: none; }
  .hero-grid { gap: 14px; }
  .hero-card { grid-template-columns: 1fr; }
  .hero-card-art { height: 136px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-card-art canvas { width: 120px; height: 120px; }
  .hero-card-copy { padding: 15px 12px; }
  .hero-role { font-size: 11px; }
  .hero-card .hero-title { font-size: 17px; margin-top: 9px; }
  .hero-card .hero-description-short { font-size: 13px; }
  .hero-skill { font-size: 11px; }
  .hero-skill-detail { font-size: 12px; }
  .features-strip { display: grid; grid-template-columns: 1fr 1fr; font-size: 11px; gap: 18px 10px; }
  .features-strip > span { gap: 6px; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-version { display: none; }
  .secondary-view { min-height: 570px; }
  .view-heading { padding: 12px 0 28px; }
  .view-heading h1 { font-size: 48px; letter-spacing: -2px; }
  .leaderboard { min-width: 540px; }
  .leaderboard th, .leaderboard td { padding: 16px; }
  .ranking-empty h2 { font-size: 22px; line-height: 1.3; }
  .help-grid { grid-template-columns: 1fr; }
  .survival-help { grid-column: auto; }
  .help-card { padding: 24px; }
  .game-top-left { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); max-width: 42%; }
  .game-brand { font-size: 20px; }
  .game-brand > small { display: none; }
  .room-badge { font-size: 10px; margin-top: 8px; max-width: 100%; padding-left: 6px; gap: 0; }
  .room-badge button { width: 44px; }
  .game-top-center { top: 100px; left: 12px; transform: none; min-width: 0; width: calc(100% - 124px); gap: 4px; justify-content: flex-start; flex-wrap: nowrap; }
  .game-phase-label { display: none; }
  .alive-chip, .clock-chip { font-size: 10px; padding: 6px; gap: 4px; }
  .alive-chip strong { font-size: 14px; }
  .clock-chip strong { font-size: 12px; letter-spacing: 0; }
  .clock-chip > span { display: none; }
  .minimap-wrap { top: 66px; right: 12px; width: 88px; border-width: 1px; }
  .minimap-wrap > div { display: none; }
  .kill-feed { top: 140px; left: 12px; max-width: calc(100% - 120px); gap: 3px; }
  .kill-feed > div { font-size: 10px; padding: 5px 7px; }
  .health-hud { bottom: calc(242px + env(safe-area-inset-bottom)); left: 12px; width: calc(50% - 22px); padding: 8px; }
  .hud-player-label { font-size: 10px; margin-bottom: 6px; gap: 4px; }
  .hud-player-icon { display: none; }
  .health-row { height: 17px; gap: 4px; font-size: 12px; }
  .health-row > span:first-child { width: 12px; font-size: 13px; }
  .health-row > span:last-child { width: 24px; }
  .health-track { height: 11px; }
  .supplies-row { font-size: 10px; gap: 4px 8px; margin-top: 6px; }
  .supplies-row strong { font-size: 12px; }
  .supplies-row i { font-size: 11px; }
  .supplies-row .supply-full-label { display: none; }
  .supplies-row .supply-short-label { display: inline; }
  .ability-hud { bottom: calc(242px + env(safe-area-inset-bottom)); right: 12px; width: calc(50% - 22px); }
  .ability-slot { padding: 8px; gap: 6px; }
  .ability-slot kbd { font-size: 11px; padding: 6px; }
  .ability-slot > div > span { font-size: 10px; }
  .ability-slot strong { font-size: 12px; }
  .dash-slot { font-size: 10px; gap: 4px; margin-top: 6px; padding: 6px 4px; }
  .dash-slot kbd { font-size: 9px; padding: 2px; }
  .dash-slot strong { font-size: 11px; }
  .inventory-hud { bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
  .inventory-label { display: none; }
  .inventory { gap: 6px; }
  .weapon-slot,.tool-slot { height: 62px; padding: 7px 5px; }
  .weapon-slot > strong,.tool-slot > strong { font-size: 11px; margin-top: 17px; }
  .weapon-slot > small { font-size: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .tool-slot { flex-basis: 64px; }
  .tool-slot > small { font-size: 8px; line-height: 1; }
  .equipment-icon { top: 4px; width: 36px; height: 20px; }
  .inventory-hint { display: none; }
  .spectator-banner { top: 36%; font-size: 19px; padding: 14px 18px; box-shadow: 3px 3px 0 var(--ink); }
  .result-overlay { padding: 18px; }
  .result-card { padding: 24px; }
  .result-card h2 { font-size: 30px; }
  .result-kicker { font-size: 10px; }
  .result-star { font-size: 54px; margin: 18px 0 12px; }
  .result-stats { margin-top: 20px; padding: 16px 0; }
  .result-card .play-button { font-size: 18px; }
  body.in-game .toast { top: 164px; font-size: 12px; padding: 10px 14px; max-width: calc(100% - 32px); }
}

/* Touch input remains visible on hybrid devices through the has-touch class. */
  .touch-controls { position: absolute; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(82px + env(safe-area-inset-bottom)); height: 144px; justify-content: space-between; align-items: center; gap: 6px; pointer-events: none; }
  .touch-pad { flex: 0 0 76px; height: 76px; border: 2px solid #fffdf291; border-radius: 50%; background: #20221da8; display: flex; align-items: center; justify-content: center; position: relative; pointer-events: auto; touch-action: none; }
  .stick-knob { display: block; width: 32px; height: 32px; border: 1px solid #fffdf2ae; border-radius: 50%; background: #fffdf244; }
  .touch-label { position: absolute; bottom: calc(100% + 6px); font: 10px var(--mono); text-shadow: 1px 1px 0 var(--ink); pointer-events: none; }
  .touch-action-group { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; justify-content: center; pointer-events: auto; }
  .touch-action-group button { width: 44px; height: 44px; padding: 3px 0; border: 1px solid #fffdf291; background: var(--hud); color: var(--paper); font-family: var(--sans); font-size: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; touch-action: none; }
  .touch-key { font: 15px var(--mono); line-height: 1; }
  .touch-action-group button[data-action=ability] { background: var(--yellow); color: var(--ink); }
  .touch-action-group button[data-action=dash] { background: var(--orange); color: var(--ink); }
  .touch-action-group button:active { border-color: var(--yellow); transform: translateY(2px); }
.has-touch .touch-controls { display: flex; }
@media (any-pointer: coarse), (max-width: 700px) {
  .touch-controls { display: flex; }
}

@media (max-width: 370px) {
  .site-shell { padding: 0 14px; }
  .hero-copy h1 { font-size: 30px; letter-spacing: -1.2px; }
  .header-status { font-size: 10px; }
  .brand-word { font-size: 20px; }
  .hero-card-copy { padding: 14px 10px; }
  .hero-card .hero-title { font-size: 16px; }
  .hero-skill { font-size: 10px; }
  .features-strip { font-size: 10px; }
  .touch-pad { flex-basis: 64px; height: 64px; }
  .health-hud, .ability-hud { width: calc(50% - 18px); }
  .hud-player-label { display: none; }
  .dash-slot kbd { display: none; }
}

@media (min-width: 701px) {
  .has-touch .touch-controls { height: 90px; bottom: max(20px, env(safe-area-inset-bottom)); }
  .has-touch .touch-action-group { grid-template-columns: repeat(7, 44px); align-self: end; }
  .has-touch .inventory-hud { bottom: calc(82px + env(safe-area-inset-bottom)); width: min(360px, 42vw); }
  .has-touch .inventory-label, .has-touch .inventory-hint { display: none; }
  .has-touch .weapon-slot,.has-touch .tool-slot { height: 58px; }
  .has-touch .weapon-slot > strong,.has-touch .tool-slot > strong { margin-top: 17px; font-size: 11px; }
  .has-touch .tool-slot { flex-basis: 64px; }
  .has-touch .equipment-icon { height: 20px; }
  .has-touch .health-hud, .has-touch .ability-hud { bottom: calc(123px + env(safe-area-inset-bottom)); }
  .has-touch .health-hud { width: 200px; }
  .has-touch .ability-hud { width: 175px; }
}

/* Short landscapes need separate lanes for status, weapons and touch actions. */
@media (max-height: 550px) and (min-width: 701px) {
  .game-top-left { top: max(10px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); }
  .game-brand { font-size: 19px; }
  .game-brand > small { display: none; }
  .room-badge { margin-top: 7px; max-width: 200px; }
  .game-top-center { top: 12px; }
  .game-phase-label { display: none; }
  .alive-chip, .clock-chip { padding: 8px 10px; }
  .minimap-wrap { top: 64px; right: 16px; width: 84px; }
  .minimap-wrap > div { display: none; }
  .kill-feed { top: 92px; left: 16px; max-width: 235px; }
  .kill-feed > div { font-size: 10px; padding: 5px 7px; }
  .hud-player-label { display: none; }
  .health-hud { padding: 8px; }
  .ability-slot { padding: 8px; }
  .supplies-row { margin-top: 6px; }
  .result-card { padding: 18px 24px; width: 420px; }
  .result-star { display: none; }
  .result-card h2 { font-size: 29px; margin-top: 16px; }
  .result-card > p { margin-top: 8px; }
  .result-stats { padding: 10px 0; margin-top: 14px; }
  .result-card .play-button { height: 46px; margin-top: 16px; }
  .back-button { margin-top: 8px; }
  body.in-game .toast { top: 112px; padding: 9px 14px; }
}

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

.selected-hero-summary { font-size: 13px; line-height: 1.5; padding-top: 12px; }
.preparation-status{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px;background:#17374df5;color:#fff1bc;text-align:center;pointer-events:none;font:14px/1.6 var(--mono)}.preparation-status strong{font:900 clamp(24px,5vw,42px) var(--display);color:#ffda65}.preparation-status small{font-size:12px;color:#b8d9dc}
.selected-hero-summary > span { display: block; }
.selected-hero-summary > span:first-child { font-weight: 800; }
.preparation-status button{pointer-events:auto;min-width:160px;min-height:44px;padding:10px 16px;border:2px solid #ffda65;background:#244b61;color:#fff1bc;font:12px var(--mono);cursor:pointer}
.selected-hero-summary > span:last-child { font-size: 11px; color: #4f512d; }

/* Authoritative sprint energy. */
.stamina-fill { height: 100%; width: 100%; background: #f0c767; transition: width .1s linear; }
.stamina-row { color: #f0c767; }
.touch-action-group button[data-action=sprint][aria-pressed=true] { background: #f0c767; color: var(--ink); border-color: #fff1b0; }

.touch-action-group button[data-action=jump] { background: #77d7c9; color: #162d32; border-color: #cefff0; }

/* The camera owns the view direction. A fixed reticle also marks tool strikes. */
.crosshair{position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);pointer-events:none;z-index:4;filter:drop-shadow(0 1px 1px #23332b)}
.crosshair i,.crosshair b{position:absolute;background:#fff3bd;display:block}.crosshair i{width:16px;height:2px;left:2px;top:9px}.crosshair b{width:2px;height:16px;top:2px;left:9px}.crosshair.tool{border:2px solid #fff3bd;border-radius:50%;width:12px;height:12px}.crosshair.tool i,.crosshair.tool b{display:none}
.look-hint{position:absolute;top:105px;left:50%;transform:translateX(-50%);padding:10px 14px;max-width:calc(100% - 32px);background:#25362eea;border:1px solid #dfd8aa;color:#fff1bd;font:11px 'Roboto Mono',monospace;z-index:5;min-height:44px}
.flight-status{position:absolute;top:158px;left:50%;transform:translateX(-50%);padding:12px 18px;background:#25362eea;color:#fff1bd;font:12px monospace;text-align:center;z-index:4;max-width:85vw;border-bottom:3px solid #ef8c4d}
.target-info{position:absolute;left:50%;top:calc(50% + 30px);transform:translateX(-50%);display:grid;gap:5px;min-width:160px;color:#fff3bd;background:#23332be0;padding:8px 12px;font:10px monospace;text-align:center;pointer-events:none;z-index:4}.target-info progress{width:100%;height:8px;accent-color:#f1ba65}
.has-touch .look-hint{display:none}@media(max-width:600px){.flight-status{top:96px;font-size:10px;max-width:60vw}.target-info{min-width:120px}}

/* One aiming indicator: the OS cursor is never rendered as a crosshair. */
.in-game .crosshair{visibility:hidden;color:#fff}.in-game.mouse-captured .crosshair,.has-touch .in-game .crosshair{visibility:visible}
.in-game.mouse-captured #game-canvas{cursor:none}.crosshair.aiming{transform:translate(-50%,-50%) scale(.72)}
.in-game.spectating .crosshair{visibility:hidden}
.in-game.spectating .spectator-banner{top:216px;transform:translateX(-50%);padding:9px 14px;font:12px var(--mono);max-width:min(600px,calc(100% - 32px))}
.settings-button{width:44px;height:44px;min-width:44px;border:1px solid currentColor;background:transparent;color:inherit;font-size:23px;cursor:pointer}

#settings-dialog{width:min(480px,calc(100vw - 28px));max-height:85vh;overflow:auto;padding:26px;color:#18344e;background:#fff5dc;border:3px solid #18344e;box-shadow:8px 8px 0 #ef945b}
#settings-dialog::backdrop{background:#0d2438b8;backdrop-filter:blur(3px)}
.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.settings-heading h2{margin:5px 0;font-size:26px}.settings-heading small{font:10px var(--mono);letter-spacing:2px}.settings-heading button{width:44px;height:44px;border:2px solid #18344e;background:transparent;font-size:24px;cursor:pointer}
#settings-dialog label{display:flex;justify-content:space-between;align-items:center;gap:12px;font:13px var(--mono);margin:18px 0 8px}#settings-dialog output{color:#a44c23;font-weight:bold;white-space:nowrap}#settings-dialog input[type=range]{display:block;width:100%;height:38px;accent-color:#ee8652}#settings-dialog .settings-check{justify-content:flex-start;min-height:44px}#settings-dialog input[type=checkbox]{width:22px;height:22px;accent-color:#ee8652}#settings-dialog p{font:11px/1.7 var(--mono);margin:24px 0}#settings-reset{min-height:44px;padding:8px 14px;border:2px solid #18344e;background:#ffe19b;color:#18344e;font:12px var(--mono);cursor:pointer}
.in-game.spectating .spectator-banner{display:flex;align-items:center;gap:14px;pointer-events:auto;background:#132c43ef;color:#fff1bc;border:1px solid #f2bc60;box-shadow:3px 3px 0 #12233680}
.spectator-banner button{width:44px;height:44px;min-width:44px;border:1px solid #fff1bc66;color:#fff1bc;background:#274658;cursor:pointer;font-size:26px}.spectator-banner button:disabled{opacity:.4;cursor:default}.spectator-banner strong{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 14px var(--mono)}.spectator-banner small{display:block;font:9px var(--mono);margin-top:7px;color:#c4d7de}
#camera-fade{position:absolute;inset:0;background:#172b3b;opacity:0;pointer-events:none;z-index:3}#diagnostics{position:absolute;top:300px;left:24px;padding:12px;max-width:calc(100% - 48px);background:#071b2ae8;color:#8effd0;font:11px/1.7 monospace;z-index:12;pointer-events:none;white-space:pre-wrap}
@media(max-width:600px){.in-game.spectating .spectator-banner{top:202px;padding:5px 8px;gap:8px}.spectator-banner strong{max-width:170px;font-size:12px}.spectator-banner small{font-size:8px}#settings-dialog{padding:18px}.header-status .settings-button{width:36px;min-width:36px;height:36px}#diagnostics{left:12px;top:280px;font-size:9px}}
#wifi-status{position:absolute;right:24px;top:370px;width:240px;max-width:calc(100% - 48px);padding:13px 14px;background:#122d40ef;border-left:4px solid #6fffe0;box-shadow:4px 4px 0 #0b1f3170;z-index:5;pointer-events:none;color:#effff4;display:grid;gap:9px;font:12px/1.5 var(--mono)}#wifi-status strong{font-size:13px;color:#88ffe2;overflow-wrap:anywhere}#wifi-status progress{width:100%;height:9px;accent-color:#74ffe1}#wifi-status small{font-size:11px;color:#c5d8dc}#wifi-status[data-phase=contested]{border-color:#ff9956}#wifi-status[data-phase=contested] strong{color:#ffbe7b}#wifi-status[data-phase=cooldown]{border-color:#8ca4bf}
@media(max-width:600px){#wifi-status{top:166px;left:12px;right:12px;width:auto;max-width:none;padding:4px 8px;font-size:11px;gap:3px;grid-template-columns:1fr 76px;align-items:center}#wifi-status strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#wifi-status progress{height:6px}#wifi-status span,#wifi-status small{grid-column:1/-1}#wifi-status small{font-size:10px}.in-game:has(#wifi-status:not([hidden])) .kill-feed>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.in-game:has(#wifi-status:not([hidden])) .kill-feed>div:nth-child(n+2){display:none}}
@media(max-height:550px) and (min-width:701px){#wifi-status{top:104px;left:50%;right:auto;transform:translateX(-50%);width:320px;padding:6px 8px;font-size:10px;gap:3px;grid-template-columns:1fr 76px;align-items:center}#wifi-status strong{font-size:10px}#wifi-status progress{height:6px}#wifi-status span,#wifi-status small{grid-column:1/-1}#wifi-status small{font-size:9px}.event-banner{top:64px;right:auto;left:50%;transform:translateX(-50%);max-width:320px;font-size:10px}.in-game.spectating .spectator-banner{top:104px}}
.crosshair.hit{filter:drop-shadow(0 0 6px #ffc65e)}.crosshair.hit i,.crosshair.hit b{background:#ffdc64}

.loot-prompt{position:absolute;bottom:218px;left:50%;transform:translateX(-50%);min-width:230px;max-width:76vw;padding:12px 18px;border-left:5px solid var(--loot-color,#fff);background:#12273ded;box-shadow:4px 4px 0 #0b192860;color:#fff;pointer-events:none;z-index:5;display:grid;gap:5px}.loot-prompt span{font:10px var(--mono);color:var(--loot-color)}.loot-prompt strong{font:900 17px var(--display)}.loot-prompt small{font:10px var(--mono);color:#c6d8ec}
.damage-numbers{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}.damage-numbers span{position:absolute;left:0;top:-20px;color:#fff6a8;font:bold 30px var(--display);text-shadow:2px 2px #173149,-2px 0 #173149;will-change:transform}.damage-numbers .shield-damage{color:#73ddff}
.combat-banner{position:absolute;left:50%;top:64%;transform:translateX(-50%) rotate(-2deg);padding:10px 20px;background:#ffe26a;color:#142c4b;border:3px solid #142c4b;box-shadow:4px 4px 0 #ee60a3;font:900 21px var(--display);pointer-events:none;z-index:7}
.event-banner{position:absolute;top:300px;right:24px;max-width:200px;background:#583f96ed;border-left:4px solid #ffdc5b;color:#fff5ba;padding:9px 12px;font:11px var(--mono);pointer-events:none;z-index:4}
@media(max-width:600px){.loot-prompt{bottom:252px;min-width:176px;padding:8px 12px}.loot-prompt strong{font-size:14px}.combat-banner{font-size:15px;max-width:85vw}.event-banner{top:140px;right:12px;max-width:160px;font-size:9px}}

/* Match navigation belongs to the Escape menu; combat HUD stays in the arena. */
.game-menu-button{position:absolute;top:20px;right:24px;z-index:8;min-width:68px;min-height:44px;border:1px solid #fff1bc66;background:#172b35e8;color:#fff3cd;font:18px var(--mono);cursor:pointer}
.game-menu-button span{font:10px var(--mono);margin-left:6px}
#game-menu{width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;padding:26px;color:var(--ink);background:var(--paper);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--orange)}
#game-menu::backdrop{background:#0d2438b8;backdrop-filter:blur(4px)}
#game-menu .settings-heading{margin-bottom:12px}
#game-menu-note,.game-menu-hint{font:12px/1.6 var(--mono);margin:12px 0 18px}
#menu-room{overflow-wrap:anywhere}
.game-menu-actions{display:grid;gap:10px}
.game-menu-actions button{min-height:48px;padding:12px 16px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:700 13px var(--mono);text-align:left;cursor:pointer}
.game-menu-actions button:hover{background:var(--yellow)}
.game-menu-actions #resume-button{background:var(--orange);border-width:2px}
.game-menu-actions #exit-button{margin-top:8px;color:#a72e19}
.game-menu-actions button:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.game-menu-hint{margin:18px 0 0;color:var(--muted)}
#menu-invite-status:empty{display:none}
.game-menu-open .crosshair,.game-menu-open #look-hint{visibility:hidden}
.in-game.spectating .spectator-banner{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px 14px;white-space:normal}
.spectator-outcome{grid-column:1/-1;padding-bottom:8px;border-bottom:1px solid #fff1bc33}
.spectator-outcome strong{color:#ffb77d;max-width:none;font-size:18px}
.spectator-outcome span{font:10px var(--mono);margin-top:5px}
#elimination-source{max-width:320px;font:700 13px/1.5 var(--mono);color:#fff1bc;white-space:normal;overflow-wrap:anywhere}
.in-game.spectating .health-hud,.in-game.spectating .ability-hud,.in-game.spectating .inventory-hud,.in-game.spectating #touch-move,.in-game.spectating .touch-action-group{visibility:hidden;pointer-events:none}
@media(max-width:600px){.game-menu-button{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}.in-game.spectating .spectator-banner{gap:5px 8px}.spectator-outcome strong{font-size:16px}#game-menu{padding:20px}}
@media(max-height:550px){#game-menu{padding:16px 20px}.game-menu-actions{gap:6px}.game-menu-actions button{min-height:44px;padding:8px 12px}#game-menu .settings-heading{margin-bottom:0}#game-menu-note{margin:6px 0 10px}.game-menu-hint{margin-top:10px}}

/* The existing central reticle changes state; no second aiming marker. */
.crosshair.blocked i,.crosshair.blocked b{background:#ff8669}.crosshair.blocked{transform:translate(-50%,-50%) rotate(45deg)}
.muzzle-warning{position:absolute;left:50%;top:calc(50% + 24px);transform:translateX(-50%);font:10px var(--mono);color:#ffd7be;text-shadow:0 1px 3px #000;pointer-events:none;z-index:4}
.game-menu-open .muzzle-warning,.spectating .muzzle-warning{display:none}
#loot-confirm{pointer-events:auto;padding:9px 12px;border:1px solid #ffe59f;background:#f6c45a;color:#17293b;font:700 11px var(--mono);cursor:pointer}#loot-confirm:disabled{background:#314054;color:#cfdae6;border-color:#66778c;cursor:default}

@media(max-width:600px) and (min-height:520px){
  .loot-prompt{bottom:calc(346px + env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:none;min-width:0;box-sizing:border-box;padding:7px 9px;gap:2px 8px;grid-template-columns:minmax(0,1fr) 88px;align-items:center}
  .loot-prompt #loot-rarity{display:none}.loot-prompt strong{grid-column:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:16px}
  .loot-prompt small{grid-column:1;font-size:10px;line-height:12px;overflow-wrap:anywhere}
  .loot-prompt #loot-confirm{grid-column:2;grid-row:1 / 3;padding:9px 5px;font-size:10px;min-height:44px}
  .in-game:has(#loot-prompt[data-replacement="true"]:not([hidden])) .kill-feed{visibility:hidden}
  .in-game:has(#loot-prompt[data-replacement="true"]:not([hidden])) #toast[data-kind="pickup"]{visibility:hidden}
}

#controls-settings{margin:14px 0;border-top:1px solid #6f8294;padding-top:12px}#controls-settings summary{cursor:pointer;font-weight:800}
.binding-list{display:grid;gap:6px}.binding-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}
.binding-list button{min-width:88px;min-height:44px;border:1px solid #8da0ae;background:#18334a;color:#fff;font:700 11px var(--mono);padding:6px 10px;cursor:pointer}.binding-list button[aria-pressed="true"]{color:#17293b;background:#f6c45a;border-color:#ffe59f}
#binding-status{font-size:12px;line-height:1.5;min-height:1.5em}

.crosshair{scale:var(--spread,1)}

#settings-dialog .settings-heading{position:sticky;top:0;z-index:2;background:#fff5dc;padding:8px 0;box-shadow:0 6px 0 #fff5dc}