/* Woolly's Word Wagon — drag-to-assemble spelling.
   Loads AFTER gamekit.css so it can lean on the shared tokens. */

:root {
    --ww-sky-top: #BFE3F2;
    --ww-sky-bot: #E8F7FF;
    --ww-hill: #7CB518;
    --ww-hill-hi: #A2D149;
    --ww-hill-far: #9AD05A;
    --ww-wood: #C98A4B;
    --ww-wood-dk: #8A5A2B;
    --ww-axle: #6E3F1E;
    --ww-hay: #FCBF49;
    --ww-hay-dk: #E8A11F;
    --ww-cream: #FFF8EC;
    --ww-wool-sh: #E7E0D6;
    --ww-sun: #FFF3B0;
    --ww-ink: #4A3B5C;
    --ww-vowel: #FF7BAC;
    --ww-vowel2: #F77F00;
    --ww-cons: #00B4D8;
    --tile: clamp(72px, 11.5vw, 96px);
    --slot: clamp(78px, 12.5vw, 104px);
}

html, body { height: 100%; overflow: hidden; }
body {
    background: var(--ww-sky-bot);
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}

/* ══════════════ Layered scene ══════════════ */

#scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

#sky {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--ww-sky-top) 0%, #DDF2FA 46%, var(--ww-sky-bot) 100%);
}

#sun { position: absolute; top: 4.5%; left: 7%; width: clamp(90px, 14vw, 150px); height: clamp(90px, 14vw, 150px); }
#sun-core {
    position: absolute; inset: 20%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 38%, #FFF7CE, #FFD84D 70%, #F9C846 100%);
    box-shadow: 0 0 44px rgba(255, 216, 77, 0.6);
}
#sun-rays {
    position: absolute; inset: 0;
    background:
        conic-gradient(from 0deg,
            rgba(255,239,150,0.85) 0 6deg, transparent 6deg 30deg,
            rgba(255,239,150,0.85) 30deg 36deg, transparent 36deg 60deg,
            rgba(255,239,150,0.85) 60deg 66deg, transparent 66deg 90deg,
            rgba(255,239,150,0.85) 90deg 96deg, transparent 96deg 120deg,
            rgba(255,239,150,0.85) 120deg 126deg, transparent 126deg 150deg,
            rgba(255,239,150,0.85) 150deg 156deg, transparent 156deg 180deg,
            rgba(255,239,150,0.85) 180deg 186deg, transparent 186deg 210deg,
            rgba(255,239,150,0.85) 210deg 216deg, transparent 216deg 240deg,
            rgba(255,239,150,0.85) 240deg 246deg, transparent 246deg 270deg,
            rgba(255,239,150,0.85) 270deg 276deg, transparent 276deg 300deg,
            rgba(255,239,150,0.85) 300deg 306deg, transparent 306deg 330deg,
            rgba(255,239,150,0.85) 330deg 336deg, transparent 336deg 360deg);
    border-radius: 50%;
    -webkit-mask: radial-gradient(circle, transparent 30%, #000 31%);
    mask: radial-gradient(circle, transparent 30%, #000 31%);
    animation: ww-spin 60s linear infinite;
    opacity: 0.85;
}
@keyframes ww-spin { to { transform: rotate(360deg); } }

.cloud {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    opacity: 0.92;
    filter: drop-shadow(0 6px 8px rgba(120,150,170,0.12));
}
.cloud::before, .cloud::after {
    content: ''; position: absolute; background: #fff; border-radius: 50%;
}
.cloud-a { top: 12%; left: 60%; width: 120px; height: 44px; animation: ww-drift 46s linear infinite; }
.cloud-b { top: 24%; left: 30%; width: 90px; height: 34px; animation: ww-drift 62s linear infinite; animation-delay: -20s; }
.cloud-c { top: 8%; left: 82%; width: 74px; height: 28px; animation: ww-drift 54s linear infinite; animation-delay: -38s; }
.cloud::before { width: 60%; height: 150%; top: -40%; left: 8%; }
.cloud::after  { width: 55%; height: 140%; top: -30%; right: 8%; }
@keyframes ww-drift {
    from { transform: translateX(18vw); }
    to   { transform: translateX(-92vw); }
}

#hills-far {
    position: absolute; bottom: 26%; left: -5%; width: 110%; height: 34%;
    background: radial-gradient(120% 150% at 30% 100%, var(--ww-hill-far) 0%, var(--ww-hill-far) 60%, transparent 61%),
                radial-gradient(120% 150% at 78% 100%, #8FC94E 0%, #8FC94E 60%, transparent 61%);
    background-repeat: no-repeat;
}
#hills-near {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 30%;
    background: linear-gradient(180deg, var(--ww-hill-hi) 0%, var(--ww-hill) 100%);
    border-radius: 50% 50% 0 0 / 22% 22% 0 0;
    box-shadow: inset 0 8px 0 rgba(255,255,255,0.14);
}

#windmill { position: absolute; bottom: 28%; right: 11%; width: 72px; height: 122px; opacity: 0.96; }
.mill-tower {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 17px solid transparent; border-right: 17px solid transparent;
    border-bottom: 80px solid #EDE1C6;
    filter: drop-shadow(-3px 0 0 rgba(160,130,80,0.16));
}
.mill-cap {
    position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 15px solid transparent; border-right: 15px solid transparent;
    border-bottom: 16px solid #C4653B;
}
.mill-blades {
    position: absolute; top: 30px; left: 50%; width: 0; height: 0;
    transform: translate(-50%, -50%);
    animation: ww-spin 11s linear infinite;
}
.mill-blades span {
    position: absolute; top: 0; left: 0; width: 9px; height: 30px;
    background: linear-gradient(180deg, #FBF4E2, #DFC998);
    border: 1.5px solid #C79C5C; border-radius: 3px;
    transform-origin: 4.5px 0;
}
.mill-blades span:nth-child(1) { transform: translate(-4.5px,0) rotate(0deg); }
.mill-blades span:nth-child(2) { transform: translate(-4.5px,0) rotate(90deg); }
.mill-blades span:nth-child(3) { transform: translate(-4.5px,0) rotate(180deg); }
.mill-blades span:nth-child(4) { transform: translate(-4.5px,0) rotate(270deg); }
.mill-hub {
    position: absolute; top: 30px; left: 50%; transform: translate(-50%,-50%);
    width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #F4A72C, #C4653B);
    box-shadow: 0 0 0 2px #EDE1C6;
}

/* mid-ground rail/track */
#rail { position: absolute; bottom: 8%; left: -4%; width: 108%; height: 60px; }
#rail-ties {
    position: absolute; bottom: 6px; left: 0; width: 100%; height: 20px;
    background: repeating-linear-gradient(90deg, #7A4A22 0 10px, transparent 10px 46px);
    opacity: 0.6;
    transform: perspective(200px) rotateX(24deg);
    transform-origin: bottom;
}
.rail-line { position: absolute; left: 0; width: 100%; height: 6px; border-radius: 4px; background: linear-gradient(90deg, #A98B6A, #7C6247); }
.rail-top { bottom: 24px; }
.rail-bottom { bottom: 4px; height: 7px; }

#grass-fringe {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 46px;
    background:
        radial-gradient(8px 20px at 5% 100%, var(--ww-hill) 60%, transparent 61%),
        radial-gradient(8px 26px at 14% 100%, var(--ww-hill-hi) 60%, transparent 61%),
        radial-gradient(8px 18px at 23% 100%, var(--ww-hill) 60%, transparent 61%),
        radial-gradient(8px 24px at 88% 100%, var(--ww-hill-hi) 60%, transparent 61%),
        radial-gradient(8px 20px at 95% 100%, var(--ww-hill) 60%, transparent 61%);
    background-repeat: no-repeat;
    pointer-events: none;
}

/* ══════════════ Star jar ══════════════ */

#star-jar {
    position: fixed; left: 14px; bottom: 12px; z-index: 30;
    width: 74px; height: 96px; text-align: center;
    transition: transform 0.3s;
}
#jar-glass {
    position: absolute; bottom: 0; left: 0; width: 74px; height: 78px;
    border-radius: 14px 14px 20px 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(190,225,240,0.5));
    border: 3px solid rgba(255,255,255,0.8);
    box-shadow: inset -6px -6px 12px rgba(120,150,170,0.18), 0 5px 12px rgba(90,60,130,0.18);
    overflow: hidden;
}
#jar-stars { position: absolute; inset: 0; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; gap: 1px; padding: 4px; }
#jar-stars .jstar { font-size: 20px; line-height: 1; animation: ww-drop-in 0.5s cubic-bezier(0.3,1.5,0.5,1) backwards; }
@keyframes ww-drop-in { from { transform: translateY(-70px) scale(0.4) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
#jar-lid {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 62px; height: 16px; border-radius: 8px;
    background: linear-gradient(180deg, #F4A72C, #E8951C);
    box-shadow: 0 3px 6px rgba(90,60,130,0.2);
}
#jar-count { position: absolute; bottom: -2px; left: 0; width: 100%; font-size: 0.7rem; font-weight: bold; color: var(--ww-ink); }

/* ══════════════ Stage ══════════════ */

#stage {
    position: relative; z-index: 10;
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    gap: clamp(4px, 1.4vh, 14px);
    padding: clamp(8px, 2vh, 20px) 8px 6px;
    touch-action: none;
    overflow: hidden;
}
body.mode-start #stage { pointer-events: none; }

/* ── wagon scene ── */
#wagon-scene {
    position: relative;
    width: min(560px, 94vw);
    height: clamp(210px, 34vh, 320px);
    flex: 0 0 auto;
    margin-top: clamp(0px, 1.5vh, 18px);
    transition: transform 0.2s;
}
#wagon {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; height: 78%;
}
.wheel { transform-box: fill-box; }
.lantern { transform-box: fill-box; animation: ww-swing 3.4s ease-in-out infinite; }
@keyframes ww-swing { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.lantern-glow { opacity: 0.55; }

#woolly {
    position: absolute; bottom: 20%; left: -1%;
    width: clamp(150px, 30%, 210px); height: auto;
    z-index: 3;
    transform-origin: bottom center;
}
.wool-body { animation: ww-jiggle 3.6s ease-in-out infinite; transform-origin: 105px 150px; }
@keyframes ww-jiggle { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.02,0.985); } }
.woolly-face { transform-origin: 105px 100px; }
.eyes .eye { transform-box: fill-box; transform-origin: center; animation: ww-blink 5s ease-in-out infinite; }
@keyframes ww-blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
.ear { transform-box: fill-box; transform-origin: 90% 50%; }
.ear-l { animation: ww-earflick 6s ease-in-out infinite; }
.ear-r { transform-origin: 10% 50%; animation: ww-earflick 6s ease-in-out infinite 0.4s; }
@keyframes ww-earflick { 0%,88%,100% { transform: rotate(0); } 92% { transform: rotate(-14deg); } 96% { transform: rotate(6deg); } }
.woolly-hoof { transform-box: fill-box; animation: ww-hooftap 4.5s ease-in-out infinite; }
@keyframes ww-hooftap { 0%,84%,100% { transform: rotate(0); } 90% { transform: rotate(-10deg); } 95% { transform: rotate(-4deg); } }

/* Woolly reactions */
#woolly.woolly-wave .woolly-hoof { animation: ww-wave 0.7s ease-in-out 3; }
@keyframes ww-wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-42deg); } 75% { transform: rotate(-20deg); } }
#woolly.woolly-happy { animation: ww-happy 0.5s ease-in-out 2; }
@keyframes ww-happy { 0%,100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-12px) rotate(-3deg); } 70% { transform: translateY(-4px) rotate(2deg); } }
#woolly.woolly-point .woolly-hoof { transform: rotate(-38deg); }
#woolly.woolly-lean { animation: ww-lean 1.4s ease-in-out; }
@keyframes ww-lean { 0%,100% { transform: translateX(0) rotate(0); } 40% { transform: translateX(16px) rotate(4deg); } }
#woolly.woolly-look { animation: ww-look 0.8s ease-in-out; }
@keyframes ww-look { 0%,100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-5deg) translateY(-3px); } 65% { transform: rotate(3deg); } }

/* Woolly roll-in for round start */
#woolly.rolling-in { animation: ww-rollin 1s cubic-bezier(0.2,0.8,0.3,1); }
@keyframes ww-rollin { from { transform: translateX(-70vw); } to { transform: translateX(0); } }
#wagon-scene.rolling-in #wagon { animation: ww-rollin 1s cubic-bezier(0.2,0.8,0.3,1); }

/* steam puffs */
#steam { position: absolute; top: 2%; right: 16%; width: 60px; height: 90px; pointer-events: none; z-index: 2; }
.puff {
    position: absolute; bottom: 0; left: 10px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,0.9);
    animation: ww-puff 1.5s ease-out forwards;
}
@keyframes ww-puff {
    0% { transform: translate(0,0) scale(0.5); opacity: 0.9; }
    100% { transform: translate(28px,-80px) scale(1.7); opacity: 0; }
}

/* ── picture card + easel ── */
#card-zone {
    position: absolute; top: 3%; right: 6%;
    width: clamp(120px, 24%, 168px);
    z-index: 4;
    transition: opacity 0.3s;
}
body.mode-start #card-zone { opacity: 0; }
#easel { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; }
.easel-leg {
    position: absolute; bottom: -30%; width: 8px; height: 44%;
    background: linear-gradient(180deg, #B4712F, #8A5A2B); border-radius: 4px;
}
.easel-leg.leg-l { left: 20%; transform: rotate(12deg); }
.easel-leg.leg-r { right: 20%; transform: rotate(-12deg); }
#picture-card {
    position: relative;
    width: 100%; aspect-ratio: 1 / 1;
    background: linear-gradient(160deg, #FFFDF7, #FFF1D8);
    border: 6px solid #FFF; border-radius: 18px;
    box-shadow: 0 10px 22px rgba(90,60,130,0.24), inset 0 0 0 3px #F4D9A6;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    transition: transform 0.25s;
}
#picture-card.card-in { animation: ww-card-in 0.55s cubic-bezier(0.2,1.3,0.4,1); }
@keyframes ww-card-in { from { transform: translateY(-40px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
#picture-card.card-off { animation: ww-card-off 1.5s cubic-bezier(0.4,0,0.7,1) forwards; }
@keyframes ww-card-off {
    0% { transform: translateX(0) rotate(0); }
    18% { transform: translateX(0) translateY(-6px) rotate(-3deg); }
    100% { transform: translateX(130vw) rotate(10deg); }
}
#picture-art { width: 84%; height: 84%; }
#picture-art svg { width: 100%; height: 100%; display: block; }
#picture-card.pic-cheer #picture-art { animation: ww-cheer 0.5s ease-in-out 3; }
@keyframes ww-cheer { 0%,100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-10px) rotate(-4deg); } 70% { transform: translateY(-3px) rotate(3deg); } }

/* ── slots rail ── */
#slots-rail {
    position: relative; z-index: 12;
    flex: 0 0 auto;
    padding: 10px 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, #D69A5C, var(--ww-wood));
    border: 4px solid var(--ww-wood-dk);
    box-shadow: 0 8px 18px rgba(90,60,130,0.2), inset 0 3px 0 rgba(255,255,255,0.18);
    max-width: 96vw;
}
#slots { display: flex; gap: clamp(8px, 1.6vw, 16px); align-items: center; justify-content: center; }
.slot {
    position: relative;
    width: var(--slot); height: var(--slot);
    border-radius: 16px;
    background: radial-gradient(circle at 50% 38%, #7A4E24, #653D18);
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.45), inset 0 -3px 0 rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.2s;
}
.slot::after {
    content: ''; position: absolute; inset: 8px;
    border-radius: 10px; border: 2px dashed rgba(255,255,255,0.22);
}
.slot.glow {
    animation: ww-slotglow 1.2s ease-in-out infinite;
}
@keyframes ww-slotglow {
    0%,100% { box-shadow: inset 0 6px 12px rgba(0,0,0,0.45), 0 0 0 0 rgba(252,191,73,0.7); }
    50% { box-shadow: inset 0 6px 12px rgba(0,0,0,0.45), 0 0 28px 8px rgba(252,191,73,0.95); }
}
.slot.near { box-shadow: inset 0 6px 12px rgba(0,0,0,0.45), 0 0 34px 12px rgba(252,191,73,1); }
.slot.near::after { border-color: rgba(255,255,255,0.5); }
.slot.filled::after { display: none; }
.slot .peg {
    position: absolute; width: 84%; height: 84%; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; color: #fff;
    font-size: calc(var(--slot) * 0.5);
    box-shadow: inset 0 3px 0 rgba(255,255,255,0.4), inset 0 -5px 8px rgba(0,0,0,0.22), 0 3px 6px rgba(0,0,0,0.25);
    animation: ww-peg-in 0.3s cubic-bezier(0.3,1.6,0.5,1);
}
@keyframes ww-peg-in { 0% { transform: scale(1.3); } 60% { transform: scale(0.9); } 100% { transform: scale(1); } }
.slot .peg.vowel { background: linear-gradient(160deg, #FF95BD, var(--ww-vowel)); }
.slot .peg.vowelo { background: linear-gradient(160deg, #FFA24D, var(--ww-vowel2)); }
.slot .peg.cons { background: linear-gradient(160deg, #38C6E8, var(--ww-cons)); }
.slot.lightup .peg { animation: ww-lightup 0.5s ease; }
@keyframes ww-lightup { 0%,100% { filter: none; } 50% { filter: brightness(1.5) drop-shadow(0 0 12px #fff); transform: scale(1.12); } }

/* ── hay tray + tiles ── */
#hay-tray {
    position: relative; z-index: 11;
    flex: 0 0 auto;
    width: min(772px, 97vw);
    min-height: calc(var(--tile) + 30px);
    margin-top: auto; margin-bottom: 4px;
    padding: 14px 14px 12px;
    border-radius: 22px 22px 16px 16px;
    background:
        repeating-linear-gradient(85deg, rgba(232,161,31,0.5) 0 3px, transparent 3px 9px),
        linear-gradient(180deg, #FBCB5E, var(--ww-hay));
    border: 4px solid var(--ww-hay-dk);
    box-shadow: 0 -4px 16px rgba(90,60,130,0.14), inset 0 4px 0 rgba(255,255,255,0.25);
}
#hay-bale { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; }
.twine { position: absolute; top: 0; bottom: 0; width: 7px; background: linear-gradient(90deg, #C98A2C, #E8B04A, #C98A2C); opacity: 0.55; }
.twine-1 { left: 26%; }
.twine-2 { left: 72%; }
#hay { position: relative; display: flex; flex-wrap: wrap; gap: clamp(8px, 1.6vw, 16px); align-items: center; justify-content: center; min-height: var(--tile); }
.hay-cell { width: var(--tile); height: var(--tile); border-radius: 12px; }

#tiles { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.tile {
    position: absolute; top: 0; left: 0;
    width: var(--tile); height: var(--tile);
    border: none; padding: 0;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; color: #fff;
    font-size: calc(var(--tile) * 0.52);
    cursor: grab;
    pointer-events: auto;
    will-change: transform;
    -webkit-text-stroke: 1px rgba(0,0,0,0.12);
    text-shadow: 0 2px 0 rgba(0,0,0,0.18);
    box-shadow: inset 0 4px 0 rgba(255,255,255,0.45), inset 0 -6px 10px rgba(0,0,0,0.22), 0 6px 12px rgba(90,60,130,0.28);
    touch-action: none;
    transition: filter 0.15s;
}
.tile::before {
    content: ''; position: absolute; inset: 0; border-radius: 15px;
    background: repeating-linear-gradient(115deg, rgba(255,255,255,0.08) 0 6px, rgba(0,0,0,0.05) 6px 12px);
    pointer-events: none; opacity: 0.5;
}
.tile > span { position: relative; z-index: 1; }
.tile.vowel  { background: linear-gradient(160deg, #FF95BD 0%, var(--ww-vowel) 100%); }
.tile.vowelo { background: linear-gradient(160deg, #FFA24D 0%, var(--ww-vowel2) 100%); }
.tile.cons   { background: linear-gradient(160deg, #38C6E8 0%, var(--ww-cons) 100%); }
.tile.wiggle { animation: ww-tilewiggle 1.1s ease-in-out infinite; }
@keyframes ww-tilewiggle { 0%,100% { rotate: -4deg; } 50% { rotate: 4deg; } }
.tile.rescue { animation: ww-rescue 0.6s ease-in-out infinite; }
@keyframes ww-rescue { 0%,100% { filter: brightness(1); box-shadow: inset 0 4px 0 rgba(255,255,255,0.45), inset 0 -6px 10px rgba(0,0,0,0.22), 0 0 0 0 rgba(255,255,255,0.9); } 50% { filter: brightness(1.35); box-shadow: inset 0 4px 0 rgba(255,255,255,0.45), 0 0 22px 8px rgba(255,247,140,0.95); } }
.tile.lifted { cursor: grabbing; z-index: 60; filter: drop-shadow(0 14px 14px rgba(60,40,90,0.4)); }
.tile.selected { z-index: 60; filter: drop-shadow(0 14px 14px rgba(60,40,90,0.4)) brightness(1.08); }
.tile.placed { pointer-events: none; cursor: default; }
.tile.snap { animation: ww-snap 0.3s cubic-bezier(0.3,1.5,0.5,1); }
@keyframes ww-snap { 0% { transform-origin: center; } 40% { scale: 1.18 0.86; } 70% { scale: 0.92 1.08; } 100% { scale: 1 1; } }
.tile.bounce { animation: ww-tbounce 0.4s ease; }
@keyframes ww-tbounce { 0%,100% { filter: none; } 30% { filter: brightness(1.15); } }

.sparkle-burst { position: absolute; z-index: 55; font-size: 1.6rem; pointer-events: none; animation: ww-sparkle 0.7s ease-out forwards; }
@keyframes ww-sparkle { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(1.9) translateY(-24px); opacity: 0; } }
.dust-puff { position: absolute; z-index: 45; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(210,180,120,0.75), transparent 70%); pointer-events: none; animation: ww-dust 0.6s ease-out forwards; }
@keyframes ww-dust { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }

/* ══════════════ Woolly speech bubble ══════════════ */
#woolly-bubble {
    position: fixed; left: 12px; top: 84px; z-index: 70;
    max-width: min(58vw, 320px);
    background: #fff; color: var(--ww-ink);
    padding: 11px 16px; border-radius: 18px;
    font-size: clamp(0.86rem, 2.5vw, 1.1rem); font-weight: bold;
    box-shadow: 0 8px 22px rgba(90,60,130,0.25);
    border: 3px solid var(--ww-hay);
    animation: gk-pop-in 0.3s ease-out;
}
#woolly-bubble::after {
    content: ''; position: absolute; left: 40px; bottom: -14px;
    border: 10px solid transparent; border-top-color: #fff;
}

/* ══════════════ Start screen ══════════════ */
#start-screen {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.25), rgba(120,150,170,0.28));
    backdrop-filter: blur(2px);
    transition: opacity 0.4s;
}
body:not(.mode-start) #start-screen { opacity: 0; pointer-events: none; }
#start-card {
    position: relative;
    background: linear-gradient(170deg, #FFFDF8, #FFF3DC);
    border-radius: 32px; padding: clamp(20px, 3vh, 34px) clamp(24px, 5vw, 52px);
    text-align: center;
    box-shadow: 0 24px 60px rgba(90,60,130,0.32), inset 0 0 0 4px #fff;
    border: 5px solid var(--ww-hay);
    max-width: min(92vw, 480px);
}
#title-badge {
    font-size: 3.4rem; line-height: 1;
    filter: drop-shadow(0 4px 6px rgba(90,60,130,0.25));
    animation: gk-bob 2.6s ease-in-out infinite;
}
#game-title {
    font-size: clamp(1.8rem, 6.5vw, 2.8rem); line-height: 1.02;
    color: var(--ww-wood-dk); margin: 6px 0 4px;
    text-shadow: 0 2px 0 #fff, 0 4px 0 rgba(202,138,75,0.4);
}
#tagline { font-size: clamp(0.92rem, 3vw, 1.15rem); color: var(--ww-ink); margin-bottom: 16px; }
#btn-start { font-size: clamp(1.2rem, 4.4vw, 1.6rem); }
#star-row { margin: 14px 0 8px; font-size: 1.3rem; font-weight: bold; color: var(--ww-wood-dk); }
#level-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lvl-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 96px; min-height: 66px; padding: 8px 10px;
    border: 3px solid var(--ww-wood-dk); border-radius: 16px;
    background: #fff; color: var(--ww-wood-dk); cursor: pointer;
    transition: transform 0.15s, opacity 0.2s;
}
.lvl-btn .lvl-num { font-size: 1.3rem; font-weight: 900; }
.lvl-btn .lvl-name { font-size: 0.72rem; font-weight: bold; }
.lvl-btn:hover:not(:disabled) { transform: translateY(-2px); }
.lvl-btn.active { background: linear-gradient(160deg, var(--ww-hay), #F4A72C); color: #fff; box-shadow: 0 6px 14px rgba(244,167,44,0.5); }
.lvl-btn.locked { opacity: 0.42; cursor: default; }
.lvl-btn.locked::after { content: '🔒'; font-size: 0.9rem; }

.title-spark { position: fixed; font-size: 2rem; z-index: 101; pointer-events: none; }
.title-spark.s1 { top: 18%; left: 20%; }
.title-spark.s2 { top: 24%; right: 18%; }
.title-spark.s3 { bottom: 20%; left: 26%; font-size: 1.6rem; }

/* ══════════════ Info popover ══════════════ */
#info-btn {
    position: fixed; left: 12px; top: 12px; z-index: 120;
    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(90,60,130,0.25);
    transition: transform 0.15s;
}
#info-btn:hover { transform: scale(1.1); }
#info-overlay {
    position: fixed; inset: 0; z-index: 130;
    display: flex; align-items: center; justify-content: center;
    background: rgba(74,59,92,0.5); animation: gk-fade-in 0.25s ease;
    padding: 18px;
}
#info-card { max-width: min(94vw, 480px); text-align: left; max-height: 90vh; overflow-y: auto; }
#info-card h2 { color: var(--ww-wood-dk); margin-bottom: 10px; font-size: 1.4rem; }
#info-card p { margin-bottom: 10px; font-size: clamp(0.9rem, 2.6vw, 1.02rem); line-height: 1.4; color: var(--ww-ink); }
#info-card .info-tip { background: var(--ww-sun); border-radius: 12px; padding: 10px 12px; font-size: 0.9rem; }
#info-close { display: block; margin: 14px auto 0; background: linear-gradient(135deg, var(--ww-hay), #F4A72C); box-shadow: 0 6px 18px rgba(244,167,44,0.5); }

/* ══════════════ Win / roll-off states ══════════════ */
body.rolling .wheel { animation: ww-spin 0.5s linear infinite; }
body.rolling .lantern-glow { opacity: 1; filter: drop-shadow(0 0 10px #FFF3B0); animation: ww-flare 0.4s ease-in-out infinite alternate; }
@keyframes ww-flare { from { opacity: 0.6; } to { opacity: 1; } }

/* ══════════════ Reduced motion ══════════════ */
@media (prefers-reduced-motion: reduce) {
    #sun-rays, .cloud, .mill-blades, .lantern, .wool-body, .eyes .eye,
    .ear-l, .ear-r, .woolly-hoof, #title-badge, .tile.wiggle, .tile.rescue,
    .slot.glow { animation: none !important; }
    .slot.glow { box-shadow: inset 0 6px 12px rgba(0,0,0,0.45), 0 0 20px 5px rgba(252,191,73,0.9); }
    #picture-card.card-off { animation-duration: 0.3s; }
}

/* ══════════════ Small-height tweaks ══════════════ */
@media (max-height: 680px) {
    #wagon-scene { height: clamp(170px, 30vh, 220px); }
    :root { --tile: clamp(64px, 10vw, 82px); --slot: clamp(70px, 11vw, 88px); }
}

/* On narrow screens the hay tray spans nearly edge-to-edge, so lift the star
   jar up above it (into the meadow band) instead of over the letter tiles. */
@media (max-width: 860px) {
    #star-jar { bottom: 150px; }
}