/* Packet War / Paketová válka © 2026 Jiří Ludvík. See LICENSE.md. */
:root {
  color-scheme: dark;
  --ink: #e9f5ee;
  --muted: #9baea5;
  --black: #09100d;
  --panel: #111c17;
  --line: #32463c;
  --green: #32e6a1;
  --yellow: #ffd166;
  --coral: #ff6b5f;
  --blue: #55b7ff;
  --hud-height: 72px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: #09100d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow-x: hidden;
}

body.is-android-app {
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

.app-header {
  padding-top: max(10px, env(safe-area-inset-top));
}

.app-title {
  cursor: default;
  text-decoration: none;
}

body.is-android-app input,
body.is-android-app button {
  -webkit-user-select: auto;
  user-select: auto;
}

.identity-status {
  display: block;
  margin-top: .35rem;
  color: var(--muted);
  font-size: .72rem;
}

.identity-status[data-state="verified"] { color: var(--green); }
.identity-status[data-state="offline"] { color: var(--yellow); }

button, input { font: inherit; }
button { cursor: pointer; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: .7rem 1rem;
  color: var(--black);
  background: var(--green);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.game-header {
  width: min(1440px, calc(100% - 2rem));
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.museum-link { display: inline-flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.museum-link strong, .museum-link small { display: block; }
.museum-link small { color: var(--muted); font-size: .78rem; }
.museum-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #07100c;
  background: var(--green);
  border: 1px solid #78f5c5;
  box-shadow: 4px 4px 0 #1b664b;
  font-weight: 900;
}

.brand-mark {
  width: 46px;
  height: 46px;
  border: 1px solid #365548;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 3px 3px 0 #153d2e;
}

.app-header-actions { display: flex; align-items: center; gap: .45rem; }
.language-button, .web-link-button {
  width: 42px;
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--ink);
  background: #111c17;
  font: 900 .78rem/1 ui-monospace, monospace;
  text-decoration: none;
}
.web-link-button { color: var(--green); font-size: 1.25rem; }
.language-button:focus-visible, .web-link-button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.game-shell { width: min(1440px, calc(100% - 2rem)); margin: 0 auto 1rem; }
.game-stage {
  position: relative;
  width: min(100%, calc((100vh - 88px) * 1.7778));
  width: min(100%, calc((100svh - 88px) * 1.7778));
  max-height: calc(100vh - 88px);
  max-height: calc(100svh - 88px);
  aspect-ratio: 16 / 9;
  min-height: 0;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid #42574d;
  background: #0c1712;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

.game-canvas { position: absolute; inset: 0; display: grid; place-items: center; }
.game-stage.is-playing .game-canvas { top: var(--hud-height); }
.game-canvas canvas { display: block; width: 100% !important; height: 100% !important; }

.start-panel, .result-panel {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .75fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  padding: clamp(2rem, 5vw, 5rem);
  background:
    linear-gradient(rgba(8,16,13,.25), rgba(8,16,13,.8)),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(67,101,84,.15) 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(67,101,84,.15) 48px),
    #0b1511;
  overflow: auto;
}

.start-copy h1 {
  max-width: 8ch;
  margin: .2rem 0 1rem;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(3.1rem, 5.4vw, 7.2rem);
  line-height: .82;
  letter-spacing: 0;
  text-transform: uppercase;
}
.start-copy > p:last-child { max-width: 34ch; color: var(--muted); font-size: 1.1rem; }
.version-label { margin: .65rem 0 0 !important; color: var(--green) !important; font: 800 .72rem/1 ui-monospace, monospace; }
.version-notice {
  max-width: 540px;
  margin-top: 1rem;
  padding: .8rem;
  border: 1px solid var(--yellow);
  background: rgba(255,209,102,.08);
}
.version-notice[data-state="offline-grace"] { border-color: var(--coral); background: rgba(255,107,95,.09); }
.version-notice strong { color: var(--yellow); font: 900 .78rem/1.3 ui-monospace, monospace; }
.version-notice[data-state="offline-grace"] strong { color: var(--coral); }
.version-notice p { margin: .35rem 0 .65rem !important; color: var(--ink) !important; font-size: .82rem !important; line-height: 1.45; }
.version-notice .command-button { min-height: 38px; padding-block: .45rem; }
.kicker { margin: 0; color: var(--yellow); font: 800 .73rem/1.3 ui-monospace, monospace; }

.setup-grid { align-self: center; border-top: 3px solid var(--green); background: rgba(17,28,23,.94); }
.identity-field, .mode-panel { padding: 1.1rem; border: 1px solid var(--line); border-top: 0; }
.identity-field label, .join-row label, .bot-count { display: block; margin-bottom: .4rem; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
input[type="text"], .identity-field input, .join-row input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #4c6659;
  border-radius: 0;
  color: var(--ink);
  background: #09110e;
  padding: .65rem .8rem;
}

.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.mode-tabs.is-solo-only { grid-template-columns: 1fr; }
.mode-tabs button {
  min-height: 45px;
  border: 1px solid var(--line);
  border-top: 0;
  color: var(--muted);
  background: #0b1511;
  font-weight: 900;
}
.mode-tabs button[aria-selected="true"] { color: #08110d; background: var(--green); }

fieldset { margin: 0 0 1rem; padding: 0; border: 0; }
legend { margin-bottom: .45rem; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.segmented label { min-width: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { min-height: 38px; display: grid; place-items: center; color: var(--muted); background: #0a1310; font-size: .78rem; font-weight: 800; }
.segmented label + label span { border-left: 1px solid var(--line); }
.segmented input:checked + span { color: #09100d; background: var(--yellow); }
.segmented input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: -3px; }

input[type="range"] { width: 100%; accent-color: var(--green); }
.bot-count output { float: right; color: var(--ink); }

.command-button, .join-row button {
  min-height: 44px;
  border: 1px solid #607b6d;
  border-radius: 0;
  color: var(--ink);
  background: #15241d;
  padding: .65rem .85rem;
  font-weight: 900;
}
.command-button.primary { color: #06100c; border-color: var(--green); background: var(--green); }
.mode-panel > .command-button { width: 100%; margin-top: 1rem; }
.command-button:disabled { cursor: wait; opacity: .55; }
.online-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.join-row { margin-top: 1rem; }
.join-row > div { display: grid; grid-template-columns: 1fr auto; }
.server-line { display: flex; justify-content: space-between; gap: .7rem; margin: 0 0 1rem; color: var(--muted); font-size: .74rem; }
.server-line code { color: var(--green); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-status { min-height: 2.5em; margin: .8rem 0 0; color: var(--muted); font-size: .78rem; }
.online-status.is-error { color: #ff958c; }

.controls-strip {
  position: absolute;
  left: clamp(2rem, 5vw, 5rem);
  right: clamp(2rem, 5vw, 5rem);
  bottom: 1.2rem;
  display: flex;
  gap: 1.3rem;
  color: var(--muted);
  font-size: .76rem;
}
kbd { padding: .2rem .35rem; border: 1px solid #52685d; color: var(--ink); background: #17241e; font-family: ui-monospace, monospace; }

.hud {
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  height: var(--hud-height);
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  pointer-events: none;
  border-bottom: 1px solid #294437;
  background: #07100df5;
}
.hud:not([hidden]) { display: flex; }
.hud-cluster { display: flex; gap: .55rem; }
.hud-cluster > div { min-width: 76px; padding: .3rem .55rem; border-left: 3px solid var(--green); background: rgba(8,16,13,.8); }
.hud small, .hud strong { display: block; }
.hud small { color: var(--muted); font-size: .65rem; text-transform: uppercase; }
.hud-center { position: absolute; left: 50%; text-align: center; transform: translateX(-50%); }
.hud-center strong, .hud-center span { display: block; }
.hud-center strong { color: var(--yellow); font-size: .7rem; }
.hud-center span { font: 900 1.3rem ui-monospace, monospace; }
.hud-actions { display: flex; gap: .4rem; pointer-events: auto; }
.run-modifier-status {
  position: absolute;
  top: 66px;
  left: 50%;
  padding: .35rem .55rem;
  color: #07100d;
  background: var(--yellow);
  transform: translateX(-50%);
  font: 900 .7rem/1 ui-monospace, monospace;
  white-space: nowrap;
}
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); color: var(--ink); background: rgba(8,16,13,.82); font-size: 1.5rem; pointer-events: auto; }
.bonus-help-button { font-weight: 900; }

.bonus-help-dialog {
  width: min(520px, calc(100% - 2rem));
  max-height: calc(100svh - 2rem);
  padding: 0;
  border: 1px solid #60796c;
  border-top: 3px solid var(--green);
  border-radius: 0;
  color: var(--ink);
  background: #0d1813;
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
}
.bonus-help-dialog::backdrop { background: rgba(2,8,5,.78); }
.bonus-help-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.bonus-help-head h2 { margin: .2rem 0 0; font-size: 1.45rem; }
.bonus-list { margin: 0; padding: 0; list-style: none; }
.bonus-list li { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: .85rem; min-height: 70px; padding: .75rem 1rem; }
.bonus-list li + li { border-top: 1px solid var(--line); }
.bonus-list strong, .bonus-list span { display: block; }
.bonus-list li div span { margin-top: .15rem; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.bonus-symbol { width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid currentColor; background: rgba(255,255,255,.04); font: 900 1.25rem ui-monospace, monospace; }
.bonus-symbol.health { color: var(--green); }
.bonus-symbol.rapid { color: var(--yellow); }
.bonus-symbol.turbo { color: var(--blue); }
.bonus-symbol.spread { color: #c397ff; }

.scoreboard {
  position: absolute;
  top: calc(var(--hud-height) + 10px);
  right: 1rem;
  z-index: 6;
  width: min(320px, calc(100% - 2rem));
  border: 1px solid #60796c;
  background: rgba(8,16,13,.94);
}
.scoreboard-head { display: flex; justify-content: space-between; padding: .65rem .8rem; border-bottom: 1px solid var(--line); }
.scoreboard-head span { color: var(--green); font: 700 .75rem ui-monospace, monospace; }
.scoreboard ol { margin: 0; padding: .4rem .8rem .7rem; list-style-position: inside; }
.scoreboard li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .3rem 0; color: var(--muted); }
.scoreboard li.is-player { color: var(--ink); font-weight: 800; }

.result-panel { z-index: 8; grid-template-columns: 1fr; align-content: start; justify-items: center; padding: clamp(1rem, 4vh, 2rem); overflow: auto; text-align: center; background: rgba(7,15,12,.94); }
.result-panel h2 { margin: .4rem 0; font-size: clamp(2.5rem, 6vw, 5rem); }
.result-panel p:not(.kicker) { color: var(--muted); }
.result-panel .command-button { min-width: 220px; margin-top: .5rem; }
.winner-wall { width: min(520px, 100%); margin: .7rem 0; border: 1px solid #60796c; background: #0a1310; text-align: left; }
.winner-wall-head { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .75rem; border-bottom: 1px solid var(--line); }
.winner-wall-head h3 { margin: 0; font-size: 1rem; }
.winner-wall-tabs { display: grid; grid-template-columns: repeat(3, minmax(58px, 1fr)); border: 1px solid #60796c; }
.winner-wall-tabs button { min-width: 58px; min-height: 28px; padding: .3rem .45rem; border: 0; border-radius: 0; color: var(--muted); background: #101e18; box-shadow: none; font: 800 .66rem/1 ui-monospace, monospace; letter-spacing: 0; }
.winner-wall-tabs button + button { border-left: 1px solid #60796c; }
.winner-wall-tabs button[aria-selected="true"] { color: #07100d; background: var(--green); }
.winner-wall-tabs button[data-winner-view="cheaters"] { font-size: .58rem; }
.winner-wall-tabs button[data-winner-view="cheaters"][aria-selected="true"] { color: #190606; background: var(--coral); }
.winner-wall-tabs button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--yellow); outline-offset: 2px; }
.winner-wall ol { max-height: 190px; margin: 0; padding: .35rem .75rem .45rem 2.25rem; overflow: auto; }
.winner-wall li { padding: .35rem 0; color: var(--muted); }
.winner-wall li::marker { color: var(--yellow); font: 800 .75rem ui-monospace, monospace; }
.winner-wall li.is-cheater::marker, .winner-wall li.is-cheater .winner-wall-score { color: var(--coral); }
.winner-wall-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.winner-wall-row strong, .winner-wall-row small { display: block; }
.winner-wall-row strong { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.winner-wall-row strong.is-verified::after {
  content: "\2713";
  display: inline-grid;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: .38rem;
  place-items: center;
  border: 1px solid var(--green);
  color: var(--green);
  font: 900 .7rem/1 ui-monospace, monospace;
  vertical-align: .08rem;
}
.winner-wall-row small { margin-top: .1rem; color: var(--muted); font-size: .68rem; }
.winner-wall-score { color: var(--yellow); font: 900 1rem ui-monospace, monospace; }
.winner-wall > p { margin: 0; padding: .8rem; text-align: center; }
.leaderboard-submit-status { border-top: 1px solid var(--line); font: 800 .72rem/1.45 ui-monospace, monospace; }
.leaderboard-submit-status[data-state="sending"] { color: var(--yellow) !important; }
.leaderboard-submit-status[data-state="saved"] { color: var(--green) !important; }
.leaderboard-submit-status[data-state="queued"] { color: #ffd166 !important; }
.leaderboard-submit-status[data-state="error"] { color: #ff8d83 !important; }
.start-winner-wall { width: min(460px, 100%); margin: 1.25rem 0 0; }
.start-winner-wall ol { max-height: clamp(110px, 21vh, 190px); }

.touch-controls { position: absolute; inset: auto 0 max(1rem, env(safe-area-inset-bottom)); z-index: 5; justify-content: flex-start; align-items: end; padding: 1rem; pointer-events: none; }
.touch-controls > * { pointer-events: auto; }
.touch-pad { width: 118px; height: 118px; border: 2px solid rgba(233,245,238,.3); border-radius: 50%; background: rgba(8,16,13,.55); touch-action: none; }
.touch-pad span { display: block; width: 46px; height: 46px; margin: 34px; border-radius: 50%; background: rgba(50,230,161,.6); transform: translate(var(--tx, 0), var(--ty, 0)); }
.game-dialog {
  width: min(430px, calc(100% - 2rem));
  padding: 1.35rem;
  border: 1px solid #60796c;
  border-top: 4px solid var(--green);
  border-radius: 0;
  color: var(--ink);
  background: #0d1813;
  box-shadow: 0 24px 70px rgba(0,0,0,.72);
  text-align: center;
}
.game-dialog::backdrop { background: rgba(2,8,5,.82); }
.game-dialog h2 { margin: .45rem 0; font-size: 1.65rem; }
.game-dialog > p:not(.kicker) { color: var(--muted); line-height: 1.5; }
.version-dialog[data-state="expired"] { border-top-color: var(--coral); }
.version-dialog[data-state="expired"] .kicker { color: var(--coral); }
.version-dialog[data-state="expired"] .dialog-actions { grid-template-columns: 1fr; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: 1.1rem; }
.dialog-actions .command-button { min-width: 0; }
.game-footer { width: min(1440px, calc(100% - 2rem)); display: flex; justify-content: center; gap: .55rem; flex-wrap: wrap; margin: 0 auto 1rem; color: var(--muted); font-size: .75rem; }
.game-footer a { color: var(--ink); }
.app-legal-footer { padding-bottom: env(safe-area-inset-bottom); }
.app-legal-footer a { color: var(--muted); }

.retro-cookie-panel {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 2000;
  display: none;
  width: min(720px, calc(100% - 1rem));
  max-height: calc(100dvh - 1rem);
  overflow: auto;
  transform: translateX(-50%);
  border: 3px solid #60796c;
  border-top-color: var(--green);
  color: var(--ink);
  background: #0d1813;
  box-shadow: 8px 8px 0 rgba(0,0,0,.55), 0 24px 70px rgba(0,0,0,.65);
}
.retro-cookie-panel.is-visible { display: block; }
.retro-cookie-titlebar { display: flex; align-items: center; justify-content: space-between; padding: .35rem .5rem; color: #07100c; background: var(--green); }
.retro-cookie-titlebar button { width: 30px; min-height: 28px; padding: 0; border: 1px solid #07100c; color: #07100c; background: #d8fff0; font-weight: 900; }
.retro-cookie-main { display: grid; grid-template-columns: 58px 1fr; gap: .75rem; align-items: center; padding: .8rem; }
.retro-cookie-main h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.retro-cookie-main p { margin: 0; color: var(--muted); font-size: .82rem; }
.retro-cookie-icon { width: 52px; height: 52px; display: grid; place-items: center; border: 2px solid #60796c; color: var(--green); background: #050a08; font: 900 1.1rem/1 ui-monospace, monospace; }
.retro-cookie-settings { margin: 0 .8rem .8rem; padding: .7rem; border: 1px solid #60796c; background: #111c17; }
.retro-cookie-settings label { display: flex; align-items: center; gap: .45rem; margin: .4rem 0 .1rem; }
.retro-cookie-settings input { width: auto; min-height: auto; }
.retro-cookie-settings small { display: block; margin-left: 1.5rem; color: var(--muted); }
.retro-cookie-provider { font-size: .75rem; }
.retro-cookie-provider a { color: var(--green); }
.retro-cookie-actions { display: flex; justify-content: flex-end; gap: .45rem; flex-wrap: wrap; padding: .6rem .8rem; border-top: 1px solid var(--line); }
.retro-cookie-actions button { min-height: 38px; padding: .45rem .7rem; border: 1px solid #60796c; color: var(--ink); background: #15241d; font-weight: 900; }
.retro-cookie-actions [data-cookie-accept], .retro-cookie-actions [data-cookie-save] { color: #06100c; border-color: var(--green); background: var(--green); }

.museum-note { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-top: 0; }
.museum-note > div { min-height: 150px; padding: 1.1rem; }
.museum-note > div + div { border-left: 1px solid var(--line); }
.museum-note strong { display: block; margin: .2rem 0; }
.museum-note p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.note-index { color: var(--green); font: 800 .75rem ui-monospace, monospace; }

[hidden] { display: none !important; }

@media (hover: none) and (pointer: coarse) {
  .touch-controls:not([hidden]) { display: flex; }
  .game-header { min-height: 64px; }
  .game-shell { width: 100%; margin-bottom: 0; }
  .game-stage {
    width: 100%;
    height: calc(100dvh - 64px);
    max-height: none;
    aspect-ratio: auto;
    border-left: 0;
    border-right: 0;
  }
}

@media (max-width: 760px) {
  .game-stage { width: 100%; height: calc(100dvh - 64px); min-height: 0; aspect-ratio: auto; }
  .start-panel { grid-template-columns: 1fr; align-content: start; gap: 1.4rem; overflow-x: hidden; overflow-y: auto; padding: 2rem 1rem 5rem; }
  .start-copy h1 { font-size: clamp(2.8rem, 14vw, 5rem); }
  .start-copy > p:last-child { margin-bottom: 0; }
  .setup-grid { width: 100%; }
  .controls-strip { left: 1rem; right: 1rem; flex-wrap: wrap; }
  .museum-note { grid-template-columns: 1fr; }
  .museum-note > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-height: 720px) and (min-width: 761px) and (hover: hover) {
  .game-header { min-height: 58px; }
  .game-stage {
    width: min(100%, calc((100vh - 70px) * 1.7778));
    width: min(100%, calc((100svh - 70px) * 1.7778));
    max-height: calc(100vh - 70px);
    max-height: calc(100svh - 70px);
  }
  .start-panel { gap: 2rem; padding: 1.1rem 2rem 3.8rem; }
  .start-copy h1 { font-size: 3.25rem; }
  .start-copy > p:last-child { margin-bottom: 0; font-size: .9rem; }
  .identity-field, .mode-panel { padding: .7rem; }
  .controls-strip { left: 2rem; right: 2rem; bottom: .65rem; }
}

@media (max-width: 540px) {
  .game-header { width: 100%; min-height: 64px; padding-inline: .75rem; }
  .museum-link small { display: none; }
  .app-header-actions { gap: .3rem; }
  .game-shell { width: 100%; margin-bottom: 0; }
  .game-stage { min-height: calc(100dvh - 64px); border-left: 0; border-right: 0; }
  .controls-strip { display: none; }
  .online-actions { grid-template-columns: 1fr; }
  .hud { padding-inline: .55rem; }
  .hud-cluster { gap: .3rem; }
  .hud-cluster > div { min-width: 54px; padding-inline: .35rem; }
  .hud-center strong { display: none; }
  .hud-center span { font-size: 1.15rem; }
  .hud-actions { gap: .25rem; }
  .hud-actions .icon-button { width: 38px; height: 38px; }
  .retro-cookie-main { grid-template-columns: 1fr; }
  .retro-cookie-icon { display: none; }
  .retro-cookie-actions { display: grid; grid-template-columns: 1fr; }
  .retro-cookie-actions button { width: 100%; }
}

.game-project-links { display: flex; align-items: center; gap: .85rem; }
.game-project-links a { color: #d9a9ff; font-size: .78rem; text-decoration: underline; }
.connection-pill {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .7rem;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .8rem;
}
.connection-pill span { width: 9px; height: 9px; border-radius: 50%; background: #63736b; }
.connection-pill[data-state="online"] span { background: var(--green); box-shadow: 0 0 14px rgba(50,230,161,.7); }
.connection-pill[data-state="error"] span { background: var(--coral); }
.game-footer { width: min(1440px, calc(100% - 2rem)); display: flex; justify-content: center; gap: .55rem; flex-wrap: wrap; margin: 0 auto 1rem; color: var(--muted); font-size: .75rem; }
.game-footer a { color: var(--ink); }

@media (max-width: 760px) {
  .game-project-links { display: none; }
  .connection-pill { display: none; }
}

@media (max-width: 390px) {
  .museum-link small { display: none; }
}