:root {
  color: #2c2118;
  font-family: Nunito, Trebuchet MS, sans-serif;
  background: #8fd4f2;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

#view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

button, .card { font-family: inherit; }

#mute {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  z-index: 8;
  border: 2px solid #2c2118;
  background: #fff7e8;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 800;
  cursor: pointer;
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 48, 68, 0.28);
  z-index: 6;
}

.hidden { display: none !important; }

.card {
  width: min(460px, 100%);
  background: #fff7e8;
  border: 3px solid #2c2118;
  border-radius: 24px;
  padding: 22px 22px 18px;
  box-shadow: 6px 6px 0 #1d140e;
}

.card.narrow { width: min(360px, 100%); text-align: center; }

.eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2f8f4e;
}

h1, h2 { margin: 2px 0 0; line-height: 0.95; }

h1 { font-size: 40px; font-weight: 900; }

.tag {
  margin: 8px 0 0;
  font-weight: 800;
  color: #e23b4a;
}

.blurb, .hint {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: #5c4638;
}

.label {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 800;
}

.fruits, .stepper, .actions, .seats { display: flex; gap: 8px; align-items: center; }

.fruits { margin-top: 6px; }

.fruit {
  width: 46px;
  height: 46px;
  border: 3px solid transparent;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: #ddd center / cover;
}

.fruit.on { border-color: #2c2118; }

.fruit.melon { background: radial-gradient(circle at 40% 40%, #69d27a 0 46%, #1f7a38 47% 70%, #e23b4a 71%); }
.fruit.nanner { border-radius: 50% 50% 46% 46%; background: linear-gradient(#ffe56a, #e2a51a); }
.fruit.prickle { background: radial-gradient(circle at 50% 60%, #f0b429 0 58%, #217233 59%); }
.fruit.berry { border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 50% 40%, #fb7185, #9f1239); }
.fruit.orange { background: radial-gradient(circle at 40% 35%, #fdba74, #ea580c 72%); }
.fruit.burger { background: linear-gradient(#f6d36a 0 34%, #3aaa48 34% 46%, #c2410c 46% 68%, #e7b15a 68%); }

.stepper { margin-top: 14px; font-weight: 800; }

.stepper button, .actions button, #pause button, #result button {
  border: 3px solid #2c2118;
  background: #fff;
  color: #2c2118;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  cursor: pointer;
}

.actions button.primary,
#pause button.primary,
#result button.primary {
  background: #e23b4a;
  color: #fffaf0;
}

.stepper strong { min-width: 1ch; text-align: center; }

.seats {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.seat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f3e4c8;
  border-radius: 12px;
  padding: 6px 8px;
  font-size: 14px;
}

.seat strong { margin-left: auto; }

.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #2c2118;
}

.dot.melon { background: #3dae55; }
.dot.nanner { background: #ffd84a; }
.dot.prickle { background: #f0b429; }
.dot.berry { background: #e11d48; }
.dot.orange { background: #f97316; }
.dot.burger { background: #e7b15a; }

.actions { margin-top: 14px; }

.primary {
  background: #e23b4a;
  color: #fffaf0;
}

.controls {
  display: grid;
  gap: 4px;
  margin: 14px 0 0;
}

.controls div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; font-size: 13px; }

.controls dt { font-weight: 800; }

.controls dd { margin: 0; color: #5c4638; }

button:focus-visible { outline: 3px solid #2f8f4e; outline-offset: 2px; }

#menu.overlay { background: rgba(6, 22, 48, 0.62); }

.lobby {
  width: min(980px, 100%);
  max-height: calc(100% - 8px);
  overflow: auto;
  background: rgba(10, 32, 68, 0.94);
  color: #f5fbff;
  border: 4px solid #ffe14a;
  border-radius: 28px;
  padding: 16px 22px 14px;
  box-shadow: 8px 8px 0 #061525;
}

.lobby h1 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  font-size: 52px;
  letter-spacing: -1px;
}

.lobby h1 span:nth-child(1) { color: #ffe14a; }
.lobby h1 span:nth-child(2) { color: #ff7a1a; }
.lobby h1 span:nth-child(3) { color: #8dff7a; }

.lobby h2 {
  margin: 10px 0 8px;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9fd0ff;
}

.lobby .eyebrow { color: #ffd0bf; }
.lobby .hint { color: #d5e6f5; }

.portraits, .maps, .lobby-foot { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }

.portrait {
  width: 132px;
  border: 3px solid transparent;
  border-radius: 18px;
  background: #163e78;
  color: white;
  padding: 10px 8px 8px;
  cursor: pointer;
  font-weight: 800;
}

.portrait.on { border-color: #ffe14a; background: #1c4f98; }
.portrait .fruit { width: 62px; height: 62px; display: block; margin: 0 auto 6px; pointer-events: none; }
.portrait strong, .portrait em { display: block; }
.portrait strong { font-size: 14px; }
.portrait em { font-style: normal; color: #ffd0bf; font-size: 12px; font-weight: 700; }

.map-card {
  width: 168px;
  text-align: left;
  border: 3px solid transparent;
  border-radius: 16px;
  background: #12325f;
  color: white;
  padding: 8px;
  cursor: pointer;
  font-weight: 800;
}

.map-card.on { border-color: #ffe14a; }
.map-card strong, .map-card em { display: block; }
.map-card em { font-style: normal; color: #c5d8ee; font-size: 12px; margin-top: 2px; font-weight: 700; }

.preview {
  position: relative;
  display: block;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 6px;
  border: 2px solid rgba(0, 0, 0, 0.25);
}

.preview i {
  position: absolute;
  display: block;
  border-radius: 6px;
}

.preview.sky { background: linear-gradient(#79c7f5, #d7f3ff); }
.preview.sky i { background: #6dcc62; }
.preview.sky i:nth-child(1) { left: 8%; top: 16%; width: 28%; height: 30%; }
.preview.sky i:nth-child(2) { right: 8%; top: 18%; width: 26%; height: 28%; }
.preview.sky i:nth-child(3) { left: 36%; top: 38%; width: 28%; height: 28%; background: #e7c56a; }

.preview.forest { background: linear-gradient(#8fd18a, #d7e7a0); }
.preview.forest i:nth-child(1) { left: 18%; top: 30%; width: 18%; height: 40%; background: #5c8a3a; border-radius: 40% 40% 8px 8px; }
.preview.forest i:nth-child(2) { left: 42%; top: 42%; width: 28%; height: 12%; background: #c4a15a; }
.preview.forest i:nth-child(3) { right: 14%; top: 24%; width: 16%; height: 36%; background: #3d6b32; border-radius: 40%; }

.preview.snow { background: linear-gradient(#e7f4ff, #ffffff); }
.preview.snow i { background: #c5dff3; border-radius: 40%; }
.preview.snow i:nth-child(1) { left: 12%; top: 28%; width: 24%; height: 36%; }
.preview.snow i:nth-child(2) { left: 40%; top: 36%; width: 22%; height: 22%; background: #9ec8ea; }
.preview.snow i:nth-child(3) { right: 12%; top: 26%; width: 20%; height: 40%; }

.preview.lava { background: linear-gradient(#4a3028, #2a1814); }
.preview.lava i { background: #ff6a1a; }
.preview.lava i:nth-child(1) { left: 0; top: 40%; width: 100%; height: 16%; border-radius: 0; }
.preview.lava i:nth-child(2) { left: 18%; top: 18%; width: 18%; height: 18%; background: #6a4636; }
.preview.lava i:nth-child(3) { right: 16%; bottom: 14%; width: 22%; height: 16%; background: #ffb703; }

.lobby-foot { margin-top: 12px; align-items: center; }
.lobby .stepper { margin-top: 0; }
.lobby .stepper button, .lobby .actions button { background: #f7fbff; color: #1b2a3a; }
.lobby .actions button.primary { background: #e23b4a; color: #fffaf0; }
.lobby .seat { background: rgba(255, 255, 255, 0.1); color: white; }
.lobby .actions { margin-top: 0; margin-left: auto; }

.win-card { text-align: center; background: #102848; color: white; border-color: #ffe14a; }
.win-kicker { margin: 0; font-size: 64px; font-weight: 900; color: #ffe14a; line-height: 0.9; }
.win-card h2 { color: white; }
#result-scores { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
#result-scores li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 800;
}
#result-scores .pts { color: #ffe14a; font-size: 22px; }

body.guest-join .host-only { display: none; }

.facts, .pad-help { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.facts { list-style: none; }
.facts li, .pad-help div {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 800;
}
.pad-help div { flex: 1; min-width: 180px; }
.pad-help h2 { margin: 0 0 4px; }
.pad-help p { margin: 0; color: #d5e6f5; font-weight: 700; line-height: 1.35; }

.code-join { display: flex; gap: 6px; align-items: center; }
.code-join input {
  width: 5.2em;
  border: 3px solid #2c2118;
  border-radius: 999px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 800;
  text-transform: uppercase;
}
.code-join button {
  border: 3px solid #2c2118;
  background: #f7fbff;
  color: #1b2a3a;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  cursor: pointer;
}

.invite-card { width: min(420px, 100%); text-align: center; }
.invite-card h2 { color: #ffe14a; font-size: 28px; }
#qr { width: min(280px, 70vw); height: auto; background: white; border-radius: 16px; margin-top: 8px; }
.room-code { margin: 8px 0 0; font-size: 40px; letter-spacing: 0.18em; font-weight: 900; color: #ffe14a; }
.join-url { margin: 4px 0 0; word-break: break-all; color: #d5e6f5; font-size: 13px; }

.scores {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 120px);
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 800px) {
  .scores { top: 8px; left: 8px; transform: none; width: auto; max-width: calc(100% - 110px); gap: 4px; }
  .score { font-size: 12px; padding: 2px 8px 2px 4px; }
  .banner { font-size: 56px; }
}
.score {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff7e8;
  color: #2c2118;
  border: 2px solid #2c2118;
  border-radius: 999px;
  padding: 4px 10px 4px 6px;
  font-weight: 800;
}
.score b { margin-left: 4px; }
.banner {
  position: absolute;
  top: 36%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 72px;
  font-weight: 900;
  color: #fff7e8;
  text-shadow: 0 4px 0 #2c2118, 4px 0 0 #2c2118, -4px 0 0 #2c2118, 0 -4px 0 #2c2118;
  z-index: 3;
  pointer-events: none;
}
.touch {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 0 calc(16px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.stick {
  pointer-events: auto;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: rgba(16, 40, 72, 0.35);
  border: 3px solid rgba(255, 255, 255, 0.7);
  position: relative;
  touch-action: none;
}
.stick i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffe14a;
  transform: translate(-50%, -50%);
}
.touch-actions {
  display: grid;
  grid-template-columns: 74px 96px;
  grid-template-rows: 74px 74px;
  gap: 10px 12px;
  align-items: end;
  pointer-events: auto;
}
.touch-actions button {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 3px solid #2c2118;
  background: #fff7e8;
  color: #2c2118;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.05;
  touch-action: none;
  padding: 0;
}
.touch-actions button.held {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #2c2118;
}
#touch-slash { grid-column: 1; grid-row: 1; }
#touch-dash { grid-column: 1; grid-row: 2; }
#touch-throw {
  grid-column: 2;
  grid-row: 2;
  width: 96px;
  height: 96px;
  justify-self: end;
  background: #ff4b4b;
  color: white;
  border-color: #9d2030;
  box-shadow: 0 5px 0 #9d2030;
  font-size: 16px;
}

.map-screen {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  grid-template-rows: 1fr auto;
  align-items: center;
  pointer-events: none;
  padding: 24px;
}
.map-screen button { pointer-events: auto; }
#map-prev, #map-next {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid #2c2118;
  background: #fff8ea;
  box-shadow: 0 5px 0 #2c2118;
  font-size: 36px;
  font-weight: 900;
}
.map-title { text-align: center; align-self: start; grid-column: 2; }
#map-name {
  margin: 0;
  font-size: 54px;
  font-weight: 900;
  color: #ffe14a;
  -webkit-text-stroke: 6px #2c2118;
  paint-order: stroke fill;
}
#map-blurb { margin: 4px 0 0; font-weight: 800; color: #fffaf0; text-shadow: 0 2px 0 #2c2118; }
.map-actions { grid-column: 1 / -1; justify-content: center; }

#menu.stage {
  background: linear-gradient(to bottom, rgba(255, 248, 230, 0.28), transparent 28%, transparent 58%, rgba(44, 33, 24, 0.18));
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 18px 16px 16px;
}
#menu.stage .brand,
#menu.stage .dock { pointer-events: auto; }

.brand { text-align: center; padding: 0 64px; }
.brand .eyebrow {
  color: #fffaf0;
  text-shadow: 0 2px 0 #2c2118;
  letter-spacing: 0.18em;
}
.brand h1 {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(52px, 8vw, 84px);
  line-height: 0.85;
}
.brand h1 span {
  color: #ffe14a;
  -webkit-text-stroke: 7px #2c2118;
  paint-order: stroke fill;
  text-shadow: 0 7px 0 #e23b4a;
}
.brand h1 span:nth-child(2) { color: #fffaf0; text-shadow: 0 7px 0 #ff7a1a; }

.dock {
  width: min(980px, 100%);
  background: rgba(255, 248, 234, 0.9);
  color: #2c2118;
  border: 4px solid #2c2118;
  border-radius: 28px;
  box-shadow: 0 8px 0 #2c2118;
  padding: 10px 14px 8px;
}
.dock .hint, .dock .keys { color: #6b5344; text-align: center; }
.keys { margin: 8px 0 2px; font-size: 13px; font-weight: 800; }
.keys-touch { display: none; }

.portraits { display: none; }
.cast-tags { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.cast-tags button {
  position: absolute;
  transform: translate(-50%, 8px);
  pointer-events: auto;
  border: 3px solid #2c2118;
  border-radius: 999px;
  background: #fff8ea;
  color: #2c2118;
  font-weight: 900;
  box-shadow: 0 4px 0 #2c2118;
  padding: 4px 12px;
}
.cast-tags button.on {
  background: #ffe14a;
  transform: translate(-50%, 0);
  box-shadow: 0 6px 0 #e23b4a;
}
.portrait {
  width: 108px;
  background: #fff;
  color: #2c2118;
  border: 3px solid #2c2118;
  border-radius: 24px;
  box-shadow: 0 5px 0 #2c2118;
  transition: transform 0.15s ease;
}
.portrait strong { font-size: 15px; }
.portrait.on {
  background: #fff4c2;
  transform: translateY(-8px);
  box-shadow: 0 10px 0 #e23b4a;
  border-color: #e23b4a;
}
.portrait .fruit { width: 68px; height: 68px; border-width: 3px; }
.portrait.on .fruit { animation: bob 0.7s ease-in-out infinite; }
@keyframes bob {
  50% { transform: translateY(-7px) scale(1.06); }
}

.maps { justify-content: center; margin-top: 10px; }
.map-card {
  width: 108px;
  background: #fff;
  color: #2c2118;
  border: 3px solid #2c2118;
  border-radius: 18px;
  box-shadow: 0 4px 0 #2c2118;
  padding: 6px;
}
.map-card em { display: none; }
.map-card strong { font-size: 12px; text-align: center; margin-top: 4px; }
.map-card.on {
  background: #fff4c2;
  border-color: #e23b4a;
  transform: translateY(-4px);
  box-shadow: 0 8px 0 #e23b4a;
}
.preview { height: 52px; margin-bottom: 0; }

.mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.modes {
  display: flex;
  gap: 4px;
  background: #fff;
  border: 3px solid #2c2118;
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 4px 0 #2c2118;
}
.modes button {
  border: 0;
  background: transparent;
  color: #2c2118;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 900;
  box-shadow: none;
}
.modes button.on {
  background: #ff4b4b;
  color: #fffaf0;
}
.mode-blurb {
  margin: 8px 0 0;
  text-align: center;
  font-weight: 800;
  color: #6b5648;
}

.dock-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.dock .seats { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dock .seat {
  background: #fff;
  border: 3px solid #2c2118;
  border-radius: 999px;
  padding: 4px 10px;
  box-shadow: 0 3px 0 #2c2118;
}
.dock .seat:nth-child(1) { background: #ffd2d2; }
.dock .seat:nth-child(2) { background: #d7e6ff; }
.dock .seat:nth-child(3) { background: #d8f5c8; }
.dock .seat:nth-child(4) { background: #ffe7a8; }
.dock .seat.team-a { background: #ffd2d2; }
.dock .seat.team-b { background: #d7e6ff; }
.dock .stepper { margin: 0; }
.dock .actions { margin: 0 0 0 auto; }

.stepper button,
.actions button,
#pause button,
#result button,
.code-join button,
#invite button {
  border: 3px solid #2c2118;
  border-radius: 999px;
  box-shadow: 0 4px 0 #2c2118;
  background: #fff;
  color: #2c2118;
  font-weight: 900;
}
.actions button.primary,
#pause button.primary,
#result button.primary,
#play {
  background: #ff4b4b;
  color: #fffaf0;
  box-shadow: 0 5px 0 #9d2030;
  border-color: #9d2030;
  font-size: 20px;
  padding: 10px 26px;
}
.actions button:active,
.stepper button:active,
#play:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #2c2118;
}

#mute {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #2c2118;
  box-shadow: 0 4px 0 #2c2118;
  font-size: 20px;
}

#pause.overlay, #result.overlay, #invite.overlay {
  background: rgba(44, 33, 24, 0.28);
}
.invite-card {
  text-align: center;
  background: #fff8ea;
  color: #2c2118;
  border: 4px solid #2c2118;
  box-shadow: 0 8px 0 #2c2118;
}
.invite-extra { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 10px; }
#result.overlay { background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(44,33,24,0.18)); pointer-events: none; }
.win-card {
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #2c2118;
  pointer-events: auto;
  width: min(520px, 100%);
}
#result-scores li {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #fffaf0;
  text-shadow: 0 2px 0 #2c2118;
}
.win-kicker {
  margin: 0;
  font-size: 64px;
  font-weight: 900;
  color: #ffe14a;
  -webkit-text-stroke: 6px #2c2118;
  paint-order: stroke fill;
  text-shadow: 0 6px 0 #e23b4a;
  line-height: 0.9;
}
.win-card h2 {
  color: #fffaf0;
  font-size: 36px;
  -webkit-text-stroke: 4px #2c2118;
  paint-order: stroke fill;
}
#result-scores {
  display: flex;
  justify-content: center;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
#result-scores li {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fffaf0;
  text-shadow: 0 2px 0 #2c2118;
}
.pips { display: flex; gap: 4px; }
.pips i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #2c2118;
  background: #fff;
  display: block;
}
.pips i.on { background: #ffe14a; }
.room-code { color: #e23b4a; }
.join-url, .invite-card .hint, .invite-card h2 { color: #2c2118; }

.scores { top: calc(16px + env(safe-area-inset-top)); gap: 10px; }
.score {
  background: #fff8ea;
  border: 3px solid #2c2118;
  box-shadow: 0 4px 0 #2c2118;
  border-radius: 999px;
  padding: 4px 8px 4px 4px;
}
.score .dot { width: 28px; height: 28px; border-width: 3px; }
.score.p1 { background: #ffd2d2; }
.score.p2 { background: #d7e6ff; }
.score.p3 { background: #d8f5c8; }
.score.p4 { background: #ffe7a8; }
.score.clock { background: #fff8ea; padding: 4px 12px; color: #2c2118; font-weight: 900; }
.banner {
  font-size: 92px;
  color: #fffaf0;
  animation: pop 0.28s ease;
}
@keyframes pop {
  from { transform: scale(0.55) rotate(-4deg); }
  to { transform: scale(1) rotate(0deg); }
}
.stick {
  background: rgba(255, 248, 234, 0.45);
  border: 4px solid #2c2118;
  box-shadow: 0 5px 0 rgba(44, 33, 24, 0.35);
}
.stick i { border: 3px solid #2c2118; }
.touch-actions button { box-shadow: 0 5px 0 #2c2118; font-size: 13px; }
#touch-throw { box-shadow: 0 5px 0 #9d2030; }

@media (max-width: 900px), (pointer: coarse), (hover: none) {
  .keys-desk { display: none; }
  .keys-touch { display: block; }
}

@media (max-width: 760px) {
  #menu.stage {
    padding: calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));
    justify-content: space-between;
  }
  .brand { padding: 0 52px; }
  .brand .eyebrow { font-size: 10px; letter-spacing: 0.08em; }
  .brand h1 { font-size: clamp(34px, 11vw, 52px); gap: 8px; }
  .brand h1 span {
    -webkit-text-stroke: 4px #2c2118;
    text-shadow: 0 4px 0 #e23b4a;
  }
  .brand h1 span:nth-child(2) { text-shadow: 0 4px 0 #ff7a1a; }
  .dock {
    border-radius: 20px;
    padding: 8px 8px 6px;
    max-height: 48dvh;
    overflow: auto;
  }
  .mode-row { flex-direction: column; align-items: stretch; margin-top: 8px; }
  .modes { width: 100%; }
  .modes button { flex: 1; padding: 8px 6px; font-size: 13px; }
  .mode-blurb { font-size: 13px; }
  .dock-row { flex-direction: column; align-items: stretch; margin-top: 8px; }
  .dock .seats { justify-content: center; }
  .dock .seat { font-size: 13px; }
  .dock .actions {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .dock .actions #play { grid-column: 1 / -1; min-height: 48px; }
  .keys { font-size: 12px; }
  .map-screen {
    padding: calc(8px + env(safe-area-inset-top)) 8px calc(10px + env(safe-area-inset-bottom));
    grid-template-columns: 52px 1fr 52px;
  }
  #map-prev, #map-next { width: 48px; height: 48px; font-size: 28px; }
  #map-name { font-size: clamp(28px, 9vw, 42px); -webkit-text-stroke: 4px #2c2118; }
  #map-blurb { font-size: 13px; }
  .map-actions { gap: 8px; }
  .banner { font-size: clamp(42px, 16vw, 72px); top: 32%; }
  .scores { max-width: calc(100% - 64px); }
  .score { font-size: 12px; }
  .score .dot { width: 18px; height: 18px; }
  .win-kicker { font-size: 42px; -webkit-text-stroke: 4px #2c2118; }
  .win-card h2 { font-size: 26px; -webkit-text-stroke: 3px #2c2118; }
  #result-scores { gap: 8px; flex-wrap: wrap; }
  .overlay { padding: 12px; }
  .invite-card, .card {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: auto;
  }
  .invite-card .actions { flex-wrap: wrap; justify-content: center; }
  .room-code { font-size: 32px; letter-spacing: 0.12em; }
  .cast-tags button { padding: 3px 8px; font-size: 13px; }
  .stick { width: 118px; height: 118px; }
  .stick i { width: 48px; height: 48px; }
  .touch-actions { grid-template-columns: 68px 88px; grid-template-rows: 68px 68px; }
  .touch-actions button { width: 68px; height: 68px; font-size: 12px; }
  #touch-throw { width: 88px; height: 88px; font-size: 15px; }
}

@media (max-height: 480px) {
  .brand .eyebrow, .mode-blurb, .keys { display: none; }
  .brand h1 { font-size: 32px; }
  .dock { max-height: 46dvh; padding: 6px 8px; }
  .stick { width: 92px; height: 92px; }
  .stick i { width: 40px; height: 40px; }
  .touch-actions { grid-template-columns: 58px 74px; grid-template-rows: 58px 58px; gap: 6px; }
  .touch-actions button { width: 58px; height: 58px; font-size: 11px; }
  #touch-throw { width: 74px; height: 74px; }
  .banner { font-size: 40px; }
}