:root {
  --sky: #78c4ee;
  --grass: #87a95b;
  --wood: #9d6d3d;
  --wood-dark: #604126;
  --paper: #fff4d5;
  --ink: #2f241c;
  --blue: #164f72;
  --red: #d94830;
  --gold: #e9b64a;
  --panel: #f7ead0;
  --shadow: rgba(39, 30, 20, 0.22);
  --font-ui: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  --font-display: Georgia, "Trebuchet MS", serif;
  --font-letter: "Courier New", Courier, "Lucida Console", monospace;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-ui);
  background:
    linear-gradient(rgba(240, 249, 246, 0.74), rgba(222, 238, 224, 0.78)),
    url("assets/ui/wallpaper/toffi-air-page-wallpaper-v1.png") center top / 640px auto repeat;
}

button {
  font: inherit;
}

body.is-start-flow {
  overflow: hidden;
  background: #000;
}

.start-flow {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.title-screen,
.intro-screen,
.intro-ended-screen {
  position: absolute;
  inset: 0;
}

.title-screen {
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  min-height: 100%;
  padding: clamp(24px, 5vh, 64px) clamp(18px, 4vw, 56px) clamp(30px, 8vh, 88px);
  background: #213d55 url("assets/ui/title-screen/title-background-v1.png") center / cover no-repeat;
}

.title-screen::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.16), transparent 35%, rgba(0, 0, 0, 0.28));
  content: "";
  pointer-events: none;
}

.title-screen-heading {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff8d8;
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 9vw, 8.5rem);
  line-height: 0.9;
  text-align: center;
  text-shadow: 0 5px 0 #5c271a, 0 9px 24px rgba(0, 0, 0, 0.62);
}

.title-screen-actions {
  position: relative;
  z-index: 1;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.title-screen-actions button,
.rescue-toffi-air,
.replay-intro {
  border: 3px solid #4b2b18;
  border-radius: 8px;
  background: #f5c64f;
  box-shadow: 0 5px 0 #4b2b18, 0 10px 24px rgba(0, 0, 0, 0.35);
  color: #2f241c;
  cursor: pointer;
  font-weight: 900;
}

.title-screen-actions button {
  min-width: min(310px, calc(100vw - 36px));
  padding: 15px 22px;
  font-size: clamp(1rem, 2vw, 1.3rem);
}

.title-screen-actions button:focus-visible,
.rescue-toffi-air:focus-visible,
.replay-intro:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 5px;
}

.intro-screen,
.intro-ended-screen {
  background: #000;
}

.intro-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

.intro-ended-screen {
  display: grid;
  place-items: center;
}

.rescue-toffi-air {
  padding: 18px 28px;
  font-size: clamp(1.15rem, 3vw, 2rem);
}

.replay-intro {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 36px);
  padding: 10px 15px;
  background: #f3ead4;
  font-size: 0.95rem;
}

@media (max-width: 700px) {
  .title-screen {
    padding-bottom: 34px;
  }

  .title-screen-actions {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .title-screen-actions button {
    width: min(100%, 360px);
  }
}

.game-shell {
  position: relative;
  width: min(1420px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 18px 0 28px;
}

.top-bar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.eyebrow {
  margin: 0 0 2px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #334f3b;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.92;
}

h2 {
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status-strip span,
.secondary-button,
.dialog button,
.modal button.choice {
  border: 2px solid var(--wood-dark);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--wood-dark);
  color: var(--ink);
  padding: 8px 12px;
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.scene-column {
  display: grid;
  grid-template-rows: auto minmax(150px, auto);
  min-width: 0;
  gap: 14px;
}

.right-panel,
.scene-card {
  border: 3px solid var(--wood-dark);
  border-radius: 8px;
  background: rgba(255, 244, 213, 0.92);
  box-shadow: 0 8px 0 rgba(96, 65, 38, 0.28);
}

.right-panel {
  border-color: #4f321d;
  background:
    linear-gradient(rgba(255, 247, 218, 0.95), rgba(246, 222, 169, 0.95)),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(96, 65, 38, 0.06) 24px 26px);
  box-shadow: inset 0 0 0 5px rgba(135, 88, 43, 0.18), 0 8px 0 rgba(96, 65, 38, 0.28);
  padding: 14px;
}

.panel-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.panel-tab {
  border: 2px solid var(--wood-dark);
  border-radius: 8px;
  background: rgba(255, 248, 222, 0.72);
  box-shadow: 0 3px 0 rgba(96, 65, 38, 0.24);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  padding: 8px 6px;
}

.panel-tab.is-active {
  background: var(--paper);
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(96, 65, 38, 0.24);
}

.panel-tab-content {
  min-width: 0;
}

.panel-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.panel-section-heading h2 {
  margin: 0;
}

.panel-collapse-button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid var(--wood-dark);
  border-radius: 50%;
  background: #fff4d5;
  box-shadow: 0 2px 0 var(--wood-dark);
  color: var(--ink);
  cursor: pointer;
  font-weight: 1000;
  line-height: 1;
}

.dev-reset-button {
  width: 100%;
  cursor: pointer;
  border: 1px dashed #8d6a43;
  border-radius: 6px;
  background: rgba(255, 248, 227, 0.5);
  color: #6d5437;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 8px;
}

.task-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}

.task-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
  line-height: 1.2;
}

.task-list .check {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 2px solid var(--wood-dark);
  background: #fff8de;
  font-size: 0.9rem;
  font-weight: 800;
}

.secondary-button {
  width: 100%;
  cursor: pointer;
}

.scene-card {
  overflow: hidden;
}

.scene {
  position: relative;
  overflow: hidden;
  background: #9a6a38;
}

.scene:not(.is-minigame) {
  width: 100%;
  aspect-ratio: 1672 / 941;
  min-height: 0;
}

.scene.is-minigame {
  min-height: 480px;
}

.scene::before,
.scene::after {
  content: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene::before {
  background:
    linear-gradient(90deg, transparent 12%, rgba(96, 65, 38, 0.45) 12.5%, rgba(96, 65, 38, 0.45) 14%, transparent 14.5%),
    linear-gradient(90deg, transparent 84%, rgba(96, 65, 38, 0.45) 84.5%, rgba(96, 65, 38, 0.45) 86%, transparent 86.5%);
}

.scene::after {
  top: auto;
  height: 22%;
  background: #8c6138;
  border-top: 4px solid var(--wood-dark);
}

.scene-layer {
  position: absolute;
  inset: 0;
}

.background-layer,
.desk-layer {
  pointer-events: none;
}

.background-layer {
  z-index: 1;
}

.overlay-layer {
  z-index: 2;
  pointer-events: none;
}

.furniture-layer {
  z-index: 4;
}

.object-layer {
  z-index: 5;
}

.character-layer {
  z-index: 6;
  pointer-events: none;
}

.story-layer {
  z-index: 7;
  pointer-events: none;
}

.story-hotspot {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: filter 120ms ease, transform 120ms ease;
}

.story-hotspot:hover,
.story-hotspot:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-3px);
  outline: 0;
}

.story-hotspot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 3px rgba(48, 31, 18, 0.34));
  pointer-events: none;
}

.hub-decoration {
  position: absolute;
  z-index: 3;
  border: 0;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  padding: 0;
}

.hub-decoration:active {
  cursor: grabbing;
}

.hub-decoration:focus-visible {
  outline: 2px solid rgba(255, 244, 166, 0.85);
  outline-offset: 2px;
}

.hub-decoration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 3px rgba(48, 31, 18, 0.34));
  pointer-events: none;
}


.scene-game-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  background: #f1e2bf;
  padding: 14px;
}

.scene.is-minigame .scene-layer {
  display: none;
}

.scene-game-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scene-game-topbar h2 {
  margin: 0;
  font-size: 1.1rem;
}

.scene-game-topbar h2:empty {
  display: none;
}

.scene-game-topbar:has(h2:empty) {
  justify-content: flex-end;
}

.scene-game-topbar .secondary-button {
  width: auto;
  white-space: nowrap;
}

.scene-game-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.scene-game-content {
  min-height: 0;
  overflow: hidden;
}

.scene-game-layer[data-scene-mode="auntPoster"],
.scene-game-layer[data-scene-mode="auntLetter"] {
  background: #d1ad77 url("assets/backgrounds/toffi-air-hub-background-v1.png") center / cover;
}

.scene-game-layer[data-scene-mode="departureBoard"] {
  background: #c7975c url("assets/backgrounds/toffi-air-hub-background-v1.png") center / cover;
}

.scene-game-layer[data-scene-mode="departureBoard"] .scene-game-topbar {
  flex-direction: row;
  justify-content: flex-end;
}

.scene-game-layer[data-scene-mode="departureBoard"] .scene-game-actions {
  justify-content: flex-end;
}

.departure-puzzle-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}

.departure-puzzle-board {
  width: min(100%, 790px);
  height: auto;
  max-width: 100%;
  max-height: 395px;
  aspect-ratio: 2 / 1;
  position: relative;
  filter: drop-shadow(0 8px 5px rgba(36, 23, 13, 0.35));
}

.departure-puzzle-board > img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.departure-puzzle-face {
  position: absolute;
  inset: 19% 8% 24%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  color: #fff4ce;
  font-family: "Courier New", monospace;
}

.departure-puzzle-face h3 {
  margin: 0 0 3px;
  color: #ffc956;
  font-size: clamp(1rem, 2.1vw, 1.5rem);
  letter-spacing: 0.06em;
}

.departure-puzzle-head,
.departure-puzzle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.departure-puzzle-head {
  color: #a4c7d0;
  font-size: clamp(0.65rem, 1.1vw, 0.88rem);
  font-weight: 800;
}

.departure-puzzle-rows {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.departure-puzzle-row {
  padding: 1px 8px;
  border-top: 1px solid rgba(255, 238, 192, 0.24);
  font-size: clamp(0.75rem, 1.4vw, 1rem);
  font-weight: 800;
}

.departure-puzzle-row.is-wrong {
  background: rgba(175, 49, 36, 0.32);
}

.departure-puzzle-row.is-correct {
  background: rgba(65, 130, 69, 0.2);
}

.departure-puzzle-scramble,
.departure-puzzle-answer {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.departure-puzzle-row input {
  width: 100%;
  min-width: 0;
  padding: 1px 5px;
  border: 1px solid #caa55d;
  border-radius: 4px;
  background: #fff7dd;
  color: #2c2d26;
  font: 700 clamp(0.7rem, 1.1vw, 0.85rem) "Courier New", monospace;
}

.departure-puzzle-answer {
  color: #a9d7b5;
  text-align: right;
}

.departure-check-button {
  width: auto;
  min-width: 170px;
  min-height: 36px;
  margin: 0;
  padding: 5px 18px;
  border: 3px solid #69401d;
  border-radius: 9px;
  background: #fff0b8;
  color: #31251c;
  box-shadow: 0 3px 0 rgba(60, 35, 17, 0.5);
  font-weight: 800;
  text-align: center;
}

.departure-approved-stamp {
  position: absolute;
  right: 18%;
  bottom: 7%;
  transform: rotate(-12deg);
  padding: 2px 10px;
  border: 3px solid #90d5a4;
  color: #90d5a4;
  font: 900 clamp(0.8rem, 2vw, 1.3rem) Arial, sans-serif;
  letter-spacing: 0.06em;
}

.aunt-poster-scene,
.aunt-letter-scene {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.aunt-poster-scene {
  position: relative;
}

.aunt-poster-scene img {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 8px rgba(41, 28, 16, 0.3));
}

.aunt-letter-scene {
  position: relative;
  background: rgba(88, 57, 28, 0.26);
  overflow: auto;
}

.aunt-letter-image-button {
  position: absolute;
  inset: 0;
  display: flex;
  place-items: center;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.aunt-letter-image-button img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 8px rgba(41, 28, 16, 0.25));
}

.aunt-letter-image-button:focus-visible {
  outline: 3px solid #f9d87d;
  outline-offset: 3px;
}

.aunt-letter-scene.is-zoomed {
  display: block;
  text-align: center;
}

.aunt-letter-scene.is-zoomed .aunt-letter-image-button {
  position: relative;
  inset: auto;
  width: min(1024px, max(520px, 100%));
  height: auto;
  max-width: none;
  margin: 0 auto;
  overflow: visible;
  cursor: zoom-out;
}

.aunt-letter-scene.is-zoomed .aunt-letter-image-button img {
  width: 100%;
  height: auto;
}

.scene-game-layer[data-scene-mode="papers"] {
  background: #d6bd82 url("assets/ui/papers/paper-desk-background-v1.png") center / cover no-repeat;
  gap: 8px;
  padding: 10px;
}

.scene-game-layer[data-scene-mode="papers"] .scene-game-topbar,
.scene-game-layer[data-scene-mode="papers"] .scene-game-topbar:has(h2:empty) {
  justify-content: flex-end;
}

.scene-game-layer[data-scene-mode="papers"] .scene-game-actions {
  justify-content: flex-end;
}

.scene-game-layer[data-scene-mode="papers"] .scene-game-content {
  display: grid;
}

.scene-game-content .paper-desk,
.scene-game-content .quiz-view,
.scene-game-content .paper-reader,
.scene-game-content .paper-result {
  min-height: 0;
  height: 100%;
}

.scene-game-content .paper-desk,
.scene-game-content .quiz-view,
.scene-game-content .paper-result {
  overflow-y: auto;
  overflow-x: hidden;
}

.scene-game-content .paper-reader {
  grid-template-rows: minmax(0, 1fr);
  justify-items: stretch;
  overflow: auto;
}

.scene-game-content .paper-body {
  width: min(920px, 100%);
  height: 100%;
  aspect-ratio: auto;
  max-height: none;
  min-height: 0;
}

.scene-game-content .paper-letter-content {
  min-height: 100%;
  padding: 40px 76px 42px;
}

.scene-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scene-full-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.furniture-asset,
.character-asset {
  position: absolute;
  pointer-events: none;
}

.furniture-asset img,
.character-asset img {
  position: absolute;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}

.wall-sign {
  position: absolute;
  top: 4%;
  left: 33%;
  width: 34%;
  min-height: 74px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 4px solid var(--wood-dark);
  background: #e9c17a;
  text-align: center;
  box-shadow: 0 5px 0 rgba(96, 65, 38, 0.35);
  z-index: 2;
}

.wall-sign span {
  font-size: clamp(1.35rem, 3.2vw, 2.8rem);
  font-weight: 900;
  color: #143d58;
}

.wall-sign small {
  font-weight: 700;
}

.hotspot {
  position: absolute;
  z-index: 5;
  border: 3px solid var(--wood-dark);
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  box-shadow: 0 5px 0 rgba(96, 65, 38, 0.4);
  transition: transform 120ms ease, filter 120ms ease;
}

.hotspot:hover,
.hotspot:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.07);
  outline: 3px solid #fff2a6;
  outline-offset: 2px;
}

.asset-hotspot {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}

.asset-hotspot:hover,
.asset-hotspot:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.07);
  outline: 0;
}

.asset-hotspot.controlPanel {
  transform: rotate(-8deg);
  transform-origin: center bottom;
}

.asset-hotspot.controlPanel:hover,
.asset-hotspot.controlPanel:focus-visible {
  transform: translateY(-3px) rotate(-8deg);
}

.asset-hotspot.departureBoard {
  z-index: 1;
  color: #ffe6a6;
  filter: drop-shadow(0 3px 3px rgba(40, 24, 10, 0.4));
}

.asset-hotspot.departureBoard .departure-board-frame {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.departure-board-face {
  position: absolute;
  inset: 15% 8% 16%;
  display: grid;
  grid-template-rows: 1.25fr repeat(5, 1fr);
  overflow: hidden;
  padding-top: clamp(12px, 2vh, 24px);
  box-sizing: border-box;
  font-family: "Courier New", monospace;
  line-height: 1;
  text-align: left;
  pointer-events: none;
}

.departure-board-heading {
  color: #ffca55;
  font-size: clamp(6px, 0.65vw, 11px);
  letter-spacing: 0.03em;
}

.departure-board-row {
  display: grid;
  grid-template-columns: 1fr 8%;
  align-items: center;
  border-top: 1px solid rgba(255, 232, 178, 0.18);
  font-size: clamp(7px, 0.63vw, 9px);
  white-space: nowrap;
}

.departure-board-time,
.departure-board-gate {
  color: #b5c9cb;
}

.departure-board-time {
  display: none;
}

.departure-board-row strong {
  overflow: hidden;
  text-overflow: clip;
}

.asset-hotspot img {
  position: absolute;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(66, 43, 24, 0.2));
}


.asset-hotspot.is-clear {
  outline-offset: -8px;
}

.asset-hotspot.is-clear img {
  display: none;
}

.asset-hotspot.runway-click-zone {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.asset-hotspot.runway-click-zone:hover,
.asset-hotspot.runway-click-zone:focus-visible {
  transform: none;
  filter: none;
  outline: 0;
}

.runway-hover-mole {
  position: absolute;
  left: 50%;
  bottom: 11%;
  width: 24%;
  aspect-ratio: 1;
  transform: translate(-50%, 20%) scale(0.82);
  opacity: 0;
  pointer-events: none;
  object-fit: contain;
  transition: opacity 140ms ease, transform 180ms ease;
}

.asset-hotspot.runway-click-zone:hover .runway-hover-mole,
.asset-hotspot.runway-click-zone:focus-visible .runway-hover-mole {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

.inventory-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.empty-note,
.inventory-item {
  padding: 10px;
  border: 2px dashed #8d6a43;
  border-radius: 8px;
  background: #fff8e3;
  line-height: 1.25;
}

.inventory-item {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  min-width: 0;
  place-items: center;
  border-style: solid;
  background: rgba(255, 248, 227, 0.84);
  cursor: help;
  padding: 6px;
}

.inventory-item > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px rgba(64, 40, 22, 0.24));
}

.inventory-item > span[aria-hidden="true"] {
  font-size: 1.8rem;
}

.inventory-item:focus-visible {
  outline: 3px solid #2d698c;
  outline-offset: 2px;
}

.dialog {
  position: relative;
  z-index: 5;
  width: fit-content;
  min-width: min(440px, 100%);
  max-width: min(900px, 100%);
  min-height: 0;
  justify-self: center;
  border: 4px solid #604126;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 252, 236, 0.98), rgba(250, 226, 175, 0.98)),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(96, 65, 38, 0.04) 22px 23px);
  box-shadow: inset 0 0 0 5px rgba(180, 124, 62, 0.18), 0 8px 0 rgba(96, 65, 38, 0.38);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: end;
}

.dialog-sprite {
  width: 118px;
  height: 132px;
  object-fit: contain;
  object-position: bottom center;
  align-self: end;
  filter: drop-shadow(0 4px 0 rgba(96, 65, 38, 0.22));
}

.dialog-copy {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 4px;
  min-width: 0;
  align-self: center;
}

.dialog-name {
  margin-bottom: 6px;
  font-weight: 900;
  color: #164f72;
}

.dialog p,
.dialog-text {
  margin-bottom: 12px;
  font-size: 1.05rem;
  line-height: 1.35;
}

.dialog-actions {
  align-self: end;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.dialog.is-new {
  animation: dialog-arrival 620ms ease-out;
}

@keyframes dialog-arrival {
  0% {
    filter: brightness(1);
  }

  38% {
    filter: brightness(1.1);
    box-shadow: inset 0 0 0 5px rgba(255, 244, 160, 0.48), 0 0 0 5px rgba(255, 239, 137, 0.38), 0 8px 0 rgba(96, 65, 38, 0.38);
  }

  100% {
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialog.is-new {
    animation: none;
  }
}

.dialog-choices {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.dialog-choices[hidden] {
  display: none;
}

.dialog button {
  cursor: pointer;
}

.dialog-speaker-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dialog-speaker-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: end;
  gap: 8px;
  min-width: 0;
  border-left: 3px solid rgba(22, 79, 114, 0.24);
  padding-left: 8px;
}

.dialog-speaker-row img {
  width: 62px;
  height: 72px;
  object-fit: contain;
  object-position: bottom;
}

.dialog-speaker-row p {
  margin: 0;
  font-size: 0.94rem;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(47, 36, 28, 0.48);
}

.modal {
  position: relative;
  width: min(680px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  border: 4px solid var(--wood-dark);
  border-radius: 8px;
  background: #fff5d8;
  box-shadow: 0 9px 0 rgba(96, 65, 38, 0.45);
  padding: 22px;
}

.reward-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(32, 25, 20, 0.52);
}

.reward-popup {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(460px, 100%);
  border: 4px solid var(--wood-dark);
  border-radius: 8px;
  background: #fff5d8;
  box-shadow: 0 9px 0 rgba(96, 65, 38, 0.45);
  padding: 26px;
  text-align: center;
}

.reward-popup-message {
  display: grid;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.3;
}

.reward-popup button {
  min-width: 112px;
  border: 2px solid var(--wood-dark);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--wood-dark);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  padding: 9px 18px;
}

.icon-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 2px solid var(--wood-dark);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
}

.modal-grid {
  display: grid;
  gap: 10px;
}

.choice {
  width: 100%;
  cursor: pointer;
  text-align: left;
  margin-top: 10px;
}

.paper-desk {
  display: grid;
  grid-template-rows: 1fr;
  gap: 8px;
  overflow-x: hidden;
}

.paper-zoom-button {
  display: none;
}

.paper-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  width: min(100%, 620px);
  margin: 0 auto;
  gap: 10px 8px;
  justify-content: center;
  min-width: 0;
  overflow: visible;
}

.paper-completion-scene {
  position: relative;
  height: 100%;
  min-height: 0;
}

.paper-completion-scene > .paper-desk {
  height: 100%;
}

.paper-completion-rewards {
  position: absolute;
  left: 50%;
  bottom: 3%;
  z-index: 8;
  width: min(680px, 88%);
  border: 3px solid #5d412a;
  border-radius: 8px;
  background: rgba(255, 247, 211, 0.96);
  box-shadow: 0 8px 0 rgba(63, 40, 22, 0.28), 0 18px 30px rgba(42, 24, 12, 0.25);
  padding: 10px 16px 12px;
  text-align: center;
  transform: translateX(-50%);
  animation: paper-reward-panel-in 480ms ease-out both;
}

.paper-completion-rewards > strong {
  display: block;
  color: #285b32;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.paper-reward-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 7px;
}

.paper-reward-items span {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #3b2b20;
  text-align: left;
  animation: paper-reward-item-in 620ms ease-out both;
}

.paper-reward-items span:nth-child(2) { animation-delay: 90ms; }
.paper-reward-items span:nth-child(3) { animation-delay: 180ms; }
.paper-reward-items span:nth-child(4) { animation-delay: 270ms; }

.paper-reward-items img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

@keyframes paper-reward-panel-in {
  from { opacity: 0; transform: translate(-50%, 28px) scale(0.94); }
}

@keyframes paper-reward-item-in {
  from { opacity: 0; transform: translateY(24px) scale(0.75); }
}

.paper-card {
  position: relative;
  min-width: 0;
  min-height: 120px;
  aspect-ratio: 1.6 / 1;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  cursor: pointer;
  overflow: visible;
  padding: 0;
  text-align: left;
  transform: rotate(-1deg);
}

.paper-card:nth-child(2n) {
  transform: rotate(1deg);
}

.paper-envelope-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

.paper-envelope-title {
  position: absolute;
  left: 14%;
  top: 23%;
  z-index: 1;
  display: flex;
  width: 68%;
  height: 32%;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: #2f2a24;
  font-family: var(--font-ui);
  font-size: clamp(0.9rem, 1.45vw, 1.28rem);
  font-weight: 1000;
  letter-spacing: 0.01em;
  line-height: 1;
  overflow-wrap: normal;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
}

.paper-status-image {
  position: absolute;
  top: -3%;
  right: -1%;
  z-index: 3;
  width: min(29%, 96px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px rgba(64, 40, 22, 0.28));
  pointer-events: none;
}

.paper-card.is-active:hover,
.paper-card.is-active:focus-visible {
  outline: 0;
  filter: brightness(1.06) drop-shadow(0 0 7px rgba(255, 242, 166, 0.95));
  transform: translateY(-3px) rotate(0deg);
}

.paper-card.is-locked {
  filter: saturate(0.55);
  opacity: 0.72;
}

.paper-card.is-done {
  filter: saturate(1.05);
}

.quiz-view,
.paper-reader {
  display: grid;
  gap: 10px;
}

.paper-body {
  position: relative;
  width: min(920px, 100%);
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: transparent;
  box-shadow: 0 10px 24px rgba(64, 40, 22, 0.18);
  padding: 0;
  font-family: var(--font-letter);
  line-height: 1.5;
}

.paper-body p {
  margin: 0 0 4px;
  font-size: clamp(0.59rem, 0.7vw, 0.69rem);
  line-height: 1.25;
}

.paper-spread {
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 0;
  height: 100%;
  width: 100%;
}

.paper-letter-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: top center;
  pointer-events: none;
}

.paper-letter-content {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overflow-x: hidden;
  padding: 40px 76px 42px;
  letter-spacing: 0.01em;
}

.paper-letterhead {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 6px;
  border-bottom: 2px solid rgba(74, 48, 28, 0.18);
  padding-bottom: 5px;
}

.paper-letterhead h3 {
  margin: 3px 0 0;
  font-family: var(--font-letter);
  font-size: clamp(0.72rem, 0.86vw, 0.84rem);
  font-weight: 900;
  line-height: 1.16;
}

.paper-agency-logo {
  flex: 0 0 auto;
  width: min(24%, 68px);
  max-height: 50px;
  object-fit: contain;
}

.paper-agency {
  width: fit-content;
  margin-bottom: 3px;
  border: 2px solid var(--wood-dark);
  border-radius: 4px;
  background: #f7e0a5;
  padding: 3px 7px;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
}

.paper-section-title {
  margin: 6px 0 3px;
  border-bottom: 1px solid rgba(74, 48, 28, 0.22);
  font-weight: 900;
  text-transform: uppercase;
}

.paper-signature-image {
  display: block;
  width: min(42%, 130px);
  margin: 12px 0 0 auto;
}

.old-answer-note {
  border-left: 4px solid #8d6a43;
  background: rgba(247, 224, 165, 0.45);
  padding: 10px 12px;
}

.paper-transcript-line,
.paper-bullet-line {
  position: relative;
  margin-left: 14px;
}

.paper-transcript-line::before,
.paper-bullet-line::before {
  content: "•";
  position: absolute;
  left: -12px;
  color: rgba(74, 48, 28, 0.72);
}

.paper-transcript-line::before {
  content: "—";
}

.paper-letter-content.is-blank {
  display: grid;
  place-items: end center;
}

.paper-blank-note {
  color: rgba(74, 48, 28, 0.24);
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 900;
}

.paper-question-status {
  width: fit-content;
  border: 2px solid #102f43;
  border-radius: 3px;
  background: #164f72;
  box-shadow: 3px 3px 0 #102f43;
  color: #fff8de;
  padding: 6px 10px;
  font-family: var(--font-ui);
  font-weight: 900;
  text-transform: uppercase;
}

.quiz-view {
  align-content: start;
  width: min(820px, 100%);
  margin: 0 auto;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 248, 227, 0.94);
  box-shadow: 0 8px 22px rgba(64, 40, 22, 0.2);
  padding: clamp(16px, 2.5vw, 28px);
}

.paper-question {
  display: grid;
  gap: 8px;
  border: 0;
  border-left: 5px solid #2d698c;
  border-radius: 4px;
  background: #fffdf4;
  padding: 16px;
}

.paper-question h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.2;
}

.old-answer-note {
  font-family: var(--font-ui);
  font-weight: 800;
}

.paper-answer {
  display: grid;
  gap: 5px;
  margin-top: 0;
  border: 1px solid #b9cfdb;
  border-radius: 6px;
  background: #f8fcfe;
  box-shadow: 0 3px 10px rgba(28, 77, 103, 0.11);
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-weight: 850;
  line-height: 1.2;
}

.paper-answer:hover:not(:disabled),
.paper-answer:focus-visible:not(:disabled) {
  border-color: #2d698c;
  background: #edf7fb;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(45, 105, 140, 0.2), 0 4px 12px rgba(28, 77, 103, 0.14);
}

.paper-answer.is-selected {
  outline: 0;
}

.paper-answer.is-selected.is-correct {
  border-color: #2f7436;
  background: #dff2d7;
  box-shadow: inset 5px 0 0 #2f7436, 0 3px 0 rgba(47, 116, 54, 0.22);
}

.paper-answer.is-selected.is-wrong {
  border-color: #a33a2f;
  background: #f8ded7;
  box-shadow: inset 5px 0 0 #a33a2f, 0 3px 0 rgba(163, 58, 47, 0.2);
}

.paper-answer:disabled:not(.is-selected) {
  color: var(--ink);
  opacity: 0.78;
}

.paper-answer small {
  color: #5e4b37;
  font-weight: 800;
  line-height: 1.35;
}

.answer-list {
  display: grid;
  gap: 10px;
}

.old-answer-note {
  margin-top: 2px;
}

.paper-result-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.paper-result-actions .choice {
  width: auto;
  min-width: 180px;
  border: 2px solid var(--wood-dark);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--wood-dark);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 900;
  padding: 8px 12px;
  text-align: center;
}

.paper-result {
  display: grid;
  place-items: center;
  padding: clamp(10px, 2vw, 20px);
}

.paper-result-screen {
  position: relative;
  display: grid;
  width: min(680px, 100%);
  min-height: 300px;
  place-items: center;
  align-content: center;
  gap: 22px;
  border: 7px ridge #9f8969;
  border-radius: 3px;
  background: #f8f0dc;
  box-shadow: inset 0 0 0 5px #d7c5a4, 10px 10px 0 rgba(64, 40, 22, 0.32);
  color: #2f241c;
  padding: 34px;
  text-align: center;
}

.paper-result-screen::after {
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(74, 48, 28, 0.3);
  content: "";
  pointer-events: none;
}

.paper-result-kicker,
.paper-result-file {
  font-family: var(--font-letter);
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  text-transform: uppercase;
}

.quiz-result-stamp {
  display: block;
  width: min(78%, 500px);
  max-height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 4px 1px rgba(64, 40, 22, 0.16));
}

.paper-result-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-letter);
}

.paper-result-score strong {
  color: #164f72;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1;
}

.paper-result-score span {
  font-size: 1.15rem;
  text-transform: uppercase;
}

.quiz-feedback {
  min-height: 24px;
  font-weight: 900;
}

.quiz-feedback.is-right {
  color: #2f7436;
}

.quiz-feedback.is-wrong,
.quiz-feedback.is-note {
  color: #8a3c24;
}

.runway-game {
  display: grid;
  gap: 14px;
}

.runway-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.runway-hud span {
  border: 2px solid var(--wood-dark);
  border-radius: 8px;
  background: #f7e0a5;
  box-shadow: 0 3px 0 rgba(96, 65, 38, 0.3);
  font-weight: 900;
  padding: 7px 10px;
}

.runway-field {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 12px;
  padding: 16px;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 45%, rgba(255, 255, 255, 0.55) 46% 48%, transparent 49% 100%),
    linear-gradient(#7fa05a 0 28%, #8b7653 28% 100%);
}

.mole-hole {
  position: relative;
  aspect-ratio: 1 / 0.72;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
}

.mole-hole:focus-visible { filter: drop-shadow(0 0 12px #fff2a6); outline: none; }

.mole-hole-image {
  position: absolute;
  left: 50%;
  bottom: -3%;
  width: 92%;
  height: 80%;
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
}

.mole-entity {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 82%;
  height: 92%;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border: 0;
  box-shadow: none;
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
}

.mole-entity img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 0 rgba(45, 27, 18, 0.24));
  pointer-events: none;
}

.mole-speech {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: max-content;
  max-width: 120px;
  transform: translateX(-50%);
  border: 2px solid var(--wood-dark);
  border-radius: 999px;
  background: rgba(255, 244, 213, 0.94);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
  padding: 1px 6px;
  pointer-events: none;
}

.mole-entity.racka {
  width: 76%;
  height: 86%;
}

.mole-entity.felon {
  width: 72%;
  height: 86%;
}

.mole-entity.is-hit {
  animation: hit-pop 180ms ease both;
}

.mole-entity.surrender::after {
  content: "";
  position: absolute;
  right: 10%;
  top: 6%;
  width: 26%;
  height: 22%;
  border-left: 3px solid #5d4b34;
  background: linear-gradient(90deg, #fff 0 78%, transparent 78% 100%);
  transform: rotate(-8deg);
}

.runway-feedback {
  min-height: 28px;
  font-weight: 900;
}

.runway-feedback:empty { display: none; }

.runway-feedback.is-good {
  color: #2f7436;
}

.runway-feedback.is-bad {
  color: #9a3326;
}

.runway-feedback.is-note {
  color: #604126;
}

.runway-result {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.runway-result h3 {
  margin: 0;
}

.runway-replay-choice {
  display: grid;
  align-content: center;
  justify-items: center;
  height: 100%;
  gap: 18px;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 248, 232, 0.72), rgba(221, 193, 138, 0.82)),
    repeating-linear-gradient(135deg, rgba(95, 72, 43, 0.08) 0 16px, transparent 16px 32px);
  padding: 32px;
  text-align: center;
}

.runway-replay-choice h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.runway-replay-choice p {
  max-width: 58ch;
  margin: 0;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.45;
}

.runway-replay-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.security-game {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  gap: 8px;
}

.security-start {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: url("assets/minigames/security/security-screening-background-v1.png") center / cover no-repeat;
}

.security-start-button {
  width: auto;
  margin: 0;
  border: 3px solid #55351e;
  border-radius: 8px;
  background: #fff0b8;
  box-shadow: 0 5px 0 #55351e, 0 12px 24px rgba(42, 27, 16, 0.32);
  font-weight: 1000;
  padding: 12px 20px;
  text-align: center;
}

.security-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.security-hud span {
  border: 2px solid var(--wood-dark);
  border-radius: 8px;
  background: #f7e0a5;
  box-shadow: 0 3px 0 rgba(96, 65, 38, 0.3);
  font-weight: 900;
  padding: 7px 10px;
}

.security-field {
  position: relative;
  height: min(58vh, 430px);
  min-height: 330px;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background-color: #dbe8d0;
  background-position: center;
  background-size: cover;
  box-shadow: 0 6px 16px rgba(45, 27, 18, 0.2);
  touch-action: none;
}

.security-field:focus-visible {
  outline: 3px solid #fff2a6;
}

.security-scanner {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 1;
  width: min(84%, 520px);
  transform: translateX(-50%);
  border: 3px solid #5d4b34;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #9ab8b7, #5f7f80),
    repeating-linear-gradient(90deg, #4b6466 0 18px, #6f8f91 18px 36px);
  box-shadow: 0 5px 0 rgba(45, 27, 18, 0.22);
  color: #fff8e8;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0;
  padding: 9px 12px;
  text-align: center;
}

.security-items-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.security-preload {
  display: none;
}

.security-item {
  position: absolute;
  top: 0;
  z-index: 2;
  object-fit: contain;
  filter: drop-shadow(0 5px 0 rgba(45, 27, 18, 0.24));
  pointer-events: none;
}

.security-item.forbidden {
  animation: security-wobble 850ms ease-in-out infinite alternate;
}

.security-item.allowed {
  opacity: 0.95;
}

.security-box {
  position: absolute;
  bottom: 8px;
  z-index: 3;
  width: min(132px, 33vw);
  aspect-ratio: 1.45 / 1;
  transform: translateX(-50%);
  transition: left 70ms linear;
  pointer-events: none;
}

.security-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 0 rgba(45, 27, 18, 0.25));
}

.security-feedback {
  min-height: 28px;
  font-weight: 900;
}

.security-feedback.is-good {
  color: #2f7436;
}

.security-feedback.is-bad {
  color: #9a3326;
}

.security-feedback.is-note {
  color: #604126;
}

.security-result {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.security-result h3 {
  margin: 0;
}

.security-medal {
  width: min(170px, 35%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 7px 0 rgba(96, 65, 38, 0.25));
}

.runway-reward-part {
  width: min(140px, 42vw);
  height: auto;
  filter: drop-shadow(0 4px 0 rgba(96, 65, 38, 0.22));
}

.radio-game {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.2fr);
  align-items: stretch;
  gap: 18px;
  height: 100%;
  min-height: 0;
}

.radio-console,
.radio-panel {
  border: 3px solid #5d4b34;
  border-radius: 8px;
  box-shadow: 0 6px 0 rgba(96, 65, 38, 0.22);
}

.radio-console {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 230, 144, 0.72) 0 14%, transparent 15%),
    linear-gradient(180deg, #52717a, #263d45);
}

.radio-antenna {
  position: absolute;
  left: 50%;
  top: 9%;
  width: 6px;
  height: 34%;
  transform: translateX(-50%) rotate(-9deg);
  border-radius: 999px;
  background: #f7e0a5;
  box-shadow: 0 0 0 3px #5d4b34;
}

.radio-speaker {
  position: absolute;
  left: 12%;
  bottom: 14%;
  width: 46%;
  aspect-ratio: 1 / 1;
  border: 4px solid #5d4b34;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, #263d45 0 8px, #f7e0a5 9px 13px),
    #263d45;
}

.radio-dial {
  position: absolute;
  right: 14%;
  bottom: 18%;
  width: 26%;
  aspect-ratio: 1 / 1;
  border: 4px solid #5d4b34;
  border-radius: 50%;
  background: radial-gradient(circle, #fff5d8 0 34%, #d78c53 35% 58%, #9a3326 59%);
}

.radio-static-bars {
  position: absolute;
  left: 13%;
  right: 13%;
  top: 18%;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 8px;
  height: 28%;
}

.radio-static-bars span {
  width: 11%;
  border: 3px solid #5d4b34;
  border-radius: 999px 999px 4px 4px;
  background: #fff2a6;
  animation: radio-pulse 900ms ease-in-out infinite alternate;
}

.radio-static-bars span:nth-child(1) {
  height: 42%;
}

.radio-static-bars span:nth-child(2) {
  height: 72%;
  animation-delay: 120ms;
}

.radio-static-bars span:nth-child(3) {
  height: 52%;
  animation-delay: 240ms;
}

.radio-static-bars span:nth-child(4) {
  height: 88%;
  animation-delay: 360ms;
}

.radio-static-bars span:nth-child(5) {
  height: 48%;
  animation-delay: 480ms;
}

.radio-panel {
  display: grid;
  align-content: center;
  background: #fff5d8;
  padding: clamp(18px, 3vw, 34px);
}

#radio-step {
  display: grid;
  gap: 14px;
}

.radio-progress {
  width: fit-content;
  border: 2px solid #5d4b34;
  border-radius: 999px;
  background: #f7e0a5;
  padding: 5px 10px;
  font-size: 0.84rem;
  font-weight: 900;
}

.radio-panel h3,
.radio-result h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.radio-transmission {
  margin: 0;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: #263d45;
  color: #fff2a6;
  font-family: "Courier New", Consolas, monospace;
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  font-weight: 900;
  line-height: 1.45;
  padding: 16px;
}

.radio-prompt,
.radio-result p {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.45;
}

.radio-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.radio-option.is-selected {
  outline: 3px solid #164f72;
}

.radio-feedback {
  min-height: 30px;
  font-weight: 900;
}

.radio-feedback.is-good {
  color: #2f7436;
}

.radio-feedback.is-bad {
  color: #9a3326;
}

.radio-feedback.is-note {
  color: #604126;
}

.radio-next-button {
  justify-self: start;
}

.radio-result {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.scene-game-layer[data-scene-mode="fuel"] {
  background:
    linear-gradient(180deg, rgba(98, 135, 126, 0.94), rgba(70, 103, 94, 0.98)),
    #62877e;
}

.scene-game-layer[data-scene-mode="fuel"] #scene-game-title {
  display: none;
}

.fuel-game {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  color: #fff5d8;
}

.fuel-start {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
}

.fuel-start-card {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(760px, 92%);
  border: 4px solid #5d4b34;
  border-radius: 8px;
  background: rgba(255, 247, 225, 0.97);
  color: #2f241c;
  box-shadow: 0 9px 0 rgba(0, 0, 0, 0.22);
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
}

.fuel-start-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1;
}

.fuel-start-card p {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 900;
  line-height: 1.45;
}

.fuel-start-visual {
  display: grid;
  grid-template-columns: 120px 120px 120px;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.fuel-start-visual img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.18));
}

.fuel-start-visual span {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e9b64a, #2f7436);
}

.fuel-board-wrap,
.fuel-result {
  min-height: 0;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: rgba(255, 245, 216, 0.95);
  color: #2f241c;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22);
  padding: clamp(14px, 2vw, 22px);
}

.fuel-board-wrap {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
  overflow: hidden;
  height: 100%;
  padding: clamp(16px, 2.1vw, 24px);
}

.fuel-board-wrap.is-campaign {
  background:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    #75827b;
  background-size: 34px 34px;
  padding: clamp(12px, 1.5vw, 18px);
}

body:has(.fuel-game.is-campaign) .game-layout {
  grid-template-columns: minmax(0, 1fr);
}

body:has(.fuel-game.is-campaign) .right-panel {
  display: none;
}

body:has(.fuel-game.is-campaign) .scene-column {
  width: min(100%, 1280px);
  justify-self: center;
}

body:has(.fuel-game.is-campaign) .scene.is-minigame {
  height: clamp(600px, calc(100vh - 115px), 760px);
}

.fuel-board-wrap.is-campaign .fuel-instructions {
  gap: 5px;
}

.fuel-board-wrap.is-campaign .fuel-help-button {
  top: 8px;
}

.fuel-board-wrap.is-campaign .fuel-board {
  gap: clamp(5px, 0.55vw, 8px);
  padding: 8px;
}

.fuel-instructions {
  display: grid;
  gap: 7px;
  justify-items: center;
  text-align: center;
  padding: 0 clamp(42px, 5vw, 76px);
}

.fuel-result h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.2vw, 2.15rem);
  line-height: 1;
}

.fuel-instructions p,
.fuel-result p {
  margin: 0;
  max-width: 70ch;
  font-weight: 900;
  line-height: 1.28;
}

.fuel-instructions p {
  max-width: 86ch;
  font-size: clamp(0.94rem, 1vw, 1.05rem);
  white-space: nowrap;
}

.fuel-level-badge {
  border: 2px solid #5d4b34;
  border-radius: 999px;
  background: #fff2a6;
  color: #2f241c;
  font-size: 0.88rem;
  font-weight: 1000;
  line-height: 1;
  padding: 6px 12px;
}

.fuel-board {
  position: relative;
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(var(--fuel-cols), var(--fuel-cell-size));
  grid-template-rows: repeat(var(--fuel-rows), var(--fuel-cell-size));
  gap: clamp(6px, 0.7vw, 9px);
  max-width: 100%;
  max-height: 100%;
  border: 5px solid #5d4b34;
  border-radius: 12px;
  background: #d9e6c5;
  box-shadow: inset 0 0 0 6px rgba(255, 249, 232, 0.7);
  padding: 10px;
  outline: none;
}

.fuel-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  border: 2px solid rgba(96, 65, 38, 0.16);
  border-radius: 8px;
  background: #eef3df;
  color: #2f241c;
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  overflow: hidden;
}

.fuel-cell img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

.fuel-cell.is-wall {
  background: transparent;
  border-color: transparent;
}

.fuel-board.is-campaign-board .fuel-cell.is-wall {
  border-color: #704d31;
  background:
    repeating-linear-gradient(135deg, #f5d65c 0 9px, #e7653f 9px 18px);
  box-shadow: inset 0 0 0 4px rgba(255, 250, 220, 0.48), 0 4px 0 rgba(48, 38, 27, 0.25);
}

.fuel-board.is-campaign-board .fuel-cell {
  z-index: 1;
  background-color: rgba(238, 243, 223, 0.9);
}

.fuel-board.is-campaign-board .fuel-cell.is-wall {
  background-color: transparent;
}

.fuel-board.is-campaign-board .fuel-cell.is-target {
  z-index: 4;
}

.fuel-board.is-campaign-board .fuel-cell.is-fuel img {
  position: relative;
  z-index: 5;
  width: 152%;
  height: 142%;
}

.fuel-board.is-campaign-board .fuel-cell.is-fuel {
  overflow: visible;
}

.fuel-target-visual {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  pointer-events: none;
}

.fuel-target-plane {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 0 rgba(40, 34, 28, 0.22));
}

.fuel-target-coupling {
  position: absolute;
  right: -1%;
  bottom: -2%;
  width: 42%;
  height: 42%;
  object-fit: contain;
}

.fuel-cell.is-target {
  background: #dff4ff;
  border-color: #25759d;
  box-shadow: inset 0 0 0 5px rgba(120, 196, 238, 0.32);
}

.fuel-cell.is-crate {
  background: #f7e0a5;
  border-color: #9a6b31;
  color: #fff4d5;
}

.fuel-cell.is-fuel {
  background: #fff0b8;
  border-color: #9a3326;
  box-shadow: 0 0 0 5px rgba(255, 242, 166, 0.75), 0 0 26px rgba(233, 182, 74, 0.55);
}

.fuel-cell.is-player {
  background: #e8f6ff;
  border-color: #164f72;
  box-shadow: 0 0 0 5px rgba(120, 196, 238, 0.38);
}

.fuel-cell.is-target.is-fuel {
  background: #2f7436;
  color: #fff4d5;
}

.fuel-help-button {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid #5d4b34;
  border-radius: 50%;
  background: #fff9e8;
  color: #2f241c;
  cursor: pointer;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}

.fuel-help-button:hover,
.fuel-help-button:focus-visible {
  background: #fff2a6;
  outline: 3px solid rgba(233, 182, 74, 0.5);
  outline-offset: 2px;
}

.fuel-reset-button {
  margin-top: 0;
  padding: 8px 12px;
  white-space: nowrap;
}

.fuel-help-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(47, 36, 28, 0.34);
  padding: 18px;
}

.fuel-help-card {
  position: relative;
  width: min(560px, 92%);
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: #fff9e8;
  color: #2f241c;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.22);
  padding: 22px 24px 20px;
}

.fuel-help-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1;
}

.fuel-help-card ul {
  margin: 12px 0 0;
  padding-left: 1.2rem;
  font-weight: 850;
  line-height: 1.45;
}

.fuel-help-card li + li {
  margin-top: 5px;
}

.fuel-help-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid #5d4b34;
  border-radius: 50%;
  background: #f7d160;
  color: #2f241c;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 1000;
  line-height: 1;
}

.fuel-help-icons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.fuel-help-icons span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid rgba(93, 75, 52, 0.28);
  border-radius: 8px;
  background: #fff2d3;
  padding: 6px 10px;
  font-weight: 1000;
}

.fuel-help-icons img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.fuel-progress-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  background: rgba(47, 36, 28, 0.24);
  padding: 20px;
}

.fuel-progress-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(430px, 90%);
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: #fff9e8;
  color: #2f241c;
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.22);
  padding: 18px 20px 16px;
  text-align: center;
}

.fuel-progress-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  line-height: 1;
}

.fuel-progress-card p {
  margin: 0;
  max-width: 34ch;
  font-weight: 900;
  line-height: 1.3;
}

.fuel-next-level-button {
  width: auto;
  min-width: 0;
  padding: 8px 14px;
  font-size: 0.95rem;
}

.fuel-player-token {
  display: inline-grid;
  place-items: center;
  width: min(82%, 72px);
  aspect-ratio: 1 / 1;
  border: 3px solid #164f72;
  border-radius: 50%;
  background: #78c4ee;
  color: #172c36;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 0.95vw, 0.92rem);
  line-height: 1;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18);
}

.fuel-cell .fuel-player-sprite {
  width: 108%;
  height: 108%;
  object-fit: contain;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.2));
  transform: translateY(2%);
  transform-origin: 50% 54%;
}

.fuel-cell .fuel-player-sprite.is-pushing {
  transform: translateY(2%) scale(1.06);
}

.fuel-cell .fuel-player-sprite.is-facing-up {
  transform: translateY(2%) rotate(-90deg);
}

.fuel-cell .fuel-player-sprite.is-facing-down {
  transform: translateY(2%) rotate(90deg);
}

.fuel-cell .fuel-player-sprite.is-facing-up.is-pushing {
  transform: translateY(2%) rotate(-90deg) scale(1.06);
}

.fuel-cell .fuel-player-sprite.is-facing-down.is-pushing {
  transform: translateY(2%) rotate(90deg) scale(1.06);
}

.fuel-result {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  height: 100%;
  text-align: center;
}

.scene-game-layer[data-scene-mode="baggage"] {
  display: block;
  gap: 0;
  padding: 0;
  background: transparent;
}

.scene-game-layer[data-scene-mode="baggage"] .scene-game-topbar,
.scene-game-layer[data-scene-mode="baggage"] .scene-game-topbar:has(h2:empty) {
  position: absolute;
  z-index: 20;
  top: 12px;
  right: 12px;
  justify-content: flex-end;
}

.scene-game-layer[data-scene-mode="baggage"] .scene-game-content {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.scene-game-layer[data-scene-mode="baggage"] .scene-game-topbar .secondary-button {
  width: auto;
}

.baggage-v2-start,
.baggage-game {
  display: grid;
  height: 100%;
  min-height: 0;
  color: #fff5d8;
}

.baggage-v2-start {
  place-items: center;
}

.baggage-v2-start-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(620px, 92%);
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: rgba(255, 245, 216, 0.96);
  color: #2f241c;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22);
  padding: clamp(18px, 2.4vw, 28px);
  text-align: center;
}

.baggage-v2-start-card img {
  width: min(520px, 94%);
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.18));
}

.baggage-v2-start-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
}

.baggage-v2-start-card p {
  margin: 0;
  max-width: 48ch;
  font-weight: 900;
  line-height: 1.35;
}

.baggage-start-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.baggage-legacy-choice {
  border-style: dashed !important;
  background: rgba(255, 248, 227, 0.68) !important;
  color: #6d5437 !important;
  font-size: 0.84rem;
  box-shadow: none !important;
}

.baggage-dev-versions {
  width: min(440px, 100%);
  color: #755e42;
  font-size: 0.78rem;
}

.baggage-dev-versions summary {
  cursor: pointer;
  font-weight: 800;
}

.baggage-dev-versions .baggage-start-actions {
  margin-top: 8px;
}

.baggage-v4-game {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 9px;
  height: 100%;
  min-height: 0;
  color: #2f241c;
}

.baggage-v4-intro-scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: #c9e4ee;
}

.baggage-v4-intro-belt {
  position: absolute;
  left: -20%;
  bottom: 0;
  width: 140%;
  height: 156px;
}

.baggage-v4-intro-belt img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.baggage-v4-intro-dev {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  width: min(240px, 42%);
  border-radius: 6px;
  background: rgba(255, 248, 227, 0.86);
  padding: 7px 9px;
}

.baggage-v4-hud {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px 15px;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: rgba(255, 245, 216, 0.96);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
  padding: 7px clamp(150px, 16vw, 190px) 7px 10px;
  font-weight: 900;
}

.baggage-v4-hud strong {
  margin-right: 0;
}

.baggage-v4-playfield {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: #c9e4ee;
  box-shadow: inset 0 0 0 6px rgba(255, 249, 232, 0.42), 0 6px 0 rgba(0, 0, 0, 0.22);
}

.baggage-v4-receivers {
  position: absolute;
  z-index: 3;
  top: 72px;
  left: 46px;
  right: 46px;
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  gap: clamp(4px, 1vw, 14px);
  min-height: 238px;
  pointer-events: none;
}

.baggage-v4-receivers.has-felon {
  right: 46px;
}

.baggage-v4-receiver {
  position: relative;
  top: var(--receiver-offset, 14px);
  display: grid;
  place-items: end center;
  flex: 0 1 min(168px, calc(94% / var(--receiver-count)));
  width: min(168px, calc(94% / var(--receiver-count)));
  min-width: 0;
  min-height: 222px;
  border: 0;
  background: transparent;
  padding: 0 2px 12px;
  cursor: pointer;
  box-shadow: none;
  pointer-events: auto;
  transition: filter 150ms ease, transform 150ms ease, opacity 150ms ease;
}

.baggage-v4-receiver:hover,
.baggage-v4-receiver:focus-visible {
  outline: 0;
  filter: brightness(1.06);
}

.baggage-v4-receiver-image {
  width: 100%;
  height: 220px;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  filter: drop-shadow(0 7px 0 rgba(0, 0, 0, 0.18));
}

.baggage-v4-receiver.receiver-toffiDisguise {
  flex-basis: min(150px, calc(92% / var(--receiver-count)));
  width: min(150px, calc(92% / var(--receiver-count)));
}

.baggage-v4-receiver.receiver-toffiDisguise .baggage-v4-receiver-image {
  height: 205px;
}

.baggage-v4-receiver .baggage-angry-bubble {
  position: absolute;
  z-index: 5;
  top: -4px;
  right: 0;
  width: 62px;
  height: 52px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.18));
}

.baggage-v4-receiver.is-correct {
  animation: baggage-v4-happy 760ms ease both;
  filter: brightness(1.16) saturate(1.22) drop-shadow(0 0 18px rgba(255, 231, 83, 0.92));
}

.baggage-v4-receiver.is-wrong1 {
  animation: baggage-v4-angry 420ms ease both;
}

.baggage-v4-receiver.is-wrong2 {
  animation: baggage-v4-angry-exit 760ms ease both;
  filter: saturate(1.35) drop-shadow(0 0 15px rgba(203, 42, 42, 0.82));
}

.baggage-v4-receiver.is-gone {
  visibility: hidden;
  pointer-events: none;
}

.baggage-v4-receiver.is-felon {
  position: absolute;
  top: 244px;
  width: 118px;
  min-height: 170px;
  z-index: 9;
  transform: translateX(-50%);
  transition: none;
}

.baggage-v4-receiver.is-felon.is-entering {
  filter: drop-shadow(0 0 13px rgba(216, 45, 45, 0.86));
}

.baggage-v4-receiver.is-felon.is-waiting,
.baggage-v4-receiver.is-felon.is-grabbing {
  filter: drop-shadow(0 0 13px rgba(216, 45, 45, 0.86));
}

.baggage-v4-receiver.is-felon.is-exiting,
.baggage-v4-receiver.is-felon.is-emptyExit {
  filter: drop-shadow(0 0 13px rgba(216, 45, 45, 0.86));
}

.baggage-v4-receiver.is-felon .baggage-v4-event-pop:empty {
  display: none;
}

.baggage-v4-stolen-bag {
  position: absolute;
  right: 4px;
  bottom: 16px;
  width: 64px;
  height: 58px;
  object-fit: contain;
  transform: rotate(9deg);
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.baggage-v4-felon-alert {
  position: absolute;
  z-index: 11;
  top: 10px;
  right: 12px;
  display: grid;
  gap: 2px;
  width: min(270px, 38%);
  border: 3px solid #842f31;
  border-radius: 8px;
  background: rgba(255, 239, 205, 0.97);
  color: #632226;
  padding: 8px 10px 11px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22);
  text-align: center;
  pointer-events: none;
}

.baggage-v4-felon-alert strong {
  font-size: 0.94rem;
}

.baggage-v4-felon-alert span {
  font-size: 0.82rem;
  font-weight: 900;
}

.baggage-v4-felon-alert i {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 3px;
  height: 4px;
  border-radius: 2px;
  background: #c9403f;
  transform-origin: left;
  animation: baggage-v4-felon-timer var(--felon-phase-duration, 2600ms) linear both;
  animation-delay: var(--felon-phase-delay, 0ms);
}

.baggage-v4-receiver.is-felon.is-bonked {
  animation: baggage-v4-bonk 760ms ease both;
}

.baggage-v4-receiver.is-felon.is-escaped,
.baggage-v4-receiver.is-felon.is-escapedEmpty {
  animation: baggage-v4-felon-exit 760ms ease both;
}

.baggage-v4-event-pop {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  border: 3px solid #5d4b34;
  border-radius: 999px;
  background: #fff2a6;
  color: #277a38;
  padding: 6px 11px;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
  pointer-events: none;
  animation: baggage-match-pop 760ms ease both;
}

.baggage-v4-receiver.is-wrong2 .baggage-v4-event-pop,
.baggage-v4-receiver.is-felon.is-escaped .baggage-v4-event-pop {
  background: #ffd3ce;
  color: #a51e22;
}

.baggage-v4-broom {
  position: absolute;
  z-index: 7;
  right: auto;
  left: 4px;
  bottom: 150px;
  width: 92px;
  height: 138px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  box-shadow: none;
  touch-action: none;
}

.baggage-v4-broom img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(8deg);
  pointer-events: none;
}

.baggage-v4-broom.is-ready {
  animation: baggage-v4-broom-alert 520ms ease-in-out infinite alternate;
}

.baggage-v4-broom.is-selected,
.baggage-v4-bag.is-selected {
  outline: 0;
}

.baggage-v4-belt {
  position: absolute;
  z-index: 2;
  left: -20%;
  bottom: 0;
  width: 140%;
  height: 184px;
}

.baggage-v4-belt > img {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 156px;
  object-fit: fill;
  pointer-events: none;
  filter: drop-shadow(0 -4px 0 rgba(0, 0, 0, 0.16));
}

.baggage-v4-bag {
  position: absolute;
  z-index: 5;
  bottom: 82px;
  width: var(--bag-size);
  height: calc(var(--bag-size) * 0.86);
  min-width: 58px;
  min-height: 52px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: default;
  pointer-events: none;
  transform: translateX(-50%);
  transition: bottom 130ms ease, filter 130ms ease, transform 130ms ease;
  touch-action: none;
}

.baggage-v4-bag.is-onstage {
  cursor: grab;
  pointer-events: auto;
}

.baggage-v4-bag img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 7px 0 rgba(0, 0, 0, 0.2));
}

.baggage-v4-bag:hover,
.baggage-v4-bag:focus-visible {
  outline: 0;
  filter: brightness(1.08);
}

.baggage-v4-bag.is-selected {
  bottom: 94px;
  transform: translateX(-50%) scale(1.12);
  filter: brightness(1.12) saturate(1.12);
}

.baggage-v4-bag.is-drag-source,
.baggage-v4-broom.is-drag-source {
  opacity: 0;
}

.baggage-v4-drag-ghost {
  position: fixed !important;
  z-index: 1000 !important;
  left: var(--drag-x) !important;
  top: var(--drag-y) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) scale(1.12) !important;
  filter: brightness(1.1) drop-shadow(0 9px 7px rgba(0, 0, 0, 0.28));
  pointer-events: none;
  cursor: grabbing;
  width: 112px;
  height: 106px;
  border: 0;
  background: transparent;
  padding: 0;
}

.baggage-v4-drag-ghost img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.baggage-v4-drag-ghost.is-broom {
  width: 92px;
  height: 138px;
}

.baggage-v4-bag.is-felon-target {
  animation: baggage-v4-stolen-warning 180ms ease-in-out infinite alternate;
  filter: drop-shadow(0 0 12px rgba(208, 36, 36, 0.88));
}

.baggage-v4-level-card {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  background: rgba(40, 63, 78, 0.68);
  color: #fff9df;
  text-align: center;
  animation: baggage-v4-level-card 1300ms ease both;
}

.baggage-v4-level-card strong {
  font-family: var(--font-display);
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: #fff4c9;
  color: #3f3022;
  padding: 14px 22px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.24);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}

@keyframes baggage-v4-happy {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-16px) scale(1.08) rotate(-2deg); }
  68% { transform: translateY(-6px) scale(1.04) rotate(2deg); }
}

@keyframes baggage-v4-angry {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px) rotate(-2deg); }
  75% { transform: translateX(8px) rotate(2deg); }
}

@keyframes baggage-v4-angry-exit {
  0% { opacity: 1; transform: translateX(0) rotate(0); }
  24% { transform: translateX(-9px) rotate(-3deg); }
  52% { transform: translateX(10px) rotate(3deg); }
  100% { opacity: 0; transform: translateX(120px) rotate(8deg); }
}

@keyframes baggage-v4-bonk {
  0% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(8px) rotate(12deg) scale(0.94); }
  100% { opacity: 0; transform: translateX(90px) rotate(18deg); }
}

@keyframes baggage-v4-felon-exit {
  to { opacity: 0; transform: translateX(120px) rotate(7deg); }
}

@keyframes baggage-v4-broom-alert {
  from { transform: rotate(-3deg); }
  to { transform: rotate(5deg) scale(1.08); }
}

@keyframes baggage-v4-felon-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes baggage-v4-stolen-warning {
  from { transform: translateX(-50%) rotate(-4deg) scale(1); }
  to { transform: translateX(-50%) rotate(4deg) scale(1.06); }
}

@keyframes baggage-v4-level-card {
  0% { opacity: 0; }
  18%, 78% { opacity: 1; }
  100% { opacity: 0; }
}

.baggage-v3-game {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  height: 100%;
  min-height: 0;
  color: #2f241c;
}

.baggage-v3-hud {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 14px;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: rgba(255, 245, 216, 0.96);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
  padding: 7px 10px;
  font-weight: 900;
}

.baggage-v3-hud strong {
  margin-right: auto;
}

.baggage-v3-phase,
.baggage-prototype-tag {
  border-radius: 999px;
  background: #e8d39f;
  color: #49351f;
  font-size: 0.78rem;
  padding: 3px 8px;
}

.baggage-prototype-tag {
  border: 1px dashed #735537;
  background: #fff4d5;
}

.baggage-v3-playfield {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: #c9e4ee;
  box-shadow: inset 0 0 0 6px rgba(255, 249, 232, 0.42), 0 6px 0 rgba(0, 0, 0, 0.22);
}

.baggage-v3-receivers {
  position: absolute;
  z-index: 3;
  top: 24px;
  left: 80px;
  right: 80px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(34px, 7vw, 110px);
  min-height: 245px;
  pointer-events: none;
}

.baggage-v3-receiver {
  position: relative;
  top: var(--receiver-offset, 14px);
  display: grid;
  place-items: end center;
  width: clamp(150px, 21%, 210px);
  min-height: 235px;
  border: 0;
  background: transparent;
  padding: 0 8px 26px;
  cursor: pointer;
  box-shadow: none;
  pointer-events: auto;
  transition: filter 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.baggage-v3-receiver:hover,
.baggage-v3-receiver:focus-visible {
  outline: 0;
  filter: drop-shadow(0 0 8px rgba(255, 242, 166, 0.58));
}

.baggage-v3-receiver-image {
  width: 100%;
  height: 205px;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.18));
}

.baggage-v3-receiver.is-correct {
  filter: brightness(1.12) saturate(1.12) drop-shadow(0 0 14px rgba(255, 242, 166, 0.76));
}

.baggage-v3-receiver.is-missed {
  opacity: 0.72;
  transform: translateX(18px) rotate(2deg);
}

.baggage-v3-receiver.is-felon {
  width: clamp(130px, 18%, 180px);
  animation: baggage-receiver-enter-right 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.baggage-v3-receiver .baggage-angry-bubble {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  width: 62px;
  height: 52px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.18));
}

.baggage-patience {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: max-content;
  border: 2px solid #5d4b34;
  border-radius: 999px;
  background: rgba(255, 245, 216, 0.94);
  color: #b73c2f;
  font-weight: 1000;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 5px 9px;
  pointer-events: none;
}

.baggage-v3-broom {
  position: absolute;
  z-index: 6;
  right: 8px;
  bottom: 160px;
  width: 112px;
  height: 160px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  box-shadow: none;
  transition: filter 150ms ease, transform 150ms ease;
}

.baggage-v3-broom img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(8deg);
  pointer-events: none;
}

.baggage-v3-broom.is-ready {
  filter: drop-shadow(0 0 8px rgba(255, 224, 92, 0.7));
}

.baggage-v3-broom.is-selected,
.baggage-v3-bag.is-selected {
  outline: 4px solid #f7d160;
  outline-offset: 2px;
}

.baggage-v3-belt {
  position: absolute;
  z-index: 2;
  left: -18%;
  bottom: 0;
  width: 136%;
  height: 185px;
}

.baggage-v3-belt > img {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 158px;
  object-fit: fill;
  pointer-events: none;
  filter: drop-shadow(0 -4px 0 rgba(0, 0, 0, 0.16));
}

.baggage-v3-bag {
  position: absolute;
  z-index: 4;
  bottom: 72px;
  width: 156px;
  height: 134px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transform: translateX(-50%);
  transition: bottom 140ms ease, filter 140ms ease, transform 140ms ease;
}

.baggage-v3-bag img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.2));
}

.baggage-v3-bag:hover,
.baggage-v3-bag:focus-visible {
  outline: 3px solid rgba(255, 242, 166, 0.9);
  outline-offset: -5px;
  border-radius: 8px;
}

.baggage-v3-bag.is-selected {
  bottom: 98px;
  transform: translateX(-50%) scale(1.08);
  filter: brightness(1.08) saturate(1.08);
}

.baggage-v3-result {
  position: relative;
  width: min(900px, 96%);
  aspect-ratio: 3 / 2;
  max-height: 96%;
  margin: auto;
  color: #2f241c;
  text-align: center;
}

.baggage-result-diploma {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.baggage-result-copy {
  position: absolute;
  inset: 15% 12% 13%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  min-width: 0;
}

.baggage-v3-result h3,
.baggage-v3-result p {
  margin: 0;
}

.baggage-v3-result dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(690px, 100%);
  margin: 0;
}

.baggage-v3-result dl div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  border-bottom: 1px solid rgba(93, 75, 52, 0.38);
  padding: 6px 8px;
  text-align: left;
}

.baggage-v3-result dt {
  font-weight: 800;
}

.baggage-v3-result dd {
  margin: 0;
  font-weight: 1000;
}

.baggage-v4-result.is-passed h3 {
  color: #23733b;
}

.baggage-v4-result.is-failed h3 {
  color: #a3282e;
}

.baggage-v4-result h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.baggage-v2-game {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  height: 100%;
  min-height: 0;
  color: #2f241c;
}

.baggage-v2-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: rgba(255, 245, 216, 0.96);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
  padding: 8px 10px;
  font-weight: 1000;
}

.baggage-v2-hud .baggage-feedback {
  flex: 1 1 380px;
  min-height: 0;
  margin-left: auto;
  padding: 6px 10px;
}

.baggage-v2-playfield {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(238, 247, 255, 0.95) 0%, rgba(201, 228, 238, 0.96) 48%, rgba(183, 199, 185, 0.98) 100%);
  box-shadow: inset 0 0 0 6px rgba(255, 249, 232, 0.55), 0 6px 0 rgba(0, 0, 0, 0.22);
}

.baggage-waiting-hall-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.baggage-receiver-row {
  position: absolute;
  z-index: 3;
  inset: 48px 28px auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 28px);
  min-height: 270px;
  pointer-events: none;
}

.baggage-receiver {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: center;
  flex: 0 1 min(18%, 190px);
  min-width: 0;
  min-height: 238px;
  border: 0;
  background: transparent;
  color: #2f241c;
  cursor: pointer;
  padding: 0;
  font-weight: 1000;
  box-shadow: none;
  pointer-events: auto;
  top: var(--receiver-y-offset, 14px);
}

.baggage-receiver.enters-from-left {
  animation: baggage-receiver-enter-left 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.baggage-receiver.enters-from-right {
  animation: baggage-receiver-enter-right 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.baggage-receiver:hover,
.baggage-receiver:focus-visible {
  outline: 0;
  filter: drop-shadow(0 0 10px rgba(255, 242, 166, 0.28));
}

.baggage-receiver img {
  width: 100%;
  max-width: 180px;
  height: 215px;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  filter: drop-shadow(0 9px 0 rgba(0, 0, 0, 0.2));
}

.baggage-receiver.is-felon {
  background: transparent;
  border-color: transparent;
}

.baggage-receiver.is-bonked {
  filter: saturate(1.15) brightness(1.04);
}

.baggage-receiver.is-matched {
  filter: brightness(1.08) saturate(1.12) drop-shadow(0 0 16px rgba(255, 242, 166, 0.72));
}

.baggage-receiver .baggage-angry-bubble {
  position: absolute;
  top: 0;
  right: clamp(14px, 18%, 36px);
  z-index: 2;
  width: clamp(42px, 5vw, 68px);
  height: clamp(34px, 4vw, 56px);
  border: 0;
  background: transparent;
  object-fit: contain;
  padding: 0;
  pointer-events: none;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.18));
}

.baggage-match-pop {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  border: 3px solid #5d4b34;
  border-radius: 999px;
  background: #fff2a6;
  color: #2f7436;
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  font-weight: 1000;
  line-height: 1;
  padding: 7px 12px;
  pointer-events: none;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18);
  animation: baggage-match-pop 720ms ease both;
}

.baggage-broom {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 178px;
  width: 104px;
  height: 150px;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: grab;
  padding: 0;
  box-shadow: none;
}

.baggage-broom.is-selected,
.baggage-moving-bag.is-selected {
  outline: 4px solid #f7d160;
  outline-offset: 2px;
}

.baggage-broom img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform: rotate(8deg);
}

.baggage-belt-v2 {
  position: absolute;
  z-index: 2;
  left: -18%;
  right: auto;
  bottom: 0;
  width: 136%;
  height: 190px;
  overflow: visible;
}

.baggage-belt-v2 > img {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 160px;
  object-fit: fill;
  pointer-events: none;
  filter: drop-shadow(0 -4px 0 rgba(0, 0, 0, 0.16));
}

.baggage-moving-bag {
  position: absolute;
  z-index: 3;
  bottom: 78px;
  display: grid;
  justify-items: center;
  width: 170px;
  border: 0;
  background: transparent;
  color: #2f241c;
  cursor: grab;
  font-weight: 1000;
  transform: translateX(-50%);
}

.baggage-moving-bag img {
  width: 164px;
  height: 128px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.2));
}

.baggage-moving-bag span {
  display: none;
}

@keyframes baggage-receiver-enter-left {
  from {
    opacity: 0;
    transform: translateX(-90px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes baggage-receiver-enter-right {
  from {
    opacity: 0;
    transform: translateX(90px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes baggage-match-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.74);
  }

  26% {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px) scale(1.12);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-18px) scale(1);
  }
}

.baggage-stage,
.baggage-side,
.baggage-result {
  min-height: 0;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: rgba(255, 245, 216, 0.96);
  color: #2f241c;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22);
  padding: clamp(14px, 2vw, 22px);
}

.baggage-stage {
  display: grid;
  grid-template-rows: auto minmax(260px, 1fr) auto;
  gap: 14px;
}

.baggage-instructions {
  display: grid;
  gap: 6px;
  text-align: center;
}

.baggage-instructions h3,
.baggage-result h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.baggage-instructions p,
.baggage-result p {
  margin: 0;
  font-weight: 900;
  line-height: 1.35;
}

.baggage-conveyor {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  border: 4px solid #5d4b34;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    #758b90;
  overflow: hidden;
}

.baggage-belt-strip {
  position: absolute;
  inset: 18% 4%;
  border: 4px solid rgba(47, 36, 28, 0.75);
  border-radius: 999px;
  background:
    url("assets/minigames/baggage/conveyor-belt-segment.png") center / 170px auto repeat-x,
    #52686f;
  opacity: 0.92;
  animation: baggage-belt 4s linear infinite;
}

.baggage-current-bag {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #2f241c;
  cursor: default;
  font-weight: 1000;
}

.baggage-current-bag img {
  width: min(34vw, 270px);
  max-height: 250px;
  object-fit: contain;
  filter: drop-shadow(0 12px 0 rgba(0, 0, 0, 0.22));
}

.baggage-current-bag span {
  border: 2px solid #5d4b34;
  border-radius: 999px;
  background: rgba(255, 245, 216, 0.94);
  padding: 6px 12px;
}

.baggage-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.baggage-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  border: 2px solid #5d4b34;
  border-radius: 8px;
  background: #fff4d5;
  padding: 10px;
  font-weight: 1000;
}

.baggage-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  min-height: 0;
}

.baggage-target-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 136px;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: #fff9e8;
  color: #2f241c;
  cursor: pointer;
  font-weight: 1000;
  padding: 8px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
  transition: transform 100ms ease, filter 100ms ease;
}

.baggage-target-card:hover,
.baggage-target-card:focus-visible {
  filter: brightness(1.05);
  outline: 3px solid #fff2a6;
  outline-offset: 2px;
  transform: translateY(-2px);
}

.baggage-target-card img {
  width: 100%;
  height: 92px;
  object-fit: contain;
  pointer-events: none;
}

.baggage-target-card.is-lost-found {
  background: #dfe9d5;
}

.baggage-lost-icon {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 4px dashed #5d4b34;
  border-radius: 8px;
  background: #fff4d5;
  font-size: 3rem;
  font-family: var(--font-display);
}

.baggage-feedback {
  min-height: 52px;
  border: 2px solid #5d4b34;
  border-radius: 8px;
  background: #fff4d5;
  padding: 10px 12px;
  font-weight: 900;
  line-height: 1.35;
}

.baggage-feedback.is-note {
  color: #604126;
}

.baggage-feedback.is-good {
  color: #2f7436;
}

.baggage-feedback.is-bad {
  color: #9a3326;
}

.baggage-result {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  height: 100%;
  text-align: center;
}

.baggage-reward-icon {
  width: min(220px, 42%);
  object-fit: contain;
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.18));
}

@keyframes baggage-belt {
  from {
    background-position: 0 center;
  }

  to {
    background-position: 170px center;
  }
}

.scene-game-layer[data-scene-mode="controlPanel"] {
  background:
    linear-gradient(180deg, rgba(36, 61, 69, 0.96), rgba(27, 38, 41, 0.98)),
    #263d45;
}

.control-panel-game {
  height: 100%;
  min-height: 0;
  color: #fff5d8;
}

.control-panel-overview {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
}

.control-panel-shell {
  min-height: 0;
  border: 4px solid #5d4b34;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(118, 143, 142, 0.42), rgba(20, 39, 44, 0.78)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 18px, transparent 18px 36px),
    #314b51;
  box-shadow: inset 0 0 0 5px rgba(255, 245, 216, 0.16), 0 8px 0 rgba(0, 0, 0, 0.24);
  padding: clamp(16px, 2.3vw, 30px);
}

.control-panel-button-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-content: center;
  gap: clamp(10px, 1.6vw, 20px);
  height: 100%;
}

.control-panel-button-card {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1 / 1;
}

.control-panel-button-card img,
.control-panel-target img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.24));
  pointer-events: none;
}

.control-panel-button-card span {
  position: absolute;
  left: 50%;
  bottom: 5%;
  min-width: 64%;
  transform: translateX(-50%);
  border: 2px solid #5d4b34;
  border-radius: 999px;
  background: rgba(255, 245, 216, 0.93);
  color: #2f241c;
  font-size: clamp(0.78rem, 1vw, 1rem);
  font-weight: 1000;
  line-height: 1;
  padding: 5px 8px;
  text-align: center;
  text-transform: uppercase;
}

.control-panel-button-card.is-sausage span {
  background: rgba(255, 226, 153, 0.95);
}


.control-panel-puzzle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.control-panel-programmer,
.control-panel-actions,
.control-panel-result {
  min-height: 0;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: rgba(255, 245, 216, 0.95);
  color: #2f241c;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22);
  padding: clamp(14px, 2vw, 24px);
}

.control-panel-programmer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
}

.control-panel-instructions {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}

.control-panel-instructions h3,
.control-panel-result h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
}

.control-panel-instructions p {
  max-width: 62ch;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.35;
}

.control-panel-targets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  min-height: 0;
}

.control-panel-target {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1 / 1.08;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.control-panel-target:hover,
.control-panel-target:focus-visible,
.panel-label-chip:focus-visible {
  outline: 3px solid #fff2a6;
  outline-offset: 3px;
}

.control-panel-target.has-label .target-label {
  background: rgba(255, 245, 216, 0.98);
}

.target-label {
  position: absolute;
  left: 50%;
  bottom: -3%;
  width: min(88%, 170px);
  transform: translateX(-50%);
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: rgba(255, 245, 216, 0.86);
  color: #2f241c;
  font-size: clamp(0.78rem, 1.2vw, 1.08rem);
  font-weight: 1000;
  line-height: 1.05;
  padding: 8px 6px;
  pointer-events: none;
  text-align: center;
}

.control-panel-label-bank {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.panel-label-chip {
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: #f7e0a5;
  box-shadow: 0 4px 0 rgba(96, 65, 38, 0.28);
  color: #2f241c;
  cursor: grab;
  font-size: clamp(0.9rem, 1.2vw, 1.08rem);
  font-weight: 1000;
  padding: 10px;
  text-align: center;
}

.panel-label-chip.is-selected {
  background: #fff2a6;
  outline: 3px solid #164f72;
}

.control-panel-result p {
  margin: 0;
}

.control-panel-actions {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.control-panel-actions .choice {
  margin-top: 0;
}

.control-panel-feedback {
  min-height: 34px;
  font-weight: 900;
}

.control-panel-feedback.is-note {
  color: #604126;
}

.control-panel-feedback.is-bad {
  color: #9a3326;
}

.control-panel-feedback.is-good {
  color: #2f7436;
}

.control-panel-result {
  display: grid;
  align-content: center;
  justify-items: center;
  height: 100%;
  gap: 16px;
  text-align: center;
}

.control-panel-simon {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
}

.control-panel-simon-board {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: rgba(255, 245, 216, 0.95);
  color: #2f241c;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22);
  padding: clamp(12px, 1.6vw, 18px);
}

.control-panel-simon-start .control-panel-simon-board,
.control-panel-simon-complete .control-panel-simon-board {
  grid-template-rows: minmax(0, 1fr);
}

.control-panel-simon-card {
  align-self: center;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(620px, 86%);
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: rgba(255, 252, 238, 0.96);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.18);
  padding: clamp(24px, 3vw, 38px);
  text-align: center;
}

.control-panel-simon-card h3 {
  margin: 0;
  color: #2f241c;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
}

.control-panel-simon-card p {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.45;
}

.control-panel-simon-card.is-complete {
  background: rgba(247, 255, 232, 0.97);
}

.control-panel-simon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(112px, 170px));
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: clamp(10px, 1.4vw, 18px);
  min-height: 0;
  overflow: hidden;
}

.control-panel-simon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(112px, 11vw, 170px);
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 0.9;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: filter 120ms ease, transform 120ms ease;
}

.control-panel-simon-button:hover,
.control-panel-simon-button:focus-visible {
  outline: 3px solid #fff2a6;
  outline-offset: 3px;
}

.control-panel-simon-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.24));
  pointer-events: none;
}

.control-panel-simon-button span {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: min(88%, 142px);
  transform: translateX(-50%);
  border: 2px solid #5d4b34;
  border-radius: 999px;
  background: rgba(255, 245, 216, 0.95);
  color: #2f241c;
  font-size: clamp(0.68rem, 0.9vw, 0.88rem);
  font-weight: 1000;
  line-height: 1;
  padding: 5px 7px;
  pointer-events: none;
  text-align: center;
}

.control-panel-simon-button small {
  position: absolute;
  right: 8%;
  top: 9%;
  border: 2px solid #5d4b34;
  border-radius: 999px;
  background: #fff2a6;
  color: #2f241c;
  font-size: 0.68rem;
  font-weight: 1000;
  padding: 3px 6px;
  pointer-events: none;
}

.control-panel-simon-button.is-flashing {
  animation: simon-flash 520ms ease both;
  filter: brightness(1.7) saturate(1.75) drop-shadow(0 0 24px rgba(255, 242, 166, 0.95));
  z-index: 3;
}

.control-panel-simon-button.is-pressed {
  animation: simon-press 420ms ease both;
  filter: brightness(0.86) saturate(1.2) drop-shadow(0 0 16px rgba(64, 168, 255, 0.72));
  z-index: 2;
}

@keyframes security-wobble {
  from {
    rotate: -3deg;
  }

  to {
    rotate: 3deg;
  }
}

@keyframes simon-flash {
  0% {
    transform: scale(1);
    outline: 0 solid rgba(255, 242, 166, 0);
  }

  18% {
    transform: scale(1.16);
    outline: 7px solid rgba(255, 242, 166, 0.98);
    outline-offset: 5px;
    filter: brightness(1.95) saturate(1.9) drop-shadow(0 0 30px rgba(255, 242, 166, 1));
  }

  62% {
    transform: scale(1.1);
    outline: 5px solid rgba(255, 255, 255, 0.88);
    outline-offset: 7px;
    filter: brightness(1.75) saturate(1.75) drop-shadow(0 0 24px rgba(255, 242, 166, 0.95));
  }

  100% {
    transform: scale(1);
    outline: 0 solid rgba(255, 242, 166, 0);
  }
}

@keyframes simon-press {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(0.92);
  }

  70% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes radio-pulse {
  from {
    transform: scaleY(0.74);
    opacity: 0.74;
  }

  to {
    transform: scaleY(1.05);
    opacity: 1;
  }
}

@keyframes hit-pop {
  0% {
    transform: translateX(-50%) scale(1);
  }

  55% {
    transform: translateX(-50%) scale(1.08);
  }

  100% {
    transform: translateX(-50%) scale(0.96);
  }
}

@media (min-width: 1041px) {
  .game-shell {
    width: min(1480px, calc(100vw - 32px));
    padding-top: 14px;
  }

  .game-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
  }

  .top-bar {
    width: min(100%, calc(max(430px, 100vh - 270px) * 1.7768));
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
  }

  h1 {
    font-size: clamp(2.4rem, 4.4vw, 3.7rem);
  }

  .scene-column {
    width: min(100%, calc(max(430px, 100vh - 270px) * 1.7768));
    justify-self: center;
  }

  .scene.is-minigame {
    height: clamp(440px, calc(100vh - 300px), 720px);
    min-height: 440px;
  }

  .scene-game-content .paper-body {
    height: min(100%, 640px);
    width: min(920px, 100%);
    max-width: 100%;
  }

  .scene-game-content .paper-letter-content {
    padding: 40px 76px 42px;
  }

  .paper-grid {
    grid-template-columns: repeat(3, minmax(0, 200px));
    gap: 10px 8px;
  }

  .paper-card {
    min-height: 120px;
    aspect-ratio: 1.6 / 1;
  }

  .paper-status-image {
    top: -3%;
    right: -1%;
    width: min(29%, 96px);
  }

  .runway-game,
  .security-game {
    height: 100%;
    min-height: 0;
  }

  .runway-game {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .runway-field {
    align-content: center;
  }

  .security-game {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .security-field {
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 1040px) {
  .game-layout {
    grid-template-columns: 1fr;
  }

  .right-panel {
    order: 2;
  }

  .scene-column {
    order: 1;
  }

  .scene {
    min-height: 420px;
  }

  .scene:not(.is-minigame) {
    min-height: 0;
  }

  .security-field {
    height: auto;
    min-height: 0;
  }

  .baggage-game {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow-y: auto;
  }

  .baggage-side {
    grid-template-rows: auto auto;
  }
}

@media (max-width: 680px) {
  .game-shell {
    width: min(100vw - 18px, 1420px);
    padding-top: 10px;
  }

  .top-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .scene {
    min-height: 0;
  }

  .scene-column {
    grid-template-rows: auto minmax(116px, auto);
  }

  body:has(.scene-game-layer[data-scene-mode="papers"]:not([hidden])) .scene {
    aspect-ratio: auto;
    min-height: min(620px, calc(100vh - 220px));
  }

  body:has(.scene-game-layer[data-scene-mode="baggage"]:not([hidden])) .scene {
    min-height: min(620px, calc(100vh - 120px));
  }

  .scene-game-layer {
    padding: 10px;
  }

  .scene-game-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .scene-game-actions {
    justify-content: stretch;
  }

  .scene-game-actions .secondary-button {
    flex: 1 1 150px;
  }

  .scene-game-topbar .secondary-button {
    width: 100%;
  }

  .asset-hotspot::after {
    content: "";
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  .paper-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scene-game-content .paper-desk {
    gap: 8px;
  }

  .scene-game-content .paper-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow-x: hidden;
  }

  .scene-game-content .paper-card {
    min-height: 78px;
  }

  .paper-envelope-title {
    left: 13%;
    top: 23%;
    width: 68%;
    height: 31%;
    padding: 0 5px;
    font-size: 0.74rem;
  }

  .paper-status-image {
    top: -4%;
    right: -2%;
    width: min(34%, 72px);
  }

  .scene-game-content .paper-letter-content {
    padding: 38px 36px 44px;
  }

  .paper-reader {
    position: relative;
  }

  .paper-zoom-button {
    display: inline-flex;
    position: absolute;
    z-index: 6;
    right: 8px;
    bottom: 8px;
    width: auto;
    margin: 0;
    padding: 7px 10px;
    font-size: 0.76rem;
  }

  .paper-spread.is-zoomed {
    display: block;
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .paper-spread.is-zoomed .paper-body.paper-image-document,
  .paper-spread.is-zoomed .paper-letter-image {
    width: 820px;
    height: auto;
    max-width: none;
    max-height: none;
  }

  .paper-letterhead {
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }

  .paper-letterhead h3 {
    font-size: 0.94rem;
  }

  .paper-body p {
    font-size: 0.82rem;
  }

  .paper-agency-logo {
    width: min(31%, 82px);
  }

  .runway-field {
    grid-template-columns: repeat(3, minmax(56px, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .security-field {
    height: auto;
    min-height: 0;
  }

  .radio-game {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .radio-console {
    min-height: 220px;
  }

  .radio-options {
    grid-template-columns: 1fr;
  }

  .control-panel-button-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .control-panel-puzzle {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .control-panel-targets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-panel-label-bank {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-panel-simon-grid {
    grid-template-columns: repeat(2, minmax(96px, 140px));
  }

  .control-panel-simon-button {
    width: clamp(96px, 32vw, 140px);
  }

  .control-panel-actions {
    grid-template-columns: 1fr;
  }

  .fuel-game,
  .baggage-game {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .fuel-board {
    grid-template-columns: repeat(var(--fuel-cols), var(--fuel-cell-size));
    grid-template-rows: repeat(var(--fuel-rows), var(--fuel-cell-size));
  }

  .fuel-instructions {
    padding: 0 42px;
  }

  .fuel-instructions p {
    white-space: normal;
  }

  .baggage-current-bag img {
    width: min(58vw, 190px);
  }

  .baggage-target-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .baggage-target-card {
    min-height: 118px;
  }

  .baggage-v4-game {
    gap: 6px;
  }

  .baggage-v4-hud {
    gap: 4px 8px;
    padding: 5px 145px 5px 7px;
    font-size: 0.72rem;
  }

  .baggage-v4-hud strong {
    flex: 1 0 100%;
  }

  .baggage-v4-playfield {
    min-height: 390px;
  }

  .baggage-v4-receivers,
  .baggage-v4-receivers.has-felon {
    top: 42px;
    left: 3px;
    right: 3px;
    gap: 0;
    min-height: 170px;
  }

  .baggage-v4-receiver {
    width: calc(98% / var(--receiver-count));
    min-height: 150px;
    padding: 0 0 6px;
  }

  .baggage-v4-receiver-image {
    height: 134px;
  }

  .baggage-v4-receiver.receiver-toffiDisguise {
    min-height: 144px;
  }

  .baggage-v4-receiver.receiver-toffiDisguise .baggage-v4-receiver-image {
    height: 126px;
  }

  .baggage-v4-receiver .baggage-angry-bubble {
    width: 40px;
    height: 36px;
  }

  .baggage-v4-receiver.is-felon {
    right: -2px;
    top: 190px;
    width: 82px;
    min-height: 126px;
  }

  .baggage-v4-receiver.is-felon .baggage-v4-receiver-image {
    height: 116px;
  }

  .baggage-v4-broom {
    right: auto;
    left: 0;
    bottom: 112px;
    width: 64px;
    height: 98px;
  }

  .baggage-v4-felon-alert {
    top: 4px;
    right: 4px;
    width: min(210px, 62%);
    padding: 5px 7px 9px;
  }

  .baggage-v4-felon-alert strong {
    font-size: 0.72rem;
  }

  .baggage-v4-belt {
    left: -30%;
    width: 160%;
    height: 138px;
  }

  .baggage-v4-belt > img {
    height: 112px;
  }

  .baggage-v4-bag {
    bottom: 47px;
    width: clamp(54px, calc(var(--bag-size) * 0.68), 86px);
    height: clamp(48px, calc(var(--bag-size) * 0.58), 74px);
  }

  .baggage-v4-bag.is-selected {
    bottom: 64px;
  }

  .baggage-v4-event-pop {
    border-width: 2px;
    padding: 4px 7px;
    font-size: 0.78rem;
  }

  .baggage-v3-game {
    gap: 6px;
  }

  .baggage-v3-hud {
    gap: 4px 8px;
    padding: 5px 7px;
    font-size: 0.75rem;
  }

  .baggage-v3-hud strong {
    flex: 1 0 100%;
  }

  .baggage-v3-phase,
  .baggage-prototype-tag {
    font-size: 0.68rem;
  }

  .baggage-v3-receivers {
    top: 8px;
    left: 8px;
    right: 8px;
    gap: 4px;
    min-height: 178px;
  }

  .baggage-v3-receiver,
  .baggage-v3-receiver.is-felon {
    width: min(43%, 150px);
    min-height: 176px;
    padding: 0 2px 22px;
  }

  .baggage-v3-receiver-image {
    height: 150px;
  }

  .baggage-v3-receiver .baggage-angry-bubble {
    width: 48px;
    height: 42px;
  }

  .baggage-patience {
    padding: 4px 7px;
    font-size: 0.72rem;
  }

  .baggage-v3-belt {
    left: -28%;
    width: 156%;
    height: 142px;
  }

  .baggage-v3-belt > img {
    height: 116px;
  }

  .baggage-v3-bag {
    bottom: 50px;
    width: 92px;
    height: 82px;
  }

  .baggage-v3-bag.is-selected {
    bottom: 68px;
  }

  .baggage-v3-broom {
    right: 2px;
    bottom: 108px;
    width: 70px;
    height: 108px;
  }

  .baggage-v3-result {
    padding: 0;
  }

  .security-scanner {
    width: 88%;
    font-size: 0.74rem;
    padding: 7px 8px;
  }

  .security-item {
    width: 54px !important;
    height: 54px !important;
  }

  .dialog {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: 74px 1fr;
    min-height: 116px;
    padding: 10px;
  }

  .dialog-speaker-stack {
    grid-template-columns: 1fr;
  }

  .dialog-sprite {
    width: 70px;
    height: 90px;
  }

  .dialog p {
    font-size: 0.95rem;
  }
}

/* Generated letter artwork replaces the old HTML-on-template letter layout. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.scene-game-content .paper-reader {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.scene-game-content .paper-spread {
  align-items: center;
  overflow: hidden;
  padding: 0;
}

.scene-game-content .paper-body.paper-image-document {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  box-shadow: none;
}

.paper-letter-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}


/* Källaren och alienjakten */
.asset-hotspot.basementHatch {
  z-index: 2;
  filter: drop-shadow(0 5px 4px rgba(26, 14, 6, 0.42));
}

.asset-hotspot.basementHatch img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scene-game-layer[data-scene-mode="basement-dark"],
.scene-game-layer[data-scene-mode="basement-installing"] {
  background: #010206;
  color: #f7efcf;
}

.scene-game-layer[data-scene-mode="basement-lit"] {
  background: #271b15;
  color: #fff3d4;
}

.scene-game-layer[data-scene-mode="aliens"] {
  background: #080f2e;
  color: #fff4d8;
}

.basement-darkness,
.basement-lit-room {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.basement-darkness {
  background: #010206;
}

.basement-darkness-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 48% 7%, rgba(29, 35, 49, 0.25), transparent 22%);
}

.basement-sfx {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  color: #f7e9a6;
  font: 900 clamp(2rem, 5vw, 4rem) var(--font-display);
  text-shadow: 0 4px 22px rgba(255, 234, 161, 0.35);
  letter-spacing: 0.06em;
}

.basement-sfx.is-popping {
  animation: basement-sfx-pop 480ms ease-out both;
}

@keyframes basement-sfx-pop {
  from { opacity: 0; scale: 0.6; }
  45% { opacity: 1; scale: 1.2; }
  to { opacity: 1; scale: 1; }
}

.basement-lit-room {
  background-position: center;
  background-size: cover;
}

.basement-johan,
.basement-friends {
  position: absolute;
  bottom: -1%;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
  filter: drop-shadow(0 5px 7px rgba(10, 5, 3, 0.65));
}

.basement-johan {
  left: 50%;
  height: 66%;
  max-width: 25%;
  transform: translateX(-50%);
}

.basement-friends {
  right: 1%;
  height: 48%;
  max-width: 32%;
}

.basement-alien-crate {
  position: absolute;
  left: 10%;
  top: 38%;
  width: 34%;
  height: 39%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.basement-alien-crate:hover,
.basement-alien-crate:focus-visible {
  outline: 0;
  background: transparent;
}

.inventory-use-button {
  display: block;
  margin-top: 10px;
  padding: 7px 10px;
  border: 2px solid #634424;
  border-radius: 7px;
  background: #fce8a3;
  color: #302414;
  font-weight: 800;
  cursor: pointer;
}

.inventory-use-button:hover,
.inventory-use-button:focus-visible {
  background: #fff4c6;
  outline: 2px solid #304e72;
}

.alien-game {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 5px;
}

.alien-game-hud {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 3px 6px;
  color: #fff2c5;
  font-weight: 900;
  text-shadow: 0 2px 4px #080b24;
}

.alien-playfield {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 3px solid #8e6f50;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  cursor: crosshair;
  touch-action: none;
}

.alien-playfield[data-control-mode="keyboard"] { cursor: default; }

.alien-targets,
.alien-effects {
  position: absolute;
  inset: 0;
}

.alien-targets { z-index: 3; }
.alien-effects { z-index: 8; pointer-events: none; }

.alien-enemy {
  position: absolute;
  width: clamp(40px, 6.5vw, 64px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: crosshair;
  filter: drop-shadow(0 0 9px rgba(170, 255, 76, 0.75));
}

.alien-enemy img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.alien-enemy:focus-visible { filter: drop-shadow(0 0 13px #fff39a) brightness(1.18); outline: none; }

.alien-crosshair {
  position: absolute;
  z-index: 7;
  width: 30px;
  height: 30px;
  border: 2px solid #ffe184;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 9px #fff3a0;
}

.alien-crosshair::before,
.alien-crosshair::after {
  content: "";
  position: absolute;
  background: #ffe184;
}

.alien-crosshair::before { left: 12px; top: -7px; width: 2px; height: 40px; }
.alien-crosshair::after { left: -7px; top: 12px; width: 40px; height: 2px; }

.alien-toffi,
.alien-grisen,
.alien-johan {
  position: absolute;
  z-index: 4;
  bottom: -2%;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
  filter: drop-shadow(0 4px 7px #060c27);
}

.alien-toffi { left: 2%; height: 39%; }
.alien-grisen {
  left: 20%;
  width: clamp(70px, 13%, 125px);
  height: 25%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  z-index: 6;
}
.alien-grisen img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.alien-grisen:focus-visible { filter: drop-shadow(0 0 13px #fff39a); outline: none; }
.alien-johan { left: 50%; height: 49%; transform: translateX(-50%); transition: left 100ms linear; }
.alien-johan.is-firing { animation: alien-gun-kick 160ms ease-out; }

.alien-boss-ufo {
  position: absolute;
  z-index: 2;
  top: 1%;
  left: 50%;
  width: clamp(150px, 31%, 330px);
  max-height: 43%;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 18px #070d26);
  pointer-events: none;
  animation: alien-boss-arrive 1500ms cubic-bezier(.2,.8,.2,1) both;
}
.alien-boss-ufo[hidden] { display: none; }
.alien-boss-ufo.is-firing { animation: alien-boss-burst 500ms ease-out; }

@keyframes alien-boss-arrive {
  from { opacity: 0; transform: translate(-50%, -115%) rotate(-10deg); }
  to { opacity: 1; transform: translate(-50%, 0) rotate(0); }
}
@keyframes alien-boss-burst {
  0%, 100% { transform: translate(-50%, 0) rotate(0); }
  35% { transform: translate(-53%, 2%) rotate(-4deg); }
  70% { transform: translate(-47%, -2%) rotate(4deg); }
}

@keyframes alien-gun-kick {
  50% { transform: translateX(-50%) translateY(5px) rotate(-3deg); }
}

.alien-shot-effect {
  position: absolute;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border: 3px solid #88d7ff;
  border-radius: 50%;
  box-shadow: 0 0 18px #5bd5ff;
  animation: alien-shot-pop 420ms ease-out forwards;
}

.alien-shot-effect.is-hit {
  width: 44px;
  height: 44px;
  border-color: #fff179;
  box-shadow: 0 0 22px #ffef4b;
}

@keyframes alien-shot-pop {
  from { opacity: 1; scale: 0.35; }
  to { opacity: 0; scale: 1.8; }
}

.alien-result {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) rotate(-3deg);
  display: grid;
  gap: 6px;
  min-width: 50%;
  padding: 15px 22px;
  border: 5px double #ffe394;
  border-radius: 12px;
  background: rgba(12, 23, 49, 0.92);
  color: #fff1a9;
  text-align: center;
  box-shadow: 0 12px 30px #040713;
  pointer-events: none;
}

.alien-result strong { font: 900 clamp(1.1rem, 2.5vw, 2rem) var(--font-display); }
.alien-start-button {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  min-width: 190px;
  border: 3px solid #55351e;
  border-radius: 8px;
  background: #fff0b8;
  box-shadow: 0 5px 0 #55351e, 0 10px 24px rgba(8, 15, 46, 0.52);
  color: #31251c;
  cursor: pointer;
  font-weight: 1000;
  padding: 12px 20px;
}

.alien-start-button:hover,
.alien-start-button:focus-visible {
  transform: translate(-50%, calc(-50% - 2px));
  outline: 3px solid #fff39a;
  outline-offset: 3px;
}

/* Kontrollpanelen v2: en sammanhängande panel, med klickytor över de ritade knapparna. */
body:has(.scene-game-layer[data-scene-mode="controlPanel"]:not([hidden])) .game-layout {
  grid-template-columns: minmax(0, 1fr);
}

body:has(.scene-game-layer[data-scene-mode="controlPanel"]:not([hidden])) .right-panel {
  display: none;
}

body:has(.scene-game-layer[data-scene-mode="controlPanel"]:not([hidden])) .scene-column {
  width: min(100%, 1120px);
  justify-self: center;
}

body:has(.scene-game-layer[data-scene-mode="controlPanel"]:not([hidden])) .scene.is-minigame {
  height: clamp(480px, calc(100vh - 260px), 660px);
}

.scene-game-layer[data-scene-mode="controlPanel"] .scene-game-content {
  overflow: visible;
}

.scene-game-layer[data-scene-mode="controlPanel"] #scene-game-title { color: #fff2c4; }

.panel-layout-v2 {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.control-panel-overview.panel-layout-v2 {
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
}

.control-panel-overview.panel-layout-v2 .panel-illustration {
  height: auto;
  width: min(100%, calc((100vh - 370px) * 1.776));
}

.panel-illustration {
  position: relative;
  aspect-ratio: 1672 / 941;
  width: 100%;
  max-height: 100%;
  margin: auto;
  container-type: inline-size;
}

.panel-illustration > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.panel-stage-key {
  position: absolute;
  left: var(--key-x);
  top: var(--key-y);
  width: 13.4%;
  height: 27.4%;
  transform: translateX(-50%);
  display: block;
  border: 0;
  border-radius: 14%;
  background: transparent;
  color: #302219;
  padding: 0;
  text-align: center;
}

.panel-stage-key.is-bottom-row { top: var(--key-y); }

.panel-stage-key span {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 1%;
  height: 22%;
  display: grid;
  place-items: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(7px, 2.15cqw, 17px);
  line-height: 1;
  font-weight: 1000;
  text-transform: uppercase;
  pointer-events: none;
}

.panel-stage-key.is-interactive { cursor: pointer; }
.control-panel-puzzle .panel-stage-key.is-interactive { cursor: default; }
.panel-stage-key.is-interactive:focus-visible { outline: none; }

.panel-stage-key.is-interactive.has-label span { color: #114957; }
.panel-stage-key.is-flashing::before,
.panel-stage-key.is-pressed::before {
  content: "";
  position: absolute;
  top: 3%;
  left: 14%;
  width: 72%;
  height: 63%;
  border-radius: 50%;
  background: rgba(255, 248, 128, 0.78);
  box-shadow: 0 0 22px 12px rgba(255, 236, 75, 0.82);
  mix-blend-mode: screen;
}

.panel-stage-key.is-flashing { filter: brightness(1.55); }
.panel-stage-key.is-pressed::before { background: rgba(95, 232, 255, 0.7); box-shadow: 0 0 18px 8px rgba(95, 232, 255, 0.8); }

.control-panel-puzzle.panel-layout-v2,
.control-panel-simon.panel-layout-v2 {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
}

.panel-layout-v2 .control-panel-programmer,
.panel-layout-v2 .control-panel-simon-board {
  display: grid;
  place-items: center;
  min-height: 0;
  height: 100%;
  padding: 8px;
  border: 3px solid #836b48;
  background: #1c343e;
}

.panel-layout-v2 .control-panel-programmer .panel-illustration,
.panel-layout-v2 .control-panel-simon-board .panel-illustration {
  width: min(100%, calc((100vh - 370px) * 1.776));
}

.panel-layout-v2 .control-panel-workbench {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  border: 3px solid #836b48;
  border-radius: 8px;
  background: #f5e8bb;
  padding: 16px;
  color: #2f241c;
}

.panel-layout-v2 .control-panel-instructions { text-align: left; justify-items: start; gap: 8px; }
.panel-layout-v2 .control-panel-instructions h3 { font-size: clamp(1.1rem, 1.7vw, 1.55rem); line-height: 1.08; }
.panel-layout-v2 .control-panel-instructions p { font-size: 0.88rem; line-height: 1.3; font-weight: 700; }
.panel-layout-v2 .control-panel-label-bank { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.panel-layout-v2 .panel-label-chip { padding: 8px 2px; font-size: 0.86rem; }
.panel-layout-v2 .control-panel-workbench .choice {
  border: 3px solid #5d4b34;
  border-radius: 8px;
  background: #f7e0a5;
  box-shadow: 0 4px 0 rgba(96, 65, 38, 0.28);
  color: #2f241c;
  font-weight: 900;
  padding: 10px 12px;
}
.panel-layout-v2 .control-panel-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 7px 12px;
}
.panel-layout-v2 .control-panel-actions .choice { width: auto; flex: 0 0 auto; padding: 8px 16px; }
.panel-layout-v2 .control-panel-actions:not(:has(button)):has(.control-panel-feedback:empty) { display: none; }
.panel-layout-v2 .control-panel-feedback { min-height: 0; font-size: 0.88rem; }
.panel-layout-v2 .control-panel-simon-info .choice { margin-top: auto; }

@media (max-width: 720px) {
  .control-panel-puzzle.panel-layout-v2,
  .control-panel-simon.panel-layout-v2 { grid-template-columns: 1fr; grid-template-rows: auto auto auto; overflow-y: auto; }
  .panel-layout-v2 .control-panel-programmer,
  .panel-layout-v2 .control-panel-simon-board { height: auto; min-height: 180px; }
  .panel-layout-v2 .control-panel-programmer .panel-illustration,
  .panel-layout-v2 .control-panel-simon-board .panel-illustration { width: 100%; }
  .panel-layout-v2 .control-panel-workbench { gap: 8px; padding: 10px; }
  .panel-layout-v2 .control-panel-label-bank { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .panel-layout-v2 .control-panel-actions { flex-wrap: wrap; }
}

/* Text and hotspots live in the same SVG viewBox as the panel art. */
.panel-illustration,
.control-panel-overview.panel-layout-v2 .panel-illustration,
.panel-layout-v2 .control-panel-programmer .panel-illustration,
.panel-layout-v2 .control-panel-simon-board .panel-illustration {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  overflow: visible;
}

.panel-stage-key {
  position: static;
  display: inline;
  width: auto;
  height: auto;
  transform: none;
  outline: none;
}

.panel-key-hitbox { fill: transparent; stroke: transparent; stroke-width: 7; pointer-events: none; }
.panel-stage-key.is-interactive .panel-key-hitbox { pointer-events: all; }
.panel-stage-key.is-interactive:focus-visible .panel-key-glow { fill: #fff3a0; opacity: 0.5; }

.panel-key-label {
  fill: #31251a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 900;
  pointer-events: none;
  user-select: none;
}
.panel-key-label.is-long { font-size: 24px; }
.panel-key-glow { fill: #fff69c; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 32px #ffeb45); }
.panel-stage-key.is-flashing .panel-key-glow { opacity: 0.92; }
.panel-stage-key.is-pressed .panel-key-glow { fill: #70ddff; opacity: 0.78; filter: drop-shadow(0 0 28px #70ddff); }

.panel-layout-v2 .control-panel-programmer,
.panel-layout-v2 .control-panel-simon-board {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

/* The radio scene uses one image coordinate system for art and its four buttons. */
body:has(.scene-game-layer[data-scene-mode="radio"]:not([hidden])) .game-layout {
  grid-template-columns: minmax(0, 1fr);
}
body:has(.scene-game-layer[data-scene-mode="radio"]:not([hidden])) .right-panel { display: none; }
.scene-game-layer[data-scene-mode="radio"] {
  background: radial-gradient(circle at 50% 37%, #38545d, #192d38 70%);
}
.scene-game-layer[data-scene-mode="radio"] #scene-game-title { color: #fff3ca; }
.radio-listening-scene {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.radio-scene-art {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
}
.radio-channel {
  cursor: pointer;
  outline: 0;
}
.radio-channel:focus { outline: 0; }
.radio-channel-hit { fill: transparent; stroke: transparent; pointer-events: all; }
.radio-listening-status {
  min-height: 1.4em;
  margin: 0;
  color: #fff3ca;
  font-weight: 800;
  text-align: center;
}

/* Verkstaden: the stage, parts, and aircraft all share one responsive layout. */
body:has(.scene-game-layer[data-scene-mode="workshop"]:not([hidden])) .game-layout { grid-template-columns: minmax(0, 1fr); }
body:has(.scene-game-layer[data-scene-mode="workshop"]:not([hidden])) .right-panel { display: none; }
body:has(.scene-game-layer[data-scene-mode="workshop"]:not([hidden])) .scene-column { width: min(100%, 1280px); justify-self: center; }
body:has(.scene-game-layer[data-scene-mode="workshop"]:not([hidden])) .scene.is-minigame { height: clamp(680px, calc(100vh - 225px), 860px); }
.scene-game-layer[data-scene-mode="workshop"] { background: #233c40; color: #fff3d0; }
.scene-game-layer[data-scene-mode="workshop"] .scene-game-content { overflow: hidden; }
.scene-game-layer[data-scene-mode="workshop"] #scene-game-title { color: #fff2c1; }
.workshop-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px, 310px); gap: 14px; width: 100%; height: 100%; min-height: 0; }
.workshop-design { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 9px; min-width: 0; min-height: 0; }
.workshop-design-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; font: 900 1rem var(--font-display); }
.workshop-design-heading span { color: #d1e6d9; font: 800 .8rem var(--font-body); }
.workshop-reset-button { margin-left: auto; padding: 5px 9px; border: 2px solid #e1c18d; border-radius: 6px; background: #f2e3c1; color: #4a3223; font: 900 .72rem var(--font-body); cursor: pointer; }
.workshop-reset-button:hover:not(:disabled) { background: #fff2d6; }
.workshop-reset-button:disabled { opacity: .55; cursor: default; }
.workshop-reset-button:focus-visible { outline: 3px solid #f8d76c; outline-offset: 2px; }
.workshop-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.workshop-controls fieldset { min-width: 0; margin: 0; padding: 5px 7px 7px; border: 1px solid #a2c1b8; border-radius: 8px; background: #315157; }
.workshop-controls legend { padding: 0 5px; color: #fbe5a4; font: 900 .72rem var(--font-body); }
.workshop-options { display: flex; flex-wrap: wrap; gap: 4px; }
.workshop-options button { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 4px 8px; border: 2px solid #c5d8cc; border-radius: 6px; background: #f2e9c7; color: #273e40; font: 800 .75rem var(--font-body); cursor: pointer; }
.workshop-options button.is-selected { background: #f4c65e; border-color: #fff9d2; box-shadow: 0 0 0 2px #8a5a31 inset; }
.workshop-options button.is-unavailable,
.workshop-options button:disabled { opacity: .48; filter: grayscale(.75); cursor: not-allowed; }
.workshop-options button:focus-visible, .workshop-part:focus-visible, .workshop-floor:focus-visible { outline: 3px solid #f8d76c; outline-offset: 2px; }
.workshop-swatch { display: inline-block; width: 13px; height: 13px; border: 1px solid #596b65; border-radius: 50%; }
.workshop-swatch.is-cream { background: #f7e8b2; }.workshop-swatch.is-coral { background: #e97b60; }.workshop-swatch.is-sky { background: #89c9df; }.workshop-swatch.is-mint { background: #a9d2a5; }
.workshop-floor { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; border: 8px solid #82643f; border-radius: 12px; background: radial-gradient(ellipse at 50% 30%, #ceaa74, #a47c4f 70%); box-shadow: inset 0 9px 18px #71502e, 0 5px 0 #14292d; }
.workshop-floor-lines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 61px, rgba(70,45,25,.22) 62px 64px), repeating-linear-gradient(90deg, transparent 0 130px, rgba(70,45,25,.1) 131px 133px); pointer-events: none; }
.workshop-floor.is-drag-over { outline: 5px dashed #f7d76e; outline-offset: -13px; }
.workshop-plane { position: relative; z-index: 1; width: min(100%, 810px); max-height: 100%; filter: drop-shadow(0 12px 10px rgba(29,25,19,.25)); }
.workshop-snapped { animation: workshop-snap .28s cubic-bezier(.16,1.6,.58,1) both; transform-origin: center; }
@keyframes workshop-snap { from { opacity: .35; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
.workshop-empty-shell { z-index: 1; display: grid; justify-items: center; gap: 4px; padding: 20px; border: 3px dashed #f4e2b5; border-radius: 18px; background: #5f655aab; color: #fff3d0; text-align: center; cursor: pointer; }
.workshop-empty-shell:hover { background: #74796dcc; }
.workshop-empty-shell:focus-visible { outline: 4px solid #f8d76c; outline-offset: 4px; }
.workshop-empty-shell span { font-size: clamp(3rem, 7vw, 6rem); line-height: 1; }.workshop-empty-shell strong { font: 900 1.15rem var(--font-display); }.workshop-empty-shell small { font-size: .85rem; }
.workshop-drop-hint { position: absolute; z-index: 2; right: 10px; bottom: 10px; left: 10px; padding: 7px; border-radius: 5px; background: #203839dd; color: #fff3d0; font-size: .75rem; font-weight: 900; text-align: center; pointer-events: none; }
.workshop-seat-note { margin: 0; color: #e4e7d3; font-size: .76rem; text-align: center; }
.workshop-shelves { min-height: 0; overflow-y: auto; padding: 11px; border: 5px solid #6b4c2e; border-radius: 10px; background: linear-gradient(135deg, #805837, #aa7947 55%, #76502e); box-shadow: inset 0 0 0 2px #c89d63; scrollbar-color: #e5b567 #65462b; }
.workshop-shelves h3 { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin: 3px 0 8px; color: #fff3c8; font: 900 .95rem var(--font-display); }.workshop-shelves h3 span { font: 800 .7rem var(--font-body); }
.workshop-wing-paints { margin: 0 0 14px; }.workshop-wing-paints button { justify-content: center; flex: 1; min-height: 32px; }.workshop-wing-paints .workshop-swatch { width: 17px; height: 17px; }
.workshop-parts { display: grid; gap: 5px; margin: 0; }
.workshop-part { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 47px; padding: 5px 6px; border: 2px solid #523b26; border-radius: 7px; background: #f4e8c9; box-shadow: 0 3px 0 #50351f; color: #2b3839; text-align: left; cursor: grab; }
.workshop-part:hover:not(:disabled) { background: #fff2cf; transform: translateY(-1px); }.workshop-part:active:not(:disabled) { cursor: grabbing; }
.workshop-part:disabled { cursor: default; }.workshop-part.is-locked { background: #c5bca7; opacity: .78; }.workshop-part.is-attached { background: #b7dfbe; }
.workshop-part.is-unavailable { background: #aaa79f; opacity: .52; filter: grayscale(.85); }
.workshop-part-mark { display: grid; place-items: center; flex: 0 0 33px; height: 33px; border: 2px solid #826339; border-radius: 6px; background: #dcb875; font: 900 1.3rem var(--font-display); }.workshop-part.is-attached .workshop-part-mark { background: #68af7e; }
.workshop-part-name { display: grid; font-weight: 900; font-size: .78rem; line-height: 1.1; }.workshop-part-name small { margin-top: 3px; font-size: .61rem; font-weight: 700; }
.workshop-shelf-note { padding: 7px; border-radius: 5px; background: #e9d09b; color: #463720; font-size: .69rem; font-weight: 800; }
.scene-game-layer[data-scene-mode="workshop"] .workshop-floor { background: #bd9566 url("assets/workshop/workshop-background-v1.png") center / cover no-repeat; border-color: #7a4f2d; box-shadow: inset 0 0 0 3px #d6ad72, 0 5px 0 #14292d; }
.scene-game-layer[data-scene-mode="workshop"] .workshop-floor-lines { display: none; }
.workshop-aircraft { position: absolute; z-index: 1; left: 45%; top: 49%; width: 78%; aspect-ratio: 2056 / 765; transform: translate(-50%, -50%); pointer-events: none; }
.workshop-aircraft-shadow { position: absolute; left: 8%; right: -8%; bottom: -27%; height: 22%; border-radius: 50%; background: #3a2d2080; filter: blur(13px); }
.workshop-aircraft-shell, .workshop-aircraft-part { position: absolute; display: block; height: auto; object-fit: contain; user-select: none; pointer-events: none; }
.workshop-aircraft-shell { z-index: 3; inset: 0; width: 100%; }
.workshop-seat-anchor { position: absolute; z-index: 4; top: 34%; width: 1px; height: 1px; pointer-events: none; }
.workshop-seat-anchor.is-toffi { left: 38%; }.workshop-seat-anchor.is-grisen { left: 54%; }.workshop-seat-anchor.is-johan { left: 70%; }
.workshop-aircraft-part { z-index: 4; animation: workshop-part-arrive .25s ease-out both; }
@keyframes workshop-part-arrive { from { opacity: .3; transform: translateY(-7px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.workshop-aircraft-part.is-landingGear { z-index: 1; left: 30%; top: 70%; width: 42%; }
.workshop-aircraft-part.is-lightYearTurbo { z-index: 2; left: 19%; top: 55%; width: 18%; }
.workshop-aircraft-part.is-cargoBay { z-index: 6; left: 18%; top: 76%; width: 19%; }
.workshop-aircraft-part.is-fuelSystem { z-index: 5; left: 71%; top: 63%; width: 17%; }
.workshop-aircraft-part.is-wingAssembly { z-index: 5; left: 27%; top: 53%; width: 38%; }
.workshop-aircraft-part.is-controlPanel { z-index: 5; left: 76%; top: 26%; width: 11%; }
.workshop-aircraft-part.is-engine { z-index: 5; left: 91%; top: 36%; width: 19%; }
.workshop-aircraft-part.is-propeller { z-index: 6; left: 105%; top: 23%; width: 13%; }
.workshop-aircraft-part.is-cupHolder { z-index: 7; left: 77%; top: 20%; width: 8%; }
.workshop-aircraft-part.is-sausageGrill { z-index: 7; left: 37%; top: 68%; width: 13%; }
.workshop-aircraft-part.is-pigHorn { z-index: 7; left: 89%; top: 28%; width: 9%; }
.workshop-aircraft.paint-coral .workshop-aircraft-shell { filter: sepia(.2) saturate(1.4) hue-rotate(-12deg); }
.workshop-aircraft.paint-sky .workshop-aircraft-shell { filter: sepia(.28) saturate(1.1) hue-rotate(155deg); }
.workshop-aircraft.paint-mint .workshop-aircraft-shell { filter: sepia(.22) saturate(1.15) hue-rotate(77deg); }
.workshop-aircraft.wing-paint-coral .is-wingAssembly { filter: sepia(.2) saturate(1.4) hue-rotate(-12deg); }
.workshop-aircraft.wing-paint-sky .is-wingAssembly { filter: sepia(.28) saturate(1.1) hue-rotate(155deg); }
.workshop-aircraft.wing-paint-mint .is-wingAssembly { filter: sepia(.22) saturate(1.15) hue-rotate(77deg); }
.workshop-part-mark { flex-basis: 47px; height: 36px; overflow: hidden; background: #d8c59d; }
.workshop-part-mark img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 760px) {
  body:has(.scene-game-layer[data-scene-mode="workshop"]:not([hidden])) .scene.is-minigame { height: max(780px, calc(100vh - 190px)); }
  .workshop-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(410px, 1fr) minmax(210px, .65fr); }
  .workshop-design-heading { font-size: .85rem; }.workshop-controls { gap: 3px; }.workshop-controls fieldset { padding: 3px; }.workshop-options button { min-height: 25px; padding: 2px 5px; font-size: .65rem; }
  .workshop-floor { border-width: 5px; }.workshop-seat-note { font-size: .62rem; }.workshop-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workshop-shelves { overflow-x: hidden; }
}

@media (max-width: 480px) {
  body:has(.scene-game-layer[data-scene-mode="workshop"]:not([hidden])) .scene.is-minigame {
    height: 1200px;
  }

  .workshop-layout {
    grid-template-rows: 410px auto;
  }

  .workshop-shelves {
    overflow: visible;
  }

  .workshop-parts { grid-template-columns: minmax(0, 1fr); }
}

/* The approved cartoon build replaces the older realistic aircraft layers. */
.scene-game-layer[data-scene-mode="workshop"] { background: #234b55; }
.workshop-design-heading strong { color: #fff3cd; }
.workshop-crew-button { padding: 5px 9px; border: 2px solid #6b8a43; border-radius: 6px; background: #d9efaa; color: #264233; font: 900 .72rem var(--font-body); cursor: pointer; }
.workshop-crew-button:hover { background: #ecffc9; }
.workshop-crew-button:focus-visible { outline: 3px solid #f8d76c; outline-offset: 2px; }
.workshop-test-button { padding: 5px 9px; border: 2px dashed #fff0a8; border-radius: 6px; background: #714f91; color: #fff; font: 900 .7rem var(--font-body); cursor: pointer; }
.workshop-test-button:hover { background: #865fab; }
.workshop-test-button.is-exit { background: #6b3943; }
.workshop-test-badge { padding: 4px 7px; border-radius: 4px; background: #fff0a8; color: #533547 !important; font-size: .67rem !important; text-transform: uppercase; }
.workshop-controls fieldset { background: #2b626b; border-color: #f9d178; }
.scene-game-layer[data-scene-mode="workshop"] .workshop-floor {
  background: #d8b584 url("assets/workshop/workshop-background-v1.png") center / cover no-repeat;
  border-color: #8d572f;
}
.workshop-aircraft { left: 50%; top: 48%; width: min(94%, 980px); aspect-ratio: 1774 / 887; }
.workshop-aircraft-shadow { left: 9%; right: 5%; bottom: 4%; height: 10%; }
.workshop-aircraft-layer { position: absolute; display: block; z-index: var(--workshop-layer); inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; animation: workshop-part-arrive .25s ease-out both; }
.workshop-aircraft-layer.is-base-underlay {
  animation: none;
}
.workshop-aircraft-layer.is-complete-artwork { animation: none; }
.workshop-seat-anchor { z-index: 11; top: 38%; }
.workshop-seat-anchor.is-grisen { left: 38%; }
.workshop-seat-anchor.is-toffi { left: 55%; }
.workshop-seat-anchor.is-johan { left: 70%; }
.workshop-part { min-height: 60px; }
.workshop-part-mark { flex-basis: 72px; height: 48px; background: #fff7dd; }
.workshop-part-name { font-size: .82rem; }
.workshop-part-name small { font-size: .67rem; }
.workshop-shelf-note { line-height: 1.35; }
@media (max-width: 760px) {
  .workshop-aircraft { top: 49%; width: 94%; }
  .workshop-part { min-height: 58px; }
  .workshop-part-mark { flex-basis: 54px; height: 42px; }
}

/* Toffi Air command plaques. Gameplay sprites and workshop controls keep their own styling. */
:root {
  --button-plate-primary: url("assets/ui/button-system/button-plate-primary-v1.png");
  --button-plate-secondary: url("assets/ui/button-system/button-plate-secondary-v1.png");
  --button-plate-danger: url("assets/ui/button-system/button-plate-danger-v1.png");
  --button-plate-compact: url("assets/ui/button-system/button-plate-compact-v1.png");
  --button-plate-quiz: url("assets/ui/button-system/button-plate-quiz-v1.png");
  --button-plate-correct: url("assets/ui/button-system/button-plate-correct-v1.png");
  --button-plate-wrong: url("assets/ui/button-system/button-plate-wrong-v1.png");
  --button-ink: #172f39;
  --button-light-text: #fff9e0;
}

:is(
  .choice:not(.paper-answer),
  .secondary-button,
  .dialog button,
  .panel-tab,
  .dev-reset-button,
  .departure-check-button,
  .security-start-button,
  .inventory-use-button
) {
  --button-plate: var(--button-plate-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 148px;
  max-width: min(100%, 390px);
  min-height: 50px;
  margin: 0;
  padding: 8px 22px 11px;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: var(--button-plate) center / 100% 100% no-repeat;
  box-shadow: none;
  color: var(--button-light-text);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 2px 0 rgba(23, 47, 57, 0.78);
  white-space: normal;
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

:is(
  .choice:not(.paper-answer),
  .secondary-button,
  .dialog button,
  .panel-tab,
  .dev-reset-button,
  .departure-check-button,
  .security-start-button,
  .inventory-use-button
):hover:not(:disabled) {
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.09) drop-shadow(0 8px 7px rgba(18, 30, 34, 0.25));
}

:is(
  .choice:not(.paper-answer),
  .secondary-button,
  .dialog button,
  .panel-tab,
  .dev-reset-button,
  .departure-check-button,
  .security-start-button,
  .inventory-use-button
):active:not(:disabled) {
  transform: translateY(4px) scaleY(0.96);
  filter: brightness(0.86);
}

:is(
  .choice:not(.paper-answer),
  .secondary-button,
  .dialog button,
  .panel-tab,
  .dev-reset-button,
  .departure-check-button,
  .security-start-button,
  .inventory-use-button
):focus-visible {
  outline: 3px dashed #fff3b0;
  outline-offset: 4px;
}

:is(
  .choice:not(.paper-answer),
  .secondary-button,
  .dialog button,
  .panel-tab,
  .dev-reset-button,
  .departure-check-button,
  .security-start-button,
  .inventory-use-button
):disabled {
  cursor: default;
  filter: grayscale(0.75) saturate(0.45);
  opacity: 0.68;
  transform: none;
}

.secondary-button,
.panel-tab,
[data-leave-runway],
[data-close-runway],
[data-close-fuel],
[data-close-fuel-trial],
[data-close-baggage-v3],
[data-close-baggage] {
  --button-plate: var(--button-plate-secondary) !important;
}

.dev-reset-button {
  --button-plate: var(--button-plate-danger) !important;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 44px;
  padding-inline: 13px;
  font-size: 0.76rem;
}

.departure-check-button,
.inventory-use-button {
  --button-plate: var(--button-plate-compact) !important;
  min-height: 44px;
  padding: 7px 18px 10px;
  color: var(--button-ink);
  text-shadow: 0 1px 0 rgba(255, 249, 224, 0.62);
}

.panel-tab {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 7px 10px 10px;
}

.panel-tab.is-active {
  transform: translateY(3px) scaleY(0.97);
  filter: brightness(0.92) saturate(1.12);
}

.panel-tab.is-active:hover {
  transform: translateY(1px) scale(1.01);
}

.scene-game-topbar .secondary-button {
  min-width: 178px;
  max-width: min(45vw, 310px);
}

.dialog button {
  min-width: 132px;
}

.dialog-choices button {
  min-width: 158px;
}

.choice.primary-choice,
.security-start-button,
[data-retry-runway],
[data-start-simon-sequence],
[data-start-fuel],
[data-next-fuel-level] {
  --button-plate: var(--button-plate-primary) !important;
}

.scene-game-layer[data-scene-mode="fuel"] .fuel-start-card {
  gap: 11px;
  max-height: 100%;
  padding: clamp(16px, 2.4vw, 26px);
}

.scene-game-layer[data-scene-mode="fuel"] .fuel-start-visual {
  grid-template-columns: 92px 110px 92px;
  gap: 10px;
}

.scene-game-layer[data-scene-mode="fuel"] .fuel-start-visual img {
  width: 92px;
  height: 92px;
}

.scene-game-layer[data-scene-mode="fuel"] .fuel-start-card h3 {
  font-size: clamp(1.75rem, 3.2vw, 2.7rem);
}

.scene-game-layer[data-scene-mode="fuel"] .fuel-start-card p {
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  line-height: 1.32;
}

.paper-result-actions .choice,
.control-panel-actions .choice {
  width: auto;
}

:is(.panel-collapse-button, .icon-button, .fuel-help-button, .fuel-help-close) {
  display: inline-grid;
  place-items: center;
  width: 56px;
  min-width: 56px;
  height: 44px;
  min-height: 44px;
  padding: 4px 9px 7px;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: var(--button-plate-compact) center / 100% 100% no-repeat;
  box-shadow: none;
  color: var(--button-ink);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 1.08rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 249, 224, 0.65);
  transition: transform 120ms ease, filter 120ms ease;
}

:is(.panel-collapse-button, .icon-button, .fuel-help-button, .fuel-help-close):hover:not(:disabled) {
  background: var(--button-plate-compact) center / 100% 100% no-repeat;
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.09) drop-shadow(0 7px 6px rgba(18, 30, 34, 0.22));
  outline: 0;
}

:is(.panel-collapse-button, .icon-button, .fuel-help-button, .fuel-help-close):active:not(:disabled) {
  transform: translateY(4px) scaleY(0.96);
  filter: brightness(0.86);
}

:is(.panel-collapse-button, .icon-button, .fuel-help-button, .fuel-help-close):focus-visible {
  outline: 3px dashed #fff3b0;
  outline-offset: 4px;
}

.paper-answer {
  --button-plate: var(--button-plate-quiz);
  display: grid;
  align-content: center;
  width: 100%;
  min-height: 62px;
  margin: 0;
  padding: 11px 27px 13px;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: var(--button-plate) center / 100% 100% no-repeat;
  box-shadow: none;
  color: var(--button-ink);
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: 0;
  text-align: left;
  text-shadow: 0 1px 0 rgba(255, 249, 224, 0.72);
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.paper-answer:hover:not(:disabled) {
  border: 0;
  outline: 0;
  background: var(--button-plate-secondary) center / 100% 100% no-repeat;
  box-shadow: none;
  color: var(--button-light-text);
  text-shadow: 0 2px 0 rgba(23, 47, 57, 0.78);
  transform: translateY(-3px) scale(1.005);
  filter: brightness(1.08) drop-shadow(0 7px 6px rgba(18, 30, 34, 0.2));
}

.paper-answer:focus-visible {
  outline: 3px dashed #fff3b0;
  outline-offset: 4px;
}

.paper-answer:active:not(:disabled) {
  transform: translateY(4px) scaleY(0.97);
  filter: brightness(0.86);
}

.paper-answer.is-selected.is-correct,
.paper-answer.is-selected.is-wrong {
  border: 0;
  box-shadow: none;
  color: var(--button-light-text);
  opacity: 1;
  text-shadow: 0 2px 0 rgba(23, 47, 57, 0.75);
}

.paper-answer.is-selected.is-correct {
  --button-plate: var(--button-plate-correct);
  background: var(--button-plate-correct) center / 100% 100% no-repeat;
}

.paper-answer.is-selected.is-wrong {
  --button-plate: var(--button-plate-wrong);
  background: var(--button-plate-wrong) center / 100% 100% no-repeat;
}

.paper-answer:disabled:not(.is-selected) {
  background: var(--button-plate-quiz) center / 100% 100% no-repeat;
  color: var(--button-ink);
  cursor: default;
  filter: grayscale(0.85) saturate(0.35);
  opacity: 0.68;
  transform: none;
}

.paper-answer small {
  color: inherit;
  text-shadow: inherit;
}

.alien-start-button {
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: var(--button-plate-primary) center / 100% 100% no-repeat;
  box-shadow: none;
  color: var(--button-light-text);
  text-shadow: 0 2px 0 rgba(23, 47, 57, 0.78);
}

.alien-start-button:hover {
  transform: translate(-50%, calc(-50% - 3px)) scale(1.01);
  filter: brightness(1.09) drop-shadow(0 8px 7px rgba(18, 30, 34, 0.25));
  outline: 0;
}

.alien-start-button:active {
  transform: translate(-50%, calc(-50% + 4px)) scaleY(0.96);
  filter: brightness(0.86);
}

.alien-start-button:focus-visible {
  outline: 3px dashed #fff3b0;
  outline-offset: 4px;
}

@media (max-width: 560px) {
  :is(
    .choice:not(.paper-answer),
    .secondary-button,
    .dialog button,
    .panel-tab,
    .departure-check-button,
    .security-start-button,
    .inventory-use-button
  ) {
    min-width: 124px;
    min-height: 46px;
    padding: 7px 15px 10px;
    font-size: 0.82rem;
  }

  .scene-game-topbar .secondary-button {
    max-width: 100%;
  }

  .panel-tabs .panel-tab {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
    font-size: 0.76rem;
  }

  .dialog-copy,
  .dialog-actions {
    min-width: 0;
  }

  .dialog-text {
    overflow-wrap: anywhere;
  }

  .dialog button {
    min-width: 108px;
    max-width: 100%;
  }

  .paper-answer {
    min-height: 58px;
    padding: 10px 20px 12px;
    font-size: 0.85rem;
  }
}

/* Header inventory: interior artwork can replace this neutral placeholder later. */
.status-strip { align-items: center; }

.status-strip .header-sausages {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 48px;
  padding: 5px 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.header-sausages img { width: 48px; height: 48px; object-fit: contain; }
.header-sausages strong { min-width: 1ch; font-size: 1.2rem; text-align: center; }

.inventory-header-button {
  display: inline-grid;
  width: 126px;
  height: 104px;
  place-items: center;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  padding: 2px 5px;
}

.inventory-header-button img {
  width: 118px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(64, 40, 22, 0.28));
}

.inventory-header-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.inventory-header-button:active { transform: translateY(1px) scale(0.98); box-shadow: none; }
.inventory-header-button:focus-visible { outline: 3px dashed #164f72; outline-offset: 3px; }
.inventory-header-button.is-arriving { animation: inventory-arrive 500ms ease-out; }

@keyframes inventory-arrive {
  0% { transform: scale(0.72) rotate(-5deg); }
  55% { transform: scale(1.14) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

.inventory-accept-flight {
  position: fixed;
  z-index: 100;
  object-fit: contain;
  pointer-events: none;
  transform-origin: top left;
  filter: drop-shadow(0 7px 8px rgba(42, 27, 16, 0.4));
}

.inventory-popup {
  position: absolute;
  z-index: 40;
  top: 82px;
  right: 0;
  width: min(760px, 94vw);
  aspect-ratio: 1000 / 800;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.inventory-popup-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(46, 28, 16, 0.35));
  pointer-events: none;
}

.inventory-popup-list {
  position: absolute;
  left: 23%;
  top: 27%;
  width: 54%;
  height: 40%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4%;
}

.inventory-popup-item {
  display: grid;
  min-width: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: transparent;
  padding: 1%;
  cursor: pointer;
  transition: transform 130ms ease, filter 130ms ease;
}

.inventory-popup-item img { width: 94%; height: 96%; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(42, 25, 13, 0.52)); }
.inventory-popup-emoji { font-size: clamp(3rem, 7vw, 5rem); filter: drop-shadow(0 3px 2px rgba(42, 25, 13, 0.42)); }
.inventory-popup-item:hover { transform: translateY(-3px) scale(1.04); filter: brightness(1.08); }
.inventory-popup-item:focus-visible { outline: 3px dashed #fff0a3; outline-offset: 2px; }

.inventory-popup-item { position: relative; }
.inventory-item-count {
  position: absolute;
  right: 2px;
  bottom: 0;
  min-width: 22px;
  padding: 2px 5px;
  border-radius: 999px;
  background: #9f2f26;
  color: #fff9da;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.2;
}

.inventory-popup-pagination {
  position: absolute;
  z-index: 4;
  left: 34%;
  top: 69%;
  width: 32%;
  display: grid;
  grid-template-columns: 38px minmax(44px, 1fr) 38px;
  align-items: center;
  justify-items: center;
  gap: 5px;
}

.inventory-popup-pagination button,
.inventory-detail-back {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 2px solid #6b3d20;
  border-radius: 50%;
  background: #f6d98f;
  color: #4d2b18;
  box-shadow: 0 3px 0 #5a331d;
  font: 900 1.7rem/1 Georgia, serif;
  cursor: pointer;
}

.inventory-popup-pagination button:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.inventory-popup-pagination button:not(:disabled):hover,
.inventory-detail-back:hover { transform: translateY(-2px); filter: brightness(1.05); }
.inventory-popup-pagination button:focus-visible,
.inventory-detail-back:focus-visible { outline: 3px dashed #fff0a3; outline-offset: 2px; }
.inventory-popup-pagination span { color: #fff2bf; font-weight: 900; text-shadow: 0 2px 2px #4b2b1a; }

.inventory-popup-detail {
  position: absolute;
  z-index: 3;
  left: 21.5%;
  top: 24.5%;
  width: 57%;
  height: 47%;
  display: grid;
  grid-template-columns: 46% minmax(0, 1fr);
  align-items: center;
  gap: 4%;
}

.inventory-popup-detail[hidden] { display: none; }
.inventory-detail-back { position: absolute; left: -3%; top: 0; z-index: 2; }
.inventory-detail-visual { display: grid; height: 86%; min-width: 0; place-items: center; }
.inventory-detail-visual img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 5px rgba(42, 25, 13, 0.55)); }
.inventory-detail-emoji { font-size: clamp(4rem, 10vw, 7rem); }
.inventory-detail-copy {
  position: relative;
  align-self: center;
  min-width: 0;
  padding: 11% 8% 9%;
  border: 1px solid rgba(113, 72, 38, 0.4);
  border-radius: 0;
  background:
    linear-gradient(100deg, transparent 0 48%, rgba(121, 83, 43, 0.055) 49% 50%, transparent 51%),
    #f5dfaa;
  color: #3f2818;
  box-shadow: 2px 5px 0 rgba(69, 39, 21, 0.3), 0 9px 12px rgba(49, 29, 15, 0.22);
  clip-path: polygon(1.5% 3%, 48% 0, 98% 2%, 100% 48%, 98.5% 97%, 52% 100%, 1% 97%, 0 47%);
  transform: rotate(-1.2deg);
}

.inventory-detail-copy::before,
.inventory-detail-copy::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 31%;
  height: 17px;
  background: rgba(222, 198, 139, 0.84);
  border-inline: 1px solid rgba(128, 95, 47, 0.28);
  box-shadow: 0 1px 2px rgba(71, 48, 25, 0.18);
  pointer-events: none;
}

.inventory-detail-copy::before { top: -7px; left: 8%; transform: rotate(-5deg); }
.inventory-detail-copy::after { right: 6%; bottom: -6px; transform: rotate(4deg); }

.inventory-detail-copy h3 { margin: 0 0 0.45rem; font: 900 clamp(0.92rem, 2.1vw, 1.25rem)/1.1 Georgia, serif; }
.inventory-detail-copy h3 span { font-size: 0.78em; }
.inventory-detail-copy p { margin: 0; font-size: clamp(0.72rem, 1.5vw, 0.92rem); line-height: 1.32; }
.inventory-detail-action {
  margin-top: 0.7rem;
  width: auto;
  min-width: 96px;
  padding: 7px 12px;
  border: 2px solid #7b2d20;
  border-radius: 5px;
  background: #dd6044;
  color: #fff9dd;
  box-shadow: 0 3px 0 #69251c;
  font-weight: 900;
  cursor: pointer;
}
.inventory-detail-action:hover { filter: brightness(1.08); transform: translateY(-1px); }
.inventory-detail-action:focus-visible { outline: 3px dashed #194f72; outline-offset: 3px; }

body:has(.scene-game-layer[data-scene-mode="taxfree"]:not([hidden])) .game-layout {
  grid-template-columns: minmax(0, 1fr);
}

body:has(.scene-game-layer[data-scene-mode="taxfree"]:not([hidden])) .right-panel { display: none; }
body:has(.scene-game-layer[data-scene-mode="taxfree"]:not([hidden])) .scene-column {
  width: min(100%, 1320px);
  justify-self: center;
}

body:has(.scene-game-layer[data-scene-mode="taxfree"]:not([hidden])) .scene.is-minigame {
  height: clamp(650px, calc(100vh - 220px), 820px);
}

.scene-game-layer[data-scene-mode="taxfree"] {
  display: block;
  padding: 8px;
  background: #5f361d;
}

.scene-game-layer[data-scene-mode="taxfree"] .scene-game-topbar,
.scene-game-layer[data-scene-mode="taxfree"] .scene-game-topbar:has(h2:empty) {
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  justify-content: flex-end;
}

.scene-game-layer[data-scene-mode="taxfree"] .scene-game-content {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.taxfree-stage {
  position: relative;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  isolation: isolate;
}

.taxfree-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.taxfree-product {
  position: absolute;
  z-index: 2;
  left: var(--taxfree-left);
  top: var(--taxfree-top);
  width: var(--taxfree-width);
  height: var(--taxfree-height);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: center bottom;
  transition: transform 130ms ease, filter 130ms ease;
}

.taxfree-product:hover,
.taxfree-product:focus-visible {
  transform: translateY(-4%) scale(1.06);
  filter: brightness(1.08);
}

.taxfree-product:focus-visible .taxfree-product-image {
  filter: drop-shadow(0 0 0.35rem #fff4a8) drop-shadow(0 0.35rem 0.25rem rgba(45, 25, 10, 0.62));
}

.taxfree-product-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 0.35rem 0.25rem rgba(45, 25, 10, 0.62));
  pointer-events: none;
}

.taxfree-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  min-width: 2.4rem;
  padding: 0.16rem 0.4rem;
  border: 2px solid rgba(85, 43, 19, 0.86);
  border-radius: 999px;
  background: #fff0b4;
  color: #70271c;
  box-shadow: 0 3px 0 rgba(69, 36, 17, 0.55);
  font-size: clamp(0.72rem, 1.4vw, 1.05rem);
  font-weight: 950;
  line-height: 1;
}

.taxfree-price img,
.taxfree-wallet img {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
}

.taxfree-wallet {
  position: absolute;
  z-index: 3;
  left: 4%;
  top: 3.5%;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border: 3px solid #6f351c;
  border-radius: 999px;
  background: #fff0b4;
  color: #77281e;
  box-shadow: 0 4px 0 rgba(62, 31, 16, 0.5);
  font-size: clamp(0.9rem, 1.7vw, 1.3rem);
}

.hint-booklet { max-width: 660px; line-height: 1.55; }
.hint-booklet li + li { margin-top: 0.65rem; }

.scene.is-fetching-tennis .character-asset.toffi-hub { visibility: hidden; }

.hub-tennis-runner {
  position: absolute;
  z-index: 8;
  left: 23.9%;
  top: 56%;
  width: auto;
  height: 39%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 6px 4px rgba(48, 31, 18, 0.42));
  pointer-events: none;
  animation: toffi-tennis-run 1.25s ease-in forwards;
}

.character-asset.toffi-hub.has-tennis-ball {
  pointer-events: auto;
  cursor: pointer;
}

.character-asset.toffi-hub.has-tennis-ball:focus-visible {
  outline: 4px dashed #fff0a3;
  outline-offset: 4px;
}

.character-asset.grisen-hub {
  pointer-events: auto;
  cursor: pointer;
}

.character-asset.grisen-hub:focus-visible {
  outline: 4px dashed #fff0a3;
  outline-offset: 4px;
}

.tennis-broom-tail {
  position: absolute;
  z-index: 0;
  left: 25.5%;
  top: 72%;
  width: 10%;
  height: 18%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 4px 3px rgba(48, 31, 18, 0.42));
}

.tennis-broom-tail img { width: 100%; height: 100%; object-fit: contain; }
.tennis-broom-tail:hover,
.tennis-broom-tail:focus-visible { outline: 0; filter: brightness(1.12) drop-shadow(0 0 8px #fff0a3); }

.scene.is-sweeping .asset-hotspot.broom { visibility: hidden; }
.scene.is-sweeping .character-asset.toffi-hub { visibility: hidden; }
.scene.is-sweeping .object-layer,
.scene.is-red-alarming .object-layer,
.scene.is-sweeping .story-hotspot,
.scene.is-red-alarming .story-hotspot { pointer-events: none; }

.hub-sweep-toffi {
  position: absolute;
  left: 23.9%;
  top: 50%;
  z-index: 5;
  width: auto;
  height: 49%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 6px 4px rgba(48, 31, 18, 0.42));
  pointer-events: none;
  animation: toffi-sweep-lap 4.2s ease-in-out both;
}

.hub-red-alarm-flash {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  animation: hub-red-alarm 500ms steps(1, end) 10;
}

@keyframes toffi-sweep-lap {
  0% { left: 23.9%; transform: scaleX(1); }
  46% { left: 42%; transform: scaleX(1); }
  50% { left: 42%; transform: scaleX(-1); }
  96% { left: 23.9%; transform: scaleX(-1); }
  100% { left: 23.9%; transform: scaleX(1); }
}

@keyframes hub-red-alarm {
  0%, 49% { background: rgba(229, 15, 10, 0.62); }
  50%, 100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-sweep-toffi { animation: none; }
}

.story-hotspot.taxfree-sausage-grill-bonus {
  animation: taxfree-bonus-pulse 850ms ease-in-out infinite alternate;
}

@keyframes toffi-tennis-run {
  0% { left: 23.9%; transform: rotate(0); }
  100% { left: 102%; transform: rotate(4deg); }
}

.inventory-popup-close {
  position: absolute;
  z-index: 3;
  left: 84.6%;
  top: 18.75%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  outline: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  padding: 0;
}

.inventory-popup-close:hover { background: rgba(255, 242, 166, 0.18); }
.inventory-popup-close:focus-visible { outline: 3px dashed #fff0a3; outline-offset: 2px; }

.dev-reset-floating {
  position: fixed;
  z-index: 60;
  left: 8px;
  bottom: 8px;
  opacity: 0.42;
  font-size: 0.72rem;
  padding: 5px 8px;
}

.dev-reset-floating:hover,
.dev-reset-floating:focus-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .inventory-header-button.is-arriving { animation: none; }
}

@media (max-width: 680px) {
  .top-bar { align-items: flex-end; flex-direction: row; }
  .inventory-popup { top: 76px; right: 0; }
}

/* Final race v1. Asset paths live in app.js so final art can replace placeholders. */
body:has(.scene-game-layer[data-scene-mode="finalRace"]:not([hidden])) .game-layout { grid-template-columns: minmax(0, 1fr); }
body:has(.scene-game-layer[data-scene-mode="finalRace"]:not([hidden])) .right-panel { display: none; }
body:has(.scene-game-layer[data-scene-mode="finalRace"]:not([hidden])) .scene-column { width: min(100%, 1280px); justify-self: center; }
body:has(.scene-game-layer[data-scene-mode="finalRace"]:not([hidden])) .scene.is-minigame { height: clamp(640px, calc(100vh - 220px), 820px); }
.scene-game-layer[data-scene-mode="finalRace"] { color: #f7fbff; background: #071224; }
.scene-game-layer[data-scene-mode="finalRace"] .scene-game-topbar { background: #101b36; border-bottom-color: rgba(149, 207, 255, .25); }
.scene-game-layer[data-scene-mode="finalRace"] #scene-game-title { color: #fff3b3; }
.scene-game-layer[data-scene-mode="finalRace"] .scene-game-content { overflow: hidden; }
.scene-game-layer[data-scene-mode="finalRace"].is-cinematic {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: #000;
}
.scene-game-layer[data-scene-mode="finalRace"].is-cinematic .scene-game-topbar { display: none; }
.final-race-cutscene { width: 100%; height: 100%; background: #000; }
.final-race-cutscene img { display: block; width: 100%; height: 100%; object-fit: contain; }
.final-race-ending {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  text-align: center;
}
.final-race-ending h2 {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(3.5rem, 10vw, 8rem);
  line-height: 1;
}
.final-race-ending .primary-button {
  border: 2px solid #fff0a8;
  border-radius: 6px;
  background: #f6ca45;
  box-shadow: 0 4px 0 #8e6620;
  color: #172936;
  font-weight: 900;
  padding: 12px 22px;
}

.workshop-race-button { background: #f6ca45; color: #172936; border: 2px solid #fff0a8; box-shadow: 0 3px 0 #8e6620; font-weight: 900; }

.final-race-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); align-items: center; gap: clamp(18px, 4vw, 54px); width: min(1050px, 94%); height: 100%; margin: auto; }
.final-race-intro-art { min-width: 0; }
.final-race-intro-art .final-race-plane-art { width: 100%; filter: drop-shadow(0 18px 20px rgba(0,0,0,.48)); }
.final-race-intro h3, .final-race-result h3 { margin: 4px 0 12px; font-family: "Arial Black", Impact, sans-serif; font-size: clamp(1.6rem, 3vw, 2.7rem); line-height: 1.05; }
.final-race-intro p { line-height: 1.55; }
.final-race-turbo-status { padding: 10px 12px; border-left: 5px solid; background: rgba(255,255,255,.08); font-weight: 800; }
.final-race-turbo-status.has-turbo { border-color: #55f3ff; }
.final-race-turbo-status.no-turbo { border-color: #f3b448; }

.final-race-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; min-height: 0; }
.final-race-hud { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto; align-items: center; gap: 14px; padding: 10px 16px; background: #111d38; }
.final-race-hud > div { display: grid; grid-template-columns: auto minmax(80px, 1fr); gap: 8px; align-items: center; }
.final-race-hud span, .final-race-hud strong { font-size: .78rem; text-transform: uppercase; font-weight: 900; }
.final-race-meter { height: 12px; overflow: hidden; border: 2px solid #d6e8ff; border-radius: 999px; background: #07101f; }
.final-race-meter i { display: block; width: 0; height: 100%; background: #43e2f1; }
.final-race-meter.is-felon i { background: #ff6262; }
.final-race-stage { --race-far: 0px; --race-mid: 0px; --race-near: 0px; position: relative; min-height: 0; overflow: hidden; outline: none; background: #080b25; touch-action: none; }
.final-race-stars { position: absolute; inset: 0; pointer-events: none; background-image: var(--race-bg); background-repeat: repeat-x; background-size: auto 100%; }
.final-race-stars.is-far { background-position-x: var(--race-far); }
.final-race-stars.is-mid { background-position-x: var(--race-mid); }
.final-race-stars.is-near { background-position-x: var(--race-near); }
.final-race-finish { position: absolute; z-index: 1; top: 0; bottom: 0; width: 4%; background: repeating-linear-gradient(0deg, #fff 0 16px, #171727 16px 32px); box-shadow: 0 0 25px #9ff; opacity: .78; }
.final-race-finish span { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); padding: 3px 6px; color: #10101c; background: #fff; font: 900 .72rem/1 sans-serif; }
.final-race-asteroid { position: absolute; z-index: 2; top: calc(var(--y) * 1%); width: var(--size); height: var(--size); object-fit: contain; transform: translate(-50%, -50%); filter: drop-shadow(0 5px 6px rgba(0,0,0,.45)); }
.final-race-craft { position: absolute; z-index: 5; width: clamp(105px, 18%, 235px); transform: translate(-50%, -50%); transition: top .08s linear; pointer-events: none; }
.final-race-craft > img { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 9px 7px rgba(0,0,0,.5)); }
.final-race-craft.is-felon { width: clamp(80px, 12%, 150px); }
.final-race-craft.is-player.is-spinning { animation: final-race-spin 1s ease-in-out; }
.final-race-plane-art { position: relative; display: block; width: 100%; aspect-ratio: 1774 / 887; }
.final-race-plane-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.final-race-plane-art.is-complete img { filter: drop-shadow(0 8px 7px rgba(0,0,0,.45)); }
.final-race-plane-art .final-race-plane-crew { z-index: 20; }
.final-race-goggles { display: none; position: absolute; top: -20%; left: 40%; font-size: clamp(1.5rem, 3vw, 2.5rem); }
.final-race-felon-turbo { position: absolute; z-index: -1; width: 50.7% !important; height: auto !important; left: -15.9%; top: 36%; filter: drop-shadow(-8px 0 8px rgba(255, 219, 76, .75)); }
.final-race-announcement { position: absolute; z-index: 12; top: 11%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 86%; padding: 12px 20px; border: 3px solid #ffd863; border-radius: 7px; color: #1c1820; background: #fff2b8; box-shadow: 0 8px 0 rgba(0,0,0,.24); font: 900 clamp(1rem, 2.2vw, 1.6rem)/1.15 "Arial Black", sans-serif; text-align: center; }
.final-race-controls { position: absolute; z-index: 10; right: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 44px); gap: 7px; }
.final-race-controls button { width: 52px; height: 44px; padding: 0; border: 2px solid #dff8ff; border-radius: 7px; color: #fff; background: rgba(20, 43, 76, .78); font-size: 1.25rem; }
.final-race-controls [data-race-up] { grid-column: 2; grid-row: 1; }
.final-race-controls [data-race-left] { grid-column: 1; grid-row: 2; }
.final-race-controls [data-race-down] { grid-column: 2; grid-row: 2; }
.final-race-controls [data-race-right] { grid-column: 3; grid-row: 2; }

.final-race-result { display: grid; place-items: center; align-content: center; gap: 8px; width: min(900px, 94%); height: 100%; margin: auto; text-align: center; }
.final-race-result-art { width: min(600px, 78vw); }
.final-race-result-art .final-race-plane-art { filter: drop-shadow(0 18px 18px rgba(0,0,0,.5)); }
.final-race-loss-art { display: grid; grid-template-columns: minmax(310px, 1.35fr) minmax(230px, .9fr) minmax(145px, .52fr); align-items: end; justify-items: center; gap: clamp(4px, 1.4vw, 18px); width: min(1040px, 96%); max-height: 320px; }
.final-race-loss-plane { width: 100%; align-self: center; }
.final-race-loss-plane img { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 14px 12px rgba(0,0,0,.45)); }
.final-race-loss-crew { display: flex; align-items: end; justify-content: center; width: 100%; height: 270px; }
.final-race-loss-crew img { width: 35%; max-height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 8px rgba(0,0,0,.48)); }
.final-race-loss-crew .is-toffi { width: 44%; }
.final-race-loss-crew .is-grisen { width: 42%; margin-left: -13%; }
.final-race-loss-crew .is-johan { width: 55%; margin-left: -14%; }
.final-race-loss-art .final-race-felon-result { width: 100%; max-height: 245px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 14px 12px rgba(0,0,0,.5)); }
.final-race-result > div:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.final-race-result .primary-button { border: 2px solid #fff0a8; border-radius: 6px; color: #172936; background: #f6ca45; box-shadow: 0 4px 0 #8e6620; font-weight: 900; }
.final-race-result .primary-button:hover { background: #ffe071; transform: translateY(-1px); }

@keyframes final-race-spin { 0% { transform: translate(-50%, -50%) rotate(0); } 65% { transform: translate(-50%, -50%) rotate(690deg) scale(.78); } 100% { transform: translate(-50%, -50%) rotate(720deg); } }

@media (max-width: 680px) {
  body:has(.scene-game-layer[data-scene-mode="finalRace"]:not([hidden])) .scene.is-minigame { height: max(560px, calc(100vh - 180px)); }
  .final-race-intro { grid-template-columns: 1fr; align-content: center; text-align: center; }
  .final-race-intro-art img { max-height: 190px; }
  .final-race-hud { grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 8px; }
  .final-race-hud > div { grid-template-columns: 1fr; gap: 2px; }
  .final-race-hud > strong { grid-column: 1 / -1; text-align: center; }
  .final-race-craft { width: clamp(90px, 27%, 155px); }
  .final-race-craft.is-felon { width: clamp(70px, 19%, 115px); }
  .final-race-loss-art { grid-template-columns: 1.2fr .8fr; max-height: 285px; }
  .final-race-loss-crew { grid-column: 1 / -1; grid-row: 2; height: 115px; }
  .final-race-loss-art .final-race-felon-result { max-height: 150px; }
}

/* Linda's telephone calls: a classic illustrated split screen. */
.asset-hotspot.phone.is-ringing { animation: hub-phone-ring 650ms ease-in-out infinite; filter: drop-shadow(0 0 14px #fff083) drop-shadow(0 0 8px #ffbe42); }
.asset-hotspot.security { z-index: 84; }
.asset-hotspot.runway-click-zone { z-index: 0; }
.asset-hotspot:not(.runway-click-zone):not(.security) { z-index: 1; }
.object-layer .asset-hotspot.redButton { z-index: 0; }
.object-layer .asset-hotspot.inventory { z-index: 3; }

.runway-continue-button {
  align-self: center;
  justify-self: center;
  margin: 4px auto 0;
}

.final-race-announcement span {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.final-race-announcement button {
  min-width: 76px;
  padding: 7px 14px;
  border: 2px solid #fff0a8;
  border-radius: 6px;
  background: #f6ca45;
  color: #172936;
  font-weight: 900;
  cursor: pointer;
}
.asset-hotspot.phone.is-ringing::after { content: "RING! RING!"; position: absolute; left: 78%; top: -22%; width: max-content; height: auto; transform: rotate(-10deg); padding: 3px 7px; border-radius: 50%; background: #fff7c8; color: #5d321e; font-size: clamp(9px, 1.2vw, 16px); font-weight: 900; box-shadow: 0 2px 0 #75492c; pointer-events: none; }
@keyframes hub-phone-ring { 0%, 100% { transform: rotate(-3deg); } 30% { transform: rotate(4deg); } 65% { transform: rotate(-5deg); } }
.scene-game-layer[data-scene-mode="phone"] { display: block; padding: 0; gap: 0; background: #172c37; color: #fff9dc; }
.scene-game-layer[data-scene-mode="phone"] .scene-game-topbar { position: absolute; z-index: 5; top: 12px; right: 12px; }
.scene-game-layer[data-scene-mode="phone"] .scene-game-content { min-height: 0; height: 100%; }
.phone-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; overflow: hidden; }
.phone-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; overflow: hidden; }
.phone-half { position: relative; min-width: 0; overflow: hidden; filter: saturate(.76) brightness(.78); transition: filter 160ms ease; }
.phone-half.is-speaking { filter: saturate(1.08) brightness(1.08); }
.phone-half.is-linda { background: radial-gradient(circle at 55% 85%, #f4cfa3 0, #ba7681 53%, #6c455e 100%); }
.phone-half.is-johan { background: radial-gradient(circle at 48% 85%, #92c7c7 0, #467d8d 52%, #234657 100%); }
.phone-half::before { content: ""; position: absolute; inset: 12px; border: 2px solid rgba(255, 247, 202, .35); border-radius: 50% 50% 0 0; }
.phone-half img { position: absolute; top: 2%; left: 50%; height: 205%; width: auto; max-width: none; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 7px 4px rgba(19, 25, 29, .5)); }
.phone-half.is-johan img { height: 215%; top: -3%; }
.phone-nameplate { position: absolute; z-index: 2; left: 50%; bottom: 10px; transform: translateX(-50%); color: #fff8d6; font-size: clamp(.85rem, 1.5vw, 1.35rem); font-weight: 900; letter-spacing: .2em; text-shadow: 0 2px 3px #2b1b1b; }
.phone-centerline { position: absolute; z-index: 3; inset: -20px auto -20px 50%; width: 9px; transform: translateX(-50%) rotate(9deg); background: linear-gradient(90deg, #482d24, #f4d77e 35%, #fff8c8 54%, #765132); box-shadow: 0 0 0 2px #382b27; }
.phone-centerline span { position: absolute; top: 42%; left: 50%; display: grid; place-items: center; width: 42px; height: 42px; transform: translate(-50%, -50%) rotate(-9deg); border: 3px solid #694627; border-radius: 50%; background: #ffe7a0; color: #684128; font-size: 1.5rem; }
.phone-caption { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-content: center; min-height: 142px; padding: 15px 24px 17px; border-top: 5px solid #e9c776; background: linear-gradient(140deg, #203c47, #12252e); box-shadow: 0 -8px 24px rgba(9, 22, 28, .45); }
.phone-call-number { grid-row: 1 / 3; align-self: start; color: #f4d07b; font-size: .75rem; font-weight: 900; letter-spacing: .1em; white-space: nowrap; }
.phone-speaker { grid-column: 2; color: #ffe596; font-weight: 900; font-size: .97rem; }
.phone-text { grid-column: 2; margin: 3px 0 10px; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.3; }
.phone-controls { grid-column: 1 / -1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.phone-controls button { border: 2px solid #fff0b0; border-radius: 5px; background: #e9b357; color: #30231c; box-shadow: 0 3px 0 #7b4529; padding: 7px 13px; cursor: pointer; font-weight: 800; }
.phone-controls button:hover, .phone-controls button:focus-visible { background: #ffe49a; transform: translateY(-2px); }
.phone-controls button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.first-aid { position: fixed; z-index: 60; left: 8px; bottom: 8px; }
.first-aid-button,
.first-aid-form button {
  border: 2px solid #5a3925;
  border-radius: 6px;
  background: #fff0bd;
  box-shadow: 0 3px 0 #5a3925;
  color: #35261d;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 900;
  padding: 8px 11px;
}
.first-aid-form { display: flex; align-items: stretch; gap: 5px; }
.first-aid-form input {
  width: 145px;
  border: 2px solid #5a3925;
  border-radius: 6px;
  background: #fffaf0;
  color: #2f241c;
  font: 800 .82rem var(--font-ui);
  padding: 7px 9px;
}
.first-aid-form input[aria-invalid="true"] { border-color: #b22f24; box-shadow: 0 0 0 2px rgba(178, 47, 36, .28); }
.first-aid-button:focus-visible,
.first-aid-form button:focus-visible,
.first-aid-form input:focus-visible { outline: 3px solid #fff3b0; outline-offset: 3px; }
@media (max-width: 680px) {
  .scene-game-layer[data-scene-mode="phone"] .scene-game-topbar { top: 7px; right: 7px; left: auto; flex-direction: row; }
  .scene-game-layer[data-scene-mode="phone"] .scene-game-topbar .secondary-button { width: auto; padding: 6px 8px; font-size: .76rem; }
  .phone-caption { grid-template-columns: 1fr; padding: 12px; min-height: 180px; }
  .phone-call-number, .phone-speaker, .phone-text { grid-column: 1; grid-row: auto; }
  .phone-text { font-size: .95rem; }
  .phone-half img { height: 175%; top: 4%; }
  .phone-half.is-johan img { height: 185%; top: 0; }
  .phone-centerline span { width: 30px; height: 30px; font-size: 1rem; }
  .phone-controls { grid-column: 1; justify-content: stretch; }
  .phone-controls button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .asset-hotspot.phone.is-ringing { animation: none; } }