@font-face {
  font-family: Arcade;
  src: url("arcade.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: Booth;
  src: url("booth.ttf") format("truetype");
  font-display: swap;
  font-weight: 600 800;
}
:root {
  color-scheme: dark;
  --ink: #101a32;
  --navy: #17334b;
  --mint: #aff5dc;
  --pink: #f69cbd;
  --gold: #ffe395;
  --paper: #eef6ff;
  --edge: #597d93;
  --muted: #b4cad8;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #091626;
  color: var(--paper);
  font:
    600 16px/1.25 Booth,
    "Trebuchet MS",
    sans-serif;
  overscroll-behavior: none;
}
button,
input {
  font: inherit;
}
button {
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  border: 2px solid var(--edge);
  background: #214357;
  box-shadow:
    0 3px 0 #081829,
    inset 0 2px #ffffff12;
  min-height: 44px;
  border-radius: 4px;
  transition:
    transform 90ms,
    background 90ms;
}
button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #081829;
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
img,
canvas {
  image-rendering: pixelated;
}
#app {
  position: relative;
  height: min(var(--cp-vh, 100dvh), 1080px);
  min-height: 0;
  max-height: 1080px;
  max-width: 480px;
  margin: auto;
  padding: max(5px, env(safe-area-inset-top)) 10px
    max(6px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #142b42;
  border-left: 1px solid #335068;
  border-right: 1px solid #335068;
}
header {
  height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.square {
  width: 44px;
  font:
    bold 23px Arcade,
    monospace;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand img {
  width: 146px;
  height: 44px;
  object-fit: contain;
}
.brand small {
  font:
    24px/0.8 Arcade,
    monospace;
  color: var(--gold);
  width: 44px;
}
.hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 49px;
  padding: 5px 11px;
  background: #0c2135;
  border: 1px solid #456a80;
  border-top: 3px solid #517990;
}
.hud div {
  display: flex;
  flex-direction: column;
}
.hud small {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.8px;
}
.hud b {
  font-size: 19px;
}
.hud .money b {
  color: var(--gold);
  font:
    30px/0.9 Arcade,
    monospace;
}
#hearts {
  color: var(--pink);
  font-size: 22px;
}
.arena-wrap {
  flex: none;
  background: #112c40;
  border: 2px solid #638c9d;
  box-shadow: 0 3px #071b2e;
  overflow: hidden;
}
.arena-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--paper);
  background: #16384b;
}
.arena-head span:last-child {
  color: var(--gold);
}
#arena {
  display: block;
  width: 100%;
  height: clamp(148px, 21svh, 205px);
  touch-action: manipulation;
}
.mood-key {
  display: flex;
  justify-content: center;
  gap: 15px;
  font-size: 12px;
  padding: 3px;
}
.mood-key span:nth-child(1) {
  color: #aaf3b9;
}
.mood-key span:nth-child(2) {
  color: #ffe395;
}
.mood-key span:nth-child(3) {
  color: #ffb1be;
}
.crowd-bar {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 7px;
  min-height: 24px;
  font-size: 12px;
  background: #0c263a;
}
.crowd-bar #status {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.crowd-bar #crowd {
  white-space: nowrap;
  color: var(--gold);
}
.crowd-bar.danger {
  background: #622b46;
  color: white;
}
#workers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  flex: none;
}
.worker {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  text-align: left;
  min-height: 51px;
  background: #234457;
}
.worker canvas {
  width: 34px;
  height: 43px;
  flex: none;
}
.worker-info {
  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
  gap: 0 3px;
}
.worker strong {
  font-size: 14px;
  grid-column: 1/-1;
  font-weight: 700;
}
.worker small {
  font-size: 12px;
  color: var(--muted);
}
.worker b {
  color: var(--gold);
  font-size: 13px;
}
.worker.affordable {
  border-color: var(--gold);
}
.worker.mastered {
  box-shadow: inset 0 0 0 1px rgba(255,227,149,.28);
}
.worker.specialized {
  border-color: var(--gold);
  background: linear-gradient(135deg,#234457,#2c5364);
}
.worker.specialized b {
  font-size: 11px;
  line-height: 1.05;
}
.puzzle {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.puzzle-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 18px;
  gap: 5px;
  font-size: 13px;
}
.puzzle-head b {
  color: var(--pink);
}
.puzzle-head span {
  font-size: 12px;
  color: var(--mint);
}
#board-wrap {
  position: relative;
  flex: 1;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}
.mylar-shell {
  width: min(100%, calc(100cqh - 29px));
  flex: none;
  padding: 0 10px;
  border: 2px solid #dfeaf5;
  border-radius: 6px 6px 12px 12px;
  background: linear-gradient(
    100deg,
    #6b789c 0%,
    #e3e8f1 4%,
    #9daeca 8%,
    #f0f5fa 16%,
    #a6b9cd 47%,
    #edf5fa 86%,
    #7c8ea8 96%,
    #eef6ff
  );
  box-shadow: 0 4px #06182b;
}
.mylar-zip {
  height: 16px;
  border-bottom: 4px double #77849e;
  color: #273b56;
  text-align: center;
}
.mylar-zip span {
  font-size: 9px;
  letter-spacing: 1.1px;
  vertical-align: top;
}
.mylar-footer {
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #273b56;
  font-size: 9px;
  letter-spacing: 0.7px;
}
.mylar-footer img {
  height: 19px;
  width: 70px;
  object-fit: contain;
}
#board {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  outline: 2px solid #657b99;
  background: #101e35;
  touch-action: none;
  border-radius: 2px;
}
#board-callout {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  color: var(--gold);
  font:
    40px/0.9 Arcade,
    monospace;
  text-shadow:
    3px 3px #512653,
    -2px -2px #512653;
}
.pop {
  animation: callout 1.1s ease-out;
}
#tray {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 66px;
  gap: 7px;
  flex: none;
}
.tray-piece {
  padding: 0;
  min-width: 0;
  touch-action: none;
  background: #19384f;
  border-color: #496981;
  overflow: hidden;
}
.tray-piece canvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.tray-piece.selected {
  border-color: var(--gold);
  background: #354c60;
}
.tray-piece.used {
  opacity: 0.22;
}
.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
}
.bottom > span {
  font-size: 13px;
  color: #d3e4ec;
  max-width: 70%;
}
.bottom button {
  min-height: 40px;
  padding: 4px 8px;
  font-size: 13px;
  background: #483145;
  border-color: #9b6d82;
  white-space: nowrap;
}
.bottom button b {
  color: var(--gold);
}
#drag-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}
dialog {
  color: var(--paper);
  background: #153249;
  border: 3px solid #7094a8;
  border-radius: 4px;
  width: min(440px, calc(100% - 24px));
  max-height: 94svh;
  padding: 22px;
  box-shadow: 6px 6px 0 #071222;
  animation: panel-in 150ms ease-out;
}
dialog::backdrop {
  background: #060e1deb;
}
dialog h1,
dialog h2 {
  font:
    44px/0.95 Arcade,
    monospace;
  color: var(--gold);
  margin: 10px 0 18px;
}
dialog p {
  font-size: 17px;
  line-height: 1.4;
  color: #d1e3ee;
}
dialog .label {
  font-size: 13px;
  letter-spacing: 1.7px;
  color: var(--mint);
}
.primary {
  width: 100%;
  min-height: 49px;
  padding: 10px 12px;
  color: #103943;
  background: var(--mint);
  border-color: #e3fff4;
  border-bottom: 4px solid #62b19e;
  font-size: 20px;
  font-weight: 800;
}
.secondary {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  min-height: 44px;
}
.menu-pair {
  display: flex;
  gap: 8px;
}
.difficulty {
  display: flex;
  gap: 8px;
  margin: 14px 0;
}
.difficulty button {
  flex: 1;
  min-height: 44px;
  font-size: 16px;
}
.difficulty button.selected {
  border-color: var(--mint);
  background: #315a66;
  color: var(--mint);
}
.mini-guide {
  padding: 12px;
  background: #0d263b;
  border-left: 3px solid var(--pink);
  font-size: 16px;
  line-height: 1.55;
  margin: 15px 0;
}
.mini-guide b {
  color: var(--mint);
}
.muted {
  font-size: 13px !important;
  color: #a1bdcf !important;
  line-height: 1.35 !important;
}
.title-screen {
  padding: 0;
  max-width: 420px;
  overflow: auto;
}
.title-stage {
  background: #103146 url("market-pixel.webp") center/cover;
  text-align: center;
  padding: 15px 12px 4px;
  border-bottom: 3px solid #6495a7;
}
.official-title-logo {
  width: 210px;
  height: 65px;
  object-fit: contain;
  margin: auto;
}
.game-title {
  font:
    100px/0.7 Arcade,
    monospace !important;
  letter-spacing: -2px;
  color: var(--paper) !important;
  text-shadow:
    5px 5px #243251,
    -3px -3px #243251;
  margin: 18px 0 10px !important;
}
.game-title span {
  color: var(--pink);
  display: block;
}
.title-stage canvas {
  display: block;
  width: 100%;
  height: auto;
}
.title-tag {
  font-size: 14px !important;
  color: var(--gold) !important;
  letter-spacing: 1.5px;
  margin: 0 0 10px;
}
.title-controls {
  padding: 4px 20px 14px;
}
.title-controls .muted {
  text-align: center;
}
.level-map {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin: 18px 0;
}
.level-map div {
  border: 2px solid #46657c;
  padding: 10px 0;
  text-align: center;
  font:
    22px/1 Arcade,
    monospace;
  color: #9bb3c5;
  background: #0b243a;
}
.level-map .complete {
  color: var(--mint);
  border-color: #5a9c90;
}
.level-map .current {
  border-color: var(--gold);
  color: var(--gold);
}
.results {
  display: flex;
  gap: 7px;
  margin: 18px 0;
}
.results div {
  flex: 1;
  text-align: center;
  background: #0e273c;
  border-top: 2px solid #4c7088;
  padding: 14px 5px;
  color: #a9c2d0;
  font-size: 15px;
}
.results b {
  display: block;
  font:
    34px/1 Arcade,
    monospace;
  color: var(--gold);
}
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  min-height: 54px;
  border-bottom: 1px solid #476379;
  font-size: 18px;
}
.setting-row input[type="range"] {
  width: 56%;
  accent-color: var(--mint);
}
.setting-row input[type="checkbox"] {
  width: 24px;
  height: 24px;
  accent-color: var(--mint);
}
.setting-row:last-of-type {
  margin-bottom: 20px;
}
.cinematic {
  background: #09172c;
  padding: 0;
  width: min(470px, calc(100% - 20px));
  border-color: #758ba7;
}
.scene-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  color: var(--gold);
  font:
    20px Arcade,
    monospace;
}
.scene-top img {
  width: 150px;
  height: 42px;
  object-fit: contain;
}
.scene-art {
  height: auto;
  aspect-ratio: 1.15;
  background-repeat: no-repeat;
  border-top: 3px solid #748aa4;
  border-bottom: 3px solid #748aa4;
  image-rendering: pixelated;
  animation: scene-in 0.35s ease-out;
  position: relative;
  overflow: hidden;
}
.scene-text {
  padding: 16px 18px 5px;
  min-height: 170px;
}
.scene-text > b {
  font-size: 14px;
  color: var(--pink);
  letter-spacing: 1px;
}
.scene-text p {
  font:
    25px/1.15 Arcade,
    monospace;
  color: var(--paper);
  min-height: 87px;
  margin: 10px 0;
}
.scene-buttons {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 18px 18px;
}
.scene-buttons button {
  padding: 8px 12px;
  min-width: 115px;
}
.scene-buttons button:last-child {
  color: var(--gold);
}
.boss-reveal {
  padding: 20px 0;
  text-align: center;
  overflow: hidden;
  background: #10294b;
  border: 3px solid #7cbecb;
}
.boss-kicker {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--mint);
}
.boss-number {
  font:
    30px Arcade,
    monospace;
  letter-spacing: 3px;
  color: var(--gold);
  margin: 10px;
}
.boss-stage {
  height: 210px;
  position: relative;
  background: #215478;
  border-block: 3px solid #79aabc;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.boss-rays {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 12px,
    #a3deeb20 12px 15px,
    transparent 15px 27px
  );
  animation: boss-lines 0.7s linear infinite;
}
.boss-portrait {
  width: 184px;
  height: 184px;
  z-index: 1;
  border: 3px solid #c4eef6;
  background-size: 500% 200%;
  image-rendering: pixelated;
  animation: boss-arrive 0.6s cubic-bezier(0.15, 0.8, 0.2, 1) both;
  box-shadow: 7px 7px #0d243e;
}
.boss-stamp {
  z-index: 2;
  position: absolute;
  bottom: 8px;
  background: var(--gold);
  color: var(--ink);
  font-size: 13px;
  padding: 5px 14px;
  letter-spacing: 1.3px;
}
.boss-reveal .boss-name {
  font-size: 42px;
  margin: 18px 14px 12px;
  animation: boss-name 0.6s 0.2s both;
  color: white;
}
.boss-rule {
  width: 65%;
  height: 3px;
  background: var(--pink);
  margin: auto;
}
.boss-reveal .boss-mission {
  font-size: 14px;
  margin: 15px;
  color: #d4eaf4;
}
.boss-go {
  background: var(--gold);
  color: var(--ink);
  border-color: #fff3bb;
  padding: 10px 24px;
  font-size: 20px;
  min-height: 49px;
}
.pressure .arena-wrap {
  border-color: #ff8ba7;
}
.sale-pop .money {
  animation: cash-bounce 0.3s ease-out;
}
.customer-lost .hud {
  animation: loss-shake 0.3s ease-out;
}
.bag-wasted .mylar-shell {
  animation: waste-tilt 0.55s ease-out;
}
@keyframes callout {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.75);
  }
  18%,
  65% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes scene-in {
  from {
    opacity: 0;
    filter: brightness(0.4);
  }
  to {
    opacity: 1;
    filter: brightness(1);
  }
}
@keyframes cash-bounce {
  40% {
    transform: scale(1.15);
  }
}
@keyframes loss-shake {
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}
@keyframes waste-tilt {
  35% {
    transform: translateX(12px) rotate(2deg);
    opacity: 0.4;
  }
}
@keyframes boss-arrive {
  from {
    transform: translateX(260px);
  }
  to {
    transform: none;
  }
}
@keyframes boss-name {
  from {
    transform: translateX(-70%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes boss-lines {
  to {
    background-position: 0 27px;
  }
}
@media (max-height: 760px) {
  #app {
    gap: 4px;
  }
  header {
    height: 40px;
  }
  .brand img {
    height: 38px;
  }
  .hud {
    min-height: 43px;
  }
  #arena {
    height: 125px;
  }
  .arena-head {
    padding: 2px 7px;
  }
  .mood-key {
    padding: 1px;
    font-size: 12px;
  }
  .crowd-bar {
    padding: 2px 7px;
    min-height: 20px;
  }
  .worker {
    min-height: 46px;
  }
  .worker canvas {
    width: 28px;
    height: 35px;
  }
  #tray {
    height: 57px;
  }
  .puzzle-head {
    font-size: 12px;
  }
  .puzzle-head span {
    font-size: 11px;
  }
  .bottom {
    min-height: 36px;
  }
  .bottom button {
    min-height: 36px;
  }
  .title-stage .game-title {
    font-size: 80px !important;
  }
  .title-stage canvas {
    height: 95px;
    object-fit: contain;
  }
  .title-stage {
    padding-top: 8px;
  }
  .title-controls .difficulty {
    margin: 10px 0;
  }
  .scene-art {
    aspect-ratio: 1.45;
  }
  .scene-text {
    min-height: 150px;
  }
  .boss-stage {
    height: 180px;
  }
  .boss-portrait {
    height: 160px;
    width: 160px;
  }
}
@media (max-width: 360px) {
  #app {
    padding-inline: 6px;
  }
  .worker {
    padding-inline: 3px;
  }
  .worker canvas {
    display: none;
  }
  .worker strong {
    font-size: 14px;
  }
  .worker small,
  .worker b {
    font-size: 12px;
  }
  .arena-head {
    font-size: 12px;
  }
  .puzzle-head span {
    max-width: 42%;
    text-align: right;
  }
  .scene-text p {
    font-size: 23px;
  }
  dialog {
    padding: 17px;
  }
  .cinematic,
  .title-screen {
    padding: 0;
  }
  .game-title {
    font-size: 86px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  #board-callout.pop {
    opacity: 1;
  }
}
html.reduced-motion *,
html.reduced-motion *::before,
html.reduced-motion *::after {
  animation: none !important;
  transition: none !important;
}
/* Portrait budgeting: preserve the packing window before ornamental chrome. */
@media (min-height: 761px) {
  #app {
    gap: 4px;
  }
  header {
    height: 39px;
  }
  .brand img {
    height: 37px;
  }
  .hud {
    min-height: 42px;
  }
  .arena-head {
    padding: 2px 7px;
  }
  #arena {
    height: clamp(128px, 17svh, 164px);
  }
  .mood-key {
    padding: 1px;
  }
  .crowd-bar {
    min-height: 20px;
    padding: 2px 7px;
  }
  .worker {
    min-height: 44px;
  }
  .worker canvas {
    width: 29px;
    height: 36px;
  }
  .puzzle {
    gap: 4px;
  }
  #tray {
    height: 60px;
  }
  .bottom,
  .bottom button {
    min-height: 36px;
  }
}
.scene-speaker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--pink);
  font-size: 15px;
}
.scene-speaker canvas {
  width: 42px;
  height: 42px;
  background: #21445c;
  border: 1px solid #688394;
}
.scene-speaker span {
  margin-left: auto;
  color: #a1bdcf;
  font-size: 13px;
}
/* Preserve sprite proportions instead of stretching the crowd canvas. */
#arena {
  height: auto;
  aspect-ratio: 21/10;
}
html.reduced-motion #board-callout.pop {
  opacity: 1;
}
.result-art {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  border-block: 1px solid #37576f;
  background: #102b40;
}

/* Pop-Up Prep: compact between-show business layer */
.prep-grid{display:grid;gap:10px;margin:14px 0;text-align:left}.prep-card{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:10px;border:2px solid #ffffff22;background:#071b3177;border-radius:10px}.prep-card small{display:block;opacity:.72;margin-top:2px}.prep-card p{margin:4px 0;font-size:.86em}.prep-card em{font-style:normal;font-size:.8em;color:#dff7ff}.prep-icon{font-size:26px;text-align:center}.prep-summary{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border:2px solid #ffffff22;border-radius:8px}.prep-card button{white-space:nowrap}@media(max-width:520px){.prep-card{grid-template-columns:36px 1fr}.prep-card button{grid-column:1/-1;width:100%}}


.mcnom-rescue{display:grid;grid-template-columns:minmax(112px,34%) 1fr;gap:14px;align-items:center;margin:10px 0 18px;padding:10px;border:2px solid rgba(255,226,122,.8);background:linear-gradient(135deg,rgba(16,31,61,.94),rgba(42,75,92,.9));box-shadow:0 5px 0 rgba(0,0,0,.28)}
.mcnom-rescue img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 42%;image-rendering:pixelated;border:3px solid #fff;box-shadow:0 0 0 3px #0b1731,4px 4px 0 rgba(0,0,0,.35)}
.mcnom-rescue .reward-hero{margin:0 0 8px;font-size:clamp(30px,7vw,48px)}
.mcnom-rescue p{margin:0}
@media(max-width:520px){.mcnom-rescue{grid-template-columns:104px 1fr;gap:10px;padding:8px}.mcnom-rescue .reward-hero{font-size:30px}}
/* Crew hunger / McNom-Nom's rescue */
.show-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0}.meal{min-height:34px;font:700 11px Arcade,monospace;border:2px solid #ffffff22;background:#102b40;color:#dff7ff;border-radius:8px}.meal.hungry{border-color:#ffd166;box-shadow:0 0 0 2px #ff9f1c33;color:#fff3b0;animation:mealPulse .8s steps(2,end) infinite}.meal.starving{border-color:#ff5d73;color:#fff;background:#4b1730}.meal.boost{border-color:#8fffc1;color:#8fffc1}.meal:disabled{opacity:.62}@keyframes mealPulse{50%{transform:scale(1.02)}}html.reduced-motion .meal.hungry{animation:none}
.reward-grid{display:grid;gap:8px;margin:12px 0;text-align:left}.reward-card{padding:10px;border:2px solid #ffffff22;border-radius:9px;background:#071b3177}.reward-card.unlocked{border-color:#ffe08a;background:#3b2b1266}.reward-card b{display:block;font-size:1.05em}.reward-card small{opacity:.78}.reward-hero{font-size:2.1em;color:#ffe08a;margin:.2em 0}.future-roadmap{display:grid;gap:7px;margin:12px 0;text-align:left}.future-roadmap div{padding:8px;border-left:4px solid #ffe08a;background:#ffffff0b}

/* Product strategy */
.product-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 14px}.product-pick{white-space:normal;min-height:78px;text-align:left}.product-pick b,.product-pick small{display:block}.product-pick small{opacity:.78;margin-top:4px}.product-pick.selected{outline:3px solid #ffe08a;transform:translateY(-1px)}@media(max-width:620px){.product-picks{grid-template-columns:1fr}}
.show-condition{display:flex;gap:.55rem;align-items:center;justify-content:space-between;margin:.65rem 0 1rem;padding:.7rem .85rem;border:2px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(20,28,52,.72)}
.show-condition span{font-size:.76rem;opacity:.86;text-align:right;max-width:55%}.specialize{margin:.8rem 0;padding:.7rem;border:2px dashed rgba(255,255,255,.2);border-radius:12px}.specialize p{margin:.3rem 0 .55rem}.specialize button{display:block;width:100%;margin:.4rem 0}.specialize button small,.specialize.chosen small{display:block;margin-top:.2rem;opacity:.82}.specialize.chosen{border-style:solid}
@media(max-width:520px){.show-condition{display:block}.show-condition span{display:block;max-width:none;text-align:left;margin-top:.35rem}}

/* Production pass v6: four-column HUD and live reward redemption state. */
.hud{grid-template-columns:1.3fr .8fr .8fr 1fr}
.reward-card{width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer}
.reward-card:disabled{cursor:default;opacity:.62}
.reward-card.redeemed{border-color:#8dd9a8;background:#14372766}
@media(max-width:430px){.hud{grid-template-columns:1.25fr .75fr .75fr 1fr;gap:4px}.hud>div{padding-inline:5px}.hud b{font-size:.92em}}

.future-roadmap{margin:14px 0;padding:12px 14px;border:2px dashed rgba(255,255,255,.24);border-radius:12px;background:rgba(10,16,31,.34);text-align:left}.future-roadmap b{display:block;letter-spacing:.08em;margin-bottom:5px}.future-roadmap small{display:block;line-height:1.55;opacity:.78}

.score-breakdown{font-size:.72rem;opacity:.72;margin:.55rem auto;max-width:34rem;text-align:center}

/* Accessibility helpers: visually hidden, still available to assistive technology. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* v13 game-feel pulses: brief feedback only; reduced-motion disables them. */
.juice-clear .mylar-shell{animation:juice-clear .22s ease-out}
.juice-combo .mylar-shell{animation:juice-combo .32s ease-out}
.juice-milestone .game-main{animation:juice-milestone .48s ease-out}
@keyframes juice-clear{0%{transform:scale(1)}45%{transform:scale(1.012)}100%{transform:scale(1)}}
@keyframes juice-combo{0%{transform:scale(1)}35%{transform:scale(1.022)}65%{transform:scale(.995)}100%{transform:scale(1)}}
@keyframes juice-milestone{0%,100%{transform:translate(0)}20%{transform:translate(2px,-1px)}40%{transform:translate(-2px,1px)}60%{transform:translate(1px,1px)}80%{transform:translate(-1px,-1px)}}
html.reduced-motion .juice-clear .mylar-shell,html.reduced-motion .juice-combo .mylar-shell,html.reduced-motion .juice-milestone .game-main{animation:none}

/* v14: readable rush pressure without covering the playfield. */
.arena-head{gap:8px;align-items:center}
.rush-meter{margin-left:auto;margin-right:auto;padding:2px 8px;border:1px solid currentColor;border-radius:999px;font-family:var(--font-display,inherit);font-size:11px;letter-spacing:.08em;line-height:1.35;opacity:.72;transition:transform .16s ease,opacity .16s ease}
.rush-1{opacity:.9}
.rush-2{opacity:1;transform:scale(1.04);font-weight:800}
.rush-3{opacity:1;transform:scale(1.08);font-weight:900;animation:rush-pulse .62s ease-in-out infinite alternate}
#app[data-rush="2"] .arena-wrap{box-shadow:0 0 0 2px rgba(255,203,74,.18)}
#app[data-rush="3"] .arena-wrap{box-shadow:0 0 0 3px rgba(255,139,167,.25),0 0 24px rgba(255,139,167,.12)}
@keyframes rush-pulse{from{filter:brightness(1)}to{filter:brightness(1.35)}}
html.reduced-motion .rush-3{animation:none}
@media(max-width:520px){.rush-meter{font-size:9px;padding:2px 5px;letter-spacing:.04em}}

/* Story-show identity: brief event pulse, disabled by Reduced Motion. */
#app.show-moment .arena { animation: showMomentPulse .7s ease-out; }
@keyframes showMomentPulse { 0% { filter: brightness(1); } 28% { filter: brightness(1.12) saturate(1.08); } 100% { filter: brightness(1); } }
html.reduced-motion #app.show-moment .arena { animation: none; }

/* v17 animated comic cinematics */
.comic-cinematic { width:min(500px,calc(100% - 14px)); background:#071326; }
.comic-page { padding:0 9px 8px; perspective:700px; overflow:hidden; }
.comic-panel { border:4px solid #e9f5ff; box-shadow:0 7px 0 #020711, 0 0 0 2px #020711; transform-origin:center; animation:comic-camera 5.5s ease-out both; }
.comic-panel::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%); animation:comic-light 3.2s ease-in-out infinite; }
.comic-caption,.comic-bubble { position:absolute; z-index:4; color:#071326; background:#fffdf0; border:3px solid #071326; box-shadow:4px 4px 0 rgba(0,0,0,.62); font-family:Arcade,monospace; }
.comic-caption { left:10px; right:10px; bottom:10px; padding:9px 11px; background:#fff0a8; transform:rotate(-.5deg); }
.comic-bubble { max-width:68%; top:14px; padding:10px 12px 11px; border-radius:22px; animation:bubble-pop .25s cubic-bezier(.2,1.6,.4,1) both; }
.comic-bubble::after { content:""; position:absolute; bottom:-13px; width:18px; height:18px; background:#fffdf0; border-bottom:3px solid #071326; transform:rotate(45deg); }
.bubble-left { left:12px; } .bubble-left::after { left:30px; border-right:3px solid #071326; }
.bubble-right { right:12px; } .bubble-right::after { right:30px; border-right:3px solid #071326; }
.comic-caption b,.comic-bubble b { color:#a31252; font-size:12px; letter-spacing:1px; }
.comic-caption p,.comic-bubble p { margin:5px 0 0; min-height:38px; font:20px/1.12 Arcade,monospace; color:#071326; }
.comic-speaker { position:absolute; z-index:3; bottom:-8px; width:42%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:center 42%; image-rendering:pixelated; border:3px solid rgba(255,255,255,.8); background:#dff5ff; box-shadow:0 0 0 3px rgba(5,18,50,.85),5px 7px 0 rgba(0,0,0,.35); filter:drop-shadow(5px 5px 0 rgba(0,0,0,.22)); animation:comic-actor 2.1s ease-in-out infinite alternate; }
.actor-left { left:2%; } .actor-right { right:2%; transform:scaleX(-1); }
.fist-bump-stage { position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.fist-bump-stage canvas { width:45%; height:auto; image-rendering:pixelated; filter:drop-shadow(5px 5px 0 rgba(0,0,0,.55)); }
.fist-bump-stage canvas:first-child { animation:fist-left .72s cubic-bezier(.18,.9,.25,1) both; }
.fist-bump-stage canvas:last-child { animation:fist-right .72s cubic-bezier(.18,.9,.25,1) both; }
.fist-impact { position:absolute; z-index:5; left:50%; top:53%; font-size:58px; color:#fff3a1; text-shadow:0 0 8px #fff,0 0 18px #ffbf47; transform:translate(-50%,-50%) scale(0); animation:fist-impact .7s .38s cubic-bezier(.2,1.7,.3,1) both; }
.fist-page .comic-panel { animation:comic-fist-camera 2.8s ease-out both; }
.fist-page .comic-bubble { top:auto; bottom:14px; left:50%; right:auto; width:78%; max-width:none; transform:translateX(-50%); text-align:center; }
.fist-page .comic-bubble::after { display:none; }
@keyframes comic-camera { 0%{transform:scale(1.09) translate3d(-1.5%,0,0);filter:brightness(.72)} 22%{filter:brightness(1)} 100%{transform:scale(1.01) translate3d(1.2%,-.6%,0);filter:brightness(1)} }
@keyframes comic-light { 0%,55%{transform:translateX(-130%);opacity:0} 70%{opacity:1} 100%{transform:translateX(130%);opacity:0} }
@keyframes bubble-pop { from{opacity:0;transform:scale(.7) rotate(-2deg)} to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes comic-actor { from{translate:0 2px} to{translate:0 -4px} }
@keyframes fist-left { from{transform:translateX(-70%) scale(.9)} 65%,100%{transform:translateX(12%) scale(1.05)} }
@keyframes fist-right { from{transform:translateX(70%) scaleX(-1) scale(.9)} 65%,100%{transform:translateX(-12%) scaleX(-1) scale(1.05)} }
@keyframes fist-impact { 0%,48%{transform:translate(-50%,-50%) scale(0);opacity:0} 62%{transform:translate(-50%,-50%) scale(1.45);opacity:1} 100%{transform:translate(-50%,-50%) scale(.9);opacity:.72} }
@keyframes comic-fist-camera { 0%{transform:scale(1.12);filter:brightness(.55)} 38%{transform:scale(1.06);filter:brightness(.9)} 58%{transform:scale(1.025);filter:brightness(1.25)} 100%{transform:scale(1);filter:brightness(1)} }
@media (prefers-reduced-motion:reduce) { .comic-panel,.comic-panel::after,.comic-bubble,.comic-speaker,.fist-bump-stage canvas,.fist-impact{animation:none!important} .fist-impact{transform:translate(-50%,-50%) scale(.9);opacity:.72} }
/* v18: bite-sized product education / discovery collection */
.lore-progress{display:inline-flex;gap:7px;align-items:baseline;margin:2px 0 12px;padding:7px 11px;border:2px solid #fff3;background:#081a32;border-radius:8px}.lore-progress b{font:24px Arcade,monospace;color:#ffe27a}.lore-grid{display:grid;gap:8px;max-height:min(54vh,470px);overflow:auto;padding:2px}.lore-card{display:grid;grid-template-columns:52px 1fr;gap:9px;text-align:left;padding:10px;border:2px solid #ffffff22;background:#0b203b;border-radius:9px}.lore-card.unlocked{border-color:#79d9ff66;background:linear-gradient(110deg,#0b203b,#122b48)}.lore-card.locked{opacity:.62}.lore-icon{display:grid;place-items:center;font-size:29px;background:#061326;border:2px solid #ffffff1f;border-radius:8px;min-height:48px}.lore-card b{font:15px Arcade,monospace;color:#ffe27a}.lore-card p{margin:5px 0 0;font-size:14px;line-height:1.25}.product-lore-page .comic-caption{background:#dff8ff;border-color:#07354d}.product-lore-page .comic-panel{box-shadow:0 7px 0 #020711,0 0 0 2px #020711,0 0 24px rgba(103,218,255,.18)}

/* v21 emotional comic direction: thought balloons, show moods, and panel-to-play transition. */
.comic-thought{position:absolute;z-index:4;max-width:66%;top:14px;padding:11px 14px;color:#071326;background:#fffdf0;border:3px solid #071326;border-radius:46% 52% 45% 55%;box-shadow:4px 4px 0 rgba(0,0,0,.62);font-family:Arcade,monospace;animation:bubble-pop .25s cubic-bezier(.2,1.6,.4,1) both}
.comic-thought::before,.comic-thought::after{content:"";position:absolute;background:#fffdf0;border:3px solid #071326;border-radius:50%;width:15px;height:15px;bottom:-17px}
.comic-thought::after{width:8px;height:8px;bottom:-29px}
.comic-thought.bubble-left{left:14px}.comic-thought.bubble-left::before{left:28px}.comic-thought.bubble-left::after{left:17px}
.comic-thought.bubble-right{right:14px}.comic-thought.bubble-right::before{right:28px}.comic-thought.bubble-right::after{right:17px}
.comic-thought b{color:#6b3aa8;font-size:12px;letter-spacing:1px}.comic-thought p{margin:5px 0 0;min-height:38px;font:19px/1.12 Arcade,monospace;color:#071326}
.mood-danger .comic-panel{animation-name:comic-danger-camera}.mood-midnight .comic-panel{animation-name:comic-midnight-camera}.mood-finale .comic-panel{animation-name:comic-finale-camera}.mood-heart .comic-panel{animation-name:comic-heart-camera}
@keyframes comic-danger-camera{0%{transform:scale(1.12) translateX(-2%);filter:brightness(.58) contrast(1.12)}45%{transform:scale(1.055) translateX(1%);filter:brightness(.9) contrast(1.08)}100%{transform:scale(1.025) translateX(-.5%);filter:brightness(1)}}
@keyframes comic-midnight-camera{0%{transform:scale(1.04) translateY(1%);filter:brightness(.5) saturate(.7)}55%{filter:brightness(.72) saturate(.82)}100%{transform:scale(1.015) translateY(-1%);filter:brightness(.9)}}
@keyframes comic-finale-camera{0%{transform:scale(1.15);filter:brightness(.65) contrast(1.18)}35%{transform:scale(1.07);filter:brightness(.95)}100%{transform:scale(1);filter:brightness(1.08)}}
@keyframes comic-heart-camera{0%{transform:scale(1.07);filter:brightness(.82)}100%{transform:scale(1.015);filter:brightness(1.04)}}
.comic-cinematic.comic-exit{animation:comic-to-game .46s cubic-bezier(.2,.8,.2,1) both;pointer-events:none}
@keyframes comic-to-game{0%{transform:scale(1);opacity:1}55%{transform:scale(1.035);opacity:1;filter:brightness(1.3)}100%{transform:scale(1.14);opacity:0;filter:brightness(1.8)}}
@media (prefers-reduced-motion:reduce){.comic-thought,.mood-danger .comic-panel,.mood-midnight .comic-panel,.mood-finale .comic-panel,.mood-heart .comic-panel,.comic-cinematic.comic-exit{animation:none!important}}

/* v22 recurring partner comedy: fake disasters, reveal beats, and comic mock-fury. */
.comedy-page .comic-panel::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2}
.comedy-fake-disaster .comic-panel{animation:comedy-panic-camera .52s cubic-bezier(.2,.9,.25,1) both}
.comedy-fake-disaster .comic-panel::after{box-shadow:inset 0 0 70px rgba(130,0,0,.38)}
.comedy-reveal .comic-panel{animation:comedy-relief .48s cubic-bezier(.15,1.5,.35,1) both}
.comedy-reveal .comic-panel::after{background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.2),transparent 52%)}
.comedy-death-stare .comic-speaker{animation:comedy-stare .8s steps(2,end) both}
.comedy-death-stare .comic-panel::after{background:linear-gradient(90deg,transparent 0 44%,rgba(255,255,255,.08) 50%,transparent 56%)}
@keyframes comedy-panic-camera{0%{transform:scale(1.02)}35%{transform:scale(1.13) rotate(-.35deg)}65%{transform:scale(1.1) rotate(.35deg)}100%{transform:scale(1.08)}}
@keyframes comedy-relief{0%{transform:scale(1.1);filter:brightness(.7)}55%{transform:scale(.985);filter:brightness(1.22)}100%{transform:scale(1.015);filter:brightness(1)}}
@keyframes comedy-stare{0%{transform:translateY(4px) scale(1)}55%{transform:translateY(0) scale(1.09)}100%{transform:translateY(0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.comedy-fake-disaster .comic-panel,.comedy-reveal .comic-panel,.comedy-death-stare .comic-speaker{animation:none!important}}

/* v26 skill-rewarded crew supers: dramatic but brief fighting-game-style cut-ins. */
.arena-wrap{position:relative}.super-cut-in{position:absolute;z-index:12;left:4%;right:4%;top:42px;height:112px;display:flex;align-items:center;gap:12px;padding:5px 16px;background:linear-gradient(100deg,rgba(4,13,31,.96),rgba(24,69,91,.94));border:3px solid #ffe27a;box-shadow:0 7px 0 #020711,0 0 24px rgba(255,226,122,.35);transform:translateX(-120%) skewX(-8deg);opacity:0;pointer-events:none;overflow:hidden}.super-cut-in.active{animation:super-cut 1.02s cubic-bezier(.18,.86,.22,1) both}.super-cut-in canvas{width:94px;height:104px;image-rendering:pixelated;transform:skewX(8deg);filter:drop-shadow(4px 4px 0 #020711)}.super-cut-in div{display:flex;flex-direction:column;transform:skewX(8deg);text-align:left}.super-cut-in small{font:10px Arcade,monospace;color:#bdefff}.super-cut-in b{font:clamp(20px,5vw,34px) Arcade,monospace;color:#ffe27a;text-shadow:3px 3px 0 #8b245d}.super-cut-in span{font:14px Booth,sans-serif;color:white}.super-cut-in.super-1{background:linear-gradient(100deg,rgba(4,13,31,.96),rgba(45,92,109,.94))}.super-cut-in.super-2{background:linear-gradient(100deg,rgba(4,13,31,.96),rgba(77,46,111,.94))}@keyframes super-cut{0%{transform:translateX(-120%) skewX(-8deg);opacity:0}16%,72%{transform:translateX(0) skewX(-8deg);opacity:1}100%{transform:translateX(120%) skewX(-8deg);opacity:0}}html.reduced-motion .super-cut-in.active{animation:none;transform:none;opacity:1} @media(max-width:520px){.super-cut-in{height:92px;top:36px;padding:3px 9px}.super-cut-in canvas{width:70px;height:82px}.super-cut-in b{font-size:20px}.super-cut-in span{font-size:11px}}

/* v27 production-clear polish: the board itself reacts to skilled clears while preserving readability. */
.juice-clear #board{filter:brightness(1.08) saturate(1.08);box-shadow:0 0 16px rgba(255,238,160,.20)}
.juice-combo #board{animation:board-combo-flash .32s ease-out;box-shadow:0 0 24px rgba(185,239,255,.30),0 0 42px rgba(255,226,122,.16)}
.juice-milestone #board{animation:board-milestone-flash .48s ease-out;box-shadow:0 0 30px rgba(255,238,160,.34),0 0 56px rgba(190,225,255,.20)}
@keyframes board-combo-flash{0%{filter:brightness(1) saturate(1)}28%{filter:brightness(1.34) saturate(1.22)}100%{filter:brightness(1) saturate(1)}}
@keyframes board-milestone-flash{0%,100%{filter:brightness(1)}22%{filter:brightness(1.42) saturate(1.28)}55%{filter:brightness(1.12) saturate(1.12)}}
html.reduced-motion .juice-combo #board,html.reduced-motion .juice-milestone #board{animation:none;filter:none}

/* v28 super-impact polish: short, role-specific arena flash behind the readable cut-in. */
.arena-wrap::after{content:"";position:absolute;inset:0;z-index:11;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.74),rgba(255,226,122,.22) 28%,transparent 66%)}
.arena-wrap.super-impact-0::after{animation:super-impact-burst .52s ease-out both}
.arena-wrap.super-impact-1::after{background:radial-gradient(circle at 55% 46%,rgba(230,255,255,.82),rgba(103,225,255,.24) 34%,transparent 70%);animation:super-impact-wave .62s ease-out both}
.arena-wrap.super-impact-2::after{background:linear-gradient(105deg,transparent 12%,rgba(255,255,255,.72) 45%,rgba(221,179,255,.28) 58%,transparent 82%);animation:super-impact-dash .48s ease-out both}
@keyframes super-impact-burst{0%{opacity:0;transform:scale(.82)}16%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(1.16)}}
@keyframes super-impact-wave{0%{opacity:0;transform:scale(.72)}22%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}
@keyframes super-impact-dash{0%{opacity:0;transform:translateX(-35%)}28%{opacity:.9}100%{opacity:0;transform:translateX(38%)}}
html.reduced-motion .arena-wrap.super-impact-0::after,html.reduced-motion .arena-wrap.super-impact-1::after,html.reduced-motion .arena-wrap.super-impact-2::after{animation:none;opacity:.12;transform:none}
.super-cut-in.active b{animation:super-title-punch .34s cubic-bezier(.2,1.5,.3,1) both}
@keyframes super-title-punch{0%{transform:scale(.68);letter-spacing:-2px}65%{transform:scale(1.12);letter-spacing:1px}100%{transform:scale(1)}}
html.reduced-motion .super-cut-in.active b{animation:none}


/* v29 super anticipation + impact direction. The next crew super is always readable without adding a new management system. */
.arena-head{gap:8px;align-items:center}
.super-ready{--super-charge:1;position:relative;display:grid;grid-template-columns:1fr;min-width:190px;padding:4px 9px 6px;border:1px solid rgba(189,239,255,.34);border-radius:7px;background:rgba(3,12,28,.72);overflow:hidden;text-align:center;line-height:1.05}
.super-ready::before{content:"";position:absolute;left:0;bottom:0;width:calc(var(--super-charge)*100%);height:3px;background:linear-gradient(90deg,#66d9ff,#ffe27a);box-shadow:0 0 9px rgba(255,226,122,.65);transition:width .12s linear}
.super-ready b{font:9px Arcade,monospace;color:#bdefff;white-space:nowrap}
.super-ready small{margin-top:3px;font:8px Arcade,monospace;color:#92a9ba;white-space:nowrap}
.super-ready i{position:absolute;inset:0;pointer-events:none}
.super-ready.ready{border-color:#ffe27a;box-shadow:0 0 0 1px rgba(255,226,122,.12),0 0 14px rgba(255,226,122,.16)}
.super-ready.ready b,.super-ready.ready small{color:#ffe27a}
.super-ready.ready i{background:linear-gradient(105deg,transparent 15%,rgba(255,255,255,.13) 46%,transparent 62%);animation:super-ready-sheen 1.55s ease-in-out infinite}
@keyframes super-ready-sheen{0%,38%{transform:translateX(-120%)}72%,100%{transform:translateX(120%)}}
#app.super-punch .arena-wrap{animation:super-camera-punch .25s cubic-bezier(.2,.9,.25,1)}
#app.super-punch .super-cut-in{filter:brightness(1.12) saturate(1.12)}
@keyframes super-camera-punch{0%{transform:translate3d(0,0,0) scale(1)}18%{transform:translate3d(-3px,1px,0) scale(1.008)}38%{transform:translate3d(3px,-2px,0) scale(1.012)}62%{transform:translate3d(-1px,1px,0) scale(1.006)}100%{transform:translate3d(0,0,0) scale(1)}}
html.reduced-motion .super-ready.ready i,html.reduced-motion #app.super-punch .arena-wrap{animation:none}
@media(max-width:680px){.arena-head{display:grid;grid-template-columns:1fr auto;gap:5px}.arena-head #wave{grid-column:1}.arena-head #rush{grid-column:2}.arena-head .super-ready{grid-column:1 / -1;grid-row:2;min-width:0;width:100%;padding:3px 6px 5px}.arena-head #stock{grid-column:1 / -1;grid-row:3;text-align:center}.super-ready b{font-size:8px}.super-ready small{font-size:7px}}

/* v33-v35 canonical cast / story-art integration. */
.comic-panel{
  image-rendering:pixelated;
  background-color:#0c2343;
}
.comic-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.025) 50%, transparent 50%) 0 0 / 100% 4px,
    linear-gradient(90deg,rgba(44,174,255,.035) 50%, transparent 50%) 0 0 / 4px 100%;
  mix-blend-mode:screen;
  opacity:.55;
}
.story-cast-ensemble{
  position:absolute;
  z-index:3;
  left:8px;
  right:8px;
  bottom:64px;
  height:42%;
  pointer-events:none;
}
.story-cast-mini{
  position:absolute;
  bottom:0;
  width:31%;
  max-height:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center 42%;
  image-rendering:pixelated;
  border:3px solid #fff;
  background:#bdefff;
  box-shadow:0 0 0 3px #061326,5px 6px 0 rgba(0,0,0,.42);
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.28));
}
.story-cast-packer{left:1%;transform:rotate(-2deg)}
.story-cast-host{right:1%;transform:rotate(2deg)}
.story-cast-eden{left:50%;width:24%;transform:translateX(-50%) translateY(9%) rotate(-1deg)}
.mood-danger .story-cast-mini{filter:drop-shadow(4px 4px 0 rgba(0,0,0,.35)) contrast(1.08)}
.mood-heart .story-cast-mini{filter:drop-shadow(4px 4px 0 rgba(0,0,0,.25)) brightness(1.06)}
.mood-finale .story-cast-mini{box-shadow:0 0 0 3px #061326,0 0 22px rgba(255,226,122,.4),5px 6px 0 rgba(0,0,0,.42)}

.fist-bump-stage img{
  width:45%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center 42%;
  image-rendering:pixelated;
  border:3px solid rgba(255,255,255,.88);
  box-shadow:0 0 0 3px #061326;
  filter:drop-shadow(5px 5px 0 rgba(0,0,0,.55));
}
.fist-bump-stage img:first-child{animation:fist-left .72s cubic-bezier(.18,.9,.25,1) both}
.fist-bump-stage img:last-child{animation:fist-right .72s cubic-bezier(.18,.9,.25,1) both}

.boss-stage{overflow:hidden}
.boss-portrait{image-rendering:pixelated;filter:saturate(.95) contrast(1.06)}
.boss-cast{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.boss-cast img{
  position:absolute;
  bottom:-12%;
  width:38%;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center 42%;
  image-rendering:pixelated;
  border:3px solid rgba(255,255,255,.84);
  background:#cdefff;
  box-shadow:0 0 0 3px #071326;
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.5));
}
.boss-cast-packer{left:5%;transform:rotate(-4deg)}
.boss-cast-host{right:5%;transform:rotate(4deg)}
.boss-cast-eden{left:50%;width:30%!important;bottom:-9%!important;transform:translateX(-50%) rotate(-1deg)}
.boss-stamp{z-index:5}

.super-cut-in{
  --super-power:.35;
  isolation:isolate;
  background:
    linear-gradient(100deg,rgba(4,13,31,.97),rgba(24,69,91,.95)),
    repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,.035) 10px 12px);
}
.super-cut-in::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-20% -10%;
  background:repeating-linear-gradient(112deg,transparent 0 14px,rgba(255,255,255,.11) 14px 18px,transparent 18px 30px);
  transform:translateX(-20%);
  animation:super-speed-lines .42s linear infinite;
}
.super-portrait-wrap{
  position:relative;
  flex:0 0 104px;
  height:104px;
  transform:skewX(8deg)!important;
}
.super-portrait{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  image-rendering:pixelated;
  border:3px solid #fff;
  background:#ccefff;
  box-shadow:0 0 0 3px #020711;
  filter:contrast(1.08) saturate(1.08) drop-shadow(5px 5px 0 #020711);
  transform:scale(1.08);
}
.super-portrait-echo{
  position:absolute;
  inset:2px -10px -2px 10px;
  z-index:-1;
  border:3px solid rgba(255,226,122,calc(.15 + var(--super-power)*.45));
  transform:translateX(10px);
}
.super-copy{position:relative!important;z-index:2;min-width:0;flex:1}
.super-cut-in em{
  align-self:flex-start;
  margin-top:4px;
  padding:2px 6px;
  border:1px solid currentColor;
  font:8px Arcade,monospace;
  font-style:normal;
  color:#ffe27a;
  background:rgba(0,0,0,.28);
}
.super-cut-in.super-0{border-color:#ffe27a}
.super-cut-in.super-1{border-color:#9cf2ff;background:linear-gradient(100deg,rgba(4,13,31,.97),rgba(29,87,108,.95))}
.super-cut-in.super-2{border-color:#dfb7ff;background:linear-gradient(100deg,rgba(4,13,31,.97),rgba(75,42,113,.95))}
.super-cut-in.super-1 .super-portrait-echo{border-color:rgba(156,242,255,.55)}
.super-cut-in.super-2 .super-portrait-echo{border-color:rgba(223,183,255,.55)}
@keyframes super-speed-lines{from{transform:translateX(-22%)}to{transform:translateX(5%)}}

@media(max-width:520px){
  .story-cast-ensemble{bottom:69px;height:35%}
  .story-cast-mini{width:29%;border-width:2px}
  .story-cast-eden{width:22%}
  .boss-cast img{width:36%}
  .boss-cast-eden{width:28%!important}
  .super-portrait-wrap{flex-basis:78px;height:78px}
  .super-cut-in em{font-size:7px}
}
html.reduced-motion .story-cast-mini,
html.reduced-motion .fist-bump-stage img,
html.reduced-motion .super-cut-in::before{animation:none!important}

/* v37 crew-investment presentation: make upgrades feel attached to the locked cast. */
.crew-profile{display:grid;grid-template-columns:116px 1fr;gap:12px;align-items:center;margin:4px 0 12px;padding:8px;border:3px solid #143e5e;border-radius:10px;background:linear-gradient(120deg,#08182d,#102b45);box-shadow:0 5px 0 #030914;text-align:left;overflow:hidden}
.crew-profile img{width:108px;height:108px;object-fit:cover;object-position:center 42%;image-rendering:pixelated;border:3px solid #fff;background:#ccefff;box-shadow:0 0 0 3px #061326}
.crew-profile h2{margin:3px 0 4px;font-size:25px}.crew-profile small{font:10px Arcade,monospace;color:#8ddfff}.crew-profile b{font:11px Arcade,monospace;color:#ffe27a}
.crew-profile-1{border-color:#3e839d}.crew-profile-2{border-color:#785ba8}
.crew-power{display:flex;gap:5px;margin-top:9px}.crew-power i{display:block;width:17px;height:7px;border:1px solid #9db7c8;background:#061326;transform:skewX(-12deg)}.crew-power i.on{background:#ffe27a;border-color:#fff0a0;box-shadow:0 0 7px rgba(255,226,122,.42)}
@media(max-width:480px){.crew-profile{grid-template-columns:88px 1fr}.crew-profile img{width:80px;height:80px}.crew-profile h2{font-size:20px}.crew-profile b{font-size:9px}.crew-power i{width:13px}}

/* v39 canonical spouse-rescue staging; relative scale follows internal height canon without labels. */
.rescue-pair{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
.rescue-cast{position:relative;height:164px;overflow:hidden;border:3px solid #143e5e;background:linear-gradient(#dff8ff,#a7dded);box-shadow:inset 0 -22px 0 rgba(17,51,74,.12),0 5px 0 #030914}
.rescue-cast img{position:absolute;bottom:-8px;aspect-ratio:1/1;object-fit:cover;object-position:center 42%;image-rendering:pixelated;border:3px solid #fff;background:#ccefff;box-shadow:0 0 0 3px #061326;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.28))}
.rescue-spouse{left:8%;}.rescue-partner{right:8%}
/* Packer 5'5" beside spouse 5'3": spouse slightly smaller. */
.rescue-pair-0 .rescue-spouse{width:42%}.rescue-pair-0 .rescue-partner{width:45%}
/* Host 5'2" beside spouse 5'8": spouse is clearly the taller silhouette. */
.rescue-pair-1 .rescue-spouse{width:49%}.rescue-pair-1 .rescue-partner{width:41%}
.rescue-handoff{position:absolute;z-index:4;left:50%;top:48%;font-size:38px;transform:translate(-50%,-50%) rotate(-8deg);filter:drop-shadow(2px 3px 0 rgba(0,0,0,.3));animation:rescue-handoff .72s cubic-bezier(.2,1.5,.3,1) both}
.rescue-copy{padding:4px 6px 2px}.rescue-copy p{margin:5px 0 0}
@keyframes rescue-handoff{0%{transform:translate(-50%,-50%) scale(.35) rotate(-18deg);opacity:0}60%{transform:translate(-50%,-50%) scale(1.2) rotate(5deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(-8deg);opacity:1}}
html.reduced-motion .rescue-handoff{animation:none}


/* v41 playtest correction: viewport-safe cinematics + crisp classic pixel-cutscene motion. */
dialog.cinematic.comic-cinematic{
  width:calc(100vw - 24px)!important;
  max-width:500px!important;
  max-height:calc(100dvh - 20px)!important;
  margin:auto!important;
  padding:0!important;
  overflow:hidden!important;
  display:flex;
  flex-direction:column;
}
dialog.cinematic.comic-cinematic .scene-top{flex:0 0 auto;min-height:50px}
dialog.cinematic.comic-cinematic .comic-page{flex:1 1 auto;min-height:0;padding:0 9px 8px;overflow:hidden}
dialog.cinematic.comic-cinematic .scene-art{width:100%;height:min(58dvh,500px);max-height:calc(100dvh - 145px);min-height:260px;aspect-ratio:auto;background:#071326;overflow:hidden}
dialog.cinematic.comic-cinematic .scene-buttons{flex:0 0 auto;padding:8px 12px 12px;background:#071326}
.story-bg{position:absolute;z-index:0;inset:-4%;width:108%;height:108%;object-fit:cover;image-rendering:pixelated;transform-origin:center;will-change:transform;filter:contrast(1.08) saturate(1.04)}
.shot-push .story-bg{animation:story-push 5.4s steps(54,end) both}
.shot-pan-left .story-bg{animation:story-pan-left 5.4s steps(54,end) both}
.shot-pan-right .story-bg{animation:story-pan-right 5.4s steps(54,end) both}
.shot-low-push .story-bg{animation:story-low-push 5.4s steps(54,end) both}
.shot-drift .story-bg{animation:story-drift 5.4s steps(54,end) both}
.shot-impact .story-bg{animation:story-impact 2.2s steps(24,end) both}
.shot-panic .story-bg{animation:story-panic .62s steps(6,end) both}
.shot-release .story-bg{animation:story-release 1.2s steps(12,end) both}
@keyframes story-push{from{transform:scale(1.02) translate3d(-1%,1%,0)}to{transform:scale(1.15) translate3d(1%,-2%,0)}}
@keyframes story-pan-left{from{transform:scale(1.12) translate3d(5%,0,0)}to{transform:scale(1.12) translate3d(-5%,-1%,0)}}
@keyframes story-pan-right{from{transform:scale(1.12) translate3d(-5%,-1%,0)}to{transform:scale(1.12) translate3d(5%,0,0)}}
@keyframes story-low-push{from{transform:scale(1.04) translate3d(0,4%,0)}to{transform:scale(1.17) translate3d(0,-3%,0)}}
@keyframes story-drift{0%{transform:scale(1.1) translate3d(-3%,2%,0)}50%{transform:scale(1.13) translate3d(1%,-1%,0)}100%{transform:scale(1.16) translate3d(3%,-2%,0)}}
@keyframes story-impact{0%{transform:scale(1.02)}42%{transform:scale(1.18) translate3d(-2%,0,0)}55%{transform:scale(1.12) translate3d(2%,0,0)}100%{transform:scale(1.08)}}
@keyframes story-panic{0%,100%{transform:scale(1.12) translate(0,0)}25%{transform:scale(1.14) translate(-5px,2px)}50%{transform:scale(1.14) translate(5px,-2px)}75%{transform:scale(1.14) translate(-3px,-1px)}}
@keyframes story-release{from{transform:scale(1.17);filter:brightness(.72) contrast(1.12)}to{transform:scale(1.06);filter:brightness(1.08) contrast(1.06)}}
.comic-panel{animation:none!important}
.comic-panel::after{z-index:2}
.comic-caption,.comic-bubble,.comic-thought{z-index:6}
.comic-speaker,.story-cast-ensemble,.fist-bump-stage{z-index:4}
@media(max-height:680px){dialog.cinematic.comic-cinematic .scene-top{min-height:38px;padding:4px 10px;font-size:14px}dialog.cinematic.comic-cinematic .scene-top img{width:112px;height:32px}dialog.cinematic.comic-cinematic .scene-art{height:calc(100dvh - 118px);min-height:210px}dialog.cinematic.comic-cinematic .scene-buttons{padding:5px 9px 8px}dialog.cinematic.comic-cinematic .scene-buttons button{min-height:38px;padding:5px 9px}}
html.reduced-motion .story-bg{animation:none!important;transform:scale(1.04)}

/* v41 board art pass: normal play now carries the same premium arcade treatment as clears. */
.mylar-shell{box-shadow:0 5px #06182b,0 0 0 2px rgba(171,224,255,.2),0 0 22px rgba(76,196,255,.10)}
#board{outline:2px solid #86a8c4;box-shadow:inset 0 0 22px rgba(0,0,0,.45),0 0 0 2px #071526,0 0 20px rgba(80,194,255,.16);background:radial-gradient(circle at 50% 42%,#20365d 0,#101e35 62%,#091529 100%)}
#board-callout{filter:drop-shadow(0 0 8px rgba(255,226,122,.5))}
.tray-piece{background:linear-gradient(#204965,#122c43);box-shadow:inset 0 0 12px rgba(93,211,255,.08)}


/* v43 CAW cinematic-depth pass: layered pixel motion and show-specific atmosphere. */
.comic-page{animation:story-page-slam .34s steps(6,end) both}
@keyframes story-page-slam{0%{opacity:0;transform:translateX(10px) scale(.985)}45%{opacity:1;transform:translateX(-2px) scale(1.006)}100%{opacity:1;transform:none}}
.story-atmosphere{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none;opacity:.78;mix-blend-mode:screen}
.story-atmosphere::before,.story-atmosphere::after{content:"";position:absolute;inset:-12%;pointer-events:none}
.story-atmosphere i{position:absolute;display:block;pointer-events:none}

/* Foreground moves on a shallower plane than the background to create old-school parallax. */
.story-cast-ensemble{animation:story-cast-enter .46s steps(6,end) both,story-cast-drift 4.8s .46s steps(32,end) infinite alternate}
.comic-speaker{animation:story-speaker-enter .38s steps(5,end) both,comic-actor 2.1s .38s steps(12,end) infinite alternate}
.shot-pan-left .story-cast-ensemble,.shot-pan-left .comic-speaker{--story-drift-x:8px}
.shot-pan-right .story-cast-ensemble,.shot-pan-right .comic-speaker{--story-drift-x:-8px}
.shot-low-push .story-cast-ensemble,.shot-low-push .comic-speaker{--story-drift-y:-6px}
.shot-push .story-cast-ensemble,.shot-push .comic-speaker{--story-drift-y:-4px}
@keyframes story-cast-enter{0%{opacity:0;translate:0 16px}100%{opacity:1;translate:0 0}}
@keyframes story-cast-drift{from{translate:0 0}to{translate:var(--story-drift-x,3px) var(--story-drift-y,-3px)}}
@keyframes story-speaker-enter{0%{opacity:0;translate:0 18px}65%{opacity:1;translate:0 -2px}100%{opacity:1;translate:0 0}}

/* Wind: Shows 6/15. */
.fx-wind::before{background:repeating-linear-gradient(168deg,transparent 0 18px,rgba(210,247,255,.16) 19px 21px,transparent 22px 38px);animation:story-wind .9s steps(9,end) infinite}
.fx-wind i{width:28%;height:2px;background:linear-gradient(90deg,transparent,#d9f7ff,transparent);opacity:.48;animation:story-wind-streak 1.15s steps(12,end) infinite}
.fx-wind i:nth-child(1){top:18%;left:-18%;animation-delay:-.2s}.fx-wind i:nth-child(2){top:34%;left:-28%;animation-delay:-.7s}.fx-wind i:nth-child(3){top:52%;left:-14%;animation-delay:-.45s}.fx-wind i:nth-child(4){top:68%;left:-34%;animation-delay:-.9s}.fx-wind i:nth-child(5){top:80%;left:-22%;animation-delay:-.1s}.fx-wind i:nth-child(6){top:10%;left:-40%;animation-delay:-.6s}
@keyframes story-wind{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(5%,-1%,0)}}
@keyframes story-wind-streak{from{transform:translateX(0)}to{transform:translateX(470%)}}

/* Rain: Show 16. */
.fx-rain::before{background:repeating-linear-gradient(105deg,transparent 0 13px,rgba(185,229,255,.28) 14px 16px,transparent 17px 28px);animation:story-rain .48s steps(6,end) infinite}
.fx-rain::after{inset:auto -5% 0;height:24%;background:linear-gradient(transparent,rgba(40,101,139,.24));animation:story-storm-pulse 1.8s steps(8,end) infinite alternate}
@keyframes story-rain{from{transform:translate3d(-2%,-11%,0)}to{transform:translate3d(5%,11%,0)}}
@keyframes story-storm-pulse{from{opacity:.4}to{opacity:.82}}

/* Heat: Shows 5/10. */
.fx-heat::before{inset:42% -8% -10%;background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(255,224,145,.10) 9px 11px,transparent 12px 18px);animation:story-heat 1.5s steps(12,end) infinite alternate}
.fx-heat::after{background:radial-gradient(circle at 80% 12%,rgba(255,230,141,.18),transparent 31%)}
@keyframes story-heat{from{transform:translateX(-1%) skewX(-.4deg);opacity:.35}to{transform:translateX(1%) skewX(.4deg);opacity:.72}}

/* Bugs: vendor-life shows 7/8. */
.fx-bugs i{width:4px;height:4px;border-radius:50%;background:#fff6a8;box-shadow:0 0 6px rgba(255,240,130,.8);animation:story-bug 2.6s steps(18,end) infinite alternate}
.fx-bugs i:nth-child(1){left:12%;top:28%}.fx-bugs i:nth-child(2){left:78%;top:20%;animation-delay:-.8s}.fx-bugs i:nth-child(3){left:65%;top:61%;animation-delay:-1.4s}.fx-bugs i:nth-child(4){left:34%;top:72%;animation-delay:-2s}.fx-bugs i:nth-child(5){left:88%;top:47%;animation-delay:-.3s}.fx-bugs i:nth-child(6){left:48%;top:17%;animation-delay:-1.1s}
@keyframes story-bug{0%{translate:-7px 5px;opacity:.2}35%{translate:8px -9px;opacity:.9}70%{translate:-3px 11px;opacity:.5}100%{translate:12px -4px;opacity:1}}

/* Midnight: Show 18. */
.fx-midnight::before{background:radial-gradient(circle at 17% 18%,rgba(184,218,255,.18) 0 1px,transparent 2px),radial-gradient(circle at 71% 26%,rgba(255,241,165,.18) 0 1px,transparent 2px),radial-gradient(circle at 82% 58%,rgba(192,221,255,.15) 0 1px,transparent 2px);background-size:53px 47px,71px 59px,83px 73px;animation:story-stars 2.8s steps(8,end) infinite alternate}
.fx-midnight::after{background:linear-gradient(180deg,rgba(5,10,39,.16),rgba(7,9,25,.42));mix-blend-mode:multiply}
@keyframes story-stars{from{opacity:.28;translate:0 0}to{opacity:.75;translate:0 -2px}}

/* Finale/festival shows 17/19/20. */
.fx-finale i{width:5px;height:11px;background:#ffe27a;animation:story-confetti 2.1s steps(16,end) infinite}
.fx-finale i:nth-child(1){left:8%;top:-12%;animation-delay:-.3s}.fx-finale i:nth-child(2){left:24%;top:-18%;background:#ff8bad;animation-delay:-1.2s}.fx-finale i:nth-child(3){left:43%;top:-9%;background:#9cf2ff;animation-delay:-.7s}.fx-finale i:nth-child(4){left:61%;top:-16%;background:#d8b7ff;animation-delay:-1.6s}.fx-finale i:nth-child(5){left:78%;top:-12%;background:#fff;animation-delay:-.1s}.fx-finale i:nth-child(6){left:91%;top:-20%;background:#8df0bd;animation-delay:-.95s}
.fx-finale::after{background:radial-gradient(circle at 50% 36%,rgba(255,226,122,.15),transparent 45%);animation:story-finale-glow 1.35s steps(9,end) infinite alternate}
@keyframes story-confetti{from{translate:0 -10%;rotate:0deg}to{translate:18px 620%;rotate:270deg}}
@keyframes story-finale-glow{from{opacity:.25}to{opacity:.8}}

/* Product discovery / experiments. */
.fx-spark i{width:4px;height:4px;background:#fff4a8;transform:rotate(45deg);box-shadow:0 0 8px rgba(255,231,130,.7);animation:story-spark 1.8s steps(10,end) infinite}
.fx-spark i:nth-child(1){left:13%;top:24%}.fx-spark i:nth-child(2){left:82%;top:18%;animation-delay:-.7s}.fx-spark i:nth-child(3){left:68%;top:66%;animation-delay:-1.1s}.fx-spark i:nth-child(4){left:31%;top:74%;animation-delay:-.4s}.fx-spark i:nth-child(5){left:52%;top:28%;animation-delay:-1.5s}.fx-spark i:nth-child(6){left:90%;top:54%;animation-delay:-.9s}
@keyframes story-spark{0%,100%{scale:.45;opacity:.18}50%{scale:1.35;opacity:.95}}

/* Fake disaster beat gets a brief danger vignette without changing story content. */
.fx-panic::before{background:radial-gradient(circle at 50% 44%,transparent 30%,rgba(128,0,23,.34) 100%);animation:story-panic-vignette .5s steps(4,end) both}
@keyframes story-panic-vignette{0%{opacity:0}40%{opacity:1}100%{opacity:.55}}

html.reduced-motion .comic-page,
html.reduced-motion .story-cast-ensemble,
html.reduced-motion .comic-speaker,
html.reduced-motion .story-atmosphere,
html.reduced-motion .story-atmosphere::before,
html.reduced-motion .story-atmosphere::after,
html.reduced-motion .story-atmosphere i{animation:none!important;translate:none!important;transform:none!important}
html.reduced-motion .story-atmosphere{opacity:.18}

/* v59 directed comic framing: dialogue beats use intentional crops instead of repeating one flat shot. */
.comic-panel{--story-focus-x:50%;--story-focus-y:50%;isolation:isolate}
.comic-panel .story-bg{object-position:var(--story-focus-x) var(--story-focus-y)}
.frame-establish .story-bg{inset:-3%;width:106%;height:106%}
.frame-close-left .story-bg{inset:-9%;width:118%;height:118%;object-position:calc(var(--story-focus-x) - 8%) var(--story-focus-y)}
.frame-close-right .story-bg{inset:-9%;width:118%;height:118%;object-position:calc(var(--story-focus-x) + 8%) var(--story-focus-y)}
.frame-detail .story-bg{inset:-13%;width:126%;height:126%;object-position:var(--story-focus-x) calc(var(--story-focus-y) + 5%)}
.story-ink-frame{position:absolute;z-index:3;inset:7px;pointer-events:none;border:3px solid rgba(4,12,27,.88);box-shadow:inset 0 0 0 2px rgba(255,255,255,.13),inset 0 -38px 50px rgba(2,7,19,.18)}
.story-ink-frame::before,.story-ink-frame::after,.story-ink-frame i{content:"";position:absolute;display:block;background:#071326;opacity:.88}
.story-ink-frame::before{width:28px;height:4px;left:-4px;top:18%}.story-ink-frame::after{width:4px;height:34px;right:15%;bottom:-4px}
.story-ink-frame i:first-child{width:45px;height:3px;right:-3px;top:35%;transform:rotate(-2deg)}
.story-ink-frame i:last-child{width:3px;height:28px;left:22%;top:-3px;transform:rotate(2deg)}
.story-panel-index{position:absolute;z-index:5;left:12px;top:11px;min-width:28px;padding:3px 5px;border:2px solid #071326;background:#fff3ba;color:#071326;box-shadow:3px 3px 0 rgba(0,0,0,.5);font:11px/1 Arcade,monospace;letter-spacing:1px;text-align:center}
.frame-close-left .story-panel-index,.frame-detail .story-panel-index{left:auto;right:12px}
@media (max-height:680px){.story-ink-frame{inset:5px;border-width:2px}.story-panel-index{top:8px;left:9px}.frame-close-left .story-panel-index,.frame-detail .story-panel-index{right:9px}}
html.reduced-motion .frame-establish .story-bg,html.reduced-motion .frame-close-left .story-bg,html.reduced-motion .frame-close-right .story-bg,html.reduced-motion .frame-detail .story-bg{animation:none!important}


/* v44 viewport contract: the playable composition must fit the actually visible viewport. */
@media (max-height: 620px) {
  #app { gap: 2px; padding-top: max(2px, env(safe-area-inset-top)); padding-bottom: max(2px, env(safe-area-inset-bottom)); }
  header { height: 32px; }
  .brand img { height: 30px; width: 112px; }
  .brand small { font-size: 18px; width: 36px; }
  .square { width: 34px; min-height: 32px; height: 32px; font-size: 18px; }
  .hud { min-height: 34px; padding: 2px 6px; }
  .hud small { font-size: 9px; }
  .hud b { font-size: 14px; }
  .hud .money b { font-size: 21px; }
  #hearts { font-size: 16px; }
  .arena-head { padding: 1px 5px; font-size: 10px; line-height: 1; }
  .arena-head .super-ready { padding: 1px 4px 3px; min-height: 19px; }
  .arena-head .super-ready small { display: none; }
  .super-ready b { font-size: 7px; }
  #arena { width: min(100%, 50dvh); height: auto; margin-inline: auto; }
  .mood-key { display: none; }
  .crowd-bar { min-height: 17px; padding: 1px 5px; font-size: 9px; }
  #workers { gap: 3px; }
  .worker { min-height: 34px; padding: 2px 4px; }
  .worker canvas { display: none; }
  .worker strong { font-size: 11px; }
  .worker small,.worker b { font-size: 9px; }
  .show-actions { gap: 3px; margin: 1px 0; }
  .meal { min-height: 27px; font-size: 8px; padding: 2px 4px; }
  .puzzle { gap: 2px; }
  .puzzle-head { min-height: 14px; font-size: 10px; }
  .puzzle-head span { font-size: 9px; }
  #board-wrap { min-height: 0; }
  .mylar-zip { height: 11px; border-bottom-width: 2px; }
  .mylar-zip span { font-size: 7px; }
  .mylar-footer { height: 13px; font-size: 7px; }
  .mylar-footer img { height: 13px; width: 52px; }
  .mylar-shell { padding-inline: 6px; width: min(100%, calc(100cqh - 20px)); }
  #tray { height: 45px; gap: 4px; }
  .bottom { min-height: 29px; }
  .bottom button { min-height: 29px; padding: 2px 5px; font-size: 10px; }
  .bottom > span { font-size: 10px; }
}

@media (max-height: 520px) {
  header { height: 28px; }
  .brand img { height: 26px; width: 102px; }
  .brand small { display:none; }
  .hud { min-height: 30px; }
  .arena-head #wave { display:none; }
  #arena { width: min(100%, 44dvh); }
  .crowd-bar { min-height: 15px; }
  .worker { min-height: 30px; }
  .worker small { display:none; }
  .meal { min-height: 24px; }
  #tray { height: 40px; }
  .bottom { min-height: 26px; }
  .bottom button { min-height: 26px; }
}


/* v46 board identity: candy units read as glossy freeze-dried chunks, not flat generic blocks. */
#board{filter:saturate(1.06) contrast(1.035)}
.tray-piece canvas{filter:saturate(1.05) contrast(1.025)}
html.reduced-motion #board,html.reduced-motion .tray-piece canvas{filter:saturate(1.04) contrast(1.025)}


/* v47 story-panel normalization: crisp authored pixel stepping while canonical cast stays foreground. */
.story-bg{filter:contrast(1.12) saturate(.98) brightness(.84)}
.comic-panel::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,13,28,.02),rgba(6,13,28,.16));mix-blend-mode:multiply}
.mood-heart .story-bg,.mood-finale .story-bg{filter:contrast(1.10) saturate(1.04) brightness(.90)}
.mood-danger .story-bg,.mood-midnight .story-bg{filter:contrast(1.15) saturate(.88) brightness(.75)}


/* v49 reveal cohesion: every Show reveal now uses its own crisp pixel-normalized panel. */
.boss-portrait{background-repeat:no-repeat;box-shadow:inset 0 0 45px rgba(2,7,18,.44);filter:saturate(.96) contrast(1.12) brightness(.80)}
.boss-stage::before{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,12,27,.08),rgba(5,12,27,.36));}
.boss-cast{z-index:3}.boss-stamp{z-index:5}


/* v50 multi-clear hierarchy: stronger board-edge glow without making ordinary clears equally loud. */
.juice-combo #board-wrap{filter:drop-shadow(0 0 10px rgba(137,229,255,.24))}
.juice-milestone #board-wrap{filter:drop-shadow(0 0 15px rgba(255,227,149,.34)) drop-shadow(0 0 24px rgba(246,156,189,.18))}
html.reduced-motion .juice-combo #board-wrap,html.reduced-motion .juice-milestone #board-wrap{filter:none}


/* v51 mobile orientation guard: avoid presenting a crushed phone-landscape layout. */
#rotate-hint{display:none}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
  #rotate-hint{position:fixed;z-index:9999;inset:0;display:grid;place-items:center;align-content:center;gap:12px;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:#071326;color:#eef6ff;text-align:center}
  #rotate-hint img{width:min(240px,48vw);height:auto;image-rendering:pixelated}
  #rotate-hint b{font:clamp(20px,5vw,34px) Arcade,monospace;color:#ffe395}
  #rotate-hint span{max-width:420px;color:#bdefff}
  #app,dialog[open],#drag-layer{visibility:hidden!important}
}


/* v43 directed panels: art owns the frame; dialogue has a stable reading area.
   The cast reference files remain unchanged. */
dialog.cinematic.comic-cinematic{width:min(680px,calc(100vw - 20px));max-height:calc(var(--app-height,100dvh) - 20px);padding:0;overflow:auto;border:3px solid #88cad7;box-shadow:0 8px 0 #050d1c}
.directed-scene{padding:8px 10px 0}
dialog.cinematic.comic-cinematic .directed-scene .scene-art{height:clamp(310px,66svh,540px);min-height:0;isolation:isolate;overflow:hidden;border:3px solid #071326;background:#102237;box-shadow:0 3px 0 #071326}
.directed-scene .story-bg{inset:0;top:0;left:0;width:100%;height:74%;object-fit:cover;object-position:center 40%;image-rendering:pixelated;transform-origin:50% 40%;filter:none}
.directed-scene .story-cast-ensemble{display:none}
.directed-scene .comic-caption,.directed-scene .comic-bubble,.directed-scene .comic-thought{inset:auto 0 0;min-height:28%;max-height:48%;max-width:none;width:auto;margin:0;padding:14px 18px;background:#e9f4e9;color:#0b2032;border:0;border-top:4px solid #071326;border-radius:0;box-shadow:none;transform:none;overflow:auto;text-align:left;animation:dialogue-arrive .18s ease-out both}
.directed-scene .comic-bubble,.directed-scene .comic-thought{padding-left:112px}
.directed-scene .comic-caption b,.directed-scene .comic-bubble b,.directed-scene .comic-thought b{font:16px/1 Booth,sans-serif;letter-spacing:.05em;color:#773451}
.directed-scene #dialogue{font:22px/1.15 Arcade,monospace;min-height:2.3em;margin:8px 0 0}
.directed-scene .comic-bubble::after,.directed-scene .comic-thought::before,.directed-scene .comic-thought::after{display:none}
.directed-scene .comic-thought{background:#dbe9f4;border-top-style:dashed}
.directed-scene .comic-speaker{left:10px;right:auto;bottom:16px;width:88px;height:94px;object-fit:cover;object-position:50% 22%;aspect-ratio:auto;border:2px solid #1b3e55;box-shadow:3px 3px #a1b7bb;filter:none;animation:portrait-arrive .22s steps(5,end) both;z-index:7}
.directed-scene .scene-atmosphere{position:absolute;inset:0 0 28%;z-index:2;pointer-events:none;border-top:3px solid #ffffff20;box-shadow:inset 0 -24px 28px -25px #06172e;animation:scene-light 6s ease-in-out infinite alternate}
.directed-scene.mood-danger .scene-atmosphere{background:repeating-linear-gradient(112deg,transparent 0 35px,#b7edff16 36px 37px,transparent 38px 58px);background-size:140% 140%;animation:scene-weather 1.1s linear infinite}
.directed-scene.mood-midnight .scene-atmosphere{background:#17194425;animation:scene-light 4s steps(4,end) infinite alternate}
.directed-scene .fist-bump-stage{bottom:30%;height:30%;max-height:130px;opacity:1}
.directed-scene.fist-page .comic-bubble{padding:14px 18px;left:0;bottom:0;width:auto;transform:none}
.scene-progress{height:5px;display:flex;gap:3px;background:#071326;margin:0 12px 10px}
.scene-progress i{flex:1;background:#315269}
.scene-progress i.read{background:#aff5dc}
.scene-buttons button{min-height:44px}
@keyframes dialogue-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes portrait-arrive{from{opacity:0;translate:-12px 0}to{opacity:1;translate:0 0}}
@keyframes scene-light{from{opacity:.45}to{opacity:.85}}
@keyframes scene-weather{from{background-position:0 0}to{background-position:-60px 140px}}
@media(max-width:420px){.directed-scene{padding:5px 5px 0}.directed-scene #dialogue{font-size:20px}.directed-scene .comic-bubble,.directed-scene .comic-thought{padding-left:90px}.directed-scene .comic-speaker{width:67px;height:80px;left:8px;bottom:18px}.directed-scene .comic-caption,.directed-scene .comic-bubble,.directed-scene .comic-thought{min-height:31%}.directed-scene .story-bg{height:72%}}
@media(max-height:650px){dialog.cinematic.comic-cinematic .directed-scene .scene-art{height:calc(100svh - 145px);min-height:180px}.directed-scene .story-bg{height:100%}.directed-scene .comic-caption,.directed-scene .comic-bubble,.directed-scene .comic-thought{min-height:0;max-height:55%;padding-top:8px;padding-bottom:8px}.directed-scene #dialogue{font-size:18px}.directed-scene .comic-speaker{height:64px;width:62px;bottom:9px}.directed-scene .comic-bubble,.directed-scene .comic-thought{padding-left:86px}}
/* Named supers: brief anticipation, readable held impact, rapid exit. */
.super-cut-in{border-radius:0;box-shadow:0 5px #061020;border-width:3px;will-change:transform,opacity}
.super-cut-in.active{animation:super-directed 1.02s cubic-bezier(.17,.8,.27,1) both}
.super-cut-in.active .super-portrait{animation:super-portrait-strike 1.02s steps(7,end) both}
.super-cut-in.active b{animation:super-name-strike 1.02s ease-out both}
.super-cut-in::before{opacity:.2}
.super-cut-in small{font-size:12px}
.super-cut-in em{font-size:11px}
@keyframes super-directed{0%{transform:translateX(-110%) skewX(-7deg);opacity:0}12%{transform:translateX(3%) skewX(-7deg);opacity:1}20%,79%{transform:translateX(0) skewX(-7deg);opacity:1}100%{transform:translateX(112%) skewX(-7deg);opacity:0}}
@keyframes super-portrait-strike{0%{transform:translateX(-25px) scale(.94)}18%{transform:translateX(2px) scale(1.12)}30%,80%{transform:translateX(0) scale(1.04)}100%{transform:translateX(18px) scale(1.04)}}
@keyframes super-name-strike{0%,10%{opacity:0;transform:translateX(16px) scale(.88)}22%{opacity:1;transform:translateX(0) scale(1.06)}35%,100%{opacity:1;transform:translateX(0) scale(1)}}
html.reduced-motion .scene-atmosphere,html.reduced-motion .super-cut-in *,html.reduced-motion .directed-scene *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.scene-atmosphere,.super-cut-in *,.directed-scene *{animation:none!important;transition:none!important}}

/* Closed native dialogs must not be resurrected by cinematic display rules. */
dialog:not([open]){display:none!important}


.directed-scene .story-bg{object-fit:contain;object-position:center;background:#071326}

/* v62 timed show and independent spouse rescue meters. */
.meal{background:linear-gradient(90deg,#8a4937 var(--hunger,0%),#132942 var(--hunger,0%));min-height:44px;font-size:11px}
.meal.boost{background:#225549}.meal:disabled{opacity:.85}
.closing-soon{color:#ffcb69!important;font-variant-numeric:tabular-nums}
.directed-scene .story-bg{height:72%;inset:0;width:100%;object-fit:contain}

/* v65 hunger performance + spouse rescue presentation */
.rescue-cast{position:relative;overflow:visible}
.rescue-kiss,.rescue-heart{position:absolute;z-index:5;left:50%;top:36%;transform:translate(-50%,-50%);pointer-events:none}
.rescue-kiss{font-size:30px;animation:rescueKiss 1.35s steps(5,end) both}
.rescue-heart{font-size:24px;opacity:0;animation:rescueHeart 1.1s 1.05s ease-out both}
@keyframes rescueKiss{0%,30%{opacity:0;transform:translate(-50%,-30%) scale(.4)}45%,72%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-80%) scale(.8)}}
@keyframes rescueHeart{0%{opacity:0;transform:translate(-50%,0) scale(.5)}25%{opacity:1;transform:translate(-50%,-30%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-110%) scale(.85)}}
html.reduced-motion .rescue-kiss,html.reduced-motion .rescue-heart{animation:none;opacity:1}


/* v67 closing-rush presentation: pressure-aware suspense without scripted losses. */
#app[data-closing="1"] #goal{letter-spacing:.035em}
#app[data-closing="2"] #goal{font-weight:900;text-shadow:0 0 8px rgba(255,203,105,.28)}
#app[data-closing="3"] #goal{font-weight:900;transform:scale(1.08)}
#app.closing-pressure[data-closing="2"] .arena-wrap{box-shadow:0 0 0 2px rgba(255,203,74,.25),0 0 18px rgba(255,203,74,.12)}
#app.closing-pressure[data-closing="3"] .arena-wrap{animation:v67-last-push .46s ease-in-out infinite alternate;box-shadow:0 0 0 3px rgba(255,125,143,.28),0 0 28px rgba(255,125,143,.18)}
.closing-rush{color:#ffb84d!important}.closing-critical{color:#ff7d8f!important}
@keyframes v67-last-push{from{filter:brightness(1)}to{filter:brightness(1.07)}}
html.reduced-motion #app.closing-pressure[data-closing="3"] .arena-wrap{animation:none}
@media(max-width:520px){#app[data-closing="3"] #goal{transform:scale(1.04)}}


/* v68 staged spouse rescue + stronger personal condition readability. */
.rescue-sequence .rescue-spouse{animation:v68-spouse-arrive .55s cubic-bezier(.2,.9,.25,1) both}
.rescue-sequence .rescue-partner{animation:v68-partner-wilt .55s ease-out both}
.rescue-food-bag{position:absolute;z-index:6;left:27%;top:49%;font-size:38px;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.3));animation:v68-food-arrive 1.5s cubic-bezier(.2,.9,.25,1) both}
.rescue-sequence .rescue-handoff{animation:v68-handoff 1.6s .45s cubic-bezier(.2,1.4,.3,1) both}
.rescue-sequence .rescue-kiss{animation:v68-kiss 2.25s .9s steps(5,end) both}
.rescue-sequence .rescue-heart{animation:v68-heart 1.35s 1.5s ease-out both}
.rescue-charge{position:absolute;z-index:7;right:20%;top:29%;font-size:34px;opacity:0;filter:drop-shadow(0 0 7px #fff2a0);animation:v68-charge 1.05s 2.05s ease-out both}
@keyframes v68-spouse-arrive{from{transform:translateX(-115%);opacity:.3}to{transform:translateX(0);opacity:1}}
@keyframes v68-partner-wilt{0%{filter:grayscale(.35) brightness(.78);transform:translateY(6px)}100%{filter:grayscale(.12) brightness(.9);transform:translateY(3px)}}
@keyframes v68-food-arrive{0%{transform:translateX(-120px) rotate(-18deg) scale(.55);opacity:0}35%,68%{transform:translateX(34px) rotate(5deg) scale(1.12);opacity:1}100%{transform:translateX(62px) rotate(-4deg) scale(.85);opacity:.15}}
@keyframes v68-handoff{0%,25%{opacity:0;transform:translate(-80%,-50%) scale(.4) rotate(-18deg)}48%,76%{opacity:1;transform:translate(-25%,-50%) scale(1.15) rotate(5deg)}100%{opacity:0;transform:translate(25%,-45%) scale(.8)}}
@keyframes v68-kiss{0%,35%{opacity:0;transform:translate(-50%,-30%) scale(.4)}48%,72%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-85%) scale(.75)}}
@keyframes v68-heart{0%{opacity:0;transform:translate(-50%,0) scale(.5)}25%{opacity:1;transform:translate(-50%,-30%) scale(1.3)}100%{opacity:0;transform:translate(-50%,-125%) scale(.8)}}
@keyframes v68-charge{0%{opacity:0;transform:scale(.3) rotate(-20deg)}35%{opacity:1;transform:scale(1.45) rotate(8deg)}70%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(1.3)}}
.meal.hungry{box-shadow:inset 0 0 0 2px rgba(255,203,105,.55)}
.meal.starving{box-shadow:inset 0 0 0 2px rgba(255,125,143,.8);animation:v68-hunger-alert .7s ease-in-out infinite alternate}
.meal.boost{box-shadow:inset 0 0 0 2px rgba(154,255,237,.65),0 0 12px rgba(154,255,237,.16)}
@keyframes v68-hunger-alert{from{filter:brightness(1)}to{filter:brightness(1.15)}}
html.reduced-motion .rescue-sequence *{animation:none!important}
html.reduced-motion .meal.starving{animation:none}

/* v74 arcade presentation. Canvas hit targets and puzzle rules remain unchanged. */
:root{--gold:#ffd96b;--mint:#baff82;--pink:#ff72b8;--edge:#546697;--paper:#fff9ed}
body{background:radial-gradient(ellipse at 20% 0,#353174 0,transparent 52%),radial-gradient(ellipse at 90% 90%,#123c53 0,transparent 50%),#0d1228}
#app{max-width:510px;background:linear-gradient(165deg,#23274e,#131d36 58%,#182846);border-color:#56618b;padding:8px 10px;gap:7px}
header{height:50px}
.brand{gap:8px;justify-content:center}
.brand img{width:115px;height:40px;object-fit:contain}
.brand small{font:900 23px/.85 Booth,sans-serif;width:auto;letter-spacing:-1px;transform:rotate(-4deg);color:#fff1a2;text-shadow:0 2px #ba692b,0 4px #492448}
.brand small strong{display:block;color:#ff81c4}
button{border-radius:10px;border-color:#6779a9;background:linear-gradient(#354b7b,#243459);box-shadow:inset 0 2px #ffffff25,0 3px #080e22}
.square{border-radius:13px;background:linear-gradient(#495183,#303359);border-color:#6b72a0}
.hud{min-height:51px;border:1px solid #717fb3;border-radius:14px;background:linear-gradient(120deg,#35406b,#222c51);box-shadow:inset 0 1px #ffffff30,0 4px 12px #040b2133;padding:7px 10px}
.hud small{font-size:10px;letter-spacing:1px;color:#c2ccec}
.hud b{font-size:17px}.hud .money b{font:900 24px/1 Booth,sans-serif;color:#ffdf76}#hearts{font-size:17px}
.crew-zone{display:flex;flex-direction:column;gap:6px;min-height:0;flex:none}
.arena-wrap{border:1px solid #7586b0;border-radius:14px;background:#203c57;box-shadow:0 5px 16px #080e2833}
.arena-head{background:linear-gradient(90deg,#29355a,#26304b);padding:4px 7px;font-size:10px;min-height:26px}
#arena{height:clamp(110px,15vh,144px);width:100%;object-fit:fill}
.mood-key{display:none}
.crowd-bar{min-height:23px;font-size:10px;background:#1d2b47;padding:3px 7px}
.show-actions{gap:5px}.meal{min-height:33px;font-size:9px;line-height:1.15;padding:4px 5px;border-radius:9px;border-width:1px}
#workers{gap:5px;min-height:48px}
.worker{border-radius:10px;min-height:48px;padding:3px 5px;box-shadow:inset 0 1px #ffffff24,0 3px #080e22}
.worker canvas{width:29px;height:37px}.worker b{font-size:12px}.worker small{font-size:10px}
.puzzle{gap:6px;min-height:0}
.puzzle-head{min-height:22px;padding:2px 4px;font-size:11px;color:#e8ecff}.puzzle-head b{color:#ffdc75;letter-spacing:.8px}.puzzle-head span{font-size:9px}
#board-wrap{min-height:0;flex:1;position:relative}
.mylar-shell{width:min(100%,calc(100cqh - 30px));padding:0 7px;background:linear-gradient(135deg,#ffe694,#b9773b 38%,#ffdd7b 65%,#8f563b);border:1px solid #fff0bb;border-radius:15px;box-shadow:0 6px 0 #664128,0 9px 22px #04081780,inset 0 2px #fff8da}
.mylar-zip{height:14px;min-height:14px;background:none;border:0;box-shadow:none;color:#714827;font-size:7px;letter-spacing:2px}
.mylar-footer{height:16px;min-height:16px;padding:0;background:none;border:0;box-shadow:none;justify-content:center;color:#553923;font-size:8px;letter-spacing:2px}.mylar-footer img{display:none}
#board{border:2px solid #111a2c;border-radius:8px;background:#0a1124;box-shadow:0 1px 0 #fff2ad80;image-rendering:auto}
#tray{height:65px;min-height:65px;gap:8px}
.tray-piece{background:linear-gradient(#26395b,#182540);border:1px solid #566e9f;border-radius:13px;box-shadow:inset 0 2px #ffffff12,0 3px #080f24}
.tray-piece.selected{border-color:#ffdc6e;background:linear-gradient(#4d4364,#2b304e);box-shadow:0 0 0 2px #ffe48545,inset 0 2px #fff3c04a}
.bottom{font-size:10px;min-height:27px}.bottom button{min-height:27px;font-size:10px;padding:3px 10px}
#board-callout{font:900 clamp(27px,7vw,47px)/1 Booth,sans-serif;color:#fff1a1;-webkit-text-stroke:1px #76365c;text-shadow:0 3px #883b71,0 5px #151b39,0 0 24px #ff9ce7;letter-spacing:-1px}
.crew-profile img{object-fit:contain;object-position:center}
/* Large, dimensional type stays live text and sharp at every resolution. */
dialog.title-screen{width:min(94vw,580px);max-width:580px;border:2px solid #818cc1;border-radius:24px;background:linear-gradient(145deg,#242b56,#111a35);box-shadow:0 25px 90px #030818bd,inset 0 1px #e4eaff55;padding:0}
.title-stage{position:relative;isolation:isolate;overflow:hidden;padding:20px 22px 10px;background:radial-gradient(ellipse at 50% 62%,#7862aa8a,transparent 62%),linear-gradient(165deg,#353663,#192845);border-bottom:1px solid #6b739e}
.title-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-conic-gradient(from -12deg at 50% 65%,#9fa2ee10 0deg 12deg,transparent 12deg 26deg);mask-image:linear-gradient(transparent,#000)}
.official-title-logo{width:155px;height:46px;filter:drop-shadow(0 3px 0 #10182c)}
.title-eyebrow{font:800 9px Booth,sans-serif;letter-spacing:3px;color:#bfc9f2;margin:10px 0 15px}
.title-stage .game-title{position:relative;z-index:1;font:1000 clamp(64px,18vw,112px)/.81 Booth,"Arial Black",sans-serif!important;letter-spacing:-5px;transform:rotate(-5deg);color:#fff1a0!important;margin:8px 0 0!important;-webkit-text-stroke:1px #ffefbd;paint-order:stroke fill;text-shadow:0 3px #ffd25e,0 7px #c5833a,0 11px #6c3850,3px 14px #11152d,-3px 14px #11152d,0 18px 22px #060d3280}
.game-title span{display:block;color:#ff8fcf;text-shadow:0 3px #f960b1,0 7px #ac3d86,0 11px #62356e,3px 14px #11152d,-3px 14px #11152d,0 18px 22px #060d3280;-webkit-text-stroke:1px #ffc5e9}
.title-stage canvas{width:100%;max-width:450px;margin:12px auto 0;max-height:128px;object-fit:contain;filter:drop-shadow(0 5px 0 #0b183255)}
.title-tag{font:800 10px Booth,sans-serif!important;letter-spacing:2px;color:#ebdeff!important;margin:7px 0 4px!important}
.title-controls{padding:16px 24px 18px}
.title-controls .difficulty{margin:0 0 12px;gap:6px}
.difficulty button{border-radius:9px;font-size:13px;min-height:34px}.difficulty .selected{background:#675185;border-color:#e5baff;color:#fff}
.primary{background:linear-gradient(#d6ff87,#95db45);color:#233c21;border:2px solid #e6ffae;border-radius:13px;box-shadow:0 5px #3b742f,inset 0 2px #ffffff80;text-shadow:0 1px #ffffff55;font:900 20px Booth,sans-serif;letter-spacing:.2px;min-height:52px}
.title-controls .menu-pair{gap:8px;margin-top:16px}.title-controls .secondary{font-size:12px;min-height:37px}.title-controls .muted{font-size:10px!important;margin:12px 0 0!important}
/* Full body stage: all motion is rendered from walking frames, never cropped portraits. */
dialog.delivery-screen{width:min(94vw,800px);max-width:800px;padding:18px;background:linear-gradient(135deg,#293859,#17213a);border:2px solid #f3d28a;border-radius:20px;text-align:center}
.delivery-screen h2{font:900 clamp(23px,5vw,34px) Booth,sans-serif;margin:8px 0 14px;color:#ffecaf}
#delivery-stage{display:block;width:100%;height:auto;border:1px solid #8195b7;border-radius:13px;background:#17213a}
#delivery-status{min-height:44px;font-size:16px;color:#e7ffc5;margin:14px 0 8px}.delivery-note{display:block;font-size:10px;color:#b5c8e1;margin-top:12px}
@media(min-width:850px){
 #app{max-width:1180px;height:min(var(--cp-vh,100dvh),960px);padding:14px 22px 18px;display:grid;grid-template-columns:minmax(300px,.82fr) minmax(400px,1.18fr);grid-template-rows:54px 60px minmax(0,1fr);gap:13px 24px;border:0;background:linear-gradient(135deg,#262b5190,#14243c90)}
 header,.hud{grid-column:1/-1}header{height:54px}.brand{gap:20px}.brand img{width:150px;height:46px}.brand small{font-size:28px}
 .hud{padding:10px 22px}.hud small{font-size:11px}.hud b{font-size:23px}.hud .money b{font-size:29px}#hearts{font-size:23px}
 .crew-zone{grid-column:1;grid-row:3;justify-content:center;gap:14px;align-self:stretch}
 .arena-wrap{border-radius:19px}.arena-head{min-height:40px;font-size:11px}#arena{height:auto;aspect-ratio:2.1}.crowd-bar{font-size:11px;min-height:31px;padding:8px}.mood-key{display:flex;font-size:10px;padding:5px}
 .show-actions{gap:8px}.meal{font-size:11px;min-height:50px}#workers{gap:8px}.worker{min-height:72px}.worker canvas{width:35px;height:47px}.worker b{font-size:14px}.worker small{font-size:11px}
 .puzzle{grid-column:2;grid-row:3;min-height:0}.puzzle-head{font-size:13px;min-height:28px}.puzzle-head span{font-size:10px}
 #tray{height:84px;min-height:70px}.bottom{font-size:12px;min-height:34px}.bottom button{font-size:12px;min-height:32px}
}
@media(max-width:849px) and (max-height:740px){
 #app{gap:4px;padding-top:4px;padding-bottom:4px}header{height:38px}.square{min-height:34px;width:36px}.brand img{height:32px}.brand small{font-size:20px}.hud{min-height:43px;padding:4px 8px}.hud b{font-size:14px}.hud small{font-size:8px}.hud .money b{font-size:20px}#hearts{font-size:13px}
 .crew-zone{gap:4px}#arena{height:90px}.arena-head{min-height:20px;padding:2px 5px;font-size:8px}.crowd-bar{min-height:18px;font-size:8px;padding:2px 5px}.meal{min-height:28px;font-size:8px}#workers{min-height:40px}.worker{min-height:40px}.worker canvas{height:30px;width:23px}.worker b{font-size:10px}.worker small{font-size:9px}
 #tray{height:52px;min-height:52px}.puzzle{gap:4px}.puzzle-head{min-height:18px;font-size:9px}.puzzle-head span{font-size:8px}.bottom{min-height:24px;font-size:9px}.bottom button{min-height:24px;font-size:9px}
 .title-stage{padding-top:12px}.official-title-logo{height:35px}.title-eyebrow{margin:5px 0 10px}.title-stage .game-title{font-size:72px!important}.title-stage canvas{max-height:86px;margin-top:6px}.title-controls{padding:12px 18px}.title-controls .primary{min-height:45px;font-size:17px}
}
@media(prefers-reduced-motion:reduce){.title-stage *{animation:none!important}}
/* Keep the game board prominent on portrait screens; prevent legacy super-meter rows expanding the arena. */
.tray-piece canvas{object-fit:contain;image-rendering:auto}
#board{border:0;outline:2px solid #111a2c}
.title-stage .game-title{font-size:clamp(92px,24vw,132px)!important;transform:rotate(-5deg) scaleX(1.16)}
.brand small{font-size:28px}.bottom>span{font-size:inherit}
@media(min-width:850px){.brand small{font-size:34px}}
@media(max-width:849px){
 header{height:40px}.hud{min-height:46px;padding:5px 8px}
 .arena-head{display:grid;grid-template-columns:1fr auto auto;grid-template-rows:14px 14px;gap:2px 7px;padding:4px 7px}
 .arena-head #wave{grid-column:1;grid-row:1}.arena-head #rush{grid-column:2;grid-row:1;font-size:8px;padding:0 5px}
 .arena-head #stock{grid-column:3;grid-row:1;font-size:8px}
 .arena-head .super-ready{grid-column:1/-1;grid-row:2;display:block;min-height:14px;width:100%;padding:0 4px 2px;border:0;border-radius:3px}
 .arena-head .super-ready b{font-size:7px;line-height:11px}.arena-head .super-ready small{display:none}
 #arena{height:102px}.crowd-bar{min-height:20px;font-size:9px}
 #workers{height:46px;min-height:46px}.worker{min-height:46px;padding:3px}.worker strong{font-size:11px;white-space:nowrap}.worker-info{gap:0 1px}.worker small{font-size:8px;line-height:1.1}.worker b{font-size:10px;white-space:nowrap}.worker canvas{width:23px;height:32px}
}
@media(max-width:849px) and (max-height:740px){
 header{height:34px}.hud{min-height:40px}.brand small{font-size:23px}
 #arena{height:76px}.arena-head{padding:2px 5px;grid-template-rows:12px 12px;gap:1px}.crowd-bar{min-height:16px;font-size:8px;padding:1px 5px}
 #workers{height:40px;min-height:40px}.worker{min-height:40px}.worker strong{font-size:10px}.worker canvas{display:block;width:19px;height:26px}.worker small{font-size:7px}.worker b{font-size:9px}
 .title-stage .game-title{font-size:88px!important}
}
.mylar-shell{width:min(100%,calc(100cqh - 14px))}
/* A short screen keeps a usable square board while the whole page stays stationary. */
@media(max-width:849px) and (max-height:740px){.puzzle-head{min-height:16px}.mylar-zip,.mylar-footer{height:11px;min-height:11px}.mylar-zip span{font-size:6px}.mylar-footer{font-size:6px}.mylar-shell{width:min(100%,calc(100cqh - 6px))}}

/* v75 prominent Cloud Pop branding */
.brand{gap:12px;min-width:0}
.brand img{width:174px;height:52px;object-fit:contain;border-radius:9px;filter:brightness(1.1) saturate(1.15) drop-shadow(0 2px 5px #69d9ff35)}
header{height:56px}
.official-title-logo{width:min(340px,82%);height:auto;max-height:114px;object-fit:contain;border-radius:14px;filter:brightness(1.1) saturate(1.15) drop-shadow(0 4px 9px #73dcff40)}
@media(min-width:850px){
 #app{grid-template-rows:82px 60px minmax(0,1fr)}
 header{height:82px}.brand{gap:20px}.brand img{width:260px;height:78px}
}
@media(max-width:849px) and (max-height:740px){
 header{height:46px}.brand{gap:8px}.brand img{width:155px;height:44px}
 .official-title-logo{width:260px;max-width:82%;max-height:87px}
}

/* v76 open Cloud Pop wordmark: transparent artwork, no banner treatment. */
.brand img,.official-title-logo{border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 3px 2px #080c2860)}
@media(min-width:850px){.brand img{width:300px;height:82px}.brand{gap:24px}}
.official-title-logo{width:min(380px,88%);max-height:120px}
@media(max-width:849px){.brand img{width:185px;height:56px}.brand{gap:8px}}
@media(max-width:849px) and (max-height:740px){.brand img{width:162px;height:46px}.official-title-logo{width:280px;max-height:88px}}

/* v77 shared cast framing and learn-by-doing guidance. */
.story-cast-mini,.boss-cast img,.super-portrait,.comic-speaker,.crew-profile img{object-fit:contain;object-position:center bottom}
.crew-profile img{background:linear-gradient(#26354d,#152139);border:1px solid #6879a1;box-shadow:none;border-radius:12px}
.title-controls #howtoplay{grid-column:1/-1;background:#35466e;color:#fff0b9}
#app[data-lesson="pick"] .tray-piece[data-tray="0"]{outline:3px solid #ffe879;outline-offset:-3px;background:#435473;box-shadow:0 0 15px #ffdf6a35}
#app[data-lesson="place"] #board{outline:3px solid #ffdc73}
#app[data-lesson="serve"] #stock,#app[data-lesson="earn"] #cash{color:#d0ff92;text-shadow:0 0 8px #b8ff6144}
.bottom{min-height:40px;align-items:center;gap:8px}
.bottom>span{font:600 13px/1.25 Booth,sans-serif;color:#fff3c1;max-width:calc(100% - 85px)}
#hint{white-space:normal}
.guide-screen{width:min(94vw,680px);max-width:680px;border:2px solid #ffdd88;border-radius:20px;background:linear-gradient(145deg,#2d365c,#14213a);padding:22px}
.guide-screen h2{font:900 32px/1.1 Booth,sans-serif;color:#fff1ad;margin:10px 0 18px}
.flow-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}
.flow-guide>div{border:1px solid #667ca3;border-radius:12px;padding:13px;background:#182744}
.flow-guide b{display:block;font:900 28px Booth,sans-serif;color:#baff82}.flow-guide h3{font:900 20px Booth,sans-serif;margin:4px 0;color:#fff}
.flow-guide p,.guide-goal p,.guide-extra{font:500 16px/1.35 Booth,sans-serif;margin:7px 0;color:#e4eafe}
.guide-goal{padding:13px;margin:14px 0;background:#294b48;border:1px solid #81c7a1;border-radius:12px;text-align:left}.guide-goal strong{color:#e2ffb6;font-size:19px}
.guide-extra{margin:12px 0}.guide-screen .primary{width:100%;margin-top:9px}
@media(max-width:520px){.guide-screen{padding:15px}.guide-screen h2{font-size:25px}.flow-guide{grid-template-columns:1fr;gap:7px}.flow-guide>div{display:grid;grid-template-columns:26px 1fr;column-gap:9px;padding:8px 10px}.flow-guide b{grid-row:1/3;align-self:center}.flow-guide h3{font-size:17px;margin:0}.flow-guide p{grid-column:2;font-size:14px;margin:3px 0}.guide-goal p,.guide-extra{font-size:14px}.guide-goal strong{font-size:17px}.guide-screen .delivery-note{font-size:11px}.bottom>span{font-size:12px}.bottom{min-height:40px}}

/* v77 vendor scene: a readable customer receipt lives outside the tiny canvas. */
.customer-reaction{min-height:27px;display:flex;align-items:center;justify-content:center;padding:4px 7px;background:#142039;color:#e7edf9;font:600 12px/1.2 Booth,sans-serif;text-align:center;border-top:1px solid #677a9a}
.customer-reaction[data-mood="HAPPY"]{color:#ceff9b;background:#203e3a}
.customer-reaction[data-mood="MEH"]{color:#ffe394;background:#3d3540}
.customer-reaction[data-mood="ANGRY"]{color:#ffb3ba;background:#452a3d}
@media(max-width:849px){#arena{height:120px}.arena-wrap .crowd-bar{display:none}.customer-reaction{font-size:11px;min-height:25px}}
@media(max-width:849px) and (max-height:740px){#arena{height:92px}.customer-reaction{font-size:10px;min-height:23px}.mylar-zip,.mylar-footer{display:none}.mylar-shell{padding-block:4px;width:min(100%,calc(100cqh + 6px))}}

/* v78: tower-defense-style forecourt with a white tent and readable wave status. */
#arena{height:auto;aspect-ratio:420/270;width:100%;object-fit:fill}
.wave-approach{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;background:#172b3c;padding:6px 9px;font:13px/1.2 Booth,sans-serif;color:#e2ecec;border-bottom:1px solid #607577}
.wave-approach b{color:#fff0b1;letter-spacing:.6px}.wave-approach #waiting-count{text-align:right}.wave-approach #wave-next{grid-column:1/-1;color:#bfdcd3}
.wave-approach[data-urgent="true"] #waiting-count{color:#ffbdc3}
@media(min-width:850px){.arena-wrap .crowd-bar{display:none}.wave-approach{font-size:14px}}
@media(max-width:849px){#arena{height:170px;aspect-ratio:auto}.wave-approach{font-size:12px;padding:4px 7px;gap:1px 6px}.arena-head #wave{display:none}.arena-head{grid-template-columns:auto 1fr auto}}
@media(max-width:849px) and (max-height:740px){#arena{height:126px}.wave-approach{font-size:11px;padding:3px 6px}.customer-reaction{min-height:22px}.brand img{max-height:45px}}
@media(max-width:849px){
 header{height:44px}.brand img{height:44px}.brand small{font-size:25px}
 .arena-head{grid-template-columns:auto 1fr auto;grid-template-rows:20px;gap:5px;padding:3px 6px;min-height:26px}
 .arena-head #rush{grid-column:1;grid-row:1;font-size:10px}
 .arena-head .super-ready{grid-column:2;grid-row:1;min-height:18px;padding:1px 4px;align-self:center}
 .arena-head .super-ready b{font-size:8px;line-height:15px}
 .arena-head #stock{grid-column:3;grid-row:1;font-size:10px}
 #arena{height:160px}.wave-approach{grid-template-columns:auto 1fr;font-size:12px}
 .meal{min-height:29px;padding:3px;font-size:10px}#workers,.worker{height:42px;min-height:42px}
 #tray{height:48px;min-height:48px}.mylar-zip,.mylar-footer{display:none}.mylar-shell{padding-block:4px;width:min(100%,calc(100cqh - 6px))}
 .crew-zone{gap:4px}.puzzle{gap:4px}.puzzle-head{min-height:18px}
}
@media(max-width:849px) and (max-height:740px){
 #app{height:770px;min-height:770px;max-height:none}header{height:36px}.brand img{height:36px}.brand small{font-size:23px}
 #arena{height:142px}.wave-approach{font-size:12px}.bottom{font-size:11px;min-height:31px}.bottom button{min-height:28px;font-size:10px}
}
/* v79 directed performances: steady dialogue, moving picture and expressive faces. */
.comic-cinematic .v79-story{display:flex;flex-direction:column;gap:0;min-height:0;overflow:visible}
.comic-cinematic .v79-story .scene-art{height:clamp(250px,45svh,430px);min-height:0;position:relative;overflow:hidden;border:0;border-radius:14px 14px 0 0;isolation:isolate}
.v79-story .scene-art .story-bg{inset:-5%;width:110%;height:110%;object-fit:cover;filter:brightness(.65) saturate(.8);animation:v79-background 7s ease-out both!important;transform-origin:var(--story-focus-x) var(--story-focus-y)}
.v79-story .scene-art[data-shot="wide"] .story-bg{filter:brightness(.92) saturate(1);animation:v79-establish 8s ease-out both!important}
.v79-story .scene-art[data-shot="reverse"] .story-bg{object-position:70% 50%;transform-origin:70% 50%}
.v79-performance{position:absolute;inset:0;z-index:7;pointer-events:none;background:linear-gradient(0deg,#17254188,transparent 65%)}
.v79-performance canvas{position:absolute;bottom:-2%;height:96%;width:auto;max-width:70%;object-fit:contain;object-position:bottom;image-rendering:pixelated;filter:drop-shadow(0 5px 0 #111a33);transform-origin:bottom center}
.v79-performance .v79-speaker{left:1%;z-index:2;animation:v79-entrance .36s cubic-bezier(.2,.8,.3,1) both,v79-speaking 2.6s .36s ease-in-out infinite}
.v79-performance .v79-listener{right:0;height:66%;max-width:45%;filter:brightness(.75) drop-shadow(0 4px #142339);animation:v79-listen 4s ease-in-out infinite}
.v79-performance[data-side="right"] .v79-speaker{left:auto;right:1%}.v79-performance[data-side="right"] .v79-listener{right:auto;left:0}
.v79-story[data-emotion="1"] .v79-speaker{animation:v79-entrance .3s ease-out both,v79-worry 3s .3s ease-in-out infinite}
.v79-story[data-emotion="3"] .v79-speaker{animation:v79-entrance .3s ease-out both,v79-joy 3s .3s ease-in-out infinite}
.v79-chapter{position:absolute;z-index:9;left:12px;top:12px;padding:5px 9px;background:#17233de8;color:#fff1b0;font:12px Booth,sans-serif;letter-spacing:1px;border-left:3px solid #ffc96c}
.comic-cinematic .v79-dialogue{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;margin:0!important;transform:none!important;rotate:none!important;border:1px solid #8997bd;border-top:3px solid #f8d876;border-radius:0 0 12px 12px;background:#172640;color:#f6f7ff;padding:13px 16px;box-shadow:none!important;min-height:125px;text-align:left;animation:none!important}
.v79-dialogue::before,.v79-dialogue::after{display:none!important}.v79-dialogue b{font:14px Booth,sans-serif;letter-spacing:.8px;color:#ffdf86}.v79-dialogue p{font:18px/1.4 Booth,sans-serif;margin:7px 0 0;min-height:76px;color:#fff}
.comic-cinematic .scene-buttons{margin-top:10px}.comic-cinematic .scene-buttons button{min-height:44px}
#moment-banner{position:absolute;z-index:10;left:50%;bottom:30px;transform:translate(-50%,8px);max-width:94%;width:max-content;padding:6px 12px;border:1px solid #ffe7a0;border-radius:7px;background:#172b43ed;color:#fff1b1;font:16px/1.2 Booth,sans-serif;letter-spacing:.3px;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;box-shadow:0 4px 12px #07142360}
#moment-banner.show{opacity:1;transform:translate(-50%,0)}#moment-banner[data-kind="wave"]{color:#d9fff4;border-color:#95dfd0}
.packed-bag-flight{position:fixed;z-index:40;pointer-events:none;width:15px;height:21px;background:linear-gradient(#fff 0 14%,#a572d1 14% 26%,#b8eff3 26% 82%,#8158b3 82%);border:2px solid #f7fff4;border-radius:3px;box-shadow:0 2px 5px #263352;animation:v79-stock-flight .65s cubic-bezier(.2,.6,.3,1) both}
.stock-pop{animation:v79-stock-pop .6s ease-out}.v79-results .results>div{animation:v79-result-in .45s var(--reveal-delay,0s) ease-out both}.next-chapter{padding:12px;border-left:3px solid #f4cd79;background:#20354b;color:#f5e7bd;font:15px/1.4 Booth,sans-serif;text-align:left}
@keyframes v79-stock-flight{0%{transform:translate(-50%,-50%) scale(.65);opacity:0}18%{opacity:1}100%{transform:translate(var(--fly-x),var(--fly-y)) scale(.5) rotate(12deg);opacity:0}}
@keyframes v79-stock-pop{30%{color:white;text-shadow:0 0 9px #ffe178}100%{text-shadow:none}}
@keyframes v79-background{from{transform:scale(1.02) translateX(-1%)}to{transform:scale(1.18) translateX(1%)}}
@keyframes v79-establish{from{transform:scale(1.12) translateY(1%)}to{transform:scale(1) translateY(0)}}
@keyframes v79-entrance{from{opacity:0;translate:0 18px;scale:.95}to{opacity:1;translate:0 0;scale:1}}
@keyframes v79-speaking{0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-3px) rotate(.35deg)}}
@keyframes v79-listen{0%,100%{transform:translateY(0)}50%{transform:translateY(2px) rotate(-.7deg)}}
@keyframes v79-worry{0%,70%,100%{transform:rotate(-1deg)}78%,92%{transform:rotate(.8deg)}85%{transform:rotate(-.8deg)}}
@keyframes v79-joy{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-6px)}90%{transform:translateY(-2px)}}
@keyframes v79-result-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:520px){.comic-cinematic .v79-story .scene-art{height:clamp(220px,40svh,350px)}.v79-dialogue p{font-size:17px}.v79-chapter{font-size:11px}#moment-banner{font-size:13px}.v79-dialogue{padding:11px!important}}
@media(max-height:700px){.comic-cinematic .v79-story .scene-art{height:220px}.v79-dialogue p{font-size:16px;min-height:66px}.comic-cinematic .v79-dialogue{min-height:112px}.scene-top{margin-bottom:5px}}
html.reduced-motion .v79-story .scene-art .story-bg,html.reduced-motion .v79-performance canvas,html.reduced-motion .stock-pop,html.reduced-motion .v79-results .results>div{animation:none!important;transform:none!important;translate:none!important;scale:1!important}
html.reduced-motion #moment-banner{transition:none}html.reduced-motion .packed-bag-flight{display:none}
#modal .v79-story .scene-art[data-shot="performance"] .story-bg{display:none}
.v79-set{position:absolute;inset:0;z-index:2;overflow:hidden;background:linear-gradient(155deg,#596079,#27384b 66%);box-shadow:inset 0 0 70px #0b172788}
.v79-set i{position:absolute;display:block;border-radius:0;box-sizing:border-box}
.set-window{left:6%;top:12%;width:35%;height:43%;background:linear-gradient(#e6ae74,#927b8a);border:8px solid #25374a;box-shadow:inset 0 0 0 2px #a9b6c0}
.set-window::after{content:"";position:absolute;left:48%;top:0;bottom:0;width:5px;background:#25374a}
.set-shelf{right:5%;top:15%;width:41%;height:50%;background:repeating-linear-gradient(0deg,#829eac 0 7px,#223748 7px 42px);border:5px solid #9fadb7}
.set-shelf::after{content:"";position:absolute;inset:12px 8px;background:repeating-linear-gradient(90deg,#cc99d4 0 9px,transparent 9px 15px,#91d9d2 15px 24px,transparent 24px 31px);opacity:.75}
.set-counter{bottom:0;left:-5%;width:110%;height:25%;background:linear-gradient(#9babb7 0 8px,#324657 8px);border-top:3px solid #d7e5e9}
.set-lamp{left:49%;top:-5%;height:25%;width:3px;background:#a4b8c1}.set-lamp::after{content:"";position:absolute;bottom:0;left:-18px;width:40px;height:12px;background:#ffe9b5;box-shadow:0 7px 35px 15px #ffe7ae22}
.v79-set[data-location="market"]{background:linear-gradient(165deg,#629f9b,#3b5e69 65%,#273d4b)}
.v79-set[data-location="market"] .set-window{inset:0 -5% auto;width:110%;height:22%;border:0;background:linear-gradient(165deg,#f7faf3,#c5d5dc);transform:skewY(-3deg);box-shadow:0 5px #879ba8}
.v79-set[data-location="market"] .set-window::after{display:none}
.v79-set[data-location="market"] .set-shelf{right:8%;top:23%;height:62%;width:5px;background:#ebf1ed;border:0;box-shadow:-270px 0 #ebf1ed}
.v79-set[data-location="market"] .set-shelf::after{display:none}
.mood-danger .v79-set{filter:brightness(.68) saturate(.7)}.mood-midnight .v79-set{filter:brightness(.5) hue-rotate(15deg)}
#modal .v79-dialogue p{font:600 18px/1.4 Booth,sans-serif;letter-spacing:0}
#modal .v79-dialogue b{font:700 14px/1.2 Booth,sans-serif;letter-spacing:1px}
#modal .v79-story .scene-art{flex:none!important;height:clamp(250px,43svh,430px)!important;min-height:0!important}
@media(max-height:700px){#modal .v79-story .scene-art{height:250px!important}#modal .v79-dialogue p{font-size:16px}}
.title-screen .title-controls>.menu-pair{grid-template-columns:1fr 1fr;gap:8px}.title-screen .title-controls>.menu-pair button{min-height:40px;font-size:14px}.title-more{text-align:center;margin-top:10px;color:#c7d8e9;font-size:13px}.title-more summary{cursor:pointer;padding:6px}.title-more .menu-pair{grid-template-columns:1fr;gap:5px;margin-top:7px}.title-more button{min-height:38px;font-size:14px}
.v79-set{animation:v79-set-drift 8s ease-out both;transform-origin:center}
@keyframes v79-set-drift{from{transform:scale(1.08) translateX(-1%)}to{transform:scale(1.02) translateX(1%)}}
html.reduced-motion .v79-set{animation:none!important;transform:none!important}

/* v81: one illustrated set and a consistent cast through the entire scene. */
.v81-location{position:absolute;inset:0;z-index:2;background-image:url('story-locations-v81.png');background-size:auto 200%;background-position:0 0;image-rendering:auto}
.v81-location[data-location="market"]{background-position:100% 0}
.v81-location[data-location="coffee"]{background-position:0 100%}
.v81-location[data-location="evening"]{background-position:100% 100%}
.mood-danger .v81-location{filter:brightness(.7) saturate(.7)}
.mood-midnight .v81-location{filter:brightness(.48) saturate(.7)}
.v79-story .v79-performance[data-wide="true"] canvas{height:74%;max-width:46%;filter:drop-shadow(0 4px 0 #17233b);animation:v79-listen 4s ease-in-out infinite}
.v79-story .v79-performance[data-wide="true"] .v79-speaker{left:5%;right:auto}
.v79-story .v79-performance[data-wide="true"] .v79-listener{right:5%;left:auto}
.v79-story .v79-performance[data-wide="false"] .v79-speaker{animation:v81-focus .45s ease-out both,v79-speaking 2.6s .45s ease-in-out infinite}
@keyframes v81-focus{from{transform:scale(.97);opacity:.8}to{transform:scale(1);opacity:1}}
html.reduced-motion .v79-story .v79-performance canvas{animation:none!important;transform:none!important}

/* v82 selectable tour and customer satisfaction */
.level-map button{padding:12px 2px;min-width:0;min-height:78px;border:2px solid #46657c;background:#102940;color:#e1f2ff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.level-map button b{font:22px Arcade,monospace}.level-map button small{font:12px Booth,sans-serif;white-space:nowrap}
.level-map button:disabled{opacity:.45;cursor:not-allowed}.level-map button.perfect-show{border-color:#ffdf70;background:#49401f;color:#ffefae}
.happy-tally{font:13px/1.3 Booth,sans-serif;color:#ffdda2;background:#162739;padding:4px 8px;border-bottom:1px solid #5c7080}
.happy-tally[data-perfect="true"]{color:#b4ffb3}
.happiness-result{display:flex;flex-direction:column;gap:6px;background:#172e43;border:2px solid #698fa3;border-radius:12px;padding:12px;margin:10px 0;text-align:center}
.happiness-result b{color:#c8f5bd;font-size:22px}.happiness-result span{font-size:17px}.happiness-result small{font:15px/1.4 Booth,sans-serif;color:#d7e5f1}
.happiness-result.is-perfect{border-color:#ffdf70;background:#3c3524}.happiness-result.is-perfect b{color:#ffeb8d}
@media(max-width:400px){.level-map{gap:5px}.level-map button small{font-size:10px}.happy-tally{font-size:12px}}

/* v83 Perfect finale: three escalating impacts; no white flashes. */
#perfect-finale{position:fixed;inset:0;z-index:999;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse,#443675,#071324 75%);color:#fff2b9;padding:20px;isolation:isolate}
.perfect-center{position:relative;z-index:3;width:min(650px,100%);text-align:center;display:flex;align-items:center;flex-direction:column;gap:15px}
.perfect-kicker{font:16px Booth,sans-serif;letter-spacing:2px;color:#bafee1}.perfect-shout{font:clamp(36px,11vw,96px)/1.15 Arcade,monospace;color:#ffe66c;text-shadow:3px 4px #a24230,6px 7px #171c40;overflow-wrap:anywhere}
.perfect-shout.hit{animation:perfect-slam .5s cubic-bezier(.16,.8,.2,1) both}
#perfect-finale[data-stage="1"] .perfect-shout{color:#ffb4e3;scale:1.1}
#perfect-finale[data-stage="2"] .perfect-shout{color:#fff2a0;scale:1}
.perfect-sub{font:22px Booth,sans-serif!important;margin:0!important;color:#ceffe7!important}
#perfect-crew{width:min(540px,100%);height:auto;image-rendering:pixelated}
.perfect-seal{border:2px solid #ffd96e;padding:10px 20px;border-radius:30px;background:#302949;font:20px Booth,sans-serif}
#perfect-dismiss{min-width:200px;min-height:48px;margin-top:8px}
.perfect-rays{position:absolute;inset:-100%;z-index:0;background:repeating-conic-gradient(from 0deg,#b97eeb20 0deg 12deg,transparent 12deg 26deg);animation:perfect-spin 18s linear infinite}
.perfect-ring{position:absolute;left:50%;top:40%;width:100px;height:100px;margin:-50px;border:8px solid #ffcf69;border-radius:50%;opacity:0;animation:perfect-ring 1.3s 1.3s ease-out both}
.perfect-confetti{position:absolute;inset:0;pointer-events:none}.perfect-confetti i{position:absolute;left:50%;top:42%;width:12px;height:18px;border-radius:3px;border:2px solid #ffffff70;opacity:0;animation:perfect-burst 2.6s var(--delay) cubic-bezier(.08,.6,.25,1) both}
@keyframes perfect-slam{from{transform:scale(1.7) rotate(-5deg);opacity:0}45%{opacity:1;transform:scale(.94) rotate(1deg)}to{transform:scale(1);opacity:1}}
@keyframes perfect-ring{0%{opacity:.7;transform:scale(.3)}100%{opacity:0;transform:scale(12)}}
@keyframes perfect-burst{0%{opacity:0;transform:translate(0,0) scale(.2)}10%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.7)}}
@keyframes perfect-spin{to{transform:rotate(360deg)}}
#perfect-finale.still *,html.reduced-motion #perfect-finale *{animation:none!important;transform:none!important;scale:1!important}
#perfect-finale.still .perfect-confetti,#perfect-finale.still .perfect-ring{display:none}
@media(max-height:640px){.perfect-center{gap:9px}.perfect-kicker{font-size:12px}#perfect-crew{max-height:120px;width:auto;max-width:100%}.perfect-seal{font-size:17px}}

/* v84 original scenes stay intact; expressive portrait sits with dialogue. */
#modal .v79-story .scene-art[data-shot="original"]{height:auto;aspect-ratio:4/3;max-height:48svh;min-height:0;background:#081326}
#modal .v79-story .scene-art[data-shot="original"] .story-bg{display:block;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;filter:none;animation:v84-scene-breathe 9s ease-in-out both!important;transform-origin:center}
.v79-dialogue.has-face{position:relative;padding-right:104px!important;min-height:130px}
.v84-dialogue-face{position:absolute;bottom:5px;right:8px;width:82px;height:110px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #090f20);animation:v79-speaking 3s ease-in-out infinite}
@keyframes v84-scene-breathe{from{transform:scale(1)}to{transform:scale(1.018)}}
html.reduced-motion #modal .v79-story .scene-art[data-shot="original"] .story-bg,html.reduced-motion .v84-dialogue-face{animation:none!important;transform:none!important}
@media(max-width:400px){.v79-dialogue.has-face{padding-right:82px!important}.v84-dialogue-face{width:64px;height:90px;right:6px}}

/* v85: use the open Fold's width; keep the stage in its native proportions. */
@media (max-width: 1050px) {
  #app { width:100%; max-width:none; height:auto; min-height:var(--cp-vh,100dvh); max-height:none; }
  #arena { display:block; height:auto; aspect-ratio:420 / 270; }
  .arena-head { display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto; gap:6px; padding:6px; }
  .arena-head #wave { display:none; }
  .arena-head #rush { grid-column:1; grid-row:1; font-size:12px; }
  .arena-head .super-ready { grid-column:2; grid-row:1; min-width:0; min-height:24px; padding:2px; }
  .arena-head .super-ready b { font:12px/18px Booth,sans-serif; }
  .arena-head .super-ready small { display:none; }
  .arena-head #stock { grid-column:3; grid-row:1; font-size:12px; }
  .wave-approach { font-size:14px; padding:6px 8px; }
  .customer-reaction { font-size:13px; min-height:30px; }
  .meal { min-height:44px; font-size:13px; }
  .crew-zone,.puzzle { gap:8px; }
  .puzzle-head { min-height:28px; font-size:14px; }
  .puzzle-head span { font-size:12px; }
  #board-wrap { container-type:inline-size; flex:none; min-height:0; }
  .mylar-shell { width:100%; padding:5px 7px; }
  .mylar-zip,.mylar-footer { display:none; }
  #tray { height:76px; min-height:76px; }
  .bottom { min-height:44px; font-size:14px; }
  .bottom>span { font-size:14px; }
  .bottom button { min-height:44px; font-size:14px; }
  #workers { height:auto; min-height:58px; }
  .worker { height:auto; min-height:58px; }
  .worker canvas { width:30px; height:42px; }
  .worker strong,.worker b { font-size:13px; }
  .worker small { font-size:11px; }
}
@media (min-width:600px) and (max-width:1050px) {
  #app { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); grid-template-rows:56px 56px auto; align-content:start; gap:10px 14px; padding:10px 12px 16px; }
  header,.hud { grid-column:1/-1; }
  header { height:56px; }
  .brand img { width:210px; height:54px; max-height:54px; }
  .brand small { font-size:28px; }
  .hud { min-height:56px; padding:7px 12px; }
  .hud small { font-size:12px; }
  .hud b,#hearts { font-size:19px; }
  .hud .money b { font-size:25px; }
  .crew-zone { grid-column:1; grid-row:3; justify-content:flex-start; }
  .puzzle { grid-column:2; grid-row:3; justify-content:flex-start; }
  #workers { grid-template-columns:1fr; gap:6px; }
  .worker { min-height:48px; padding:3px 10px; gap:10px; }
  .worker canvas { width:30px; height:40px; }
  .worker strong,.worker b { font-size:16px; }
  .worker small { font-size:12px; }
  .puzzle-head { flex-wrap:wrap; }
}
@media (max-width:599px) {
  #app { padding:8px; gap:8px; }
  header { height:46px; }
  .hud { min-height:50px; }
  .hud small { font-size:11px; }
  .hud b { font-size:17px; }
}
/* An unfolded, near-square display is usable even with short browser chrome. */
@media (min-width:600px) and (min-aspect-ratio:1/1) and (max-aspect-ratio:3/2) {
  #rotate-hint { display:none; }
  #app,dialog[open],#drag-layer { visibility:visible!important; }
}

/* v86: reserve clearance below the tilted title and its long shadow. */
.title-stage canvas{position:relative;z-index:2;margin-top:40px!important;}
.worker small{white-space:normal;}

/* v87: phone gameplay fits the visible browser area, including Safari chrome.
   Dialogs retain their own scrolling; the live board and tent share one screen. */
@media (max-width:599px) {
  #app {height:var(--cp-vh,100dvh);min-height:0;max-height:var(--cp-vh,100dvh);overflow:hidden;padding:4px 6px max(4px,env(safe-area-inset-bottom));gap:4px;}
  header {height:34px;min-height:34px;flex:none;}
  .brand img {height:32px;width:142px;max-height:32px;}
  .brand small {font-size:21px;}
  .square {width:40px;min-height:34px;}
  .hud {min-height:40px;padding:3px 8px;flex:none;}
  .hud small {font-size:10px;}.hud b,#hearts {font-size:15px;}.hud .money b {font-size:21px;}
  .crew-zone {gap:4px;flex:none;}
  .arena-head {padding:2px 6px;min-height:24px;gap:4px;}
  .arena-head .super-ready {min-height:20px;padding:0 2px;}
  .arena-head .super-ready b {font-size:11px;line-height:18px;}
  .arena-head #rush,.arena-head #stock {font-size:11px;}
  .wave-approach {padding:3px 7px;min-height:24px;grid-template-columns:1fr auto;font-size:12px;}
  #wave-next {display:none;}
  .happy-tally {padding:2px 7px;font-size:12px;line-height:16px;}
  #arena {height:clamp(84px,calc(var(--cp-vh,100dvh)*.17),140px);aspect-ratio:auto;}
  .customer-reaction,.arena-wrap .crowd-bar {display:none;}
  .show-actions {gap:5px;}.meal {min-height:30px;padding:2px 4px;font-size:11px;}
  #workers {grid-template-columns:repeat(3,minmax(0,1fr));height:44px;min-height:44px;gap:4px;}
  .worker {height:44px;min-height:44px;padding:2px 3px;gap:3px;min-width:0;}
  .worker canvas {height:30px;width:22px;}
  .worker-info {min-width:0;}.worker strong,.worker b {font-size:12px;}
  .worker small {display:none;}
  .puzzle {flex:1;min-height:0;gap:4px;}
  .puzzle-head {min-height:18px;flex:none;font-size:12px;padding:0 2px;}
  .puzzle-head span {font-size:10px;}
  #board-wrap {flex:1;min-height:0;container-type:size;}
  .mylar-shell {width:min(100%,calc(100cqh - 4px));padding:3px 6px;}
  #tray {height:48px;min-height:48px;flex:none;gap:6px;}
  .bottom {min-height:34px;flex:none;gap:5px;}
  .bottom>span {font-size:12px;line-height:1.1;max-width:calc(100% - 90px);}
  .bottom button {min-height:32px;font-size:12px;padding:3px 7px;}
}

/* v88: close-up cast staging with a reserved, responsive phone scene. */
@media (max-width:599px) {
  #arena {height:clamp(130px,calc(var(--cp-vh,100dvh)*.23),190px);}
}
@media (min-width:600px) {
  #arena {height:clamp(180px,calc(var(--cp-vh,100dvh)*.34),310px);aspect-ratio:auto;}
}
/* Short phones keep a playable board; the larger cast is retained in the scene. */
@media (max-width:599px) and (max-height:650px) {
  #arena {height:120px;}
  header {height:28px;min-height:28px;}
  .brand img {height:26px;max-height:26px;}
  .hud {min-height:34px;}
  .wave-approach {min-height:20px;padding:1px 7px;}
  #tray {height:42px;min-height:42px;}
  .bottom>span {display:none;}
  .bottom {justify-content:flex-end;min-height:30px;}
}

/* v89: a full peaked tent and large group leaders in a separate foreground row. */
@media(max-width:599px){#arena{height:clamp(160px,calc(var(--cp-vh,100dvh)*.29),235px);}}
@media(min-width:600px){#arena{height:clamp(240px,calc(var(--cp-vh,100dvh)*.41),380px);}}
@media(max-width:599px) and (max-height:650px){#arena{height:150px;}}

/* The unfolded Fold keeps all three crew controls alongside the board. */
@media(min-width:600px) and (max-width:1050px){
  #app{grid-template-rows:46px 46px auto;gap:8px 12px;}
  header{height:46px}.hud{min-height:46px;padding:4px 10px;}
  .brand img{height:44px;max-height:44px;}
  #workers{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;}
  .worker{min-height:58px;padding:4px;gap:3px;}
  .worker canvas{display:none;}.worker-info{min-width:0;display:flex;flex-direction:column;gap:2px;}
  .worker strong{font-size:13px}.worker b{font-size:12px;white-space:normal;}.worker small{font-size:10px;}
  .meal{min-height:38px;font-size:12px;}
  .customer-reaction{min-height:24px;font-size:12px;padding:3px;}
}

/* Market-day happiness feedback stays compact on phones. */
.happy-tally{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center;padding:5px 8px!important}
.happy-tally b{font-size:17px;color:#8bffa9}.happy-tally span{flex:1;font-size:12px}.happy-tally small{flex-basis:100%;font-size:12px}
.happy-tally[data-risk="true"] small{color:#ffe066;font-weight:bold}
.happy-tally[data-celebrate="true"]{background:#24503b;border-bottom-color:#a5ff9c}

#tent-unlock{font:12px/1.3 Booth,sans-serif;color:#ffe7a6;background:#192d40;padding:3px 8px}#secure-stock{width:100%;font:13px Booth,sans-serif;padding:7px;border-radius:0}#secure-stock[hidden]{display:none}.show-debrief{background:#172e43;border:1px solid #698fa3;border-radius:10px;padding:12px;margin:10px 0}.show-debrief b{color:#ffe39b}.show-debrief p{font-size:15px;margin:6px 0}.show-debrief small{display:block;font-size:12px;line-height:1.4}.show-debrief button{width:100%;margin:8px 0}

#secure-stock{min-height:26px;margin:0;padding:3px 5px;font-size:12px;line-height:1.2}#modal.results-review{width:min(680px,94vw);max-width:680px}.show-debrief summary{cursor:pointer;color:#ffe7a6;font:15px Booth,sans-serif;padding:5px 0}.show-debrief details{margin:4px 0}@media(min-width:850px){#app:has(#secure-stock:not([hidden])) .brand{min-height:64px;padding-top:8px;padding-bottom:8px}}

.perfect-plan{background:#173d38;border:1px solid #9bd2aa;border-radius:10px;padding:10px;text-align:left;margin:10px 0}.perfect-plan b{color:#ffe498}.perfect-plan p{font:15px/1.3 Booth,sans-serif;margin:5px 0}.perfect-plan small{display:block;font:13px/1.35 Booth,sans-serif;color:#d4ebdf}.perfect-gap{color:#ffe498;font-weight:bold}.prep-card small{display:block;font:13px/1.3 Booth,sans-serif}

.prep-card.crew-training{grid-template-columns:1fr;gap:6px}.crew-training button{width:100%}.crew-training p{font-size:16px}

.coach-tip{border-top:1px solid #ffffff22;margin-top:10px;padding-top:10px}.coach-tip strong{color:#c8f1a4}.coaching>small{margin-top:5px}

/* v110: market incidents stay over the puzzle, with readable protected prompts. */
#board-wrap{position:relative}
.market-incident[hidden],#board-needs[hidden]{display:none!important}
.market-incident{position:absolute;inset:0;z-index:40;border-radius:18px;overflow:hidden;touch-action:none;background:#10243d55;border:3px solid #ffe08a}
.incident-copy{position:absolute;top:4%;left:4%;right:4%;padding:10px;background:#14243bf5;border:2px solid #ffe08a;border-radius:12px;text-align:center;color:#fff;pointer-events:none;z-index:2;font:700 clamp(14px,2vw,22px) sans-serif;box-shadow:0 4px 14px #0006}
.incident-copy small{display:block;margin-top:5px;font:600 clamp(10px,1.3vw,14px) sans-serif;color:#a9f5c5}
.market-bug{position:absolute;transform:translate(-50%,-50%);width:74px;min-height:74px;padding:4px;background:#24304bf2;border:2px solid #ffe08a;border-radius:50%;color:#fff;touch-action:none;animation:bee-arrive .65s ease-out;box-shadow:0 5px 14px #0007}
.market-bug span{font-size:40px;display:block;line-height:43px;filter:drop-shadow(0 2px 2px #0008)}
.market-bug small{font:700 11px sans-serif}.market-bug.wasp{border-color:#ff967a;background:#4b2735}.market-bug.wasp span{transform:scaleX(.8);filter:hue-rotate(-18deg)}
@keyframes bee-arrive{from{translate:100vw -100vh;rotate:-25deg}to{translate:0 0;rotate:0deg}}
.incident-help{position:absolute;bottom:5%;left:4%;right:4%;text-align:center;color:#fff;background:#14243bf5;padding:7px;border-radius:8px;font:600 12px sans-serif}
.incident-action{position:absolute;left:10%;right:10%;top:53%;min-height:56px;padding:12px;border:3px solid #fff1a6;background:#224e56;color:#fff;border-radius:14px;font:700 clamp(15px,2vw,21px) sans-serif;z-index:2;box-shadow:0 4px 0 #0c2839}
.market-incident.sun{background:linear-gradient(125deg,#fff1a65c,#ffcc7033 55%,transparent);box-shadow:inset 45px 0 70px #ffe69a66}
.market-incident.heat{background:linear-gradient(0deg,#ff8f453d,transparent 70%)}
.market-incident.heat:after{content:'♨';position:absolute;top:31%;left:43%;color:#ffd28d;font-size:55px;animation:heat-drift 2s ease-in-out infinite alternate}
@keyframes heat-drift{to{transform:translateY(-9px);opacity:.6}}
#board-needs{display:flex;flex-wrap:wrap;gap:4px;flex:none;z-index:4}
#board-needs button,.market-result{flex:1;padding:7px 9px;min-height:36px;border-radius:9px;font:700 clamp(11px,1.2vw,14px) sans-serif}
.board-hunger{background:#632c43;color:#fff;border:2px solid #ff91a0;animation:need-glow 1.6s ease-in-out infinite alternate}
.board-weather{background:#38506b;color:#fff;border:2px solid #ffe08a}.market-result{background:#204f46;color:#c5ffe5;display:block;text-align:center}
.meal.hungry,.meal.starving{border-color:#ff738a;background:#632c43;animation:need-glow 1.6s ease-in-out infinite alternate}
@keyframes need-glow{to{box-shadow:0 0 12px #ff6b8977}}
.fans-running .arena-wrap:after{content:'✺ Fans on · cooling';position:absolute;right:8px;bottom:34px;padding:5px 8px;background:#103a4deb;color:#b5f6ff;border-radius:8px;font:700 12px sans-serif;pointer-events:none}
@media(min-width:600px){#app.shade-swapped>.puzzle{grid-column:1;grid-row:3}#app.shade-swapped>.crew-zone{grid-column:2;grid-row:3}}
@media(max-width:599px){#app.shade-swapped>header{order:0}#app.shade-swapped>.hud{order:1}#app.shade-swapped>.puzzle{order:2}#app.shade-swapped>.crew-zone{order:3}.incident-copy{padding:6px;top:3%}.market-bug{width:62px;min-height:62px}.market-bug span{font-size:32px;line-height:35px}.incident-help{font-size:10px;padding:4px}.incident-action{padding:7px;min-height:48px}#board-needs button{min-height:30px;padding:4px;font-size:11px}}
html.reduced-motion .market-bug,html.reduced-motion .market-incident.heat:after,html.reduced-motion .board-hunger,html.reduced-motion .meal.hungry,html.reduced-motion .meal.starving{animation:none}
@media(prefers-reduced-motion:reduce){.market-bug,.market-incident.heat:after,.board-hunger,.meal.hungry,.meal.starving{animation:none}}
.board-heat-art{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.board-heat-art i{position:absolute;top:26%;bottom:12%;left:12%;width:24px;border-left:3px solid #ffd48d99;border-right:2px solid #ffdd9b66;border-radius:48% 28% 48% 28%;animation:heat-wave 2.8s ease-in-out infinite alternate}
.board-heat-art i:nth-child(2){left:36%;animation-delay:-1s}.board-heat-art i:nth-child(3){left:62%;animation-delay:-2s}.board-heat-art i:nth-child(4){left:84%;animation-delay:-.5s}
.board-heat-art span{position:absolute;top:29%;left:18%;font-size:32px;animation:sweat-drop 2.5s ease-in-out infinite}.board-heat-art span:nth-last-child(2){left:70%;animation-delay:-1s}.board-heat-art span:last-child{left:48%;top:70%;animation-delay:-1.8s}
@keyframes heat-wave{to{transform:skewX(-12deg) translateY(-8px);border-radius:28% 48% 28% 48%;opacity:.55}}
@keyframes sweat-drop{0%{translate:0 -5px;opacity:.4}60%{opacity:1}100%{translate:0 22px;opacity:.3}}
html.reduced-motion .board-heat-art *,html.reduced-motion .market-bug{animation:none}
@media(prefers-reduced-motion:reduce){.board-heat-art *{animation:none}}
.market-incident.rain{background:linear-gradient(120deg,#b9e5ff30,transparent 45%,#c9f0ff24);box-shadow:inset 0 0 45px #b9eaff77}
.board-rain-art{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 2% 50%,#dcf5ff88,transparent 22%),radial-gradient(ellipse at 98% 80%,#dcf5ff77,transparent 22%)}
.board-rain-art i{position:absolute;top:28%;left:12%;width:14px;height:23px;border:1px solid #c7f1ff;border-radius:60% 45% 60% 40%;background:#9bd8ee44;box-shadow:inset 2px 2px 3px #fff9;animation:rain-drop 3.5s ease-in infinite}
.board-rain-art i:nth-child(2){left:30%;top:45%;animation-delay:-2s}.board-rain-art i:nth-child(3){left:47%;top:22%;animation-delay:-1s}.board-rain-art i:nth-child(4){left:63%;top:63%;animation-delay:-.5s}.board-rain-art i:nth-child(5){left:78%;top:32%;animation-delay:-2.8s}.board-rain-art i:nth-child(6){left:90%;top:52%;animation-delay:-1.5s}
@keyframes rain-drop{to{translate:0 50px;opacity:.2}}
/* Shelter changes the display treatment, never the responsive game geometry.
   Keep the normal full-sized arena, board, tray and crew controls at every width. */
#app.rain-sheltered .mylar-shell{border-color:#b8f0ff;box-shadow:0 0 0 2px #32778b,0 8px 0 #153c50,0 14px 24px #0005}
#app.rain-sheltered .mylar-zip{background:linear-gradient(90deg,#387689,#c7f4ff,#387689);color:#102e3c}
#app.rain-sheltered .mylar-zip span{font-size:0}
#app.rain-sheltered .mylar-zip span:after{content:'☂ UNDER COVER · CANDY PROTECTED';font:700 9px/1.2 sans-serif;letter-spacing:.5px}
html.reduced-motion .board-rain-art *{animation:none}
@media(prefers-reduced-motion:reduce){.board-rain-art *{animation:none}}
.shoo-flight{position:fixed;z-index:100;pointer-events:none;font-size:40px;animation:shoo-flight .65s ease-in forwards}
@keyframes shoo-flight{to{transform:translate(70vw,-80vh) rotate(40deg);opacity:0}}
/* Hunger affects packing, with explicit cause/effect and no full-screen blackouts. */
.packing-fatigue[hidden]{display:none!important}
.packing-fatigue{position:absolute;inset:0;z-index:20;border-radius:18px;pointer-events:none;box-shadow:inset 0 0 calc(35px + 50px * var(--fatigue,0)) rgba(5,8,22,.76);background:radial-gradient(ellipse at center,transparent 48%,rgba(5,8,22,.12) 72%,rgba(5,8,22,.6));border:3px solid #ca749a99}
.packing-fatigue.exhausted{box-shadow:inset 0 0 85px #050816c2;border-color:#f197a9}
.fatigue-message{position:absolute;top:29%;left:6%;right:6%;white-space:pre-line;text-align:center;padding:14px 9px;background:#291c37ed;border:2px solid #ffafc0;color:#fff;border-radius:12px;font:800 clamp(13px,1.7vw,21px)/1.5 sans-serif;text-shadow:0 2px #000}
.fatigue-message[hidden]{display:none}
.fatigue-caption{position:absolute;bottom:3%;left:8%;right:8%;padding:5px;background:#241a33ed;color:#ffc1cf;text-align:center;border-radius:6px;font:800 clamp(9px,1.2vw,14px) sans-serif}
.fatigue-meter{position:absolute;bottom:1%;left:8%;width:84%;height:5px;border-radius:4px;background:#ffb3c3;transform-origin:left}
.packing-fatigue.restored{box-shadow:inset 0 0 35px #77ffc844;background:none;border-color:#aaffce}.packing-fatigue.restored .fatigue-message,.packing-fatigue.restored .fatigue-caption{background:#123e35ee;color:#caffdf;border-color:#9affca}
.crew-fatigued .mylar-shell{filter:saturate(.72)}
.crew-fatigued #board-needs .board-hunger{flex-basis:100%;font-weight:800;min-height:40px;background:#702941;border:2px solid #ffadbd;color:white}
@media(max-width:599px){.fatigue-message{top:24%;padding:6px;font-size:12px}.fatigue-caption{font-size:9px;bottom:1%;padding:3px}.crew-fatigued #board-needs .board-hunger{min-height:30px;padding:3px;font-size:10px}}
/* v112: insects fly through screen space; no tile/button decoration. */
.market-incident.bees,.market-incident.wasps{overflow:visible;background:transparent;border-color:transparent}
.market-bug.flying-insect,.market-bug.flying-insect.wasp{position:fixed;z-index:80;width:108px;height:100px;min-height:0;padding:0;margin:0;background:none!important;border:0!important;border-radius:0;box-shadow:none!important;transform:translate(-50%,-50%);animation:none;overflow:visible;touch-action:none}
.market-bug.flying-insect:focus-visible{outline:2px dashed #fff2a8;outline-offset:5px;border-radius:50%}
.insect-art{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(3px 9px 3px #0008);pointer-events:none}
.insect-hover{transform-origin:58px 50px;animation:insect-hover 1.7s ease-in-out infinite alternate}
.insect-wings{transform-origin:58px 48px;animation:insect-wings .075s linear infinite alternate}
@keyframes insect-wings{from{transform:scaleX(.74) scaleY(.9)}to{transform:scaleX(1.14) scaleY(1.03)}}
@keyframes insect-hover{0%{transform:translate(-7px,-5px) rotate(-12deg)}50%{transform:translate(7px,4px) rotate(8deg)}100%{transform:translate(2px,-8px) rotate(-5deg)}}
.market-bug.flying-insect[data-arriving="true"]{animation:insect-enter 1.7s cubic-bezier(.22,.65,.35,1) var(--flight-delay,0s) both}
@keyframes insect-enter{0%{transform:translate(calc(-50% + var(--flight-x)),calc(-50% + var(--flight-y))) rotate(-40deg)}60%{transform:translate(-90%,-115%) rotate(20deg)}82%{transform:translate(-25%,-40%) rotate(-12deg)}100%{transform:translate(-50%,-50%) rotate(0)}}
.insect-departure{position:fixed;z-index:999;pointer-events:none;animation:insect-leave 1.25s cubic-bezier(.5,.05,.85,.5) forwards}
@keyframes insect-leave{0%{transform:translate(0,0) rotate(0)}30%{transform:translate(40px,-25px) rotate(30deg)}100%{transform:translate(var(--exit-x),var(--exit-y)) rotate(50deg)}}
.crew-fatigued .mylar-shell{filter:none}
.packing-fatigue{background:radial-gradient(ellipse at center,transparent 22%,rgba(6,8,22,.12) 52%,rgba(6,8,22,.57) 100%);box-shadow:inset 0 0 60px #05081688}
.packing-fatigue.exhausted{background:radial-gradient(ellipse at center,transparent 16%,rgba(6,8,22,.18) 48%,rgba(6,8,22,.72) 100%);box-shadow:inset 0 0 100px #0508169c}
#board{transition:filter .8s ease}
@media(max-width:599px){.market-bug.flying-insect,.market-bug.flying-insect.wasp{width:86px;height:80px}}
html.reduced-motion .insect-hover,html.reduced-motion .insect-wings{animation:none}
html.reduced-motion .market-bug.flying-insect[data-arriving="true"]{animation:none}
html.reduced-motion .insect-departure{animation:insect-fade .3s forwards}
@keyframes insect-fade{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.insect-hover,.insect-wings,.market-bug.flying-insect[data-arriving="true"]{animation:none}.insect-departure{animation:insect-fade .3s forwards}#board{transition:none}}
.multi-clear-reward[hidden]{display:none!important}
.multi-clear-reward{position:absolute;z-index:45;left:8%;right:8%;top:25%;pointer-events:none;text-align:center;padding:14px 10px;background:linear-gradient(135deg,#234851f5,#24324cf5);border:3px solid #baf5f7;border-radius:16px;box-shadow:0 8px 24px #0006;color:white;animation:clear-reward-in .35s ease-out}
.multi-clear-reward strong,.multi-clear-reward b,.multi-clear-reward small{display:block}.multi-clear-reward strong{font:900 clamp(18px,2.8vw,34px) sans-serif;letter-spacing:.025em}.multi-clear-reward b{font:800 clamp(16px,2vw,24px) sans-serif;margin:7px}.multi-clear-reward small{font:700 11px sans-serif}.reward-stars{display:block;letter-spacing:8px;color:#fff09b;margin-bottom:5px;font-size:22px}
.multi-clear-reward.tier-3{border-color:#ddbcff;background:linear-gradient(135deg,#49345af5,#25294bf5)}
.multi-clear-reward.tier-4,.multi-clear-reward.tier-5{border-color:#ffe494;border-width:4px;background:linear-gradient(135deg,#5a3820f5,#302746f5);box-shadow:0 0 35px #ffd26566,0 9px 24px #0007;color:#fff4cb}
.multi-clear-reward.tier-5{border-color:#fff0a6;background:linear-gradient(130deg,#623a34f5,#3e255df5);box-shadow:0 0 55px #ffcf7577,0 9px 24px #0007}
@keyframes clear-reward-in{from{transform:translateY(18px) scale(.85);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
html.reduced-motion .multi-clear-reward{animation:none}@media(prefers-reduced-motion:reduce){.multi-clear-reward{animation:none}}
@media(max-width:599px){.multi-clear-reward{top:20%;padding:8px}.multi-clear-reward strong{font-size:17px}.multi-clear-reward b{font-size:15px;margin:3px}.reward-stars{font-size:15px;margin:0}.multi-clear-reward small{font-size:9px}}

.happy-spill{position:fixed;width:100px;height:117px;pointer-events:none;z-index:1000;animation:happy-spill-run 1.4s ease-in forwards;filter:drop-shadow(0 0 8px #b5ff9880)}
@keyframes happy-spill-run{0%{transform:translate(0,0) rotate(-12deg)}25%{transform:translate(calc(var(--run-x)*.15),-45px) rotate(15deg)}50%{transform:translate(calc(var(--run-x)*.4),0) rotate(-12deg)}75%{transform:translate(calc(var(--run-x)*.7),-25px) rotate(12deg)}100%{transform:translate(var(--run-x),10px) rotate(0)}}
@media(prefers-reduced-motion:reduce){.happy-spill{display:none}}

/* Arcade spectacle is viewport-only: never resize or intercept the puzzle. */
.screen-comet{position:fixed;width:40px;height:56px;pointer-events:none;z-index:990;animation:screen-comet .85s cubic-bezier(.25,.5,.55,1) both;filter:drop-shadow(0 0 12px #ff721e)}
.screen-comet:before{content:'';position:absolute;width:120px;height:38px;right:15px;top:10px;background:linear-gradient(90deg,transparent,#ff3d19 45%,#ffc13a 78%,#fff9d3);clip-path:polygon(0 10%,45% 35%,10% 65%,60% 58%,35% 100%,100% 70%,100% 20%);transform:rotate(35deg);transform-origin:right center;z-index:-1}
.screen-comet.tier-5{width:54px;height:74px;filter:drop-shadow(0 0 20px #ff5d16)}.screen-comet canvas{width:100%;height:100%}
@keyframes screen-comet{0%{transform:translate(0,0) scale(.6) rotate(-30deg)}45%{transform:translate(calc(var(--dx)*.3),var(--arc)) scale(1.5) rotate(35deg)}100%{transform:translate(var(--dx),var(--dy)) scale(.8) rotate(100deg)}}
.happy-spill.epic-spill{animation:epic-customer-launch 1.25s ease-in forwards;transform-origin:center;filter:drop-shadow(0 0 12px #baff80)}
.happy-spill.epic-spill.tier-5{width:145px;height:170px}
@keyframes epic-customer-launch{0%{transform:translate(0,0) scale(.9) rotate(0)}25%{transform:translate(calc(var(--run-x)*.08),-100px) scale(1.9) rotate(130deg)}55%{transform:translate(calc(var(--run-x)*.35),-50px) scale(1.5) rotate(360deg)}100%{transform:translate(var(--run-x),60px) scale(.7) rotate(var(--spin))}}
.candy-impact{position:fixed;pointer-events:none;z-index:995;color:#fff4a0;font:900 clamp(18px,3vw,36px)/1 Booth,sans-serif;text-shadow:3px 3px #a82735,-2px -2px #70213a;animation:candy-impact .65s ease-out both;white-space:nowrap}
@keyframes candy-impact{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}35%{transform:translate(-50%,-60%) scale(1.2)}100%{transform:translate(-50%,-100%) scale(.9);opacity:0}}
@media(prefers-reduced-motion:reduce){.screen-comet,.candy-impact,.epic-spill{display:none}}

/* Condition controls float above the board; they never consume flex height. */
#board-wrap>#board-needs{position:absolute;left:3%;right:3%;bottom:3%;z-index:45;display:flex;flex-wrap:wrap;gap:4px;pointer-events:none;max-height:32%;overflow:auto;overscroll-behavior:contain}
#board-wrap>#board-needs button{pointer-events:auto;flex:1 1 45%;min-width:0;min-height:40px;padding:6px;box-shadow:0 3px 10px #0006;line-height:1.25}
#board-wrap>#board-needs .market-result{flex-basis:100%;pointer-events:none;padding:7px;box-shadow:0 3px 10px #0005}
@media(max-width:599px){#board-wrap>#board-needs button{font-size:10px;min-height:36px;padding:4px}#board-wrap>#board-needs .market-result{font-size:11px}}

/* Hunger tunnel vision: the grid never changes size; recovery controls stay above it. */
.packing-fatigue.hungry,.packing-fatigue.exhausted{background:radial-gradient(circle at 50% 48%,transparent 0%,transparent calc(30% - 10% * var(--fatigue,0)),rgba(4,6,17,.7) calc(42% - 10% * var(--fatigue,0)),rgba(4,6,17,.98) calc(55% - 12% * var(--fatigue,0)));box-shadow:inset 0 0 40px #030510;border-color:#e584a7}
.packing-fatigue .fatigue-caption{background:#4b1838f5;color:#fff;z-index:1}

/* One central message at a time; recovery uses the shared bottom status stack. */
.packing-fatigue.restored .fatigue-message,.packing-fatigue.restored .fatigue-caption{display:none!important}
#board-wrap:has(>#board-needs:not([hidden])) .fatigue-caption{display:none}
#board-wrap:has(>#market-incident:not([hidden])) .fatigue-message,
#board-wrap:has(>#market-incident:not([hidden])) .fatigue-caption,
#board-wrap:has(>#market-incident:not([hidden])) #multi-clear-reward,
#board-wrap:has(>#market-incident:not([hidden])) #board-callout{display:none!important}
#board-wrap:has(>#multi-clear-reward:not([hidden])) .fatigue-message,
#board-wrap:has(>#multi-clear-reward:not([hidden])) #board-callout{display:none!important}
#board-wrap:has(.fatigue-message:not([hidden])):has(>.packing-fatigue:not([hidden])) #board-callout{display:none!important}
#board-needs .market-result{line-height:1.3;overflow-wrap:anywhere}

/* Named visitors overlay the tent without resizing the play board. */
.arena-wrap{position:relative;}
#couple-arrival{position:absolute;left:5%;right:5%;bottom:32%;z-index:8;padding:8px 10px;border:2px solid #ffdf76;border-radius:12px;background:#17243bf5;color:#fff2b6;text-align:center;font:bold clamp(12px,1.6vw,20px) sans-serif;pointer-events:none;box-shadow:0 3px 10px #0005;}
#couple-arrival[hidden]{display:none;}


/* Reserved board-side dashboard stays the same size through every status change. */
#play-status{flex:0 0 78px;min-height:78px;box-sizing:border-box;border:1px solid #658594;border-radius:10px;background:#142d3e;color:#edf6ff;padding:5px 7px;font:700 11px/1.2 sans-serif;overflow:hidden;}
.play-stats{height:22px;display:flex;align-items:center;justify-content:space-between;gap:6px;white-space:nowrap;border-bottom:1px solid #ffffff25;}
#play-happy{color:#adffa3;}#play-stock{color:#ffe59b;}
#play-status[data-pressure="warning"]{border-color:#ffce68;}#play-status[data-pressure="danger"]{border-color:#ff7897;background:#412235;}
#play-status[data-pressure="warning"] #play-queue{color:#ffe088;}#play-status[data-pressure="danger"] #play-queue{color:#ffb5c4;}
.play-situation{height:44px;display:flex;gap:7px;align-items:center;}
#play-guests{width:70px;height:40px;flex:none;object-fit:contain;}
.play-situation-copy{flex:1;min-width:0;}.play-situation-copy b,.play-situation-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.play-situation-copy b{font-size:12px;color:#fff0b2;}.play-situation-copy small{font-size:10px;margin-top:3px;}
#play-feed{flex:none;min-height:40px;max-width:95px;border:1px solid #ff9aaa;background:#762c47;color:#fff;padding:4px 7px;border-radius:7px;font:700 11px sans-serif;}
#play-feed[hidden],#play-guests[hidden]{display:none;}
@media(min-width:850px){#play-status{font-size:12px;}.play-situation-copy b{font-size:13px;}.play-situation-copy small{font-size:11px;}}
@media(max-width:380px){#play-status{font-size:10px;padding-left:5px;padding-right:5px;}#play-guests{width:54px;}#play-feed{max-width:76px;font-size:10px;}}

.family-status .play-situation-copy b{font-size:10px;white-space:normal;line-height:11px;max-height:22px;}
.family-status #play-guests{width:90px;}

/* v128: narrow phones must never spend the board's height on the tent.
   Width-based sizing avoids the zero-height size-container/cqh feedback loop.
   Allow vertical scrolling for the tent; keep grid, dashboard and tray together. */
@media (max-width:599px) {
  #app {
    height:auto;
    min-height:var(--cp-vh,100svh);
    max-height:none;
    overflow:visible;
    padding-top:max(4px,env(safe-area-inset-top));
  }
  #app>header,#app.shade-swapped>header {order:0;}
  #app>.hud,#app.shade-swapped>.hud {order:1;}
  #app>.puzzle,#app.shade-swapped>.puzzle {order:2;flex:0 0 auto;min-width:0;}
  #app>.crew-zone,#app.shade-swapped>.crew-zone {order:3;flex:0 0 auto;}
  #board-wrap {
    flex:0 0 auto;
    container-type:normal;
    min-height:0;
    width:100%;
    height:auto;
    padding:4px 0 6px;
  }
  #board-wrap>.mylar-shell {
    width:100%;
    max-width:max(240px,calc(var(--cp-vh,100svh) - 260px));
    flex:0 0 auto;
  }
  #board {width:100%;height:auto;aspect-ratio:1 / 1;}
}

/* v132: a short, readable guide and a complete narrow-phone play surface. */
.quick-rules {padding-left:24px;text-align:left;margin:14px 0;}
.quick-rules li {margin:10px 0;line-height:1.35;font-size:16px;}
.guide-screen .guide-goal p {font-size:14px;margin:7px 0;}
@media(max-width:599px){
  #app>.crew-zone,#app.shade-swapped>.crew-zone{
    order:2;display:grid;grid-template-columns:minmax(0,1.8fr) minmax(100px,1fr);grid-template-rows:auto auto;gap:4px;
  }
  #app>.puzzle,#app.shade-swapped>.puzzle{order:3;}
  .crew-zone>.arena-wrap{grid-column:1;grid-row:1 / 3;min-width:0;}
  .crew-zone>#show-actions{grid-column:2;grid-row:1;display:flex;gap:3px;}
  .crew-zone>#workers{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr;gap:2px;height:auto;min-height:0;}
  .crew-zone .worker{height:32px;min-height:32px;padding:1px 3px;}
  .crew-zone .worker canvas{height:26px;width:18px;}
  .crew-zone .worker strong,.crew-zone .worker b{font-size:10px;line-height:1;}
  .crew-zone .meal{font-size:9px;min-height:28px;padding:2px;}
  .crew-zone #arena{height:116px;min-height:116px;}
  .crew-zone .arena-head{min-height:20px;padding:1px 3px;grid-template-columns:auto 1fr;}
  .crew-zone .arena-head #stock,.crew-zone #wave-approach,.crew-zone .happy-tally,.crew-zone #tent-unlock{display:none;}
  .crew-zone .arena-head .super-ready b{font-size:8px;line-height:16px;}
  .crew-zone .arena-head #rush{font-size:9px;}
  #play-status{flex-basis:54px;min-height:54px;padding:3px 5px;font-size:10px;}
  .play-stats{height:18px;}
  .play-situation{height:28px;gap:4px;}
  #play-guests{height:28px;width:48px;}
  .family-status #play-guests{width:60px;}
  .play-situation-copy b{font-size:10px;}
  .play-situation-copy small{font-size:9px;margin-top:1px;}
  #play-feed{min-height:26px;font-size:10px;}
  #board-wrap>.mylar-shell{max-width:max(208px,calc(var(--cp-vh,100svh) - 425px));}
  .bottom>span{display:block;font-size:10px;}
  .bottom button{font-size:10px;}
}

/* v133: use existing side gutters, with dashboard fallback when space is tight. */
.tent-rail{display:none;position:absolute;top:8px;bottom:8px;width:var(--tent-rail-width,0px);z-index:12;flex-direction:column;justify-content:center;gap:8px;pointer-events:none;overflow:hidden;}
#tent-rail-left{left:0}#tent-rail-right{right:0}
.has-tent-rails>.tent-rail{display:flex}
.tent-rail-card{box-sizing:border-box;width:100%;padding:7px 3px;border:1px solid #668e9d;border-radius:10px;background:#173547;color:#ecfbff;text-align:center;font:700 11px/1.2 sans-serif;overflow-wrap:anywhere;}
.tent-rail-card span,.tent-rail-card b,.tent-rail-card small{display:block}
.tent-rail-card span{font-size:20px;margin-bottom:4px}.tent-rail-card small{font-size:10px;margin-top:3px}
button.tent-rail-card{pointer-events:auto;min-height:60px;touch-action:manipulation;cursor:pointer}
.tent-rail-card[data-tone="danger"]{background:#642b43;border:2px solid #ff87a3;box-shadow:0 0 10px #ff61854d}
.tent-rail-card[data-tone="warning"]{border-color:#ffd76a;color:#ffe59a}
.tent-rail-card[data-tone="friend"]{border-color:#b796ff;color:#e9dfff}

/* v134: readable vertical words with a slow attention pulse. */
.tent-rail{align-items:center}
.vertical-tent-alert{width:44px;max-width:100%;height:100%;max-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px 3px;background:#142d3e99;border-color:transparent}
.vertical-tent-alert b{writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;font:900 clamp(11px,2.9vw,16px)/1.15 sans-serif;letter-spacing:.8px;text-shadow:0 2px 4px #0008}
#tent-rail-left .vertical-tent-alert b{transform:rotate(180deg)}
.vertical-tent-alert small{font-size:8px;line-height:1.2}
.vertical-tent-alert[data-tone="danger"],.vertical-tent-alert[data-tone="warning"],.vertical-tent-alert[data-tone="friend"]{animation:tent-word-pulse 1.8s ease-in-out infinite}
@keyframes tent-word-pulse{0%,100%{opacity:1;filter:brightness(1.15)}50%{opacity:.65;filter:brightness(.85)}}
@media(prefers-reduced-motion:reduce){.vertical-tent-alert{animation:none!important}}
html.reduced-motion .vertical-tent-alert{animation:none!important}

/* v137: permanent stock count next to the squares, above the right alert. */
#board-stock{display:none;position:absolute;right:0;top:8px;width:var(--tent-rail-width);height:68px;box-sizing:border-box;border:2px solid #90e6b0;border-radius:10px;background:#163e37;color:#bcffd1;z-index:13;text-align:center;padding:5px 2px;pointer-events:none;font:800 9px/1.2 sans-serif}
#board-stock strong{display:block;font-size:30px;line-height:34px;font-variant-numeric:tabular-nums}
#board-stock span{display:block}
#board-stock[data-supply="low"]{border-color:#ffdb78;background:#473a23;color:#ffe398}
#board-stock[data-supply="empty"]{border-color:#ff88a3;background:#52283b;color:#ffc1d0}
.has-tent-rails>#board-stock{display:block}
.has-tent-rails>#tent-rail-right{top:84px}
#tent-rail-right .vertical-tent-alert b{font-size:11px;letter-spacing:.3px}

/* v138: one tent dashboard, immediately above the board. */
#tent-rail-left,#tent-rail-right,#board-needs{display:none!important}
#play-status{position:relative;flex-basis:90px;min-height:90px;padding:5px 78px 5px 7px}
#play-status #board-stock{display:flex;flex-direction:column;justify-content:center;right:6px;top:6px;bottom:6px;width:64px;height:auto}
#play-stock{display:none}
#play-crew{height:17px;line-height:17px;font-size:10px;white-space:nowrap;overflow:hidden;color:#d7edee}
#play-status .play-stats{height:20px;font-size:10px;gap:4px}
#play-status .play-situation{height:40px;gap:4px}
#play-status #play-guests{width:44px;height:32px}
#play-status.urgent-status #play-guests{display:none}
#play-status .play-situation-copy b{font-size:10px}
#play-status .play-situation-copy small{font-size:9px;margin-top:2px}
#play-status #play-feed{font-size:10px;max-width:65px;min-height:32px;padding:3px}
@media(max-width:599px){
 #play-status{flex-basis:80px;min-height:80px;padding:3px 72px 3px 5px}
 #play-status #board-stock{width:60px;right:4px;top:4px;bottom:4px}
 #play-status .play-stats{height:18px;font-size:9px}
 #play-status .play-situation{height:35px}
 #play-crew{height:16px;line-height:16px;font-size:9px}
 #board-wrap>.mylar-shell{max-width:max(208px,calc(var(--cp-vh,100svh) - 451px))}
}
#play-status #play-queue{font-size:11px;font-weight:900;padding:2px 4px;border-radius:4px;background:#ffffff12;color:#fff0b2}
#play-status #play-happy{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* v139: tent art tells the story; the puzzle panel owns repeated status text. */
.crew-zone #wave,.crew-zone #rush,.crew-zone #stock,.crew-zone #wave-approach,
.crew-zone .happy-tally,.crew-zone #tent-unlock,.crew-zone #customer-reaction,
.crew-zone .crowd-bar,.crew-zone #couple-arrival,.crew-zone #secure-stock,
.crew-zone #show-actions{display:none!important}
.crew-zone .arena-head{display:flex;justify-content:center}
.crew-zone #super-ready{flex:1}
@media(max-width:599px){.crew-zone #workers{grid-row:1 / span 2}}

#dev-lab{flex:none;border:1px solid #c39cff;border-radius:8px;padding:5px;background:#302343;color:#f0ddff;font:11px/1.3 sans-serif}
#dev-lab[hidden]{display:none}#dev-lab>b,#dev-chain{display:block}#dev-lab>div{display:flex;gap:4px;margin:4px 0}#dev-lab button{flex:1;padding:5px 2px;font-size:11px;min-height:32px}#dev-lab a{color:#ffe58a;float:right}#dev-lab label{display:inline-flex;align-items:center;gap:3px}.dev-menu-link{display:block;text-align:center;margin-top:8px;padding:10px;color:#dfc6ff}

/* v142: actionable needs belong over the board; status stays in the dashboard. */
#play-status #play-feed{display:none!important}
#board-wrap>#board-needs:not([hidden]):has(button){display:flex!important;left:50%;right:auto;transform:translateX(-50%);width:min(90%,300px);bottom:7%;max-height:45%;justify-content:center}
#board-wrap>#board-needs[hidden],#board-wrap>#board-needs:not(:has(button)){display:none!important}
#board-wrap>#board-needs .market-result{display:none}
#board-wrap>#board-needs button,.crew-fatigued #board-wrap>#board-needs .board-hunger{flex:1 1 44%;min-height:44px;padding:8px 5px;border:2px solid #ffd3a6;border-radius:10px;background:#79334b;color:#fff;font:800 13px/1.2 sans-serif;box-shadow:0 4px 0 #25172a,0 0 12px #ffb27a66}
#board-wrap>#board-needs .board-weather{background:#27536c;border-color:#b0edff}

#dev-color-tools{align-items:center}#dev-storm{flex:1;font-weight:bold;color:#ffe28c}#dev-bomb{touch-action:none;border:2px solid #fff3;min-height:42px}#dev-bomb[aria-pressed="true"]{outline:2px solid white}#dev-lab>small{display:block;font-size:10px}.bomb-drag-ghost{position:fixed;z-index:10000;pointer-events:none;transform:translate(-50%,-50%);border-radius:50%;border:3px solid white;width:42px;height:42px;text-align:center;font:30px/42px sans-serif;color:#13213a;box-shadow:0 0 18px #fff8}

/* Developer-only fourth piece slot, within the existing tray height. */
#tray.has-bomb-slot{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(64px,.8fr)}
#tray>#dev-bomb{margin:0;min-width:0;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;touch-action:none;background:#243650;color:#ffe4a5;border:2px solid #e8cd87}
#tray>#dev-bomb[hidden]{display:none}#tray>#dev-bomb:disabled{opacity:.5}
#dev-bomb small{font-size:10px;line-height:1.1}.bomb-piece-icon{position:relative;font:bold 38px/38px sans-serif;color:#17243c;text-shadow:1px 2px #fff8}.bomb-piece-icon:before{content:'';position:absolute;width:10px;height:10px;border-top:3px solid #fff4a8;border-right:3px solid #fff4a8;right:3px;top:0;transform:rotate(-20deg)}.bomb-piece-icon i{position:absolute;left:10px;top:10px;color:white;font:18px/20px sans-serif}.bomb-empty{font-size:25px}

#board-needs button.board-weather{display:flex;flex-direction:column;gap:5px;align-items:center;padding:12px 10px;background:#ffe191;color:#14233e;border:3px solid #fff5cc;box-shadow:0 0 18px #ffc34c99;min-height:70px;white-space:normal}
#board-needs button.board-weather strong{font-size:15px;line-height:1.15}#board-needs button.board-weather small{font:600 11px/1.25 sans-serif;color:#24324d}