@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Jua&display=swap');

:root { color-scheme: light; --ink: #302b27; --muted: #82796f; --paper: #fffaf2; --orange: #ed7045; --display: 'Jua', 'Malgun Gothic', sans-serif; --body: 'Gowun Dodum', 'Malgun Gothic', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 12% 10%, #fff0d7 0, transparent 29rem), radial-gradient(ellipse at 95% 54%, #e8f4ef 0, transparent 32rem), var(--paper); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button { color: inherit; font: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #347e8d; outline-offset: 4px; }
.skip-link { position: absolute; top: -60px; left: 16px; z-index: 10; padding: 12px 18px; border-radius: 10px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 12px; }
.site-header { width: min(1080px, calc(100% - 48px)); height: 72px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(70 50 35 / 9%); }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 22px var(--display); letter-spacing: -.05em; }
.brand-mark { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; gap: 2px; width: 27px; height: 27px; padding: 4px 4px 5px; }
.brand-mark i { display: block; width: 4px; border-radius: 3px 3px 0 0; background: #ffd16c; }
.brand-mark i:nth-child(1) { height: 12px; rotate: -9deg; }.brand-mark i:nth-child(2) { height: 16px; translate: 0 -2px; }.brand-mark i:nth-child(3) { height: 13px; rotate: 8deg; }
.brand-mark b { position: absolute; right: 3px; bottom: 2px; left: 3px; height: 9px; border-radius: 2px 2px 6px 6px; background: var(--orange); }
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid rgb(70 50 35 / 10%); border-radius: 99px; background: rgb(255 255 255 / 60%); color: #665c52; font-size: 14px; transition: background .2s, transform .2s; }
.back-link:hover { background: #fff; transform: translateY(-2px); }
.shell { width: min(720px, calc(100% - 40px)); margin: 42px auto 72px; }
.panel { position: relative; overflow: hidden; border: 1px solid rgb(70 50 35 / 7%); border-radius: 30px; background: rgb(255 255 255 / 81%); box-shadow: 0 18px 55px rgb(81 61 41 / 7%); }
.intro { min-height: 590px; padding: 56px 64px 48px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #89766a; font-size: 15px; }
.eyebrow i { width: 9px; height: 9px; border-radius: 50%; background: #ee9b67; box-shadow: 0 0 0 5px #fff0e5; }
h1, h2, p { margin-top: 0; }
.intro h1 { margin: 31px 0 17px; font: clamp(47px, 7vw, 68px)/1.17 var(--display); letter-spacing: -.075em; }
.intro h1 em { color: var(--orange); font-style: normal; }
.intro > p { margin-bottom: 24px; color: #746a61; font-size: 18px; line-height: 1.8; }
.intro-meta { display: flex; align-items: center; gap: 12px; color: #746a61; font-size: 15px; }
.intro-meta i { width: 4px; height: 4px; border-radius: 50%; background: #c1b4a5; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-width: 193px; min-height: 58px; margin-top: 30px; padding: 0 22px; border: 0; border-radius: 18px; background: var(--ink); color: #fff; font: 20px var(--display); cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.primary-button span { font: 22px var(--body); transition: translate .2s; }
.primary-button:hover { transform: translateY(-3px); background: #483c33; box-shadow: 0 9px 18px rgb(48 43 39 / 16%); }.primary-button:hover span { translate: 4px 0; }
.intro-art { position: absolute; top: 73px; right: 65px; display: grid; place-items: center; width: 184px; height: 184px; border-radius: 43% 57% 54% 46% / 50% 44% 56% 50%; background: #e6f3ef; rotate: 7deg; animation: drift 5s ease-in-out infinite; }
.intro-art::before, .intro-art::after { position: absolute; inset: 15px; border: 1px solid rgb(54 95 89 / 11%); border-radius: 50%; content: ''; }.intro-art::after { inset: 29px; }
.intro-art .shell { z-index: 1; width: auto; margin: 0; font-size: 78px; filter: drop-shadow(0 9px 8px rgb(72 94 82 / 11%)); }
.intro-art .sun { position: absolute; top: 22px; right: 23px; color: #f0aa5d; font-size: 30px; animation: spin 18s linear infinite; }.intro-art .sparkle { position: absolute; bottom: 28px; left: 23px; color: #e89370; font-size: 24px; }
.quiz { padding: 30px 38px 34px; scroll-margin-top: 20px; }
.quiz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }.mini-brand { font: 17px var(--display); }.step-label { color: #82796f; font-size: 15px; font-variant-numeric: tabular-nums; }
.progress-track { height: 7px; overflow: hidden; margin-bottom: 35px; border-radius: 99px; background: #f2eee8; }.progress-track span { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #efa064, #ed7045); transition: width .45s cubic-bezier(.2,.7,.2,1); }
.scene-label { display: inline-block; margin-bottom: 10px; color: #bb7959; font-size: 14px; }.question-screen h2 { margin-bottom: 8px; font: clamp(27px, 4vw, 34px)/1.35 var(--display); letter-spacing: -.045em; }.question-screen h2:focus { outline: none; }.question-note { margin-bottom: 23px; color: #81776e; font-size: 16px; line-height: 1.65; }
.choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }.choice-card { min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid #eee8df; border-radius: 17px; background: #fffdfa; font-size: 15px; cursor: pointer; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }.choice-card:hover { transform: translateY(-3px) rotate(-1deg); border-color: #edc2a3; box-shadow: 0 7px 17px rgb(80 58 37 / 7%); }.choice-card[aria-pressed="true"], .rhythm-choice[aria-pressed="true"] { border-color: #e6875c; background: #fff0e5; box-shadow: 0 0 0 2px rgb(230 135 92 / 13%); }.choice-icon { font-size: 28px; line-height: 1; }
.question-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }.selection-count { color: #857b71; font-size: 14px; }.next-button { display: inline-flex; align-items: center; gap: 15px; min-height: 45px; padding: 0 17px; border: 0; border-radius: 14px; background: #302b27; color: white; font: 17px var(--display); cursor: pointer; transition: opacity .2s, transform .2s; }.next-button:hover:not(:disabled) { transform: translateY(-2px); }.next-button:disabled { opacity: .35; cursor: not-allowed; }
.choice-list { display: grid; gap: 9px; }.wide-choice { width: 100%; min-height: 72px; display: grid; grid-template-columns: 42px 1fr 20px; align-items: center; gap: 13px; padding: 11px 16px; border: 1px solid #eee8df; border-radius: 17px; background: #fffdfa; text-align: left; cursor: pointer; transition: transform .2s, border-color .2s, background .2s; }.wide-choice:hover { transform: translateX(4px); border-color: #ebc5a9; background: #fffaf5; }.wide-choice .choice-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #faf2e9; font-size: 22px; }.wide-choice b { display: block; margin-bottom: 3px; font: 17px/1.4 var(--display); }.wide-choice small { display: block; color: #83796f; font-size: 14px; line-height: 1.45; }.wide-choice > i { color: #ab9a8b; font: normal 19px var(--body); transition: translate .2s; }.wide-choice:hover > i { translate: 3px 0; }
.rhythm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.rhythm-choice { min-height: 122px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid #eee8df; border-radius: 17px; background: #fffdfa; cursor: pointer; transition: transform .2s, border-color .2s, background .2s; }.rhythm-choice:hover:not(:disabled) { transform: translateY(-3px); border-color: #edc2a3; }.rhythm-choice:disabled { cursor: default; opacity: .58; }.rhythm-choice > span { margin-bottom: 4px; font-size: 25px; }.rhythm-choice b { font: 16px var(--display); }.rhythm-choice small { color: #867c72; font-size: 14px; }
.beat-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 15px 18px; border-radius: 19px; background: #f7f3ec; }.beat-dots { display: flex; gap: 9px; }.beat-dots i { width: 13px; height: 13px; border: 2px solid #d8cbbd; border-radius: 50%; background: transparent; transition: scale .2s, background .2s, border-color .2s; }.beat-dots i.is-hit { scale: 1.18; border-color: #ed895e; background: #ed895e; }.beat-box.is-tapping .beat-dots i.is-hit:last-of-type { animation: pop .32s ease-out; }.tap-button { min-height: 46px; display: inline-flex; align-items: center; gap: 13px; padding: 0 15px; border: 1px solid #e6d9cc; border-radius: 14px; background: white; font-size: 14px; cursor: pointer; }.tap-button b { color: #bb7959; font-size: 14px; font-variant-numeric: tabular-nums; }.tap-button:disabled { opacity: .5; cursor: not-allowed; }.beat-box + .question-footer { margin-top: 14px; }.beat-box + .question-footer .selection-count { font-size: 14px; }
.result { padding: 48px 60px 40px; text-align: center; }.result .eyebrow { justify-content: center; }.result-art { --result-color: #e4eff8; width: 148px; height: 148px; display: grid; place-items: center; margin: 30px auto 22px; border: 1px solid rgb(70 50 35 / 6%); border-radius: 43% 57% 52% 48% / 47% 44% 56% 53%; background: var(--result-color); font-size: 73px; animation: drift 4s ease-in-out infinite; }.result-kicker { margin-bottom: 4px; color: #867b71; font-size: 16px; }.result h2 { margin-bottom: 10px; font: clamp(38px, 6vw, 54px)/1.3 var(--display); letter-spacing: -.06em; }.result-tagline { max-width: 480px; margin: 0 auto; color: #544a42; font: 20px/1.6 var(--display); }.result-note { display: flex; align-items: flex-start; gap: 13px; max-width: 470px; margin: 26px auto 0; padding: 18px 20px; border-radius: 19px; background: #faf5ed; text-align: left; }.note-icon { padding-top: 1px; color: #e79a64; font-size: 20px; }.result-note p { margin: 0; color: #6f655c; font-size: 15px; line-height: 1.8; }.disclaimer { margin: 17px 0 0; color: #81766c; font-size: 14px; line-height: 1.6; }.result-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }.result-actions .primary-button { min-width: 160px; min-height: 52px; margin-top: 23px; border-radius: 16px; font-size: 17px; }.secondary-button { min-height: 52px; margin-top: 23px; padding: 0 18px; border: 1px solid #e7ded4; border-radius: 16px; background: #fff; font: 16px var(--display); cursor: pointer; transition: background .2s, transform .2s; }.secondary-button:hover { transform: translateY(-2px); background: #fff9f3; }.home-link { display: inline-block; margin-top: 20px; color: #82776d; font-size: 14px; text-decoration: underline; text-decoration-color: #d8ccc0; text-underline-offset: 4px; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 20; padding: 13px 18px; border-radius: 14px; background: #302b27; color: white; font-size: 14px; opacity: 0; translate: 0 10px; pointer-events: none; transition: opacity .2s, translate .2s; }.toast.is-visible { opacity: 1; translate: 0 0; }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }@keyframes spin { to { rotate: 367deg; } }@keyframes pop { 50% { scale: 1.45; } }
@media (max-width: 680px) { .site-header { width: calc(100% - 34px); height: 64px; }.shell { width: min(100% - 28px, 560px); margin-top: 22px; }.intro { min-height: 550px; padding: 38px 28px 34px; }.intro-art { top: 84px; right: 24px; width: 130px; height: 130px; }.intro-art .shell { font-size: 56px; }.intro-art .sun { top: 14px; right: 17px; font-size: 23px; }.intro-art .sparkle { bottom: 19px; left: 16px; font-size: 18px; }.intro h1 { margin-top: 150px; font-size: clamp(46px, 12vw, 62px); }.intro > p { font-size: 16px; }.quiz { padding: 22px 20px 25px; border-radius: 24px; }.progress-track { margin-bottom: 27px; }.choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }.choice-card { min-height: 96px; gap: 6px; border-radius: 14px; font-size: 13px; }.choice-icon { font-size: 24px; }.wide-choice { min-height: 70px; grid-template-columns: 38px 1fr 14px; gap: 10px; padding: 9px 10px; }.wide-choice .choice-icon { width: 38px; height: 38px; font-size: 20px; }.wide-choice b { font-size: 15px; }.wide-choice small { font-size: 13px; }.rhythm-grid { grid-template-columns: repeat(2, 1fr); }.rhythm-choice { min-height: 98px; }.rhythm-choice small { font-size: 13px; }.result { padding: 38px 24px 31px; border-radius: 24px; }.result-art { width: 130px; height: 130px; font-size: 65px; }.result-tagline { font-size: 18px; }.result-note { padding: 16px; }.disclaimer { font-size: 14px; line-height: 1.6; } }
@media (max-width: 390px) { .shell { width: calc(100% - 20px); }.intro { padding-inline: 22px; }.choice-card { font-size: 13px; }.choice-icon { font-size: 21px; }.question-footer { align-items: flex-start; }.question-footer .selection-count { padding-top: 10px; font-size: 14px; }.next-button { flex: 0 0 auto; }.beat-box { flex-direction: column; }.beat-box + .question-footer .selection-count { max-width: 190px; font-size: 14px; line-height: 1.5; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Interactive island scenes */
.scene-feedback { min-height: 26px; margin: 13px 0 0; color: #776b5f; font-size: 15px; text-align: center; }
.island-map { position: relative; isolation: isolate; min-height: 420px; margin-top: 21px; overflow: hidden; border: 1px solid #d6e7dc; border-radius: 28px; background: linear-gradient(180deg, #dff1ed 0%, #cde8e1 48%, #b4d8ce 100%); }
.island-map::before { position: absolute; z-index: 0; inset: 11% 8%; border: 1px solid rgb(95 145 112 / 12%); border-radius: 47% 53% 48% 52% / 44% 46% 54% 56%; background: radial-gradient(ellipse at 28% 25%, #d9eccb 0 8%, transparent 9%), radial-gradient(ellipse at 69% 68%, #c8e2b9 0 13%, transparent 14%), linear-gradient(135deg, #e0edc9, #c4dfb4); content: ''; }
.island-map::after { position: absolute; z-index: 0; top: 47%; left: 50%; color: #6d9472; content: '🌴　🌳　🪨'; font-size: 22px; opacity: .7; translate: -50% -50%; white-space: nowrap; }
.island-trail { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; }
.trail-shadow { fill: none; stroke: #b9946e; stroke-linecap: round; stroke-width: 25px; }
.trail-line { fill: none; stroke: #f9e9c7; stroke-dasharray: 2 13; stroke-linecap: round; stroke-width: 3px; }
.trail-start { fill: #ed7045; stroke: #fffaf2; stroke-width: 7px; }
.route-sign { position: absolute; z-index: 3; width: min(42%, 285px); display: grid; gap: 4px; padding: 13px 16px 14px; border: 1px solid #e2d1b4; border-radius: 17px 17px 15px 15px; background: #fffaf0; box-shadow: 0 8px 17px rgb(73 95 68 / 11%); text-align: left; cursor: pointer; transition: translate .2s, rotate .2s, border-color .2s, box-shadow .2s, background .2s, opacity .2s; }
.route-sign::after { position: absolute; bottom: -13px; left: 24px; width: 6px; height: 13px; border-radius: 0 0 3px 3px; background: #b58c61; content: ''; }
.route-song { top: 6%; left: 4%; rotate: -1deg; }.route-wind { top: 6%; right: 4%; rotate: 1deg; }.route-shell { bottom: 6%; left: 4%; rotate: 1deg; }.route-grove { right: 4%; bottom: 6%; rotate: -1deg; }
.route-sign:hover:not(:disabled) { z-index: 3; border-color: #df9d70; box-shadow: 0 12px 22px rgb(73 95 68 / 17%); translate: 0 -4px; }
.route-sign .sign-direction { color: #88704f; font-size: 13px; }.route-sign b { font: 18px/1.35 var(--display); }.route-sign small { color: #70695c; font-size: 14px; line-height: 1.45; }
.scene-action.is-selected { border-color: #ed8c5c !important; background-color: #fff3e8 !important; box-shadow: 0 0 0 3px rgb(237 112 69 / 14%), 0 10px 22px rgb(91 72 51 / 13%); }
.scene-action:disabled:not(.is-selected):not(.drum-pad) { cursor: default; opacity: .48; }

.drum-game { margin-top: 23px; padding: 20px; border: 1px solid #eadfce; border-radius: 25px; background: linear-gradient(150deg, #fffaf0, #f7eddf); }
.beat-sequence { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin: 0; padding: 0; list-style: none; }
.beat-sequence li { min-height: 64px; display: grid; place-items: center; border: 2px dashed #ddcfbe; border-radius: 17px; background: rgb(255 255 255 / 74%); color: #b3a28f; font: 25px var(--display); transition: scale .2s, background .2s, border-color .2s, color .2s; }
.beat-sequence li.is-filled { border-style: solid; border-color: #ebc093; background: #fff8e9; color: #ad6848; }.beat-sequence li.is-playing { scale: 1.1; border-color: #ed7045; background: #ffe4d3; animation: beat-pop .24s ease-out; }
.drum-game > .scene-feedback { margin: 13px 0 17px; }
.drum-pads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.drum-pad { min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid #e8ddcf; border-radius: 19px; background: #fffdfa; box-shadow: 0 4px 0 #e8ddcf; cursor: pointer; transition: translate .16s, box-shadow .16s, border-color .16s, background .16s, opacity .2s; }
.drum-pad:hover:not(:disabled) { translate: 0 -3px; box-shadow: 0 7px 0 #e8ddcf; }.drum-pad:active:not(:disabled) { translate: 0 2px; box-shadow: 0 1px 0 #e8ddcf; }.drum-pad > span { font-size: 31px; }.drum-pad b { font: 20px var(--display); }.drum-pad small { color: #80756a; font-size: 14px; }
.drum-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }.drum-controls .secondary-button, .drum-controls .next-button { min-height: 48px; margin: 0; font-size: 15px; }.drum-controls .secondary-button:disabled { opacity: .45; cursor: not-allowed; }.drum-controls .next-button:disabled { opacity: .4; cursor: not-allowed; }

.beach-compass { display: grid; grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr); grid-template-rows: minmax(78px, auto) minmax(90px, auto) minmax(78px, auto); grid-template-areas: '. north .' 'west shell east' '. south .'; align-items: stretch; justify-items: stretch; gap: 10px; margin-top: 25px; padding: 19px; border: 1px solid #ecdcc4; border-radius: 27px; background: radial-gradient(ellipse at 50% 50%, #f9e8bd 0 24%, transparent 25%), linear-gradient(160deg, #f8ebcd, #f0d7ad); }
.direction-choice { min-width: 0; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: 8px; padding: 10px 11px; border: 1px solid #e9d8c0; border-radius: 17px; background: #fffaf0; text-align: left; cursor: pointer; transition: translate .18s, rotate .18s, border-color .18s, background .18s, box-shadow .18s; }
.direction-choice > span { grid-row: 1 / span 2; color: #d2764e; font: 24px var(--display); text-align: center; }.direction-choice b { font: 16px/1.4 var(--display); }.direction-choice small { grid-column: 2; margin-top: 3px; color: #7d7061; font-size: 13px; line-height: 1.4; }
.direction-choice:hover:not(:disabled) { z-index: 1; border-color: #df9d70; box-shadow: 0 7px 16px rgb(101 78 44 / 12%); translate: 0 -3px; }
.direction-choice.north { grid-area: north; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.direction-choice.north > span, .direction-choice.south > span { grid-column: 1 / -1; grid-row: auto; }.direction-choice.north small, .direction-choice.south small { grid-column: 1 / -1; }.direction-choice.west { grid-area: west; rotate: -1deg; }.direction-choice.east { grid-area: east; rotate: 1deg; }.direction-choice.south { grid-area: south; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.direction-choice.north b, .direction-choice.north small, .direction-choice.south b, .direction-choice.south small { max-width: 100%; text-align: center; }
.shell-center { grid-area: shell; align-self: center; justify-self: center; width: 115px; height: 100px; display: grid; place-items: center; align-content: center; gap: 0; border: 1px solid #e5c58d; border-radius: 47% 53% 52% 48% / 55% 47% 53% 45%; background: radial-gradient(ellipse at 33% 28%, #fff8e5, #f5d99e 75%); box-shadow: 0 7px 0 rgb(176 135 77 / 13%); rotate: -8deg; }.shell-center span { font-size: 39px; filter: drop-shadow(0 3px 2px rgb(146 109 63 / 15%)); }.shell-center small { color: #a97542; font: 13px var(--display); rotate: 8deg; }

.rain-map { position: relative; isolation: isolate; min-height: 388px; margin-top: 21px; overflow: hidden; border: 1px solid #cbdfda; border-radius: 29px; background: linear-gradient(180deg, #d8edf4, #c8e1eb); }
.rain-effect { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.rain-drop { position: absolute; top: -55px; display: block; width: 2px; height: 43px; border-radius: 99px; background: linear-gradient(180deg, rgb(105 163 178 / 8%), rgb(83 151 170 / 78%)); opacity: .72; animation: rain-fall 1.15s linear infinite; }
.rain-drop:nth-child(1) { left: 2%; animation-delay: -.1s; }.rain-drop:nth-child(2) { left: 6%; animation-delay: -.7s; }.rain-drop:nth-child(3) { left: 10%; animation-delay: -.35s; }.rain-drop:nth-child(4) { left: 14%; animation-delay: -.95s; }
.rain-drop:nth-child(5) { left: 18%; animation-delay: -.5s; }.rain-drop:nth-child(6) { left: 22%; animation-delay: -.2s; }.rain-drop:nth-child(7) { left: 26%; animation-delay: -.85s; }.rain-drop:nth-child(8) { left: 30%; animation-delay: -.4s; }
.rain-drop:nth-child(9) { left: 34%; animation-delay: -.05s; }.rain-drop:nth-child(10) { left: 38%; animation-delay: -.65s; }.rain-drop:nth-child(11) { left: 42%; animation-delay: -.3s; }.rain-drop:nth-child(12) { left: 46%; animation-delay: -.9s; }
.rain-drop:nth-child(13) { left: 50%; animation-delay: -.55s; }.rain-drop:nth-child(14) { left: 54%; animation-delay: -.15s; }.rain-drop:nth-child(15) { left: 58%; animation-delay: -.75s; }.rain-drop:nth-child(16) { left: 62%; animation-delay: -.45s; }
.rain-drop:nth-child(17) { left: 66%; animation-delay: -.05s; }.rain-drop:nth-child(18) { left: 70%; animation-delay: -.8s; }.rain-drop:nth-child(19) { left: 74%; animation-delay: -.4s; }.rain-drop:nth-child(20) { left: 78%; animation-delay: -.95s; }
.rain-drop:nth-child(21) { left: 82%; animation-delay: -.6s; }.rain-drop:nth-child(22) { left: 86%; animation-delay: -.25s; }.rain-drop:nth-child(23) { left: 90%; animation-delay: -.85s; }.rain-drop:nth-child(24) { left: 94%; animation-delay: -.5s; }
.rain-drop:nth-child(25) { left: 98%; animation-delay: -.15s; }.rain-drop:nth-child(26) { left: 12%; animation-delay: -.75s; }.rain-drop:nth-child(27) { left: 48%; animation-delay: -.3s; }.rain-drop:nth-child(28) { left: 88%; animation-delay: -.9s; }
.rain-drop:nth-child(29) { left: 24%; animation-delay: -.6s; }.rain-drop:nth-child(30) { left: 44%; animation-delay: -.2s; }.rain-drop:nth-child(31) { left: 64%; animation-delay: -.8s; }.rain-drop:nth-child(32) { left: 80%; animation-delay: -.4s; }
.shelter-spot { position: absolute; z-index: 2; width: min(30%, 220px); min-height: 125px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 12px; border: 1px solid #d4e0ca; border-radius: 20px; background: rgb(255 253 246 / 94%); box-shadow: 0 8px 18px rgb(58 96 77 / 13%); cursor: pointer; transition: scale .2s, translate .2s, border-color .2s, box-shadow .2s, opacity .2s, background .2s; }
.shelter-spot:hover:not(:disabled) { z-index: 2; border-color: #7cad86; box-shadow: 0 12px 22px rgb(58 96 77 / 20%); scale: 1.04; }.shelter-spot .spot-art { font-size: 33px; line-height: 1.2; }.shelter-spot b { font: 17px var(--display); }.shelter-spot small { color: #6f796c; font-size: 13px; line-height: 1.4; text-align: center; }
.shelter-leaf { top: 17%; left: 5%; }.shelter-rock { top: 18%; right: 5%; }.shelter-cave { bottom: 6%; left: 18%; }.shelter-shop { right: 16%; bottom: 6%; }
@keyframes beat-pop { 50% { scale: 1.16; } }
@keyframes rain-fall { 0% { translate: 0 -18px; opacity: .12; } 25% { opacity: .78; } 100% { translate: 0 510px; opacity: .12; } }
@media (max-width: 680px) {
  .scene-feedback { font-size: 14px; }
  .island-map { min-height: 465px; border-radius: 24px; }.island-map::before { inset: 12% 5%; }.route-sign { width: 46%; min-height: 119px; padding: 11px 10px 12px; border-radius: 15px; }.route-sign .sign-direction { font-size: 13px; }.route-sign b { font-size: 16px; }.route-sign small { font-size: 14px; }.route-song { top: 5%; left: 3%; }.route-wind { top: 5%; right: 3%; }.route-shell { bottom: 5%; left: 3%; }.route-grove { right: 3%; bottom: 5%; }
  .drum-game { padding: 15px; border-radius: 21px; }.drum-pads { grid-template-columns: repeat(2, minmax(0, 1fr)); }.drum-pad { min-height: 112px; }.beat-sequence { gap: 7px; }.beat-sequence li { min-height: 55px; border-radius: 14px; }
  .beach-compass { grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr); grid-template-rows: minmax(82px, auto) 91px minmax(82px, auto); gap: 7px; margin-top: 19px; padding: 12px; border-radius: 22px; }.direction-choice { grid-template-columns: 22px 1fr; column-gap: 5px; padding: 8px 6px; border-radius: 14px; }.direction-choice > span { font-size: 20px; }.direction-choice b { font-size: 14px; }.direction-choice small { font-size: 13px; }.shell-center { width: 76px; height: 76px; }.shell-center span { font-size: 31px; }.shell-center small { font-size: 13px; }
  .rain-map { min-height: 460px; border-radius: 24px; }.shelter-spot { width: calc(50% - 12px); min-height: 123px; padding: 8px; border-radius: 17px; }.shelter-spot .spot-art { font-size: 29px; }.shelter-spot b { font-size: 15px; }.shelter-spot small { font-size: 13px; }.shelter-leaf { top: 16%; left: 3%; }.shelter-rock { top: 16%; right: 3%; }.shelter-cave { bottom: 5%; left: 3%; }.shelter-shop { right: 3%; bottom: 5%; }
}
@media (max-width: 390px) {
  .route-sign { width: 46%; padding-inline: 8px; }.route-sign small { font-size: 13px; }
  .beach-compass { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); padding: 9px; }.direction-choice { grid-template-columns: 18px 1fr; column-gap: 3px; padding-inline: 4px; }.direction-choice > span { font-size: 18px; }.direction-choice b { font-size: 13px; }.direction-choice small { font-size: 13px; }.shell-center { width: 66px; height: 70px; }.shell-center span { font-size: 27px; }
  .drum-controls { align-items: stretch; flex-direction: column; }.drum-controls .next-button, .drum-controls .secondary-button { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rain-drop { animation: none; translate: 0 18px; opacity: .55; }
  .beat-sequence li.is-playing { animation: none; }
}

/* Later scenes: serving, searching, stamping, wayfinding, and helping */
.dinner-game { margin-top: 23px; padding: 19px; border: 1px solid #eadbc5; border-radius: 26px; background: linear-gradient(165deg, #fffaf1, #f8efdf); }
.dinner-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; padding: 16px; border: 1px solid #d6aa78; border-radius: 22px; background: repeating-linear-gradient(0deg, #e8c391 0 12px, #e3b985 12px 24px); box-shadow: inset 0 2px 8px rgb(112 74 38 / 11%); }
.dinner-slot { min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 2px dashed rgb(155 116 73 / 38%); border-radius: 50%; background: #fff8e9; color: #b79772; transition: scale .22s, border-color .22s, background .22s; }.dinner-slot > span { font-size: 32px; line-height: 1.2; }.dinner-slot small { color: #84745f; font-size: 13px; }.dinner-slot.is-filled { border-style: solid; border-color: #e5bd86; background: #fffdf5; animation: plate-pop .28s ease-out; }
.dish-rack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.dish-choice { min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid #e9ddcc; border-radius: 17px; background: #fffefa; cursor: pointer; transition: translate .18s, border-color .18s, background .18s, box-shadow .18s, opacity .2s; }.dish-choice > span { font-size: 27px; }.dish-choice b { font: 15px var(--display); }.dish-choice:hover:not(:disabled) { border-color: #e4b17e; box-shadow: 0 6px 13px rgb(112 74 38 / 10%); translate: 0 -3px; }.dish-choice[aria-pressed="true"] { border-color: #e68f61; background: #fff1e5; box-shadow: 0 0 0 2px rgb(230 143 97 / 13%); }.dish-choice:disabled:not([aria-pressed="true"]) { cursor: default; opacity: .48; }

.clue-game { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 15px; margin-top: 22px; }
.clue-map { position: relative; min-height: 348px; overflow: hidden; border: 1px solid #e5d4b5; border-radius: 25px; background: linear-gradient(180deg, #cde9e8 0 22%, #f4e2bd 22% 100%); }
.clue-map::before { position: absolute; inset: 22% -10% -35%; border-radius: 50% 50% 0 0 / 23% 25% 0 0; background: repeating-linear-gradient(168deg, #f4dfb7 0 21px, #eed5a7 22px 24px); content: ''; }
.clue-map::after { position: absolute; right: 0; bottom: 0; left: 0; height: 18%; background: linear-gradient(180deg, #b8dfe0, #9dcccf); content: ''; }
.clue-map-decoration { position: absolute; z-index: 1; pointer-events: none; }.clue-map-decoration.palm { top: 14%; left: 45%; font-size: 43px; opacity: .75; }.clue-map-decoration.tide { right: 7%; bottom: 4%; color: #4e939d; font-size: 31px; letter-spacing: 8px; opacity: .72; }
.clue-spot { position: absolute; z-index: 2; width: 140px; min-height: 71px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 8px 12px; border: 1px solid #e8d6b5; border-radius: 17px; background: #fffaf0; box-shadow: 0 6px 13px rgb(99 79 47 / 10%); cursor: pointer; transition: translate .18s, border-color .18s, background .18s, box-shadow .18s, opacity .18s; }.clue-spot > span { font-size: 25px; }.clue-spot small { color: #665b4d; font: 14px/1.3 var(--display); text-align: left; }.clue-spot:hover:not(:disabled) { border-color: #d99366; box-shadow: 0 9px 17px rgb(99 79 47 / 17%); translate: 0 -3px; }.clue-spot[aria-pressed="true"] { border-color: #e68f61; background: #fff0e3; box-shadow: 0 0 0 3px rgb(230 143 97 / 15%); }.clue-spot[aria-pressed="true"]::after { position: absolute; top: -7px; right: -5px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #e98a5b; color: white; content: '✓'; font: 14px var(--display); }.clue-spot:disabled:not([aria-pressed="true"]) { cursor: default; opacity: .42; }
.clue-footprints { top: 9%; left: 4%; }.clue-shells { top: 52%; left: 5%; }.clue-leaves { top: 10%; right: 4%; }.clue-rock { right: 5%; bottom: 9%; }.clue-ribbon { top: 43%; left: 39%; }
.clue-notebook { align-self: stretch; padding: 17px 16px; border: 1px solid #eadcc6; border-radius: 21px; background: repeating-linear-gradient(180deg, #fffdf7 0 37px, #f1e7d6 38px 39px); }
.notebook-heading { display: flex; align-items: center; gap: 7px; padding-bottom: 12px; border-bottom: 1px solid #e5d6c3; }.notebook-heading > span:first-child { font-size: 22px; }.notebook-heading b { flex: 1; font: 16px var(--display); }.notebook-heading > span:last-child { color: #9a7252; font-size: 13px; }
.clue-notebook ol { display: grid; gap: 9px; margin: 12px 0 0; padding-left: 21px; color: #867b6c; }.clue-notebook li { min-height: 52px; padding: 4px 0 7px 2px; font-size: 14px; line-height: 1.55; }.clue-notebook li.is-found { color: #54483a; animation: clue-in .24s ease-out; }

.sand-art-game { margin-top: 22px; padding: 17px; border: 1px solid #eadac0; border-radius: 25px; background: #fff8e8; }
.sand-canvas { position: relative; min-height: 260px; overflow: hidden; border: 1px solid #dfc18c; border-radius: 23px; background: radial-gradient(ellipse at 50% 20%, rgb(255 255 255 / 31%) 0 2%, transparent 3%), radial-gradient(ellipse at 83% 65%, rgb(203 155 92 / 19%) 0 1.5%, transparent 2%), repeating-linear-gradient(165deg, #f2d9a9 0 28px, #efd3a0 29px 31px); box-shadow: inset 0 0 22px rgb(161 120 62 / 11%); }
.sand-canvas::before { position: absolute; right: 8%; bottom: 17%; left: 8%; height: 1px; background: rgb(160 121 68 / 24%); box-shadow: 0 9px 0 rgb(160 121 68 / 14%), 0 -9px 0 rgb(255 255 255 / 28%); content: ''; }
.canvas-title { position: absolute; top: 13px; left: 16px; color: #947344; font: 14px var(--display); }.canvas-wave { position: absolute; right: 8%; bottom: 10px; color: #629da0; font-size: 21px; letter-spacing: 7px; opacity: .8; }
.stamp-slot { position: absolute; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; border: 1px dashed rgb(152 115 62 / 38%); border-radius: 50%; color: #b99e74; font-size: 24px; transition: scale .2s, rotate .2s, border-color .2s, background .2s; }.stamp-position-one { top: 42%; left: 23%; }.stamp-position-two { top: 24%; left: 48%; }.stamp-position-three { top: 46%; right: 19%; }.stamp-slot.is-stamped { border-color: transparent; background: rgb(255 250 237 / 63%); font-size: 33px; animation: stamp-down .27s cubic-bezier(.2,.8,.3,1.35); }
.stamp-palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }.stamp-choice { min-height: 75px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #e9ddc9; border-radius: 16px; background: #fffdf8; cursor: pointer; transition: translate .17s, border-color .17s, background .17s, opacity .2s; }.stamp-choice > span { font-size: 24px; }.stamp-choice b { font: 15px var(--display); }.stamp-choice:hover:not(:disabled) { border-color: #d9a36e; background: #fff3df; translate: 0 -2px; }.stamp-choice:disabled { cursor: default; opacity: .48; }

.wayfinder-game { margin-top: 22px; padding: 18px; border: 1px solid #d8e3d5; border-radius: 25px; background: linear-gradient(145deg, #f6f3e6, #e9f0df); }
.wayfinder-topline { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 13px; color: #6d7965; font: 14px var(--display); }.wayfinder-topline span:nth-child(2) { padding: 6px 11px; border-radius: 99px; background: #fffdf5; color: #98784f; }
.rescue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; border: 1px solid #d5dfcf; border-radius: 21px; background: radial-gradient(ellipse at 50% 50%, #e4edcf, #d6e5c8); }
.rescue-node, .rescue-start { position: relative; min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid #d9dfcd; border-radius: 17px; background: rgb(255 253 244 / 85%); color: #615c4d; text-align: center; transition: scale .18s, border-color .18s, background .18s, box-shadow .18s, opacity .18s; }.rescue-node { cursor: pointer; }.rescue-node > span, .rescue-start > span { font-size: 27px; line-height: 1.1; }.rescue-node b, .rescue-start b { font: 14px/1.3 var(--display); }.rescue-start { border-style: dashed; border-color: #d5b37d; background: #fff6df; color: #977344; }
.rescue-node.is-next { border-color: #d5a35c; background: #fff8e3; box-shadow: 0 0 0 3px rgb(213 163 92 / 13%); animation: tile-nudge 1.35s ease-in-out infinite; }.rescue-node.is-next:hover:not(:disabled) { scale: 1.04; }.rescue-node.is-path { border-color: #86ad80; background: #eff7e8; }.rescue-node.is-current, .rescue-start.is-current { border-color: #e48e5e; background: #fff0e4; box-shadow: 0 0 0 3px rgb(228 142 94 / 17%); }.rescue-node.is-path::after { position: absolute; top: 5px; right: 7px; color: #63936d; content: '✓'; font: 14px var(--display); }.rescue-goal.is-found { border-color: #80aa82; background: #e9f7e9; }.rescue-node:disabled:not(.is-path):not(.is-current) { cursor: default; opacity: .47; }

.kindness-game { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 15px; margin-top: 22px; }
.friend-scene { position: relative; min-height: 352px; overflow: hidden; border: 1px solid #e6dbca; border-radius: 25px; background: linear-gradient(180deg, #dff0ee, #f6efdc); transition: background .35s; }
.friend-thought { position: absolute; z-index: 2; top: 17px; left: 50%; width: max-content; max-width: calc(100% - 30px); padding: 10px 15px; border: 1px solid #e9dac5; border-radius: 18px 18px 18px 5px; background: #fffefa; color: #74695d; font-size: 15px; text-align: center; translate: -50% 0; }.friend-avatar { position: absolute; z-index: 1; top: 86px; left: 50%; width: 106px; height: 106px; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; translate: -50% 0; animation: friend-bob 3s ease-in-out infinite; }.friend-avatar span { font-size: 68px; }
.offered-help { position: absolute; z-index: 2; bottom: 20px; left: 16px; min-width: 104px; min-height: 57px; display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #e2d4bd; border-radius: 16px; background: #fffdf4; color: #a58763; }.offered-help > span { font-size: 25px; }.offered-help small { max-width: 105px; color: #6d6254; font-size: 13px; line-height: 1.35; }.kindness-footer { justify-content: flex-end; margin-top: 14px; }.deliver-button { position: static; min-width: 164px; min-height: 48px; margin: 0; padding: 0 14px; border: 0; border-radius: 15px; background: #302b27; color: white; font: 15px var(--display); cursor: pointer; transition: translate .18s, background .18s, opacity .18s; }.deliver-button:hover:not(:disabled) { background: #56443a; translate: 0 -2px; }.deliver-button:disabled { cursor: not-allowed; opacity: .42; }
.help-kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.help-tool { min-height: 106px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid #e9ddcc; border-radius: 18px; background: #fffdfa; cursor: pointer; transition: translate .18s, border-color .18s, background .18s, box-shadow .18s; }.help-tool > span { font-size: 29px; }.help-tool b { font: 15px var(--display); }.help-tool:hover:not(:disabled) { border-color: #dfa276; box-shadow: 0 6px 14px rgb(108 78 48 / 10%); translate: 0 -2px; }.help-tool[aria-pressed="true"] { border-color: #e68f61; background: #fff0e3; box-shadow: 0 0 0 2px rgb(230 143 97 / 13%); }.help-tool:disabled:not([aria-pressed="true"]) { cursor: default; opacity: .45; }
.friend-scene.is-helped { background: linear-gradient(180deg, #e1f3de, #fff1ce); }.friend-scene.is-helped .friend-avatar { animation: happy-hop .5s ease-in-out 2; }.friend-scene.is-helped .friend-thought { border-color: #d6e3c7; background: #fbfff2; color: #5d7756; }

@keyframes plate-pop { 50% { scale: 1.13; } }
@keyframes clue-in { 50% { translate: 4px 0; } }
@keyframes stamp-down { 50% { scale: .72; rotate: -9deg; } }
@keyframes tile-nudge { 50% { translate: 0 -2px; } }
@keyframes friend-bob { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -5px; } }
@keyframes happy-hop { 45% { translate: -50% -15px; rotate: 6deg; } }
@media (max-width: 680px) {
  .dinner-game { padding: 14px; border-radius: 22px; }.dinner-tray { gap: 7px; padding: 10px; border-radius: 18px; }.dinner-slot { min-height: 72px; }.dinner-slot > span { font-size: 27px; }.dinner-slot small { font-size: 13px; }.dish-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.dish-choice { min-height: 73px; flex-direction: row; gap: 7px; }.dish-choice > span { font-size: 24px; }.dish-choice b { font-size: 14px; }
  .clue-game { grid-template-columns: 1fr; gap: 11px; }.clue-map { min-height: 374px; border-radius: 22px; }.clue-spot { width: 46%; min-height: 66px; gap: 6px; padding: 7px 9px; border-radius: 15px; }.clue-spot > span { font-size: 22px; }.clue-spot small { font-size: 13px; }.clue-footprints { top: 7%; left: 3%; }.clue-shells { bottom: 7%; left: 3%; }.clue-leaves { top: 7%; right: 3%; }.clue-rock { right: 3%; bottom: 7%; }.clue-ribbon { top: 43%; bottom: auto; left: 27%; }.clue-map-decoration.palm { top: 34%; left: 45%; font-size: 34px; }.clue-notebook { padding: 13px 14px; }.clue-notebook ol { gap: 3px; }.clue-notebook li { min-height: 43px; font-size: 14px; }
  .sand-art-game { padding: 12px; border-radius: 22px; }.sand-canvas { min-height: 235px; }.stamp-slot { width: 42px; height: 42px; }.stamp-position-one { left: 17%; }.stamp-position-two { left: 44%; }.stamp-position-three { right: 12%; }.stamp-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.stamp-choice { min-height: 61px; }
  .wayfinder-game { padding: 12px; border-radius: 22px; }.rescue-grid { gap: 7px; padding: 9px; border-radius: 18px; }.rescue-node, .rescue-start { min-height: 78px; border-radius: 14px; }.rescue-node > span, .rescue-start > span { font-size: 24px; }.rescue-node b, .rescue-start b { font-size: 13px; }.wayfinder-topline { font-size: 13px; }
  .kindness-game { grid-template-columns: 1fr; gap: 11px; }.friend-scene { min-height: 320px; border-radius: 22px; }.friend-avatar { top: 78px; width: 106px; height: 106px; }.friend-avatar span { font-size: 51px; }.offered-help { right: auto; bottom: 15px; left: 11px; width: 42%; min-width: 0; padding-inline: 7px; }.offered-help small { max-width: 62px; font-size: 13px; }.deliver-button { width: auto; min-width: 164px; padding-inline: 14px; font-size: 14px; }.help-kit { gap: 8px; }.help-tool { min-height: 82px; flex-direction: row; gap: 7px; }.help-tool > span { font-size: 24px; }.help-tool b { font-size: 14px; }
}
@media (max-width: 390px) {
  .dinner-tray { padding: 8px; }.dinner-slot { min-height: 66px; }.dinner-slot small { font-size: 13px; }
  .clue-map { min-height: 360px; }.clue-spot { width: 47%; min-height: 63px; padding: 6px 7px; }.clue-spot > span { font-size: 20px; }.clue-spot small { font-size: 13px; }.clue-ribbon { left: 26.5%; }
  .stamp-palette { gap: 7px; }.stamp-choice { min-height: 57px; }.stamp-choice > span { font-size: 21px; }.stamp-choice b { font-size: 14px; }
  .rescue-grid { gap: 5px; padding: 7px; }.rescue-node, .rescue-start { min-height: 70px; }.rescue-node > span, .rescue-start > span { font-size: 21px; }.rescue-node b, .rescue-start b { font-size: 13px; }
  .help-tool { min-height: 76px; }.help-tool > span { font-size: 22px; }.help-tool b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .dinner-slot.is-filled, .clue-notebook li.is-found, .stamp-slot.is-stamped,
  .rescue-node.is-next, .friend-avatar, .friend-scene.is-helped .friend-avatar { animation: none; }
}

@media (max-width: 680px) {
  .back-link { min-height: 44px; }
  .choice-grid.item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-grid .choice-card { min-height: 86px; font-size: 16px; }
  .item-grid .choice-icon { font-size: 26px; }
  .clue-spot small, .shelter-spot small, .dinner-slot small, .offered-help small { font-size: 14px; }
  .wayfinder-topline { font-size: 14px; }
  .rescue-node b, .help-tool b { font-size: 14px; }
}

@media (max-width: 390px) {
  .direction-choice b, .direction-choice small { font-size: 14px; }
  .route-sign .sign-direction, .route-sign small { font-size: 14px; }
  .clue-spot small { font-size: 14px; }
}

.result-art img { width: 100%; height: 100%; padding: 9px; object-fit: contain; }
.result-art img[hidden], .result-emoji[hidden] { display: none; }