@font-face {
  font-family: 'Press Start 2P';
  src: url('assets/fonts/press-start-2p-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: ui-monospace, 'Courier New', monospace;
  font-synthesis: none;
  --game-button-font: 'Press Start 2P', ui-monospace, monospace;
  --game-button-size: clamp(12px, 1.35vw, 16px);
  --game-button-line: 1.5;
  --menu-edge-gap: max(40px, calc(env(safe-area-inset-right) + 16px));
}
/* Allow menu scrolling, but exclude pinch and double-tap zoom on every surface.
   Specific drag controls retain their own touch-action rules below. */
* { box-sizing: border-box; touch-action: pan-x pan-y; }
/* Nada del juego se puede seleccionar ni «subrayar» con el dedo (al mantener pulsado o arrastrar
   se quedaba la selección azul y la pantalla se atascaba). Los campos de formulario sí. */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
img, canvas { -webkit-user-drag: none; user-drag: none; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
body { margin: 0; min-width: 320px; color: #f6efd4; background: #071b3d; }
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid #ffe68b; outline-offset: 4px; }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
.app-shell { min-height: 100vh; min-height: 100dvh; background: repeating-linear-gradient(0deg, #12375a 0 3px, #102f51 3px 6px); }
.topbar { height: 76px; max-width: 1230px; margin: auto; padding: 0 25px; display: flex; align-items: center; gap: 14px; border-bottom: 4px solid #042041; background: #0b2e53; box-shadow: 0 4px #316c85; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; flex: none; padding: 0; border: 4px solid #acf4e2; color: #f4ffff; background: #2c91ac; box-shadow: inset 3px 3px #ddfff0, inset -4px -4px #166079, 4px 4px #061b35; font-size: 34px; line-height: 1; }
.brand-mark img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.brand-mark:hover { background: #42a8b6; }
.brand-text { display: flex; flex-direction: column; gap: 6px; }
.brand-text strong { font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 12px; line-height: 1.3; color: #ffe69a; text-shadow: 3px 3px #8e4e69; }
.brand-text span { font-size: 10px; color: #a8d9d7; font-weight: 700; }
.icon-button { margin-left: auto; width: 38px; height: 38px; border: 3px solid #9ce8d8; background: #246c86; color: #fff3b4; box-shadow: inset -3px -3px #124966, 3px 3px #061b35; font-weight: 900; font-size: 19px; }
.icon-button:hover { background: #348da0; }
.topbar .icon-button:not(#sound-button) { margin-left: 0; }
main { max-width: 1230px; margin: auto; padding: 21px 25px 19px; }
.intro { text-align: center; padding: 10px 0 22px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #a5eed3; letter-spacing: .15em; font-size: 10px; font-weight: 900; }
.eyebrow-dot { width: 8px; height: 8px; background: #ffdf87; box-shadow: 3px 3px #a86d68; }
h1 { font-family: 'Press Start 2P', ui-monospace, monospace; font-size: clamp(18px, 3vw, 30px); line-height: 1.5; margin: 11px 0 6px; color: #fff4c8; text-shadow: 3px 3px #356f86, 6px 6px #0d335a; }
.intro p { color: #b4e4df; font-size: 13px; font-weight: 700; }
.game-frame { border: 5px solid #e7c883; background: #113e66; box-shadow: 0 0 0 5px #1a5a79, 0 0 0 9px #082744, 11px 15px #03152f; }
.hud { min-height: 75px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; position: relative; z-index: 7; border-bottom: 4px solid #0b3358; background: repeating-linear-gradient(0deg, #28728b 0 4px, #256b85 4px 8px); }
.hud-item { display: flex; align-items: center; justify-content: center; min-width: 0; gap: 12px; padding: 9px 8px; }
.hud-item + .hud-item { border-left: 3px solid #104363; }
.hud-icon { flex: none; width: 35px; height: 35px; display: grid; place-items: center; border: 3px solid #89d7d3; color: #fff2bd; background: #15536e; font-size: 24px; line-height: 1; box-shadow: 3px 3px #0c3b5e; }
.hud-item small, .hud-item strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-item small { color: #c0e5dc; font-size: 10px; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.hud-item strong { font-family: 'Press Start 2P', ui-monospace, monospace; color: #fff2bf; font-size: 14px; line-height: 1.3; }
.sea { position: relative; isolation: isolate; overflow: hidden; height: min(62vh, 650px); min-height: 455px; background: #0a4575 url('assets/seascape.svg') center bottom / cover no-repeat; image-rendering: pixelated; }
.surface { position: absolute; top: 0; left: 0; right: 0; height: 18px; border-bottom: 2px solid #73d0d0; opacity: .48; background: repeating-linear-gradient(90deg, #adf7e2 0 19px, transparent 19px 63px, #82dbd5 63px 82px, transparent 82px 143px); animation: pixel-tide 8s steps(8) infinite alternate; pointer-events: none; }
.light-beams { position: absolute; inset: 0; background: repeating-linear-gradient(108deg, transparent 0 110px, #8be0cf12 110px 144px, transparent 144px 230px); animation: beam-drift 10s steps(12) infinite alternate; pointer-events: none; }
.caustics { position: absolute; inset: 0; opacity: .25; background: repeating-linear-gradient(0deg, transparent 0 61px, #9de7dd35 61px 65px, transparent 65px 145px); animation: caustic-drift 14s steps(14) infinite; pointer-events: none; }
.deep-haze { position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, #06295131); pointer-events: none; }
.ambient { position: absolute; bottom: -20px; left: 8%; width: 7px; height: 7px; border: 2px solid #baf6e8; opacity: .5; box-shadow: 37px -110px 0 -1px #baf6e8, 118px 44px 0 0 #70cecd, 243px -40px 0 -1px #baf6e8, 329px 77px 0 1px #70cecd, 490px -79px 0 -1px #baf6e8, 615px 24px 0 0 #70cecd; animation: ambient-rise 15s linear infinite; pointer-events: none; }
.ambient-two { left: 37%; animation-delay: -6s; animation-duration: 20s; }
.ambient-three { left: 66%; animation-delay: -11s; animation-duration: 17s; }
.seafloor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.seafloor::before { content: ''; position: absolute; left: 0; right: 0; top: 87.5%; height: 4px; border-top: 2px solid #d6c997; background: repeating-linear-gradient(90deg, #648994 0 44px, #4a7184 44px 77px); box-shadow: 0 3px #255273; opacity: .82; }
.seafloor span { display: none; }
@media (max-aspect-ratio: 6/5), (min-height: 561px) {
  /* Every two-row layout needs sand under both rows, including landscape tablets. */
  .seafloor::before { top: 78%; z-index: 2; }
  .seafloor::after {
    content: ''; position: absolute; left: 0; right: 0; top: 78.3%; bottom: 0;
    background:
      repeating-linear-gradient(90deg, transparent 0 31px, #f3dba9 31px 36px, transparent 36px 83px) 0 7px / 100% 3px no-repeat,
      repeating-linear-gradient(90deg, #d4bb85 0 43px, #bda375 43px 92px) 0 0 / 100% 31% no-repeat,
      linear-gradient(180deg, #bda375 0 42%, #aa8f6c 42% 68%, #998368 68% 100%);
    box-shadow: inset 0 -4px #355971;
  }
}
.play-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bubble-layer { z-index: 3; }
.bubble { position: absolute; width: 68px; height: 68px; padding: 0; transform: translate(-50%, -50%); border: 0; pointer-events: auto; touch-action: manipulation; background: #87e6dd; clip-path: polygon(31% 0, 69% 0, 69% 5%, 81% 5%, 81% 13%, 91% 13%, 91% 25%, 97% 25%, 97% 38%, 100% 38%, 100% 62%, 97% 62%, 97% 75%, 91% 75%, 91% 87%, 81% 87%, 81% 95%, 69% 95%, 69% 100%, 31% 100%, 31% 95%, 19% 95%, 19% 87%, 9% 87%, 9% 75%, 3% 75%, 3% 62%, 0 62%, 0 38%, 3% 38%, 3% 25%, 9% 25%, 9% 13%, 19% 13%, 19% 5%, 31% 5%); animation: bubble-drift 1.9s steps(4) infinite alternate; }
.bubble::before { content: ''; position: absolute; inset: 5px; background: #347fa4; clip-path: inherit; box-shadow: inset 5px 5px #d9fff0, inset -5px -5px #0c547e; }
.bubble::after { content: ''; position: absolute; left: 15px; top: 13px; width: 16px; height: 8px; background: #eaffdf; box-shadow: 24px 29px 0 -2px #8ee9e0, 5px 5px 0 -2px #fff; }
.bubble:hover, .bubble:focus-visible { filter: brightness(1.25) drop-shadow(0 0 8px #fff4bb); }
.bubble-reserve { position: absolute; top: 14px; right: 14px; z-index: 6; max-width: 55%; padding: 8px 10px; border: 3px solid #9bddcf; background: #0b3c65ee; color: #fff4ce; box-shadow: 4px 4px #082c4e; font-size: 11px; font-weight: 800; }
.empty-sea { position: absolute; z-index: 6; top: 24%; left: 50%; width: max-content; max-width: 80%; transform: translateX(-50%); border: 3px solid #79b7b6; background: #08375dc9; padding: 9px 12px; text-align: center; font-size: 12px; pointer-events: none; }
.entity { position: absolute; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 79px; height: 79px; margin: -39px 0 0 -39px; padding: 0; border: 2px solid transparent; background: transparent; color: #fff8db; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.entity::after { content: ''; position: absolute; inset: 4px; opacity: 0; pointer-events: none; --corner-color: #a8f1d1; background: linear-gradient(var(--corner-color) 0 0) left top / 9px 3px no-repeat, linear-gradient(var(--corner-color) 0 0) left top / 3px 9px no-repeat, linear-gradient(var(--corner-color) 0 0) right top / 9px 3px no-repeat, linear-gradient(var(--corner-color) 0 0) right top / 3px 9px no-repeat, linear-gradient(var(--corner-color) 0 0) left bottom / 9px 3px no-repeat, linear-gradient(var(--corner-color) 0 0) left bottom / 3px 9px no-repeat, linear-gradient(var(--corner-color) 0 0) right bottom / 9px 3px no-repeat, linear-gradient(var(--corner-color) 0 0) right bottom / 3px 9px no-repeat; }
.entity:hover::after, .entity:focus-visible::after { opacity: 1; }
.entity:active, .entity.dragging { z-index: 9; cursor: grabbing; }
.entity:active::after, .entity.dragging::after { opacity: 1; --corner-color: #ffe184; }
.entity.selected { border: 2px dashed #ffe184; background: #fff4a21c; }
.pixel-sprite { display: block; width: 64px; height: 64px; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
.entity.seed .pixel-sprite { width: 56px; height: 56px; }
.entity.plant { width: 48px; height: 54px; margin: -27px 0 0 -24px; cursor: pointer; }
.entity.plant .pixel-sprite { width: 48px; height: 48px; }
.entity.plant.falling { animation: plant-fall .65s steps(7) both; }
.entity.bigFish, .entity.dolphin, .entity.shark, .entity.whale { width: 91px; height: 91px; margin: -45px 0 0 -45px; }
.entity.bigFish .pixel-sprite, .entity.dolphin .pixel-sprite, .entity.shark .pixel-sprite, .entity.whale .pixel-sprite { width: 78px; height: 78px; }
.game-footer { position: relative; z-index: 7; display: flex; align-items: center; gap: 11px; min-height: 65px; padding: 10px 16px; border-top: 4px solid #0a3356; background: #286d85; }
.guide-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 3px solid #b2e8cd; color: #ffe39a; background: #144b69; font-size: 20px; }
.game-footer p { font-size: 12px; font-weight: 800; line-height: 1.35; color: #f1f6db; }
.merge-count { margin-left: auto; flex: none; color: #ffe49e; font-size: 11px; font-weight: 900; }
.lower-bar { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 22px 2px 4px; color: #a7d5ce; font-size: 11px; font-weight: 700; }
.lower-bar button { border: 2px solid #7bb8ae; padding: 7px 9px; background: #174769; color: #fff1bc; box-shadow: 3px 3px #081e3c; font-size: 10px; font-weight: 800; }
.lower-bar button:hover { background: #2b7388; }
.toast { position: fixed; z-index: 30; bottom: 22px; left: 50%; max-width: min(92vw, 510px); padding: 11px 15px; transform: translate(-50%, 15px); opacity: 0; pointer-events: none; border: 4px solid #ffe4a1; background: #154c6d; box-shadow: 5px 5px #071c3a; color: #fff9d9; font-size: 12px; font-weight: 800; text-align: center; transition: opacity .15s, transform .15s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.dialog { width: min(90vw, 490px); border: 5px solid #e9ca8f; padding: 30px; background: #174e72; color: #f9f0d6; box-shadow: 0 0 0 5px #285d78, 10px 11px #061b36; }
.dialog::backdrop { background: #061a3cc9; }
.dialog-close { position: absolute; top: max(9px, env(safe-area-inset-top)); right: 32px; border: 3px solid #98d7cb; background: #225e79; color: #fff0bd; width: 44px; height: 44px; line-height: 1; font-size: 24px; display: grid; place-items: center; padding: 0; touch-action: manipulation; }
.dialog-kicker { color: #a5edd1; font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 9px; line-height: 1.6; }
.dialog h2 { margin: 14px 0 18px; color: #fff0b3; font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 17px; line-height: 1.5; }
.dialog p, .dialog li { font-size: 13px; line-height: 1.55; font-weight: 700; }
.dialog ol { padding-left: 22px; }
.dialog li { margin: 9px 0; }
.pause-dialog { max-height: min(90dvh, 640px); overflow: auto; }
.pause-actions { display: grid; gap: 9px; margin-top: 18px; }
.pause-actions .primary-button, .pause-actions .option-row { width: 100%; margin: 0; text-align: left; }
.pause-actions .primary-button { text-align: center; }
.primary-button { margin-top: 17px; padding: 12px 15px; border: 3px solid #fff2b5; background: #68cda7; color: #123957; box-shadow: 4px 4px #0a304c; font-weight: 900; }
.primary-button:hover { background: #9ce5b6; }
.phase-dialog { position: fixed; z-index: 100; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; text-align: center; background: radial-gradient(circle at 50% 5%, #387fa6, #174e72 45%, #0b315f); }
.phase-dialog::before { content: ''; position: fixed; z-index: -1; inset: -100vh -100vw; background: #031634df; }
.phase-symbol { display: block; font-size: 53px; line-height: 1; color: #ffe4a3; margin-bottom: 10px; }
.whale-ascension { position: absolute; inset: 0; z-index: 12; overflow: hidden; background: #052654b8; pointer-events: auto; }
.ascension-light { position: absolute; left: 50%; top: -8%; width: min(70%, 340px); height: 110%; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #c7faff1a 17%, #e5fff880 48%, #c5faff2b 82%, transparent); clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%); animation: ascension-beam 2.2s steps(8) both; pointer-events: none; }
.ascension-light::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 24px, #ffffff50 24px 28px, transparent 28px 51px); animation: ascension-sparkle .7s steps(4) infinite; }
.ascension-whales { position: absolute; inset: 0; pointer-events: none; }
.ascension-whale { position: absolute; width: 100px; height: 100px; margin: -50px; display: grid; place-items: center; animation: whale-converge 1.6s steps(14, end) forwards; animation-delay: var(--rise-delay); }
.ascension-whale canvas { display: block; width: 94px; height: 94px; image-rendering: pixelated; filter: drop-shadow(0 0 12px #e2fff5); }
.ascension-halo { position: absolute; z-index: 1; top: 54%; left: 50%; width: 76px; aspect-ratio: 1; border: 6px dashed #fff1ac; opacity: 0; transform: translate(-50%, -50%) scale(.2); box-shadow: 0 0 0 7px #ff9ecb, 0 0 30px 13px #c5fff5; animation: ascension-halo 2.2s steps(14, end) .9s both; pointer-events: none; }
.ascension-glitter, .evolution-glitter { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.ascension-glitter i, .evolution-glitter i { position: absolute; width: 6px; height: 6px; background: var(--spark-color); box-shadow: 3px 3px #185188, 0 0 8px var(--spark-color); opacity: 0; animation: evolution-glitter 1.35s steps(7, end) var(--spark-delay) infinite; }
.ascension-glitter i:nth-child(4n), .evolution-glitter i:nth-child(4n) { width: 4px; height: 4px; }
.ascension-mermaid { position: absolute; z-index: 2; top: 54%; left: 50%; width: clamp(100px, 15vw, 145px); aspect-ratio: 1; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; }
.ascension-mermaid canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 0 14px #fff5b5); }
.ascension-mermaid.is-rising { animation: mermaid-born-rise 3.45s steps(22, end) both; }
.ascension-message { position: absolute; z-index: 4; inset: 5% 5% auto; display: grid; justify-items: center; gap: 15px; text-align: center; color: #fff6ce; text-shadow: 3px 3px #08305b; }
.ascension-message h2 { max-width: 26ch; font-family: 'Press Start 2P', ui-monospace, monospace; font-size: clamp(12px, 2.5vw, 23px); line-height: 1.7; animation: ascension-text .6s steps(4) both; }
.ascension-message p { max-width: 32ch; font-family: 'Press Start 2P', ui-monospace, monospace; font-size: clamp(9px, 1.4vw, 12px); line-height: 1.7; opacity: 0; animation: ascension-text .65s steps(4) 1.4s forwards; }
.ascension-message p + p { animation-delay: 2.6s; }
.ascension-message .primary-button { margin: 0; font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 10px; line-height: 1.6; animation: ascension-text .4s steps(3) both; }
@keyframes ascension-beam { from { opacity: 0; transform: translateX(-50%) scaleX(.2); } 30%, 75% { opacity: 1; transform: translateX(-50%) scaleX(1); } to { opacity: .7; transform: translateX(-50%) scaleX(.65); } }
@keyframes ascension-sparkle { to { transform: translateY(-50px); } }
@keyframes ascension-halo { 0%, 25% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); } 42%, 65% { opacity: 1; transform: translate(-50%, -50%) scale(1.6) rotate(90deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.6) rotate(180deg); } }
@keyframes evolution-glitter { 0%, 12% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0); } 25%, 55% { opacity: 1; transform: translate(0, 0) scale(1.3) rotate(45deg); } 100% { opacity: 0; transform: translate(var(--drift-x), var(--drift-y)) scale(.2) rotate(90deg); } }
@keyframes whale-converge { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 65% { opacity: 1; transform: translate(var(--towards-center-x), var(--towards-center-y)) scale(.56); } 100% { opacity: 0; transform: translate(var(--towards-center-x), var(--towards-center-y)) scale(.15); } }
@keyframes mermaid-born-rise { 0%, 38% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 48%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 100% { opacity: 0; transform: translate(-50%, -115vh) scale(.55); } }
@keyframes ascension-text { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.studio-pixel-curtain.is-covering i { animation: studio-pixel-in var(--pixel-cover-duration) steps(8, end) var(--pixel-delay) both; }
@keyframes studio-pixel-in {
  0% { opacity: 0; transform: translate(-45%, 100%) scale(.35); }
  45% { opacity: 1; transform: translate(-15%, 30%) scale(.82); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@media (max-width: 650px) { .ascension-message { inset: 5% 4% auto; gap: 11px; } .ascension-whale { width: 76px; height: 76px; margin: -38px; } .ascension-whale canvas { width: 72px; height: 72px; } }
@keyframes pixel-tide { to { transform: translateX(65px); } }
@keyframes beam-drift { to { transform: translateX(42px); } }
@keyframes caustic-drift { to { transform: translateY(120px); } }
@keyframes ambient-rise { to { transform: translateY(-650px) translateX(16px); } }
@keyframes bubble-drift { to { transform: translate(-50%, -56%); } }
@keyframes plant-fall { from { transform: translateY(calc(0px - var(--fall-distance, 250px))) scale(.75); opacity: .2; } to { transform: translateY(0) scale(1); opacity: 1; } }
@media (max-width: 650px) {
  .topbar { height: 62px; padding: 0 11px; gap: 9px; }
  .brand-mark { width: 34px; height: 34px; border-width: 3px; font-size: 27px; }
  .brand-text strong { font-size: 9px; }
  .brand-text span { font-size: 8px; }
  .icon-button { width: 33px; height: 33px; font-size: 16px; }
  main { padding: 16px 11px; }
  .intro { padding: 5px 0 17px; }
  .eyebrow { font-size: 8px; letter-spacing: .05em; }
  h1 { font-size: clamp(15px, 4.5vw, 20px); margin-top: 9px; }
  .intro p { font-size: 11px; line-height: 1.35; }
  .game-frame { border-width: 4px; box-shadow: 0 0 0 3px #1a5a79, 0 0 0 6px #082744, 6px 9px #03152f; }
  .hud { min-height: 64px; }
  .hud-item { padding: 7px 4px; gap: 5px; }
  .hud-icon { width: 24px; height: 24px; border-width: 2px; font-size: 16px; }
  .hud-item small { font-size: 7px; margin-bottom: 4px; }
  .hud-item strong { font-size: 9px; }
  .sea { height: calc(100dvh - 295px); min-height: 440px; max-height: 690px; }
  .bubble { width: 59px; height: 59px; }
  .bubble::after { left: 13px; top: 12px; }
  .entity { width: 66px; height: 70px; margin: -35px 0 0 -33px; }
  .pixel-sprite { width: 56px; height: 56px; }
  .entity.seed .pixel-sprite { width: 50px; height: 50px; }
  .entity.plant { width: 45px; height: 51px; margin: -25px 0 0 -22px; }
  .entity.plant .pixel-sprite { width: 44px; height: 44px; }
  .entity.bigFish, .entity.dolphin, .entity.shark, .entity.whale { width: 72px; height: 75px; margin: -37px 0 0 -36px; }
  .entity.bigFish .pixel-sprite, .entity.dolphin .pixel-sprite, .entity.shark .pixel-sprite, .entity.whale .pixel-sprite { width: 66px; height: 66px; }
  .game-footer { padding: 9px; min-height: 62px; gap: 7px; }
  .guide-icon { width: 26px; height: 26px; border-width: 2px; font-size: 16px; }
  .game-footer p { font-size: 9px; }
  .merge-count { font-size: 8px; }
  .lower-bar { padding-top: 18px; font-size: 9px; }
  .lower-bar button { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* El nivel de la siguiente burbuja sube de abajo arriba. */
.timer-meter { position: relative; flex: none; width: 16px; height: 42px; border: 3px solid #bde6d1; background: #0b395d; box-shadow: inset 2px 2px #092b4a, 2px 2px #0b3957; overflow: hidden; }
#sound-button { margin-left: auto; }
#help-button { margin-left: 0; }
#sound-button[aria-pressed="false"] { color: #8db3b6; border-color: #607e90; background: #153f5b; }
.timer-meter::after { content: ''; position: absolute; inset: 3px 1px; z-index: 2; background: repeating-linear-gradient(0deg, transparent 0 5px, #0b395d8c 5px 7px); pointer-events: none; }
#timer-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, #37aeba, #7ee7bd 60%, #ffe28b); transition: height .22s linear; }

/* Depósito visible: hasta treinta burbujas en el mar y el resto en espera. */
.bubble-stock { position: relative; z-index: 7; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; min-height: 48px; padding: 7px 14px; border-bottom: 4px solid #082d50; background: #123e63; color: #d9eee0; font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 9px; line-height: 1.4; }
.stock-summary { display: flex; align-items: center; justify-content: center; gap: 13px; }
.stock-current, .bubble-reserve { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.bubble-reserve { position: static; top: auto; right: auto; z-index: auto; max-width: none; padding: 0; border: 0; background: transparent; box-shadow: none; color: inherit; font-size: inherit; }
.bubble-stock strong { color: #ffecaa; font-size: 10px; }
.stock-arrow { color: #8ddbd1; font-size: 17px; }
.fill-bubbles { max-width: 100%; padding: 9px 11px; border: 3px solid #a6eee1; background: #2b8796; box-shadow: 3px 3px #082c4e; color: #fff3bd; font-family: inherit; font-size: 8px; line-height: 1.45; text-align: center; }
.fill-bubbles:hover:not(:disabled) { background: #3da9a4; }
.fill-bubbles:disabled { border-color: #59859a; background: #1b4d68; box-shadow: none; color: #88aeb7; cursor: default; }
.stock-orb { width: 14px; height: 14px; border: 3px solid #9ceade; background: #277999; box-shadow: inset 2px 2px #e2fff1; }
.stock-bubbles { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.stock-bubbles i { display: block; width: 7px; height: 7px; border: 2px solid #607f93; background: #174768; }
.stock-bubbles i:nth-child(2) { margin-bottom: 6px; }
.stock-bubbles i:nth-child(3) { margin-bottom: 2px; }
.stock-bubbles i:nth-child(4) { margin-bottom: 9px; }
.bubble-reserve.has-stock .stock-bubbles i { border-color: #a6eee1; background: #448fa8; box-shadow: inset 1px 1px #ecfff1; }

/* The pixel bubble sprite scales inside a generous touch target. */
.bubble { --orb-size: 50px; width: 56px; height: 56px; clip-path: none; background: transparent; }
.bubble::before, .bubble::after { content: none; }
.bubble-pixel { position: absolute; left: 50%; top: 50%; width: var(--orb-size); height: var(--orb-size); transform: translate(-50%, -50%); image-rendering: pixelated; pointer-events: none; filter: drop-shadow(3px 3px 0 #062847); }
.bubble.arriving .bubble-pixel { animation: bubble-enter .4s steps(5) both; }
.bubble:hover, .bubble:focus-visible { filter: none; }
.bubble:hover .bubble-pixel, .bubble:focus-visible .bubble-pixel { filter: drop-shadow(3px 3px 0 #062847) brightness(1.22); }
@keyframes bubble-enter { from { opacity: 0; transform: translate(-50%, 15%) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* El animal se desplaza lentamente; su lienzo conserva los cuatro fotogramas. */
.entity:not(.seed):not(.plant) { animation: none; }
.entity.interacting { animation: none !important; }
@keyframes creature-roam { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(var(--swim-x, 15px), -7px); } 50% { transform: translate(var(--swim-back-x, -9px), 5px); } 75% { transform: translate(var(--swim-x, 15px), 8px); } }

@media (max-width: 650px) {
  .countdown-card .hud-icon { display: none; }
  .timer-meter { width: 11px; height: 34px; border-width: 2px; }
  .bubble-stock { flex-direction: column; align-items: stretch; min-height: 42px; padding: 5px 7px; gap: 6px; font-size: 7px; }
  .stock-summary { justify-content: space-between; gap: 5px; }
  .bubble-stock strong { font-size: 8px; }
  .stock-current, .bubble-reserve { gap: 4px; }
  .stock-arrow { font-size: 13px; }
  .fill-bubbles { width: 100%; padding: 7px 5px; font-size: 7px; }
  .stock-orb { width: 11px; height: 11px; border-width: 2px; }
  .stock-bubbles { gap: 1px; width: 27px; }
  .stock-bubbles i { width: 6px; height: 6px; border-width: 1px; }
  .bubble { width: 46px; height: 46px; --orb-size: 43px; }
}

/* Floating follows a few discrete retro animation steps. */
.bubble {
  animation: bubble-float var(--float-duration, 2.7s) steps(5) infinite alternate;
}
/* Creature sizes communicate the evolution ladder at a glance. */
.entity { width: 82px; height: 82px; margin: -41px 0 0 -41px; }
.pixel-sprite { width: 72px; height: 72px; }
.entity.seed .pixel-sprite { width: 64px; height: 64px; }
.entity.plant { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
.entity.plant .pixel-sprite { width: 62px; height: 62px; }
.entity.bigFish { width: 101px; height: 101px; margin: -50px 0 0 -50px; }
.entity.bigFish .pixel-sprite { width: 92px; height: 92px; }
.entity.dolphin { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
.entity.dolphin .pixel-sprite { width: 120px; height: 120px; }
.entity.shark { width: 146px; height: 146px; margin: -73px 0 0 -73px; }
.entity.shark .pixel-sprite { width: 136px; height: 136px; }
.entity.whale { width: 216px; height: 216px; margin: -108px 0 0 -108px; }
.entity.whale .pixel-sprite { width: 200px; height: 200px; }

@media (max-width: 650px) {
  .entity { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
  .pixel-sprite { width: 62px; height: 62px; }
  .entity.seed .pixel-sprite { width: 54px; height: 54px; }
  .entity.plant { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
  .entity.plant .pixel-sprite { width: 54px; height: 54px; }
  .entity.bigFish { width: 86px; height: 86px; margin: -43px 0 0 -43px; }
  .entity.bigFish .pixel-sprite { width: 80px; height: 80px; }
  .entity.dolphin { width: 112px; height: 112px; margin: -56px 0 0 -56px; }
  .entity.dolphin .pixel-sprite { width: 104px; height: 104px; }
  .entity.shark { width: 126px; height: 126px; margin: -63px 0 0 -63px; }
  .entity.shark .pixel-sprite { width: 118px; height: 118px; }
  .entity.whale { width: 184px; height: 184px; margin: -92px 0 0 -92px; }
  .entity.whale .pixel-sprite { width: 172px; height: 172px; }
}
@keyframes bubble-float {
  from { transform: translate(calc(-50% - var(--float-x, 0px)), -47%) rotate(-4deg); }
  to { transform: translate(calc(-50% + var(--float-x, 0px)), -57%) rotate(4deg); }
}

/* Pop particles float above the creatures and never intercept touches. */
.effect-layer { z-index: 12; overflow: visible; }
.burst { position: absolute; width: 0; height: 0; pointer-events: none; }
.burst::before { content: ''; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border: 4px solid #e8fff6; border-radius: 50%; box-shadow: 0 0 0 3px #70dfe0a8, 0 0 18px #bafff4; animation: burst-ring 1.05s ease-out both; }
.burst::after { content: 'POP!'; position: absolute; left: 0; top: -18px; color: #fff3b2; font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 11px; text-shadow: 2px 2px #e57c9c, -2px -2px #348cb1, 0 0 8px #fff; white-space: nowrap; animation: burst-word 1.3s ease-out both; }
.burst-evolution::before, .burst-plant::before { border-color: #fff0b1; box-shadow: 0 0 0 4px #ff99c2a8, 0 0 25px #ffdb8e; animation-duration: 1.25s; }
.burst-evolution::after { content: '✦'; font-size: 25px; left: -9px; top: -21px; }
.burst-plant::after { content: '✿'; font-size: 25px; left: -11px; top: -23px; }
.burst i { position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; background: #cafffa; box-shadow: 2px 2px #5ec9d5; animation: burst-particle 1.18s cubic-bezier(.16,.8,.3,1) both; }
.burst i:nth-child(3n) { width: 5px; height: 5px; background: #fff1a7; box-shadow: 2px 2px #ea8ca3; }
.burst-evolution i, .burst-plant i { background: #ffdb8b; box-shadow: 2px 2px #e86f9e; animation-duration: 1.3s; }
.burst-evolution i:nth-child(3n), .burst-plant i:nth-child(3n) { background: #b7f6ec; box-shadow: 2px 2px #74a8d9; }
@keyframes burst-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(4.4); opacity: 0; } }
@keyframes burst-particle { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--turn)); opacity: 0; } }
@keyframes burst-word { 0% { transform: translate(-50%, 7px) scale(.5); opacity: 0; } 24% { transform: translate(-50%, -8px) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, -25px) scale(1); opacity: 0; } }

/* The playing screen uses the available viewport height instead of growing the page. */
body.playing { overflow: hidden; }
body.game-paused .sea *, body.game-paused .sea *::before, body.game-paused .sea *::after { animation-play-state: paused !important; }
.app-shell { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.topbar { flex: 0 0 calc(60px + env(safe-area-inset-top)); width: 100%; height: calc(60px + env(safe-area-inset-top)); margin: 0 auto; padding: env(safe-area-inset-top) max(15px, env(safe-area-inset-right)) 0 max(15px, env(safe-area-inset-left)); }
main { flex: 1; min-height: 0; width: 100%; margin: 0 auto; padding: 8px max(18px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); display: flex; flex-direction: column; }
.intro { flex: none; padding: 1px 0 8px; }
.intro h1 { margin: 4px 0 2px; font-size: clamp(16px, 2.3vw, 24px); line-height: 1.25; }
.intro p { font-size: 10px; }
.game-frame { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.hud { flex: none; min-height: 60px; }
.hud-item { padding: 5px 7px; }
.hud-icon { width: 30px; height: 30px; font-size: 20px; }
.bubble-stock { flex: none; }
.sea { flex: 1 1 auto; height: auto; min-height: 0; max-height: none; }
.game-footer { flex: none; min-height: 42px; padding: 5px 10px; }
.lower-bar { flex: none; min-height: 29px; padding: 5px 2px 0; }
@media (max-width: 650px) {
  .topbar { flex-basis: calc(50px + env(safe-area-inset-top)); height: calc(50px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); }
  main { padding: 5px max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .intro { padding: 2px 0 6px; }
  .intro .eyebrow { display: none; }
  .intro h1 { margin: 0 0 2px; font-size: 14px; }
  .intro p { font-size: 9px; }
  .hud { min-height: 49px; }
  .hud-item { padding: 3px; }
  .hud-item small { margin-bottom: 3px; font-size: 6px; }
  .hud-item strong { font-size: 9px; }
  .bubble-stock { min-height: 0; padding: 4px 6px; gap: 3px; }
  .fill-bubbles { padding: 5px 4px; line-height: 1.25; }
  .game-footer { min-height: 38px; padding: 4px 6px; }
  .game-footer p { font-size: 8px; }
  .lower-bar { min-height: 26px; padding: 3px 0 0; justify-content: flex-end; }
  .lower-bar span { display: none; }
  .lower-bar button { padding: 4px 6px; font-size: 8px; }
}
@media (max-height: 500px) {
  .topbar { flex-basis: calc(42px + env(safe-area-inset-top)); height: calc(42px + env(safe-area-inset-top)); }
  main { padding: 4px max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .intro { display: none; }
  .hud { min-height: 42px; }
  .hud-item { padding: 2px 4px; gap: 4px; }
  .hud-item small { margin-bottom: 2px; font-size: 7px; }
  .hud-item strong { font-size: 9px; }
  .hud-icon { width: 22px; height: 22px; font-size: 15px; border-width: 2px; }
  .timer-meter { height: 28px; }
  .bubble-stock { min-height: 0; padding: 3px 6px; gap: 3px; }
  .fill-bubbles { padding: 4px 5px; font-size: 7px; }
  .game-footer { min-height: 31px; padding: 2px 6px; }
  .game-footer p { font-size: 8px; }
  .guide-icon { display: none; }
  .lower-bar { min-height: 23px; padding-top: 2px; }
  .entity { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .pixel-sprite { width: 46px; height: 46px; }
  .entity.seed .pixel-sprite { width: 44px; height: 44px; }
  .entity.plant { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  .entity.plant .pixel-sprite { width: 40px; height: 40px; }
  .entity.bigFish { width: 66px; height: 66px; margin: -33px 0 0 -33px; }
  .entity.bigFish .pixel-sprite { width: 62px; height: 62px; }
  .entity.dolphin { width: 78px; height: 78px; margin: -39px 0 0 -39px; }
  .entity.dolphin .pixel-sprite { width: 74px; height: 74px; }
  .entity.shark { width: 90px; height: 90px; margin: -45px 0 0 -45px; }
  .entity.shark .pixel-sprite { width: 86px; height: 86px; }
  .entity.whale { width: 116px; height: 116px; margin: -58px 0 0 -58px; }
  .entity.whale .pixel-sprite { width: 110px; height: 110px; }
}

/* Más océano: una cabecera fina y datos compactos, sin un marco alrededor del mar. */
.topbar { flex: 0 0 calc(46px + env(safe-area-inset-top)); max-width: none; height: calc(46px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); gap: 8px; border-bottom: 1px solid #68b7b4; box-shadow: none; }
.brand-mark { width: 32px; height: 32px; border-width: 2px; box-shadow: inset 2px 2px #ddfff0, inset -2px -2px #166079; }
.brand-text { gap: 0; }
.brand-text span { display: none; }
.brand-text strong { font-size: 10px; }
.icon-button { width: 36px; height: 36px; border-width: 2px; box-shadow: inset -2px -2px #124966; font-size: 19px; }
.cover-button { font-size: 25px; line-height: 1; }
main { max-width: none; width: 100%; padding: 0 3px max(2px, env(safe-area-inset-bottom)); }
.game-frame { position: relative; border: 0; box-shadow: none; background: #0a4575; }
.hud { min-height: 36px; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #67afb1; background: #1b5b74; }
.hud-item { gap: 5px; padding: 3px 8px; }
.hud-item + .hud-item { border-left: 1px solid #438697; }
.hud-icon { display: none; }
.hud-item > span:nth-child(2) { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hud-item small { margin: 0; font-size: 9px; }
.hud-item strong { font-size: 11px; }
.timer-meter { width: 10px; height: 27px; border-width: 2px; }
.bubble-stock { min-height: 34px; padding: 3px 10px; border-bottom: 1px solid #5ca5b0; background: #123e63ec; }
.fill-bubbles { padding: 5px 8px; border-width: 1px; box-shadow: none; }
.game-footer { position: absolute; bottom: 0; left: 0; right: 0; min-height: 30px; padding: 4px 9px; border-top: 1px solid #79c1bd; background: #123e63cc; }
.guide-icon { display: none; }
.game-footer p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.merge-count { font-size: 10px; }
@media (max-width: 650px) {
  .topbar { gap: 5px; }
  .brand-text strong { font-size: 8px; }
  .icon-button { width: 34px; height: 34px; font-size: 17px; }
  .cover-button { font-size: 22px; }
  .hud { min-height: 42px; }
  .hud-item { padding: 3px 2px; }
  .hud-item > span:nth-child(2) { display: block; }
  .hud-item small { margin-bottom: 2px; font-size: 7px; }
  .hud-item strong { font-size: 9px; }
  .timer-meter { width: 8px; height: 24px; }
  .bubble-stock { padding: 3px 7px; }
  .game-footer { min-height: 28px; padding: 3px 6px; }
  .game-footer p, .merge-count { font-size: 8px; }
}

/* The second world lives inside one enormous, irregular glass bubble. */
.phase-switch { position: absolute; z-index: 11; display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-width: 132px; min-height: 48px; padding: 9px 12px; border: 4px solid #b6f9ed; background: linear-gradient(#fff3ae 0 45%, #f4a840 45% 100%); color: #123963; box-shadow: inset -4px -4px #ca712c, 5px 5px #061b3d; font: clamp(12px,1.25vw,15px)/1.45 'Press Start 2P', ui-monospace, monospace; white-space: nowrap; cursor: pointer; animation: phase-switch-glow 3.2s steps(5, end) infinite; }
.phase-switch:hover, .phase-switch:focus-visible { background: #fff7c6; outline: 3px solid #fff2b8; outline-offset: 3px; }
.phase-switch:active { animation: phase-switch-press .17s steps(3, end) forwards; }
#phase-one-to-two { top: 12px; right: 12px; }
#sea.is-ascending #phase-one-to-two { visibility: hidden; pointer-events: none; }
#phase-two-to-one { top: 13px; left: 13px; }
#phase-two-to-three { top: 13px; right: 13px; }
#phase-three-to-two { top: 13px; left: 13px; }
@keyframes phase-switch-glow { 0%, 70%, 100% { filter: brightness(1); } 82% { filter: brightness(1.32); } }
@keyframes phase-switch-press { to { transform: translate(5px, 5px) scale(.96); box-shadow: inset 2px 2px #ca712c, 0 0 #061b3d; } }
/* Keep phases 2 and 3 out of WebKit's fixed-position hit-testing path. In an
   installed iOS app that path can retain landscape touch coordinates after
   the screen has painted back in portrait. The section is already the only
   visible body child while playing, so a viewport-sized flow box is enough. */
.phase-two-screen { position: relative; z-index: 4; width: 100%; height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #080e30; color: #fff1c8; }
.phase-two-header { position: relative; z-index: 3; display: flex; align-items: center; gap: 9px; min-height: calc(49px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 2px max(10px, env(safe-area-inset-left)); border-bottom: 2px solid #98c4e7; background: #142d66; }
.phase-two-heading { flex: 1; min-width: 0; display: grid; gap: 3px; font-family: 'Press Start 2P', ui-monospace, monospace; }
.phase-two-heading small { color: #9ae2ee; font-size: 7px; }
.phase-two-heading strong { overflow: hidden; color: #ffdf8f; font-size: clamp(9px, 1.7vw, 15px); line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.phase-two-header .icon-button { flex: none; width: 30px; height: 30px; margin: 0; border-width: 2px; font-size: 18px; }
.phase-two-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at center, #2b4c8c 0 20%, #142950 62%, #070d29 100%); }
.phase-two-stars { position: absolute; inset: 0; opacity: .8; background-image: radial-gradient(#d8f5ff 1px, transparent 2px), radial-gradient(#b6bafc 2px, transparent 3px), radial-gradient(#6ed8ff 1px, transparent 2px); background-size: 107px 83px, 181px 163px, 71px 119px; background-position: 17px 27px, 67px 84px, 35px 4px; animation: phase-two-stars 5s steps(4) infinite alternate; }
.world-bubble { position: relative; width: min(94vw, 820px); height: min(calc(100% - 14px), 810px); isolation: isolate; overflow: hidden; border: clamp(7px, 1.2vw, 15px) solid #7af2f5; border-radius: 49% 51% 48% 52% / 48% 47% 53% 52%; background: #367db7; box-shadow: inset 0 0 0 6px #d7fff4, inset 0 0 0 14px #428cd2, inset 30px 42px 0 #c6fff133, inset -23px -13px 0 #061c5a77, 0 0 0 7px #174077, 0 0 60px 10px #5cc9ed70; }
.world-bubble::before { content: ''; position: absolute; z-index: 8; top: 7%; left: 9%; width: 18%; height: 6%; transform: rotate(-20deg); background: #f4ffeddd; clip-path: polygon(9% 35%, 26% 12%, 67% 12%, 91% 38%, 100% 66%, 81% 78%, 37% 78%, 0 56%); box-shadow: 0 0 12px #d5fff8; pointer-events: none; }
.world-bubble::after { content: ''; position: absolute; z-index: 8; right: 11%; bottom: 12%; width: 9%; height: 2%; transform: rotate(-32deg); background: #bbfff2b0; clip-path: polygon(12% 0, 83% 0, 100% 50%, 71% 100%, 0 100%); pointer-events: none; }
.world-sky { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#172d76 0 18%, #2663a8 37%, #52b5be 65%, #b6e7ad 82%); }
.world-sky::after { content: ''; position: absolute; inset: 19% 0 27%; opacity: .58; background: linear-gradient(#e1fff0, #e1fff0) 17% 24% / 8% 3px no-repeat, linear-gradient(#bfeff1, #bfeff1) 14% 28% / 15% 4px no-repeat, linear-gradient(#d6fce9, #d6fce9) 75% 17% / 9% 3px no-repeat, linear-gradient(#abdde0, #abdde0) 72% 22% / 18% 4px no-repeat, linear-gradient(#ddffe4, #ddffe4) 48% 43% / 10% 3px no-repeat, linear-gradient(#a8dcd4, #a8dcd4) 46% 47% / 17% 4px no-repeat; image-rendering: pixelated; pointer-events: none; }
.world-sky::before { content: ''; position: absolute; top: 16%; right: 19%; width: 10%; aspect-ratio: 1; background: #fff2aa; clip-path: polygon(25% 0, 75% 0, 75% 8%, 88% 8%, 88% 25%, 100% 25%, 100% 75%, 88% 75%, 88% 90%, 75% 90%, 75% 100%, 25% 100%, 25% 90%, 12% 90%, 12% 75%, 0 75%, 0 25%, 12% 25%, 12% 8%, 25% 8%); filter: drop-shadow(0 0 12px #fff3ba); animation: world-sun-pulse 10s steps(5, end) infinite; }
.world-sunbeams { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.world-sunbeams::before, .world-sunbeams::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #fff9bd78, #c6fff54d 60%, transparent 85%); mix-blend-mode: screen; animation: world-sunbeams 9s steps(7, end) infinite alternate; }
.world-sunbeams::before { clip-path: polygon(74% 19%, 77% 20%, 59% 70%, 35% 70%); }
.world-sunbeams::after { clip-path: polygon(75% 19%, 78% 21%, 94% 67%, 76% 68%); animation-delay: -4s; }
.world-sky i { position: absolute; width: 7px; height: 7px; background: #e5fff4; box-shadow: 0 0 0 4px #a7dff064; animation: phase-two-stars 3s steps(3) infinite alternate; }
.world-sky i:nth-child(1) { left: 21%; top: 19%; }
.world-sky i:nth-child(2) { left: 72%; top: 12%; animation-delay: -1s; }
.world-sky i:nth-child(3) { left: 59%; top: 25%; width: 4px; height: 4px; animation-delay: -2s; }
.world-sky i:nth-child(4) { left: 33%; top: 10%; width: 4px; height: 4px; }
.world-sky i:nth-child(5) { left: 81%; top: 34%; width: 4px; height: 4px; }
.world-hills { position: absolute; inset: 47% 0 0; background: linear-gradient(#4aab88 0 16%, #2d806e 16% 44%, #145862 44% 100%); clip-path: polygon(0 46%, 7% 46%, 7% 34%, 12% 34%, 12% 39%, 19% 39%, 19% 24%, 23% 24%, 23% 17%, 26% 17%, 26% 28%, 32% 28%, 32% 37%, 42% 37%, 42% 30%, 48% 30%, 48% 40%, 58% 40%, 58% 29%, 64% 29%, 64% 21%, 68% 21%, 68% 36%, 76% 36%, 76% 29%, 83% 29%, 83% 18%, 87% 18%, 87% 30%, 93% 30%, 93% 38%, 100% 38%, 100% 100%, 0 100%); }
.world-hills::before { content: ''; position: absolute; inset: 13% 0 0; background: #8fd8a6; clip-path: polygon(0 48%, 9% 48%, 9% 38%, 19% 38%, 19% 49%, 27% 49%, 27% 35%, 37% 35%, 37% 43%, 48% 43%, 48% 31%, 57% 31%, 57% 43%, 67% 43%, 67% 33%, 77% 33%, 77% 47%, 88% 47%, 88% 37%, 100% 37%, 100% 54%, 0 54%); opacity: .45; }
.world-hills::after { content: ''; position: absolute; inset: 25% 0 0; opacity: .24; background-image: linear-gradient(#d0f2b2 0 0), linear-gradient(#b1e5b0 0 0), linear-gradient(#cff0a9 0 0), linear-gradient(#b3d9aa 0 0), linear-gradient(#b1e5b0 0 0); background-position: 14% 44%, 31% 31%, 53% 45%, 78% 25%, 91% 38%; background-size: 8% 4px, 6% 3px, 10% 4px, 7% 3px, 8% 4px; background-repeat: no-repeat; }
.world-meadow { position: absolute; left: -8%; right: -8%; bottom: -17%; height: 54%; border-radius: 50% 50% 0 0; background: repeating-linear-gradient(0deg, #225e55 0 7px, #2d805e 7px 14px, #369365 14px 18px, #277b60 18px 24px); box-shadow: inset 0 7px #b8eea4, inset 0 16px #73ca86, inset 0 23px #33886b; }
.world-meadow::before { content: ''; position: absolute; inset: 15% 2% 0; opacity: .56; background: linear-gradient(#b5e594 0 0) 5% 25% / 12% 4px no-repeat, linear-gradient(#75c982 0 0) 23% 46% / 8% 3px no-repeat, linear-gradient(#b5e594 0 0) 67% 27% / 15% 4px no-repeat, linear-gradient(#75c982 0 0) 89% 42% / 9% 3px no-repeat; }
.world-meadow::after { content: ''; position: absolute; inset: 23% 4% 0; opacity: .72; background: radial-gradient(#f9daab 2px, transparent 3px) 9% 31% / 87px 53px, radial-gradient(#80d99c 2px, transparent 3px) 48% 15% / 113px 61px; }
.world-lake { position: absolute; z-index: 2; left: 19%; right: 19%; bottom: 7%; height: 35%; overflow: hidden; border: 6px solid #93deb7; border-radius: 50% 50% 44% 46%; background: repeating-linear-gradient(0deg, #0b5689 0 8px, #176da0 8px 13px, #2488ae 13px 17px, #126994 17px 23px); box-shadow: inset 0 6px #d2f5b5, inset 0 -8px #073c68, 0 5px #174d5b; }
.world-lake::before { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; left: 29%; width: 43%; opacity: .65; background: repeating-linear-gradient(180deg, transparent 0 8px, #fff0a9ad 9px 12px, transparent 13px 23px); clip-path: polygon(43% 0, 57% 0, 94% 100%, 0 100%); animation: world-lake-reflection 5s steps(8, end) infinite alternate; }
.world-lake::after { content: ''; position: absolute; inset: 12% 5%; opacity: .75; background: linear-gradient(#9ff8ec99 0 0) 10% 22% / 17% 4px no-repeat, linear-gradient(#5fd5deaa 0 0) 32% 36% / 11% 3px no-repeat, linear-gradient(#ccfff0bb 0 0) 72% 27% / 22% 4px no-repeat, linear-gradient(#74d6df99 0 0) 6% 66% / 27% 4px no-repeat, linear-gradient(#c7fff0bb 0 0) 50% 72% / 15% 4px no-repeat, linear-gradient(#65ccd8aa 0 0) 79% 73% / 13% 3px no-repeat; animation: world-lake-waves 6s steps(8) infinite alternate; }
.world-lake i { position: absolute; z-index: 1; width: 16%; height: 4px; background: #d1ffed; box-shadow: 11px 7px #71d8e2; animation: phase-two-water 4s steps(6) infinite alternate; }
.world-lake i::before { content: ''; position: absolute; top: 5px; left: -22%; width: 145%; height: 18px; border: 3px solid #9df7ee9e; border-top: 0; border-radius: 0 0 50% 50%; animation: world-ripple 3.6s steps(6, end) infinite; }
.world-lake i::after { content: ''; position: absolute; top: -4px; left: 46%; width: 5px; height: 5px; background: #fff9d9; box-shadow: 5px 0 #cffff1, 2px -4px #fff9d9; animation: world-glint 3s steps(3, end) infinite alternate; }
.world-lake i:nth-child(1) { left: 14%; top: 30%; }
.world-lake i:nth-child(2) { left: 70%; top: 43%; animation-delay: -2s; }
.world-lake i:nth-child(3) { left: 40%; top: 75%; animation-delay: -1s; }
.world-palm { --palm-facing: 1; position: absolute; z-index: 3; bottom: 22%; width: 22%; height: 55%; background: url('assets/phase2-palm.svg') center bottom / contain no-repeat; image-rendering: pixelated; transform-origin: 50% 94%; pointer-events: none; animation: phase-two-palm-sway 6s steps(8, end) infinite alternate; }
.palm-left { left: 8%; }
.palm-right { --palm-facing: -1; right: 8%; animation-delay: -2.6s; }
.world-palm i, .world-palm b { display: none; }
.world-plants { position: absolute; z-index: 4; inset: auto 0 13% 0; height: 12%; pointer-events: none; }
.world-plants i { position: absolute; bottom: 0; width: 4px; height: 70%; background: #194f50; box-shadow: 3px 2px #4eaa76; transform: rotate(8deg); }
.world-plants i::before { content: ''; position: absolute; top: 42%; left: -9px; width: 24px; height: 15px; background: #4cba76; clip-path: polygon(0 15%, 45% 35%, 48% 56%, 90% 0, 100% 0, 90% 80%, 50% 83%, 50% 100%, 20% 87%); }
.world-plants i::after { content: ''; position: absolute; top: -5%; left: -9px; width: 21px; height: 22px; background: #f09cae; clip-path: polygon(37% 0, 63% 0, 63% 24%, 85% 24%, 85% 40%, 100% 40%, 100% 61%, 78% 61%, 78% 81%, 62% 81%, 62% 100%, 40% 100%, 40% 80%, 18% 80%, 18% 62%, 0 62%, 0 41%, 20% 41%, 20% 23%, 37% 23%); filter: drop-shadow(2px 2px #9f5486); }
.world-plants i:nth-child(even)::after { background: #f4c183; }
.world-plants i:nth-child(1) { left: 15%; }
.world-plants i:nth-child(2) { left: 28%; height: 45%; transform: rotate(-15deg); }
.world-plants i:nth-child(3) { left: 39%; height: 40%; }
.world-plants i:nth-child(4) { left: 70%; }
.world-plants i:nth-child(5) { left: 82%; height: 52%; transform: rotate(-10deg); }
.world-plants i:nth-child(6) { left: 92%; height: 65%; }
.world-vortex { position: absolute; z-index: 5; top: 34%; left: 50%; width: clamp(82px, 12vw, 145px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: #032456; box-shadow: 0 0 0 3px #99fbf0, 0 0 18px 8px #70d5f686; cursor: pointer; }
.vortex-ring { display: none; }
.vortex-spiral { position: absolute; inset: 1%; background: url('assets/phase2-vortex.svg') center / contain no-repeat; image-rendering: pixelated; animation: vortex-spin 3s steps(28) infinite reverse; }
.vortex-eye { display: none; }
.world-vortex:focus-visible { outline: 4px solid #fff2b8; outline-offset: 20px; }
.phase-two-characters { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.phase-two-character { position: absolute; display: grid; place-items: center; width: clamp(76px, 10vw, 126px); aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 0; background: transparent; pointer-events: auto; touch-action: none; user-select: none; cursor: grab; animation: phase-two-swim 3s steps(8) infinite alternate; }
.phase-two-character canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(3px 5px 0 #153b6688); pointer-events: none; }
.phase-two-character.selected { filter: drop-shadow(0 0 11px #fff2a1); }
.phase-two-character.dragging { z-index: 9; cursor: grabbing; animation: none; }
.phase-two-character.mermaid.is-awaiting-arrival { opacity: 0; animation: none; pointer-events: none; }
.phase-two-character.fairy { width: clamp(82px, 10vw, 128px); animation: fairy-fly 2s steps(6) infinite alternate; }
.phase-two-character.postgame-archangel { width: clamp(96px, 13vw, 150px); animation: fairy-fly 1.5s steps(6) infinite alternate; }
.phase-two-character.fairy.is-emerging { animation: fairy-emerge 1.15s steps(14, end) both; }
.phase-two-character.mermaid.is-arriving { z-index: 8; pointer-events: none; animation: mermaid-arrive 2.1s steps(18, end) both; }
.mermaid-arrival-splash { position: absolute; z-index: 7; top: 73%; width: 90px; height: 28px; border: 5px solid #d9fff1; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); box-shadow: 0 0 0 5px #87dcf283; pointer-events: none; animation: mermaid-splash .8s steps(8, end) 1.25s both; }
@keyframes mermaid-arrive { 0% { top: -13%; opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(-18deg); } 16% { opacity: 1; } 72% { top: 68%; transform: translate(-50%, -50%) scale(1) rotate(8deg); } 84% { top: 80%; transform: translate(-50%, -50%) scale(.9) rotate(-6deg); } 100% { top: 73%; opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes mermaid-splash { 0%, 25% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2); } }
@keyframes fairy-emerge { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.15) rotate(-30deg); filter: brightness(3); } 45% { opacity: 1; transform: translate(-50%, -50%) scale(1.35) rotate(12deg); filter: brightness(2); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); filter: brightness(1); } }
.phase-two-screen.is-evolving .phase-two-character.mermaid { visibility: hidden; }
.phase-two-screen.is-postgame-fusing .phase-two-character.fairy { visibility: hidden; }
.mermaid-evolution { position: absolute; z-index: 12; inset: 0; overflow: hidden; pointer-events: auto; background: radial-gradient(ellipse at 50% 55%, #ddfff049, #153c8d44 45%, #071d5a8c 100%); }
.evolution-siren { position: absolute; z-index: 2; top: 73%; width: clamp(88px, 13vw, 142px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.evolution-siren canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 0 9px #e9ffdb); }
.evolution-siren-left { left: 32%; animation: evolution-left 1.8s steps(16, end) both; }
.evolution-siren-right { left: 68%; animation: evolution-right 1.8s steps(16, end) both; }
.evolution-aura { position: absolute; z-index: 1; top: 55%; left: 50%; width: clamp(100px, 24vw, 230px); aspect-ratio: 1; opacity: 0; border: 9px dashed #fff5ab; box-shadow: 0 0 0 9px #ef9ecf, inset 0 0 0 8px #b9fff4, 0 0 55px 18px #bafcf6; animation: evolution-cocoon 4.25s steps(30, end) both; }
.evolution-flash { position: absolute; z-index: 4; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 55%, #fffefa 0 8%, #d7fff2 22%, #ffcaf5 42%, transparent 72%); animation: evolution-reveal-flash 4.25s steps(9, end) both; }
.mermaid-evolution p { position: absolute; z-index: 5; top: 12%; left: 50%; width: min(86%, 520px); margin: 0; transform: translateX(-50%); color: #fff7c1; text-align: center; text-shadow: 3px 3px #194c9a, 0 0 12px #efffc4; font: clamp(9px, 1.6vw, 16px)/1.7 'Press Start 2P', ui-monospace, monospace; animation: evolution-caption 4.25s steps(8, end) both; }
.evolution-glitter i { animation-duration: .95s; }
@keyframes evolution-left { 0% { left: 32%; top: 73%; opacity: 1; } 72% { left: 46%; top: 55%; opacity: 1; transform: translate(-50%, -50%) scale(.8) rotate(-20deg); } 100% { left: 50%; top: 55%; opacity: 0; transform: translate(-50%, -50%) scale(.12) rotate(90deg); } }
@keyframes evolution-right { 0% { left: 68%; top: 73%; opacity: 1; } 72% { left: 54%; top: 55%; opacity: 1; transform: translate(-50%, -50%) scale(.8) rotate(20deg); } 100% { left: 50%; top: 55%; opacity: 0; transform: translate(-50%, -50%) scale(.12) rotate(-90deg); } }
@keyframes evolution-cocoon { 0%, 28% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0); } 43% { opacity: 1; transform: translate(-50%, -50%) scale(.8) rotate(90deg); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(280deg); } 86% { opacity: 1; transform: translate(-50%, -50%) scale(.8) rotate(410deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.7) rotate(560deg); } }
@keyframes evolution-reveal-flash { 0%, 74% { opacity: 0; } 82% { opacity: .45; } 92% { opacity: .95; } 100% { opacity: 1; } }
@keyframes evolution-caption { 0%, 8% { opacity: 0; } 18%, 72% { opacity: 1; } 96%, 100% { opacity: 0; } }
.phase-two-character.fairy.is-being-sucked { animation: fairy-into-vortex 2.8s steps(30, end) forwards; pointer-events: none; }
.phase-two-character.postgame-archangel.is-being-sucked { animation: fairy-into-vortex 2.8s steps(30, end) forwards; pointer-events: none; }
.phase-two-stage.is-vortex-calm .world-bubble, .phase-two-stage.is-vortex-calm .world-bubble * { animation-play-state: paused !important; }
.phase-two-screen.is-engulfing { animation: vortex-screen-quake 2.1s steps(1, end) both; }
.phase-two-stage.is-engulfing .world-bubble { transform-origin: 50% 34%; animation: world-into-vortex 2.1s steps(20, end) both; }
.phase-two-vortex-portal { position: fixed; z-index: 114; inset: 0; overflow: hidden; isolation: isolate; pointer-events: auto; }
.phase-two-vortex-portal::before { content: ''; position: absolute; z-index: 1; inset: -15%; opacity: 0; background: repeating-conic-gradient(from 0deg at 50% 50%, #08245c 0deg 16deg, #117bb3 16deg 24deg, #64cfd5 24deg 30deg, #071b4d 30deg 45deg); }
.phase-two-vortex-portal.is-active::before { animation: vortex-tide 2.1s steps(18, end) both; }
.phase-two-vortex-portal::after { content: ''; position: absolute; z-index: 4; inset: 0; opacity: 0; background: #07132e; }
.phase-two-vortex-portal.is-active::after { animation: vortex-darken 2.1s steps(11, end) both; }
.phase-two-vortex-portal i { position: absolute; z-index: 2; top: 50%; left: 50%; width: min(46vmin, 360px); aspect-ratio: 1; background: url('assets/phase2-vortex.svg') center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 14px #a6f5ff); }
.phase-two-vortex-portal.is-active i { animation: vortex-engulf 2.1s steps(25, end) both; }
.phase-two-vortex-portal b { position: absolute; z-index: 3; left: var(--rock-x); top: var(--rock-y); width: clamp(13px, 2.5vmin, 32px); height: clamp(10px, 2vmin, 25px); background: #8295a4; box-shadow: inset 4px 4px #c0d3ce, inset -4px -4px #425b77, 4px 5px #07112b; clip-path: polygon(25% 0, 75% 0, 75% 20%, 100% 20%, 100% 80%, 75% 80%, 75% 100%, 10% 100%, 10% 75%, 0 75%, 0 25%, 25% 25%); opacity: 0; }
.phase-two-vortex-portal.is-active b { animation: vortex-rock-fall 1.65s steps(16, end) var(--rock-delay) both; }
.phase-two-vortex-portal b:nth-of-type(1) { --rock-x: 8%; --rock-y: 11%; --rock-dx: 42vw; --rock-dy: 39vh; --rock-delay: 0ms; }
.phase-two-vortex-portal b:nth-of-type(2) { --rock-x: 86%; --rock-y: 7%; --rock-dx: -36vw; --rock-dy: 43vh; --rock-delay: 110ms; }
.phase-two-vortex-portal b:nth-of-type(3) { --rock-x: 22%; --rock-y: 22%; --rock-dx: 28vw; --rock-dy: 28vh; --rock-delay: 60ms; }
.phase-two-vortex-portal b:nth-of-type(4) { --rock-x: 73%; --rock-y: 18%; --rock-dx: -23vw; --rock-dy: 32vh; --rock-delay: 190ms; }
.phase-two-vortex-portal b:nth-of-type(5) { --rock-x: 12%; --rock-y: 65%; --rock-dx: 38vw; --rock-dy: -15vh; --rock-delay: 130ms; }
.phase-two-vortex-portal b:nth-of-type(6) { --rock-x: 91%; --rock-y: 54%; --rock-dx: -41vw; --rock-dy: -4vh; --rock-delay: 250ms; }
.phase-two-vortex-portal b:nth-of-type(7) { --rock-x: 34%; --rock-y: 78%; --rock-dx: 16vw; --rock-dy: -28vh; --rock-delay: 70ms; }
.phase-two-vortex-portal b:nth-of-type(8) { --rock-x: 70%; --rock-y: 84%; --rock-dx: -20vw; --rock-dy: -34vh; --rock-delay: 210ms; }
.phase-two-vortex-portal.is-unveiling { animation: vortex-unveil .7s steps(12, end) both; }
.phase-three-stage .phase-two-moon-tease { z-index: 0; }
.phase-two-moon-tease { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; overflow: hidden; background: #060e2d; color: #fff1bd; font-family: 'Press Start 2P', ui-monospace, monospace; text-align: center; }
.moon-arrival-sky { position: absolute; inset: 0; background: radial-gradient(circle at 78% 23%, #5599d4 0 6%, #224f99 6% 9%, transparent 9%), radial-gradient(#d1eeff 2px, transparent 3px), radial-gradient(#8ebcea 2px, transparent 3px), linear-gradient(#071033, #182f66 82%); background-size: auto, 103px 79px, 169px 137px, auto; }
.moon-arrival-ground { position: absolute; left: -5%; right: -5%; bottom: -6%; height: 40%; background: repeating-linear-gradient(0deg, #344769 0 13px, #526783 13px 23px, #70819b 23px 30px); clip-path: polygon(0 35%, 11% 27%, 20% 31%, 31% 17%, 42% 30%, 55% 18%, 67% 26%, 79% 12%, 90% 29%, 100% 22%, 100% 100%, 0 100%); box-shadow: inset 0 12px #a9bad0; }
.moon-arrival-message { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; max-width: min(88%, 560px); margin-top: -12%; padding: 22px 16px; border: 4px solid #a9eafa; background: #102a69eb; box-shadow: 6px 6px #061329; }
.moon-arrival-message span { font-size: 25px; }
.moon-arrival-message strong { font-size: clamp(10px, 2vw, 16px); line-height: 1.6; }
.moon-arrival-message p { margin: 0; font-size: clamp(8px, 1.4vw, 11px); line-height: 1.7; }
.phase-two-footer { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: calc(40px + env(safe-area-inset-bottom)); padding: 5px max(10px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(10px, env(safe-area-inset-left)); border-top: 2px solid #8eced9; background: #143e70; font: 8px/1.6 'Press Start 2P', ui-monospace, monospace; }
.phase-two-footer span:last-child { flex: none; color: #ffe49e; white-space: nowrap; }
@keyframes phase-two-stars { to { opacity: .38; } }
@keyframes phase-two-water { to { transform: translateX(22px); } }
@keyframes world-sun-pulse { 0%, 70%, 100% { filter: brightness(1); } 80% { filter: brightness(1.32); } 90% { filter: brightness(1.13); } }
@keyframes world-sunbeams { from { opacity: .16; transform: translateX(-1.5%); } to { opacity: .5; transform: translateX(1.5%); } }
@keyframes world-lake-reflection { from { opacity: .28; transform: translateX(-8%) scaleX(.88); } to { opacity: .72; transform: translateX(8%) scaleX(1.12); } }
@keyframes world-lake-waves { from { transform: translate(-12px, -3px); } to { transform: translate(18px, 7px); } }
@keyframes world-ripple { from { opacity: .12; transform: scaleX(.72) translateY(-3px); } to { opacity: .65; transform: scaleX(1.12) translateY(4px); } }
@keyframes world-glint { from { opacity: .15; } to { opacity: .95; } }
@keyframes phase-two-palm-sway { from { transform: scaleX(var(--palm-facing)) rotate(-2deg); } to { transform: scaleX(var(--palm-facing)) rotate(2deg); } }
@keyframes portrait-palm-trunk-wind { from { transform: scaleX(var(--palm-facing)) rotate(7deg); } to { transform: scaleX(var(--palm-facing)) rotate(13deg); } }
@keyframes portrait-palm-frond-wind { from { transform: scaleX(var(--palm-facing)) rotate(var(--frond-angle)) scaleX(.94); } to { transform: scaleX(var(--palm-facing)) rotate(calc(var(--frond-angle) + 6deg)) scaleX(1.04); } }
@keyframes vortex-spin { to { transform: rotate(360deg); } }
@keyframes vortex-engulf { from { transform: translate(-50%, -50%) scale(.32) rotate(0); } 68% { transform: translate(-50%, -50%) scale(5) rotate(540deg); } to { transform: translate(-50%, -50%) scale(17) rotate(900deg); } }
@keyframes vortex-tide { 0% { opacity: 0; transform: scale(.15) rotate(0); } 35% { opacity: .65; } 100% { opacity: 1; transform: scale(1.5) rotate(240deg); } }
@keyframes vortex-darken { 0%, 43% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes vortex-rock-fall { 0% { opacity: 0; transform: translateY(-22vh) rotate(0) scale(1.25); } 17% { opacity: 1; } 35% { transform: translateY(10vh) rotate(45deg) scale(1); } 100% { opacity: 0; transform: translate(var(--rock-dx), var(--rock-dy)) rotate(720deg) scale(.1); } }
@keyframes vortex-screen-quake { 0%, 12%, 100% { transform: translate(0, 0); } 16%, 30%, 44%, 61%, 74% { transform: translate(-5px, 3px); } 22%, 36%, 53%, 68%, 83% { transform: translate(6px, -4px); } 90% { transform: translate(-3px, 2px); } }
@keyframes world-into-vortex { 0%, 12% { transform: translate(0, 0) scale(1) rotate(0); } 18% { transform: translate(-5px, 3px) scale(.98) rotate(-2deg); } 23% { transform: translate(6px, -3px) scale(.95) rotate(2deg); } 30% { transform: translate(-6px, 4px) scale(.9) rotate(-3deg); } 55% { transform: translate(3px, -4px) scale(.58) rotate(20deg); } 100% { opacity: 0; transform: translate(0, 0) scale(.08) rotate(180deg); } }
@keyframes vortex-unveil { from { opacity: 1; } to { opacity: 0; } }
@keyframes phase-two-swim { to { margin-top: -11px; margin-left: 7px; } }
@keyframes fairy-fly { to { margin-top: -16px; margin-left: 5px; } }
@keyframes fairy-into-vortex { 0% { left: var(--fairy-start-x, 50%); top: var(--fairy-start-y, 56%); opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } 24% { left: 40%; top: 50%; transform: translate(-50%, -50%) scale(.86) rotate(270deg); } 50% { left: 58%; top: 43%; transform: translate(-50%, -50%) scale(.65) rotate(630deg); } 76% { left: 45%; top: 38%; opacity: 1; transform: translate(-50%, -50%) scale(.42) rotate(990deg); } 100% { left: 50%; top: 34%; opacity: 0; transform: translate(-50%, -50%) scale(.04) rotate(1440deg); } }
@media (max-width: 650px) {
  .phase-switch { min-width: 122px; min-height: 50px; padding: 8px 9px; font-size:11px; }
  .phase-two-header { min-height: calc(46px + env(safe-area-inset-top)); gap: 5px; }
  .phase-two-heading small { font-size: 5px; }
  .phase-two-heading strong { font-size: 8px; }
  .phase-two-header .icon-button { width: 28px; height: 28px; }
  .phase-two-footer { min-height: calc(51px + env(safe-area-inset-bottom)); align-items: start; font-size: 6px; }
  .phase-two-footer span:first-child { max-width: 69%; }
  .world-bubble { width: 98vw; height: calc(100% - 7px); border-width: 7px; }
  .world-vortex { top: 35%; width: clamp(82px, 23vw, 120px); }
  .world-palm { bottom: 37%; width: 32%; height: 33%; }
  .palm-left { left: -5%; }
  .palm-right { right: -5%; }
  .world-lake { left: 8%; right: 8%; bottom: 10%; height: 32%; }
  .phase-two-character { width: 108px; }
  .phase-two-character.fairy { width: 114px; }
}

/* Portrait keeps the original miniature-world composition. */
.phase-two-screen[data-layout="portrait"] .phase-two-stage {
  padding: 48px 0 6px;
}

.phase-two-screen[data-layout="portrait"] #phase-two-to-one { left: 9px; }
.phase-two-screen[data-layout="portrait"] #phase-two-to-three { right: 9px; }
.phase-two-screen[data-layout="portrait"] .world-bubble {
  width: min(94vw, 430px);
  height: min(calc(100% - 4px), 164vw, 690px);
  border-width: 7px;
  border-radius: 48% 52% 47% 53% / 43% 44% 56% 57%;
}
.phase-two-screen[data-layout="portrait"] .world-sky {
  background: linear-gradient(#152f81 0 15%, #2675ad 38%, #60c9c3 67%, #cce2a2 80%);
}
.phase-two-screen[data-layout="portrait"] .world-sky::before {
  top: 15%; right: 17%; width: 11%;
}
.phase-two-screen[data-layout="portrait"] .world-hills {
  inset: 45% 0 0;
  clip-path: polygon(0 44%, 7% 29%, 15% 37%, 23% 14%, 32% 32%, 43% 20%, 56% 39%, 64% 20%, 73% 32%, 84% 16%, 92% 29%, 100% 19%, 100% 100%, 0 100%);
}
.phase-two-screen[data-layout="portrait"] .world-meadow {
  bottom: -14%; height: 52%;
}
.phase-two-screen[data-layout="portrait"] .world-lake {
  left: 7%; right: 7%; bottom: 7%; height: 38%;
  border-width: 6px;
}
.phase-two-screen[data-layout="portrait"] .world-vortex {
  top: 32%; width: clamp(84px, 25vw, 112px);
  box-shadow: 0 0 0 4px #99fbf0, 0 0 0 9px #2f72c6, 0 0 25px 11px #70d5f6a1, inset 0 0 0 5px #0b3478;
}
.phase-two-screen[data-layout="portrait"] .vortex-ring {
  display: block; position: absolute; inset: 10%;
  border: 4px dashed #c8fef3; border-radius: 50%;
  box-shadow: 0 0 0 3px #2064c4, inset 0 0 0 4px #1b4c99;
  animation: vortex-spin 5s steps(32) infinite;
}
.phase-two-screen[data-layout="portrait"] .vortex-spiral { inset: 17%; }
.phase-two-screen[data-layout="portrait"] .vortex-eye {
  display: block; position: absolute; inset: 42%; border-radius: 50%;
  background: #fff7b5; box-shadow: 0 0 0 3px #ffa659, 0 0 12px 5px #f6edb2;
}
.phase-two-screen[data-layout="portrait"] .world-palm {
  --palm-facing: 1;
  bottom: 18%; width: 28%; height: 43%;
  background: none; animation: none;
}
.phase-two-screen[data-layout="portrait"] .palm-left { left: 4%; }
.phase-two-screen[data-layout="portrait"] .palm-right { --palm-facing: -1; right: 4%; }
.phase-two-screen[data-layout="portrait"] .world-palm i {
  display: block; position: absolute; bottom: 0; left: 47%; width: 11%; height: 74%;
  transform-origin: bottom; border: 3px solid #694466;
  background: repeating-linear-gradient(0deg, #9c7047 0 8px, #d29b59 8px 14px, #825b58 14px 19px);
  box-shadow: 3px 3px #112d54;
  animation: portrait-palm-trunk-wind 7s steps(8, end) infinite alternate;
}
.phase-two-screen[data-layout="portrait"] .world-palm b {
  display: block; position: absolute; top: 16%; left: 45%; width: 50%; height: 13%;
  transform-origin: left center;
  background: repeating-linear-gradient(90deg, #153d62 0 4px, #277a61 4px 15px, #55bf75 15px 22px);
  clip-path: polygon(0 40%, 17% 0, 100% 42%, 83% 100%, 22% 69%);
  animation: portrait-palm-frond-wind 4.8s steps(6, end) infinite alternate;
}
.phase-two-screen[data-layout="portrait"] .world-palm b:nth-of-type(1) { --frond-angle: -72deg; }
.phase-two-screen[data-layout="portrait"] .world-palm b:nth-of-type(2) { --frond-angle: -35deg; animation-delay: -.8s; }
.phase-two-screen[data-layout="portrait"] .world-palm b:nth-of-type(3) { --frond-angle: 4deg; animation-delay: -1.6s; }
.phase-two-screen[data-layout="portrait"] .world-palm b:nth-of-type(4) { --frond-angle: 45deg; animation-delay: -2.4s; }
.phase-two-screen[data-layout="portrait"] .world-palm b:nth-of-type(5) { --frond-angle: 80deg; animation-delay: -3.2s; }
.phase-two-screen[data-layout="portrait"] .palm-right i,
.phase-two-screen[data-layout="portrait"] .palm-right b {
  animation-direction: alternate-reverse;
}
.phase-two-screen[data-layout="portrait"] .world-plants { bottom: 10%; height: 11%; }
.phase-two-screen[data-layout="portrait"] .phase-two-character { width: clamp(82px, 24vw, 106px); }
.phase-two-screen[data-layout="portrait"] .phase-two-character.fairy { width: clamp(88px, 26vw, 112px); }
@media (max-width: 360px) { .topbar .brand-text { display: none; } }

/* Pixel paradise cover: artwork remains intact; controls float above the sea. */
.studio-intro { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; overflow: hidden; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); background: #000; color: #fff3d6; }
.studio-intro-button { display: grid; justify-items: center; gap: 1.25rem; width: min(85vw, 26rem); padding: 1rem; border: 0; background: transparent; color: #eadfc8; cursor: pointer; animation: studio-fade-in 900ms both; }
.studio-logo-canvas { display: block; width: min(78vw, 56dvh, 420px); max-width: 100%; height: auto; image-rendering: pixelated; }
.studio-intro-button:has(.studio-logo-canvas) { width: min(90vw, 460px); animation: none; }
.studio-intro-button[data-turning] .studio-logo-canvas + .studio-hint { visibility: hidden; }
.studio-hint { font-size: clamp(.7rem, 2.5vw, .8rem); letter-spacing: .05em; text-align: center; }
.studio-brand { display: grid; justify-items: center; gap: .85rem; width: min(100%, 16rem); perspective: 700px; }
.studio-flower { position: relative; display: block; width: min(11rem, 30dvh); aspect-ratio: 1; transform-origin: 50% 50%; transform-style: preserve-3d; }
.studio-color-filters { position: absolute; pointer-events: none; }
.studio-face, .studio-triangle { position: absolute; inset: 0; display: block; background: url('assets/pentonui-games-logo.png') 50% 15.217391% / 272.727273% auto no-repeat; }
.studio-face { backface-visibility: hidden; }
.studio-face-back { visibility: hidden; transform: rotate3d(4, 3, 0, 180deg); }
.studio-triangle-red { clip-path: polygon(50% 20.5%, 57.7% 34%, 42.3% 34%); filter: url('#studio-triangle-red'); }
.studio-triangle-blue { clip-path: polygon(30.45% 58.4%, 39.1% 67.9%, 25.2% 70.5%); filter: url('#studio-triangle-blue'); }
.studio-wordmark { position: relative; display: block; width: 100%; aspect-ratio: 3; background: url('assets/pentonui-games-logo.png') 50.724638% 72.60274% / 235.294118% auto no-repeat; }
.studio-wordmark::after { content: ''; position: absolute; inset: 0; background: inherit; clip-path: inset(0 0 34% 0); filter: brightness(3.8) saturate(.8); }
.studio-pixel-curtain { position: fixed; inset: 0; z-index: 115; display: grid; overflow: hidden; pointer-events: auto; }
.studio-pixel-curtain i { position: relative; display: block; background: var(--pixel-color); opacity: 1; box-shadow: inset -2px -2px #042c63, inset 2px 2px #8ce6e066; }
.studio-pixel-curtain i::after { content: ''; position: absolute; top: 20%; left: 20%; width: 25%; height: 25%; background: #c9f9f1; opacity: 0; pointer-events: none; }
.studio-pixel-curtain.is-covering i::after { animation: studio-pixel-glint var(--pixel-cover-duration) steps(4, end) var(--pixel-delay) both; }
.studio-pixel-curtain.is-revealing i { animation: studio-pixel-away var(--pixel-reveal-duration) steps(10, start) var(--pixel-reveal-delay) both; }
@keyframes studio-pixel-glint { 0%, 20%, 100% { opacity: 0; } 35%, 55% { opacity: .9; } }
@keyframes studio-pixel-away {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  25% { opacity: 1; transform: translate(38%, -62%) scale(.72); }
  100% { opacity: 0; transform: translate(65%, -140%) scale(.22); }
}
.studio-intro-button[data-turning] .studio-flower { animation: studio-flower-turn 2400ms ease-in-out both; }
.studio-intro-button[data-turning] .studio-face-front { animation: studio-flower-front 2400ms ease-in-out both; }
.studio-intro-button[data-turning] .studio-face-back { animation: studio-flower-back 2400ms ease-in-out both; }
.studio-intro-button[data-turning] .studio-wordmark, .studio-intro-button[data-turning] .studio-hint { animation: studio-lettering-out 500ms ease-out both; }
@keyframes studio-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes studio-flower-turn { 0% { transform: translateZ(0) rotate3d(4, 3, 0, 0deg); } 70%, 86% { transform: translateZ(-25px) rotate3d(4, 3, 0, 180deg); } 100% { transform: translateZ(-90px) rotate3d(4, 3, 0, 180deg) scale(.86); } }
@keyframes studio-flower-front { 0%, 34.99% { visibility: visible; } 35%, 100% { visibility: hidden; } }
@keyframes studio-flower-back { 0%, 34.99% { visibility: hidden; opacity: 1; } 35%, 86% { visibility: visible; opacity: 1; } 100% { visibility: visible; opacity: 0; } }
@keyframes studio-lettering-out { to { opacity: 0; } }
.studio-intro-button:focus-visible .studio-face { filter: drop-shadow(0 0 7px rgb(255 211 119 / .5)); }
.studio-intro-button:focus-visible { outline: 2px solid #eadfc8; outline-offset: 8px; }
@media (prefers-reduced-motion: reduce) { .studio-intro-button { animation: none; } .studio-intro-button[data-turning] .studio-flower { animation: none; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.title-screen { position: fixed; inset: 0; z-index: 40; display: block; overflow: hidden; padding: 0; isolation: isolate; background: #031633; }
.title-screen::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('assets/title-paraiso-nocturno-sin-silueta.jpg') center bottom / cover no-repeat; pointer-events: none; }
.title-art { position: absolute; bottom: 0; left: 50%; width: max(100vw, 150vh); width: max(100vw, 150dvh); aspect-ratio: 3 / 2; overflow: hidden; transform: translateX(-50%); transform-origin: center 83%; }
.title-mobile-ocean { display: none; }
.museum-ocean-flow { display: none; }
.title-reef { display: none; }
.title-art-image { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.moon-secret { position: absolute; z-index: 1; left: 78%; top: 6.6%; width: 5%; min-width: 44px; max-width: 72px; aspect-ratio: 1; }
.moon-secret button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
.moon-secret button:disabled { cursor: default; }
.moon-secret button:focus-visible { outline: 3px solid #fff3a9; outline-offset: 4px; }
.moon-silhouette { position: absolute; left: 14%; bottom: 4%; width: 72%; height: 92%; object-fit: contain; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 0 2px #043964); }
.title-screen.moon-gone:not(.moon-returned) .moon-silhouette { opacity: 0; }
.title-screen.moon-returned .moon-silhouette { opacity: 1; animation: moon-peek 1.2s steps(8, end) both; }
.moon-secret::before, .moon-secret::after { content: ''; position: absolute; z-index: 2; left: 50%; top: 50%; width: 8%; aspect-ratio: 1; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
.title-screen.moon-flashing .moon-secret::before { background: #fffde1; box-shadow: 0 0 0 4px #65e4ff, 0 0 0 9px #1568d0, 0 0 24px 12px #ffffffc9, 0 0 45px 28px #45bfffaa; animation: moon-flash .8s steps(7, end) both; }
.title-screen.moon-flashing .moon-secret::after { background: #f8f6d8; box-shadow: 0 -23px #a4f8ff, 0 23px #a4f8ff, -23px 0 #a4f8ff, 23px 0 #a4f8ff, -16px -16px #2ea4ff, 16px -16px #2ea4ff, -16px 16px #2ea4ff, 16px 16px #2ea4ff; animation: moon-sparks .8s steps(6, end) both; }
@keyframes moon-flash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); } 20%, 45% { opacity: 1; transform: translate(-50%, -50%) scale(1.35) rotate(45deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5) rotate(90deg); } }
@keyframes moon-sparks { 0%, 15% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); } 30%, 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(22deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2) rotate(75deg); } }
@keyframes moon-peek { from { clip-path: inset(100% 0 0); transform: translateY(55%); } to { clip-path: inset(0); transform: translateY(0); } }
.title-wordmark-shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; clip-path: polygon(15% 46%, 25% 44%, 44% 41%, 61% 42%, 76% 45%, 86% 50%, 89% 68%, 82% 67%, 66% 64%, 50% 63%, 35% 64%, 21% 70%, 15% 67%); }
.title-wordmark-shine::before { content: ''; position: absolute; top: 40%; height: 32%; left: -12%; width: 10%; background: linear-gradient(90deg, transparent 0 25%, #72dfff24 25% 40%, #fff2b75e 40% 47%, #fffde5ad 47% 53%, #9befff65 53% 61%, transparent 78%); -webkit-mask-image: linear-gradient(transparent, #000 16% 68%, transparent); mask-image: linear-gradient(transparent, #000 16% 68%, transparent); transform: skewX(-10deg); opacity: 0; }
.title-screen.title-shine-active .title-wordmark-shine::before { animation: title-wordmark-sweep 1.55s steps(46, end) both; }
.title-flower-button { position: absolute; z-index: 4; left: 50%; bottom: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; transform: translateX(-50%); cursor: pointer; touch-action: manipulation; }
.title-flower-button:focus-visible { outline: 3px solid #ffe888; outline-offset: 2px; }
.title-flower-button:disabled { cursor: default; }
.title-pentonui-icon { display: block; width: clamp(26px, 4vh, 36px); height: auto; image-rendering: pixelated; pointer-events: none; }
.title-flower-button.is-blooming .title-pentonui-icon { animation: title-flower-spin .8s steps(12, end) both; }
.title-flower-cameo { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.title-flower-petal, .title-flower-bubble, .title-flower-ripple { position: absolute; display: block; pointer-events: none; }
.title-flower-petal { width: 8px; height: 8px; background: var(--petal-color); box-shadow: 2px 2px 0 #061b40; opacity: 0; animation: title-flower-petal-flight .82s steps(9, end) both; }
.title-flower-bubble { width: 9px; height: 9px; border: 2px solid #bbf7ff; border-radius: 2px; background: #3ecbff52; box-shadow: inset 2px 2px #fff8cd, 0 0 7px #60d8ff; opacity: 0; animation: title-flower-spiral 1.35s steps(16, end) calc(.6s + var(--bubble-delay)) both; }
.title-flower-ripple { width: 12px; height: 3px; background: #ffe8a5; box-shadow: -12px 2px #4ad7ff, 12px 2px #4ad7ff; opacity: 0; animation: title-flower-ripple 1.05s steps(10, end) .67s both; }
.title-bubble-glows { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.title-bubble-glows i { position: absolute; display: block; width: var(--size); aspect-ratio: 1; border-radius: 50%; border: max(1px, .16vw) solid #b7f5ffb3; box-shadow: inset 0 0 14px #d5fbff9c, 0 0 13px 3px #49d4ff99, 0 0 25px 6px #248eff59; background: radial-gradient(circle at 23% 17%, #ffffffd9 0, #b8fcff91 5%, transparent 20%); opacity: .72; transform: scale(.98); animation: title-bubble-shine 3.8s ease-in-out infinite alternate; }
.title-bubble-glows i::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 32%, #e5ffff12 42%, #ffffff80 49%, #e5ffff16 54%, transparent 64%); background-size: 260% 100%; background-position: 130% 0; animation: title-bubble-sweep 5s ease-in-out infinite; }
.title-bubble-glows i::after { content: ''; position: absolute; left: 15%; top: 12%; width: 10%; aspect-ratio: 1; background: #fff; box-shadow: 0 0 7px 2px #d5fcff, 0 0 15px 4px #61caff; transform: rotate(45deg); animation: title-bubble-spark 2.7s steps(4) infinite alternate; }
.title-bubble-glows i:nth-child(1) { left: 35%; top: 14.9%; --size: 30%; -webkit-mask-image: linear-gradient(#000 0 42%, transparent 72%); mask-image: linear-gradient(#000 0 42%, transparent 72%); animation-delay: -.7s; }
.title-bubble-glows i:nth-child(2) { left: 25.9%; top: 30.2%; --size: 6.3%; animation-delay: -1.8s; }
.title-bubble-glows i:nth-child(3) { left: 31%; top: 23.2%; --size: 4.1%; animation-delay: -2.4s; }
.title-bubble-glows i:nth-child(4) { left: 31.6%; top: 38.6%; --size: 3%; animation-delay: -.3s; }
.title-bubble-glows i:nth-child(5) { left: 65.9%; top: 29.2%; --size: 3.1%; animation-delay: -1.2s; }
.title-bubble-glows i:nth-child(6) { left: 66.5%; top: 34.3%; --size: 6.5%; animation-delay: -2.1s; }
.title-bubble-glows i:nth-child(7) { left: 68.6%; top: 43.7%; --size: 2.9%; animation-delay: -.9s; }
.title-sun-glow { position: absolute; left: 43%; top: 68.5%; width: 14%; height: 15%; pointer-events: none; mix-blend-mode: screen; opacity: 0; background: radial-gradient(ellipse at 50% 55%, #fff6bdba 0 20%, #ffce645c 34%, #ff8b2933 54%, transparent 72%); animation: title-sun-pulse 10s steps(6, end) infinite; }
.title-wave-swell { position: absolute; left: -8%; right: -8%; top: 79.5%; bottom: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(transparent, #000 15% 76%, transparent); mask-image: linear-gradient(transparent, #000 15% 76%, transparent); }
.title-wave-swell::before, .title-wave-swell::after { content: ''; position: absolute; inset: 0; opacity: .65; background: url('assets/title-wave-traces.svg') left top / 256px 96px repeat; image-rendering: pixelated; animation: title-wave-swell 7s steps(28, end) infinite alternate; }
.title-wave-swell::after { opacity: .3; transform: translateY(12px) scaleX(.84); animation-duration: 9s; animation-direction: alternate-reverse; }
.title-water { position: absolute; left: -15%; right: -15%; top: 80.2%; bottom: 0; opacity: .42; mix-blend-mode: screen; background: repeating-linear-gradient(174deg, transparent 0 7px, #4bc9ff29 8px 10px, transparent 12px 23px), repeating-linear-gradient(4deg, transparent 0 13px, #ffd35b2a 14px 16px, transparent 17px 29px); -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); animation: title-water-drift 6s steps(12) infinite alternate; pointer-events: none; }
.title-water::after { content: ''; position: absolute; top: 0; bottom: 0; left: 46%; width: 8%; background: repeating-linear-gradient(178deg, transparent 0 8px, #ffe17b8c 9px 11px, transparent 12px 23px); -webkit-mask-image: linear-gradient(transparent, #000 12% 72%, transparent); mask-image: linear-gradient(transparent, #000 12% 72%, transparent); animation: title-sun-shimmer 4.5s steps(8) infinite alternate; }
.title-stars, .shooting-stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.title-stars i { position: absolute; display: block; width: 5px; height: 5px; background: #efffff; box-shadow: 0 0 0 2px #64bfff70, 0 0 12px 3px #66caffaa; animation: title-star-glow 2.5s steps(4) infinite alternate; }
.title-stars i:nth-child(1) { left: 8.1%; top: 5.8%; animation-delay: -.7s; }
.title-stars i:nth-child(2) { left: 25.1%; top: 17.6%; background: #fff2a5; box-shadow: 0 0 0 2px #ffd7649c, 0 0 13px 4px #ffb93a99; animation-delay: -1.6s; }
.title-stars i:nth-child(3) { left: 61.5%; top: 8.9%; animation-delay: -2.1s; }
.title-stars i:nth-child(4) { left: 92%; top: 7.4%; animation-delay: -.2s; }
.title-stars i:nth-child(5) { left: 68.1%; top: 14%; background: #fff2a5; box-shadow: 0 0 0 2px #ffd7649c, 0 0 13px 4px #ffb93a99; animation-delay: -1.2s; }
.title-stars i:nth-child(6) { left: 19.3%; top: 4.9%; animation-delay: -2.7s; }
.title-stars i:nth-child(7) { left: 43%; top: 3.4%; animation-delay: -1.9s; }
.title-stars i:nth-child(8) { left: 77%; top: 5.9%; animation-delay: -.9s; }
.title-stars i:nth-child(9) { left: 14%; top: 13%; animation-delay: -2.3s; }
.title-stars i:nth-child(10) { left: 56%; top: 11%; animation-delay: -1.3s; }
.shooting-stars i { position: absolute; left: -15%; top: 7%; display: block; width: 120px; height: 4px; background: linear-gradient(90deg, transparent 0 13%, #1f70b7 13% 35%, #4dc8ff 35% 75%, #fffce1 75%); box-shadow: 0 0 6px #84d7ff; transform: rotate(15deg); opacity: 0; animation: shooting-star 11s steps(45, end) infinite; }
.shooting-stars i:nth-child(2) { top: 22%; animation-delay: -6s; animation-duration: 14s; }
.shooting-stars i:nth-child(3) { top: 13%; width: 75px; animation-delay: -3s; animation-duration: 17s; }
/* Continue and New game are mutually exclusive: keep the visible action centered. */
.title-menu { position: absolute; z-index: 2; bottom: 16%; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 9px 90px; width: min(80%, 510px); text-align: center; }
.title-play { width: 100%; min-width: 0; min-height: 43px; padding: 9px 7px; border: 3px solid #fff3b8; background: linear-gradient(#fff1a4, #ffd047 57%, #f38b24); box-shadow: inset -4px -4px #b75b17, 4px 5px #061636; color: #0a2a53; font-family: 'Press Start 2P', ui-monospace, monospace; font-size: clamp(8px, .72vw, 10px); line-height: 1.5; text-transform: uppercase; text-shadow: 1px 1px #fff5; cursor: pointer; }
.title-play-secondary { border-color: #9aeafd; background: linear-gradient(#256da7, #0c3a78); color: #fff2c7; box-shadow: inset -4px -4px #082657, 4px 5px #061636; text-shadow: 2px 2px #06234d; font-size: 8px; }
.title-play:hover:not(:disabled), .title-play:focus-visible { filter: brightness(1.16); transform: translateY(-2px); }
.title-play:active:not(:disabled) { transform: translate(3px, 3px); }
.title-play:disabled { opacity: .57; cursor: not-allowed; filter: grayscale(.3); }
.title-save-note { grid-column: 1 / -1; justify-self: center; margin: 0; padding: 4px 6px; background: #031b45ad; color: #fff5cd; font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 7px; line-height: 1.6; text-shadow: 2px 2px #061636; white-space: nowrap; }
.title-museum-button { grid-column: 1 / -1; justify-self: center; width: min(72%, 286px); min-height: 38px; border-color: #bbf6ee; background: linear-gradient(#2d91aa, #176277 58%, #0b415d); color: #fff0ac; box-shadow: inset -4px -4px #082d4a, 4px 5px #061636; }
.title-museum-button[aria-busy="true"] { cursor: wait; }
.title-utilities { position: absolute; z-index: 2; right: max(14px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); display: flex; gap: 5px; padding: 4px; background: #031b42ba; border: 2px solid #5ca4d2; box-shadow: 3px 3px 0 #061636; }
.title-utilities button { min-height: 30px; padding: 5px 8px; border: 1px solid transparent; background: transparent; color: #e8f6ff; font-family: 'Press Start 2P', ui-monospace, monospace; font-size: 7px; line-height: 1.5; text-shadow: 2px 2px #031a37; cursor: pointer; }
.title-utility-links { display: flex; flex-direction: inherit; align-items: inherit; gap: 5px; }
.title-utilities .title-more-button { display: none; }
.title-utilities button:hover, .title-utilities button:focus-visible { border-color: #8eecff; background: #174b80; }
.museum-journey { position: absolute; z-index: 8; inset: 0; overflow: hidden; pointer-events: none; font-family: 'Press Start 2P', ui-monospace, monospace; }
.museum-journey-scene { position: absolute; inset: 0; overflow: hidden; background: transparent; }
.museum-journey-scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; image-rendering: pixelated; opacity: 0; }
.museum-journey.has-scene .museum-journey-scene img { opacity: 1; }
.museum-journey[data-phase="settle"] .museum-journey-scene img { animation: museum-settle .36s steps(6, end) both; }
.museum-journey-pixel-light { position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(90deg, transparent 0 6%, #74e8ff3d 6% 8%, transparent 8% 14%); mix-blend-mode: screen; }
.museum-journey.frame-a .museum-journey-pixel-light { animation: museum-pixel-cut-a .13s steps(3, end) both; }
.museum-journey.frame-b .museum-journey-pixel-light { animation: museum-pixel-cut-b .13s steps(3, end) both; }
.museum-exterior-effects { display: none; }
.museum-exterior-actions { position: absolute; z-index: 2; left: 50%; bottom: max(7%, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 9px; width: min(88%, 490px); padding: 16px 18px; border: 4px solid #91e8e1; background: #07294be8; box-shadow: inset 0 0 0 3px #235f75, 7px 7px #03162e; color: #fff1b0; text-align: center; pointer-events: auto; animation: museum-actions-in .25s steps(5, end) both; }
.museum-exterior-actions small { color: #84ddd8; font-size: 7px; letter-spacing: .16em; }
.museum-exterior-actions h2 { margin: 1px 0; color: #ffe08c; font-size: clamp(13px, 2vw, 22px); line-height: 1.45; text-shadow: 3px 3px #092b58; }
.museum-exterior-actions p { margin: 0 0 3px; color: #d6f0e5; font: 11px/1.55 system-ui, sans-serif; }
.museum-enter, .museum-return { width: min(100%, 330px); min-height: 42px; padding: 8px 12px; border: 3px solid #fff0aa; background: linear-gradient(#ffd866, #f5a937); box-shadow: inset -4px -4px #a94f19, 4px 4px #03162e; color: #092b57; font: 9px/1.5 'Press Start 2P', ui-monospace, monospace; cursor: pointer; }
.museum-return { min-height: 34px; border-color: #8cdbdf; background: #174f72; box-shadow: inset -3px -3px #082c4c, 3px 3px #03162e; color: #e4f8ef; font-size: 7px; }
.museum-enter:hover, .museum-enter:focus-visible, .museum-return:hover, .museum-return:focus-visible { filter: brightness(1.16); transform: translateY(-2px); outline: 2px solid #fff; outline-offset: 2px; }
.title-screen.museum-transitioning .title-menu, .title-screen.museum-transitioning .title-utilities, .title-screen.museum-transitioning .title-flower-button { opacity: 0; pointer-events: none; transition: opacity .18s steps(3, end); }
.title-screen.museum-scene-active .title-art-image, .title-screen.museum-scene-active .moon-secret, .title-screen.museum-scene-active .title-wordmark-shine, .title-screen.museum-scene-active .title-bubble-glows, .title-screen.museum-scene-active .title-sun-glow, .title-screen.museum-scene-active .title-wave-swell, .title-screen.museum-scene-active .title-water, .title-screen.museum-scene-active .title-stars, .title-screen.museum-scene-active .shooting-stars { visibility: hidden; }
.title-screen.museum-transitioning .title-reef-creature { pointer-events: none; }
@keyframes museum-pixel-cut-a { 0% { opacity: .7; transform: translateX(-8%); } 100% { opacity: 0; transform: translateX(8%); } }
@keyframes museum-pixel-cut-b { 0% { opacity: .7; transform: translateX(8%); } 100% { opacity: 0; transform: translateX(-8%); } }
@keyframes museum-settle { from { transform: scale(1.035); filter: brightness(1.12); } to { transform: scale(1); filter: brightness(1); } }
@keyframes museum-actions-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes museum-ocean-chop { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
@keyframes museum-final-bubbles { from { transform: translateY(34px); opacity: .12; } 35% { opacity: .58; } to { transform: translateY(-64px); opacity: .08; } }
@keyframes museum-creature-fade { 0%, 8% { opacity: 0; } 100% { opacity: 1; } }
.title-dialog { max-height: min(86vh, 660px); overflow: auto; }
.save-transfer-dialog textarea { display:block; width:100%; box-sizing:border-box; margin:12px 0; padding:12px; border:2px solid #86dddc; border-radius:4px; background:#092c4b; color:#fff2bd; font:16px/1.5 ui-monospace,monospace; resize:vertical; overflow-wrap:anywhere; }
.save-transfer-dialog .primary-button { width:100%; }
.save-transfer-dialog [hidden] { display:none; }
.save-transfer-dialog .transfer-status { min-height:3em; overflow-wrap:anywhere; }
.title-dialog ul { padding-left: 20px; }
.debug-dialog .option-row { cursor: pointer; }
.debug-release { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 14px; padding: 10px 12px; border: 2px solid #70bdd2; background: #0c365d; color: #d6f0e5; font: 13px/1.6 ui-monospace, monospace; }
.debug-release strong { color: #ffe58d; }
.debug-dialog .option-row:hover, .debug-dialog .option-row:focus-visible { background: #195582; }
.debug-label { display: block; margin: 4px 0 8px; color: #fff1b3; font-size: 12px; font-weight: 900; }
.debug-sections{display:grid;gap:8px;margin:12px 0}
.debug-section{border:2px solid #70bdd2;background:#082d52}
.debug-section[open]{border-color:#9ce9e1;box-shadow:inset 0 0 0 2px #164f70}
.debug-section summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px 12px;color:#fff1b3;background:#0c365d;cursor:pointer;font:10px/1.4 'Press Start 2P',ui-monospace,monospace;list-style:none}
.debug-section summary::-webkit-details-marker{display:none}
.debug-section summary::after{content:'+';flex:none;color:#8ee3df;font-size:18px}
.debug-section[open] summary::after{content:'−'}
.debug-section summary small{margin-left:auto;color:#b8dddf;font:10px/1.35 ui-monospace,monospace;text-align:right}
.debug-section-postgame summary{background:linear-gradient(90deg,#173b65,#3e3a73)}
.debug-section-redemption summary{background:linear-gradient(90deg,#4a1240,#7a2a5a)}
.debug-section-body{padding:9px}
.debug-section-statistics{min-width:0}
.statistics-panel{min-width:0;font:14px/1.55 ui-monospace,monospace;overflow-wrap:anywhere}
.statistics-panel p{font:inherit;margin:10px 0}
.statistics-panel .statistics-mode{color:#ffe7a0;border-left:4px solid #ffe7a0;padding:7px 10px;background:#123e58}
.statistics-panel label{display:grid;gap:6px;min-width:0}
.statistics-panel input,.statistics-panel select{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:8px;color:#ecfcff;background:#06253c;border:2px solid #73c8d4;font:16px ui-monospace,monospace}
.statistics-panel form{display:grid;gap:8px}
.statistics-panel .option-row{min-height:44px;margin:0;font-size:10px;justify-content:center;text-align:center}
.statistics-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.statistics-controls label{flex:1 1 140px}
.statistics-controls button{flex:1 1 90px}
.statistics-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:14px 0}
.statistics-cards>div{background:#124965;border:1px solid #79cbd2;padding:12px;display:grid;gap:6px}
.statistics-cards span{font-size:12px;color:#c0e2e7}
.statistics-cards strong{font-size:20px;color:#fff0b0}
.statistics-table{overflow:auto;max-height:340px;border:1px solid #619da9}
.statistics-table table{width:100%;min-width:400px;border-collapse:collapse;font:12px/1.5 ui-monospace,monospace;text-align:left}
.statistics-table caption{padding:9px;text-align:left;background:#0b324e;color:#c0e2e7}
.statistics-table th,.statistics-table td{padding:9px 7px;border-bottom:1px solid #315a72;vertical-align:top}
.statistics-table th{color:#ffe7a0;background:#0b324e}
.statistics-table td:first-child{min-width:118px}
.statistics-panel .statistics-note{font-size:12px;color:#b8dddf}
.debug-section-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.debug-section-actions .option-row{justify-content:center;margin:0;font-size:9px;line-height:1.55;text-align:center}
.debug-section-note{margin:9px 2px 1px;color:#b8dddf;font:10px/1.5 ui-monospace,monospace}
.debug-creatures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.debug-creature { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 71px; padding: 4px 2px; border: 2px solid #70bdd2; background: #0c365d; color: #e9f7dc; font: 7px/1.35 'Press Start 2P', ui-monospace, monospace; text-align: center; cursor: pointer; }
.debug-creature:hover, .debug-creature:focus-visible { background: #195582; }
.debug-creature[aria-pressed="true"] { border-color: #ffe58d; background: #195582; box-shadow: inset 0 0 0 2px #7be8e6; color: #ffe7a4; }
.debug-creature canvas { display: block; width: 43px; height: 43px; object-fit: contain; image-rendering: pixelated; }
.debug-creature span { overflow-wrap: anywhere; }
@media (max-width: 420px) { .debug-creatures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.debug-spawn-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.debug-spawn-actions .option-row { justify-content: center; font-size: 11px; text-align: center; }
.debug-coming-soon { color: #b8dddf; }
@media(max-width:520px){.debug-section summary{align-items:flex-start;flex-direction:column;gap:3px;padding-right:34px;position:relative}.debug-section summary::after{position:absolute;right:11px;top:11px}.debug-section summary small{margin-left:0;text-align:left}.debug-section-actions{grid-template-columns:1fr}}
.option-row { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; margin: 10px 0; padding: 9px 12px; border: 3px solid #86dddc; background: #0c365d; color: #fff2bd; font-size: 12px; font-weight: 900; text-align: left; }
.option-row input { width: 18px; height: 18px; accent-color: #93dfce; }
.dive-overlay { position: fixed; inset: 0; z-index: 50; overflow: hidden; pointer-events: none; opacity: 0; background: linear-gradient(180deg, #9debf0 0, #4ba9d1 11%, #176497 33%, #082d63 72%, #041c42 100%); }
.dive-overlay::before { content: ''; position: absolute; left: -10%; right: -10%; top: 0; height: 22px; background: repeating-linear-gradient(90deg, #d5fff4 0 40px, #74cae8 40px 88px, #f0e3bb 88px 104px); box-shadow: 0 0 25px #b8faff; }
.dive-overlay i { position: absolute; bottom: -12%; width: 24px; height: 24px; border: 3px solid #c9fff5b8; border-radius: 50%; box-shadow: 0 0 9px #a3eaf8; animation: dive-bubble-rise .9s ease-out both; }
.dive-overlay i:nth-child(1) { left: 12%; animation-delay: .12s; }
.dive-overlay i:nth-child(2) { left: 34%; width: 12px; height: 12px; animation-delay: .3s; }
.dive-overlay i:nth-child(3) { left: 68%; width: 32px; height: 32px; animation-delay: .08s; }
.dive-overlay i:nth-child(4) { left: 87%; width: 16px; height: 16px; animation-delay: .22s; }
.dive-overlay.active { animation: dive-veil 1.05s ease-in-out forwards; }
.title-screen.is-diving .title-art { animation: title-sink 1.05s cubic-bezier(.2,.7,.2,1) forwards; }
.title-screen.is-diving .title-menu { animation: title-menu-away .3s ease-in forwards; }
.title-screen.is-diving .title-utilities { animation: title-controls-away .3s ease-in forwards; }
.title-screen.is-diving .title-flower-button { animation: title-flower-away .3s ease-in forwards; }
@keyframes title-star-glow { from { opacity: .2; transform: scale(.5); filter: hue-rotate(45deg); } to { opacity: 1; transform: scale(1.4); filter: hue-rotate(0); } }
@keyframes title-bubble-shine { 0%, 15% { opacity: .62; transform: scale(.98); filter: hue-rotate(-8deg); } 70%, 100% { opacity: .96; transform: scale(1.025); filter: hue-rotate(8deg); } }
@keyframes title-bubble-spark { from { opacity: .5; transform: rotate(45deg) scale(.7); } to { opacity: 1; transform: rotate(45deg) scale(1.4); } }
@keyframes title-bubble-sweep { 0%, 22% { background-position: 130% 0; opacity: 0; } 35% { opacity: .6; } 62%, 100% { background-position: -115% 0; opacity: 0; } }
@keyframes title-wordmark-sweep { 0% { left: -12%; opacity: 0; } 9% { opacity: 1; } 88% { opacity: 1; } 100% { left: 102%; opacity: 0; } }
@keyframes shooting-star { 0%, 76% { opacity: 0; transform: translate(0, 0) rotate(15deg); } 79% { opacity: 1; } 88% { opacity: 0; transform: translate(108vw, 18vh) rotate(15deg); } 100% { opacity: 0; } }
@keyframes title-water-drift { from { transform: translateX(-3%) skewY(-1deg); opacity: .24; } to { transform: translateX(3%) skewY(1deg); opacity: .5; } }
@keyframes title-wave-swell { from { background-position: -68px 0; transform: translateY(-3px) skewY(-.25deg); } to { background-position: 92px 0; transform: translateY(4px) skewY(.25deg); } }
@keyframes title-sun-pulse { 0%, 72%, 100% { opacity: 0; transform: scale(.94); } 79% { opacity: .28; transform: scale(1.04); } 86% { opacity: .53; transform: scale(1.14); } 94% { opacity: .21; transform: scale(1.02); } }
@keyframes title-sun-shimmer { from { transform: translateX(-8%) scaleX(.86); opacity: .34; } to { transform: translateX(8%) scaleX(1.16); opacity: .78; } }
@keyframes title-mobile-wave { from { transform: translateX(-12px); opacity: .25; } to { transform: translateX(14px); opacity: .75; } }
@keyframes title-reef-drift { from { transform: translate(-6px, -5px); } to { transform: translate(9px, 6px); } }
@keyframes title-reef-bubble-rise { from { transform: translateY(18px); opacity: 0; } 25% { opacity: .65; } to { transform: translateY(-65px); opacity: 0; } }
@keyframes title-creature-pop { 0%, 100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-15px) scale(1.22, .88); } 65% { transform: translateY(3px) scale(.9, 1.12); } }
@keyframes title-creature-spark { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); } }
@keyframes title-flower-spin { 0% { transform: rotate(0) scale(1); } 40% { transform: rotate(180deg) scale(1.25); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes title-flower-petal-flight { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0); } 14%, 70% { opacity: 1; } 55% { transform: translate(calc(-50% + var(--mid-x)), calc(-50% + var(--mid-y))) rotate(135deg); } 100% { opacity: 0; transform: translate(calc(-50% + var(--end-x)), calc(-50% + var(--end-y))) rotate(270deg); } }
@keyframes title-flower-spiral { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 18%, 75% { opacity: 1; } 55% { transform: translate(calc(-50% + var(--swirl-x)), -35px) scale(1.15); } 100% { opacity: 0; transform: translate(calc(-50% + var(--end-x)), var(--rise-y)) scale(.55); } }
@keyframes title-flower-ripple { 0% { opacity: 0; transform: translateX(-50%) scaleX(.3); } 25% { opacity: .8; } 100% { opacity: 0; transform: translateX(-50%) scaleX(6); } }
@keyframes title-flower-away { to { opacity: 0; transform: translate(-50%, -28px); } }
@keyframes title-sink { from { transform: translateX(-50%) scale(1); filter: brightness(1); } to { transform: translate(-50%, -35%) scale(1.22); filter: brightness(.38) saturate(1.35); } }
@keyframes title-sink-mobile { from { transform: translateY(0) scale(1); filter: brightness(1); } to { transform: translateY(-40%) scale(1.22); filter: brightness(.38) saturate(1.35); } }
@keyframes title-menu-away { to { opacity: 0; transform: translate(-50%, -28px); } }
@keyframes title-controls-away { to { opacity: 0; transform: translateY(-28px); } }
@keyframes dive-veil { 0% { opacity: 0; transform: translateY(100%); } 38%, 56% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-28%); } }
@keyframes dive-bubble-rise { to { transform: translateY(-115vh) translateX(15px); opacity: 0; } }
@media (max-aspect-ratio: 6/5) {
  .title-screen::before { background: #031a42; }
  .title-art { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
  .title-mobile-ocean { position: absolute; inset: 60vw 0 0; display: block; background: #052d60 url('assets/title-ocean-extension.svg') center top / 100% 100% no-repeat; image-rendering: pixelated; pointer-events: none; }
  .title-mobile-ocean::before, .title-mobile-ocean::after { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  .title-mobile-ocean::before { z-index: 1; background: repeating-linear-gradient(90deg, transparent 0 28px, #91ecff42 30px 33px, transparent 35px 70px); mix-blend-mode: screen; transform-origin: 50% 0; }
  .title-mobile-ocean::after { z-index: 1; top: 4%; bottom: auto; height: 25%; background: repeating-linear-gradient(90deg, transparent 0 12%, #d4fff076 13% 18%, transparent 19% 31%); -webkit-mask-image: linear-gradient(transparent, #000 32% 74%, transparent); mask-image: linear-gradient(transparent, #000 32% 74%, transparent); }
  .title-mobile-ocean i { position: absolute; display: block; width: 20px; height: 2px; background: #a7e8ee; box-shadow: 21px 0 #358db9, 44px 5px #287db1, -31px 6px #66c5d7; opacity: .5; animation: title-mobile-wave 5.5s steps(12, end) infinite alternate; }
  .title-mobile-ocean i:nth-child(1) { left: 12%; top: 9%; animation-delay: -1s; }
  .title-mobile-ocean i:nth-child(2) { left: 70%; top: 18%; animation-delay: -3.4s; }
  .title-mobile-ocean i:nth-child(3) { left: 31%; top: 28%; animation-delay: -.8s; }
  .title-mobile-ocean i:nth-child(4) { left: 78%; top: 41%; animation-delay: -4.1s; }
  .title-mobile-ocean i:nth-child(5) { left: 6%; top: 53%; animation-delay: -2.6s; }
  .title-mobile-ocean i:nth-child(6) { left: 50%; top: 66%; animation-delay: -1.7s; }
  .title-mobile-ocean i:nth-child(7) { left: 24%; top: 79%; animation-delay: -3.9s; }
  .title-mobile-ocean i:nth-child(8) { left: 75%; top: 89%; animation-delay: -2.1s; }
  .title-reef { position: absolute; inset: calc(66.667vw + 310px) 0 0; display: block; background: url('assets/title-reef-coarse.svg') center bottom / 100% 100% no-repeat; pointer-events: none; }
  .title-reef-creature { position: absolute; display: block; width: clamp(54px, 17vw, 78px); aspect-ratio: 1; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; touch-action: manipulation; filter: drop-shadow(3px 4px 0 #031a3b) drop-shadow(0 0 7px #5eafd088); animation: title-reef-drift 6s steps(12, end) infinite alternate; }
  .title-reef-creature canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
  .title-reef-creature:focus-visible { outline: 3px solid #fff0a5; outline-offset: 3px; }
  .title-reef-creature.is-tapped canvas { animation: title-creature-pop .65s steps(7, end) both; }
  .title-reef-creature::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; background: #fff5b1; box-shadow: 0 -35px #a7f3ff, 0 35px #a7f3ff, -35px 0 #a7f3ff, 35px 0 #a7f3ff, -23px -23px #ffd992, 23px -23px #ffd992, -23px 23px #ffd992, 23px 23px #ffd992; opacity: 0; pointer-events: none; }
  .title-reef-creature.is-tapped::after { animation: title-creature-spark .65s steps(6, end) both; }
  .title-reef-jelly { left: 14%; top: 9%; }
  .title-reef-fish { right: 11%; top: 19%; animation-duration: 7s; animation-direction: alternate-reverse; }
  .title-reef-puffer { left: 40%; top: 57%; animation-duration: 8s; animation-delay: -3s; }
  .title-reef i { position: absolute; display: block; width: 10px; height: 10px; border: 2px solid #85dce4a6; box-shadow: inset 2px 2px #e8f9dc70, 2px 2px #062755; animation: title-reef-bubble-rise 5s steps(10, end) infinite; }
  .title-reef i:nth-of-type(1) { left: 11%; top: 41%; animation-delay: -1s; }
  .title-reef i:nth-of-type(2) { left: 33%; top: 75%; width: 7px; height: 7px; animation-delay: -3.2s; }
  .title-reef i:nth-of-type(3) { left: 73%; top: 63%; animation-delay: -2s; }
  .title-reef i:nth-of-type(4) { left: 90%; top: 31%; width: 7px; height: 7px; animation-delay: -4s; }
  .title-art-image { position: absolute; top: 0; left: 0; width: 100%; height: auto; -webkit-mask-image: linear-gradient(#000 0 94%, transparent 100%); mask-image: linear-gradient(#000 0 94%, transparent 100%); }
  .moon-secret { top: 1vw; }
  .moon-silhouette { left: 29%; bottom: 18%; width: 42%; height: 65%; filter: drop-shadow(0 0 2px #6bdcff); }
  .title-wordmark-shine, .title-bubble-glows, .title-stars, .shooting-stars { height: 66.667vw; bottom: auto; }
  .title-water { top: 53.5vw; bottom: auto; height: 13.2vw; }
  .title-wave-swell { top: 53vw; bottom: auto; height: 14vw; }
  .title-sun-glow { left: 41%; top: 45vw; width: 18%; height: 13vw; }
  .title-flower-button { top: calc(64.5vw - 4px); bottom: auto; }
  .title-pentonui-icon { position: relative; z-index: 1; width: clamp(32px, 4vw, 40px); }
  .title-screen.is-diving .title-art { animation-name: title-sink-mobile; }
  .title-menu { top: calc(66.667vw + 48px); bottom: auto; }
  .museum-journey-scene { bottom: auto; height: 62.5vw; max-height: 40vh; background: #062454; -webkit-mask-image: linear-gradient(#000 0 96%, transparent 100%); mask-image: linear-gradient(#000 0 96%, transparent 100%); }
  .museum-journey-scene img { object-fit: contain; object-position: center top; }
  .museum-journey[data-phase="settle"] .museum-journey-scene, .museum-journey.is-exterior .museum-journey-scene { height: 62.5vw; max-height: 40vh; }
  .museum-journey[data-phase="settle"] .museum-journey-scene img, .museum-journey.is-exterior .museum-journey-scene img { object-fit: contain; object-position: center top; }
  .museum-exterior-actions { top: calc(min(62.5vw, 40vh) + 18px); bottom: auto; width: min(84%, 390px); padding: 13px 12px; }
  /* The scene and its continuation share one edge for every storyboard frame. */
  .title-screen.museum-transitioning .title-mobile-ocean {
    inset: min(var(--museum-art-vw, 62.5vw), 40vh) 0 0;
    overflow: hidden; transform: none; animation: none;
  }
  .museum-ocean-flow {
    display: block;
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 1; opacity: var(--museum-flow, 0); image-rendering: pixelated;
    pointer-events: none;
  }
  .title-screen.museum-transitioning .title-mobile-ocean i {
    z-index: 2; opacity: calc(.5 * (1 - var(--museum-flow, 0)));
  }
  .title-screen.museum-transitioning .title-reef {
    inset: auto 0 0; height: 142px; animation: none; transform: none;
    opacity: 1;
  }
  .title-screen.museum-transitioning:not([data-museum-phase="selection"]) .title-reef-creature { opacity: 0; }
  .title-screen.museum-transitioning[data-museum-phase="selection"] .title-reef { inset: auto 0 0; height: 142px; opacity: 1; }
  .title-screen.museum-transitioning[data-museum-phase="selection"] .title-reef-creature {
    --museum-fade-delay: 0s;
    animation-name: museum-creature-fade, title-reef-drift;
    animation-duration: 1.9s, 6s;
    animation-timing-function: steps(19, end), steps(12, end);
    animation-delay: var(--museum-fade-delay), calc(1.9s + var(--museum-fade-delay));
    animation-iteration-count: 1, infinite;
    animation-direction: normal, alternate;
    animation-fill-mode: both, both;
  }
  .title-screen.museum-transitioning[data-museum-phase="selection"] .title-reef-jelly { --museum-fade-delay: .08s; left: 10%; top: calc(-1 * clamp(132px, 20vh, 176px)); }
  .title-screen.museum-transitioning[data-museum-phase="selection"] .title-reef-fish { --museum-fade-delay: .34s; right: 9%; top: calc(-1 * clamp(112px, 17vh, 150px)); }
  .title-screen.museum-transitioning[data-museum-phase="selection"] .title-reef-puffer { --museum-fade-delay: .6s; left: 43%; top: calc(-1 * clamp(66px, 10vh, 92px)); }
  .title-screen.museum-transitioning[data-museum-phase="selection"] .title-reef i { animation: title-reef-bubble-rise 3.7s steps(9, end) infinite; opacity: .8; }
  .title-screen.museum-transitioning .title-mobile-ocean::before { opacity: calc(.55 * (1 - var(--museum-flow, 0))); background: radial-gradient(circle, transparent 0 4px, #9deaff 5px 6px, transparent 7px) 14% 76% / 22px 22px no-repeat, radial-gradient(circle, transparent 0 3px, #70d4ef 4px 5px, transparent 6px) 82% 58% / 18px 18px no-repeat, radial-gradient(circle, transparent 0 5px, #b9f7ef 6px 7px, transparent 8px) 66% 82% / 26px 26px no-repeat, radial-gradient(circle, transparent 0 2px, #78d8ee 3px 4px, transparent 5px) 30% 46% / 15px 15px no-repeat; animation: museum-final-bubbles 4.8s steps(12, end) infinite; }
  .title-screen.museum-transitioning .title-mobile-ocean::after { top: 9%; height: 58%; opacity: calc(.38 * (1 - var(--museum-flow, 0))); background: linear-gradient(90deg, transparent 0 8%, #89dff0 8% 16%, transparent 16% 31%, #f5dd7e 31% 39%, transparent 39% 58%, #6ec8e7 58% 72%, transparent 72%); -webkit-mask-image: repeating-linear-gradient(0deg, transparent 0 19px, #000 20px 22px, transparent 23px 39px); mask-image: repeating-linear-gradient(0deg, transparent 0 19px, #000 20px 22px, transparent 23px 39px); animation: museum-ocean-chop 5.2s steps(12, end) infinite alternate; }
}
@media (min-width: 651px) and (min-aspect-ratio: 6/5) {
  .title-reef { position: absolute; z-index: 2; top: 78%; right: 24%; bottom: 7%; left: 24%; height: auto; display: block; overflow: hidden; pointer-events: none; }
  .title-reef-creature { position: absolute; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; touch-action: manipulation; filter: drop-shadow(2px 3px 0 #041a36); animation: title-reef-drift 6s steps(12, end) infinite alternate; }
  .title-reef-creature canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
  .title-reef-creature:focus-visible { outline: 3px solid #fff0a5; outline-offset: 3px; }
  .title-reef-creature.is-tapped canvas { animation: title-creature-pop .65s steps(7, end) both; }
  .title-reef-jelly { right: 112px; top: 62%; }
  .title-reef-puffer { right: 56px; top: 58%; }
  .title-reef-fish { right: 8px; top: 40%; }
}
/* In portrait tablets the cover keeps its 3:2 artwork width while the tap
   target has a 44px minimum. Anchor Bowzzo's feet to the lunar rim instead
   of reusing the phone offset, which leaves the silhouette floating. */
@media (min-width: 651px) and (max-aspect-ratio: 6/5) {
  .moon-secret { top: 4.2vw; }
}
@media (min-aspect-ratio: 3/2) {
  .moon-secret { top: 16%; }
}
@media (max-width: 650px) and (max-aspect-ratio: 6/5) {
  .title-menu { top: calc(66.667vw + 48px); bottom: auto; width: min(78%, 330px); grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .title-play { min-height: 42px; font-size: 9px; }
  .title-save-note { grid-column: 1; max-width: 100%; font-size: 7px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
  .title-museum-button { grid-column: 1; width: 86%; }
  .title-utilities { left: 10px; right: 10px; top: calc(66.667vw + 248px); bottom: auto; justify-content: center; flex-wrap: wrap; }
  .title-utilities button { font-size: 9px; }
}
@media (max-width: 650px) and (max-height: 650px) and (max-aspect-ratio: 6/5) {
  .title-menu { top: calc(66.667vw + 46px); }
  .title-play { min-height: 39px; padding: 8px; }
  .title-utilities { position: absolute; top: calc(66.667vw + 236px); bottom: auto; }
  .title-reef { display: none; }
}
/* Portrait disclosure opens above its trigger, leaving the reef below free
   for the three interactive creatures, including when the menu is expanded. */
@media (max-aspect-ratio: 6/5) {
  .title-utilities {
    left: 50%; right: auto; top: auto;
    bottom: calc(100% - (66.667vw + 284px));
    transform: translateX(-50%);
    width: max-content; max-width: calc(100% - 32px);
    padding: 0; border: 0; background: transparent; box-shadow: none;
  }
  .title-utilities .title-more-button {
    display: block; min-height: 44px; padding: 10px 14px;
    border: 2px solid #83d9e5; background: #0a3458;
    box-shadow: 3px 3px 0 #061636; font-size: 9px;
  }
  .title-utilities .title-more-button[aria-expanded="true"] span { display: inline-block; transform: rotate(180deg); }
  .title-utility-links {
    display: none; position: absolute; left: 50%; bottom: calc(100% + 8px);
    transform: translateX(-50%); width: 260px; max-width: calc(100vw - 32px);
    padding: 5px; border: 2px solid #83d9e5; background: #072b4f;
    box-shadow: 4px 4px 0 #061636;
  }
  .title-utilities.is-open .title-utility-links { display: grid; }
  .title-utility-links button { width: 100%; min-height: 44px; font-size: 9px; }
}
/* Compact portrait cover, including the shorter usable viewport below the
   phone's system area: reserve a complete swimming strip for the sprites.
   Keep tall phones, tablets, landscape and the museum journey unchanged. */
@media (max-width: 650px) and (min-height: 651px) and (min-aspect-ratio: 3/5) and (max-aspect-ratio: 3/4) {
  .title-screen:not(.museum-transitioning) .title-utilities {
    top: auto;
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 124px);
  }
  .title-screen:not(.museum-transitioning) .title-reef {
    inset: auto 0 max(16px, env(safe-area-inset-bottom));
    height: 100px;
  }
  .title-screen:not(.museum-transitioning) .title-reef-jelly { top: 3px; }
  .title-screen:not(.museum-transitioning) .title-reef-fish { top: 8px; }
  .title-screen:not(.museum-transitioning) .title-reef-puffer { top: 12px; }
}
@media (max-width: 650px) and (min-height: 651px) and (min-aspect-ratio: 7/10) and (max-aspect-ratio: 3/4) {
  /* Leave room above the fish for the closed menu, including their drift. */
  .title-screen:not(.museum-transitioning) .title-reef { height: 86px; }
  .title-screen:not(.museum-transitioning) .title-reef-jelly { top: 8px; }
}
@media (min-width: 651px) and (min-aspect-ratio: 6/5) and (max-aspect-ratio: 4/3) {
  .title-menu { top: calc(50% + 16vw); bottom: auto; }
}
@media (min-width: 651px) and (max-width: 900px) {
  .title-utilities { flex-direction: column; align-items: flex-end; }
}
@media (max-height: 590px) and (min-width: 651px) {
  .title-menu { bottom: 13%; }
}
@media (max-height: 500px) and (min-aspect-ratio: 6/5) {
  .title-art { bottom: 18px; }
  .title-menu { top: auto; bottom: 28%; }
  .title-save-note { display: none; }
  .title-utilities { flex-direction: column; align-items: flex-end; }
  .title-utilities button { min-height: 26px; }
}
body.reduce-motion .title-stars i, body.reduce-motion .shooting-stars i, body.reduce-motion .title-water, body.reduce-motion .title-water::after, body.reduce-motion .title-wave-swell::before, body.reduce-motion .title-wave-swell::after, body.reduce-motion .title-sun-glow, body.reduce-motion .title-mobile-ocean, body.reduce-motion .title-mobile-ocean::before, body.reduce-motion .title-mobile-ocean::after, body.reduce-motion .title-mobile-ocean i, body.reduce-motion .title-reef, body.reduce-motion .title-reef-creature, body.reduce-motion .title-reef-creature canvas, body.reduce-motion .title-reef-creature::after, body.reduce-motion .title-reef i, body.reduce-motion .title-bubble-glows i, body.reduce-motion .title-bubble-glows i::before, body.reduce-motion .title-bubble-glows i::after, body.reduce-motion .title-flower-button.is-blooming .title-pentonui-icon, body.reduce-motion .title-flower-petal, body.reduce-motion .title-flower-bubble, body.reduce-motion .title-flower-ripple, body.reduce-motion .title-wordmark-shine::before { animation: none !important; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
@media (prefers-reduced-motion: reduce) {
  .title-stars i, .shooting-stars i, .title-water, .title-water::after, .title-wave-swell::before, .title-wave-swell::after, .title-sun-glow, .title-mobile-ocean i, .title-reef-creature, .title-reef-creature canvas, .title-reef-creature::after, .title-reef i, .title-bubble-glows i, .title-bubble-glows i::before, .title-bubble-glows i::after, .title-flower-button.is-blooming .title-pentonui-icon, .title-flower-petal, .title-flower-bubble, .title-flower-ripple, .title-wordmark-shine::before, .dive-overlay i { animation: none !important; }
}

@media (max-width: 1100px) and (max-height: 560px) and (min-aspect-ratio: 6/5) {
  .title-screen::before { background-position: center; filter: blur(10px) brightness(.4); transform: scale(1.06); }
  .title-art { width: min(100vw, 150dvh); bottom: 0; }
  .moon-secret { top: 6.6%; }
  .title-menu { top: auto; bottom: 18%; width: min(65%, 480px); gap: 7px 12px; }
  .title-play { min-height: 35px; padding: 6px 5px; font-size: 8px; }
  .title-utilities { bottom: max(8px, env(safe-area-inset-bottom)); }
  .entity.plant { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .entity.plant .pixel-sprite { width: 48px; height: 48px; }
}

/* Keep storyboard panoramas whole; the existing sea continues below them. */
.museum-journey-scene img.museum-image-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  opacity: 0; will-change: opacity, transform;
}
.museum-journey[data-phase="settle"] .museum-journey-scene img { animation: none; }
.museum-journey-pixel-light { display: none; }
@media (min-aspect-ratio: 6/5) {
  .museum-journey { --museum-art-height: min(var(--museum-art-vw, 62.5vw), 100dvh); --museum-final-width: min(100vw, 160dvh); }
  .museum-journey-scene {
    inset: 0 0 auto; height: var(--museum-art-height);
    background: linear-gradient(#030e2e 0 55%, #063b68 90%, #065685);
  }
  .title-screen.museum-transitioning .title-art {
    inset: 0; width: 100%; height: 100%; transform: none; aspect-ratio: auto;
  }
  .title-screen.museum-transitioning .title-mobile-ocean {
    display: block; position: absolute; inset: min(var(--museum-art-vw, 62.5vw), 100dvh) 0 0;
    background: #052d60 url('assets/title-ocean-extension.svg') center top / 100% 100% no-repeat;
    image-rendering: pixelated;
  }
  .title-screen.museum-transitioning .title-mobile-ocean::after {
    content: ''; position: absolute; inset: 0; opacity: .25;
    background: repeating-linear-gradient(0deg, transparent 0 22px, #9de7dd 23px 24px, transparent 25px 57px);
    animation: caustic-drift 14s linear infinite;
  }
  .title-screen.museum-transitioning .title-reef { visibility: hidden; }
  .title-screen.museum-transitioning[data-museum-phase="selection"] .title-reef {
    visibility: visible; top: min(var(--museum-art-vw, 62.5vw), 100dvh);
    left: 62%; right: 12%; bottom: 12%; height: auto;
  }
  .title-screen.museum-transitioning[data-museum-phase="selection"] .title-reef-creature {
    animation: museum-creature-fade 1.9s steps(19, end) both, title-reef-drift 6s 1.9s steps(12, end) infinite alternate;
  }
  .museum-exterior-actions {
    inset: 0; width: auto; padding: 0; border: 0; background: none; box-shadow: none;
    display: block; animation: none; pointer-events: none;
  }
  .museum-exterior-actions small, .museum-exterior-actions h2, .museum-exterior-actions p { display: none; }
  .museum-exterior-actions .museum-enter {
    position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom));
    transform: translateX(-50%); width: min(310px, 34vw);
    min-height: 38px; padding: 8px 5px; font-size: clamp(7px, .75vw, 11px);
    pointer-events: auto;
  }
  .museum-exterior-actions .museum-enter:hover, .museum-exterior-actions .museum-enter:focus-visible {
    transform: translateX(-50%) translateY(-2px); filter: brightness(1.15);
  }
  .museum-exterior-actions .museum-return {
    position: absolute; left: 20px; bottom: max(20px, env(safe-area-inset-bottom));
    width: 135px; pointer-events: auto;
  }
}

/* The detailed master closes only the desktop journey. These overlays animate the
   existing pixels rather than replacing or filtering the approved artwork. */
@media (min-width: 861px) {
  .museum-journey[data-desktop-exterior="true"] .museum-enter {
    bottom: max(16vh, env(safe-area-inset-bottom));
    width: min(380px, 42vw);
    min-height: 56px;
    padding: 14px 18px;
    font-size: clamp(10px, 1vw, 14px);
  }
  .museum-journey[data-desktop-exterior="true"] .museum-journey-scene img.museum-image-layer {
    animation: museum-desktop-exterior-settle .52s steps(10, end) both;
    transform-origin: 69% 56%;
  }
  .museum-journey-scene { container-type: size; }
  .museum-journey[data-desktop-exterior="true"] .museum-exterior-effects {
    /* Match object-fit: contain / center bottom on the 2048 × 1152 master.
       Percent anchors now refer to the artwork, including in ultrawide windows. */
    display: block; position: absolute; z-index: 2;
    inset: auto auto 0 50%; width: min(100cqw, calc(100cqh * 16 / 9));
    height: auto; aspect-ratio: 16 / 9; translate: -50% 0;
    overflow: hidden; pointer-events: none;
    animation: museum-effects-ready .52s step-end both;
  }
  .museum-journey[data-desktop-exterior="true"] .museum-exterior-effects i { position: absolute; display: block; }
  .museum-water-sheen {
    left: -12%; right: -12%; bottom: 0; height: 34%; opacity: .26; mix-blend-mode: screen;
    background: repeating-linear-gradient(0deg, transparent 0 15px, #75e9ff48 15px 17px, transparent 17px 34px);
    animation: museum-desktop-water 3.2s steps(16, end) infinite;
  }
  .museum-waterfall {
    opacity: .22; mix-blend-mode: screen;
    background: repeating-linear-gradient(180deg, transparent 0 5px, #edffff91 5px 8px, #82e9ff49 8px 15px, transparent 15px 25px);
    animation: museum-desktop-falls .58s steps(7, end) infinite;
  }
  /* Follow the water silhouettes; highlights must never spill onto the cliffs. */
  .museum-waterfall-mid {
    left: 55.5664%; top: 60.3299%; width: 4.2969%; height: 17.1007%;
    clip-path: polygon(69% 0, 100% 0, 78% 10%, 64% 24%, 60% 48%, 58% 78%, 40% 100%, 24% 92%, 12% 70%, 9% 44%, 19% 25%, 38% 10%);
  }
  .museum-waterfall-right {
    left: 84.1797%; top: 54.3403%; width: 5.0781%; height: 23.4375%;
    clip-path: polygon(55% 0, 100% 0, 80% 10%, 75% 30%, 68% 60%, 64% 86%, 45% 100%, 23% 92%, 8% 78%, 3% 57%, 10% 33%, 27% 12%);
    animation-delay: -.23s;
  }
  .museum-star-glint { width: 1.6%; aspect-ratio: 1; translate: -50% -50%; opacity: .15; background: #e8ffff; clip-path: polygon(45% 0, 55% 0, 58% 42%, 100% 47%, 100% 53%, 58% 58%, 55% 100%, 45% 100%, 42% 58%, 0 53%, 0 47%, 42% 42%); mix-blend-mode: screen; animation: museum-desktop-star 2.6s steps(5, end) infinite; }
  .museum-star-a { left: 26.2207%; top: 7.2917%; animation-delay: -.8s; }
  .museum-star-b { left: 58.9355%; top: 7.8993%; animation-delay: -1.7s; }
  .museum-star-c { left: 88.7695%; top: 5.2083%; animation-delay: -2.2s; }
  .museum-torch-glow { width: 1.9%; aspect-ratio: 30 / 38; translate: -50% -72%; opacity: .46; mix-blend-mode: screen; background: radial-gradient(ellipse at 50% 72%, #fff8a4 0 12%, #ffc037 14% 27%, #f16720a8 29% 49%, transparent 65%); animation: museum-desktop-torch 1.05s steps(4, end) infinite alternate; transform-origin: 50% 72%; }
  .museum-torch-a { left: 66.4063%; top: 44.0972%; }
  .museum-torch-b { left: 68.75%; top: 39.7569%; animation-delay: -.4s; }
  .museum-torch-c { left: 78.7109%; top: 38.9757%; animation-delay: -.7s; }
  .museum-torch-d { left: 69.7266%; top: 61.5451%; animation-delay: -.2s; }
  @keyframes museum-effects-ready { from { opacity: 0; } to { opacity: 1; } }
  @keyframes museum-desktop-exterior-settle { from { transform: scale(1.09); } to { transform: scale(1); } }
  @keyframes museum-desktop-water { from { transform: translateX(-2%); background-position: 0 0; } to { transform: translateX(2%); background-position: 0 34px; } }
  @keyframes museum-desktop-falls { from { background-position: 0 0; } to { background-position: 0 46px; } }
  @keyframes museum-desktop-star { 0%, 100% { opacity: .12; transform: scale(.7); } 45% { opacity: .95; transform: scale(1.35); } }
  @keyframes museum-desktop-torch { from { opacity: .34; transform: translateY(2px) scale(.88); } to { opacity: .7; transform: translateY(-1px) scale(1.1); } }
}

.reduce-motion .museum-exterior-effects * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .museum-exterior-effects * { animation: none !important; }
}

/* Pixel intro and opaque diagonal curtain share the supplied Claude art language. */
.studio-intro-button { gap:24px; }
.studio-pixel-curtain { display:block; z-index:130; background:transparent; pointer-events:all; }
.studio-pixel-curtain[hidden] { display:none; }
.studio-pixel-curtain canvas { width:100%; height:100%; display:block; image-rendering:pixelated; }
.phase-three-stage { background:#08051a; overflow:hidden; position:relative; }
#moon-canvas { width:100%; height:100%; position:absolute; inset:0; display:block; image-rendering:pixelated; touch-action:none; }
#moon-canvas:focus-visible { outline:2px solid #ffe590; outline-offset:-4px; }
#phase-three-to-two { z-index:3; }
.moon-postgame-thought { position:absolute; z-index:4; width:min(330px,72%); padding:13px 15px; transform:translate(-50%,-100%); border:3px solid #9cecec; background:#f8f3d7; box-shadow:5px 5px 0 #050413; color:#14264d; font:clamp(9px,1.2vw,12px)/1.75 'Press Start 2P',ui-monospace,monospace; text-align:left; pointer-events:none; animation:moon-thought-arrive .32s steps(4,end) both; }
.moon-postgame-thought[hidden] { display:none; }
.moon-postgame-thought::before { content:''; position:absolute; left:var(--moon-thought-tail-x,50%); bottom:-17px; width:18px; height:18px; transform:translateX(-50%) rotate(45deg); border-right:3px solid #9cecec; border-bottom:3px solid #9cecec; background:#f8f3d7; }
@keyframes moon-thought-arrive { from { opacity:0; transform:translate(-50%,-92%) scale(.88); } to { opacity:1; transform:translate(-50%,-100%) scale(1); } }
.moon-dialog { position:absolute; z-index:4; bottom:3%; left:50%; transform:translateX(-50%); width:min(650px,88%); padding:16px 20px; background:#110d2ff2; border:3px solid #dca3d7; box-shadow:6px 6px 0 #050413; font-size:12px; line-height:1.8; color:#f6ecff; }
.moon-dialog[hidden],.moon-fuse[hidden] { display:none; }
.moon-dialog strong { color:#ffafcd; font-size:13px; }
.moon-dialog p { min-height:3.6em; margin:8px 0; }
.moon-dialog button { display:block; margin-left:auto; padding:11px 14px; border:2px solid #9cecec; background:#294269; color:#fff4bf; font:clamp(12px,1.25vw,15px)/1.45 ui-monospace,monospace; cursor:pointer; }
.moon-fuse { position:absolute; z-index:3; bottom:5%; left:50%; transform:translateX(-50%); font-size:clamp(13px,1.55vw,18px); line-height:1.45; padding:18px 22px; max-width:90%; }
#moon-fuse { left:32%; }
.moon-golden-challenge { left:auto; right:3%; transform:none; border-color:#fff1a0; background:linear-gradient(#fff5bc,#f0aa37); color:#17284c; box-shadow:5px 5px 0 #6d3b18; text-shadow:1px 1px #ffffff80; }
.phase-three-screen.is-postgame #moon-fuse { top:clamp(72px,12%,110px); left:auto; right:3%; bottom:auto; transform:none; width:min(42%,320px); }
.phase-three-screen.is-postgame .moon-golden-challenge { top:calc(clamp(72px,12%,110px) + 86px); left:auto; right:3%; bottom:auto; transform:none; width:min(42%,320px); }
.moon-skip-cinematic { position:absolute; z-index:5; right:3%; bottom:4%; padding:10px 14px; border:2px solid #9cecec; background:#102a69e8; color:#fff4bf; box-shadow:3px 3px #050413; font:11px/1.5 'Press Start 2P',ui-monospace,monospace; cursor:pointer; }
.moon-skip-cinematic[hidden] { display:none; }
.moon-footer { min-height:62px; font-size:clamp(9px,1vw,12px); gap:16px; }
.moon-footer #moon-guide { max-width:70%; line-height:1.7; }
.moon-footer #moon-count { color:#ffe48d; text-align:right; }
@media (max-width:650px) {
  .moon-postgame-thought { width:min(300px,78%); padding:10px 12px; font-size:8px; line-height:1.7; }
  .moon-dialog { padding:12px; font-size:10px; bottom:3%; }
  .moon-dialog strong { font-size:11px; }
  .moon-footer { padding:12px; flex-direction:column; align-items:flex-start; gap:8px; }
  .moon-footer #moon-guide { max-width:100%; }
  #moon-fuse { left:50%; }
  .moon-golden-challenge { right:auto; left:50%; bottom:calc(5% + 82px); transform:translateX(-50%); }
  .phase-three-screen.is-postgame .moon-fuse { max-width:min(44%,210px); padding:12px 10px; }
  .phase-three-screen.is-postgame #moon-fuse { top:9%; left:auto; right:3%; bottom:auto; transform:none; }
  .phase-three-screen.is-postgame .moon-golden-challenge { top:calc(9% + 74px); left:auto; right:3%; bottom:auto; transform:none; }
}
@media (max-height:500px) and (orientation:landscape) {
  /* Keep every header control out of the camera-island touch zone, even
     while iOS briefly reports a zero safe-area inset during rotation. */
  .topbar { padding-right:max(64px, env(safe-area-inset-right)); }
  .moon-postgame-thought { width:min(310px,43%); padding:8px 10px; font-size:7px; line-height:1.6; }
  .moon-dialog { left:2%; transform:none; bottom:3%; width:42%; padding:9px 12px; font-size:9px; }
  .moon-dialog p { min-height:0; margin:4px 0; }
  .moon-dialog button { padding:7px 10px; font-size:12px; }
  .moon-footer { min-height:36px; padding:6px 12px; font-size:8px; }
  #phase-three-to-two { font-size:var(--game-button-size); padding:10px 15px; }
}

body.reduce-motion .moon-postgame-thought { animation:none; }
@media (prefers-reduced-motion:reduce) { .moon-postgame-thought { animation:none; } }


/* Actual swimming positions live in game state; sprite facing is independent of touch bounds. */
.entity:not(.plant):not(.seed) .pixel-sprite { transform:scaleX(var(--facing,1)); }
.pixel-particle-layer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:12; image-rendering:pixelated; }
.volume-control { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:10px 12px 14px; color:#b6ece7; font-size:9px; line-height:1.7; }
.volume-control output { color:#ffe7a2; }
.volume-control input { grid-column:1/-1; width:100%; min-height:28px; margin:0; accent-color:#ffe7a2; cursor:pointer; touch-action:pan-x; }
.volume-control input:focus-visible { outline:3px solid #9df5e5; outline-offset:4px; }

.volume-control input { appearance:none; -webkit-appearance:none; background:transparent; }
.volume-control input::-webkit-slider-runnable-track { height:8px; border:2px solid #7dbdbd; background:#092d48; }
.volume-control input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:18px; height:20px; margin-top:-8px; border:3px solid #fff2bc; border-radius:0; background:#f5be61; box-shadow:3px 3px #082441; }
.volume-control input::-moz-range-track { height:6px; border:2px solid #7dbdbd; background:#092d48; }
.volume-control input::-moz-range-thumb { width:14px; height:16px; border:3px solid #fff2bc; border-radius:0; background:#f5be61; box-shadow:3px 3px #082441; }

/* One physical diameter for the playable bubble, including its touch coordinates. */
#phase-two-screen .world-bubble { width:var(--diameter,300px); height:var(--diameter,300px); min-width:0; min-height:0; border:0; border-radius:50%; background:#75cbe0; box-shadow:0 0 36px #49f4df26,0 0 0 2px #123761; }
#phase-two-screen .world-bubble::before { inset:0; width:auto; height:auto; transform:none; border:3px solid #c3fff6; border-radius:50%; clip-path:none; background:none; box-shadow:inset 0 0 0 2px #53b9e5,inset 0 0 16px #8affff65; }
#phase-two-screen .world-bubble::after { left:12%; top:12%; width:20%; height:3%; right:auto; bottom:auto; background:#edfff4; transform:rotate(-38deg); opacity:.8; }
.sphere-landscape { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; pointer-events:none; }
.sphere-palm { position:absolute; object-fit:contain; transform-origin:50% 93%; image-rendering:pixelated; pointer-events:none; animation:sphere-palm-sway 5.8s ease-in-out infinite; --face:1; }
.sphere-palm.near { width:27%; height:32.4%; bottom:30.5%; }
.sphere-palm.near.left { left:8%; }
.sphere-palm.near.right { right:6%; bottom:29%; --face:-1; animation-delay:-2s; }
.sphere-palm.far { width:16%; height:19.2%; bottom:39%; opacity:.87; filter:brightness(.8); }
.sphere-palm.far.left { left:26%; animation-delay:-1s; }
.sphere-palm.far.right { right:24%; --face:-1; animation-delay:-3s; }
.sphere-sunbeam { position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,#fff2b828 31%,#fff5c510 48%,transparent 49%); clip-path:polygon(76% 16%,95% 92%,20% 92%); pointer-events:none; animation:world-sunbeams 8s ease-in-out infinite alternate; }
#phase-two-screen .world-vortex { top:34%; width:21%; min-width:44px; box-shadow:0 0 0 2px #99fbf0,0 0 14px #70d5f66b; }
#phase-two-screen .vortex-ring,#phase-two-screen .vortex-eye { display:none; }
#phase-two-screen .vortex-spiral { inset:0; }
#phase-two-screen .phase-two-character { width:21%; min-width:44px; }
#phase-two-screen .phase-two-character.fairy { width:20%; min-width:44px; }
#phase-two-screen .phase-two-character.postgame-archangel { width:24%; min-width:58px; }
#phase-two-guide.is-postgame-goal { color:#fff4a8; text-shadow:0 0 7px #ffe36e,2px 2px #12345c; animation:postgame-goal-pulse 1.8s steps(4,end) infinite; }
@keyframes postgame-goal-pulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.45)} }
@media(prefers-reduced-motion:reduce){#phase-two-guide.is-postgame-goal{animation:none}}
#phase-two-screen .phase-two-footer { flex:none; min-height:0; padding:12px max(12px,env(safe-area-inset-left)); }
#phase-two-screen .phase-two-stage { padding:0; }
@keyframes sphere-palm-sway { 0%,100% {transform:scaleX(var(--face)) rotate(-2deg);} 50% {transform:scaleX(var(--face)) rotate(2deg);} }
@media (max-height:500px) and (orientation:landscape) {
 #phase-two-screen .phase-two-header { padding:5px 16px; min-height:52px; }
 #phase-two-screen .phase-two-footer { padding:7px 12px; font-size:8px; }
}
.reserve-locked { opacity:.85; }
.fill-bubbles.reserve-ready {
  border-color:#fff6c0; background:#ffe866; color:#1a1033;
  box-shadow:inset 0 0 0 2px #d79726,0 0 9px #ffe86699;
  animation:reserve-ready-glow 1.5s steps(4,end) infinite alternate;
}
.fill-bubbles.reserve-ready:hover:not(:disabled) { background:#fff3a3; }
@keyframes reserve-ready-glow { to { box-shadow:inset 0 0 0 2px #d79726,0 0 16px #ffe866; } }
body.reduce-motion .fill-bubbles.reserve-ready { animation:none; }
@media (prefers-reduced-motion:reduce) { .fill-bubbles.reserve-ready { animation:none; } }

/* Explicit reserve route and the shallow water around each swimming mermaid. */
.stock-actions{display:flex;align-items:stretch;gap:8px;min-width:0}
.stock-actions .fill-bubbles{flex:1;min-width:0;width:auto}
.visit-cave{font:clamp(9px,1vw,13px)/1.4 'Press Start 2P',ui-monospace,monospace;min-height:44px;padding:9px 14px;color:#102f52;background:#ffe391;border:3px solid #a0ede7;box-shadow:3px 3px #082847;white-space:nowrap;cursor:pointer}
.phase-two-character.mermaid:not(.is-arriving){animation:none;transform:translate(-50%,-50%) rotate(var(--swim-roll,0deg))}
/* Keep the face above water; the tail remains visible under a blue water veil. */
.phase-two-character.mermaid:not(.dragging):not(.is-arriving):not(.is-awaiting-arrival) canvas {
  transform:scaleX(var(--swim-facing,1));
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 var(--waterline,52%),#0008 calc(var(--waterline,52%) + 3%),#0005 78%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 var(--waterline,52%),#0008 calc(var(--waterline,52%) + 3%),#0005 78%,transparent 96%);
}
.phase-two-character.mermaid:not(.dragging):not(.is-arriving):not(.is-awaiting-arrival)::before {
  content:'';position:absolute;z-index:1;left:12%;width:76%;top:var(--waterline,52%);height:30%;
  background:linear-gradient(#55c7d528,#12628b08);border-radius:50%;pointer-events:none;
}
@media(max-width:600px){.stock-actions{width:100%}.stock-actions .fill-bubbles{font-size:9px}.visit-cave{padding:6px 9px;font-size:10px}}

/* The same live header and navigation sizing are shared by all three worlds. */
#phase-two-screen > .phase-two-header, #phase-three-screen > .phase-two-header { display:none; }
.phase-two-screen > .topbar { flex-shrink:0; }
.phase-two-reserve { flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; padding:8px max(12px,env(safe-area-inset-left)); background:#174e68; border-bottom:2px solid #82d4d2; }
.phase-two-reserve > div { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; flex:1; }
.phase-two-reserve small { font:bold 10px/1.5 ui-monospace,monospace; color:#b5ede9; }
.phase-two-reserve strong { font:12px/1.5 'Press Start 2P',monospace; color:#fff1ae; }
.phase-two-reserve p { width:100%; margin:0; font:11px/1.4 ui-monospace,monospace; color:#c5f0ec; }
.world-activities { position:absolute; inset:0; z-index:7; pointer-events:none; }
.world-activity { position:absolute; transform:translate(-50%,-50%); display:grid; justify-items:center; padding:0; border:0; background:transparent; width:12%; min-width:40px; min-height:44px; cursor:pointer; pointer-events:auto; touch-action:manipulation; }
.world-activity canvas { width:100%; image-rendering:pixelated; pointer-events:none; }
.world-activity span { font:bold 10px/1.2 ui-monospace,monospace; padding:1px 3px; color:#fff5bf; background:#103650c9; pointer-events:none; }
.world-activity:focus-visible { outline:2px solid #fff5bf; outline-offset:2px; }
.world-activity:disabled { opacity:.3; cursor:default; }
.world-activity.meteor { width:44px; height:48px; min-height:48px; z-index:8; }
.world-activity.meteor canvas { position:absolute; inset:0 auto auto 0; width:44px; height:44px; }
.world-activity.meteor span { position:absolute; top:40px; left:50%; transform:translateX(-50%); }
.world-activity.dew { width:10%; }
.cave-reward-flight { position:fixed; z-index:1000; color:#fff1aa; text-shadow:2px 2px #10456c; font:bold 13px/1.4 ui-monospace,monospace; pointer-events:none; white-space:nowrap; }
@media (orientation:landscape) and (max-height:550px){
 .phase-two-reserve { padding:4px 12px; gap:4px 10px; }
 .phase-two-reserve p { width:auto; flex:1; font-size:10px; }
 .phase-two-reserve .visit-cave { min-height:36px; padding:4px 8px; }
}

/* Flight is continuous in sphere coordinates; emergence and vortex keep their own sequences. */
.phase-two-character.fairy:not(.is-emerging):not(.is-being-sucked) {
 animation:none; margin:0; transform:translate(-50%,-50%) rotate(var(--flight-roll,0deg));
}
.phase-two-character.fairy.dragging { --flight-roll:0deg; }

.phase-two-navigation { display:flex; justify-content:space-between; align-items:center; gap:12px; flex:none; padding:8px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left)); background:#0c294b; }
#phase-two-screen .phase-two-navigation .phase-switch { position:relative; top:auto; left:auto; right:auto; bottom:auto; width:clamp(132px,12vw,156px); }
#phase-two-screen .phase-two-navigation .phase-switch[hidden] { display:none; }
.paradise-switch { border-color:#d8ffd2; background:linear-gradient(#d9ffd0 0 45%,#8fd894 45% 100%); color:#123e3b; box-shadow:inset -4px -4px #4c9f6a,5px 5px #061b3d; white-space:normal; text-align:center; }
.paradise-switch:hover,.paradise-switch:focus-visible { background:#e6ffdc; outline-color:#d8ffd2; }
@media (max-width:650px) {
  .phase-two-navigation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); }
  #phase-two-screen .phase-two-navigation .phase-switch { width:100%; min-width:0; min-height:56px; padding:8px 4px; font-size:clamp(8px,2.3vw,11px); white-space:normal; }
  #phase-two-screen .phase-two-navigation #phase-two-to-one { grid-column:1; grid-row:1; }
  #phase-two-screen .phase-two-navigation #phase-two-to-paradise { grid-column:2; grid-row:1; }
  #phase-two-screen .phase-two-navigation #phase-two-to-three { grid-column:3; grid-row:1; }
}

/* The travel control occupies the former discovery tile, outside the playing area. */
.discovery-card #phase-one-to-two { position:relative; inset:auto; min-width:0; width:100%; max-width:180px; min-height:44px; margin:0 3px 3px 0; padding:5px 4px; }
#phase-two-adornment { display:block; width:64px; height:44px; image-rendering:pixelated; }
#phase-two-adornment[hidden], .discovery-card #phase-one-to-two[hidden] { display:none; }
/* Keep these upper controls clear of the landscape camera/status overlay. */
@media (orientation:landscape) {
  .hud-item.discovery-card { padding-right:max(80px,8vw,env(safe-area-inset-right)); }
}
@media (orientation:landscape) and (min-height:551px) {
  .phase-two-reserve { padding-right:max(80px,8vw,env(safe-area-inset-right)); }
}
.reserve-fill-wrap { position:relative; display:flex; flex:1; min-width:0; }
.stock-actions .reserve-fill-wrap .fill-bubbles { width:100%; }
.reserve-arrival-notice { position:absolute; z-index:2; inset:auto 0 0; min-height:100%; display:flex; align-items:center; justify-content:center; padding:3px 6px; text-align:center; border:2px solid #ffe4a1; background:#154c6d; color:#fff9d9; font:9px/1.4 'Press Start 2P',ui-monospace,monospace; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s; }
.reserve-arrival-notice.visible { opacity:1; visibility:visible; }
@media(prefers-reduced-motion:reduce){.reserve-arrival-notice{transition:none;}}

/* Phase 1 uses the compact phase 2 cave control as its mobile reference. */
@media(max-width:600px) {
  .stock-actions { align-items:center; gap:6px; }
  .stock-actions .reserve-fill-wrap,
  .stock-actions > .visit-cave { flex:1 1 0; align-self:center; }
  .stock-actions .reserve-fill-wrap .fill-bubbles,
  .stock-actions > .visit-cave {
    min-height:44px;
    padding:4px 6px;
    font-size:9px;
    line-height:1.35;
  }
}

/* Shared action typography across phases 1, 2 and 3. Icon-only controls keep
   their larger symbol sizing. */
.phase-switch,
.primary-button,
.stock-actions .fill-bubbles,
.visit-cave,
.moon-dialog button,
.moon-fuse,
.moon-skip-cinematic {
  font-family:var(--game-button-font);
  font-size:var(--game-button-size);
  font-weight:400;
  line-height:var(--game-button-line);
}
.ascension-message .primary-button {
  font-size:var(--game-button-size);
  line-height:var(--game-button-line);
}

.reserve-label-compact { display:none; }
/* Keep counters and actions in one row, after subtracting the camera safe area. */
@media (orientation:landscape) and (min-width:480px) {
  .bubble-stock {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:6px;
    padding-inline:max(7px,env(safe-area-inset-left)) max(7px,env(safe-area-inset-right));
    font-size:clamp(7px,.85vw,10px);
  }
  .stock-summary { min-width:0; gap:clamp(4px,.7vw,10px); }
  .bubble-stock strong { font-size:inherit; }
  .stock-actions { flex:1 1 290px; width:auto; align-items:stretch; gap:6px; }
  .stock-actions .reserve-fill-wrap { flex:1; align-self:stretch; }
  .stock-actions > .visit-cave { flex:0 0 auto; align-self:stretch; }
  .stock-actions .reserve-fill-wrap .fill-bubbles,
  .stock-actions > .visit-cave {
    min-height:44px;
    padding:4px 7px;
    font-size:clamp(8px,1vw,12px);
    line-height:1.4;
  }
  .bubble-stock #bubble-reserve { min-height:44px; }
}
@media (orientation:landscape) and (min-width:480px) and (max-width:900px) {
  .reserve-label-full { display:none; }
  .reserve-label-compact { display:inline; }
  .bubble-stock { gap:5px; }
  .stock-actions { gap:5px; }
  .stock-actions .reserve-fill-wrap { min-width:0; }
  .reserve-arrival-notice { padding:3px 4px; font-size:8px; line-height:1.25; }
}
@media (orientation:landscape) and (min-width:480px) and (max-width:600px) {
  .stock-summary .stock-arrow,
  .stock-summary .stock-bubbles { display:none; }
}

/* Short landscape viewports: a slim icon rail leaves the sphere at full height.
   The stage retains real layout bounds for its ResizeObserver and touch input. */
@media (orientation:landscape) and (max-height:550px) and (max-width:1100px) {
  #phase-two-screen {
    --phase-two-rail:80px;
    --phase-two-panel:clamp(136px,calc(100vw - 100dvh - var(--phase-two-rail) - env(safe-area-inset-left) - env(safe-area-inset-right)),200px);
    display:grid;
    grid-template-columns:var(--phase-two-rail) minmax(0,1fr) var(--phase-two-panel);
    grid-template-rows:auto minmax(0,1fr) 112px;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background:#0c294b;
  }
  #phase-two-screen[hidden] { display:none; }
  #phase-two-screen > .topbar {
    grid-column:1; grid-row:1 / -1;
    display:grid; grid-template-columns:44px;
    align-content:start; justify-content:center; justify-items:center;
    width:100%; height:auto; min-width:0; margin:0; padding:8px 4px 64px;
    gap:8px; border:0; background:transparent;
  }
  #phase-two-screen .brand-mark { width:44px; height:44px; }
  #phase-two-screen .brand-text { display:none; }
  #phase-two-screen .topbar .icon-button { width:44px; height:44px; margin:0; }
  #phase-two-screen .phase-two-stage {
    grid-column:2; grid-row:1 / -1; min-width:0; min-height:0;
  }
  #phase-two-screen .phase-two-reserve {
    grid-column:3; grid-row:1;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch;
    min-width:0; gap:6px; padding:8px 8px 6px; border:0; background:transparent;
  }
  #phase-two-screen .phase-two-reserve > div {
    flex:none; flex-direction:column; align-items:flex-start; gap:4px;
  }
  #phase-two-screen .phase-two-reserve small { font-size:10px; }
  #phase-two-screen .phase-two-reserve strong { font-size:11px; overflow-wrap:anywhere; }
  #phase-two-screen .phase-two-reserve .visit-cave {
    width:100%; min-height:44px; padding:6px 4px;
    font-size:10px; white-space:normal;
  }
  #phase-two-screen .phase-two-reserve p { flex:none; width:100%; font-size:10px; line-height:1.4; }
  #phase-two-screen .phase-two-footer {
    grid-column:3; grid-row:2;
    flex-direction:column; justify-content:flex-start; align-items:flex-start;
    min-width:0; min-height:0; padding:6px 8px; gap:8px; overflow-y:auto;
    border:0; background:transparent; font-size:8px;
  }
  #phase-two-screen .phase-two-footer span { max-width:100%; flex-shrink:0; white-space:normal; overflow-wrap:break-word; }
  /* Keep the wrapper in the box tree. iOS can retain the hit regions created by
     display:contents after landscape -> portrait even though the buttons repaint. */
  #phase-two-screen .phase-two-navigation {
    position:absolute; z-index:12; inset:0; display:block;
    padding:0; background:transparent; pointer-events:none;
  }
  #phase-two-screen .phase-two-navigation .phase-switch {
    position:absolute; bottom:calc(8px + env(safe-area-inset-bottom));
    width:calc(var(--phase-two-panel) - 16px); min-width:0; min-height:44px;
    margin:0; padding:6px 4px; font-size:9px; pointer-events:auto;
  }
  #phase-two-screen .phase-two-navigation #phase-two-to-one {
    left:calc(4px + env(safe-area-inset-left)); right:auto;
    width:calc(var(--phase-two-rail) - 8px); min-height:52px; padding:8px 6px; white-space:normal;
  }
  #phase-two-screen .phase-two-navigation #phase-two-to-three {
    left:auto; right:calc(8px + env(safe-area-inset-right));
  }
  #phase-two-screen .phase-two-navigation #phase-two-to-paradise {
    left:auto; right:calc(8px + env(safe-area-inset-right));
    bottom:calc(60px + env(safe-area-inset-bottom)); transform:none;
  }
}
@media (orientation:landscape) and (max-height:360px) and (max-width:1100px) {
  #phase-two-screen > .topbar { gap:4px; padding-top:4px; }
  #phase-two-screen .phase-two-reserve { padding:6px 8px 4px; gap:4px; }
  #phase-two-screen .phase-two-reserve small { font-size:9px; line-height:1.3; }
  #phase-two-screen .phase-two-reserve p { font-size:9px; line-height:1.25; }
  #phase-two-screen .phase-two-footer { padding:4px 8px; gap:6px; font-size:7px; line-height:1.4; }
}

/* Responsive sea sizing replaces the former count-based compact/tiny variants. */
#bubble-layer .bubble { --orb-size:var(--sea-orb-size,44px); width:var(--sea-orb-target,44px); height:var(--sea-orb-target,44px); }

/* Mini tutoriales de la fase 1: muy visibles, pero sin bloquear (no reciben toques). */
.tutorial-tip { position:absolute; z-index:40; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:7px; width:max-content; max-width:min(78%, 300px); padding:9px 12px; border:3px solid #fff6c0; background:#ffe866; color:#1a1033; box-shadow:0 0 0 3px #1a1033, 5px 7px 0 3px #07182f99; font:11px/1.55 'Press Start 2P', ui-monospace, monospace; text-align:center; }
.tutorial-tip[hidden] { display:none; }
.tutorial-tip strong { font-weight:400; }
.tutorial-tip span:not(.tip-arrow):not(.tip-pips) { font-size:8px; color:#5a2a10; }
.tip-arrow { position:absolute; left:50%; width:0; height:0; border:13px solid transparent; transform:translateX(-50%); filter:drop-shadow(0 3px 0 #1a1033); }
.plant-tip { transform:translate(-50%, calc(-100% - 18px)); animation:tip-bob .9s steps(2) infinite alternate; }
.plant-tip .tip-arrow { top:100%; margin-top:3px; left:calc(50% + var(--arrow-dx, 0px)); border-top:14px solid #ffe866; border-bottom:0; }
.reserve-reset-tip { position:fixed; width:280px; max-width:calc(100vw - 16px); font-size:10px; }
.reserve-reset-tip strong { font-size:inherit; color:inherit; }
.reserve-reset-tip::after { content:''; position:absolute; left:calc(100% - 16px); top:calc(100% + 3px); width:var(--arrow-bridge,0px); height:3px; background:#ffe866; box-shadow:0 2px #1a1033; }
.seed-tip-below { transform:translate(-50%, 18px); animation-name:seed-tip-bob-down; }
.seed-tip-below .tip-arrow { top:auto; bottom:100%; margin-top:0; margin-bottom:3px; border-top:0; border-bottom:14px solid #ffe866; }
@keyframes seed-tip-bob-down { to { transform:translate(-50%, 24px); } }
.tip-pips { display:flex; gap:5px; }
.tip-pips i { width:11px; height:11px; border:2px solid #1a1033; background:#fff6c0; }
.tip-pips i.on { background:#3fbf6a; box-shadow:inset 2px 2px #a5f6b0; }
.reserve-tip { top:16px; left:var(--tip-x, 50%); transform:translateX(-50%); animation:tip-bob-up .9s steps(2) infinite alternate; }
.reserve-tip .tip-arrow { bottom:100%; margin-bottom:3px; left:calc(50% + var(--arrow-dx, 0px)); border-bottom:14px solid #ffe866; border-top:0; filter:drop-shadow(0 -3px 0 #1a1033); }
.empty-sea.behind-tip { display:none; }
@keyframes tip-bob { to { transform:translate(-50%, calc(-100% - 24px)); } }
@keyframes tip-bob-up { to { transform:translate(-50%, 6px); } }
body.reduce-motion .tutorial-tip { animation:none !important; }
@media (prefers-reduced-motion: reduce) { .tutorial-tip { animation:none; } }
@media (max-width:600px) { .tutorial-tip { font-size:10px; padding:8px 10px; } }

/* Botón verde de créditos en la puerta del museo (aparece tras verlos por primera vez). */
.museum-credits { width: min(100%, 330px); min-height: 38px; padding: 8px 12px; border: 3px solid #c9ffb8; background: linear-gradient(#7ee88a, #2fae5a); box-shadow: inset -4px -4px #1a6b3a, 4px 4px #03162e; color: #06301a; font: 8px/1.5 'Press Start 2P', ui-monospace, monospace; cursor: pointer; }
.museum-credits:hover, .museum-credits:focus-visible { filter: brightness(1.12); transform: translateY(-2px); outline: 2px solid #fff; outline-offset: 2px; }
@media (min-aspect-ratio: 6/5) {
  .museum-exterior-actions .museum-credits {
    position: absolute; right: 20px; bottom: max(20px, env(safe-area-inset-bottom));
    width: 170px; min-height: 34px; font-size: 7px; pointer-events: auto;
  }
}

/* A child profile remains identifiable even on narrow screens. */
body[data-save-slot="personal"] .brand-text span,
body[data-save-slot="claudia"] .brand-text span,
body[data-save-slot="lea"] .brand-text span { display:block; color:#fff2a8; font-size:7px; }
body[data-save-slot="personal"] .title-save-note,
body[data-save-slot="claudia"] .title-save-note,
body[data-save-slot="lea"] .title-save-note { display:block; white-space:normal; max-width:560px; line-height:1.7; }
[data-debug-section="personal"] .option-row,
[data-debug-section="daughters"] .option-row { font-size:10px; line-height:1.6; min-height:48px; }

/* Keep close controls clear of the iPhone edge and give them a full touch target.
   Reserve their row so moving them inward never covers a heading. */
dialog.dialog { padding-top: max(66px, calc(env(safe-area-inset-top) + 58px)); }
.new-game-options { margin-top: 24px; padding-top: 14px; border-top: 2px solid #d5b584; }
.new-game-options .option-row { border-color: #e6b68e; }
.new-game-options p { font-size: 11px; }
@media (max-width: 900px), (pointer: coarse) {
  :root { --menu-edge-gap: max(64px, calc(env(safe-area-inset-right) + 16px)); }
}

/* The selected fairy and its destination share a warm, quiet glow. */
#phase-two-screen .world-vortex.is-fairy-target {
  box-shadow: 0 0 0 4px #fff2b8, 0 0 18px 7px #ffe59caa;
  animation: fairy-vortex-invitation 1.8s ease-in-out infinite alternate;
}
@keyframes fairy-vortex-invitation {
  to { box-shadow: 0 0 0 4px #fff2b8, 0 0 28px 12px #ffe59ccc; }
}
.reduce-motion #phase-two-screen .world-vortex.is-fairy-target { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #phase-two-screen .world-vortex.is-fairy-target { animation: none; }
}

/* The disclosure is an overlay. Opening it never changes the title layout. */
.title-controls { display: contents; }
.title-screen .title-utilities {
  position: fixed; z-index: 8; inset: auto; transform: none;
  display: block; width: max-content; max-width: calc(100vw - 24px);
  padding: 0; border: 0; background: transparent; box-shadow: none;
}
.title-utilities .title-more-button {
  display: block; width: 100%; min-height: 44px; padding: 10px 14px;
  border: 2px solid #83d9e5; background: #0a3458;
  box-shadow: 3px 3px 0 #061636; font-size: 9px;
}
.title-more-button[aria-expanded="true"] span { display: inline-block; transform: rotate(180deg); }
.title-utilities .title-utility-links {
  display: none; position: fixed; inset: auto; transform: none;
  width: min(280px, calc(100vw - 24px)); min-width: 0;
  overflow: auto; overscroll-behavior: contain;
  padding: 5px; border: 2px solid #83d9e5; background: #072b4f;
  box-shadow: 4px 4px 0 #061636;
}
.title-utilities.is-open .title-utility-links { display: grid; }
.title-utility-links button { width: 100%; min-height: 44px; font-size: 9px; overflow-wrap: anywhere; }
/* Focus and hover keep the primary buttons at exactly the same coordinates. */
.title-menu .title-play:hover, .title-menu .title-play:focus-visible { transform: none; }
.phase-two-character.has-pradera-reward::before {
  content: ''; position: absolute; inset: 6%; pointer-events: none;
  border: 2px solid #fff6ba; border-radius: 50%;
  background: radial-gradient(ellipse, #fff2a860 0%, #ffe48040 45%, transparent 72%);
  box-shadow: 0 0 12px #ffec8f, 0 0 28px #7fffe9, inset 0 0 18px #fff6ba80;
  animation: archangel-reward-glow 2.4s ease-in-out infinite alternate;
}
@keyframes archangel-reward-glow { from { opacity: .55; } to { opacity: 1; } }
body.reduce-motion .phase-two-character.has-pradera-reward::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .phase-two-character.has-pradera-reward::before { animation: none; }
}

/* Móvil horizontal: título y contadores comparten la primera fila, así arriba
   solo quedan dos líneas (contadores y barra del mar) y el mar gana altura.
   La barra superior flota sobre la fila de contadores sin salir del flujo del juego. */
@media (orientation:landscape) and (max-height:500px) {
  .app-shell { --p1-row:50px; --p1-icons:124px; }
  .app-shell > .topbar {
    position:absolute; z-index:9; top:0; left:0; right:0;
    flex:none; height:calc(var(--p1-row) + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) max(64px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    border:0; background:transparent; box-shadow:none; pointer-events:none;
  }
  .app-shell > .topbar > * { pointer-events:auto; }
  .app-shell > .topbar .brand-text { display:none; }
  .app-shell > main { padding-top:env(safe-area-inset-top); }
  .app-shell .hud {
    min-height:var(--p1-row);
    padding-left:44px;
    padding-right:calc(max(64px, env(safe-area-inset-right)) - max(8px, env(safe-area-inset-right)) + var(--p1-icons) + 8px);
  }
  .app-shell .hud { grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr) minmax(0,1fr); }
  .app-shell .hud-item.discovery-card { padding-right:3px; }
  .app-shell .discovery-card #phase-one-to-two { max-width:170px; }
  .app-shell .hud-item + .hud-item { border-left-width:2px; }
}
/* El aviso para renovar el cupo pertenece al mar de la fase 1 en juego. */
body:not(.playing) .reserve-reset-tip, body.game-paused .reserve-reset-tip { display:none !important; }
.reserve-reset-tip-below { transform:translate(-50%, 18px); animation-name:seed-tip-bob-down; }
.reserve-reset-tip-below .tip-arrow { top:auto; bottom:100%; margin-top:0; margin-bottom:3px; border-top:0; border-bottom:14px solid #ffe866; filter:drop-shadow(0 -3px 0 #1a1033); }
.reserve-reset-tip-below::after { top:auto; bottom:calc(100% + 3px); }
@media (orientation:landscape) and (max-height:500px) and (max-width:800px) {
  .app-shell .hud-item > span:nth-child(2) { display:block; }
  .app-shell .hud-item small { margin-bottom:2px; font-size:7px; }
}