:root {
  color-scheme: light;
  --ink: #315346;
  --ink-soft: #608071;
  --leaf: #4f9462;
  --leaf-deep: #2e6c52;
  --leaf-bright: #8ec96d;
  --cream: #fff9e9;
  --paper: #fffdf5;
  --wood: #986642;
  --wood-dark: #744e38;
  --stone: #e8dfc6;
  --water: #4e9cd0;
  --grass: #66a85b;
  --fire: #dc6038;
  --shadow: 0 15px 38px rgba(43, 83, 59, .18);
  font-family: 'Yu Gothic UI', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #bfe4c4; }
body { margin: 0; min-width: 320px; min-height: 100svh; color: var(--ink); background:
  radial-gradient(ellipse at 13% 9%, rgba(255,255,255,.65), transparent 25%),
  radial-gradient(ellipse at 91% 15%, rgba(255,255,255,.4), transparent 26%),
  linear-gradient(180deg, #a8d9cd 0%, #d4ecc4 48%, #c4e3ba 100%);
}
button { color: inherit; font: inherit; touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #df9142; outline-offset: 3px; }
#app { min-height: 100svh; overflow: hidden; }
.world-shell { min-height: 100svh; position: relative; isolation: isolate; padding: max(8px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); overflow: hidden; }
.world-shell::before, .world-shell::after { content: ''; position: fixed; pointer-events: none; z-index: -1; }
.world-shell::before { inset: auto -70px -150px -70px; height: 310px; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, rgba(139,196,114,.18), rgba(65,135,86,.12)); }
.world-shell::after { width: 240px; height: 180px; right: -105px; top: 32%; background: radial-gradient(ellipse, rgba(255,255,233,.35), transparent 70%); }
.sky-glow { position: absolute; z-index: -1; width: min(480px, 110vw); height: 430px; border-radius: 50%; left: 50%; top: -235px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(255,255,230,.75), rgba(255,255,255,0) 71%); }
.leaf-corner { position: absolute; color: rgba(51,119,73,.14); font-family: Georgia, serif; font-size: 175px; line-height: 1; z-index: -1; user-select: none; }
.leaf-corner--one { left: -72px; bottom: 20px; transform: rotate(-30deg); }
.leaf-corner--two { right: -74px; top: 18%; transform: rotate(155deg); }
.screen { position: relative; width: min(100%, 510px); margin: 0 auto; animation: screen-enter .35s ease-out both; }
@keyframes screen-enter { from { opacity: .6; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.eyebrow { margin: 0 0 5px; color: #71907d; font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-size: 9px; letter-spacing: .12em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif; font-weight: 600; }

/* The approved key visual includes the title, creatures, boy, and grown island. */
.title-screen { --title-layout-width: min(100%, 500px, calc(100svh - 272px)); min-height: calc(100svh - 24px); display: flex; flex-direction: column; align-items: center; padding-top: 0; }
.title-topline { width: var(--title-layout-width); height: 44px; flex: 0 0 44px; display: flex; align-items: center; justify-content: flex-end; }
.gear-button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,248,.72); color: #567a67; font-size: 20px; }
.title-art-viewport { position: relative; flex: 0 0 auto; width: var(--title-layout-width); aspect-ratio: 1091 / 1070; overflow: hidden; margin: 0 auto; border: 1px solid rgba(255,255,248,.9); border-radius: 22px 22px 0 0; background: linear-gradient(145deg,#d9efd5,#fff8de); box-shadow: 0 4px 14px rgba(49,100,68,.15); }
.title-art-viewport img { display: block; width: 100%; height: auto; color: #315c49; font-size: 15px; line-height: 1.5; text-align: center; }
.boy-art-shell { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.boy-art-placeholder, .boy-art-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.boy-art-placeholder { overflow: visible; }
.boy-art-image { display: none; object-fit: contain; }
.boy-art-shell.generated-art--ready { overflow: hidden; padding: 2px; border: 1px solid rgba(255,255,245,.84); border-radius: 16px 16px 13px 13px; background: rgba(255,251,226,.34); box-shadow: 0 3px 8px rgba(57,92,65,.12); }
.boy-art-shell.generated-art--ready .boy-art-placeholder { visibility: hidden; }
.boy-art-shell.generated-art--ready .boy-art-image { display: block; }
.title-panel { width: var(--title-layout-width); margin: 0 auto; padding: 10px 12px 7px; border: 1px solid rgba(255,255,245,.94); border-top: 0; border-radius: 0 0 22px 22px; background: linear-gradient(180deg,rgba(235,245,218,.96),rgba(255,250,231,.97)); box-shadow: 0 8px 20px rgba(54,103,65,.12); }
.title-panel > .save-notice { width: 100%; margin: 0 0 8px; }
.title-actions { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: 8px; width: 100%; margin: 0 auto; }
.title-actions--saved { grid-template-columns: minmax(0,1fr) auto; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 17px; cursor: pointer; font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif; font-size: 17px; font-weight: 600; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.button:not(:disabled):active { transform: translateY(2px) scale(.985); }
.button:disabled { cursor: default; filter: grayscale(.3); opacity: .55; }
.button--primary { position: relative; min-width: 174px; padding: 0 25px; color: #fffef1; background: linear-gradient(180deg, #78b769, #51935b); border: 2px solid #eaffd4; box-shadow: 0 5px 0 #447950, 0 9px 14px rgba(53,100,63,.19), inset 0 1px 0 rgba(255,255,255,.4); text-shadow: 0 1px 1px rgba(47,97,58,.3); }
.button--primary:hover:not(:disabled) { filter: brightness(1.04); box-shadow: 0 6px 0 #447950, 0 12px 20px rgba(53,100,63,.22); }
.button--start { width: 100%; min-width: 0; min-height: 54px; border-radius: 19px; font-size: 19px; letter-spacing: .04em; }
.title-island-button { min-width: 92px; min-height: 46px; margin: 0; padding: 0 12px; border-radius: 15px; font-size: 15px; white-space: nowrap; }
.title-stats { margin-top: 7px; text-align: center; }
.title-total { min-height: 30px; display: flex; align-items: baseline; justify-content: center; gap: 5px; margin: 0 0 5px; color: #557354; font-size: 14px; font-weight: 700; }
.title-total b { color: #9a6d32; font-size: clamp(22px,6vw,26px); font-variant-numeric: tabular-nums; line-height: 1; }
.save-ok { margin: 3px 0 0; text-align: center; color: #718978; font-size: 10px; }
.save-ok span { display: inline-block; margin-right: 3px; color: #74b27a; font-size: 8px; }
.adult-note { margin: 6px 0 0; padding: 0; text-align: center; color: rgba(64,104,77,.72); font-size: 9px; line-height: 1.4; }
.title-collection { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); justify-content: center; gap: 6px; margin: 0; }
.collection-pill { min-width: 0; min-height: 32px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 2px 5px; border: 1px solid rgba(255,255,245,.92); border-radius: 15px; background: rgba(255,253,237,.72); color: #527060; font-size: 13px; white-space: nowrap; box-shadow: 0 2px 5px rgba(73,119,82,.07); }
.collection-pill b { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.collection-pill small { color: #71836e; font-size: 9px; }
.collection-pill .marker { flex: 0 0 14px; width: 14px; height: 14px; }
.save-notice { width: min(100%, 410px); margin: 9px auto 0; padding: 9px 11px; border-radius: 12px; font-size: 11px; line-height: 1.55; }
.save-notice--error { display: flex; align-items: center; gap: 9px; color: #834e36; background: #fff2de; border: 1px solid #edc49a; box-shadow: 0 3px 8px rgba(112,82,46,.1); }
.save-notice--error p { margin: 0; }
.notice-mark { flex: 0 0 21px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: white; background: #d4884d; font-weight: 700; }

/* The board is a framed garden table: individual cells stay large and easy to touch. */
.puzzle-screen { min-height: calc(100svh - 24px); display: flex; flex-direction: column; align-items: center; padding-top: 9px; }
.screen-heading { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 6px; }
.screen-heading h1 { font-size: clamp(21px, 6.2vw, 28px); color: #315d49; line-height: 1.25; }
.screen-heading .eyebrow { font-size: 8px; }
.round-nav { flex: 0 0 53px; width: 53px; min-height: 51px; display: grid; align-content: center; justify-items: center; gap: 0; padding: 2px; border: 1px solid rgba(255,255,244,.92); border-radius: 16px; background: linear-gradient(180deg,#fffceb,#e8f1d8); box-shadow: 0 3px 0 #aac597, 0 5px 9px rgba(49,100,68,.11); color: #4d7855; cursor: pointer; }
.round-nav:disabled { opacity: .5; }
.round-nav span { font-size: 18px; line-height: 20px; }
.round-nav small { font-size: 9px; }
.game-prompt { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 9px; margin: 1px 0 8px; padding: 6px 11px; border: 1px solid rgba(255,255,248,.85); border-radius: 13px; color: #4b7159; background: rgba(255,253,231,.68); font-size: clamp(12px, 3.3vw, 14px); box-shadow: 0 3px 8px rgba(73,124,75,.08); }
.prompt-stamp { flex: 0 0 23px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #fffaf0; background: #79aa69; font-size: 12px; }
.game-prompt--stuck { background: #fff3dc; color: #925c31; border-color: #eed4a5; }
.game-prompt--stuck .prompt-stamp { background: #d38a4c; }
.board-frame { position: relative; width: min(100%, 452px, calc(100svh - 275px)); aspect-ratio: 1; padding: 7px; border-radius: 23px; background: linear-gradient(145deg,#fffbe8,#c4b78e 36%,#f4e8c5 49%,#97815f); box-shadow: 0 5px 0 #887451, 0 13px 22px rgba(44,87,60,.2), inset 0 2px 2px rgba(255,255,255,.83); }
.board-frame-art { position: absolute; z-index: 3; inset: 0; display: none; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.board-frame.generated-art--ready { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.board-frame.generated-art--ready::before, .board-frame.generated-art--ready .frame-vine { display: none; }
.board-frame.generated-art--ready .board-rim { position: absolute; inset: 14.5%; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.board-frame.generated-art--ready .game-board { border-radius: 0; }
.board-frame.generated-art--ready .board-frame-art { display: block; }
.board-frame::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(255,255,242,.8); border-radius: 20px; pointer-events: none; }
.board-rim { position: relative; width: 100%; height: 100%; padding: 5px; border: 2px solid #748657; border-radius: 17px; background: repeating-linear-gradient(135deg,#8f704c 0 9px,#9f7d54 9px 18px); box-shadow: inset 0 2px 5px rgba(57,65,39,.25); }
.game-board { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 11px; background: linear-gradient(140deg,#f0e7c9,#b5aa80); box-shadow: inset 0 2px 5px rgba(70,73,47,.3); }
.tile { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 3px; overflow: hidden; border: 1px solid rgba(255,255,250,.83); border-radius: 12px; cursor: pointer; box-shadow: 0 2px 0 rgba(52,84,62,.22), inset 0 1px 0 rgba(255,255,255,.87); transition: transform .14s ease, filter .14s ease, box-shadow .14s ease; }
.tile:active:not(:disabled) { transform: scale(.94); filter: brightness(1.06); }
.tile:disabled { cursor: default; opacity: .82; }
.tile--water { background: linear-gradient(145deg,#e2f6f3,#b8e2e5 56%,#9ecbdc); }
.tile--grass { background: linear-gradient(145deg,#f2f4cf,#d8eab7 56%,#c0d99e); }
.tile--fire { background: linear-gradient(145deg,#fff0cd,#f4d5a9 56%,#e8bb92); }
.tile--empty { cursor: default; background: linear-gradient(145deg,#d6cba8,#b8aa81); box-shadow: inset 0 2px 5px rgba(70,73,47,.18); }
.tile::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 8%; height: 17%; border-radius: 50%; background: rgba(87,103,64,.12); filter: blur(3px); pointer-events: none; }
.tile-marker { position: absolute; z-index: 2; top: 3px; left: 3px; width: clamp(12px, 3.8vw, 17px); height: clamp(12px, 3.8vw, 17px); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(255,255,242,.68); box-shadow: 0 1px 2px rgba(47,81,58,.12); }
.marker { width: 100%; height: 100%; display: block; }
.tile-marker .marker { width: 82%; height: 82%; }
.marker--water { color: #3386b9; }
.marker--grass { color: #4d974e; }
.marker--fire { color: #df6538; }
.tile-house { position: relative; z-index: 1; display: grid; place-items: center; width: 91%; height: 91%; margin-top: 5%; filter: drop-shadow(0 3px 2px rgba(62,76,51,.19)); transition: transform .2s ease; }
.tile-house::after { content: ''; position: absolute; left: 15%; right: 15%; bottom: 7%; height: 5%; border-radius: 50%; background: rgba(255,255,224,.4); }
.house-art { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.house-art-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.house-art__fallback { position: absolute; inset: 0; }
.house-art__generated { position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: contain; }
.house-art.generated-art--ready .house-art__fallback { visibility: hidden; }
.house-art.generated-art--ready .house-art__generated { display: block; }
.tile-value { position: absolute; z-index: 3; right: 2px; bottom: 2px; min-width: 18px; height: 17px; display: grid; place-items: center; padding: 0 3px; border: 1px solid rgba(255,255,250,.95); border-radius: 7px 4px 8px 4px; color: #fffef0; background: rgba(69,91,65,.78); box-shadow: 0 1px 3px rgba(38,66,47,.25); font-size: 9px; font-weight: 700; line-height: 1; }
.tile--hint { z-index: 2; border: 2px solid #fff2a4; box-shadow: 0 0 0 2px #f1bd55, 0 0 12px rgba(255,214,99,.8), 0 3px 0 rgba(52,84,62,.2); animation: hint-glow 1.15s ease-in-out infinite alternate; }
.tile--gathering { z-index: 9; transition: transform .28s cubic-bezier(.23,.76,.18,1), opacity .28s ease, filter .28s ease; }
.tile--gathering-active:not(.tile--gather-anchor) { transform: translate(var(--move-x),var(--move-y)) scale(.46) rotate(12deg); opacity: .16; filter: brightness(1.35); }
.tile--gather-anchor.tile--gathering-active { transform: scale(1.09); box-shadow: 0 0 0 2px #fff1a0, 0 0 15px rgba(255,216,94,.8), 0 3px 0 rgba(52,84,62,.2); }
.tile--gather-anchor .tile-value { opacity: 0; }
.merge-sum { position: absolute; z-index: 5; right: 1px; bottom: 1px; min-width: 24px; height: 22px; display: grid; place-items: center; border: 2px solid #fff9db; border-radius: 8px; color: #fffdf1; background: #608258; box-shadow: 0 1px 4px rgba(43,78,49,.25); font-size: 12px; font-weight: 700; }
@keyframes hint-glow { from { filter: brightness(1); } to { filter: brightness(1.1); } }
.board-frame[data-animate="yes"] .tile-house { animation: home-settle .38s cubic-bezier(.15,.85,.35,1.25) both; }
.board-frame[data-phase="fall"] .tile { animation: tile-drop .12s cubic-bezier(.17,.75,.25,1.12) both; }
.board-frame[data-phase="fall"] .tile:nth-child(5n + 1) { animation-delay: .01s; }
.board-frame[data-phase="fall"] .tile:nth-child(5n + 2) { animation-delay: .02s; }
.board-frame[data-phase="fall"] .tile:nth-child(5n + 3) { animation-delay: .03s; }
.board-frame[data-phase="fall"] .tile:nth-child(5n + 4) { animation-delay: .04s; }
.board-frame[data-phase="fall"] .tile:nth-child(5n) { animation-delay: .05s; }
.board-frame[data-phase="refill"] .tile--refilling { animation: tile-refill .13s cubic-bezier(.17,.75,.25,1.1) both; }
.board-frame[data-phase="refill"] .tile--refilling:nth-child(5n + 1) { animation-delay: .01s; }
.board-frame[data-phase="refill"] .tile--refilling:nth-child(5n + 2) { animation-delay: .02s; }
.board-frame[data-phase="refill"] .tile--refilling:nth-child(5n + 3) { animation-delay: .03s; }
.board-frame[data-phase="refill"] .tile--refilling:nth-child(5n + 4) { animation-delay: .04s; }
.board-frame[data-phase="refill"] .tile--refilling:nth-child(5n) { animation-delay: .05s; }
.board-frame[data-animate="yes"] .tile:nth-child(3n) .tile-house { animation-delay: .025s; }
@keyframes home-settle { from { transform: translateY(-7px) scale(.94); opacity: .65; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes tile-drop { from { transform: translateY(-32px) scale(.96); opacity: .58; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes tile-refill { from { transform: translateY(-28%) scale(.94); opacity: .3; } to { transform: translateY(0) scale(1); opacity: 1; } }
.frame-vine { position: absolute; z-index: 2; top: 45%; color: #62874c; font-family: Georgia, serif; font-size: 32px; text-shadow: 0 1px 1px rgba(255,255,255,.5); pointer-events: none; }
.frame-vine--left { left: -6px; transform: rotate(-28deg); }
.frame-vine--right { right: -7px; transform: rotate(153deg); }
.legend-row { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 32px; margin: 5px 0 1px; }
.legend-item { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: #557461; }
.legend-item .marker { width: 16px; height: 16px; }
.legend-item--water .marker { color: var(--water); }.legend-item--grass .marker { color: var(--grass); }.legend-item--fire .marker { color: var(--fire); }
.grow-note { display: none; color: #81967d; font-size: 9px; }
.puzzle-actions { width: 100%; display: flex; gap: 10px; justify-content: center; margin: 5px 0 0; }
.button--help { flex: 1; min-height: 48px; max-width: 245px; color: #fffdf2; background: linear-gradient(180deg,#e8aa58,#c87b41); border: 2px solid #fff2d2; box-shadow: 0 4px 0 #a7653a, 0 7px 12px rgba(116,79,44,.17); }
.button--help:disabled { color: #78927c; background: linear-gradient(180deg,#eaf0d9,#d4e2c3); border-color: rgba(255,255,248,.8); box-shadow: 0 3px 0 #aec59c; opacity: .9; }
.button--help:not(:disabled) { animation: help-breathe 1.3s ease-in-out infinite alternate; }
@keyframes help-breathe { to { box-shadow: 0 5px 0 #a7653a, 0 0 13px rgba(242,174,76,.53); } }
.button--soft { min-width: 108px; padding: 0 15px; color: #4e7359; background: linear-gradient(180deg,#fffdf0,#e6eed7); border: 1px solid #d3ddbe; box-shadow: 0 3px 0 #b4c39d, 0 5px 9px rgba(63,96,67,.12); }
.action-icon { font-size: 19px; line-height: 1; }
.puzzle-screen > .save-notice { padding: 5px 8px; text-align: center; background: rgba(255,253,240,.5); }
.puzzle-screen > .save-notice--error { text-align: left; background: #fff2de; }

/* Island journal: three distinct habitats, each receives a castle only after it is earned. */
.island-screen { padding-top: 9px; }
.island-screen-heading { padding-bottom: 1px; }
.discovery-count { min-width: 58px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px; border: 1px solid rgba(255,255,245,.8); border-radius: 15px; background: rgba(255,252,230,.58); color: #63806b; }
.island-heading-actions { display: flex; align-items: center; gap: 6px; }
.island-back { min-width: 79px; min-height: 44px; padding: 0 9px; border-radius: 13px; font-size: 11px; white-space: nowrap; }
.discovery-count b { color: #428455; font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-size: 24px; font-weight: 600; }
.discovery-count span { font-size: 9px; line-height: 1.1; }
.island-intro { margin: 6px 0 10px; color: #587461; text-align: center; font-size: 12px; line-height: 1.65; }
.district-list { display: grid; gap: 9px; }
.district-card { overflow: hidden; border: 1px solid rgba(255,255,246,.9); border-radius: 19px; background: rgba(255,253,240,.68); box-shadow: 0 5px 14px rgba(59,102,67,.1), inset 0 1px 0 #fff; }
.district-heading { min-height: 52px; display: flex; align-items: center; gap: 9px; padding: 7px 12px 5px; }
.district-marker { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.95); border-radius: 10px; background: #fffef0; box-shadow: 0 2px 3px rgba(52,83,57,.1); }
.district-marker .marker { width: 22px; height: 22px; }.district-card--water .district-marker { color: var(--water); }.district-card--grass .district-marker { color: var(--grass); }.district-card--fire .district-marker { color: var(--fire); }
.district-heading h2 { margin: 0; color: #42654e; font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-size: 15px; font-weight: 600; }
.district-heading p { margin: 2px 0 0; color: #80927c; font-size: 9px; }
.district-count { margin-left: auto; min-width: 39px; text-align: center; color: #4e7459; font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-size: 19px; }
.district-count small { display: block; margin-top: -3px; font-family: inherit; font-size: 8px; }
.district-scene { position: relative; height: clamp(106px, 26vw, 132px); overflow: hidden; border-top: 1px solid rgba(255,255,255,.72); isolation: isolate; }
.district-background { display: none; }
.district-scene.generated-art--ready { background-image: url('./assets/generated/island_background.png'); background-size: 300% auto; }
.district-card--water .district-scene.generated-art--ready { background-position: left 40%; }
.district-card--grass .district-scene.generated-art--ready { background-position: center 40%; }
.district-card--fire .district-scene.generated-art--ready { background-position: right 40%; }
.district-scene.generated-art--ready::before, .district-scene.generated-art--ready::after { display: none; }
.district-ground--water { background: linear-gradient(180deg,#c9e9e4 0%,#b5e3df 54%,#70c4cb 55%,#4d9dab 100%); }
.district-ground--grass { background: linear-gradient(180deg,#dff0ce 0%,#cbe3b1 54%,#98ca86 55%,#70aa73 100%); }
.district-ground--fire { background: linear-gradient(180deg,#f5e1ba 0%,#edc692 54%,#c98b65 55%,#996450 100%); }
.district-scene::before { content: ''; position: absolute; z-index: -1; left: -8%; right: -8%; bottom: 27%; height: 54%; border-radius: 50%; background: rgba(255,255,231,.28); }
.district-scene::after { content: ''; position: absolute; z-index: -1; bottom: 17%; left: -8%; right: -8%; height: 23%; border-radius: 50%; background: rgba(74,125,86,.15); }
.scene-decoration { position: absolute; top: 6px; left: 12px; color: rgba(255,255,240,.7); font-size: 18px; letter-spacing: .25em; }
.island-castle { position: absolute; z-index: 1; left: 31%; top: 1%; width: 38%; height: 94%; filter: drop-shadow(0 5px 3px rgba(47,75,52,.22)); }
.island-castle .house-art { width: 100%; height: 100%; }
.resident-button { position: absolute; z-index: 2; right: 8%; bottom: 2%; width: 26%; height: 98%; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 5px 3px rgba(47,75,52,.2)); }
.resident-monster { width: 100%; height: 100%; object-fit: contain; transition: transform .2s ease; }
.resident-button--cheer .resident-monster { animation: monster-cheer .56s ease-in-out 2; }
@keyframes monster-cheer { 0%,100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-12px) rotate(-8deg) scale(1.07); } 70% { transform: translateY(-3px) rotate(6deg); } }
.resident-sparkle { position: absolute; top: 7%; right: 7%; color: #fff8ae; font-size: 15px; text-shadow: 0 0 6px white; opacity: 0; }
.resident-button--cheer .resident-sparkle { opacity: 1; animation: sparkle-pop .6s ease-out 2; }
@keyframes sparkle-pop { from { transform: scale(.4) rotate(-25deg); opacity: 0; } to { transform: scale(1.2) rotate(24deg); opacity: 1; } }
.castle-silhouette { position: absolute; left: 36%; bottom: 11%; width: 28%; height: 60%; display: grid; place-items: center; border: 2px dashed rgba(77,108,81,.32); border-radius: 22px 22px 5px 5px; color: rgba(74,104,78,.58); background: rgba(255,255,235,.23); }
.castle-silhouette::before, .castle-silhouette::after { content: ''; position: absolute; bottom: 30%; width: 22%; height: 48%; border: 1px dashed rgba(77,108,81,.28); border-radius: 9px 9px 0 0; }
.castle-silhouette::before { left: -16%; }.castle-silhouette::after { right: -16%; }
.castle-silhouette span { font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-size: 22px; }
.district-empty { position: absolute; z-index: 2; left: 4%; bottom: 4%; margin: 0; color: #55765d; font-size: 9px; line-height: 1.4; }
.district-card--water .district-empty { color: #41768a; }.district-card--fire .district-empty { color: #87583f; }
.history-panel { margin-top: 14px; padding: 12px 13px 10px; border: 1px solid rgba(255,255,245,.88); border-radius: 18px; background: rgba(255,253,238,.61); box-shadow: 0 4px 12px rgba(60,100,70,.1); }
.section-kicker { display: flex; align-items: center; gap: 8px; }
.section-kicker h2 { margin: 0; white-space: nowrap; color: #52735b; font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-size: 14px; font-weight: 600; }
.kicker-line { flex: 1; height: 1px; background: #ccdbc1; }
.history-total { color: #7d947d; white-space: nowrap; font-size: 9px; }
.history-empty { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 66px; color: #7c927e; text-align: center; font-size: 10px; line-height: 1.55; }
.history-empty span { font-size: 23px; opacity: .6; }.history-empty p { margin: 0; }
.history-list { display: grid; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; }
.history-item { min-height: 43px; display: flex; align-items: center; gap: 9px; padding: 5px 8px; border: 1px solid rgba(214,224,201,.7); border-radius: 10px; background: rgba(255,255,247,.62); }
.history-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #f0f5df; }.history-icon .marker { width: 20px; height: 20px; }.history-item--water .history-icon { color: var(--water); background: #e2f4f2; }.history-item--grass .history-icon { color: var(--grass); background: #e7f2dd; }.history-item--fire .history-icon { color: var(--fire); background: #fbebd9; }
.history-item b { display: block; color: #4d6d56; font-size: 10px; font-weight: 400; }.history-item small { display: block; margin-top: 3px; color: #829480; font-size: 8px; }
.history-value { margin-left: auto; color: #65846c; font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-size: 16px; text-align: right; }.history-value small { font-family: inherit; }
.island-footer-boy { display: flex; align-items: center; justify-content: center; gap: 6px; height: 72px; margin-top: 3px; }
.island-footer-boy .boy-art-shell { flex: 0 0 43px; width: 43px; height: 68px; }
.boy-caption { margin: 0; padding: 7px 12px; border: 1px solid rgba(255,255,246,.9); border-radius: 14px 14px 14px 4px; color: #688170; background: rgba(255,253,235,.72); font-size: 10px; }
.island-actions { display: flex; justify-content: center; margin: 4px 0 1px; }
.island-actions .button { width: min(100%, 300px); min-height: 52px; }
.island-screen > .save-notice { margin-bottom: 8px; }

/* Dialogs and feedback */
.modal-shade, .reward-shade { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(39,75,54,.39); backdrop-filter: blur(3px); animation: shade-in .18s ease-out both; }
@keyframes shade-in { from { opacity: 0; } to { opacity: 1; } }
.settings-dialog { position: relative; width: min(100%, 380px); padding: 25px 19px 18px; border: 2px solid #fffef0; border-radius: 25px; background: linear-gradient(160deg,#fffef0,#f2f0d9); box-shadow: 0 17px 50px rgba(35,66,46,.32), inset 0 0 0 1px #d9e2c5; text-align: center; animation: card-rise .3s cubic-bezier(.14,.8,.25,1.15) both; }
@keyframes card-rise { from { transform: translateY(18px) scale(.95); } to { transform: translateY(0) scale(1); } }
.dialog-sprout { position: absolute; top: -20px; left: calc(50% - 21px); width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; color: white; background: #6fa565; font-family: Georgia; font-size: 29px; box-shadow: 0 3px 9px rgba(43,85,54,.2); }
.settings-dialog h2 { margin: 9px 0 20px; color: #3c674c; font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-size: 20px; font-weight: 600; }
.setting-toggle { width: 100%; min-height: 73px; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #d5dfc6; border-radius: 15px; color: #466a52; background: #fffdf2; text-align: left; cursor: pointer; }
.toggle-illustration { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #edf2dc; font-size: 20px; }
.setting-toggle b { display: block; font-size: 11px; font-weight: 400; }.setting-toggle small { display: block; margin-top: 5px; color: #879784; font-size: 9px; }
.toggle-switch { flex: 0 0 39px; width: 39px; height: 23px; margin-left: auto; padding: 3px; border-radius: 15px; background: #bac7ae; transition: background .2s ease; }.toggle-switch i { display: block; width: 17px; height: 17px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(53,77,51,.3); transition: transform .2s ease; }.setting-toggle--on .toggle-switch { background: #68a269; }.setting-toggle--on .toggle-switch i { transform: translateX(16px); }
.settings-footnote { margin: 14px 0; color: #83917d; font-size: 9px; line-height: 1.5; }.dialog-close { min-width: 120px; min-height: 45px; }
.reward-shade { z-index: 25; background: rgba(28,74,62,.24); }.reward-card { position: relative; width: min(100%, 330px); overflow: hidden; padding: 20px 18px 19px; border: 3px solid rgba(255,255,241,.98); border-radius: 28px; background: linear-gradient(160deg,#fff9df,#e9f4d9); box-shadow: 0 16px 43px rgba(38,77,56,.28), inset 0 0 0 1px rgba(186,206,157,.8); text-align: center; animation: reward-bloom .52s cubic-bezier(.13,.76,.26,1.2) both; }
@keyframes reward-bloom { 0% { transform: translateY(16px) scale(.7); opacity: 0; } 70% { transform: translateY(-3px) scale(1.04); opacity: 1; } 100% { transform: translateY(0) scale(1); } }
.reward-card--water { background: linear-gradient(160deg,#f2fcf4,#cde9eb); }.reward-card--grass { background: linear-gradient(160deg,#fbffe9,#dcefc7); }.reward-card--fire { background: linear-gradient(160deg,#fff8dc,#f4d6b0); }
.reward-rays { position: absolute; top: 12px; left: 0; right: 0; color: #efbb53; font-size: 21px; letter-spacing: .8em; opacity: .75; }
.reward-overline { margin: 13px 0 2px; color: #779170; font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-size: 9px; letter-spacing: .2em; }.reward-card h2 { margin: 4px 0 3px; color: #3a684c; font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-size: 23px; font-weight: 600; }
.reward-scene { position: relative; width: 190px; height: 145px; margin: 0 auto; }.reward-scene > .house-art { position: absolute; left: 3%; bottom: 2%; width: 70%; height: 85%; filter: drop-shadow(0 5px 4px rgba(55,85,51,.2)); }.reward-monster { position: absolute; z-index: 2; right: -2%; bottom: 2%; width: 54%; height: 90%; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(55,85,51,.22)); }
.reward-copy { margin: -1px 0 9px; color: #55775e; font-size: 12px; line-height: 1.65; }.reward-power { display: inline-block; padding: 5px 12px; border: 1px solid rgba(255,255,255,.95); border-radius: 14px; color: #617d62; background: rgba(255,255,239,.72); font-size: 10px; }
.reward-kid { display: flex; align-items: center; justify-content: center; gap: 5px; margin: -3px auto 6px; }
.reward-kid .boy-art-shell { flex: 0 0 29px; width: 29px; height: 48px; }
.reward-kid span { padding: 5px 10px; border: 1px solid rgba(255,255,255,.96); border-radius: 12px 12px 12px 3px; color: #4d7656; background: rgba(255,255,243,.75); font-size: 10px; }
.toast-banner { position: fixed; z-index: 40; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 36px); padding: 11px 16px; border: 1px solid rgba(255,255,246,.95); border-radius: 17px; transform: translateX(-50%); color: #fffef2; background: rgba(58,105,72,.94); box-shadow: 0 8px 22px rgba(42,77,49,.25); text-align: center; font-size: 12px; line-height: 1.5; animation: toast-in .2s ease-out both; }
@keyframes toast-in { from { transform: translate(-50%, 9px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

.qa-panel { position: fixed; z-index: 50; right: 7px; bottom: max(7px, env(safe-area-inset-bottom)); width: min(244px, calc(100vw - 14px)); border: 1px solid #537f57; border-radius: 13px; color: #214a34; background: rgba(246,255,222,.97); box-shadow: 0 4px 16px rgba(29,69,44,.25); font-family: 'Yu Gothic UI', 'Meiryo', sans-serif; }
.qa-panel details { padding: 7px 8px; }.qa-panel summary { cursor: pointer; font-size: 12px; font-weight: 700; }.qa-panel small { display: block; margin-top: 5px; color: #537359; font-size: 8px; text-align: center; }
.qa-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 7px; }.qa-buttons button, .qa-buttons a { min-height: 34px; display: grid; place-items: center; padding: 3px; border: 1px solid #9cbd82; border-radius: 8px; color: #305d3f; background: #fffef0; text-align: center; text-decoration: none; font-size: 10px; cursor: pointer; }.qa-buttons--utility { grid-template-columns: 1fr 1fr; margin-top: 4px; }.qa-buttons--utility button, .qa-buttons--utility a { min-height: 28px; font-size: 9px; }

[data-reduced-motion="true"] *, [data-reduced-motion="true"] *::before, [data-reduced-motion="true"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }

@media (max-height: 700px) and (min-width: 420px) {
  .puzzle-screen { min-height: calc(100svh - 20px); }
  .screen-heading { padding-bottom: 2px; }
  .game-prompt { min-height: 34px; margin-bottom: 5px; }
  .board-frame { width: min(100%, calc(100svh - 252px)); }
  .legend-row { min-height: 26px; margin: 2px 0 0; }
  .puzzle-actions { margin-top: 1px; }
}

@media (min-width: 600px) {
  .world-shell { padding-top: 22px; }
  .screen { width: min(100%, 550px); }
  .title-screen { min-height: calc(100svh - 42px); }
  .puzzle-screen { min-height: calc(100svh - 42px); }
  .board-frame { width: min(100%, 472px, calc(100svh - 305px)); padding: 9px; border-radius: 28px; }
  .board-rim { padding: 6px; }.game-board { gap: 5px; padding: 5px; }
  .tile { border-radius: 15px; }.tile-value { min-width: 23px; height: 21px; font-size: 11px; }.tile-marker { width: 19px; height: 19px; }
  .district-list { grid-template-columns: 1fr; gap: 11px; }
  .district-scene { height: 142px; }
  .history-panel { margin-top: 18px; }
}

@media (max-width: 375px) {
  .world-shell { padding-left: 12px; padding-right: 12px; }
  .board-frame { width: min(100%, calc(100svh - 285px)); padding: 6px; border-radius: 20px; }
  .board-rim { padding: 4px; }.game-board { gap: 3px; padding: 3px; }
  .tile { padding: 2px; border-radius: 10px; }.tile-value { min-width: 16px; height: 15px; right: 1px; bottom: 1px; font-size: 8px; }
  .legend-row { gap: 8px; }.legend-item { font-size: 9px; }
}

@media (max-width: 360px) {
  .board-frame { width: min(100%, calc(100svh - 278px)); }
  .grow-note { display: none; }
}

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

/* V2: keep the goal, score, 25 touch targets and controls together on a phone. */
.screen-heading h1 { font-weight: 800; }
.goal-score-panel { width: 100%; min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 5px; padding: 7px 11px; border: 1px solid rgba(255,255,246,.95); border-radius: 14px; background: linear-gradient(120deg,rgba(255,255,239,.95),rgba(237,248,218,.94)); box-shadow: 0 3px 8px rgba(62,105,67,.1); }
.goal-copy { min-width: 0; display: grid; gap: 1px; color: #41684d; line-height: 1.15; }
.goal-copy b { font-size: 18px; font-weight: 900; }.goal-copy span { font-size: 14px; font-weight: 800; color: #b06d31; }.goal-copy small { color: #66826a; font-size: 12px; font-weight: 800; }
.score-copy { flex: 0 0 92px; display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: end; column-gap: 4px; padding-left: 8px; border-left: 1px solid #dce5ca; text-align: right; color: #547357; }
.score-copy small { grid-column: 1 / -1; font-size: 10px; font-weight: 700; white-space: nowrap; }.score-copy strong { font-size: 28px; line-height: 1; font-weight: 900; color: #315c43; font-variant-numeric: tabular-nums; }.score-copy span { font-size: 11px; font-weight: 800; }
.game-prompt { min-height: 37px; margin: 0 0 4px; font-weight: 800; }
.board-frame { width: min(100%, 452px, calc(100svh - 340px)); padding: 4px; }
.board-frame.generated-art--ready { padding: 0; }
.board-rim { padding: 3px; border-width: 1px; border-radius: 12px; }
.game-board { gap: 2px; padding: 2px; border-radius: 8px; }
.tile { --tile-bottom-shadow: 0 1px 0 rgba(52,84,62,.16); --tile-top-highlight-shadow: inset 0 1px 0 rgba(255,255,255,.7); padding: 1px; overflow: visible; border-radius: 9px; border-color: rgba(255,255,250,.55); box-shadow: var(--tile-bottom-shadow), var(--tile-top-highlight-shadow); }
.tile--water { --tile-ground: #b8dfe2; }.tile--grass { --tile-ground: #d8e8b8; }.tile--fire { --tile-ground: #f1d2a5; }
.tile--join-left, .tile--join-right, .tile--join-top, .tile--join-bottom { background: var(--tile-ground); }
.tile::before { content: ''; position: absolute; z-index: 0; inset: -2px; pointer-events: none; background-image: var(--bridge-left-image, none), var(--bridge-right-image, none), var(--bridge-top-image, none), var(--bridge-bottom-image, none); background-repeat: no-repeat; background-position: left center, right center, center top, center bottom; background-size: var(--bridge-left-size, 0 0), var(--bridge-right-size, 0 0), var(--bridge-top-size, 0 0), var(--bridge-bottom-size, 0 0); }
.tile--join-left { --bridge-left-image: linear-gradient(var(--tile-ground), var(--tile-ground)); --bridge-left-size: 2px calc(100% - 10px); }
.tile--join-right { --bridge-right-image: linear-gradient(var(--tile-ground), var(--tile-ground)); --bridge-right-size: 2px calc(100% - 10px); }
.tile--join-top { --bridge-top-image: linear-gradient(var(--tile-ground), var(--tile-ground)); --bridge-top-size: calc(100% - 10px) 2px; }
.tile--join-bottom { --bridge-bottom-image: linear-gradient(var(--tile-ground), var(--tile-ground)); --bridge-bottom-size: calc(100% - 10px) 2px; }
.tile--join-left { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-left-color: transparent; }
.tile--join-right { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right-color: transparent; }
.tile--join-top { border-top-left-radius: 4px; border-top-right-radius: 4px; border-top-color: transparent; }
.tile--join-bottom { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-color: transparent; }
.tile--join-top { --tile-top-highlight-shadow: inset 0 0 0 0 transparent; }
.tile--join-bottom { --tile-bottom-shadow: 0 0 0 0 transparent; }
.tile--join-left.tile--join-top { border-top-left-radius: 3px; }.tile--join-left.tile--join-bottom { border-bottom-left-radius: 3px; }
.tile--join-right.tile--join-top { border-top-right-radius: 3px; }.tile--join-right.tile--join-bottom { border-bottom-right-radius: 3px; }
.tile-house { z-index: 1; width: 98%; height: 98%; margin: 1% 0 0; }
.tile-marker { top: 2px; left: 2px; width: clamp(13px, 4vw, 19px); height: clamp(13px, 4vw, 19px); }
.tile-value { min-width: 21px; height: 20px; right: 2px; bottom: 2px; border-radius: 7px 3px 7px 3px; font-size: 11px; font-weight: 900; }
.tile-crown { position: absolute; z-index: 4; top: 1px; right: 1px; color: #d28a2d; font-size: clamp(11px, 3.1vw, 16px); line-height: 1; text-shadow: 0 1px white, 0 0 3px white; }
.tile--hint { z-index: 2; border: 2px solid #fff2a4; box-shadow: 0 0 0 2px #f1bd55, 0 0 12px rgba(255,214,99,.8), 0 3px 0 rgba(52,84,62,.2); animation: hint-glow 1.15s ease-in-out infinite alternate; }
.tile--selected { z-index: 6; filter: brightness(1.13) saturate(1.1); box-shadow: 0 0 0 2px #fff1a0, 0 0 14px rgba(255,214,92,.82); }
.tile--gathering { z-index: 9; transition: transform .24s cubic-bezier(.23,.76,.18,1), opacity .24s ease, filter .24s ease; }
.tile--gathering-active:not(.tile--gather-anchor) { transform: translate(var(--move-x),var(--move-y)) scale(.42); opacity: .12; }
.tile--gather-anchor.tile--gathering-active { transform: scale(1.08); box-shadow: 0 0 0 2px #fff1a0, 0 0 15px rgba(255,216,94,.85); }
.tile--pop { animation: merge-pop .28s cubic-bezier(.15,.8,.25,1.18) both; }
@keyframes merge-pop { 50% { transform: scale(1.17); filter: brightness(1.25); } }
.merge-sum { min-width: 30px; height: 25px; font-size: 13px; }
.merge-sum { min-width: 42px; height: 31px; padding: 2px; font-size: 10px; line-height: 1.1; text-align: center; }
.chain-feedback { position: absolute; z-index: 8; top: 5px; left: 50%; transform: translateX(-50%); padding: 5px 13px; border: 2px solid rgba(255,255,255,.92); border-radius: 20px; color: #fffef1; background: #62965a; box-shadow: 0 2px 7px rgba(42,78,48,.25); font-size: 15px; font-weight: 900; text-shadow: 0 1px 2px rgba(42,78,48,.3); animation: chain-pop .3s cubic-bezier(.15,.8,.25,1.2) both; }
@keyframes chain-pop { from { transform: translate(-50%,-7px) scale(.7); opacity: 0; } to { transform: translate(-50%,0) scale(1); opacity: 1; } }
.chain-feedback + .step-score-feedback { top: -27px; }
.step-score-feedback { position: absolute; z-index: 8; top: -28px; left: 50%; display: flex; justify-content: center; gap: 4px; width: max-content; max-width: 100%; transform: translateX(-50%); pointer-events: none; }
.step-score-feedback span { padding: 4px 7px; border: 1px solid white; border-radius: 12px; color: #fffef1; background: rgba(55,104,67,.95); box-shadow: 0 2px 6px rgba(42,78,48,.23); font-size: 11px; font-weight: 900; white-space: nowrap; }
.legend-row { min-height: 29px; margin: 1px 0 0; gap: 13px; }
.legend-item { font-size: 12px; font-weight: 700; }.legend-item .marker { width: 18px; height: 18px; }
.puzzle-actions { margin-top: 2px; gap: 10px; }
.puzzle-actions .button { min-height: 48px; font-size: 15px; font-weight: 800; }
.puzzle-screen > .save-ok { margin-top: 2px; font-size: 10px; }
.setting-toggle { min-height: 64px; margin-top: 8px; }.setting-toggle b { font-size: 13px; font-weight: 700; }.setting-toggle small { font-size: 10px; }
.settings-dialog { max-height: calc(100svh - 28px); overflow-y: auto; }
.reward-shade { overflow-y: auto; place-items: center; padding: 10px; }
.result-card { width: min(100%, 380px); max-height: calc(100svh - 20px); overflow-y: auto; padding: 15px 15px 14px; }
.result-card h2 { margin: 5px 0 7px; font-size: 21px; font-weight: 800; }
.result-castles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 4px 0 8px; }
.result-castle { min-width: 0; padding: 4px; border: 1px solid rgba(255,255,255,.9); border-radius: 11px; background: rgba(255,255,245,.58); }
.result-castle > div { position: relative; width: 100%; height: 61px; }.result-castle .house-art { position: absolute; left: 4%; bottom: 0; width: 70%; height: 100%; }.result-monster { position: absolute; right: 0; bottom: 0; width: 47%; height: 90%; object-fit: contain; }
.result-castles--single { grid-template-columns: minmax(0, 210px); justify-content: center; margin: 5px auto 9px; }
.result-castles--single .result-castle { padding: 7px; border-radius: 15px; }.result-castles--single .result-castle > div { height: 124px; }
.result-castles--single .result-castle .house-art { left: 2%; width: 70%; }.result-castles--single .result-monster { right: -1%; width: 54%; height: 96%; }
.result-castles--single .result-castle b { font-size: 13px; }
.result-castles--double { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; margin-right: auto; margin-left: auto; }
.result-castles--double .result-castle > div { height: 91px; }.result-castles--double .result-castle b { font-size: 12px; }
.world-shell[data-reduced-motion="false"] .result-card--cheer .result-monster { animation: monster-cheer .48s ease-in-out 2 alternate; }
@keyframes monster-cheer { to { transform: translateY(-7px) rotate(5deg) scale(1.04); } }
.result-castle b { display: block; color: #42694c; font-size: 10px; font-weight: 800; }
.result-no-castle { margin: 5px 0 8px; color: #507557; font-size: 13px; font-weight: 800; }
.result-score { display: flex; align-items: baseline; justify-content: center; gap: 5px; margin: 2px 0 8px; padding: 6px; border: 1px solid #e5e8c9; border-radius: 13px; color: #537454; background: rgba(255,255,246,.72); }
.result-score small { font-size: 11px; font-weight: 700; }.result-score strong { color: #315e42; font-size: 25px; font-weight: 900; font-variant-numeric: tabular-nums; }.result-score span { font-size: 11px; font-weight: 800; }
.result-goals { display: grid; gap: 5px; margin: 5px 0 8px; }.result-goal { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 12px; background: rgba(255,255,245,.8); text-align: left; }.result-goal-icon { position: relative; flex: 0 0 60px; width: 60px; height: 56px; display: grid; place-items: center; color: #d38d3f; font-size: 40px; }.result-decoration { position: absolute; width: 100%; height: 100%; object-fit: contain; }.result-goal-icon i { font-style: normal; }.result-goal b, .result-goal small { display: block; }.result-goal b { color: #456c4b; font-size: 14px; font-weight: 800; }.result-goal small { margin-top: 2px; color: #71856c; font-size: 13px; font-weight: 700; }
.result-progress { display: grid; gap: 3px; padding: 7px 9px; border-radius: 12px; background: #edf3d9; color: #486b4d; text-align: left; }.result-progress b { font-size: 12px; font-weight: 800; }.result-progress span { color: #71815f; font-size: 10px; font-weight: 700; }
.result-continue { width: 100%; min-height: 48px; margin-top: 9px; font-size: 16px; font-weight: 800; }
.kingdom-plaza { margin: 4px 0 14px; padding: 10px; border: 1px solid rgba(255,255,245,.9); border-radius: 17px; background: rgba(255,253,237,.62); box-shadow: 0 4px 11px rgba(60,100,70,.08); }
.plaza-heading { display: flex; align-items: center; gap: 8px; color: #dda343; }.plaza-heading > span { font-size: 22px; }.plaza-heading p { margin: 0; color: #8a9a71; font-size: 9px; font-weight: 700; }.plaza-heading h2 { margin: 0; color: #4f7654; font-size: 16px; font-weight: 800; }
.plaza-ground { position: relative; min-height: 104px; display: flex; align-items: end; justify-content: center; gap: 6px; overflow: hidden; margin-top: 6px; padding: 8px 5px 5px; border-radius: 13px; background: linear-gradient(180deg,#cfe9e8 0 40%,#c7e5ac 41% 68%,#9fca83 69%); }
.plaza-sun { position: absolute; top: 5px; right: 9px; color: #efc35f; font-size: 18px; }.plaza-path { position: absolute; left: 12%; right: 12%; bottom: 6px; height: 13px; border: 3px solid rgba(245,229,169,.72); border-radius: 50%; }
.plaza-empty { position: relative; z-index: 1; margin: auto; color: #68876b; text-align: center; font-size: 11px; font-weight: 700; line-height: 1.5; }
.plaza-reward { position: relative; z-index: 1; flex: 0 1 31%; height: 76px; display: flex; align-items: center; justify-content: end; flex-direction: column; padding: 2px; }
.plaza-reward-fallback { position: absolute; inset: 0 0 13px; display: grid; place-items: center; color: #e6ac52; font-size: 38px; text-shadow: 0 2px rgba(255,255,255,.7); }.plaza-reward-image { position: absolute; inset: 0 0 12px; width: 100%; height: calc(100% - 12px); object-fit: contain; }.plaza-reward small { position: relative; z-index: 2; max-width: 100%; overflow: hidden; padding: 2px 5px; border-radius: 7px; color: #49694a; background: rgba(255,255,242,.83); font-size: 9px; font-weight: 800; white-space: nowrap; }

@media (max-width: 420px) {
  .world-shell { padding: max(5px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)); }
  .puzzle-screen { min-height: calc(100svh - 13px); padding-top: 3px; }
  .screen-heading { padding-bottom: 2px; }.screen-heading h1 { font-size: 22px; }.screen-heading .eyebrow { margin-bottom: 1px; font-size: 9px; }
  .round-nav { flex-basis: 47px; width: 47px; min-height: 44px; }
  .goal-score-panel { min-height: 70px; margin-bottom: 4px; padding: 5px 9px; }.goal-copy b { font-size: 18px; }.goal-copy span { font-size: 14px; }.goal-copy small { font-size: 12px; }
  .score-copy { flex-basis: 84px; }.score-copy strong { font-size: 28px; }
  .game-prompt { min-height: 34px; padding: 4px 8px; font-size: 13px; }
  .board-frame { width: min(100%, calc(100svh - 330px)); padding: 0; border: 1px solid rgba(111,133,83,.5); border-radius: 14px; background: rgba(255,252,233,.6); box-shadow: 0 2px 5px rgba(44,87,60,.13); }
  .board-frame::before, .board-frame-art, .board-frame .frame-vine { display: none !important; }
  .board-rim, .board-frame.generated-art--ready .board-rim { position: absolute; inset: 2px; padding: 2px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; }
  .game-board, .board-frame.generated-art--ready .game-board { gap: 1px; padding: 1px; border-radius: 6px; background: #ddd5b7; box-shadow: none; }
  .tile { border-radius: 7px; }.tile-house { width: 100%; height: 100%; margin: 0; }
  .legend-row { min-height: 27px; margin-top: 0; }.legend-item { font-size: 11px; }
  .puzzle-actions { margin-top: 0; }.puzzle-actions .button { min-height: 46px; }
}

@media (max-width: 360px) and (max-height: 680px) {
  .board-frame { width: min(100%, calc(100svh - 330px)); }
  .puzzle-screen > .save-ok { font-size: 9px; }
}

/* V3: castle-ready clusters, one-tap feedback, and a quiet objective line. */
.puzzle-screen { animation: none; }
.goal-score-panel { min-height: 59px; }
.goal-copy { gap: 3px; }
.goal-copy b { font-size: clamp(16px, 4.4vw, 19px); }
.goal-copy span { font-size: 15px; }
.castle-rule { margin: 0 0 3px; color: #55744f; text-align: center; font-size: 14px; font-weight: 800; line-height: 1.25; }
.score-copy { flex-basis: 106px; }
.score-copy strong { font-size: clamp(25px, 7vw, 30px); }
.tile--castle-ready { z-index: 3; outline: 2px solid #e9b94f; outline-offset: -2px; box-shadow: 0 0 0 1px rgba(255,249,208,.96), 0 0 9px rgba(255,207,78,.68), var(--tile-bottom-shadow); animation: castle-ready-glow 1.9s ease-in-out infinite alternate; }
.tile--castle-ready::after { content: '✦'; position: absolute; z-index: 5; top: 1px; right: 2px; color: #d39430; font-size: clamp(9px, 2.7vw, 13px); line-height: 1; pointer-events: none; text-shadow: 0 1px 2px white; animation: castle-ready-sparkle 1.9s ease-in-out infinite; }
.tile--castle-ready .tile-crown { top: -5px; left: 50%; right: auto; transform: translateX(-50%); color: #ba7720; font-size: clamp(13px, 3.8vw, 19px); }
@keyframes castle-ready-glow { to { box-shadow: 0 0 0 1px white, 0 0 12px rgba(255,207,78,.88), var(--tile-bottom-shadow); } }
@keyframes castle-ready-sparkle { 50% { opacity: .35; transform: rotate(25deg) scale(.72); } }
.board-event { position: absolute; z-index: 16; inset: 7%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; overflow: hidden; padding: 9px; border: 2px solid rgba(255,255,246,.96); border-radius: 19px; color: #426749; background: rgba(255,253,222,.93); box-shadow: 0 5px 18px rgba(53,76,44,.25); text-align: center; pointer-events: none; animation: board-event-in .22s ease-out both; }
.board-event b { font-size: clamp(17px, 5vw, 23px); font-weight: 900; line-height: 1.2; }
.board-event strong { color: #a76528; font-size: clamp(14px, 4.2vw, 20px); font-weight: 900; }
.board-event--castle { inset: auto; top: 50%; left: 50%; width: min(52%, 190px); height: auto; aspect-ratio: .96; transform: translate(-50%,-50%); gap: 1px; overflow: visible; padding: 3px; border: 0; border-radius: 0; color: #426749; background: radial-gradient(ellipse,rgba(255,251,221,.82),rgba(255,250,222,0) 72%); box-shadow: none; }
.board-event--castle b { padding: 1px 6px; border-radius: 10px; background: rgba(255,255,239,.78); font-size: clamp(13px, 3.6vw, 17px); text-shadow: 0 1px 2px white; }
.board-event--castle strong { padding: 1px 6px; border-radius: 9px; background: rgba(255,255,239,.76); font-size: clamp(10px, 3vw, 13px); }
.castle-event-art { position: relative; width: 93%; height: 65%; min-height: 66px; }
.castle-event-art .house-art { position: absolute; left: 2%; bottom: 0; width: 74%; height: 100%; filter: drop-shadow(0 2px 3px rgba(79,96,51,.2)); }
.castle-event-monster { position: absolute; right: -2%; bottom: 0; width: 45%; height: 95%; object-fit: contain; }
.castle-event-sparkles { color: #d99b35; font-size: 14px; letter-spacing: 3px; text-shadow: 0 0 7px #fff; animation: castle-event-twinkle .6s ease-in-out infinite alternate; }
.board-event--goal { inset: 5% 7% auto; width: auto; min-height: 52px; gap: 1px; padding: 5px 8px; border: 1px solid rgba(245,207,111,.92); border-radius: 12px; color: #466b48; background: rgba(255,253,232,.9); box-shadow: 0 2px 8px rgba(76,92,45,.18); }
.board-event--goal b { font-size: clamp(13px, 3.8vw, 16px); }
.board-event--goal strong { color: #996126; font-size: clamp(11px, 3.1vw, 13px); }
.board-event--merge { inset: auto auto 8%; left: 50%; width: max-content; min-width: 34%; max-width: 86%; min-height: 62px; transform: translateX(-50%); padding: 7px 17px; border-radius: 16px; background: rgba(255,254,235,.94); }
.board-event--merge b { font-size: 16px; }
.board-event--merge strong { font-size: 20px; }
.merge-event--small { box-shadow: 0 3px 10px rgba(53,76,44,.18); }
.merge-event--big { border-width: 2px; border-color: #ffdda0; box-shadow: 0 0 18px rgba(246,188,83,.55); }
.merge-event--huge { border-width: 3px; border-color: #f1c35e; box-shadow: 0 0 25px rgba(255,196,59,.8); }
.merge-level--medium[data-phase="pop"] .tile--pop { animation-duration: .36s; }
.merge-level--big[data-phase="pop"] .tile--pop { animation-duration: .43s; filter: brightness(1.12); }
.merge-level--huge[data-phase="pop"] .tile--pop { animation-duration: .5s; filter: brightness(1.2) saturate(1.16); }
.merge-level--big[data-phase="pop"] .step-score-feedback span,
.merge-level--huge[data-phase="pop"] .step-score-feedback span { padding: 6px 10px; font-size: 14px; box-shadow: 0 0 13px rgba(255,207,78,.72); }
.merge-level--huge[data-phase="pop"] .step-score-feedback span { transform: scale(1.12); }
.toast-banner { z-index: 42; max-width: min(460px, calc(100vw - 24px)); font-size: 15px; font-weight: 900; pointer-events: none; }
@keyframes board-event-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes castle-event-twinkle { to { opacity: .55; transform: scale(.9); } }
@media (max-width: 420px) {
  .goal-score-panel { min-height: 56px; }
  .goal-copy b { font-size: 16px; }
  .goal-copy span { font-size: 14px; }
  .score-copy { flex-basis: 93px; }
  .castle-rule { font-size: 14px; }
  .board-event--castle { inset: auto; width: min(54%, 170px); }
  .board-event--goal { inset: 4% 6% auto; }
  .board-event--merge { inset: auto auto 8%; left: 50%; width: max-content; }
  .castle-event-art { height: 64%; min-height: 62px; }
  .toast-banner { bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .tile--castle-ready, .tile--castle-ready::after, .castle-event-sparkles { animation: none !important; }
}

/* V4: cumulative castle progress and a kingdom that grows with each milestone. */
.kingdom-progress { width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 5px; padding: 7px 11px; border: 1px solid rgba(255,255,246,.96); border-radius: 15px; background: linear-gradient(120deg,rgba(255,255,239,.97),rgba(237,248,218,.95)); box-shadow: 0 3px 8px rgba(62,105,67,.1); }
.kingdom-progress-main { min-width: 0; display: grid; gap: 2px; }
.castle-total { display: flex; align-items: baseline; gap: 5px; color: #42694c; line-height: 1; white-space: nowrap; }
.castle-total-icon { align-self: center; font-size: clamp(19px, 5vw, 25px); }
.castle-total > span:nth-child(2) { font-size: clamp(13px, 3.8vw, 16px); font-weight: 900; }
.castle-total strong { margin-left: 2px; color: #315e42; font-size: clamp(27px, 7.2vw, 34px); font-weight: 1000; font-variant-numeric: tabular-nums; }
.castle-total small { font-size: 13px; font-weight: 900; }
.next-milestone { margin: 0; color: #ad7335; font-size: clamp(11px, 3.1vw, 13px); font-weight: 900; line-height: 1.2; white-space: nowrap; }
.next-milestone b { color: #955a25; font-size: 1.15em; font-variant-numeric: tabular-nums; }
.kingdom-progress .score-copy { flex: 0 0 auto; min-width: 69px; display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: end; column-gap: 3px; padding-left: 8px; border-left: 1px solid #dce5ca; text-align: right; color: #71836e; }
.kingdom-progress .score-copy small { grid-column: 1 / -1; font-size: 9px; font-weight: 800; }
.kingdom-progress .score-copy strong { color: #648069; font-size: clamp(15px, 4.2vw, 19px); line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.kingdom-progress .score-copy span { font-size: 9px; font-weight: 700; }
.castle-rule { margin: 0 0 3px; color: #55744f; text-align: center; font-size: 14px; font-weight: 900; line-height: 1.25; }
.tile--castle-ready { animation-duration: 2.8s; }
.tile--castle-ready::after { content: '✦'; }
.tile--castle-ready .tile-crown { top: -5px; left: 50%; right: auto; display: grid; justify-items: center; gap: 0; transform: translateX(-50%); color: #ba7720; font-size: clamp(12px, 3.5vw, 17px); }
.tile-crown small { position: absolute; top: -5px; left: calc(100% - 3px); min-width: 18px; padding: 1px 3px; border: 1px solid #fff7d5; border-radius: 8px; color: #77501f; background: #fff4bd; box-shadow: 0 1px 3px rgba(79,56,22,.2); font: 900 8px/1.2 system-ui,sans-serif; white-space: nowrap; }
.board-event--castle { z-index: 17; }
.castle-event-art { overflow: visible; }
.castle-event-monsters { position: absolute; right: -1%; bottom: 0; width: 48%; height: 96%; display: flex; align-items: end; justify-content: end; gap: 0; }
.castle-event-monsters .castle-event-monster { position: relative; inset: auto; flex: 0 1 100%; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(79,96,51,.2)); }
.castle-event-monsters:has(.castle-event-monster--water + .castle-event-monster--grass) { width: 62%; right: -7%; }
.castle-event-monsters:has(.castle-event-monster--water + .castle-event-monster--grass) .castle-event-monster { flex-basis: 34%; width: 34%; height: 86%; }
.castle-event-monsters .castle-event-monster--water { transform: translateY(2px) rotate(-3deg); }
.castle-event-monsters .castle-event-monster--fire { transform: translateY(1px) rotate(3deg); }
.board-event--castle > strong { padding: 3px 8px; color: #946027; background: rgba(255,255,242,.88); font-size: clamp(12px, 3.4vw, 15px); }
.castle-event-score { color: #687c61; font-size: 10px; font-weight: 800; }
.milestone-copy { max-width: 100%; color: #875f2d; font-size: clamp(9px, 2.6vw, 12px); font-weight: 900; line-height: 1.25; }
.board-event--milestone { inset: auto; top: 50%; left: 50%; width: min(78%, 330px); min-height: 148px; aspect-ratio: auto; gap: 3px; overflow: hidden; padding: 7px 12px 9px; transform: translate(-50%,-50%); border: 2px solid rgba(255,255,245,.96); border-radius: 22px; color: #45694a; background: linear-gradient(145deg,rgba(255,254,233,.96),rgba(235,246,215,.96)); box-shadow: 0 6px 24px rgba(54,82,45,.25),0 0 0 2px rgba(244,204,105,.56); }
.board-event--milestone .castle-event-art { width: 77%; height: 70px; min-height: 70px; flex: 0 0 70px; }
.board-event--milestone .castle-event-art > .house-art { width: 70%; }
.board-event--milestone > b { position: relative; z-index: 2; max-width: 100%; font-size: clamp(13px, 3.8vw, 18px); text-shadow: 0 1px 2px white; }
.board-event--milestone .milestone-copy { position: relative; z-index: 2; padding: 2px 7px; border-radius: 10px; background: rgba(255,255,246,.75); text-align: center; }
.board-event--stage-1 { border-color: #ffe5a3; }
.board-event--stage-3 { border-color: #a5d89b; background: linear-gradient(145deg,rgba(252,255,232,.97),rgba(219,245,218,.96)); }
.board-event--stage-10 { width: min(80%, 350px); min-height: 160px; border-width: 3px; border-color: #efc45d; box-shadow: 0 7px 25px rgba(54,82,45,.25),0 0 0 4px rgba(250,222,133,.3); }
.board-event--stage-10 > b { color: #795328; font-size: clamp(15px, 4.5vw, 21px); }
.board-event--stage-25 { width: min(84%, 365px); min-height: 170px; border-width: 3px; border-color: #e8b548; box-shadow: 0 7px 25px rgba(54,82,45,.27),0 0 0 5px rgba(250,222,133,.36); }
.board-event--stage-50 { width: min(86%, 375px); min-height: 176px; border-width: 4px; border-color: #dba53a; background: linear-gradient(145deg,#fffbe2,#f8edbf 48%,#e6f5dc); box-shadow: 0 8px 28px rgba(54,82,45,.3),0 0 0 6px rgba(255,224,124,.4); }
.board-event--stage-50 > b { color: #865322; font-size: clamp(16px, 4.8vw, 23px); }
.board-event--stage-100 { width: min(90%, 400px); min-height: 190px; border-width: 4px; border-color: #d99832; background: linear-gradient(145deg,#fff8d9,#f4e6a6 46%,#dff0d2); box-shadow: 0 9px 35px rgba(54,82,45,.32),0 0 0 8px rgba(255,222,120,.45),inset 0 0 28px rgba(255,255,255,.7); }
.board-event--stage-100 > b { color: #795020; font-size: clamp(17px, 5.1vw, 25px); }
.celebration-particles { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.confetti { position: absolute; top: 47%; left: 50%; width: 6px; height: 10px; border-radius: 2px; opacity: 0; background: var(--confetti); animation: confetti-burst 1.35s cubic-bezier(.15,.63,.28,1) both; }
.confetti--0 { --confetti:#f1bd49; --burst-x:-103px; --burst-y:-63px; --spin:-120deg; }
.confetti--1 { --confetti:#77b878; --burst-x:-73px; --burst-y:-81px; --spin:90deg; }
.confetti--2 { --confetti:#78c8d4; --burst-x:-37px; --burst-y:-95px; --spin:160deg; }
.confetti--3 { --confetti:#ee8871; --burst-x:3px; --burst-y:-101px; --spin:-90deg; }
.confetti--4 { --confetti:#e3a84d; --burst-x:45px; --burst-y:-88px; --spin:130deg; }
.confetti--5 { --confetti:#88bd65; --burst-x:82px; --burst-y:-70px; --spin:-150deg; }
.confetti--6 { --confetti:#8eb8dc; --burst-x:109px; --burst-y:-35px; --spin:70deg; }
.confetti--7 { --confetti:#ecba65; --burst-x:0px; --burst-y:-117px; --spin:180deg; }
.confetti:nth-child(8n + 1) { margin-left: -19px; margin-top: 7px; animation-delay: 0s; }
.confetti:nth-child(8n + 2) { margin-left: 16px; margin-top: 15px; animation-delay: .04s; }
.confetti:nth-child(8n + 3) { margin-left: -2px; margin-top: 21px; animation-delay: .08s; }
.confetti:nth-child(8n + 4) { margin-left: 26px; margin-top: 4px; animation-delay: .12s; }
.confetti:nth-child(8n + 5) { margin-left: -33px; margin-top: -8px; animation-delay: .16s; }
.confetti:nth-child(8n + 6) { margin-left: 4px; margin-top: -14px; animation-delay: .2s; }
.confetti:nth-child(8n + 7) { margin-left: 36px; margin-top: -12px; animation-delay: .24s; }
.confetti:nth-child(8n) { margin-left: -47px; margin-top: -5px; animation-delay: .28s; }
@keyframes confetti-burst { 0% { opacity: 0; transform: translate(0,0) rotate(0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--burst-x),var(--burst-y)) rotate(var(--spin)) scale(1); } }
.island-kingdom-stats { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin: 3px 0 8px; padding: 8px 10px; border: 1px solid rgba(255,255,245,.9); border-radius: 15px; background: rgba(255,253,238,.76); box-shadow: 0 3px 8px rgba(62,105,67,.08); }
.island-stat-total, .island-stat-monsters { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 4px; color: #577552; }
.island-stat-total > span { grid-row: span 2; font-size: 22px; align-self: center; }
.island-stat-total b, .island-stat-monsters b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.island-stat-total small, .island-stat-monsters small { grid-column: 2; font-size: 9px; font-weight: 700; white-space: nowrap; }
.island-stat-monsters { grid-template-columns: auto; border-left: 1px solid #dce5ca; padding-left: 8px; text-align: center; }
.island-color-counts { display: flex; align-items: center; gap: 4px; }
.island-color-count { display: flex; align-items: center; gap: 1px; padding: 3px 4px; border-radius: 9px; background: rgba(255,255,255,.65); }
.island-color-count .marker { width: 14px; height: 14px; }
.island-color-count b { color: #526e51; font-size: 11px; font-variant-numeric: tabular-nums; }
.island-color-count small { color: #71836e; font-size: 8px; }
.plaza-progress-copy { margin: 4px 2px 0; color: #71836e; text-align: right; font-size: 9px; font-weight: 800; }
.plaza-royal { position: absolute; inset: 0 0 11px; display: grid; place-items: end center; }
.royal-platform { position: absolute; left: 15%; right: 15%; bottom: 2%; height: 22%; border: 3px solid rgba(237,194,88,.92); border-radius: 50%; background: linear-gradient(180deg,#ffedab,#c5a35a); box-shadow: 0 3px 5px rgba(93,77,39,.22),inset 0 2px 2px rgba(255,255,236,.85); }
.royal-castle { position: absolute; z-index: 1; left: 15%; bottom: 13%; width: 57%; height: 84%; filter: drop-shadow(0 3px 2px rgba(68,80,44,.2)); }
.royal-castle .house-art { width: 100%; height: 100%; }
.royal-monsters { position: absolute; z-index: 2; left: 50%; right: 5%; bottom: 7%; height: 77%; display: flex; align-items: end; justify-content: center; }
.royal-monster { flex: 0 1 34%; width: 34%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(57,78,46,.18)); }
.royal-monster--water { transform: rotate(-7deg); }.royal-monster--fire { transform: rotate(7deg); }
.plaza-reward--royalPlaza { flex: 0 1 43%; height: 86px; }
.plaza-reward--royalPlaza small { z-index: 4; }
.plaza-ground:has(.plaza-reward--royalPlaza) { min-height: 116px; }
@media (max-width: 420px) {
  .kingdom-progress { min-height: 68px; gap: 5px; padding: 6px 8px; }
  .castle-total { gap: 3px; }
  .castle-total > span:nth-child(2) { font-size: 12px; }
  .castle-total strong { font-size: clamp(25px, 7vw, 30px); }
  .next-milestone { font-size: 11px; }
  .kingdom-progress .score-copy { min-width: 57px; padding-left: 6px; }
  .kingdom-progress .score-copy strong { font-size: 15px; }
  .board-frame { width: min(100%, calc(100svh - 352px)); }
  .board-event--milestone { width: min(84%, 330px); min-height: 139px; padding: 6px 9px; }
  .board-event--stage-100 { width: min(90%, 360px); }
  .board-event--milestone .castle-event-art { height: 62px; min-height: 62px; flex-basis: 62px; }
  .island-kingdom-stats { grid-template-columns: auto 1fr; row-gap: 5px; }
  .island-color-counts { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti, .board-event--milestone, .board-event--milestone * { animation: none !important; }
}
.world-shell[data-reduced-motion="true"] .confetti,
.world-shell[data-reduced-motion="true"] .board-event--milestone,
.world-shell[data-reduced-motion="true"] .board-event--milestone * { animation: none !important; }

/* FINAL v5.1 UI completion */
.save-ok { display: none !important; }
.kingdom-progress-main { flex: 1 1 auto; min-width: 0; }
.next-milestone { font-size: clamp(13px,3.3vw,14px); white-space: normal; overflow-wrap: anywhere; }
.kingdom-progress .score-copy { flex: 0 0 auto; min-width: max-content; }
.tile-value { min-width: 22px; height: 22px; padding: 0 4px; border-radius: 8px 4px 9px 4px; font-size: 15px; font-weight: 900; }
.screen-heading { position: relative; padding-right: 102px; }
.screen-heading > .round-nav { position: absolute; top: 0; right: 44px; }
.screen-heading > .screen-gear { position: absolute; top: 0; right: 0; }
.island-heading-actions { display: flex; align-items: center; gap: 7px; }
.island-heading-actions .screen-gear { flex: 0 0 auto; }
.milestone-progress { width: 100%; height: 8px; overflow: hidden; margin-top: 3px; border: 1px solid #d8e3c9; border-radius: 99px; background: #e8efdc; }
.milestone-progress span { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg,#8dc96b,#e6bb51); transition: width .32s ease; }
.prompt-boy { width: 30px; height: 38px; flex: 0 0 30px; align-self: end; margin-left: auto; overflow: hidden; }
.prompt-boy .boy-art-shell { width: 30px; height: 38px; border: 0; background: transparent; box-shadow: none; }
.prompt-boy .boy-art-placeholder,.prompt-boy .boy-art-image { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.game-prompt { gap: 7px; }
.game-prompt > span:nth-child(2) { min-width: 0; }
.puzzle-actions .button--help { min-height: 56px; font-size: 19px; }
.tile--bump { animation: tile-friendly-bump .28s ease-in-out; }
@keyframes tile-friendly-bump { 25% { transform: translateX(-3px) rotate(-2deg); } 60% { transform: translateX(3px) rotate(2deg); } }
.tile-detail { position: absolute; z-index: 24; left: 50%; bottom: max(74px, calc(70px + env(safe-area-inset-bottom))); width: min(92%, 340px); display: flex; align-items: center; gap: 10px; padding: 11px 34px 11px 12px; transform: translateX(-50%); border: 2px solid #efd38c; border-radius: 16px; color: #4a674c; background: rgba(255,254,239,.98); box-shadow: 0 5px 16px rgba(52,72,42,.24); }
.tile-detail .detail-marker { width: 31px; height: 31px; flex: 0 0 31px; }
.tile-detail .detail-marker .marker { width: 100%; height: 100%; }
.tile-detail b { font-size: 15px; }
.tile-detail p { margin: 2px 0 0; font-size: 13px; font-weight: 800; line-height: 1.25; }
.tile-detail-close { position: absolute; top: 4px; right: 5px; width: 28px; height: 28px; border: 0; border-radius: 50%; color: #587250; background: #edf2de; font-size: 20px; }
.board-event--castle.board-event--compact { inset: auto auto 8%; left: 50%; width: max-content; max-width: 88%; min-height: 40px; display: flex; flex-direction: row; gap: 4px; padding: 6px 13px; transform: translateX(-50%); border: 1px solid #edd18a; border-radius: 14px; background: rgba(255,254,239,.94); box-shadow: 0 3px 10px rgba(53,76,44,.2); }
.board-event--compact .castle-event-art,.board-event--compact .castle-event-sparkles { display: none; }
.board-event--compact b { font-size: clamp(13px,3.8vw,16px); }
.board-event--compact strong { font-size: clamp(11px,3vw,13px); white-space: nowrap; }
.board-event--compact .castle-event-score { font-size: 10px; white-space: nowrap; }
.tutorial-toast { position: fixed; z-index: 46; left: 50%; bottom: max(86px,calc(76px + env(safe-area-inset-bottom))); width: min(92%,420px); display: flex; align-items: center; gap: 10px; padding: 10px 14px; transform: translateX(-50%); border: 2px solid #edcb70; border-radius: 16px; color: #4b6949; background: rgba(255,254,235,.97); box-shadow: 0 5px 18px rgba(54,76,45,.2); pointer-events: none; }
.tutorial-toast > span { font-size: 25px; }
.tutorial-toast div { display: grid; gap: 2px; }
.tutorial-toast b { font-size: 16px; }
.tutorial-toast small { font-size: 12px; font-weight: 800; }
.modal-shade { z-index: 80; }
.settings-dialog { max-height: min(88dvh,720px); overflow-y: auto; }
.settings-extra-actions,.menu-actions { display: grid; gap: 9px; width: 100%; margin-top: 9px; }
.settings-extra-actions .button,.menu-actions .button { width: 100%; min-height: 48px; font-size: 16px; }
.button--danger { border: 1px solid #d58e78; color: #713c37; background: linear-gradient(180deg,#ffe5d9,#f8c8b8); box-shadow: 0 3px 0 #cd9b8c; }
.confirm-dialog { text-align: center; }
.confirm-dialog p { max-width: 330px; margin: 5px auto 18px; color: #657b5d; font-size: 15px; font-weight: 800; line-height: 1.5; }
.confirm-icon { font-size: 42px; }
.confirm-actions { display: grid; gap: 9px; }
.confirm-actions .button { min-height: 50px; font-size: 17px; }
.milestone-overlay--small { position: fixed; z-index: 72; top: max(10px,env(safe-area-inset-top)); left: 50%; width: min(92vw,430px); min-height: 72px; display: grid; justify-items: center; gap: 2px; padding: 8px 14px; transform: translateX(-50%); border: 2px solid #e7bd58; border-radius: 17px; color: #536c4b; background: rgba(255,251,220,.97); box-shadow: 0 4px 15px rgba(64,75,41,.23); text-align: center; pointer-events: none; }
.milestone-overlay--small .celebration-particles,.milestone-overlay--small .milestone-overlay-art,.milestone-overlay--small .eyebrow { display: none; }
.milestone-overlay--small h2 { margin: 0; color: #805529; font-size: clamp(15px,4.2vw,20px); line-height: 1.2; }
.milestone-overlay--small strong { font-size: 13px; }
.milestone-overlay--small .milestone-extra-copy { margin: 0; font-size: 11px; }
.milestone-overlay--big { position: fixed; z-index: 1000; inset: 0; width: 100vw; height: 100dvh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; padding: max(20px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom)); border: 0; border-radius: 0; color: #4a6848; background: radial-gradient(ellipse at center,#fffce8 0%,#f7edbd 46%,#d5e8ca 100%); box-shadow: inset 0 0 0 9px rgba(255,255,255,.48); text-align: center; cursor: default; }
.milestone-overlay--big[data-can-skip="true"] { cursor: pointer; }
.milestone-overlay--big .celebration-particles { position: absolute; inset: 0; }
.milestone-overlay--big h2 { position: relative; z-index: 1; max-width: 850px; margin: 0; color: #795020; font-size: clamp(28px,7vw,58px); line-height: 1.12; }
.milestone-overlay--big > strong { position: relative; z-index: 1; font-size: clamp(20px,4vw,32px); }
.milestone-overlay--big > small { position: relative; z-index: 1; font-size: 14px; font-weight: 800; }
.milestone-overlay--big .eyebrow { position: relative; z-index: 1; }
.milestone-overlay-art { position: relative; z-index: 1; width: min(65vw,470px); height: min(35dvh,260px); display: flex; align-items: end; justify-content: center; }
.milestone-overlay-art .milestone-hero { position: relative; z-index: 2; width: 23%; height: 75%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(54,75,45,.2)); }
.milestone-overlay-art .house-art { position: absolute; z-index: 1; left: 50%; bottom: 0; width: 58%; height: 100%; transform: translateX(-50%); filter: drop-shadow(0 5px 4px rgba(54,75,45,.2)); }
.milestone-overlay--legendary { background: radial-gradient(ellipse at center,#fff9d6 0%,#efdc91 42%,#c6dfb8 100%); box-shadow: inset 0 0 0 12px rgba(255,255,255,.65),inset 0 0 70px rgba(255,237,160,.7); }
.milestone-overlay--legendary .milestone-overlay-art { width: min(78vw,620px); height: min(48dvh,360px); }
.milestone-overlay--legendary .house-art { width: 72%; }
.world-shell--grand .sky-glow { opacity: .86; filter: saturate(1.22); }
.world-shell--legendary .sky-glow { opacity: 1; filter: saturate(1.4) brightness(1.12); }
.island-tabs { display: flex; justify-content: center; gap: 7px; margin: 7px auto 10px; }
.island-tabs button { min-width: 125px; min-height: 44px; padding: 7px 16px; border: 1px solid #c7d8bb; border-radius: 999px; color: #587452; background: rgba(255,255,241,.82); font-size: 15px; font-weight: 900; }
.island-tabs button[aria-selected="true"] { border-color: #dba951; color: #704c28; background: #fff0bb; box-shadow: 0 2px 0 rgba(184,141,58,.25); }
.island-world-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; padding: 2px max(12px,calc((100vw - 380px)/2)) 12px; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-color: rgba(115,151,97,.45) transparent; touch-action: pan-x pan-y; }
.island-world-track { width: max-content; min-width: 100%; display: flex; align-items: stretch; gap: 13px; }
.island-world-track > .kingdom-plaza,.island-world-track > .district-card { flex: 0 0 min(82vw,360px); width: min(82vw,360px); min-height: 260px; margin: 0; scroll-snap-align: center; }
.island-world-track > .kingdom-plaza { display: flex; flex-direction: column; }
.island-world-track .plaza-ground { flex: 1; min-height: 168px; }
.island-world-track .district-scene { min-height: 185px; }
.island-scroll-hint { margin: -5px 0 5px; color: #718369; text-align: center; font-size: 11px; font-weight: 800; }
.district-card--locked .district-scene { filter: grayscale(.72); opacity: .64; }
.district-card--locked .district-heading { opacity: .77; }
.district-scene { position: relative; overflow: hidden; }
.castle-cluster { position: absolute; z-index: 0; left: 5%; right: 5%; bottom: 12%; height: 38%; display: flex; align-items: end; justify-content: space-evenly; opacity: .5; pointer-events: none; }
.castle-cluster-item { width: 15%; height: 100%; transform: translateY(calc(var(--castle-index) * 2px)); }
.castle-cluster-item .house-art { width: 100%; height: 100%; }
.resident-button { z-index: 4; display: flex; align-items: end; justify-content: center; gap: 0; min-width: 90px; min-height: 110px; padding: 5px 5px 20px; border: 0; background: transparent; }
.resident-button .resident-monster { width: clamp(42px,14vw,58px); height: 78px; object-fit: contain; margin-right: -10px; filter: drop-shadow(0 2px 2px rgba(57,78,46,.19)); }
.resident-button .resident-monster:last-of-type { margin-right: 0; }
.resident-button small { position: absolute; bottom: 2px; left: 50%; width: max-content; max-width: 145px; transform: translateX(-50%); padding: 3px 7px; border-radius: 9px; color: #496649; background: rgba(255,255,236,.88); font-size: 10px; font-weight: 900; }
.district-lock-copy { position: absolute; z-index: 6; inset: 0; display: grid; align-content: center; justify-items: center; gap: 3px; color: #596a4e; background: rgba(239,242,220,.65); text-align: center; }
.district-lock-copy span { font-size: 24px; }
.district-lock-copy b { font-size: 14px; }
.district-lock-copy small { font-size: 12px; font-weight: 900; }
.castle-silhouette { opacity: .55; filter: grayscale(1); font-size: 72px; }
.plaza-distant-castles { position: absolute; z-index: 0; inset: auto 5% 15%; height: 43%; display: flex; align-items: end; justify-content: space-around; opacity: .53; pointer-events: none; }
.plaza-distant-castle { width: 13%; height: 100%; }
.plaza-distant-castle .house-art { width: 100%; height: 100%; }
.plaza-ground--lively .plaza-reward { z-index: 2; }
.kingdom-plaza--grand .plaza-ground { background: radial-gradient(ellipse at center,#fff2b2 0%,#d6ebbf 48%,#91be89 100%); }
.kingdom-plaza--grand .plaza-ground::after { content: '✧　✦　✧'; position: absolute; top: 9px; right: 13px; color: #efc862; font-size: 19px; }
.kingdom-plaza--legendary .plaza-ground { min-height: 220px; background: radial-gradient(ellipse at center,#fff7d4 0%,#efd28a 48%,#aad0a0 100%); }
.plaza-crown { margin-left: auto; font-size: 24px; }
.kingdom-monument { position: absolute; z-index: 4; right: 4%; bottom: 15%; width: 44%; height: 78%; display: grid; align-content: end; justify-items: center; color: #76501c; text-align: center; }
.kingdom-monument > .house-art { width: 88%; height: 87%; filter: drop-shadow(0 4px 4px rgba(74,55,22,.24)); }
.kingdom-monument b { padding: 3px 7px; border-radius: 9px; background: rgba(255,251,218,.91); font-size: 10px; }
.monument-rays { position: absolute; top: 0; left: 50%; color: #e2ac38; white-space: nowrap; transform: translateX(-50%); }
.monument-replay,.record-monument { min-height: 38px; margin: 5px auto; padding: 7px 12px; border: 1px solid #d9b156; border-radius: 12px; color: #775325; background: #fff3c1; font-size: 12px; font-weight: 900; }
.plaza-grand-note { margin: 2px 0; color: #755522; text-align: center; font-size: 10px; font-weight: 900; }
.records-panel { width: min(100%,760px); margin: 0 auto; padding: 0 8px; }
.records-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.record-stat { min-height: 80px; display: grid; grid-template-columns: auto 1fr; align-content: center; align-items: center; gap: 1px 7px; padding: 9px 10px; border: 1px solid rgba(255,255,245,.95); border-radius: 14px; background: rgba(255,254,239,.87); box-shadow: 0 2px 6px rgba(54,80,46,.08); }
.record-stat > span { grid-row: span 2; font-size: 22px; }
.record-stat small { color: #70816a; font-size: 10px; font-weight: 800; line-height: 1.15; }
.record-stat b { color: #42664a; font-size: clamp(15px,4vw,19px); font-weight: 900; font-variant-numeric: tabular-nums; }
.record-complete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0; padding: 10px; border: 1px solid #cbdab9; border-radius: 15px; background: rgba(255,254,239,.84); }
.record-complete > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1px 7px; }
.record-complete > div > span { grid-row: span 2; font-size: 26px; }
.record-complete b { font-size: 14px; }
.record-complete small { color: #73846c; font-size: 10px; font-weight: 800; }
.record-complete--done { border-color: #e1bf67; background: linear-gradient(110deg,#fff6c9,#fffef0); }
.record-complete .button { min-height: 38px; padding: 7px; font-size: 11px; }
.record-milestones { margin-top: 13px; padding: 11px; border: 1px solid rgba(255,255,245,.93); border-radius: 15px; background: rgba(255,254,239,.7); }
.record-milestone-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 8px; }
.record-milestone { min-height: 56px; display: grid; grid-template-columns: auto 1fr; align-content: center; align-items: center; column-gap: 5px; padding: 7px; border: 1px solid #ead393; border-radius: 12px; color: #69542e; background: #fff8dc; text-align: left; }
.record-milestone > span { grid-row: span 2; font-size: 18px; }
.record-milestone b { font-size: 13px; }
.record-milestone small { color: #8d7646; font-size: 9px; font-weight: 800; }
.milestone-extra-copy { position: relative; z-index: 1; margin: 0; font-size: 14px; font-weight: 900; }
@media (min-width: 600px) {
  .records-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .record-milestone-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .island-world-track > .kingdom-plaza,.island-world-track > .district-card { flex-basis: min(48vw,420px); width: min(48vw,420px); }
  .island-world-track > .kingdom-plaza,.island-world-track > .district-card { min-height: 330px; }
}
@media (max-width: 420px) {
  .screen-heading { padding-right: 92px; }
  .screen-heading > .round-nav { right: 39px; }
  .screen-gear { width: 36px; height: 36px; }
  .island-heading-actions .island-back { min-height: 39px; padding: 6px 9px; font-size: 12px; }
  .island-world-track > .kingdom-plaza,.island-world-track > .district-card { flex-basis: min(86vw,340px); width: min(86vw,340px); }
  .kingdom-progress { flex-wrap: nowrap; }
  .milestone-overlay--small { top: max(7px,env(safe-area-inset-top)); }
  .milestone-overlay--big { padding-inline: 14px; }
  .milestone-overlay-art { width: 84vw; height: min(30dvh,210px); }
  .milestone-overlay--legendary .milestone-overlay-art { width: 92vw; height: min(42dvh,300px); }
  .tile-detail { bottom: max(72px,calc(68px + env(safe-area-inset-bottom))); }
  .next-milestone { font-size: 13px; }
  .kingdom-progress .score-copy { min-width: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .milestone-progress span { transition: none; }
  .tile--bump { animation: none; }
}