:root {
  --ocean-deep: #062f3b;
  --ocean: #08778c;
  --ocean-bright: #12b8c4;
  --coral: #ef674f;
  --gold: #f5bc45;
  --gold-light: #ffe693;
  --parchment: #f8e6b6;
  --ink: #203640;
  --wood: #3b211a;
  --wood-light: #704026;
  --cream: #fff8dc;
  --shadow: rgba(5, 25, 30, 0.45);
  font-family: "Trebuchet MS", "Avenir Next", Avenir, system-ui, sans-serif;
  color: var(--cream);
  background: var(--ocean-deep);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ocean-deep);
  touch-action: manipulation;
}

button { font: inherit; }

button:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
}

.game-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 25% 15%, rgba(28, 190, 194, 0.28), transparent 30%),
    linear-gradient(155deg, #0b5261, var(--ocean-deep));
}

.game-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  box-shadow: inset 0 0 45px rgba(2, 15, 18, 0.56);
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
}

.screen.is-active { display: grid; }
.is-hidden { display: none !important; }

.eyebrow {
  margin: 0 0 0.35rem;
  font: 800 clamp(0.66rem, 1.2vw, 0.84rem)/1 "Arial Narrow", "Avenir Next Condensed", sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.button {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  padding: 0.78rem 1.5rem;
  color: #25180f;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease;
  box-shadow: 0 5px 0 #704018, 0 10px 22px var(--shadow);
}

.button:hover { filter: brightness(1.08); transform: translateY(-2px); }
.button:active { transform: translateY(3px); box-shadow: 0 2px 0 #704018, 0 5px 12px var(--shadow); }
.button-primary { background: linear-gradient(#ffe985, #f5b637); }
.button-secondary { background: linear-gradient(#fff9df, #eacb92); }

.icon-button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 2px solid rgba(255, 230, 147, 0.8);
  border-radius: 50%;
  color: var(--cream);
  background: linear-gradient(#71442a, #341c17);
  box-shadow: 0 4px 10px var(--shadow);
  font-size: 1.35rem;
  font-weight: 900;
  cursor: pointer;
}

.sound-toggle {
  position: absolute;
  right: max(0.85rem, env(safe-area-inset-right));
  bottom: max(0.85rem, env(safe-area-inset-bottom));
  z-index: 12;
}

.sound-toggle[aria-pressed="false"]::after {
  content: "";
  position: absolute;
  width: 70%;
  height: 3px;
  background: var(--coral);
  transform: rotate(-45deg);
  border-radius: 2px;
}

/* Title */
.title-screen {
  grid-template-columns: minmax(300px, 1fr) minmax(260px, 0.78fr);
  align-items: center;
  padding: clamp(1.5rem, 5vw, 5rem);
}

.title-art,
.title-vignette {
  position: absolute;
  inset: 0;
}

.title-art {
  z-index: -2;
  background: url("assets/treasure-island-map.webp") center 58% / cover no-repeat;
  transform: scale(1.04);
  animation: map-drift 16s ease-in-out infinite alternate;
}

.title-vignette {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 20, 24, 0.94) 0%, rgba(3, 26, 30, 0.75) 45%, rgba(3, 26, 30, 0.1) 78%),
    linear-gradient(0deg, rgba(1, 14, 18, 0.72), transparent 45%);
}

@keyframes map-drift { to { transform: scale(1.09) translate3d(-0.8%, -0.6%, 0); } }

.title-copy { position: relative; z-index: 2; max-width: 690px; }
.title-copy .eyebrow { color: var(--gold-light); }

.title-copy h1 {
  margin: 0;
  color: #fff8dc;
  text-wrap: balance;
  text-shadow: 0 4px 0 #402119, 0 9px 20px rgba(0, 0, 0, 0.5);
}

.title-copy h1 span,
.title-copy h1 strong { display: block; }

.title-copy h1 span {
  font: 900 clamp(2.45rem, 6vw, 5.7rem)/0.86 Georgia, "Times New Roman", serif;
  letter-spacing: -0.045em;
}

.title-copy h1 strong {
  margin-top: 0.45rem;
  color: var(--gold);
  font-size: clamp(1.05rem, 2.6vw, 2.2rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.title-lede {
  max-width: 590px;
  margin: 1.25rem 0;
  color: #fffbe9;
  font-size: clamp(0.95rem, 1.55vw, 1.22rem);
  line-height: 1.45;
  text-shadow: 0 2px 6px #06212a;
}

.title-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.control-note { margin: 1rem 0 0; color: #d8f4ef; font-size: 0.85rem; }

.captain {
  /* The 1536×1024 atlas is four columns by two rows: every cell is 384×512. */
  aspect-ratio: 3 / 4;
  background-image: url("assets/pirate-parrot-sprite-sheet.png");
  background-repeat: no-repeat;
  /* A centered 4% overscan removes cell-edge fragments without cropping the pose. */
  background-size: 416% 208%;
  filter: drop-shadow(0 12px 14px rgba(1, 15, 19, 0.48));
}

.pose-idle { background-position: 0.633% 1.852%; }
.pose-point { background-position: 33.544% 1.852%; }
.pose-cheer { background-position: 66.456% 1.852%; }
.pose-surprise { background-position: 99.367% 1.852%; }
.pose-map { background-position: 0.633% 98.148%; }
.pose-spyglass { background-position: 33.544% 98.148%; }
.pose-treasure { background-position: 66.456% 98.148%; }
.pose-victory { background-position: 99.367% 98.148%; }

.captain-title {
  justify-self: end;
  align-self: center;
  width: min(30vw, 370px);
}

/* Map */
.map-screen { place-items: center; }
.map-image { position: absolute; inset: 0; background: url("assets/treasure-island-map.webp") center / cover no-repeat; }
.map-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 35, 40, 0.72), transparent 30%); }

.wood-panel {
  border: 2px solid #b67837;
  color: var(--cream);
  background:
    linear-gradient(90deg, transparent, rgba(255, 219, 139, 0.09), transparent),
    linear-gradient(#704126, #321b17);
  box-shadow: inset 0 0 0 2px rgba(39, 19, 12, 0.6), 0 8px 22px var(--shadow);
}

.map-header {
  position: absolute;
  z-index: 3;
  top: max(0.75rem, env(safe-area-inset-top));
  left: 50%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  width: min(95%, 760px);
  min-height: 70px;
  padding: 0.55rem 0.75rem;
  border-radius: 22px;
  transform: translateX(-50%);
}

.map-header h2 { margin: 0; font: 900 clamp(1.05rem, 2vw, 1.45rem)/1.05 Georgia, serif; }
.map-header .eyebrow { color: var(--gold-light); }
.map-total { display: grid; grid-template-columns: auto auto auto; align-items: baseline; gap: 0.18rem; }
.map-total span { color: var(--gold); font-size: 1.25rem; }
.map-total strong { font-size: 1.35rem; }
.map-total small { color: #edd8a5; }

.level-path { position: absolute; inset: 0; z-index: 2; }
.level-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(58px, 8vw, 84px);
  aspect-ratio: 1;
  border: 4px solid #ffdf7d;
  border-radius: 50%;
  color: #2c1b12;
  background: linear-gradient(145deg, #fff2a9, #ef9f27);
  box-shadow: 0 5px 0 #784016, 0 10px 20px var(--shadow), 0 0 0 6px rgba(255,255,255,0.18);
  cursor: pointer;
}

.level-node:hover:not(:disabled) { transform: translateY(-4px) rotate(-2deg); }
.level-node:disabled { filter: grayscale(0.75) brightness(0.7); cursor: not-allowed; }
.level-node .node-number { font-size: clamp(1.15rem, 2.5vw, 1.7rem); font-weight: 1000; }
.level-node .node-stars { position: absolute; top: -20px; color: var(--gold-light); font-size: clamp(0.75rem, 1.6vw, 1.02rem); letter-spacing: -0.1em; text-shadow: 0 2px 2px #392112; }
.level-node .node-label { position: absolute; top: calc(100% + 9px); width: 140px; color: white; font-size: clamp(0.68rem, 1.4vw, 0.88rem); font-weight: 900; text-shadow: 0 2px 5px #06242a, 0 2px 0 #06242a; }
.level-node:nth-child(1) { left: 19%; bottom: 17%; }
.level-node:nth-child(2) { left: 43%; bottom: 29%; }
.level-node:nth-child(3) { left: 28%; top: 34%; }
.level-node:nth-child(4) { right: 29%; top: 28%; }
.level-node:nth-child(5) { right: 15%; top: 15%; }

.captain-map { position: absolute; z-index: 2; right: 2%; bottom: -7%; width: min(23vw, 270px); }
.map-message { position: absolute; z-index: 3; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); max-width: min(44%, 460px); margin: 0; padding: 0.8rem 1.15rem; border-radius: 16px; font-weight: 800; }

/* Play */
.play-screen {
  grid-template-columns: minmax(235px, 0.42fr) minmax(390px, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  padding: max(0.55rem, env(safe-area-inset-top)) max(0.65rem, env(safe-area-inset-right)) max(0.55rem, env(safe-area-inset-bottom)) max(0.65rem, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 70% 40%, rgba(20, 184, 196, 0.22), transparent 30%),
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,0.018) 39px 40px),
    linear-gradient(155deg, #0b5b68, #052b36);
}

.play-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 60px;
  padding: 0.45rem 0.65rem;
  border-radius: 18px;
}

.level-heading span { color: var(--gold-light); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.level-heading h2 { margin: 0; font: 900 clamp(1.05rem, 2vw, 1.42rem)/1 Georgia, serif; }
.header-actions { display: flex; gap: 0.45rem; }

.parchment-panel {
  color: var(--ink);
  background:
    linear-gradient(rgba(255,255,255,0.1), rgba(130,78,31,0.04)),
    var(--parchment);
  border: 3px solid #a8662c;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.42), 0 9px 24px var(--shadow);
}

.quest-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  padding: clamp(0.7rem, 1.5vw, 1.1rem);
  overflow: hidden;
  border-radius: 24px 10px 24px 10px;
}

.captain-play { position: absolute; top: 1%; left: 50%; width: min(78%, 290px); opacity: 0.98; transform: translateX(-50%); }
.quest-copy { position: relative; z-index: 1; padding: 0.65rem; border-radius: 16px; background: rgba(255, 248, 220, 0.86); backdrop-filter: blur(4px); }
.quest-copy .eyebrow { color: #8c3d28; }
.quest-copy h3 { margin: 0; font: 900 clamp(1rem, 1.8vw, 1.3rem)/1.1 Georgia, serif; }
.quest-copy > p:not(.eyebrow) { margin: 0.35rem 0 0; font-weight: 900; }
.progress-track { height: 10px; margin-top: 0.55rem; overflow: hidden; border-radius: 99px; background: rgba(50, 36, 24, 0.18); }
.progress-track span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--gold)); transition: width 250ms ease; }

.stats-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin: 0.55rem 0 0; }
.stats-row div { padding: 0.42rem 0.25rem; border-radius: 12px; text-align: center; background: #fff9e6; }
.stats-row dt { color: #77533b; font: 800 0.62rem/1 "Arial Narrow", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.stats-row dd { margin: 0.18rem 0 0; font-size: clamp(0.86rem, 1.7vw, 1.18rem); font-weight: 1000; }
.captain-tip { position: relative; z-index: 1; margin: 0.55rem 0 0; color: #5a3b28; font: italic 700 0.75rem/1.3 Georgia, serif; }

.board-wrap { position: relative; display: grid; place-items: center; min-height: 0; }
.rope-frame {
  width: min(100%, calc(100vh - 160px));
  max-height: 100%;
  aspect-ratio: 1;
  padding: clamp(8px, 1.2vw, 14px);
  border: clamp(7px, 1.2vw, 13px) ridge #c98b42;
  border-radius: clamp(18px, 3vw, 32px);
  background: #311f19;
  box-shadow: 0 16px 30px rgba(0,0,0,0.42), inset 0 0 0 3px #24130f;
}

.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(2px, 0.48vw, 6px);
  width: 100%;
  height: 100%;
  padding: clamp(4px, 0.65vw, 8px);
  border-radius: clamp(9px, 1.5vw, 16px);
  background:
    radial-gradient(circle at 35% 20%, rgba(44, 197, 203, 0.2), transparent 25%),
    linear-gradient(145deg, #082f3b, #041c27);
}

.gem {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 18%;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,0.11), rgba(0,0,0,0.16));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform 160ms ease, filter 160ms ease, background 160ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.gem::before,
.gem-preview,
.power-icon,
.treasure-sprite {
  background-image: url("assets/gems-treasure-sprite-sheet.png");
  background-repeat: no-repeat;
  /* Scale both atlas axes by the same 1.12 factor to prevent neighboring-cell bleed. */
  background-size: 448% 336%;
}

.gem::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 8%);
  filter: drop-shadow(0 4px 3px rgba(0,0,0,0.34));
  pointer-events: none;
}
.gem:hover { background: rgba(255,255,255,0.11); transform: scale(1.04); }
.gem.selected { z-index: 2; background: rgba(255, 231, 128, 0.22); box-shadow: inset 0 0 0 4px #fff2a0, 0 0 16px #ffd74a; transform: scale(1.08); }
.gem.hint { animation: hint-pulse 650ms ease-in-out 3; }
.gem.matched { animation: gem-pop 320ms ease forwards; }
.gem.invalid { animation: gem-shake 260ms ease; }
.gem.is-new { animation: gem-drop 260ms ease-out; }
.gem-ruby::before, .gem-preview.gem-ruby { background-position: 0% 0%; }
.gem-sapphire::before, .gem-preview.gem-sapphire { background-position: 33.333% 0%; }
.gem-emerald::before, .gem-preview.gem-emerald { background-position: 66.666% 0%; }
.gem-amethyst::before, .gem-preview.gem-amethyst { background-position: 100% 0%; }
.gem-sunstone::before, .gem-preview.gem-sunstone { background-position: 0% 50%; }
.gem-aquamarine::before, .gem-preview.gem-aquamarine { background-position: 33.333% 50%; }

@keyframes hint-pulse { 50% { transform: scale(1.12); filter: brightness(1.35); box-shadow: 0 0 20px #fff2a0; } }
@keyframes gem-pop { to { opacity: 0; transform: scale(1.5) rotate(12deg); filter: brightness(1.8); } }
@keyframes gem-shake { 25% { transform: translateX(-8%); } 75% { transform: translateX(8%); } }
@keyframes gem-drop { from { opacity: 0; transform: translateY(-80%); } }

.combo-burst { position: absolute; z-index: 5; pointer-events: none; color: var(--gold-light); font: 1000 clamp(1.6rem, 5vw, 3.5rem)/1 Georgia, serif; text-shadow: 0 4px 0 #6f321c, 0 0 20px #f3a82e; opacity: 0; }
.combo-burst.show { animation: combo-up 800ms ease-out; }
@keyframes combo-up { 0% { opacity: 0; transform: translateY(30px) scale(0.65); } 30% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-55px) scale(1); } }

.power-bar {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: 0.45rem;
  border-radius: 18px;
}

.power-button { position: relative; display: flex; align-items: center; gap: 0.5rem; min-height: 46px; border: 0; border-radius: 14px; padding: 0.35rem 0.75rem 0.35rem 0.4rem; color: #fff9df; background: rgba(255,255,255,0.08); cursor: pointer; font-size: 0.78rem; font-weight: 900; }
.power-button:disabled { opacity: 0.45; cursor: not-allowed; }
.power-button small { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #28190f; background: var(--gold); font-weight: 1000; }
.power-icon { width: 36px; height: 36px; flex: 0 0 36px; }
.compass-icon { background-position: 0% 100%; }
.map-icon { background-position: 33.333% 100%; }

/* Dialogs */
.modal { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1rem; background: rgba(3, 24, 30, 0.78); backdrop-filter: blur(7px); }
.modal[hidden] { display: none; }
.modal-card { width: min(92%, 450px); padding: clamp(1.1rem, 3vw, 2rem); border-radius: 30px 10px 30px 10px; text-align: center; }
.modal-card .eyebrow { color: #8b472c; }
.modal-card h2 { margin: 0; font: 900 clamp(1.55rem, 4vw, 2.35rem)/1 Georgia, serif; }
.modal-card p:not(.eyebrow) { line-height: 1.4; }
.treasure-sprite { width: 130px; height: 100px; margin: -65px auto 0; filter: drop-shadow(0 7px 8px rgba(48,25,12,0.35)); }
.chest-open { background-position: 100% 100%; }
.modal-stars { margin: 0.65rem 0 0; color: var(--gold); font-size: 2rem; letter-spacing: 0.08em; text-shadow: 0 2px 0 #8c5721; }
.modal-score { margin: 0.75rem 0; padding: 0.55rem; border-radius: 12px; color: #5d3b26; background: rgba(139, 82, 31, 0.1); font-weight: 900; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 1rem; }
.tutorial-gems { display: flex; justify-content: center; margin: -3.2rem 0 0.7rem; }
.gem-preview { display: block; width: 78px; aspect-ratio: 1; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3)); animation: preview-bob 1s ease-in-out infinite alternate; }
.gem-preview:nth-child(2) { animation-delay: 120ms; }
.gem-preview:nth-child(3) { animation-delay: 240ms; }
@keyframes preview-bob { to { transform: translateY(-8px); } }

.toast { position: absolute; z-index: 40; left: 50%; bottom: 1rem; max-width: calc(100% - 2rem); padding: 0.7rem 1rem; border-radius: 999px; color: #fff8dd; background: rgba(42, 25, 18, 0.94); box-shadow: 0 6px 18px var(--shadow); font-weight: 900; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px), (orientation: portrait) {
  .game-shell { min-height: 480px; }
  .title-screen { grid-template-columns: 1fr; align-content: end; padding: 1.2rem 1.1rem max(1.5rem, env(safe-area-inset-bottom)); }
  .title-vignette { background: linear-gradient(0deg, rgba(2,18,22,0.97) 0%, rgba(2,18,22,0.7) 48%, rgba(2,18,22,0.05) 80%); }
  .title-copy { width: 100%; }
  .title-copy h1 span { font-size: clamp(2.1rem, 10vw, 3.6rem); }
  .title-copy h1 strong { font-size: clamp(0.85rem, 4vw, 1.35rem); }
  .title-lede { margin: 0.8rem 0; font-size: 0.92rem; }
  .title-actions { padding-right: 3.2rem; }
  .captain-title { position: absolute; top: 2%; right: 1%; width: min(58vw, 300px); }

  .map-header { width: calc(100% - 1rem); }
  .map-header .eyebrow { display: none; }
  .map-header h2 { font-size: 1rem; }
  .map-image { background-position: center; }
  .level-node:nth-child(1) { left: 16%; bottom: 18%; }
  .level-node:nth-child(2) { left: 51%; bottom: 31%; }
  .level-node:nth-child(3) { left: 22%; top: 43%; }
  .level-node:nth-child(4) { right: 23%; top: 30%; }
  .level-node:nth-child(5) { right: 10%; top: 16%; }
  .captain-map { right: -2%; bottom: -3%; width: min(42vw, 230px); }
  .map-message { max-width: 67%; font-size: 0.76rem; }

  .play-screen {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 0.38rem;
    padding: max(0.4rem, env(safe-area-inset-top)) 0.4rem max(0.4rem, env(safe-area-inset-bottom));
  }
  .play-header { min-height: 52px; padding: 0.25rem 0.45rem; border-radius: 13px; }
  .play-header .icon-button { min-width: 39px; min-height: 39px; }
  .quest-panel { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; padding: 0.48rem 0.6rem; border-radius: 15px 6px 15px 6px; }
  .captain-play, .captain-tip { display: none; }
  .quest-copy { padding: 0.3rem 0.45rem; }
  .quest-copy h3 { font-size: 0.84rem; }
  .quest-copy .eyebrow { font-size: 0.56rem; }
  .quest-copy > p:not(.eyebrow) { font-size: 0.7rem; }
  .progress-track { height: 7px; margin-top: 0.3rem; }
  .stats-row { width: min(42vw, 210px); margin: 0; }
  .stats-row div { align-content: center; padding: 0.3rem 0.16rem; }
  .stats-row dd { font-size: 0.83rem; }
  .board-wrap { min-height: 0; }
  .rope-frame { width: min(100%, calc(100vh - 210px)); }
  .power-bar { grid-column: 1; gap: 0.35rem; padding: 0.3rem; border-radius: 13px; }
  .power-button { min-height: 42px; padding: 0.25rem 0.45rem 0.25rem 0.25rem; font-size: 0.68rem; }
  .power-icon { width: 31px; height: 31px; flex-basis: 31px; }
}

@media (max-height: 620px) and (orientation: landscape) {
  .play-screen { grid-template-columns: minmax(205px, 0.36fr) minmax(360px, 1fr); gap: 0.4rem; padding: 0.35rem; }
  .play-header { min-height: 48px; }
  .captain-play { top: -4%; width: min(72%, 230px); }
  .quest-copy { padding: 0.45rem; }
  .captain-tip { display: none; }
  .power-bar { position: absolute; z-index: 5; left: 0.6rem; bottom: 0.6rem; grid-column: auto; width: calc(36% - 0.9rem); }
  .power-button span:not(.power-icon) { display: none; }
  .rope-frame { width: min(100%, calc(100vh - 66px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}