/* More faithful storybook treatment: richer art, quieter readable surfaces. */
body { background:#fffbf3; }
.topbar { padding-top:14px; padding-bottom:14px; }
.brand b { letter-spacing:.02em; font-weight:900; }
.brand-mark { border:1px solid #e4ceb0; border-radius:47% 53% 49% 51%; background:#fbedd2; }
.hero { padding-top:42px; padding-bottom:12px; scroll-margin-top:80px; }
.hero h1 { position:relative; display:inline-block; letter-spacing:-.035em; }
.hero h1 span { position:relative; }
.hero h1 span::after { content:""; position:absolute; bottom:-13px; left:6px; right:0; height:9px; border-top:3px solid #abd5dc; border-bottom:2px solid #d2e7e8; border-radius:50%; transform:rotate(-2deg); }
.heading-sparkle { display:inline-block; font-style:normal; color:#d6af50; font-size:.7em; margin-left:14px; transform:rotate(12deg); }
.hero-lead { margin-top:30px; font-weight:500; }
.identity-strip { background:#fcf7eb; border-color:#e9ddc8; padding:10px; border-radius:25px 27px 24px 28px; }
.identity-strip label span { color:#968571; }
.primary-button { background:#86a777; border:1px solid #769669; }
.primary-button:hover { background:#789b68; }
.adventure-passport { display:flex; align-items:center; gap:12px; max-width:680px; margin:20px 4px 0; padding:12px 0; border-top:1px dashed #dfd1b7; border-bottom:1px dashed #dfd1b7; }
.passport-star { font-family:Georgia,serif; color:#ca9b3e; font-size:2.2rem; line-height:1; transform:rotate(-10deg); }
.adventure-passport .profile-summary { margin:0; flex:1; font-size:.83rem; line-height:1.6; color:#776f5e; }
.passport-stamp { display:grid; place-content:center; width:54px; height:54px; border:2px solid #8ca77f80; outline:1px solid #8ca77f80; outline-offset:-5px; border-radius:50%; color:#879a7c; font-family:Fredoka,sans-serif; font-size:.47rem; line-height:1.3; text-align:center; letter-spacing:.04em; transform:rotate(12deg); }
.map-section { position:relative; }
.section-heading { margin-bottom:12px; }
.section-heading .eyebrow { font-size:.65rem; }
.section-heading h2 { font-size:1.4rem; color:#70614d; }
.route-shell { padding:26px 12px; }
.island-grid { gap:28px 20px; }
.island-node { min-height:234px; }
.island-node:nth-child(n) .node-land { background:none; border:0; width:192px; height:180px; margin:10px auto 7px; border-radius:0; overflow:visible; }
.island-art { position:absolute; inset:0; display:block; width:100%; height:100%; overflow:hidden; }
.island-node.is-complete .island-art { filter:grayscale(1); opacity:.48; }
.island-node.is-complete b,.island-node.is-complete small { color:#a7a39b; }
.island-node.is-complete .node-land em { background:#aaa69a; }
.node-number { top:8px; left:calc(50% - 85px); width:30px; height:30px; color:#827763; border:1px solid #cbbba0; background:#fffaf1ed; font-size:.72rem; }
.node-land em { top:9px; right:3px; width:28px; height:28px; border:3px solid #fffaf1; }
.island-node b { max-width:200px; margin:auto; font-family:Fredoka,'Noto Sans SC',sans-serif; font-size:1rem; line-height:1.15; color:#584836; }
.island-node small { margin-top:5px; color:#9a8b77; font-size:.7rem; }
.island-node:hover,.island-node:focus-visible { transform:translateY(calc(var(--bob) - 4px)); }
.route-line { inset:72px 35px 90px; width:calc(100% - 70px); height:calc(100% - 162px); }
.route-line path,.mobile-route path { fill:none; stroke:#a6c4c8; stroke-width:4; stroke-linecap:round; stroke-dasharray:1 17; }
.mobile-route { display:none; }
.map-cloud { position:absolute; z-index:0; width:64px; height:15px; background:#dde9e484; border-radius:60% 50% 45% 55%; pointer-events:none; }
.map-cloud::before,.map-cloud::after { content:""; position:absolute; bottom:0; border-radius:50%; background:inherit; width:25px; height:24px; left:10px; }
.map-cloud::after { left:30px; width:21px; height:29px; }
.cloud-left { left:1%; top:45%; }
.cloud-right { right:0; top:12%; background:#eee5cb80; }
.map-footer { margin:22px 0 0; text-align:center; color:#aa997d; font-size:.76rem; letter-spacing:.05em; }
.map-footer span { margin:0 14px; color:#c8b87d; }
.collection-sheet,.result-sheet { background:#fffbf3; border:1px solid #e6dbc6; }
.collection-sheet .eyebrow { color:#a59473; }
.collection-note { line-height:1.8; }
.collection-grid { gap:24px 18px; }
.reward-card,.collectible { border-radius:22px 24px 21px 23px; box-shadow:0 3px 0 #b09a6c0d; overflow:hidden; }
.reward-card::after,.collectible::after { content:""; position:absolute; inset:0; border-radius:inherit; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23887854' opacity='.12' filter='url(%23paper)' d='M0 0h128v128H0z'/%3E%3C/svg%3E"); opacity:.25; mix-blend-mode:multiply; pointer-events:none; }
.card-ornament { position:absolute; z-index:1; pointer-events:none; width:48px; height:48px; color:var(--card-edge); font-family:Georgia,serif; font-size:1.65rem; line-height:1; opacity:.72; }
.reward-card .card-ornament,.collectible .card-ornament { font-size:1.65rem; }
.ornament-top { left:15px; top:13px; text-align:left; }
.ornament-bottom { right:15px; bottom:13px; text-align:right; transform:rotate(180deg); }
.card-ornament::before { content:"❧"; }
[data-rarity="SSR"] .card-ornament::before { content:"✧"; }
[data-rarity="UR"] .card-ornament::before { content:"✦"; }
.card-ornament::after { content:"·"; font-size:1.4rem; position:absolute; left:20px; top:22px; }
.rarity-badge { border-bottom:1px solid var(--card-edge); padding-bottom:3px; letter-spacing:.08em !important; }
.reward-card .card-mascot img { width:160px; height:160px; }
.reward-card { min-height:340px; padding:32px 24px 24px; }
.reward-card strong { font-size:1rem; letter-spacing:.12em; }
.card-serial { color:#998970; letter-spacing:.1em !important; font-family:Fredoka,sans-serif; margin-top:5px; }
.collectible { padding-top:36px; padding-bottom:25px; gap:10px; }
.collectible .card-mascot img { max-width:160px; height:160px; }
.collectible strong { font-family:Fredoka,'Noto Sans SC',sans-serif; font-size:.86rem; line-height:1.3; }
.collectible b { font-size:2rem; color:#786646; }
.collectible small:last-child { border-top:1px dashed #b6a68660; padding-top:9px; margin:0 5px; line-height:1.7; }
.reward-card[data-rarity="SSR"],.collectible[data-rarity="SSR"] { --card-edge:#c09b41; background:linear-gradient(130deg,#f5dfa5,#fff3cf 47%,#edd396); }
.reward-card[data-rarity="UR"],.collectible[data-rarity="UR"] { --card-edge:#b7a0b7; background:linear-gradient(135deg,#e4ebf7,#fff5dd 34%,#f5dde8 67%,#dceee8); }
.result-score { width:165px; height:165px; margin:22px auto; flex-wrap:wrap; align-content:center; align-items:center; gap:0; border:10px solid #a2b88a; border-left-color:#d9e0c9; border-radius:49% 51% 50% 50%; background:#fffdf5; }
.result-score span { width:100%; font-size:.7rem; order:2; margin-top:3px; }
.result-score strong { font-size:3.5rem; color:#748e5c; }
.result-score small { display:none; }
.result-burst { color:#c6a644; }
.draw-zone { min-height:0; }
.result-actions { margin-top:24px; }
:root { --ink:#514343; --muted:#978c8a; --sea:#95b18c; --sea-deep:#7f9f75; --cream:#fffbf5; --coral:#9ab38c; }
body,.hero,.map-section { background:#fffbf5; }
.hero h1 { color:#524242; }
.primary-button { background:#94ae84; border-color:#8fa67f; }
.primary-button:hover { background:#88a278; }
.identity-strip { background:#faf7f0; border-color:#ede5da; }
.adventure-passport { border-color:#e5dccc; }
.challenge { background:#deedf8; }
.answer-button,.answer-button:nth-child(2),.answer-button:nth-child(3) { background:#fffaf2; border:3px solid #fffaf2; }
.answer-button { overflow:hidden; padding:3px; }
.answer-art { display:block; width:100%; height:100%; overflow:hidden; border-radius:50%; }
.answer-button:hover:not(:disabled) { filter:none; transform:translateY(-4px) scale(1.035); }
.answer-button.is-correct { border-color:#83a477; background:#e6efdf; }
.answer-button.is-wrong { border-color:#c28e89; background:#f5dedc; }
.brand-mark svg { width:34px; height:34px; }
.nav-icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.listen-icon { width:44px; height:44px; }
@media(min-width:761px) {
 .challenge { min-height:0; padding-top:22px; padding-bottom:16px; }
 .listen-stage { min-height:170px; }
 .listen-button { width:124px; height:124px; }
 .sound-ripple { width:148px; height:148px; }
 .ripple-two { width:172px; height:172px; }
 .progress-track { margin:14px 0 12px; }
 .feedback { min-height:65px; }
}
@media(min-width:900px) {
 .hero { padding-top:32px; padding-bottom:12px; }
 .hero-copy { max-width:1100px; width:100%; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(340px,.9fr); column-gap:54px; }
 .hero .eyebrow { grid-column:1; margin-bottom:12px; }
 .hero h1 { grid-column:1; font-size:clamp(2.3rem,4vw,3.3rem); }
 .hero-lead { grid-column:1; margin:24px 0 8px; font-size:.82rem; line-height:1.8; }
 .identity-strip { grid-column:2; grid-row:1/span 3; align-self:center; grid-template-columns:1fr .8fr; gap:14px 4px; padding:16px; }
 .identity-strip .primary-button { grid-column:1/-1; padding:11px; }
 .identity-hint { grid-column:2; grid-row:4; margin:6px 4px; font-size:.68rem; }
 .adventure-passport { grid-column:1; grid-row:4; margin:6px 0 0; padding:8px 0; }
 .passport-stamp { width:42px; height:42px; }
 .section-heading { margin-bottom:5px; }
 .map-section { padding-top:18px; }
}
@media(max-width:760px) {
 .topbar { padding:12px 14px; }
 .hero { padding-top:30px; }
 .hero h1 { font-size:2.15rem; }
 .heading-sparkle { margin-left:8px; font-size:.6em; }
 .hero-lead { font-size:.78rem; margin-top:25px; line-height:1.85; }
 .adventure-passport { margin-top:17px; gap:10px; }
 .adventure-passport .profile-summary { font-size:.75rem; }
 .passport-stamp { width:46px; height:46px; flex-shrink:0; }
 .route-shell { padding:15px 0; overflow:visible; }
 .island-grid { gap:20px 0; }
 .island-node { padding:0; min-height:215px; }
 .island-node:nth-child(n) .node-land { width:158px; height:150px; margin:12px auto 8px; }
 .island-node b { max-width:153px; font-size:.94rem; }
 .node-number { left:calc(50% - 70px); top:8px; width:26px; height:26px; font-size:.66rem; }
 .node-land em { width:26px; height:26px; right:2px; top:10px; }
 .mobile-route { display:block; position:absolute; inset:25px 0 40px; width:100%; height:calc(100% - 65px); pointer-events:none; }
 .map-footer { font-size:.65rem; }
 .map-footer span { margin:0 4px; }
 .collection-grid { gap:18px 14px; }
 .collectible .card-mascot img { height:140px; }
 .collection-sheet { padding-top:38px; }
 .reward-card { min-height:315px; width:270px; }
 .reward-card .card-mascot img { width:145px; height:145px; }
 .result-score { width:145px; height:145px; margin:18px auto; }
 .result-sheet { max-height:calc(100dvh - 20px); padding:34px 20px 22px; }
 .challenge { background:#deedf8; }
 .answer-button { width:min(100%,164px); }
}