.stage-picker { display: flex; flex-wrap:wrap; justify-content: center; gap: 7px; margin: 0 0 18px; }
.stage-choice { background: #fffdf8; border: 2px solid #ead5df; border-radius: 12px; padding: 7px 13px; font-weight: 900; font-size: 14px; line-height: 1.25; }
.stage-choice span { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; }
.stage-choice[aria-pressed=true] { border-color: #cb6a97; background: #ffeaf1; }
.stage-choice:disabled { background: #f6f0f3; color: #967c8b; border-color: #e5dbe1; }
.leaf-counter-icon { width: 29px; height: 33px; object-fit: contain; }
.fish-counter-icon { width:32px; height:32px; display:block; background:url('assets/ocean-friends.png') left center / 200% 100% no-repeat; }
.dim-sum-counter-icon { width:29px; height:29px; display:block; background:url('assets/dim-sum.png') left top / 500% 300% no-repeat; }
.replay-secondary { display: block; min-width: 0; background: transparent; color: var(--ink); box-shadow: none; border: 0; text-decoration: underline; text-underline-offset: 4px; padding: 5px 10px; margin: 13px auto 0; font-size: 14px; }
.replay-secondary:hover { background: transparent; }
body[data-stage="2"] { --ink: #294f42; --pink: #2f805d; background: radial-gradient(ellipse at 10% 10%, #e8f5df, transparent 60%), #eaf1e8; }
body[data-stage="2"] .game-shell { border-color: #f8fff0; background: #a8ccb0; box-shadow: 0 12px 45px #214a361a, 0 2px 0 #9bb79e; }
body[data-stage="2"] .start-card, body[data-stage="2"] .win-card { background: #fcfff3ef; border-color: #f7fff4; }
body[data-stage="2"] h1 { color: #345e47; }
body[data-stage="2"] h1>span { color: #4c9569; text-shadow: 0 3px #d4eace; }
body[data-stage="2"] .start-description, body[data-stage="2"] .game-credits, body[data-stage="2"] footer { color: #54735a; }
body[data-stage="2"] .eyebrow, body[data-stage="2"] .world-label, body[data-stage="2"] .level-badge>span { color: #56805c; }
body[data-stage="2"] .primary-button:not(.replay-secondary) { background: #40865b; border-color: #39784e; box-shadow: 0 5px 0 #2b5b3d; }
body[data-stage="2"] .level-badge, body[data-stage="2"] .coin-counter { background: #fbfff0e8; }
body[data-stage="2"] .coin-counter strong, body[data-stage="2"] .coin-counter>span:last-child { color: #406546; }
body[data-stage="2"] .stage-choice[aria-pressed=true] { background: #e1f0d7; border-color: #5e966b; }
body[data-stage="2"] .emoji-choice[aria-checked=true] { background: #e5f3da; border-color: #73a677; box-shadow: 0 4px 0 #bcd9b0; }
body[data-stage="2"] .emoji-choice[aria-checked=true]::after { background: #51845c; }
body[data-stage="2"] .jump-control { background: #cde49c; box-shadow: 0 6px 0 #8eac6b; color: #3d623f; }
body[data-stage="2"] .chest-action { background: #f2edb8; }
body[data-stage="2"] h2 { color: #396846; }
@media(max-width:500px) { .stage-picker { margin-bottom:15px; } .stage-choice { padding:7px 10px; } }
@media(max-height:570px) and (orientation:landscape) { .stage-picker { margin-bottom:8px; } .stage-choice { padding:4px 12px; } .stage-choice span { font-size:11px; } .stage-picker+.emoji-picker legend { margin-top:0; } }
.touch-controls { left:max(20px,env(safe-area-inset-left)); right:max(20px,env(safe-area-inset-right)); bottom:max(23px,env(safe-area-inset-bottom)); justify-content:space-between; pointer-events:none; }
.direction-controls { display:flex; gap:12px; pointer-events:none; }
.touch-controls button { pointer-events:auto; }
.missed-marker { position:absolute; left:18px; top:150px; max-width:230px; padding:8px 12px; border:2px solid #fff; border-radius:14px; color:#51304b; background:#fffaf2ed; font-size:13px; font-weight:900; }
body[data-input="keyboard"] .touch-controls { opacity:.2; }
body[data-input="keyboard"] .keyboard-guide { display:flex; }
body[data-input="keyboard"] .mobile-guide { display:none; }
body[data-input="touch"] .keyboard-guide { display:none; }
body[data-input="touch"] .mobile-guide { display:inline; }
body[data-stage="3"] { --ink:#304b78; --pink:#3e78c4; background:radial-gradient(ellipse at 15% 10%,#fff8c9,transparent 60%),#e7f4ff; }
body[data-stage="3"] .game-shell { border-color:#fffef4; background:#b7e5ff; box-shadow:0 12px 45px #386da51f,0 2px 0 #a2c9e3; }
body[data-stage="3"] .start-card, body[data-stage="3"] .win-card { background:#f8fcfff0; }
body[data-stage="3"] h1, body[data-stage="3"] h2 { color:#34578b; }
body[data-stage="3"] h1>span { color:#367bd3; text-shadow:0 3px #c9e4fb; }
body[data-stage="3"] .eyebrow, body[data-stage="3"] .level-badge>span, body[data-stage="3"] .world-label { color:#4172a4; }
body[data-stage="3"] .primary-button:not(.replay-secondary) { background:#397bd1; border-color:#3470bf; box-shadow:0 5px 0 #235596; }
body[data-stage="3"] .stage-choice[aria-pressed=true], body[data-stage="3"] .emoji-choice[aria-checked=true] { background:#e1f2ff; border-color:#6ba3d8; }
body[data-stage="3"] .jump-control { background:#ffe09a; color:#7b5823; box-shadow:0 6px 0 #c7a353; }
body[data-stage="3"] .move-control { background:#bfe4ff; color:#345d80; box-shadow:0 6px 0 #82b4d5; }
body[data-stage="3"] .win-screen { background:#c8e7fc55; }
body[data-stage="4"] { --ink:#184f68; --pink:#08799b; background:radial-gradient(ellipse at 15% 10%,#e9fff6,transparent 60%),#daf5fb; }
body[data-stage="4"] .game-shell { border-color:#f4fffc; background:#08b8dc; box-shadow:0 12px 45px #07537b22,0 2px 0 #79c3d0; }
body[data-stage="4"] .start-card, body[data-stage="4"] .win-card { background:#f1fcfff2; }
body[data-stage="4"] h1, body[data-stage="4"] h2 { color:#1b5678; }
body[data-stage="4"] h1>span { color:#087d9d; text-shadow:0 3px #bfedf4; }
body[data-stage="4"] .eyebrow, body[data-stage="4"] .level-badge>span, body[data-stage="4"] .world-label { color:#266e83; }
body[data-stage="4"] .game-credits, body[data-stage="4"] .start-description, body[data-stage="4"] footer { color:#386f80; }
body[data-stage="4"] .primary-button:not(.replay-secondary) { background:#087c99; border-color:#066b86; box-shadow:0 5px 0 #05516c; }
body[data-stage="4"] .stage-choice[aria-pressed=true], body[data-stage="4"] .emoji-choice[aria-checked=true] { background:#d9f7fa; border-color:#4aa9bd; }
body[data-stage="4"] .move-control { background:#a7ebec; color:#165963; box-shadow:0 6px 0 #56aab7; }
body[data-stage="4"] .jump-control { background:#ffbdaf; color:#793e50; box-shadow:0 6px 0 #c97887; }
body[data-stage="4"] .win-screen { background:#82d8e855; }
body[data-stage="5"] { --ink:#633851; --pink:#9d3e66; background:radial-gradient(ellipse at 15% 10%,#fff5d7,transparent 60%),#f4e7e4; }
body[data-stage="5"] .game-shell { border-color:#fff9ec; background:#8ab6ce; box-shadow:0 12px 45px #653a5422,0 2px 0 #d6b29a; }
body[data-stage="5"] .start-card, body[data-stage="5"] .win-card { background:#fff9eeed; }
body[data-stage="5"] h1, body[data-stage="5"] h2 { color:#633d59; }
body[data-stage="5"] h1>span { color:#ad4667; text-shadow:0 3px #efd1c6; }
body[data-stage="5"] .primary-button:not(.replay-secondary) { background:#a64869; border-color:#973b5c; box-shadow:0 5px 0 #75304e; }
body[data-stage="5"] .stage-choice[aria-pressed=true], body[data-stage="5"] .emoji-choice[aria-checked=true] { background:#ffe4d9; border-color:#bd6580; }
body[data-stage="5"] .move-control { background:#e3d4ed; color:#5a3b75; box-shadow:0 6px 0 #ae8bbf; }
body[data-stage="5"] .jump-control { background:#ffd9a1; color:#794e32; box-shadow:0 6px 0 #c49865; }
body[data-stage="5"] .win-screen { background:#39235855; }
@media(max-width:500px) { .stage-choice { flex:1; min-width:0; padding:7px 4px; font-size:13px; } .stage-choice span { font-size:11px; } .touch-controls { left:12px; right:12px; } .control-button { width:65px; height:73px; border-radius:21px; } .jump-control { width:77px; height:79px; } .direction-controls { gap:8px; } .missed-marker { top:137px; font-size:12px; max-width:190px; } }
@media(max-height:570px) and (orientation:landscape) { .control-button { width:61px; height:61px; } .touch-controls { bottom:8px; } .missed-marker { top:111px; } }
/* Keep the primary action visible on shorter phones and preview windows. */
@media(max-height:780px) {
  .start-card { padding-top:12px; padding-bottom:15px; }
  .start-card h1 { font-size:44px; margin:8px 0; }
  .start-card h1>span { display:inline; }
  .start-card .title-sparkle { font-size:20px; right:-20px; }
  .start-card .start-credits { margin-bottom:12px; font-size:12px; }
  .start-card .stage-picker { margin-bottom:10px; }
  .start-card .emoji-picker { margin-bottom:12px; }
  .start-card .emoji-picker legend { margin-bottom:5px; }
  .start-card .emoji-choices { max-height:100px; }
  .start-card .emoji-choice { padding-top:4px; padding-bottom:4px; }
  .start-card .emoji-choice .face { font-size:28px; }
  .start-card .small-note { margin-top:10px; }
}
@media(max-height:570px) and (orientation:landscape) {
  .start-card { padding:8px 16px; }
  .start-card h1 { font-size:34px; margin:3px 0; }
  .start-card .start-description { font-size:12px; margin:3px 0; }
  .start-card .start-credits { font-size:11px; margin-bottom:6px; }
  .start-card .stage-picker { margin-bottom:4px; }
  .start-card .emoji-picker legend { display:none; }
  .start-card .emoji-choices { max-height:65px; }
  .start-card .emoji-picker { margin-bottom:5px; }
  .start-card .small-note { display:none; }
}
@media(max-width:500px) {
  .stage-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .stage-choice { font-size:14px; padding:5px; }
  .stage-choice span { font-size:12px; }
  .start-card h1 { font-size:43px; margin:8px 0; }
  .start-card h1>span { display:inline; }
  .start-card .title-sparkle { font-size:20px; right:-19px; }
  .start-card .emoji-choices { max-height:100px; }
}