/* Play uses natural document flow: larger text can increase the page height.
   Only decorative scenes clip artwork; no content or page height is clipped. */
/* The shared bottom navigation now contains the approved central Play tab. */
.nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nav button[data-page="play"] > span { display: grid; place-items: center; width: 54px; height: 34px; margin: 0 auto 4px; border-radius: 20px; }
.nav .play-nav-icon { display: block; width: 28px; height: 28px; }
.nav .play-nav-icon svg { display: block; width: 28px; height: 28px; }
.nav button[data-page="play"].on > span { color: #167bea; background: #e0f1ff; }
.nav button[data-page="play"].on::after { content: none; }
body[data-page="play"] .nav {
  height: auto;
  min-height: calc(74px + env(safe-area-inset-bottom));
}
body[data-page="play"] .nav button {
  min-height: 73px;
  padding: 8px 2px;
  white-space: normal;
}
/* The document is the scroller at larger text sizes. Its usable scrollport
   ends above the fixed navigation, including the focus outline clearance.
   The shared measured value includes the navigation's safe-area padding. */
html:has(> body[data-page="play"]) {
  scroll-padding-top: 8px;
  scroll-padding-bottom: var(--play-nav-clearance, calc(86px + env(safe-area-inset-bottom)));
}
body[data-page="play"] .play-game-card,
body[data-page="play"] .play-recommendation-start {
  scroll-margin-top: 8px;
  scroll-margin-bottom: var(--play-nav-clearance, calc(86px + env(safe-area-inset-bottom)));
}
body[data-page="play"] .shell {
  height: auto;
  min-height: 100dvh;
  padding-bottom: calc(var(--play-nav-clearance, calc(86px + env(safe-area-inset-bottom))) - 12px);
  overflow: visible;
  background: linear-gradient(#effbffcc, #f2fbfff2 35%), url('../themes/ocean-v1/backgrounds/ocean-map-mobile.png') center top / cover;
}
body[data-page="play"] .ocean,
body[data-page="play"] .ocean.compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: auto;
  min-height: 44px;
  padding: 2px 16px;
  overflow: visible;
  background: transparent;
}
body[data-page="play"] .ocean .logo { font-size: 1.25rem; line-height: 1.3; }
body[data-page="play"] .ocean .whale-art,
body[data-page="play"] .ocean.compact .whale-art {
  position: static;
  flex: 0 0 auto;
  width: 57px;
  height: 40px;
  object-fit: contain;
}
body[data-page="play"] .ocean .ocean-copy,
body[data-page="play"] .ocean .cloud,
body[data-page="play"] .ocean .wave { display: none; }
body[data-page="play"] .view {
  width: 100%;
  max-width: 760px;
  padding: 6px 14px 10px;
  margin: 0 auto;
}
body[data-page="play"] .play-page {
  --play-art-height: clamp(44px, calc(52px + (100dvh - 667px - env(safe-area-inset-bottom)) * .3), 104px);
  --play-bubble-art: url('../../games/assets/game/bubble-glass-empty-v2.webp');
  color: #123e73;
}
body[data-page="play"] .play-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin-bottom: 6px; }
body[data-page="play"] .play-heading h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 850; }
body[data-page="play"] .play-scope { margin: 0; padding: 4px 10px; font-size: .75rem; line-height: 1.4; border-radius: 20px; color: #26649b; background: #e3f5ffdc; text-align: right; }
body[data-page="play"] .play-scope strong { color: #156ac2; }
body[data-page="play"] .play-recommendation { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 6px 8px 6px 12px; border: 1px solid #dceef8; border-radius: 17px; background: #fffffff5; box-shadow: 0 4px 14px #25669009; }
body[data-page="play"] .play-recommendation-copy { min-width: 0; }
body[data-page="play"] .play-recommendation-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
body[data-page="play"] .play-recommendation h2 { margin: 0; font-size: .9375rem; line-height: 1.3; }
body[data-page="play"] .play-recommendation-reason { padding: 2px 6px; border-radius: 12px; font-size: .6875rem; line-height: 1.3; color: #237cca; background: #e1f3ff; }
body[data-page="play"] .play-recommendation-reason[data-reason="weak"] { color: #167b67; background: #e2f6eb; }
body[data-page="play"] .play-recommendation-copy p { margin: 3px 0 0; font-size: .8125rem; line-height: 1.3; overflow-wrap: anywhere; color: #557793; }
body[data-page="play"] .play-recommendation-start { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; min-height: 44px; border: 0; border-radius: 13px; padding: 8px 12px; font-size: .875rem; line-height: 1.3; font-weight: 750; color: white; background: linear-gradient(120deg, #339cef, #207be7); box-shadow: 0 3px 9px #1677d520; }
body[data-page="play"] .play-recommendation-start > span { font-size: 1.1875rem; }
body[data-page="play"] .play-games-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin: 8px 1px 6px; }
body[data-page="play"] .play-games-heading h2 { margin: 0; font-size: 1rem; line-height: 1.25; }
body[data-page="play"] .play-games-heading p { margin: 0; color: #527b97; font-size: .6875rem; line-height: 1.4; }
body[data-page="play"] .play-games-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
body[data-page="play"] .play-game-card { display: block; width: 100%; min-width: 0; padding: 0; border: 2px solid #fff; border-radius: 17px; text-align: left; background: #fff; box-shadow: 0 3px 11px #256da611; }
body[data-page="play"] .play-game-card:focus-visible { outline: 3px solid #157ee2; outline-offset: 3px; }
body[data-page="play"] .play-game-illustration { display: block; }
.play-scene { position: relative; display: block; height: var(--play-art-height); overflow: hidden; border-radius: 14px 14px 0 0; background-color: #a8eaf6; background-image: var(--play-scene-background, url('../themes/ocean-v1/backgrounds/ocean-game-quiet.png')); background-position: center; background-size: cover; }
.play-main-art { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: block; width: auto; height: 98%; max-width: 90%; object-fit: contain; }
body[data-page="play"] .play-game-caption { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 34px; padding: 6px 9px; }
body[data-page="play"] .play-game-caption strong { min-width: 0; font-size: .9375rem; line-height: 1.3; font-weight: 800; overflow-wrap: anywhere; }
body[data-page="play"] .play-game-arrow { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; font-size: 1.3125rem; line-height: 1; color: #167ce7; background: #e7f4ff; }
body[data-page="play"] .play-game-card[aria-disabled="true"] .play-scene { opacity: .72; }
.play-bubble { position: absolute; display: grid; place-items: center; height: 96%; aspect-ratio: 1; background: var(--play-bubble-art) center / contain no-repeat; color: #1556a4; font-size: clamp(13px, calc(var(--play-art-height) * .3), 24px); font-weight: 850; }
.play-bubble--large { left: 35%; top: 0; }
.play-bubble--left { height: 55%; left: 16%; top: 39%; }
.play-bubble--sound { height: 51%; right: 13%; top: 8%; color: #fff; }
.play-bubble--sound svg { width: 55%; height: 55%; filter: drop-shadow(0 1px 2px #1558b4); }
.play-scene--match { background-image: url('../themes/ocean-games-v2/backgrounds/ice_background.png'); }
.play-match-picture,
.play-match-word { position: absolute; display: grid; place-items: center; height: 88%; top: 6%; aspect-ratio: 1; padding: 8%; background: url('../themes/ocean-games-v2/picture-match/square_image_frame.png') center / 100% 100% no-repeat; }
.play-match-picture { left: 18%; transform: rotate(-6deg); padding: 5px; }
.play-match-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.play-match-word { right: 13%; height: 80%; top: 14%; width: 39%; padding: 5px; transform: rotate(5deg); font-size: clamp(10px, calc(var(--play-art-height) * .21), 17px); font-weight: 850; line-height: 1.05; overflow-wrap: anywhere; text-align: center; }
.play-match-spark { position: absolute; top: 27%; left: 48%; color: #ffe057; font-size: 1.1875rem; text-shadow: 0 1px 2px #d09113; }
.play-dolphin-hoop { position: absolute; width: auto; height: 98%; bottom: -8%; left: 26%; transform: rotate(-12deg); }
.play-scene--dolphin .play-main-art { height: 105%; left: 57%; bottom: -5%; }
.play-clear-tiles { position: absolute; left: 13%; bottom: 7%; display: flex; align-items: end; gap: 3px; width: 53%; height: 88%; }
.play-clear-tiles > span { display: grid; place-items: center; height: 59%; aspect-ratio: 1; flex: 1 1 0; min-width: 0; background: url('../../games/assets/wordclear/tile-plain.webp') center / 100% 100% no-repeat; color: #185aaa; font-size: clamp(10px, calc(var(--play-art-height) * .21), 18px); font-weight: 850; }
.play-clear-tiles > span:nth-child(2) { align-self: start; }
.play-clear-seal { position: absolute; right: -1%; bottom: 0; height: 91%; width: auto; }
.play-scene--treasure .play-main-art { height: 135%; max-width: 96%; bottom: -2%; }
.play-scene--pearl .play-main-art { height: 110%; bottom: -7%; }
.play-shell-pearl { position: absolute; left: 50%; bottom: 12%; width: auto; height: 31%; transform: translateX(-50%); }
.play-path-penguin { position: absolute; left: 17%; bottom: 1%; height: 93%; aspect-ratio: 340 / 424; background: url('../../games/assets/generated/sentence-path-components.webp') 1.8% 61.64% / 425.88% auto no-repeat; }
.play-path-ice { position: absolute; height: 32%; width: 28%; bottom: 5%; left: 39%; border-radius: 5px; background: url('../../games/assets/wordclear/tile-plain.webp') center / 100% 100% no-repeat; transform: skewY(-9deg); }
.play-path-ice:nth-of-type(3) { left: 60%; bottom: 18%; width: 24%; }
.play-path-ice:nth-of-type(4) { left: 78%; bottom: 32%; width: 21%; }
body[data-page="play"] .play-interval-note { margin: 5px 0 0; color: #5a7c94; font-size: .6875rem; line-height: 1.3; text-align: center; }
@media (max-height: 740px) {
  body[data-page="play"] .play-page { --play-art-height: clamp(44px, calc(64px + (100dvh - 667px - env(safe-area-inset-bottom)) * .3), 104px); }
  body[data-page="play"] .ocean,
  body[data-page="play"] .ocean.compact { min-height: 40px; }
  body[data-page="play"] .ocean .whale-art,
  body[data-page="play"] .ocean.compact .whale-art { height: 36px; width: 53px; }
  body[data-page="play"] .view { padding-top: 4px; padding-bottom: 8px; }
  body[data-page="play"] .play-heading { min-height: 28px; }
  body[data-page="play"] .play-recommendation { min-height: 54px; padding-block: 4px; }
  body[data-page="play"] .play-games-heading { margin-top: 5px; margin-bottom: 4px; }
  body[data-page="play"] .play-game-caption { min-height: 30px; padding: 4px 8px; }
  body[data-page="play"] .play-game-caption strong { font-size: .875rem; }
  body[data-page="play"] .play-game-arrow { width: 20px; height: 20px; flex-basis: 20px; font-size: 1.1875rem; }
}
@media (min-width: 800px) {
  body[data-page="play"] .shell { background-image: linear-gradient(#effbffcc, #f2fbfff2 35%), url('../themes/ocean-v1/backgrounds/ocean-map-desktop.png'); }
  body[data-page="play"] .ocean,
  body[data-page="play"] .ocean.compact { padding-inline: max(18px, calc((100% - 732px) / 2)); }
}

body[data-page="play"] .play-game-item { position: relative; min-width: 0; }
body[data-page="play"] .play-game-card { height: 100%; }
body[data-page="play"] .play-game-copy { display: grid; gap: 2px; min-width: 0; }
body[data-page="play"] .play-game-copy small { color: #607e9d; font-size: .75rem; line-height: 1.3; font-weight: 600; }
body[data-page="play"] .play-intro-replay { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; padding: 8px; border: 0; border-radius: 50%; background: #f4fdfff2; color: #1789ed; box-shadow: inset 0 0 0 2px #fff; }
body[data-page="play"] .play-intro-replay svg { width: 22px; height: 22px; }
body[data-page="play"] .play-intro-replay:focus-visible { outline: 3px solid #157ee2; outline-offset: 2px; }
.play-scene--bubble .play-hall-character { left: 39%; height: 116%; bottom: -8%; }
.play-scene--bubble .play-bubble--large { height: 70%; left: auto; right: 8%; top: 22%; }
.play-scene--bubble .play-bubble--left { height: 35%; left: 8%; top: 5%; }
.play-scene--match .play-hall-character { left: 35%; height: 116%; bottom: -4%; }
.play-scene--match .play-match-picture { left: 55%; height: 60%; top: 34%; padding: 3px; }
.play-scene--match .play-match-word { right: 5%; height: 55%; top: 40%; width: 27%; }
.play-scene--treasure .play-hall-character { left: 36%; height: 116%; bottom: -6%; }
.play-hall-chest { position: absolute; right: 4%; bottom: -2%; height: 88%; max-width: 57%; object-fit: contain; }
.play-clear-seal { right: 18%; }
.play-clear-tiles { width: 43%; }
.game-card .play-game-illustration { display: block; width: 100%; --play-art-height: 84px; --play-bubble-art: url('../../games/assets/game/bubble-glass-empty-v2.webp'); }
dialog.play-intro { box-sizing: border-box; width: min(440px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 16px; border: 2px solid #d0effc; border-radius: 24px; color: #123e73; background: #f5fcff; box-shadow: 0 18px 70px #0a466444; overflow-y: auto; }
dialog.play-intro::backdrop { background: #073c6e80; }
.play-intro-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.play-intro-heading h2 { margin: 0; font-size: 1.5rem; line-height: 1.3; }
.play-intro-close { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: #3176a4; background: #e5f5fd; font-size: 1.75rem; }
.play-intro-scene { --play-art-height: min(180px, 28dvh); --play-bubble-art: url('../../games/assets/game/bubble-glass-empty-v2.webp'); }
.play-intro-scene .play-scene { border-radius: 16px; }
.play-intro-scene :is(.play-main-art, .play-clear-seal, .play-path-penguin) { animation: hall-arrival .8s ease-out both; }
.play-intro-subtitle { margin: 14px 0 6px; font-size: 1.125rem; line-height: 1.4; font-weight: 800; text-align: center; }
.play-intro-instruction { margin: 0; font-size: 1rem; line-height: 1.6; text-align: center; }
.play-intro-timer { height: 4px; margin: 16px 0 12px; border-radius: 5px; background: #dbeffa; overflow: hidden; }
.play-intro-timer span { display: block; height: 100%; transform-origin: left; background: #259bec; animation: hall-countdown 3s linear both; }
.play-intro-skip { width: 100%; min-height: 44px; border: 0; border-radius: 14px; padding: 10px 16px; color: #fff; background: linear-gradient(120deg, #339cef, #207be7); font-size: 1rem; line-height: 1.4; font-weight: 750; }
@keyframes hall-arrival { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes hall-countdown { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .play-intro-scene :is(.play-main-art, .play-clear-seal, .play-path-penguin), .play-intro-timer span { animation: none; }
}

/* Compact Play controls; range selection never occupies a permanent panel. */
.play-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body[data-page="play"] .play-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;padding:4px;margin-bottom:8px;min-height:0;border-radius:12px}
.play-toolbar .play-scope-trigger{min-width:0;min-height:44px;padding:4px 8px;border:0;border-radius:9px;background:#e6f4ff;color:#164c7b;font-size:13px;overflow-wrap:anywhere;line-height:1.3;text-align:left}
body[data-page="play"] .play-toolbar .play-recommendation-start{min-height:44px;padding:5px 8px;font-size:13px;border-radius:9px}
.play-toolbar .play-practice-bar{margin:0;padding:0;min-width:0}
.play-toolbar .practice-quantity-inline>span{display:none}
.play-toolbar [data-practice-count]{width:76px;min-width:0;min-height:44px;padding:4px;font-size:13px}
.play-empty-scope{margin:4px 0 8px;font-size:13px;color:#456982}
.play-hall-cover{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
body[data-page="play"] .play-scene--whale-cover{opacity:1}
.play-scope-dialog{width:min(360px,calc(100vw - 32px));box-sizing:border-box;border:1px solid #c7e5f6;border-radius:18px;padding:18px;color:#194c75;background:#f6fcff}
.play-scope-dialog::backdrop{background:#163d6266}
.play-scope-dialog h2{margin:0 0 14px;font-size:18px}
.play-scope-dialog label{display:grid;gap:4px;margin:10px 0;font-size:14px}
.play-scope-dialog label[hidden]{display:none}
.play-scope-dialog select{width:100%;min-width:0;min-height:44px;font-size:15px}
.play-scope-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.play-scope-actions button{min-height:44px;min-width:64px;border:0;border-radius:10px;background:#e0f0fc;color:#174d7e;font-size:14px}
.play-scope-actions button:last-child{background:#2386e9;color:white}