/* Market match UI: ink, paper and a single vermilion accent. */
:root {
  --match-paper: #f5ebd5;
  --match-ink: #203b32;
  --match-green: #183e34;
  --match-red: #db6645;
  --match-gold: #d9aa58;
}

/* A match occupies the playfield; website chrome never competes with results. */
body:is(.in-match, .match-results) { overflow: hidden; background: var(--match-green); }
:is(.in-match, .match-results) .app-shell { padding: 0; max-width: none; }
:is(.in-match, .match-results) :is(.site-header, .sidebar, .game-heading, .controls-bar, .how-it-works, .site-footer) { display: none; }
:is(.in-match, .match-results) .workspace { display: block; margin: 0; }
:is(.in-match, .match-results) .game-section { position: fixed; inset: 0; height: 100dvh; }
:is(.in-match, .match-results) .game-card {
  width: 100%; height: 100%; min-height: 0; max-height: none;
  aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none;
}
:is(.in-match, .match-results) #leave-match-button { display: grid; }
.match-results .game-hud, .match-results .event-feed, .match-results .kill-feed { visibility: hidden; }

/* A few clear plates are enough; avoid a stack of translucent cards. */
.in-match .game-tools .icon-button {
  border: 2px solid var(--match-ink); border-radius: 5px;
  background: var(--match-paper); color: var(--match-ink);
  box-shadow: 0 3px 0 #142f2a; opacity: 1;
}
.in-match .game-tools .icon-button:hover:enabled { background: #fff8e7; }
.in-match .game-tools { margin-left: auto; }
.in-match .game-tools .icon-button[aria-pressed=true] { background: var(--match-gold); }
.in-match .hud-center {
  color: var(--match-paper); background: var(--match-green);
  border: 2px solid #0e2b24; border-bottom: 4px solid var(--match-gold);
  border-radius: 4px; box-shadow: 3px 3px 0 #10292145;
}
.in-match .hud-center > span { color: #e1d7be; font-weight: 800; }
.in-match .hud-center strong { color: #fff8e8; font-weight: 900; letter-spacing: 0; }
.in-match .hud-center strong.urgent { color: #ffad8c; }
.in-match .hud-location {
  background: var(--match-paper); border: 2px solid var(--match-green);
  border-radius: 3px; color: var(--match-ink); font-weight: 800;
  box-shadow: 3px 3px 0 #10292140; letter-spacing: 0;
}
.in-match .zone-status {
  border: 0; border-bottom: 3px solid var(--match-gold); border-radius: 0;
  color: #fff5dc; background: #183e34ed; box-shadow: none;
}
.in-match .zone-status small { color: #e0d2b5; }
.in-match .zone-status.inside { background: #f5ebd5; color: #203b32; border-bottom-color: #db6645; }
.in-match .zone-status.inside small { color: #58644a; }
.in-match .zone-status.survival { background: #183e34ed; color: #fff5dc; }
.in-match .zone-status.survival small { color: #e0d2b5; }
.in-match .self-status { display: none; }
.market-loading-note { display: none; }
#game-canvas[data-map-preparation="loading"] + .market-loading-note {
  display: block; position: absolute; z-index: 4; left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  border-radius: 5px; padding: 5px 10px; background: var(--match-green); color: var(--match-paper);
  font-size: 12px; white-space: nowrap; pointer-events: none;
}
#fullscreen-prompt:not([hidden]) {
  position: absolute; inset: 0; z-index: 8; display: grid; place-items: center;
  pointer-events: none;
}
.fullscreen-prompt-card {
  box-sizing: border-box; width: min(420px, calc(100% - 32px)); padding: 22px;
  color: var(--match-ink); background: var(--match-paper); text-align: center;
  border: 2px solid var(--match-ink); border-top: 5px solid var(--match-gold);
  border-radius: 5px; box-shadow: 0 4px 0 #10292150; pointer-events: auto;
}
.fullscreen-prompt-card h2 { margin: 0; font-size: clamp(20px, 3vw, 28px); }
.fullscreen-prompt-card p { margin: 8px 0 14px; }
#fullscreen-prompt-button { width: 100%; min-height: 44px; }
.fullscreen-prompt-card small { display: block; margin-top: 8px; }
#fullscreen-prompt:not([hidden]) ~ #game-overlay[data-kind=countdown] { visibility: hidden; }
@media (max-height: 520px) {
  .fullscreen-prompt-card { width: min(320px, calc(100% - 28px)); padding: 10px 16px; }
  .fullscreen-prompt-card p { margin: 4px 0 8px; }
}
/* Once fullscreen, offer pointer capture separately if the browser needs it. */
#look-hint {
  position: absolute; z-index: 5; left: 50%; top: auto; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%); margin: 0; min-height: 44px; width: max-content; max-width: 42%;
  padding: 6px 14px; border: 1px solid var(--match-ink); border-radius: 5px;
  background: var(--match-paper); color: var(--match-ink); box-shadow: 0 2px 0 #10292166;
  text-align: center; white-space: normal; word-break: keep-all; pointer-events: auto;
}
#look-hint strong, #look-hint span { display: block; line-height: 1.35; }
#look-hint strong { font-size: 14px; }
#look-hint span { margin-top: 2px; font-size: 12px; font-weight: 600; }
#look-hint:hover { background: #fff8e7; }
#look-hint:focus-visible { outline: 3px solid var(--match-gold); outline-offset: 3px; }
.menu-screen #menu-fullscreen-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 6px 11px; flex-shrink: 0;
  border: 1px solid var(--match-ink); border-radius: 3px;
  background: var(--match-green); color: #fff5dc; font-weight: 800;
}
.menu-screen #menu-fullscreen-button:hover:enabled { background: #285444; }
.menu-screen #menu-fullscreen-button svg { width: 17px; height: 17px; }
@media (max-width: 850px), (pointer: coarse) {
  .menu-screen #menu-fullscreen-button { display: inline-flex; min-height: 44px; font-size: 12px; }
  .menu-screen .menu-controls { max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; }
}
/* Unsupported native fullscreen still gets the whole available browser area. */
body.expanded-mobile-view { overflow: hidden; }
.expanded-mobile-view #game-shell { position: fixed; inset: 0; width: 100%; height: 100dvh; z-index: 50; overflow: auto; }
.expanded-mobile-view:not(.menu-screen) #game-shell .game-card { position: fixed; inset: 0; width: 100%; height: 100dvh; min-height: 0; border: 0; border-radius: 0; }
.in-match .touch-attack {
  box-shadow: 0 4px 0 #17382c, 0 0 0 2px #17382c;
  border-color: #fff0cb; color: #17382c;
}
.in-match #mobile-controls .action-key {
  border: 0; border-radius: 2px; border-bottom: 2px solid #d9aa58;
  background: #183e34; color: #fff1d2;
}

/* Death notices and replay share the same printed-sign visual language. */
.kill-feed li {
  border: 2px solid #17382c; border-left: 4px solid #91d2ff;
  border-radius: 3px; background: #183e34f7; box-shadow: 2px 2px 0 #122b2440;
}
.kill-feed .kill-npc { border-color: #303731; border-left-color: #a7aca8; background: #343a35f7; }
.death-replay {
  border: 2px solid #183e34; border-top: 5px solid #db6645;
  border-radius: 4px; background: #183e34f7; box-shadow: 4px 4px 0 #10292155;
}
.death-replay strong { font-weight: 900; }
.death-replay button { border: 2px solid #e3d4b6; border-radius: 3px; background: #f5ebd5; color: #203b32; }
.death-replay button:hover { background: #fff8e7; }
.death-replay button kbd { background: #203b32; color: #f5ebd5; }
.spectator-toolbar {
  border: 2px solid #183e34; border-top: 4px solid #d9aa58;
  border-radius: 4px; background: #183e34f5; box-shadow: 4px 4px 0 #10292155;
}
.spectator-controls button, .spectator-controls select {
  border: 1px solid #bbae91; border-radius: 3px; background: #f5ebd5; color: #203b32;
}
.spectator-controls select option { background: #f5ebd5; color: #203b32; }
.spectator-controls button[aria-pressed=true] { background: #db6645; color: #fff7e7; border-color: #db6645; }

/* Countdown is a starting signal over the world, never another modal form. */
#game-overlay { background: #102d254f; backdrop-filter: none; }
#game-overlay[data-kind=countdown] { background: #122f253d; pointer-events: none; }
#game-overlay[data-kind=countdown] #overlay-content {
  padding: 0; width: min(560px, 95%); min-width: 0; max-height: 100%;
  overflow: visible; background: none; border: 0; box-shadow: none;
  color: #fff5dc; pointer-events: none; text-align: center;
  text-shadow: 0 3px 0 #183e34, 0 5px 12px #122d2566;
}
#game-overlay[data-kind=countdown] .overlay-eyebrow {
  display: inline-block; padding: 7px 15px; margin: 0 0 8px;
  background: #183e34; border-bottom: 3px solid #d9aa58;
  color: #f5ebd5; font-size: 15px; letter-spacing: .5px;
}
#game-overlay[data-kind=countdown] h2 { font-size: clamp(24px, 4vw, 42px); color: #fff5dc; font-weight: 900; margin: 4px 0; }
#game-overlay[data-kind=countdown] .countdown-number {
  font-size: clamp(100px, 18vh, 180px); color: #f5d488;
  line-height: 1.05; font-weight: 900; margin: 4px 0;
  -webkit-text-stroke: 2px #183e34; text-shadow: 5px 6px 0 #183e34;
}
#game-overlay[data-kind=countdown] p { font-size: 15px; color: #fff5dc; line-height: 1.5; margin: 0; font-weight: 750; }
#game-overlay:not([data-kind=result]):not([data-kind=countdown]) .overlay-content {
  border: 3px solid #183e34; border-radius: 6px; background: #f5ebd5;
  box-shadow: 7px 7px 0 #10292166; color: #203b32;
}
#game-overlay:not([data-kind=result]):not([data-kind=countdown]) .overlay-content p { color: #53624d; font-size: 14px; }

/* Lobby and help use the existing market menu, with legible ink and firm edges. */
.menu-screen .sidebar { border-radius: 6px; box-shadow: 6px 6px 0 #10292170; background: #f5ebd5; }
.menu-screen .room-panel { padding: 22px; }
.menu-screen .room-code-label { color: #53624d; font-size: 12px; }
.menu-screen .code-copy strong { font-size: 34px; font-weight: 900; }
.menu-screen .room-topline .eyebrow { color: #375446; font-size: 12px; }
.menu-screen .room-rules { border-radius: 0; border-left: 3px solid #db6645; background: #e8dec5; }
.menu-screen .roster-heading { margin: 22px 0 10px; font-size: 14px; }
.menu-screen .player-list { gap: 0; }
.menu-screen .player-row { min-height: 39px; border: 0; border-bottom: 1px solid #cfc7b2; border-radius: 0; background: transparent; font-size: 13px; padding: 6px 0; }
.menu-screen .player-row.me { background: #e7dcc1; box-shadow: inset 3px 0 #db6645; padding-left: 7px; }
.menu-screen .player-name { flex: 1; min-width: 0; max-width: none; color: #286596; }
.menu-screen .player-avatar { border-radius: 2px; background: #ded9c3; color: #617262; }
.menu-screen .player-tag { flex-shrink: 0; color: #5d6c57; font-size: 11px; }
.menu-screen .ready-hint, .menu-screen #room-hint { color: #59674f; font-size: 11px; }
.menu-screen .button { border-radius: 4px; font-weight: 900; box-shadow: 0 3px 0 #17382c; }
.menu-screen .room-panel .button { min-height: 46px; font-size: 14px; }
/* Keep the primary action outside the participant list's scroll area. */
.menu-screen .sidebar:has(#room-panel:not([hidden])) {
  height: calc(100dvh - var(--menu-card-top) - 24px - env(safe-area-inset-bottom, 0px));
  max-height: 620px; overflow: hidden;
}
.menu-screen #room-panel:not([hidden]) { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.menu-screen #room-panel > * { flex-shrink: 0; }
.menu-screen #room-panel .room-code-label { margin-top: 8px; }
.menu-screen #room-panel .roster-heading { align-self: stretch; width: 100%; margin: 16px 0 8px; }
.menu-screen #room-panel .player-list { flex: 1; min-height: 0; max-height: none; margin: 0; overflow-y: auto; }
.menu-screen #room-panel .room-bottom { margin-top: 12px; }
.menu-screen #room-panel .room-bottom > .button { margin-top: 0; }
#rules-dialog {
  width: min(820px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  background: #f5ebd5; color: #203b32; border: 3px solid #183e34;
  border-radius: 6px; box-shadow: 8px 8px 0 #10292177; padding: 24px;
  scrollbar-color: #71816b #e6dcc5; scrollbar-width: thin;
}
#rules-dialog::backdrop { background: #102d25a6; backdrop-filter: none; }
#rules-dialog .eyebrow { color: #8b5034; letter-spacing: 1px; font-size: 12px; }
#rules-dialog h2 { font-size: 30px; font-weight: 900; letter-spacing: -1px; line-height: 1.35; margin: 12px 0; padding-right: 24px; word-break: keep-all; }
#rules-dialog .dialog-lead { font-size: 14px; color: #53624d; line-height: 1.7; }
#rules-dialog .rules-input-guide { padding: 12px 0; margin: 16px 0; border-block: 1px solid #bcb49d; }
#rules-dialog .rules-input-guide p { display: flex; gap: 12px; margin: 4px 0; font-size: 12px; line-height: 1.6; color: #435848; word-break: keep-all; }
#rules-dialog .rules-input-guide strong { flex: 0 0 48px; font-size: 12px; }
#rules-dialog .rules-input-guide small { display: block; font-size: 11px; color: #5c6b54; margin-top: 2px; }
#rules-dialog .rules-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; padding: 0; margin: 20px 0; }
#rules-dialog .rules-list li { margin: 0; padding: 0 0 0 32px; min-width: 0; }
#rules-dialog .rules-list li::before { top: 1px; width: 24px; color: #965531; font-size: 13px; font-style: normal; font-weight: 900; line-height: 24px; }
#rules-dialog .rules-list strong { font-size: 17px; color: #203b32; }
#rules-dialog .rules-list p { font-size: 13px; color: #53624d; line-height: 1.75; margin: 8px 0 0; word-break: keep-all; overflow-wrap: anywhere; }
#rules-dialog .rules-list strong { display: block; line-height: 1.45; word-break: keep-all; }
#rules-dialog .rules-footnote { font-size: 12px; color: #59674f; line-height: 1.65; border-top: 1px solid #bcb49d; padding-top: 15px; }
#rules-dialog .button { background: #db6645; border: 2px solid #183e34; border-radius: 4px; font-size: 15px; min-height: 48px; box-shadow: 0 3px 0 #183e34; }
#rules-dialog .dialog-close { background: #183e34; color: #f5ebd5; border-radius: 3px; width: 36px; height: 36px; }

@media (max-width: 850px), (pointer: coarse) {
  .in-match .game-tools .icon-button { box-shadow: 0 2px 0 #142f2a; }
  .in-match .hud-center { border-width: 1px; border-bottom-width: 3px; }
  .menu-screen .room-panel { padding: 16px; }
  .menu-screen .room-panel .player-row { min-height: 33px; font-size: 12px; }
  #rules-dialog { padding: 18px 22px; }
  #rules-dialog h2 { font-size: 24px; }
  #rules-dialog .rules-list { gap: 16px 22px; margin: 20px 0; }
  #rules-dialog .rules-list strong { font-size: 15px; }
  #rules-dialog .rules-list p { font-size: 12px; }
}
@media (min-width: 980px) and (pointer: fine) {
  .in-match .hud-center { position: absolute; left: 50%; top: 0; transform: translateX(-50%); margin: 0; }
}
@media (max-height: 760px) and (min-height: 521px) and (min-width: 851px) {
  .menu-screen #home-panel .form-divider { margin: 16px 0; }
  .menu-screen #home-panel .profile-avatar { height: 70px; }
  .menu-screen #home-panel .practice-section { margin-top: 12px; }
}
@media (max-width: 850px), (max-height: 520px) and (orientation: landscape) {
  .menu-screen .sidebar:has(#room-panel:not([hidden])) { height: calc(100dvh - var(--menu-card-top) - 16px - env(safe-area-inset-bottom, 0px)); }
  .menu-screen #room-panel { padding: 12px; }
  .menu-screen #room-panel :is(#room-hint, #room-rules) { display: none; }
  .menu-screen #room-panel .room-code-label { margin-top: 4px; font-size: 11px; }
  .menu-screen #room-panel .code-copy strong { font-size: 26px; }
  .menu-screen #room-panel .roster-heading { margin: 8px 0 6px; font-size: 12px; }
  .menu-screen #room-panel .room-bottom { margin-top: 8px; }
  .menu-screen #room-panel .ready-hint { margin: 0 0 8px; font-size: 11px; line-height: 1.4; }
  .menu-screen #room-panel .button { min-height: 44px; font-size: 13px; }
}
@media (max-width: 850px), (pointer: coarse) {
  .hud-center #round-label { font-size: 10px; }
  .menu-screen .practice-section summary { font-size: 12px; }
  .menu-screen .practice-button strong { font-size: 13px; }
  .menu-screen .practice-button small { font-size: 11px; line-height: 1.5; }
  .menu-screen .player-tag { font-size: 10px; }
}
@media (max-width: 700px) and (orientation: landscape) {
  .in-match .zone-status {
    left: calc(158px + env(safe-area-inset-left, 0px)); right: calc(214px + env(safe-area-inset-right, 0px));
    width: auto; min-width: 0; max-width: none; transform: none;
    padding: 6px 8px; gap: 6px;
  }
  .in-match .zone-status > div { display: flex; justify-content: center; align-items: center; gap: 8px; min-width: 0; }
  .in-match .zone-status #zone-label { font-size: 10px; line-height: 1.35; word-break: keep-all; }
  .in-match .zone-status #zone-total { display: none; }
  .in-match .zone-status #zone-points { flex-shrink: 0; font-size: 23px; }
  .in-match .zone-status .zone-arrow { font-size: 20px; }
}
@media (max-width: 600px) { #rules-dialog .rules-list { grid-template-columns: 1fr; } }
@media (max-height: 460px) and (orientation: landscape) {
  .menu-screen #room-panel :is(.room-code-label, .ready-hint) { display: none; }
  #game-overlay[data-kind=countdown] h2 { font-size: 25px; }
  #game-overlay[data-kind=countdown] .countdown-number { font-size: 100px; margin: 0; }
  #game-overlay[data-kind=countdown] p { font-size: 12px; }
  #game-overlay[data-kind=countdown] .overlay-eyebrow { font-size: 12px; padding: 5px 12px; }
}
@media (max-height: 350px) and (orientation: landscape) {
  .menu-screen #room-panel .room-topline { position: absolute; top: 12px; right: 12px; }
  .menu-screen #room-panel .room-topline .eyebrow { display: none; }
  .menu-screen #room-panel .code-copy { width: calc(100% - 68px); padding: 0; }
  .menu-screen #room-panel .code-copy strong { font-size: 24px; letter-spacing: 2px; }
}