:root {
  --paper:#f5f5ee;
  --ink:#252d29;
  --muted:#7c8277;
  --line:#dedfd4;
  --lime:#c0ef71;
  --navy:#172f39;
  --green:#597a35
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased
}
button,input,a {
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer;
  color:inherit
}
button:disabled {
  cursor:not-allowed;
  opacity:.4
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid #6b993c;
  outline-offset:4px
}
button {
  border:0
}
a {
  color:inherit;
  text-decoration:none
}
button[hidden],[hidden] {
  display:none!important
}
.topbar {
  height:88px;
  margin:0 4.1%;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:27px;
  font-weight:800;
  letter-spacing:-1.3px
}
.brand-light {
  font-weight:400
}
.brand sup {
  font-size:8px;
  letter-spacing:1px;
  margin-left:8px;
  vertical-align:top;
  position:relative;
  top:3px;
  font-weight:600;
  background:#e6e9dc;
  padding:4px 5px;
  border-radius:3px
}
.brand-mark {
  display:grid;
  grid-template-columns:12px 12px;
  gap:3px;
  transform:rotate(-8deg)
}
.brand-mark i {
  width:12px;
  height:12px;
  border-radius:2px;
  background:#a4c65f
}
.brand-mark i:nth-child(2) {
  background:#2c4940
}
.brand-mark i:nth-child(3) {
  background:#d1dfae
}
.brand-mark i:nth-child(4) {
  background:#7a9a54
}
.topbar nav {
  display:flex;
  height:100%;
  gap:35px;
  align-items:center
}
.topbar nav a,.topbar nav button {
  font-size:12px;
  font-weight:600;
  height:100%;
  display:flex;
  align-items:center;
  background:none;
  position:relative;
  gap:16px
}
.nav-active:after {
  content:"";
  position:absolute;
  bottom:-1px;
  height:2px;
  background:var(--ink);
  left:0;
  right:0
}
.top-actions {
  display:flex;
  gap:25px;
  align-items:center
}
.connection {
  font-size:10px;
  color:#686e62;
  display:flex;
  gap:8px;
  align-items:center
}
.connection i,.live-dot {
  height:6px;
  width:6px;
  background:#91ac69;
  border-radius:50%;
  display:inline-block
}
.icon-button {
  width:32px;
  height:32px;
  border:1px solid var(--line);
  border-radius:50%;
  background:none;
  font-size:20px
}
.icon-button[aria-pressed=true] {
  background:var(--lime)
}
main {
  max-width:1600px;
  margin:auto;
  padding:0 4.1%
}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:38px 0 34px
}
.eyebrow {
  font-size:9px;
  font-weight:700;
  letter-spacing:1.9px;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px
}
.tiny-square {
  width:6px;
  height:6px;
  background:#89a65c
}
h1 {
  font-size:clamp(34px,3.8vw,57px);
  font-weight:650;
  letter-spacing:-2.7px;
  line-height:1.05;
  margin:0 0 14px
}
h1 span {
  color:#7d9956
}
.intro-copy {
  font-size:12px;
  color:#78806e;
  margin:0
}
.edition {
  display:flex;
  gap:17px;
  align-items:center;
  font-size:9px;
  letter-spacing:1.2px;
  font-weight:600;
  margin-right:2px
}
.edition div>span {
  display:block;
  color:#8d9484;
  font-size:8px;
  margin-top:8px;
  letter-spacing:1.3px
}
.orbit-icon {
  font-size:51px;
  line-height:1;
  color:#849965;
  display:inline-block
}
.game-layout {
  display:grid;
  grid-template-columns:204px minmax(0,1fr) 196px;
  gap:28px;
  align-items:start
}
.section-label {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:1.35px;
  font-weight:700;
  color:#7a8370;
  border-bottom:1px solid var(--line);
  padding:0 0 15px;
  margin-bottom:23px
}
.mission-heading {
  display:flex;
  align-items:center;
  gap:13px
}
.mission-number {
  font-size:39px;
  letter-spacing:-2px;
  font-weight:300;
  color:#8c9c71
}
.overline {
  font-size:8px;
  font-weight:700;
  letter-spacing:1.2px;
  margin:0 0 7px;
  display:block;
  color:#7d8573
}
h2 {
  font-size:16px;
  letter-spacing:-.4px;
  margin:0;
  font-weight:650
}
.small {
  font-size:11px;
  line-height:1.7
}
.muted {
  color:var(--muted)
}
.mission-selector {
  display:flex;
  gap:7px;
  margin-top:19px
}
.mission-selector button {
  background:#e8ebdf;
  border:1px solid transparent;
  width:49px;
  height:33px;
  border-radius:5px;
  font-size:10px
}
.mission-selector button[aria-pressed=true] {
  background:#e0e9ce;
  border-color:#96ab6e
}
.mission-selector span {
  font-size:11px
}
.divider {
  height:1px;
  background:var(--line);
  margin:23px 0
}
.objectives {
  list-style:none;
  padding:0;
  margin:20px 0 24px
}
.objectives li {
  display:flex;
  gap:11px;
  margin:0 0 18px
}
.objectives li>span {
  font-size:8px;
  color:#9da78f;
  border:1px solid #d5dbc8;
  width:21px;
  height:21px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0
}
.objectives strong {
  font-size:11px;
  font-weight:600
}
.objectives p {
  font-size:10px;
  color:var(--muted);
  line-height:1.65;
  margin:5px 0 0
}
.crew-card {
  background:#e9ecdf;
  border:1px solid #dfe4d2;
  border-radius:9px;
  padding:20px 16px 15px
}
.crew-card h3 {
  font-size:14px;
  letter-spacing:-.4px;
  margin:14px 0 8px
}
.crew-card p {
  color:#818976;
  font-size:10px;
  line-height:1.8;
  margin:0 0 18px
}
.crew-rovers {
  display:flex;
  gap:6px
}
.crew-rovers>span {
  display:block;
  width:21px;
  height:20px;
  background:#b0d06b;
  border:3px solid #2e483d;
  border-radius:5px;
  position:relative;
  transform:rotate(-8deg)
}
.crew-rovers>span:after {
  content:"";
  width:9px;
  height:5px;
  background:#2e483d;
  position:absolute;
  top:3px;
  left:3px;
  border-radius:2px
}
.crew-rovers>span:nth-child(2) {
  background:#79cada;
  transform:rotate(5deg)
}
.crew-rovers>span:nth-child(3) {
  background:#edb684;
  transform:rotate(-5deg)
}
.crew-rovers>span:nth-child(4) {
  background:#bd9ed5;
  transform:rotate(8deg)
}
.button {
  padding:13px 15px;
  border-radius:6px;
  font-size:11px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  transition:transform .15s,filter .15s
}
.button:hover {
  filter:brightness(.95);
  transform:translateY(-1px)
}
.button-dark {
  background:#2d3e32;
  color:#f8faef
}
.button-lime {
  background:var(--lime);
  color:#293b23
}
.crew-card .button {
  width:100%;
  font-size:10px;
  padding:12px 10px
}
.micro {
  font-size:7px;
  letter-spacing:1px;
  color:#909a7d;
  display:block;
  margin-top:12px;
  text-align:center
}
.board-toolbar {
  background:#e9ecdf;
  border:1px solid #dce1d0;
  border-bottom:0;
  border-radius:9px 9px 0 0;
  height:43px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  font-size:9px;
  letter-spacing:1px
}
.board-toolbar>div {
  display:flex;
  align-items:center;
  gap:9px
}
.board-toolbar strong {
  font-size:8px;
  font-weight:650
}
.toolbar-separator {
  color:#b4bf9e;
  margin:0 3px
}
.board-actions button {
  background:transparent;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:5px
}
.board-actions button span {
  font-size:9px;
  letter-spacing:0
}
.board-actions button[aria-pressed=true] {
  color:#57782a
}
.board-shell {
  background:#172f39;
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  border:6px solid #263d3f;
  border-top-width:5px;
  box-shadow:0 8px 18px #283e2012;
  border-radius:0 0 7px 7px
}
canvas {
  width:100%;
  height:100%;
  display:block;
  touch-action:none
}
.board-vignette {
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 35px #061e3540;
  pointer-events:none
}
.board-coordinates {
  position:absolute;
  inset:0;
  pointer-events:none;
  font-size:6px;
  letter-spacing:1.1px;
  color:#8db6bc80;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:6px
}
.game-overlay {
  position:absolute;
  inset:0;
  background:#0d252c72;
  backdrop-filter:blur(2px);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:15px
}
.overlay-card {
  text-align:center;
  background:#f4f4eefa;
  border:1px solid #fff9;
  border-radius:12px;
  padding:27px 32px 22px;
  box-shadow:0 15px 50px #06212a35;
  max-width:350px
}
.overlay-tag {
  font-size:7px;
  color:#859278;
  letter-spacing:1.7px;
  font-weight:650
}
.rover-portrait {
  height:48px;
  width:46px;
  background:#b9e278;
  border:5px solid #304e41;
  border-radius:12px;
  margin:25px auto 23px;
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
  box-shadow:8px 0 0 -4px #304e41,-8px 0 0 -4px #304e41;
  transform:rotate(-7deg);
  position:relative
}
.rover-portrait:before {
  content:"";
  position:absolute;
  left:13px;
  top:-15px;
  background:#304e41;
  height:13px;
  width:6px;
  border-radius:2px
}
.rover-eye {
  width:6px;
  height:9px;
  background:#304e41;
  border-radius:2px
}
.overlay-card h2 {
  font-size:30px;
  line-height:1.1;
  letter-spacing:-1.2px
}
.overlay-card p {
  font-size:11px;
  color:#838c78;
  line-height:1.8;
  margin:15px 0 20px
}
.overlay-card .button {
  width:100%;
  justify-content:center;
  font-size:12px;
  padding:14px
}
.overlay-hint {
  display:block;
  font-size:6px;
  letter-spacing:1px;
  color:#8d967f;
  margin-top:17px
}
.text-button {
  background:none;
  text-decoration:underline;
  text-underline-offset:4px;
  font-size:11px;
  padding:10px
}
.progress-panel {
  margin-top:19px
}
.progress-label {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.progress-label>div {
  display:flex;
  align-items:center;
  gap:7px
}
.progress-label>div strong {
  font-size:8px;
  letter-spacing:1px;
  color:#626f53;
  font-weight:650
}
.progress-label>span>strong {
  font-size:26px;
  font-weight:500;
  letter-spacing:-1px
}
.percent {
  font-size:12px;
  color:#8d997d;
  margin-left:2px
}
.progress-track {
  height:5px;
  background:#e0e5d5;
  border-radius:5px;
  overflow:hidden;
  margin:10px 0
}
.progress-track>div {
  width:0;
  height:100%;
  background:#a2c367;
  border-radius:5px;
  transition:width .2s
}
.progress-bottom {
  display:flex;
  justify-content:space-between;
  color:#8b947f;
  font-size:8px
}
.keyboard-hint {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:19px 0;
  font-size:8px;
  color:#8a917d;
  gap:5px
}
.keyboard-hint>div {
  display:flex;
  align-items:center;
  gap:3px
}
.keyboard-hint span {
  margin:0 7px
}
.keyboard-hint>span {
  font-size:7px;
  margin:0
}
kbd {
  font:9px "Segoe UI",sans-serif;
  border:1px solid #d7ddc9;
  background:#f1f3e8;
  padding:3px 4px;
  border-radius:3px;
  min-width:16px;
  text-align:center
}
.space-key {
  padding:3px 10px
}
.players {
  display:flex;
  flex-direction:column;
  gap:12px
}
.player-card {
  display:flex;
  align-items:center;
  gap:9px
}
.player-avatar {
  width:34px;
  height:34px;
  flex-shrink:0;
  background:#e7ecd8;
  border-radius:8px;
  display:flex;
  justify-content:center;
  align-items:center
}
.player-avatar>span {
  width:20px;
  height:19px;
  background:var(--player-color);
  border:3px solid #344d41;
  border-radius:5px;
  display:flex;
  gap:3px;
  align-items:center;
  justify-content:center
}
.player-avatar>span:before,.player-avatar>span:after {
  content:"";
  background:#344d41;
  width:3px;
  height:5px;
  border-radius:1px
}
.player-detail {
  flex:1;
  min-width:0
}
.player-detail strong {
  font-size:10px;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:115px
}
.you-tag {
  font-size:7px;
  padding:2px 4px;
  background:#e4e9d8;
  color:#8b9977;
  border-radius:3px;
  margin-left:5px;
  font-weight:500
}
.player-detail small {
  font-size:8px;
  color:#8a947d;
  display:block;
  margin-top:4px
}
.lives {
  font-size:10px;
  letter-spacing:2px;
  white-space:nowrap;
  color:#88a660
}
.lives .lost {
  color:#d8dccf
}
.invite-button {
  border:1px dashed #cdd5bd;
  border-radius:6px;
  background:transparent;
  width:100%;
  padding:11px 8px;
  color:#8a9678;
  font-size:10px;
  margin-top:18px
}
.legend {
  display:flex;
  flex-direction:column;
  gap:19px;
  margin-top:20px
}
.legend>div {
  display:flex;
  gap:10px;
  align-items:center
}
.tile-sample {
  width:28px;
  height:28px;
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0
}
.tile-sample.neutral {
  background:#c9d1c3;
  border:3px solid #afbba8;
  box-shadow:inset 0 0 0 1px #dae2d5
}
.tile-sample.crate {
  background:linear-gradient(45deg,transparent 45%,#8d633d 46%,#8d633d 54%,transparent 55%),linear-gradient(-45deg,#c59d6b 45%,#8d633d 46%,#8d633d 54%,#c59d6b 55%);
  border:3px solid #a87d4c
}
.tile-sample.sea {
  background:#345969;
  color:#7fabb6;
  font-size:28px
}
.tile-sample.monster {
  background:#cf7f88;
  border:4px solid #713c4c;
  color:#482f3f;
  font-size:20px;
  letter-spacing:2px;
  line-height:8px
}
.tile-sample.pickup {
  background:#efe2ab;
  color:#9e8131;
  border:1px solid #e4d494;
  font-size:25px
}
.legend p {
  margin:0
}
.legend strong {
  font-weight:600;
  font-size:10px;
  display:block
}
.legend small {
  font-size:9px;
  color:#929985;
  display:block;
  margin-top:4px;
  line-height:1.5
}
.field-note {
  background:#eeeee3;
  border:1px solid #e5e5d6;
  padding:17px 14px 14px;
  margin-top:26px;
  border-radius:2px;
  position:relative;
  transform:rotate(-1.5deg)
}
.field-note>span:first-child {
  font-size:7px;
  letter-spacing:1px;
  color:#9a9e85
}
.field-note p {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:13px;
  color:#8b9278;
  line-height:1.65;
  margin:13px 0 18px
}
.note-doodle {
  position:absolute;
  right:11px;
  bottom:2px;
  font-size:28px;
  color:#a6b08c;
  transform:rotate(-12deg)
}
.mission-stats {
  display:flex;
  justify-content:space-between;
  margin-top:24px
}
.mission-stats span {
  font-size:7px;
  letter-spacing:1px;
  color:#9a9f8c;
  display:block;
  margin-bottom:6px
}
.mission-stats strong {
  font-size:21px;
  font-weight:400;
  color:#758463;
  font-variant-numeric:tabular-nums
}
footer {
  border-top:1px solid var(--line);
  margin-top:23px;
  padding:20px 0 26px;
  display:flex;
  justify-content:space-between;
  font-size:7px;
  letter-spacing:1px;
  color:#949b86
}
.footer-cross {
  margin:0 10px;
  color:#91a174
}
.room-panel {
  padding:15px 0 0;
  text-align:center
}
.room-panel>button#copy-code {
  background:#e1e9d1;
  font-size:21px;
  letter-spacing:4px;
  padding:8px 12px;
  border-radius:4px;
  display:block;
  width:100%
}
.room-panel .text-button {
  font-size:9px;
  color:#8e7766
}
.ability-badges {
  position:absolute;
  top:10px;
  left:10px;
  display:flex;
  gap:5px;
  pointer-events:none
}
.ability-badges span {
  background:#172f39df;
  border:1px solid #c0ef7166;
  color:#e3f3c8;
  padding:6px 8px;
  border-radius:5px;
  font-size:9px
}
dialog {
  border:1px solid #d3ddc2;
  border-radius:14px;
  background:var(--paper);
  color:var(--ink);
  padding:34px;
  max-width:480px;
  width:calc(100% - 32px);
  max-height:85dvh;
  box-shadow:0 30px 100px #102e3560
}
dialog::backdrop {
  background:#102e3570;
  backdrop-filter:blur(5px)
}
dialog h2 {
  font-size:30px;
  letter-spacing:-1px;
  margin:0 0 15px
}
dialog p {
  font-size:12px;
  line-height:1.8
}
.close-dialog {
  position:absolute;
  top:12px;
  right:14px;
  background:none;
  font-size:25px;
  color:#819073
}
dialog label {
  font-size:9px;
  letter-spacing:1px;
  font-weight:650;
  display:block;
  margin:20px 0 8px
}
input {
  display:block;
  background:#fcfcf8;
  border:1px solid #d5ddc8;
  padding:12px;
  border-radius:6px;
  width:100%;
  color:#30402e;
  font-size:13px
}
#room-code {
  text-transform:uppercase;
  letter-spacing:3px
}
.input-note {
  font-size:9px!important;
  color:#8a957b
}
.form-error {
  color:#ab4651;
  font-size:11px;
  min-height:16px
}
.dialog-actions {
  display:flex;
  gap:10px
}
.dialog-actions .button {
  flex:1;
  justify-content:center;
  gap:4px
}
.guide-content {
  max-height:49dvh;
  overflow-y:auto;
  padding-right:8px;
  margin-bottom:20px
}
.guide-content h3 {
  font-size:12px;
  margin-bottom:6px
}
.guide-content p {
  color:#7b856d;
  font-size:11px;
  margin-top:0
}
.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translate(-50%,20px);
  background:#304534;
  color:#edf4e5;
  box-shadow:0 5px 30px #172f3933;
  padding:13px 20px;
  border-radius:8px;
  font-size:12px;
  max-width:90%;
  z-index:10;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
.touch-controls {
  display:none;
  align-items:center;
  justify-content:space-between;
  margin:18px 0 0;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none
}
.dpad {
  display:grid;
  grid-template-columns:40px 40px 40px;
  grid-template-rows:36px 36px 36px;
  gap:3px
}
.dpad button {
  background:#e2e8d5;
  border:1px solid #ccd7bb;
  border-radius:8px;
  font-size:22px;
  touch-action:none
}
.dpad button:active,.dpad button.held {
  background:#b4d57b
}
.dpad [data-control=up] {
  grid-column:2
}
.dpad [data-control=left] {
  grid-column:1;
  grid-row:2
}
.dpad>span {
  grid-column:2;
  grid-row:2;
  border-radius:50%;
  margin:12px;
  background:#a1b77f
}
.dpad [data-control=right] {
  grid-column:3;
  grid-row:2
}
.dpad [data-control=down] {
  grid-column:2;
  grid-row:3
}
.fire-button {
  width:81px;
  height:81px;
  background:#bddf85;
  border:4px solid #e0e9d0;
  border-radius:50%;
  font-size:31px;
  color:#48652e;
  touch-action:none
}
.fire-button:active,.fire-button.held {
  background:#a0c963
}
.fire-button>span {
  display:block;
  font-size:8px;
  letter-spacing:1px
}
.touch-tip {
  font-size:7px;
  letter-spacing:1px;
  color:#96a283
}
@media(min-width:1500px) {
  .game-layout {
    grid-template-columns:230px minmax(0,760px) 220px;
    gap:35px
  }
  .overlay-card {
    padding:35px 42px
  }
  .board-shell {
    max-height:760px
  }
}
@media(max-width:1150px) {
  .game-layout {
    grid-template-columns:170px minmax(0,1fr) 160px;
    gap:20px
  }
  .topbar {
    height:75px
  }
  .intro {
    padding:30px 0
  }
  .crew-card {
    padding:16px 12px
  }
  .crew-card h3 {
    font-size:12px
  }
  .legend small {
    font-size:8px
  }
  .legend>div {
    gap:7px
  }
  .legend {
    gap:16px
  }
  .player-card {
    gap:6px
  }
  .player-avatar {
    width:28px;
    height:30px
  }
  .player-detail strong {
    font-size:9px;
    max-width:85px
  }
  .lives {
    font-size:8px;
    letter-spacing:0
  }
  .field-note {
    padding:13px 10px
  }
  .keyboard-hint>span {
    display:none
  }
  .overlay-card {
    padding:20px 26px
  }
  .overlay-card h2 {
    font-size:26px
  }
  .rover-portrait {
    margin:20px auto
  }
  .overlay-hint {
    font-size:6px
  }
  .board-toolbar {
    padding:0 10px
  }
}
@media(max-width:900px) {
  .game-layout {
    grid-template-columns:160px minmax(0,1fr);
    gap:20px
  }
  .status-sidebar {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:15px;
    border-top:1px solid var(--line);
    padding-top:20px
  }
  .status-sidebar .section-label {
    grid-column:1;
    margin:0;
    border:0;
    padding:0
  }
  .players {
    grid-column:1;
    grid-row:2 / 4
  }
  .status-sidebar>.invite-button {
    grid-column:1;
    grid-row:4;
    margin:0
  }
  .status-sidebar .divider,.status-sidebar>.overline,.field-note {
    display:none
  }
  .legend {
    grid-column:2;
    grid-row:1 / 5;
    margin:0;
    gap:12px
  }
  .mission-stats {
    grid-column:3;
    grid-row:2;
    margin:0;
    gap:15px;
    justify-content:flex-start
  }
  .room-panel {
    grid-column:3;
    grid-row:3 / 5
  }
  .top-actions .connection {
    display:none
  }
  .edition {
    font-size:8px
  }
  .orbit-icon {
    font-size:40px
  }
  .overlay-card h2 {
    font-size:30px
  }
}
@media(max-width:620px) {
  .topbar {
    height:65px;
    margin:0 5%;
    gap:12px
  }
  .brand {
    font-size:24px
  }
  .brand sup {
    font-size:6px
  }
  .topbar nav {
    gap:0;
    margin-left:auto
  }
  .topbar nav a {
    display:none
  }
  .topbar nav button {
    font-size:10px;
    gap:5px
  }
  .top-actions {
    gap:0
  }
  .icon-button {
    width:29px;
    height:29px
  }
  main {
    padding:0 5%
  }
  .intro {
    padding:25px 0 22px
  }
  .eyebrow {
    font-size:7px;
    letter-spacing:1.2px;
    margin-bottom:10px
  }
  h1 {
    font-size:40px;
    letter-spacing:-2px;
    margin-bottom:10px
  }
  .intro-copy {
    font-size:10px;
    max-width:280px;
    line-height:1.7
  }
  .edition {
    display:none
  }
  .game-layout {
    display:flex;
    flex-direction:column;
    gap:0
  }
  .mission-sidebar {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:15px
  }
  .mission-sidebar>.section-label,.mission-sidebar>.small,.mission-sidebar>.divider,.mission-sidebar>.overline,.objectives,.crew-card {
    display:none
  }
  .mission-heading {
    gap:10px
  }
  .mission-number {
    font-size:30px
  }
  .mission-heading h2 {
    font-size:13px
  }
  .overline {
    font-size:6px
  }
  .mission-selector {
    margin:0;
    gap:5px
  }
  .mission-selector button {
    width:32px;
    height:28px;
    font-size:8px
  }
  .mission-selector span {
    display:none
  }
  .play-section {
    width:100%
  }
  .board-toolbar {
    height:38px;
    padding:0 12px;
    font-size:8px
  }
  .board-shell {
    border-width:4px
  }
  .overlay-card {
    padding:20px 22px;
    max-width:270px
  }
  .overlay-card h2 {
    font-size:26px
  }
  .overlay-card p {
    font-size:10px;
    margin:12px 0 16px
  }
  .rover-portrait {
    margin:18px auto 17px;
    width:37px;
    height:39px;
    border-width:4px
  }
  .rover-portrait:before {
    left:11px
  }
  .overlay-tag {
    font-size:6px
  }
  .overlay-hint {
    font-size:5px;
    margin-top:12px
  }
  .overlay-card .button {
    padding:12px;
    font-size:11px
  }
  .progress-panel {
    margin-top:14px
  }
  .progress-label>span>strong {
    font-size:24px
  }
  .progress-bottom {
    font-size:7px
  }
  .keyboard-hint {
    display:none
  }
  .touch-controls {
    display:flex
  }
  .status-sidebar {
    width:100%;
    margin-top:22px;
    grid-template-columns:1fr 1fr;
    gap:15px
  }
  .status-sidebar .section-label {
    grid-column:1 / -1;
    font-size:8px
  }
  .players {
    grid-column:1;
    grid-row:2 / 4
  }
  .status-sidebar>.invite-button {
    grid-row:4
  }
  .player-detail strong {
    max-width:125px;
    font-size:10px
  }
  .player-detail small {
    font-size:8px
  }
  .lives {
    font-size:10px
  }
  .legend {
    grid-column:2;
    grid-row:2 / 6;
    gap:14px;
    padding-left:9px;
    border-left:1px solid var(--line)
  }
  .legend strong {
    font-size:9px
  }
  .legend small {
    font-size:8px;
    max-width:115px
  }
  .tile-sample {
    width:24px;
    height:24px
  }
  .room-panel {
    grid-column:1;
    grid-row:5
  }
  .mission-stats {
    grid-column:1;
    grid-row:6;
    margin-top:10px
  }
  .status-sidebar>.invite-button {
    font-size:9px;
    padding:10px 5px
  }
  .player-card {
    gap:8px
  }
  .player-avatar {
    width:30px;
    height:30px
  }
  .player-detail {
    min-width:55px
  }
  footer {
    margin-top:20px;
    padding:18px 0 max(22px,env(safe-area-inset-bottom));
    line-height:1.8;
    gap:20px;
    font-size:6px
  }
  footer>span:last-child {
    text-align:right;
    max-width:110px
  }
  .footer-cross {
    margin:0 5px
  }
  .ability-badges {
    top:5px;
    left:5px
  }
  .ability-badges span {
    font-size:7px;
    padding:4px 6px
  }
  dialog {
    padding:27px 24px
  }
  .dialog-actions .button {
    font-size:10px
  }
  .topbar {
    padding-top:env(safe-area-inset-top);
    height:calc(65px + env(safe-area-inset-top))
  }
}
@media(pointer:coarse) {
  .touch-controls {
    display:flex
  }
  .keyboard-hint {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    transition:none!important;
    scroll-behavior:auto!important
  }
}
@media(min-width:1151px) {
  .game-layout {
    grid-template-columns:204px minmax(0,clamp(380px,calc(100dvh - 500px),760px)) 196px;
    justify-content:center
  }
}
@media(max-width:620px) {
  .game-active .intro {
    display:none
  }
  .game-active .mission-sidebar {
    margin-top:16px
  }
  .game-overlay {
    padding:10px
  }
  .overlay-card {
    padding:16px 20px
  }
  .overlay-card .rover-portrait {
    height:31px;
    width:32px;
    margin:12px auto
  }
  .overlay-card h2 {
    font-size:23px
  }
  .overlay-card p {
    margin:9px 0 12px;
    font-size:9px
  }
  .overlay-card .button {
    padding:11px
  }
  .overlay-hint {
    margin-top:10px
  }
  .overlay-tag {
    font-size:5px
  }
  .overlay-card .text-button {
    font-size:9px;
    padding:8px
  }
  .game-overlay:not([data-kind=ready]) .rover-portrait {
    display:none
  }
}

/* ---------- v0.2: economy, modes, HUD, garage and shop ---------- */
select {
  display:block;
  width:100%;
  background:#fcfcf8;
  border:1px solid #d5ddc8;
  padding:11px 10px;
  border-radius:6px;
  color:#30402e;
  font:inherit;
  font-size:13px
}
select:focus-visible {
  outline:3px solid #6b993c;
  outline-offset:2px
}
.wallet {
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 9px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  font-size:12px;
  white-space:nowrap
}
.chip i {
  font-style:normal;
  font-size:11px
}
.chip.coin i { color:#d5a514 }
.chip.iron i { color:#7d8a93 }
.chip.diamond i { color:#3fb6d8 }
.chip.token i { color:#6b993c }
.mode-tabs {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  background:#e8ebdf;
  padding:4px;
  border-radius:10px;
  margin-bottom:16px
}
.mode-tabs button {
  border:0;
  background:none;
  padding:8px 4px;
  border-radius:7px;
  font-size:11px;
  font-weight:650;
  letter-spacing:.5px
}
.mode-tabs button[aria-pressed=true] {
  background:#fff;
  box-shadow:0 2px 8px #172f3918
}
.mission-selector.level-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px
}
.level-grid button {
  position:relative;
  min-width:0
}
.level-grid button.cleared::after {
  content:"\2713";
  position:absolute;
  top:1px;
  right:4px;
  font-size:8px;
  color:var(--green)
}
.level-grid button span {
  display:block;
  font-size:9px;
  opacity:.6
}
.level-info {
  font-size:11px;
  color:var(--muted);
  line-height:1.6;
  margin:10px 0 18px
}
.lineup-card {
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:8px
}
.lineup {
  display:grid;
  gap:6px;
  margin:10px 0 12px
}
.lineup-chip {
  border:1px solid var(--line);
  border-left:5px solid var(--robot,#cfd5c4);
  border-radius:8px;
  background:#fff;
  padding:8px 10px;
  display:grid;
  gap:2px
}
.lineup-chip .overline {
  font-size:8px;
  letter-spacing:1px;
  color:var(--muted)
}
.lineup-chip small {
  color:var(--muted);
  font-size:10px
}
.overlay-rewards {
  list-style:none;
  padding:10px 14px;
  margin:0 0 16px;
  background:#f1f6e6;
  border-radius:8px;
  font-size:12px;
  line-height:1.8;
  text-align:left
}
.hud-bar {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:14px;
  margin-top:14px;
  align-items:start
}
.hud-bar .overline {
  display:block;
  font-size:8px;
  letter-spacing:1px;
  color:var(--muted);
  margin-bottom:4px
}
.hud-bar small,.hud-loot span {
  font-size:11px;
  color:var(--muted)
}
.hud-special strong {
  display:block;
  font-size:13px
}
.energy-track {
  height:9px;
  background:#e3e7da;
  border-radius:9px;
  overflow:hidden;
  margin-bottom:3px
}
#energy-fill {
  height:100%;
  width:100%;
  background:linear-gradient(90deg,#8fcf4f,#c0ef71);
  transition:width .15s
}
#energy-fill.low {
  background:linear-gradient(90deg,#e0564f,#f2a35b)
}
.mini-energy {
  height:4px;
  background:#e3e7da;
  border-radius:4px;
  overflow:hidden;
  margin-top:4px;
  width:100%
}
.mini-energy i {
  display:block;
  height:100%;
  background:var(--player-color,#8fcf4f)
}
.score-track {
  position:relative;
  height:12px;
  background:#e3e7da;
  border-radius:12px;
  overflow:hidden;
  margin:10px 0 6px
}
#score-green,#score-blue {
  position:absolute;
  top:0;
  bottom:0;
  transition:width .2s
}
#score-green {
  left:0;
  background:#7fd34e
}
#score-blue {
  right:0;
  background:#4aa8f0
}
#score-goal {
  position:absolute;
  inset:0
}
#score-goal::before,#score-goal::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:#172f39
}
#score-goal::before { left:60% }
#score-goal::after { left:40% }
.touch-actions {
  display:flex;
  align-items:center;
  gap:12px
}
.special-button {
  width:62px;
  height:62px;
  background:#d9c8f5;
  border:4px solid #ece4f8;
  border-radius:50%;
  font-size:22px;
  color:#5a3d8a;
  touch-action:none
}
.special-button>span {
  display:block;
  font-size:7px;
  letter-spacing:1px
}
.special-button.held { background:#c2a9ee }
.special-button.charging { opacity:.45 }
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.form-row label { margin-top:14px }
dialog.wide-dialog {
  max-width:920px
}
.robot-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:10px;
  margin:16px 0
}
.robot-card {
  display:flex;
  gap:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:12px
}
.robot-card.selected {
  border-color:var(--robot);
  box-shadow:0 0 0 2px var(--robot)
}
.robot-face {
  flex:none;
  width:46px;
  height:46px;
  border-radius:12px;
  background:var(--robot);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px
}
.robot-face i {
  width:8px;
  height:10px;
  border-radius:4px;
  background:#172f39
}
.robot-body { min-width:0; flex:1 }
.robot-body h3 {
  margin:0 0 2px;
  font-size:15px
}
.robot-body h3 small,.muted { color:var(--muted); font-weight:400 }
dialog .robot-body p {
  margin:0 0 4px;
  font-size:11px;
  line-height:1.5
}
.robot-power { font-weight:600 }
.robot-stats,dialog p.robot-stats {
  font-size:10px;
  color:#5f6d58
}
.robot-actions {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:8px
}
.robot-actions .button { padding:8px 12px; font-size:11px }
.chip-button {
  border:1px solid #cdd8bb;
  background:#f3f7ea;
  border-radius:999px;
  padding:5px 10px;
  font-size:11px;
  white-space:nowrap
}
.chip-button:not(:disabled):hover { background:#e2edcc }
.garage-detail {
  border-top:1px solid var(--line);
  padding-top:14px
}
.garage-detail h3 { margin:0 0 4px; font-size:17px }
.garage-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:10px
}
.garage-detail .overline {
  display:block;
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted);
  margin:8px 0 6px
}
.upgrade-row {
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:10px;
  padding:7px 0;
  border-bottom:1px dashed var(--line)
}
.upgrade-row small { display:block; font-size:10px }
.pips { display:flex; gap:3px }
.pips i {
  width:9px;
  height:9px;
  border-radius:2px;
  background:#e1e6d7
}
.pips i.on { background:#8fcf4f }
.gear-list { display:grid; gap:4px }
dialog label.gear-option {
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  font-size:12px;
  letter-spacing:0;
  font-weight:400
}
.gear-option input { width:auto; display:inline }
.shop-section h3 { font-size:14px; margin:18px 0 8px }
.shop-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:8px
}
.shop-item {
  display:grid;
  gap:4px;
  align-content:start;
  justify-items:start;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:10px 12px
}
.shop-item small { font-size:10px; line-height:1.5 }
.shop-item.owned { background:#f1f6e6 }
.shop-item.soon { opacity:.75 }
dialog p.small { font-size:11px }
.account-modes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  background:#e8ebdf;
  padding:4px;
  border-radius:9px;
  margin:16px 0
}
.account-modes button {
  background:none;
  border:0;
  border-radius:6px;
  padding:9px;
  font-size:12px;
  font-weight:650
}
.account-modes button[aria-pressed=true] {
  background:#fff;
  box-shadow:0 2px 8px #172f3918
}
#account-dialog form .button,#password-reset-dialog form .button { width:100%; justify-content:center }
#account-dialog form,#password-reset-dialog form { margin-top:14px }
#account-dialog form[hidden],#password-reset-dialog form[hidden] { display:none }
#account-dialog .input-note { line-height:1.6 }
.tile-sample.ice { background:#d6f0fb; border-color:#b5dced }
.tile-sample.bomb { background:radial-gradient(circle,#30363a 45%,#e9ece2 47%) }
.tile-sample.portal { background:radial-gradient(circle,#cba6ff 30%,#7448c9 70%) }
@media(max-width:900px) {
  .garage-columns { grid-template-columns:1fr }
  .hud-bar { grid-template-columns:1fr 1fr }
  .hud-loot { grid-column:1/-1 }
}
@media(max-width:620px) {
  .wallet .chip { padding:4px 7px; font-size:11px }
  dialog.wide-dialog { padding:24px 16px }
  .robot-grid { grid-template-columns:1fr }
  .form-row { grid-template-columns:1fr }
  .special-button { width:56px; height:56px }
  .mission-sidebar { display:block }
  .mission-sidebar .mode-tabs { margin-bottom:12px }
  .mission-sidebar .lineup { grid-template-columns:1fr 1fr }
  #connection-text,.brand sup { display:none }
  .topbar { height:auto!important; min-height:65px; flex-wrap:wrap; padding-bottom:8px }
  .top-actions { width:100%; justify-content:space-between }
  .top-actions .wallet { gap:4px; flex-wrap:nowrap }
  .wallet .chip { padding:3px 6px; font-size:10px; gap:3px }
}