/* Pip's Glow Trail — deep-night dot-to-dot. Amber firefly light on indigo sky. */

:root {
    --night-1: #3A2A6A;
    --night-2: #2C2058;
    --night-3: #201646;
    --amber: #FFC94D;
    --amber-lo: #F5A623;
    --amber-hi: #FFE9A8;
    --teal: #4BC2A6;
    --star-white: #FFF6D8;
}

html, body { height: 100%; overflow: hidden; background: #201646; }
body { position: fixed; inset: 0; }

/* ── Sky scene (fixed, behind everything) ──────────────────────────────────── */
#sky { position: fixed; inset: 0; z-index: 0; }
#sky-svg { width: 100%; height: 100%; display: block; }

.sky-star { animation: star-tw 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes star-tw { 0%, 100% { opacity: .85; } 50% { opacity: .2; } }

#bg-fireflies { position: absolute; inset: 0; pointer-events: none; }
.bg-fly {
    position: absolute; width: 7px; height: 7px; border-radius: 50%;
    background: radial-gradient(circle, #FFF2B8 0%, #FFC94D 55%, rgba(255,201,77,0) 75%);
    animation: bg-fly-blink 5s ease-in-out infinite;
}
@keyframes bg-fly-blink {
    0%, 100% { opacity: 0; transform: translate(0, 0) scale(.6); }
    40% { opacity: .9; }
    50% { opacity: 1; transform: translate(8px, -10px) scale(1); }
    60% { opacity: .8; }
}

/* ── Stage + page panel ────────────────────────────────────────────────────── */
#stage {
    position: fixed; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
}
#stage.shake { animation: stage-shake .6s ease-in-out; }
@keyframes stage-shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-6px, 4px); } 40% { transform: translate(6px, -4px); }
    60% { transform: translate(-5px, -3px); } 80% { transform: translate(5px, 3px); }
}

#page {
    position: relative;
    width: min(96vw, 118vh);
    height: min(90vh, 118vw);
    max-width: 1180px;
    border-radius: 34px;
    background:
        radial-gradient(60% 55% at 50% 42%, rgba(255,201,77,0.10) 0%, rgba(255,201,77,0) 60%),
        radial-gradient(120% 100% at 50% 0%, #322361 0%, #241A4A 60%, #1B1338 100%);
    box-shadow: inset 0 0 60px rgba(0,0,0,0.45), 0 18px 50px rgba(0,0,0,0.45);
    touch-action: none;
    overflow: visible;
}

#ink-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* ── Dots ──────────────────────────────────────────────────────────────────── */
#dots { position: absolute; inset: 0; }
.dot {
    position: absolute; width: 76px; height: 76px;
    transform: translate(-50%, -50%);
    cursor: pointer; touch-action: none;
    transition: transform .3s cubic-bezier(.2,1.4,.4,1), opacity .3s;
    z-index: 5;
}
.dot .halo, .dot .core, .dot .badge {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    border-radius: 50%; pointer-events: none;
}
.dot .halo {
    width: 60px; height: 60px;
    border: 2px solid rgba(255,246,216,0.35);
    background: radial-gradient(circle, rgba(255,246,216,0.10) 0%, rgba(255,246,216,0) 70%);
}
.dot .core {
    width: 22px; height: 22px;
    background: radial-gradient(circle at 40% 35%, #FFFFFF 0%, #E7E7FF 60%, #AEA6D8 100%);
    box-shadow: 0 0 8px rgba(255,246,216,0.55);
}
.dot .badge {
    width: auto; height: auto; border-radius: 999px;
    font-family: var(--gk-font); font-weight: 800; color: #4A3B5C;
    font-size: 0.92rem; line-height: 1; padding: 3px 7px;
    background: rgba(255,246,216,0.55); transform: translate(-50%, -180%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3); opacity: .55;
}

.dot.pre { opacity: 0; transform: translate(-50%, -50%) scale(.3); }

.dot.lit .core {
    background: radial-gradient(circle at 40% 35%, #FFF6D8 0%, #FFD25A 55%, #F5A623 100%);
    box-shadow: 0 0 16px 4px rgba(255,201,77,0.85);
    width: 26px; height: 26px;
}
.dot.lit .halo { border-color: rgba(255,201,77,0.55); }
.dot.lit .badge { background: rgba(255,214,120,0.85); opacity: .9; }

.dot.anchor .core { width: 28px; height: 28px; }

.dot.target {
    transform: translate(-50%, -50%) scale(1.18);
    z-index: 8;
}
.dot.target .halo {
    width: 74px; height: 74px;
    border-color: rgba(255,201,77,0.9);
    background: radial-gradient(circle, rgba(255,201,77,0.28) 0%, rgba(255,201,77,0) 70%);
    animation: target-pulse 1.1s ease-in-out infinite;
}
.dot.target .core {
    width: 30px; height: 30px;
    background: radial-gradient(circle at 40% 35%, #FFFFFF 0%, #FFE07A 55%, #F5A623 100%);
    box-shadow: 0 0 20px 6px rgba(255,201,77,0.9);
    animation: target-bounce 1.1s ease-in-out infinite;
}
.dot.target .badge {
    font-size: 1.15rem; padding: 5px 11px; opacity: 1;
    background: linear-gradient(135deg, #FFE07A, #F5A623); color: #3A2A2A;
    box-shadow: 0 3px 9px rgba(0,0,0,0.35);
}
@keyframes target-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .8; } 50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } }
@keyframes target-bounce { 0%, 100% { transform: translate(-50%, -55%); } 50% { transform: translate(-50%, -45%); } }

.dot.idle-swell { transform: translate(-50%, -50%) scale(1.42) !important; }
.dot.idle-swell .halo { border-color: #FFF6D8; box-shadow: 0 0 26px 8px rgba(255,201,77,0.7); }

.dot.twinkle .core { animation: twinkle-pale .9s ease-out; }
@keyframes twinkle-pale {
    0% { background: #FFFFFF; box-shadow: 0 0 26px 10px rgba(255,255,255,0.95); transform: translate(-50%,-50%) scale(1.5); }
    100% { transform: translate(-50%,-50%) scale(1); }
}

.dot.recap .core { animation: recap-flash .32s ease-out; }
@keyframes recap-flash {
    0% { box-shadow: 0 0 30px 12px rgba(255,201,77,1); transform: translate(-50%,-50%) scale(1.6); }
    100% { transform: translate(-50%,-50%) scale(1); }
}
.dot.all-lit .core {
    background: radial-gradient(circle at 40% 35%, #FFFDF0 0%, #FFD84D 55%, #F5A623 100%);
    box-shadow: 0 0 20px 6px rgba(255,216,77,0.95);
}

.gold-flash { animation: gold-flash .7s ease-out; }
@keyframes gold-flash { 0% { opacity: .1; } 35% { opacity: 1; } 100% { opacity: .85; } }
.guide-strong { animation: guide-march 1s linear infinite; }
@keyframes guide-march { to { stroke-dashoffset: -26; } }

/* ── Reveal art ────────────────────────────────────────────────────────────── */
#reveal-wrap { position: absolute; z-index: 6; pointer-events: none; }
#reveal-svg { width: 100%; height: 100%; overflow: visible; }
#reveal-wrap .rv { opacity: 0; transform: scale(.5); transform-box: fill-box; transform-origin: center; }
#reveal-wrap.flood .rv { opacity: 1; transform: scale(1); transition: opacity .55s ease, transform .6s cubic-bezier(.2,1.5,.45,1); }

/* subject motions once .go is added */
.subj-star.go .rv-star { animation: shoot-up 1.5s ease-in forwards; }
@keyframes shoot-up { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(6px) scale(1.12); } 100% { transform: translateY(-160%) scale(.5); opacity: 0; } }
.rv-star .rv-sparks circle { animation: sp-blink 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sp-blink { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

.subj-rocket.go .rv-rocket { animation: blast 1.6s ease-in forwards; }
@keyframes blast { 0% { transform: translateY(0); } 20% { transform: translateY(6px); } 100% { transform: translateY(-170%); opacity: 0; } }
.rv-flame { animation: flame-flick .12s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center top; }
@keyframes flame-flick { from { transform: scaleY(.85) scaleX(1); } to { transform: scaleY(1.2) scaleX(.9); } }

.subj-butterfly .rv-bf-wings { transform-box: fill-box; transform-origin: center; }
.subj-butterfly.go .rv-bf-wings { animation: bf-flap .35s ease-in-out infinite; }
@keyframes bf-flap { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.66); } }
.subj-butterfly.go .rv-butterfly { animation: flutter 2.4s ease-in-out .3s forwards; }
@keyframes flutter {
    0% { transform: translate(0,0) rotate(0); }
    30% { transform: translate(20px,-30px) rotate(8deg); }
    60% { transform: translate(-24px,-70px) rotate(-8deg); }
    100% { transform: translate(60px,-150%) rotate(10deg); opacity: 0; }
}

.subj-fish.go .rv-fish { animation: swim 2s ease-in forwards; }
@keyframes swim { 0% { transform: translateX(0); } 30% { transform: translateX(-6px); } 100% { transform: translateX(160%); opacity: 0; } }
.rv-fish .rv-bubbles circle { animation: bub 1.4s ease-in infinite; transform-box: fill-box; }
@keyframes bub { 0% { opacity: .8; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-14px); } }

.subj-boat.go .rv-boat { animation: sail 2.6s ease-in-out forwards; }
@keyframes sail { 0% { transform: translateX(0) rotate(0); } 25% { transform: translateX(6px) rotate(-2deg); } 50% { transform: translateX(-4px) rotate(2deg); } 100% { transform: translateX(150%) rotate(-2deg); opacity: 0; } }
.rv-wave, .rv-wave2 { animation: wave-bob 1.6s ease-in-out infinite; transform-box: fill-box; }
@keyframes wave-bob { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }

.subj-house.go .rv-house { animation: soft-bob 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
.rv-windows rect { animation: win-glow 1.6s ease-in-out infinite alternate; }
@keyframes win-glow { from { fill: #FFE07A; } to { fill: #FFF6C6; } }
@keyframes soft-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.subj-crown.go .rv-crown { animation: soft-bob 2.6s ease-in-out infinite; transform-box: fill-box; }
.rv-gems circle { animation: gem-tw 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes gem-tw { 0%,100% { opacity: .6; } 50% { opacity: 1; filter: drop-shadow(0 0 3px #fff); } }

.subj-puppy.go .rv-puppy { animation: pup-bounce 1s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
@keyframes pup-bounce { 0%,100% { transform: translateY(0) scale(1,1); } 50% { transform: translateY(-6px) scale(1.02,.98); } }
.rv-tail { transform-box: fill-box; transform-origin: bottom left; }
.subj-puppy.go .rv-tail { animation: tail-wag .3s ease-in-out infinite alternate; }
@keyframes tail-wag { from { transform: rotate(-16deg); } to { transform: rotate(20deg); } }

.subj-flower .rv-petals .rv-petal { transform-box: fill-box; transform-origin: 50% 100%; }
.subj-flower.go .rv-petals .rv-petal { animation: petal-open .55s ease-out backwards; }
.subj-flower.go .rv-petals g:nth-child(1) .rv-petal { animation-delay: 0s; }
.subj-flower.go .rv-petals g:nth-child(2) .rv-petal { animation-delay: .12s; }
.subj-flower.go .rv-petals g:nth-child(3) .rv-petal { animation-delay: .24s; }
.subj-flower.go .rv-petals g:nth-child(4) .rv-petal { animation-delay: .36s; }
.subj-flower.go .rv-petals g:nth-child(5) .rv-petal { animation-delay: .48s; }
@keyframes petal-open { from { transform: scale(.15); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Pip ────────────────────────────────────────────────────────────────────── */
#pip {
    position: absolute; left: 0; top: 0; width: 112px; height: 112px;
    z-index: 20; pointer-events: none; opacity: 0; touch-action: none;
    will-change: transform;
}
#pip.show { opacity: 1; pointer-events: auto; cursor: grab; }
#pip:active { cursor: grabbing; }
.pip-inner { width: 100%; height: 100%; animation: pip-bob 3s ease-in-out infinite; transform-origin: center; }
.pip-svg { width: 100%; height: 100%; overflow: visible; display: block; }
@keyframes pip-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.pip-glow { transform-box: fill-box; transform-origin: center; animation: pip-glow 2.4s ease-in-out infinite; }
@keyframes pip-glow { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } }
.pip-tail { transform-box: fill-box; transform-origin: center; animation: pip-glow 2.4s ease-in-out infinite; }

.pip-wing-l { transform-box: fill-box; transform-origin: 100% 50%; animation: flap-l .26s ease-in-out infinite alternate; }
.pip-wing-r { transform-box: fill-box; transform-origin: 0% 50%; animation: flap-r .26s ease-in-out infinite alternate; }
@keyframes flap-l { from { transform: rotate(6deg); } to { transform: rotate(-20deg); } }
@keyframes flap-r { from { transform: rotate(-6deg); } to { transform: rotate(20deg); } }

.pip-anttip { animation: pip-glow 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

.pip-lid { transition: height .08s ease; }
#pip.blink .pip-lid { height: 15px; }

.pip-inner.hopin { animation: pip-hopin 1.4s ease-out; }
@keyframes pip-hopin {
    0% { transform: translateY(0); } 15% { transform: translateY(-42px); } 30% { transform: translateY(0); }
    45% { transform: translateY(-28px); } 60% { transform: translateY(0); }
    75% { transform: translateY(-14px); } 100% { transform: translateY(0); }
}
.pip-inner.carry { animation: none; transform: scale(1.06); }
.pip-inner.happy { animation: pip-happy .55s ease-in-out; }
@keyframes pip-happy { 0%,100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-16px) scale(1.09); } }
.pip-inner.loop { animation: pip-loop 1.3s ease-in-out; }
@keyframes pip-loop { 0% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-34px) rotate(200deg); } 100% { transform: translateY(0) rotate(360deg); } }
.pip-inner.point-l { animation: pip-point-l 1.1s ease-in-out; }
.pip-inner.point-r { animation: pip-point-r 1.1s ease-in-out; }
@keyframes pip-point-l { 0%,100% { transform: rotate(0); } 40% { transform: rotate(-16deg) translateX(-6px); } }
@keyframes pip-point-r { 0%,100% { transform: rotate(0); } 40% { transform: rotate(16deg) translateX(6px); } }
.pip-inner.point { animation: pip-nudge 1.1s ease-in-out; }
@keyframes pip-nudge { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-12px) rotate(-8deg); } 60% { transform: translateY(-4px) rotate(8deg); } }
.pip-inner.fidget { animation: pip-fidget .6s ease-in-out; }
@keyframes pip-fidget { 0%,100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }
.pip-inner.flare .pip-glow, .pip-inner.flare .pip-tail { animation: pip-flare .5s ease-out; }
@keyframes pip-flare { 0% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: scale(1.55); } 100% { opacity: .8; transform: scale(1); } }

/* ── Say-caption bubble ────────────────────────────────────────────────────── */
#say-bubble {
    position: absolute; left: 50%; top: 14px; transform: translate(-50%, -12px);
    max-width: min(78vw, 560px); padding: 10px 20px; border-radius: 22px;
    background: rgba(255,246,216,0.95); color: #4A3B5C; font-family: var(--gk-font);
    font-weight: 700; font-size: clamp(0.95rem, 2.6vw, 1.25rem); text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35); z-index: 30; opacity: 0;
    transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
#say-bubble.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Hello title flourish ──────────────────────────────────────────────────── */
#hello-title {
    position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.6);
    text-align: center; z-index: 25; opacity: 0; pointer-events: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,1.6,.4,1);
    text-shadow: 0 0 24px rgba(255,201,77,0.8);
}
#hello-title.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#hello-title .hl1 { display: block; font-family: var(--gk-font); font-size: clamp(2rem,7vw,3.4rem); color: #FFF6D8; }
#hello-title .hl2 { display: block; font-family: var(--gk-font); font-size: clamp(2.6rem,9vw,4.6rem); color: var(--amber); }

/* ── Start screen ──────────────────────────────────────────────────────────── */
#start-screen {
    position: fixed; inset: 0; z-index: 40;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; text-align: center; padding: 20px;
    background: radial-gradient(80% 70% at 50% 30%, rgba(58,42,106,0.55) 0%, rgba(24,18,50,0.85) 100%);
    transition: opacity .5s ease, visibility .5s;
}
#start-screen.gone { opacity: 0; visibility: hidden; pointer-events: none; }
#title-wrap { position: relative; }
#game-title { line-height: 1; text-shadow: 0 0 30px rgba(255,201,77,0.7); }
#game-title .t-line1 { display: block; font-size: clamp(2rem, 7vw, 3.2rem); color: #FFF6D8; }
#game-title .t-line2 { display: block; font-size: clamp(2.8rem, 10vw, 5rem); color: var(--amber); }
#tagline { color: #E7DEFF; font-size: clamp(1rem, 3vw, 1.35rem); font-family: var(--gk-font); max-width: 22ch; }

#btn-start {
    position: relative; margin-top: 6px; min-height: 80px; padding: 16px 54px;
    font-family: var(--gk-font); font-weight: 800; font-size: clamp(1.4rem, 5vw, 2rem);
    color: #4A3B5C; border: none; border-radius: 60px; cursor: pointer;
    background: linear-gradient(135deg, #FFE07A 0%, #FFC94D 60%, #F5A623 100%);
    box-shadow: 0 0 40px 6px rgba(255,201,77,0.65), 0 10px 26px rgba(0,0,0,0.4);
    animation: start-throb 1.8s ease-in-out infinite;
}
#btn-start:active { transform: scale(.96); }
.start-label { position: relative; z-index: 1; }
@keyframes start-throb { 0%,100% { box-shadow: 0 0 40px 6px rgba(255,201,77,0.6), 0 10px 26px rgba(0,0,0,0.4); } 50% { box-shadow: 0 0 60px 14px rgba(255,201,77,0.9), 0 10px 26px rgba(0,0,0,0.4); } }

#level-row { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.shell-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    width: 108px; min-height: 108px; padding: 12px 8px;
    border: 2px solid rgba(255,201,77,0.4); border-radius: 22px; cursor: pointer;
    background: linear-gradient(160deg, rgba(74,58,120,0.9), rgba(36,26,74,0.9));
    color: #FFF6D8; font-family: var(--gk-font);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35); transition: transform .15s;
}
.shell-btn:active { transform: scale(.95); }
.shell-btn .shell-num { font-size: 1.7rem; font-weight: 800; color: var(--amber); }
.shell-btn .shell-cap { font-size: 0.86rem; }
.shell-btn .shell-stars { font-size: 0.8rem; letter-spacing: 2px; color: #FFD84D; }
.shell-btn.locked { opacity: 0.62; filter: saturate(.5); }
.shell-btn.shake-no { animation: shell-no .4s ease-in-out; }
@keyframes shell-no { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* ── For-grown-ups ─────────────────────────────────────────────────────────── */
#info-btn {
    position: fixed; left: 12px; top: 12px; z-index: 60;
    width: 56px; height: 56px; border: none; border-radius: 50%;
    background: rgba(255,255,255,0.92); font-size: 1.6rem; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
#info-btn:active { transform: scale(.92); }
#info-overlay {
    position: fixed; inset: 0; z-index: 970; display: flex; align-items: center; justify-content: center;
    background: rgba(24,18,50,0.7); padding: 20px;
}
#info-card { max-width: min(92vw, 480px); text-align: left; }
#info-card h2 { color: var(--amber-lo); font-size: clamp(1.4rem,4vw,1.9rem); margin-bottom: 10px; }
#info-card p { margin: 8px 0; font-size: clamp(0.95rem,2.6vw,1.1rem); line-height: 1.45; color: var(--gk-text); }
#info-card .gk-btn { margin-top: 12px; width: 100%; }

/* start-screen only bits hidden during play handled by .gone */

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sky-star, .bg-fly, .pip-inner, .pip-glow, .pip-tail, .pip-wing-l, .pip-wing-r, .pip-anttip,
    .dot.target .halo, .dot.target .core, #btn-start, .rv-flame, .guide-strong,
    .subj-star.go .rv-star, .subj-rocket.go .rv-rocket, .subj-butterfly.go .rv-butterfly,
    .subj-butterfly.go .rv-bf-wings, .subj-fish.go .rv-fish, .subj-boat.go .rv-boat,
    .subj-house.go .rv-house, .subj-crown.go .rv-crown, .subj-puppy.go .rv-puppy,
    .subj-puppy.go .rv-tail, .rv-gems circle, .rv-windows rect, .rv-fish .rv-bubbles circle,
    .rv-wave, .rv-wave2, .rv-star .rv-sparks circle {
        animation: none !important;
    }
    #reveal-wrap .rv { opacity: 1; transform: scale(1); }
}