/* Ooli's Star Sorter — game styles. Loads after shared/gamekit.css. */

:root {
    --night-top: #1E1B3C;
    --night-mid: #2A2550;
    --night-low: #4A3B7C;
    --hill: #171430;
    --cream: #FFF8EC;
    --lav: #C9BCE8;
    --gold: #FFD700;
    --gold-soft: #FFF3B0;
    --hill-h: clamp(160px, 28vh, 290px);
}

body {
    background: var(--night-top);
    overflow: hidden;
}

/* ═══════════════════════════ layered night scene ═══════════════════════════ */

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

#sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 62vw 40vh at 50% 108%, rgba(122, 96, 190, 0.34), transparent 70%),
        radial-gradient(circle at 11% 14%, rgba(255, 224, 130, 0.14) 0%, transparent 26%),
        linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 46%, var(--night-low) 100%);
}

/* twinkling micro-stars (inline delay/duration per star) */
#micro-stars { position: absolute; inset: 0; }
#micro-stars i {
    position: absolute;
    font-style: normal;
    border-radius: 50%;
    background: #FFF6DC;
    box-shadow: 0 0 6px rgba(255, 246, 220, 0.85);
    animation-name: gk-twinkle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* drifting translucent cloud bands */
.band {
    position: absolute;
    left: -60%;
    width: 220%;
    height: 130px;
    animation: band-drift linear infinite;
}
#band-a {
    top: 16%;
    animation-duration: 60s;
    background:
        radial-gradient(ellipse 330px 46px at 12% 55%, rgba(255, 248, 236, 0.06), transparent 70%),
        radial-gradient(ellipse 430px 52px at 38% 40%, rgba(201, 188, 232, 0.07), transparent 70%),
        radial-gradient(ellipse 300px 42px at 66% 60%, rgba(255, 248, 236, 0.05), transparent 70%),
        radial-gradient(ellipse 380px 50px at 90% 45%, rgba(201, 188, 232, 0.06), transparent 70%);
}
#band-b {
    top: 41%;
    animation-duration: 90s;
    animation-direction: reverse;
    background:
        radial-gradient(ellipse 400px 50px at 20% 45%, rgba(201, 188, 232, 0.05), transparent 70%),
        radial-gradient(ellipse 320px 44px at 52% 60%, rgba(255, 248, 236, 0.05), transparent 70%),
        radial-gradient(ellipse 420px 54px at 84% 40%, rgba(201, 188, 232, 0.06), transparent 70%);
}
@keyframes band-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(27%); }
}

/* an occasional shooting star */
#shooting-star {
    position: absolute;
    top: 9%;
    left: -10%;
    width: 130px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 243, 176, 0.9));
    filter: drop-shadow(0 0 6px rgba(255, 243, 176, 0.8));
    opacity: 0;
    animation: shoot 13s ease-in infinite 4s;
}
#shooting-star::after {
    content: '';
    position: absolute;
    right: -3px;
    top: -2.5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFFDF2;
}
@keyframes shoot {
    0%   { transform: translate(0, 0) rotate(16deg); opacity: 0; }
    1.5% { opacity: 1; }
    9%   { transform: translate(58vw, 17vh) rotate(16deg); opacity: 0; }
    100% { transform: translate(58vw, 17vh) rotate(16deg); opacity: 0; }
}

/* hills + sleepy house (far layer, behind everything) */
#backdrop, #front-hill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--hill-h);
}
#backdrop svg, #front-hill svg {
    display: block;
    width: 100%;
    height: 100%;
}
.win-glow { animation: window-flicker 4.4s ease-in-out infinite alternate; }
@keyframes window-flicker {
    0%   { opacity: 0.65; }
    100% { opacity: 1; }
}

/* near hill copy inside the play screen: friends pop out from behind it */
#front-hill {
    position: absolute;
    z-index: 4;
    pointer-events: none;
}

/* ═══════════════════════════ screens ═══════════════════════════ */

.screen {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

/* ── TITLE ── */

#screen-title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px calc(var(--hill-h) * 0.45);
}

#title-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(6px, 3.5vw, 56px);
}

#title-ooli { width: clamp(200px, 27vw, 320px); }
#title-ooli .ooli-svg { width: 100%; height: auto; display: block; overflow: visible; }

#title-words { text-align: center; max-width: 580px; }

#wordmark .wm-top {
    display: block;
    font-size: clamp(1.5rem, 3.6vw, 2.1rem);
    color: var(--gold-soft);
    transform: rotate(-2.5deg);
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    margin-bottom: 2px;
}
#wordmark .wm-main {
    display: block;
    font-size: clamp(2.7rem, 7.2vw, 4.5rem);
    line-height: 1.05;
    background: linear-gradient(93deg,
        #FF9CC1 4%, #FFB367 22%, #FFDF7E 40%, #B7E576 58%, #7EDDF2 76%, #D9A3F0 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 2px rgba(14, 10, 34, 0.75));
    letter-spacing: 1px;
}

#tagline {
    color: var(--lav);
    font-size: clamp(1rem, 2.6vw, 1.3rem);
    margin: 12px 0 24px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

#btn-play {
    min-width: min(280px, 70vw);
    min-height: 84px;
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    background: linear-gradient(135deg, #FCBF49 0%, #F77F00 100%);
    box-shadow: 0 8px 26px rgba(252, 191, 73, 0.45), 0 0 0 6px rgba(255, 243, 176, 0.14);
    animation: play-breathe 2.4s ease-in-out infinite;
}
@keyframes play-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}
#btn-play:hover  { animation-play-state: paused; }
#btn-play .btn-inner { display: inline-block; }

#badge-shelf {
    display: flex;
    justify-content: center;
    gap: clamp(12px, 2.5vw, 24px);
    margin-top: 26px;
}
.medal { width: clamp(58px, 7vw, 82px); }
.medal svg { width: 100%; height: auto; display: block; }
.medal:not(.earned) { opacity: 0.55; }
.medal.earned {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.55));
    animation: medal-twinkle 3s ease-in-out infinite;
}
.medal.earned:nth-child(2) { animation-delay: -1s; }
.medal.earned:nth-child(3) { animation-delay: -2s; }
@keyframes medal-twinkle {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07) rotate(3deg); }
}

/* ── LEVEL SELECT (Sky Map) ── */

#screen-levels {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 4vh, 42px);
    padding: 70px 14px calc(var(--hill-h) * 0.35);
}

#levels-title {
    color: var(--gold-soft);
    font-size: clamp(1.7rem, 4.4vw, 2.5rem);
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

#level-cards {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(14px, 3vw, 42px);
}

.level-card {
    width: clamp(200px, 23vw, 258px);
    min-height: clamp(220px, 32vh, 310px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 12px 10px 16px;
    background: linear-gradient(180deg, rgba(64, 56, 122, 0.88), rgba(36, 31, 74, 0.92));
    border: 3px solid rgba(201, 188, 232, 0.42);
    border-radius: 30px;
    box-shadow: 0 12px 30px rgba(8, 6, 24, 0.5);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.level-card:not(.locked):hover {
    transform: translateY(-6px) scale(1.03);
    border-color: rgba(255, 243, 176, 0.75);
    box-shadow: 0 16px 36px rgba(8, 6, 24, 0.6), 0 0 22px rgba(255, 243, 176, 0.18);
}
.level-card:not(.locked):active { transform: translateY(0) scale(0.97); }

.lc-badge {
    width: clamp(76px, 9vw, 100px);
    height: clamp(76px, 9vw, 100px);
    margin-top: -48px;
    padding: 7px;
    border-radius: 50%;
    background: var(--cream);
    border: 3px solid var(--lav);
    box-shadow: 0 6px 16px rgba(8, 6, 24, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lc-badge svg { width: 100%; height: 100%; display: block; }

.lc-cloud { width: 88%; margin-top: 4px; }
.lc-cloud .cloud-svg { width: 100%; height: auto; display: block; animation: bin-bob 3.6s ease-in-out infinite; }
.level-card:nth-child(2) .lc-cloud .cloud-svg { animation-delay: -1.2s; }
.level-card:nth-child(3) .lc-cloud .cloud-svg { animation-delay: -2.4s; }

.lc-stars {
    margin-top: auto;
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    letter-spacing: 2px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.lc-stars .dim { filter: grayscale(1) opacity(0.28); }

.level-card.locked {
    filter: grayscale(0.85);
    opacity: 0.82;
    cursor: pointer; /* still tappable: Ooli explains gently */
}

.lc-zzz {
    position: absolute;
    top: 16px;
    right: 20px;
    color: var(--lav);
    font-weight: bold;
}
.lc-zzz i {
    display: inline-block;
    font-style: normal;
    animation: zzz-float 2.4s ease-in-out infinite;
    opacity: 0;
}
.lc-zzz i:nth-child(1) { font-size: 1.05rem; animation-delay: 0s; }
.lc-zzz i:nth-child(2) { font-size: 1.35rem; animation-delay: 0.5s; }
.lc-zzz i:nth-child(3) { font-size: 1.7rem;  animation-delay: 1s; }
@keyframes zzz-float {
    0%   { transform: translate(0, 0); opacity: 0; }
    25%  { opacity: 0.95; }
    80%  { opacity: 0; }
    100% { transform: translate(9px, -20px); opacity: 0; }
}

.lc-medal {
    position: absolute;
    top: -16px;
    right: -12px;
    width: clamp(52px, 6vw, 66px);
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.55));
}
.lc-medal svg { width: 100%; height: auto; display: block; }

.level-card.wobble { animation: card-wobble 0.9s ease; }
@keyframes card-wobble {
    0%, 100% { transform: rotate(0); }
    18% { transform: rotate(-4deg) translateX(-6px); }
    38% { transform: rotate(3.5deg) translateX(6px); }
    58% { transform: rotate(-2.5deg) translateX(-4px); }
    78% { transform: rotate(1.5deg) translateX(3px); }
}

.level-card.attn { animation: card-attn 0.7s ease-in-out 2; }
@keyframes card-attn {
    0%, 100% { transform: scale(1); box-shadow: 0 12px 30px rgba(8, 6, 24, 0.5); }
    50% { transform: scale(1.07); box-shadow: 0 12px 30px rgba(8, 6, 24, 0.5), 0 0 30px rgba(255, 215, 0, 0.55); }
}

.level-card.wake { animation: card-wake 1.7s cubic-bezier(0.3, 1.4, 0.4, 1); }
@keyframes card-wake {
    0%   { transform: scale(1); filter: grayscale(0.85); }
    30%  { transform: scale(1.14) rotate(-3deg); filter: grayscale(0.2); }
    55%  { transform: scale(1.02) rotate(2.5deg); filter: none; }
    75%  { transform: scale(1.07) rotate(-1.5deg); }
    100% { transform: scale(1); filter: none; }
}

.lc-sparkle {
    position: absolute;
    top: 4px;
    left: 50%;
    font-size: 2.2rem;
    pointer-events: none;
    animation: sparkle-pop 1.8s ease-out forwards;
}
@keyframes sparkle-pop {
    0%   { transform: translate(-50%, 10px) scale(0); opacity: 0; }
    25%  { transform: translate(-50%, -14px) scale(1.35); opacity: 1; }
    70%  { transform: translate(-50%, -30px) scale(1); opacity: 0.9; }
    100% { transform: translate(-50%, -46px) scale(0.6); opacity: 0; }
}

#btn-back {
    position: fixed;
    top: 12px;
    left: 12px;
    width: 64px;
    height: 64px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 248, 236, 0.92);
    box-shadow: 0 4px 12px rgba(8, 6, 24, 0.45);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.15s;
}
#btn-back:hover  { transform: scale(1.1); }
#btn-back:active { transform: scale(0.92); }

/* ── PLAY ── */

/* constellation progress plate (upper sky) */
#constellation {
    position: absolute;
    top: clamp(4px, 2.5vh, 26px);
    left: 50%;
    transform: translateX(-50%);
    width: min(44vw, 480px);
    z-index: 1;
    pointer-events: none;
}
.plate { width: 100%; height: auto; display: block; overflow: visible; }

.lk-faint {
    stroke: rgba(201, 188, 232, 0.30);
    stroke-width: 2.5;
    stroke-dasharray: 1 8;
    stroke-linecap: round;
    fill: none;
}
.lk-gold {
    stroke: var(--gold);
    stroke-width: 4;
    stroke-linecap: round;
    fill: none;
    transition: stroke-dashoffset 0.6s ease;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.85));
}
.csn .core { fill: rgba(255, 243, 176, 0.30); transition: fill 0.3s; }
.csn.lit .core { fill: var(--gold); filter: drop-shadow(0 0 7px rgba(255, 215, 0, 0.95)); }
.csn .glow { transform-box: fill-box; transform-origin: center; }
.csn.flare .glow { animation: node-flare 0.75s ease-out; }
@keyframes node-flare {
    0%   { opacity: 0.95; transform: scale(0.2); }
    55%  { opacity: 0.6;  transform: scale(1.6); }
    100% { opacity: 0;    transform: scale(1); }
}

.plate-extra { opacity: 0; transition: opacity 1.4s ease; }
.plate-extra path, .plate-extra circle { stroke-dasharray: 3 7; }
.plate.reveal .plate-extra { opacity: 1; }
.plate.reveal { filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.3)); }

.plate.charm-wiggle { animation: charm-wiggle 1s ease-in-out 0.4s 2; transform-origin: 50% 60%; }
@keyframes charm-wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-3.5deg); }
    75% { transform: rotate(3.5deg); }
}
.plate.charm-rock { animation: charm-rock 1s ease-in-out 0.4s 2; transform-origin: 50% 88%; }
@keyframes charm-rock {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-4.5deg) translateY(2px); }
    75% { transform: rotate(4.5deg) translateY(2px); }
}
.plate.charm-swish { animation: charm-swish 1s ease-in-out 0.4s 2; transform-origin: 30% 50%; }
@keyframes charm-swish {
    0%, 100% { transform: skewX(0); }
    25% { transform: skewX(-4deg) translateX(5px); }
    75% { transform: skewX(4deg) translateX(-5px); }
}

/* Ooli on her crescent moon, top-left */
#play-ooli {
    position: absolute;
    top: clamp(2px, 1.5vh, 14px);
    left: clamp(4px, 1.5vw, 22px);
    width: clamp(128px, 15vw, 188px);
    z-index: 2;
    pointer-events: none;
}
#play-ooli .ooli-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Ooli rig animation moments */
.ooli-rig, .head, .wing, .moon-g { transform-box: fill-box; }
.ooli-svg .lid { opacity: 0; animation: ooli-blink 5.2s ease-in-out infinite; }
#title-ooli .lid { animation-duration: 4.4s; }
@keyframes ooli-blink {
    0%, 91%, 100% { opacity: 0; }
    93.5%, 96.5%  { opacity: 1; }
}
.wing-l { transform-origin: 85% 12%; }
#play-ooli.cheer .wing-l { animation: wing-cheer 0.9s ease; }
@keyframes wing-cheer {
    0%, 100% { transform: rotate(0); }
    28% { transform: rotate(-72deg); }
    52% { transform: rotate(-46deg); }
    74% { transform: rotate(-70deg); }
}
.head { transform-origin: 50% 82%; }
#play-ooli.tilt .head { animation: head-tilt 0.9s ease; }
@keyframes head-tilt {
    0%, 100% { transform: rotate(0); }
    35%, 70% { transform: rotate(8deg); }
}
.ooli-rig { transform-origin: 50% 50%; }
#play-ooli.lean .ooli-rig { animation: ooli-lean 1.1s ease; }
@keyframes ooli-lean {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    40%, 65% { transform: translate(26px, 8px) rotate(20deg); }
}
#play-ooli.loop .ooli-rig { animation: ooli-loop 1.8s ease-in-out; }
@keyframes ooli-loop {
    0%   { transform: translate(0, 0) rotate(0); }
    50%  { transform: translate(46px, -78px) rotate(-180deg); }
    100% { transform: translate(0, 0) rotate(-360deg); }
}
.crown-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: crown-spin 26s linear infinite;
}
@keyframes crown-spin { to { transform: rotate(360deg); } }

/* Ooli's hint bubble (shows the attribute to look for) */
#ooli-bubble {
    position: absolute;
    top: clamp(88px, 13vh, 150px);
    left: clamp(120px, 15.5vw, 200px);
    width: 88px;
    height: 88px;
    padding: 8px;
    background: var(--cream);
    border: 3px solid var(--lav);
    border-radius: 22px;
    box-shadow: 0 8px 20px rgba(8, 6, 24, 0.45);
    z-index: 6;
    pointer-events: none;
    animation: bubble-pop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}
#ooli-bubble::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 34px;
    border: 8px solid transparent;
    border-right-color: var(--lav);
}
#ooli-bubble svg { width: 100%; height: 100%; display: block; }
@keyframes bubble-pop {
    from { transform: scale(0.2); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* dotted guide arc (first friend of each level) */
#arc-layer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 7;
    opacity: 0;
    transition: opacity 0.3s;
}
#arc-layer.on { opacity: 1; }
#arc-path {
    fill: none;
    stroke: var(--gold-soft);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 0.5 15;
    animation: arc-march 0.9s linear infinite;
    filter: drop-shadow(0 0 5px rgba(255, 243, 176, 0.7));
}
@keyframes arc-march { to { stroke-dashoffset: -15.5; } }

/* the drifting sky-friend (position driven by JS transform) */
#friend {
    position: fixed;
    left: 0;
    top: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    z-index: 3;
    will-change: transform;
    transition: opacity 0.55s ease;
}
#friend.fade-out { opacity: 0; }
.friend-inner {
    display: block;
    width: 100%;
    height: 100%;
    animation: friend-sway 7s ease-in-out infinite;
}
@keyframes friend-sway {
    0%, 100% { transform: rotate(-9deg) translateY(0); }
    25%      { transform: rotate(3deg) translateY(-5px); }
    50%      { transform: rotate(9deg) translateY(0); }
    75%      { transform: rotate(-3deg) translateY(-5px); }
}
#friend.shiver .friend-inner { animation: friend-shiver 0.55s ease; }
@keyframes friend-shiver {
    0%, 100% { transform: translateX(0) rotate(0); }
    20% { transform: translateX(-7px) rotate(-5deg); }
    40% { transform: translateX(7px) rotate(5deg); }
    60% { transform: translateX(-5px) rotate(-3deg); }
    80% { transform: translateX(4px) rotate(2deg); }
}
#friend.fade-out .friend-inner { animation: friend-caught 0.7s ease forwards; }
@keyframes friend-caught {
    to { transform: translate(-30px, -26px) scale(0.25) rotate(-30deg); }
}
.friend-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 5px 14px rgba(6, 4, 20, 0.5)) drop-shadow(0 0 20px rgba(255, 243, 176, 0.28));
}
.friend-svg .face { transition: opacity 0.16s; }
.friend-svg .face-happy { opacity: 0; }
#friend.happy .face-happy { opacity: 1; }
#friend.happy .face-sleep { opacity: 0; }

/* comet tail ribbons ripple */
.tails .rib {
    transform-box: fill-box;
    transform-origin: 92% 50%;
    animation: rib-ripple 1.7s ease-in-out infinite;
}
.tails .r2 { animation-delay: -0.55s; }
.tails .r3 { animation-delay: -1.1s; }
@keyframes rib-ripple {
    0%, 100% { transform: scaleX(0.92) rotate(1.5deg); }
    50%      { transform: scaleX(1.07) rotate(-2deg); }
}

/* ── cloud-bins ── */

#bins {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(24px, 4vw, 58px);
    padding: 0 10px calc(2px + env(safe-area-inset-bottom, 0px));
    z-index: 6;
    pointer-events: none;
}

.bin {
    pointer-events: auto;
    position: relative;
    width: clamp(158px, 19.5vw, 232px);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}
.bin .cloud-svg {
    width: 100%;
    height: auto;
    display: block;
    animation: bin-bob 3.4s ease-in-out infinite;
    filter: drop-shadow(0 6px 16px rgba(6, 4, 20, 0.4));
}
.bin:nth-child(2) .cloud-svg { animation-delay: -1.1s; }
.bin:nth-child(3) .cloud-svg { animation-delay: -2.2s; }
@keyframes bin-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(66px, 7.5vw, 84px);
    height: clamp(66px, 7.5vw, 84px);
    margin: 0 auto -14px;
    padding: 5px;
    border-radius: 50%;
    background: rgba(255, 248, 236, 0.97);
    border: 3px solid var(--lav);
    box-shadow: 0 6px 16px rgba(6, 4, 20, 0.45);
    position: relative;
    z-index: 2;
    animation: badge-float 3.4s ease-in-out infinite;
}
.bin:nth-child(2) .badge { animation-delay: -1.1s; }
.bin:nth-child(3) .badge { animation-delay: -2.2s; }
@keyframes badge-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
.badge svg { width: 100%; height: 100%; display: block; }

/* cloud face states */
.cloud-svg .face { transition: opacity 0.15s; }
.cloud-svg .face-hmm, .cloud-svg .face-open { opacity: 0; }
.bin.hmm  .face-sleep, .bin.puff .face-sleep { opacity: 0; }
.bin.hmm  .face-hmm  { opacity: 1; }
.bin.puff .face-open { opacity: 1; }

/* intro pulse: "these are your clouds!" */
.bin.pulse .cloud-svg {
    animation: bin-pulse 0.6s ease;
    filter: drop-shadow(0 6px 16px rgba(6, 4, 20, 0.4)) drop-shadow(0 0 22px rgba(255, 243, 176, 0.85));
}
.bin.pulse .badge { animation: bin-pulse 0.6s ease; }
@keyframes bin-pulse {
    0%, 100% { transform: scale(1); }
    45%      { transform: scale(1.12); }
}

/* wrong tap: gentle "hmm" shake */
.bin.hmm .cloud-svg { animation: bin-shake 0.72s ease; }
@keyframes bin-shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    18% { transform: translateX(-8px) rotate(-2deg); }
    38% { transform: translateX(8px) rotate(2deg); }
    58% { transform: translateX(-6px) rotate(-1.5deg); }
    78% { transform: translateX(4px) rotate(1deg); }
}

/* receive: squash-and-stretch puff */
.bin.puff .cloud-svg { animation: bin-puff 0.68s cubic-bezier(0.3, 1.5, 0.4, 1); }
@keyframes bin-puff {
    0%   { transform: scale(1, 1); }
    28%  { transform: scale(1.17, 0.8) translateY(6px); }
    58%  { transform: scale(0.92, 1.12) translateY(-6px); }
    80%  { transform: scale(1.05, 0.96); }
    100% { transform: scale(1, 1); }
}

/* stuck twice: soft pulsing golden glow on the right cloud */
.bin.hint .cloud-svg { animation: bin-bob 3.4s ease-in-out infinite, hint-glow 1.15s ease-in-out infinite; }
@keyframes hint-glow {
    0%, 100% { filter: drop-shadow(0 6px 16px rgba(6, 4, 20, 0.4)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.35)); }
    50%      { filter: drop-shadow(0 6px 16px rgba(6, 4, 20, 0.4)) drop-shadow(0 0 26px rgba(255, 215, 0, 0.95)); }
}

/* bouncing ghost hand nudge */
#ghost-hand {
    position: fixed;
    z-index: 8;
    font-size: 64px;
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(6, 4, 20, 0.6));
    animation: hand-bounce 0.95s ease-in-out infinite;
}
@keyframes hand-bounce {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50%      { transform: translateY(16px) rotate(-2deg); }
}

/* badge flying to its level card after a win */
.fly-medal {
    position: fixed;
    left: 0;
    top: 0;
    width: 92px;
    z-index: 936;
    pointer-events: none;
    transition: transform 0.95s cubic-bezier(0.45, 0.05, 0.25, 1);
    filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.7));
}
.fly-medal svg { width: 100%; height: auto; display: block; }

/* ── for grown-ups ── */

#info-btn {
    position: fixed;
    bottom: 14px;
    left: 14px;
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 248, 236, 0.82);
    box-shadow: 0 4px 12px rgba(8, 6, 24, 0.45);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.15s;
}
#info-btn:hover  { transform: scale(1.1); }
#info-btn:active { transform: scale(0.92); }
body.scr-play #info-btn { display: none; } /* keep the play area distraction-free */

#info-overlay {
    position: fixed;
    inset: 0;
    z-index: 920;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(20, 16, 44, 0.62);
    animation: gk-fade-in 0.25s ease-out;
}
#info-card {
    max-width: 620px;
    max-height: 86vh;
    overflow: auto;
    animation: gk-pop-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#info-card h2 { color: var(--gk-purple); margin-bottom: 10px; font-size: clamp(1.3rem, 3.4vw, 1.7rem); }
#info-card p  { margin: 10px 0; line-height: 1.55; font-size: clamp(0.98rem, 2.4vw, 1.1rem); }
#info-card .info-tip {
    background: #F5EDFC;
    border-radius: 14px;
    padding: 10px 14px;
}
#info-close { width: 100%; margin-top: 10px; min-height: 64px; }

/* ═══════════════════════════ responsive ═══════════════════════════ */

@media (max-width: 820px) {
    #constellation { width: min(52vw, 420px); }
    #play-ooli { width: clamp(112px, 14vw, 150px); }
    .bin { width: clamp(150px, 21vw, 200px); }
    #bins { gap: clamp(18px, 3vw, 36px); }
    .level-card { width: clamp(196px, 27vw, 230px); }
}

@media (max-height: 720px) {
    #badge-shelf { margin-top: 14px; }
    #screen-levels { padding-top: 56px; }
}

/* ═══════════════════════════ reduced motion ═══════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .band, #shooting-star, #micro-stars i, .win-glow,
    #btn-play, .medal.earned, .friend-inner, .tails .rib,
    .bin .cloud-svg, .badge, .lc-cloud .cloud-svg, .lc-zzz i,
    #ghost-hand, .crown-ring, .ooli-svg .lid {
        animation: none;
    }
    #arc-path { animation: none; }
    .bin.hint .cloud-svg {
        animation: none;
        filter: drop-shadow(0 6px 16px rgba(6, 4, 20, 0.4)) drop-shadow(0 0 22px rgba(255, 215, 0, 0.8));
    }
}