/* Journey S1 shell — vanilla, no deps. Cartoon menu chrome. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
    margin: 0; background: #070b12; color: #f2f5f9;
    font-family: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow: hidden; user-select: none; -webkit-user-select: none;
}
#app { position: fixed; inset: 0; overflow: hidden; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.screen.active { display: flex; }
.hint { opacity: .45; font-size: .8rem; margin-top: 14px; }

/* ---------- chunky toy buttons ---------- */
.btn-big {
    font-size: 1.15rem; font-weight: 700; letter-spacing: .04em;
    color: #5b3600; background: linear-gradient(180deg, #ffe08a, #ffc93c);
    border: 3px solid #5b3600; border-radius: 999px; padding: 12px 40px; cursor: pointer;
    box-shadow: 0 5px 0 #5b3600, 0 10px 22px rgba(0,0,0,.35);
    font-family: inherit; touch-action: manipulation;
    transition: transform .08s ease, box-shadow .08s ease;
    animation: btnWiggle 3.2s ease-in-out infinite;
}
@keyframes btnWiggle { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-1.6deg) scale(1.02); } 94% { transform: rotate(1.6deg) scale(1.02); } }
.btn-big:hover { filter: brightness(1.05); }
.btn-big:active { transform: translateY(4px); box-shadow: 0 1px 0 #5b3600, 0 4px 10px rgba(0,0,0,.3); }
.btn-big.slim { font-size: .95rem; padding: 9px 22px; animation: none; }
.btn-ghost {
    background: rgba(255,255,255,.9); color: #3a5a40;
    border: 3px solid #3a5a40; border-radius: 999px;
    padding: 7px 18px; font-size: .82rem; font-weight: 600; cursor: pointer; margin: 4px;
    font-family: inherit; touch-action: manipulation;
    box-shadow: 0 3px 0 #3a5a40;
    transition: transform .08s ease, box-shadow .08s ease;
}
.btn-ghost:hover { transform: translateY(-1px); }
.btn-ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 #3a5a40; }
.btn-ghost.danger { color: #b23c3c; border-color: #b23c3c; box-shadow: 0 3px 0 #b23c3c; }
.btn-ghost.danger:active { box-shadow: 0 1px 0 #b23c3c; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- cartoon title ---------- */
#screen-title {
    background: linear-gradient(180deg, #3fa7f5 0%, #7ecbf7 46%, #cdeffd 72%, #b8e986 72.2%, #7cc46a 100%);
    overflow: hidden;
}
.sky-deco { position: absolute; inset: 0; pointer-events: none; }
.sun {
    position: absolute; top: 5%; right: 9%; width: 74px; height: 74px;
    background: radial-gradient(circle, #fff6c9 0%, #ffd93c 55%, #ffb830 100%);
    border-radius: 50%; border: 4px solid #e8930c;
    animation: sunBob 5s ease-in-out infinite;
}
.sun i {
    position: absolute; inset: -22px; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255,217,60,.55) 0deg 10deg, transparent 10deg 30deg, rgba(255,217,60,.55) 30deg 40deg, transparent 40deg 60deg, rgba(255,217,60,.55) 60deg 70deg, transparent 70deg 90deg, rgba(255,217,60,.55) 90deg 100deg, transparent 100deg 120deg, rgba(255,217,60,.55) 120deg 130deg, transparent 130deg 150deg, rgba(255,217,60,.55) 150deg 160deg, transparent 160deg 180deg, rgba(255,217,60,.55) 180deg 190deg, transparent 190deg 210deg, rgba(255,217,60,.55) 210deg 220deg, transparent 220deg 240deg, rgba(255,217,60,.55) 240deg 250deg, transparent 250deg 270deg, rgba(255,217,60,.55) 270deg 280deg, transparent 280deg 300deg, rgba(255,217,60,.55) 300deg 310deg, transparent 310deg 330deg, rgba(255,217,60,.55) 330deg 340deg, transparent 340deg 360deg);
    animation: spin 24s linear infinite;
}
@keyframes sunBob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(8px) rotate(3deg); } }
.cloud {
    position: absolute; width: 92px; height: 30px; background: #fff; border-radius: 999px;
    opacity: .95; animation: cloudDrift linear infinite;
}
.cloud::before, .cloud::after {
    content: ''; position: absolute; background: #fff; border-radius: 50%;
}
.cloud::before { width: 40px; height: 40px; top: -20px; left: 14px; }
.cloud::after { width: 28px; height: 28px; top: -13px; left: 48px; }
.cloud.c1 { top: 12%; animation-duration: 26s; }
.cloud.c2 { top: 26%; transform: scale(.65); animation-duration: 38s; animation-delay: -12s; opacity: .85; }
.cloud.c3 { top: 5%; transform: scale(1.25); animation-duration: 48s; animation-delay: -30s; opacity: .9; }
@keyframes cloudDrift { from { left: -130px; } to { left: 110%; } }
.balloon {
    position: absolute; width: 22px; height: 28px; border-radius: 50% 50% 48% 48%;
    animation: balloonFloat 7s ease-in-out infinite;
}
.balloon::after {
    content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 26px;
    background: rgba(255,255,255,.8); transform: translateX(-50%);
}
.balloon.b1 { background: #ff6b81; left: 12%; top: 30%; }
.balloon.b2 { background: #7c6cf0; left: 82%; top: 44%; animation-delay: -3.2s; transform: scale(.8); }
@keyframes balloonFloat { 0%,100% { margin-top: 0; } 50% { margin-top: -22px; } }
.hills { position: absolute; left: 0; right: 0; bottom: -4%; height: 26%; pointer-events: none; }
.hills i { position: absolute; bottom: -38%; border-radius: 50% 50% 0 0; }
.hills .h1 { left: -12%; width: 62%; height: 130%; background: #8fd07a; }
.hills .h2 { right: -14%; width: 66%; height: 150%; background: #6db85c; }
.hills .h3 { left: 26%; width: 48%; height: 95%; background: #a5dd8f; }
.title-mascot { position: relative; z-index: 2; animation: hop 1.6s ease-in-out infinite; filter: drop-shadow(0 8px 0 rgba(0,0,0,.18)); }
@keyframes hop {
    0%, 100% { transform: scale(1, 1) translateY(0); }
    28% { transform: scale(1.1, .88) translateY(3px); }
    55% { transform: scale(.93, 1.1) translateY(-16px); }
    75% { transform: scale(1.03, .97) translateY(0); }
}
.lantern { animation: glow 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes glow { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.game-title {
    position: relative; z-index: 2;
    font-size: clamp(2rem, 11vw, 3.4rem); font-weight: 700; letter-spacing: .06em;
    margin: 14px 0 2px; color: #fff;
    text-shadow: 3px 3px 0 #b45309, -2px -2px 0 #b45309, 2px -2px 0 #b45309, -2px 2px 0 #b45309, 0 7px 0 rgba(90,50,0,.35);
}
.game-title span {
    display: inline-block;
    animation: letterIn .55s cubic-bezier(.34,1.8,.64,1) backwards, letterWob .9s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * .08s), calc(.9s + var(--i, 0) * .08s);
}
@keyframes letterIn { from { transform: translateY(-70px) rotate(-14deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes letterWob { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg) translateY(-3px); } }
.game-title.small { font-size: clamp(1.35rem, 6vw, 2rem); letter-spacing: .08em; }
.game-title.small span { animation: none; }
.game-sub { position: relative; z-index: 2; color: #2f5d33; font-weight: 600; margin: 0 0 14px; max-width: 28rem; background: rgba(255,255,255,.65); border-radius: 999px; padding: 4px 16px; }
.title-pips { display: flex; gap: 10px; margin: 0 0 20px; position: relative; z-index: 2; }
.title-pips i {
    width: 34px; height: 12px; border-radius: 99px; display: block;
    background: rgba(255,255,255,.55); border: 3px solid #2f5d33;
}
.title-pips i.on { background: #ffc93c; box-shadow: 0 0 0 3px rgba(255,201,60,.35); animation: pipPop .4s cubic-bezier(.34,1.8,.64,1); }
@keyframes pipPop { from { transform: scale(.3); } to { transform: scale(1); } }
.title-pips i.next { background: #fff; animation: pipBlink 1.2s ease-in-out infinite; }
@keyframes pipBlink { 50% { transform: scale(1.15); } }
#screen-title .btn-big { position: relative; z-index: 2; }
#screen-title .hint, #title-hint { position: relative; z-index: 2; color: #2f5d33; font-weight: 600; opacity: .85; }
#screen-title, #screen-finale { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

/* ---------- cartoon map ---------- */
#screen-map {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.5) 0 3px, transparent 4px),
        radial-gradient(circle at 88% 32%, rgba(255,255,255,.5) 0 3px, transparent 4px),
        radial-gradient(circle at 76% 82%, rgba(255,255,255,.4) 0 3px, transparent 4px),
        radial-gradient(circle at 22% 68%, rgba(255,255,255,.4) 0 3px, transparent 4px),
        linear-gradient(180deg, #2b9fd8 0%, #5cc3ee 45%, #a5e3f7 100%);
    justify-content: flex-start;
    padding-top: calc(7vh + env(safe-area-inset-top));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
}
.map-title { letter-spacing: .14em; margin: 0 0 2px; color: #fff; font-weight: 700;
    text-shadow: 2px 2px 0 #14608a, -1px -1px 0 #14608a, 1px -1px 0 #14608a, -1px 1px 0 #14608a; }
.map-sub { color: #0d3a52; font-weight: 600; font-size: .85rem; margin: 0; background: rgba(255,255,255,.7); display: inline-block; border-radius: 999px; padding: 2px 14px; }
.map-voice { min-height: 1.2em; margin: 8px 0 14px; font-size: .85rem; font-weight: 600; color: #7a4a00; max-width: min(420px, 92vw); background: rgba(255,240,200,.85); border-radius: 12px; padding: 4px 12px; }
#map-path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; width: min(420px, 92vw); }
.map-step { position: relative; animation: nodePop .45s cubic-bezier(.34,1.7,.64,1) backwards; }
.map-step:nth-child(1) { animation-delay: .05s; }
.map-step:nth-child(2) { animation-delay: .16s; }
.map-step:nth-child(3) { animation-delay: .27s; }
.map-step:nth-child(4) { animation-delay: .38s; }
@keyframes nodePop { from { transform: scale(.4) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
.map-rail {
    position: absolute; left: 35px; top: 58px; bottom: -2px; width: 6px;
    background: repeating-linear-gradient(180deg, #fff 0 8px, transparent 8px 15px);
    opacity: .7; pointer-events: none;
}
.map-step.done .map-rail { background: repeating-linear-gradient(180deg, #ffd93c 0 8px, transparent 8px 15px); opacity: 1; }
.map-step:last-child .map-rail { display: none; }
.map-node {
    position: relative; display: flex; align-items: center; gap: 12px; text-align: left;
    background: #fffdf4; color: #33302a; font: inherit;
    border: 4px solid #3aaed8; border-radius: 18px; padding: 10px 14px; width: 100%;
    margin: 5px 0; touch-action: manipulation;
    box-shadow: 0 4px 0 rgba(13,58,82,.35);
    transition: transform .1s ease;
}
.map-step:nth-child(1) .map-node { border-color: #3aaed8; }
.map-step:nth-child(2) .map-node { border-color: #7c6cf0; }
.map-step:nth-child(3) .map-node { border-color: #ff8a5c; }
.map-step:nth-child(4) .map-node { border-color: #3fae6a; }
.map-node:not(:disabled):hover { transform: translateY(-2px) rotate(-.4deg); }
.map-node:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(13,58,82,.35); }
.map-node .dot {
    flex: 0 0 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #3aaed8; color: #fff; border: 3px solid #fff;
    box-shadow: 0 0 0 2px #3aaed8;
}
.map-step:nth-child(2) .map-node .dot { background: #7c6cf0; box-shadow: 0 0 0 2px #7c6cf0; }
.map-step:nth-child(3) .map-node .dot { background: #ff8a5c; box-shadow: 0 0 0 2px #ff8a5c; }
.map-step:nth-child(4) .map-node .dot { background: #3fae6a; box-shadow: 0 0 0 2px #3fae6a; }
.map-node .dot svg { display: block; }
.map-node .t b { display: block; font-size: .98rem; font-weight: 700; }
.map-node .t > span:not(.node-bar) { font-size: .75rem; opacity: .65; font-weight: 500; }
.map-node .node-bar {
    display: block; height: 8px; margin-top: 7px; border-radius: 99px;
    background: rgba(0,0,0,.1); overflow: hidden; border: 2px solid rgba(0,0,0,.08);
}
.map-node .node-bar i {
    display: block; height: 100%; width: 0; border-radius: 99px;
    background: linear-gradient(90deg, #f0ad4e, #ffc107);
}
.map-node.done .node-bar i { background: #3fae6a; }
.map-node.done { border-color: #3fae6a; background: #f2fbf4; }
.map-node.done .dot { background: #3fae6a; box-shadow: 0 0 0 2px #3fae6a; }
.map-node.current { animation: nodeWiggle 1s ease-in-out infinite; }
.map-step:nth-child(1) .map-node.current { box-shadow: 0 4px 0 rgba(13,58,82,.35), 0 0 22px rgba(58,174,216,.8); }
.map-step:nth-child(2) .map-node.current { box-shadow: 0 4px 0 rgba(13,58,82,.35), 0 0 22px rgba(124,108,240,.8); }
.map-step:nth-child(3) .map-node.current { box-shadow: 0 4px 0 rgba(13,58,82,.35), 0 0 22px rgba(255,138,92,.8); }
.map-step:nth-child(4) .map-node.current { box-shadow: 0 4px 0 rgba(13,58,82,.35), 0 0 22px rgba(63,174,106,.8); }
@keyframes nodeWiggle { 0%,100% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg) scale(1.015); } }
.map-node.current::after {
    content: 'GO!'; position: absolute; top: -13px; right: 12px;
    background: #ff5c5c; color: #fff; font-size: .72rem; font-weight: 700;
    border: 2px solid #fff; border-radius: 999px; padding: 1px 10px;
    transform: rotate(6deg); box-shadow: 0 2px 6px rgba(0,0,0,.3);
    animation: goBob 1s ease-in-out infinite;
}
@keyframes goBob { 50% { transform: rotate(6deg) translateY(-3px); } }
.map-node.locked { opacity: .75; background: #e8e4d8; border-style: dashed; box-shadow: none; }
.map-node.locked .dot { background: #a8a294; box-shadow: 0 0 0 2px #a8a294; }
.map-node:not(:disabled) { cursor: pointer; }
.map-node:disabled { cursor: default; }
.map-foot { margin-top: 16px; }
.map-foot .btn-ghost { background: rgba(255,255,255,.92); }

/* ---------- transition ---------- */
#screen-transition { background: #04060b; cursor: pointer; }
#trans-fx { position: absolute; inset: 0; overflow: hidden; }
.trans-copy { position: relative; z-index: 3; max-width: 520px; }
#trans-speaker { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: #ffd97a; margin: 0 0 6px; opacity: .9; }
.trans-copy p { font-size: 1.25rem; line-height: 1.6; margin: 6px 0; text-shadow: 0 2px 12px #000; }
#trans-line2 { color: #ffd97a; font-weight: 700; }
.trans-hint { animation: hintIn 3.4s ease forwards; }
@keyframes hintIn { 0%, 28% { opacity: 0; } 42%, 100% { opacity: .45; } }
/* fx layers */
.fx-plank { position: absolute; left: 8%; bottom: 18%; width: 0; height: 10px; background: linear-gradient(90deg, #8a5a2b, #ffc107); border-radius: 5px; transform-origin: left center; animation: plankGrow 3s ease-out forwards; }
@keyframes plankGrow { 0% { width: 0; transform: rotate(-4deg); } 60% { width: 84%; transform: rotate(-4deg); } 100% { width: 84%; transform: rotate(-38deg); } }
.fx-cloud { position: absolute; background: rgba(255,255,255,.85); border-radius: 50%; filter: blur(2px); animation: drift 3.4s ease-out forwards; }
@keyframes drift { from { transform: translateX(-30vw); opacity: 0; } 30% { opacity: .9; } to { transform: translateX(30vw); opacity: 0; } }
.fx-white { position: absolute; inset: 0; background: #fff8e6; opacity: 0; animation: whiteOut 3.4s ease-in forwards; }
@keyframes whiteOut { 0%,55% { opacity: 0; } 100% { opacity: 1; } }
.fx-streaks { position: absolute; inset: -20%; background: repeating-linear-gradient(180deg, transparent 0 26px, rgba(255,255,255,.5) 26px 28px); opacity: 0; animation: streaks 3.4s ease-in forwards; }
@keyframes streaks { 0%,40% { opacity: 0; transform: translateY(-40px); } 100% { opacity: .8; transform: translateY(120px); } }
.fx-vortex { position: absolute; left: 50%; top: 34%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 6px solid #7dd3fc; filter: blur(1px); animation: vortex 3.4s ease-in forwards; }
@keyframes vortex { 0% { transform: scale(.4) rotate(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(9) rotate(540deg); opacity: 1; } }
.fx-dust { position: absolute; left: 50%; bottom: 12%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; background: radial-gradient(circle, #d8b26a 0%, transparent 70%); animation: dust 3.4s ease-out forwards; }
@keyframes dust { 0% { transform: scale(1); opacity: 0; } 45% { opacity: 1; } 100% { transform: scale(16); opacity: 0; } }
.fx-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: flashBang 3.4s ease-out forwards; }
@keyframes flashBang { 0%,30% { opacity: 0; } 42% { opacity: 1; } 60%,100% { opacity: 0; } }
.fx-rift { position: absolute; left: 50%; top: 8%; bottom: 8%; width: 10px; margin-left: -5px; background: linear-gradient(180deg, #c4b5fd, #fff, #c4b5fd); border-radius: 6px; box-shadow: 0 0 30px #a78bfa; animation: rift 3.4s ease-in forwards; }
@keyframes rift { 0%,35% { transform: scaleY(.1); opacity: 0; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scale(14, 1.2); opacity: 1; } }
.fx-rays { position: absolute; inset: -30%; background: conic-gradient(from 0deg at 50% 60%, rgba(255,193,7,.25) 0deg 12deg, transparent 12deg 30deg, rgba(255,193,7,.25) 30deg 42deg, transparent 42deg 360deg); animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- game screen ---------- */
#screen-game { padding: 0; justify-content: flex-start; background: #000; }
/* Embed mode: portal owns the outer chrome, so the shell HUD drops only
 * its fullscreen button (portal has no fullscreen need). The map keeps
 * Restart season; its own Fullscreen button stays hidden too. */
.is-embed #btn-fs { display: none; }
.is-embed #btn-map-fullscreen { display: none; }
#hud {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top));
    background: rgba(4,6,11,.92); z-index: 5;
    border-bottom: 1px solid rgba(255,193,7,.25);
}
#hud button {
    background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: 8px;
    font-size: 1rem; padding: 6px 12px; cursor: pointer; touch-action: manipulation;
}
#hud button:hover { background: rgba(255,255,255,.18); }
#hud-mid { flex: 1; min-width: 0; }
#hud-chapter { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #ffd97a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud-guide { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
#hud-guide[hidden] { display: none; }
#hud-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); margin-top: 5px; overflow: hidden; }
#hud-fill { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #f0ad4e, #ffc107); transition: width .4s ease; }
#hud-best { min-width: 64px; text-align: right; line-height: 1.05; }
#hud-best b { display: block; font-variant-numeric: tabular-nums; font-weight: 800; color: #ffc107; font-size: .95rem; }
#hud-best small { display: block; font-size: .62rem; letter-spacing: .04em; color: rgba(255,217,122,.7); font-variant-numeric: tabular-nums; }
#game-wrap { position: relative; flex: 1; width: 100%; }
#game-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
#game-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #04060b; z-index: 4; color: rgba(255,255,255,.7); }
#game-loading[hidden] { display: none; }
.spin { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(255,193,7,.25); border-top-color: #ffc107; animation: spin 1s linear infinite; }

/* portal banner */
#portal-banner {
    position: absolute; left: 10px; right: 10px;
    bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 6;
    display: flex; align-items: center; gap: 10px; text-align: left; flex-wrap: wrap;
    background: linear-gradient(90deg, rgba(60,42,4,.97), rgba(20,28,40,.97));
    border: 1px solid #ffc107; border-radius: 14px; padding: 12px 14px;
    box-shadow: 0 0 26px rgba(255,193,7,.4);
}
#portal-banner[hidden] { display: none; }
.portal-glow { flex: 0 0 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle, #fff6d0 0%, #ffc107 45%, transparent 72%); animation: glow 1.6s ease-in-out infinite; }
.portal-copy { flex: 1; min-width: 140px; }
.portal-copy strong { color: #ffd97a; display: block; margin-bottom: 2px; }
.portal-copy p { margin: 0; font-size: .8rem; opacity: .85; line-height: 1.35; }
.portal-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-left: auto; }
#btn-portal {
    background: linear-gradient(180deg, #ffd97a, #ffc107); border: 0; border-radius: 10px;
    font-weight: 800; padding: 10px 16px; cursor: pointer; color: #171d25; white-space: nowrap;
    font-family: inherit; touch-action: manipulation;
}
#btn-portal:hover { filter: brightness(1.05); }
#btn-portal-later {
    background: transparent; border: 0; color: rgba(255,255,255,.6); font-size: .75rem;
    cursor: pointer; font-family: inherit; padding: 2px 4px;
}
#btn-portal-later:hover { color: #fff; }
@media (max-width: 520px) {
    .portal-copy { flex: 1 1 calc(100% - 52px); }
    .portal-actions { flex: 1 1 100%; flex-direction: row; align-items: center; margin-left: 0; }
    #btn-portal { flex: 1; }
}

/* guide toast */
#guide-toast {
    position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom));
    transform: translateX(-50%); z-index: 6;
    max-width: 88vw; background: rgba(10,16,26,.94); border: 1px solid rgba(255,217,122,.5);
    border-radius: 12px; padding: 10px 16px; font-size: .86rem; line-height: 1.4;
    box-shadow: 0 6px 20px rgba(0,0,0,.5); pointer-events: none;
}
#guide-toast[hidden] { display: none; }
#guide-toast b { color: #ffd97a; }

/* ---------- cartoon finale ---------- */
#screen-finale { background: linear-gradient(180deg, #ff9a5c 0%, #ff7e5f 34%, #7c4a8c 72%, #2b2a55 100%); overflow: hidden; }
.finale-rays { position: absolute; inset: -30%; pointer-events: none; background: conic-gradient(from 0deg at 50% 65%, rgba(255,235,170,.35) 0deg 10deg, transparent 10deg 28deg, rgba(255,235,170,.35) 28deg 38deg, transparent 38deg 360deg); animation: spin 14s linear infinite; }
.trophy { font-size: 4rem; line-height: 1; position: relative; animation: trophyBounce 1.1s cubic-bezier(.34,1.8,.64,1) backwards, trophySway 2.6s ease-in-out .9s infinite; filter: drop-shadow(0 6px 0 rgba(0,0,0,.25)); }
@keyframes trophyBounce { from { transform: scale(0) rotate(-20deg); } to { transform: none; } }
@keyframes trophySway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
#screen-finale .game-title { color: #fff; text-shadow: 3px 3px 0 #7a2e2e, -2px -2px 0 #7a2e2e, 2px -2px 0 #7a2e2e, -2px 2px 0 #7a2e2e, 0 7px 0 rgba(0,0,0,.3); }
#screen-finale .game-sub { background: rgba(255,255,255,.8); color: #7a2e2e; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i {
    position: absolute; top: -16px; width: 10px; height: 14px; border-radius: 3px;
    animation: confettiFall linear infinite;
}
.confetti i:nth-child(1) { left: 4%; background: #ffd93c; animation-duration: 3.4s; animation-delay: 0s; }
.confetti i:nth-child(2) { left: 12%; background: #ff6b81; animation-duration: 4.1s; animation-delay: -.8s; }
.confetti i:nth-child(3) { left: 20%; background: #3aaed8; animation-duration: 3s; animation-delay: -1.6s; }
.confetti i:nth-child(4) { left: 28%; background: #7cf5c4; animation-duration: 4.6s; animation-delay: -.4s; }
.confetti i:nth-child(5) { left: 36%; background: #c39bff; animation-duration: 3.8s; animation-delay: -2.2s; }
.confetti i:nth-child(6) { left: 44%; background: #ff8a5c; animation-duration: 3.2s; animation-delay: -1.1s; }
.confetti i:nth-child(7) { left: 52%; background: #ffd93c; animation-duration: 4.4s; animation-delay: -2.8s; }
.confetti i:nth-child(8) { left: 60%; background: #ff6b81; animation-duration: 3.6s; animation-delay: -.2s; }
.confetti i:nth-child(9) { left: 68%; background: #3aaed8; animation-duration: 4.9s; animation-delay: -1.9s; }
.confetti i:nth-child(10) { left: 76%; background: #7cf5c4; animation-duration: 3.1s; animation-delay: -2.5s; }
.confetti i:nth-child(11) { left: 84%; background: #c39bff; animation-duration: 4.2s; animation-delay: -.6s; }
.confetti i:nth-child(12) { left: 92%; background: #ff8a5c; animation-duration: 3.7s; animation-delay: -1.4s; }
.confetti i:nth-child(13) { left: 8%; background: #fff; animation-duration: 5.1s; animation-delay: -3.1s; }
.confetti i:nth-child(14) { left: 56%; background: #fff; animation-duration: 4.7s; animation-delay: -3.6s; }
@keyframes confettiFall {
    0% { transform: translateY(-20px) rotate(0); opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}
#finale-stats { display: flex; gap: 12px; margin: 6px 0 24px; position: relative; flex-wrap: wrap; justify-content: center; }
#finale-hosts { display: flex; gap: 8px; margin: 0 0 12px; position: relative; flex-wrap: wrap; justify-content: center; max-width: min(430px, 92vw); }
.finale-host { background: rgba(255,255,255,.92); border: 2px solid #5b3600; border-radius: 999px; color: #5b3600; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 4px 12px; }
#finale-stats .stat {
    background: rgba(255,255,255,.92); border: 3px solid #5b3600; border-radius: 16px;
    padding: 8px 14px; min-width: 76px; box-shadow: 0 4px 0 #5b3600;
    animation: statPop .5s cubic-bezier(.34,1.8,.64,1) backwards;
}
#finale-stats .stat:nth-child(1) { animation-delay: .15s; }
#finale-stats .stat:nth-child(2) { animation-delay: .28s; }
#finale-stats .stat:nth-child(3) { animation-delay: .41s; }
#finale-stats .stat:nth-child(4) { animation-delay: .54s; }
@keyframes statPop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
#finale-stats .stat b { display: block; font-size: 1.25rem; color: #b45309; font-variant-numeric: tabular-nums; }
#finale-stats .stat span { font-size: .66rem; font-weight: 600; color: #7a5a3a; text-transform: uppercase; letter-spacing: .06em; }
#screen-finale .btn-ghost { position: relative; margin-top: 10px; background: rgba(255,255,255,.92); }
#screen-game.portal-open #guide-toast { bottom: calc(132px + env(safe-area-inset-bottom)); }

#confirm-modal {
    position: absolute; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    background: rgba(4, 6, 11, .72); padding: 20px;
}
#confirm-modal[hidden] { display: none; }
.confirm-card {
    width: min(380px, 100%);
    background: #fffdf4; color: #33302a; border: 4px solid #3a5a40;
    border-radius: 22px; padding: 22px 18px 16px;
    box-shadow: 0 6px 0 #3a5a40, 0 18px 50px rgba(0,0,0,.5);
    transform: rotate(-1deg);
}
.confirm-card p { margin: 0 0 16px; line-height: 1.45; }
.confirm-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
    .title-mascot, .lantern, .map-node.current, .finale-rays, .portal-glow, .trans-hint, .spin,
    .fx-plank, .fx-cloud, .fx-white, .fx-streaks, .fx-vortex, .fx-dust, .fx-flash, .fx-rift, .fx-rays,
    .sun i, .cloud, .balloon, .btn-big, .game-title span, .map-step, .trophy, .confetti i,
    .map-node.current::after, #finale-stats .stat, .title-pips i.on, .title-pips i.next {
        animation: none !important;
    }
    .trans-hint { opacity: .45; }
    .game-title span, .map-step, #finale-stats .stat, .trophy { opacity: 1 !important; transform: none !important; }
}