/* Luna's Lemonade Stand — game styles. GameKit tokens loaded first. */

:root {
    --ls-sky-top: #BFE7FB;
    --ls-sky-bot: #FFF3D6;
    --ls-wood: #D79A5B;
    --ls-wood-dark: #B4763F;
    --ls-wood-light: #E9B778;
    --ls-cream: #FFF8EC;
    --ls-red: #E63946;
}

html, body { overflow: hidden; }
body { background: var(--ls-sky-top); }

.screen {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

/* ═══════════ Backdrop — sunny sky, moving sun, hills ═══════════ */

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

.bk-sky {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, var(--ls-sky-top) 0%, #DDF1FC 46%, var(--ls-sky-bot) 100%);
}
.bk-glow {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(255,180,90,0) 30%, rgba(255,150,70,.35) 78%, rgba(230,110,60,.5) 100%);
    opacity: .2;
    transition: opacity 1.2s ease;
}

.bk-sun { position: absolute; top: 60%; left: 8%; width: clamp(96px, 13vw, 160px); transition: left 1.4s cubic-bezier(.4,0,.4,1), top 1.4s cubic-bezier(.4,0,.4,1); }
.sun-svg { width: 100%; animation: ls-sunspin 90s linear infinite; }
@keyframes ls-sunspin { to { transform: rotate(360deg); } }

.bk-cloud {
    position: absolute;
    width: 140px; height: 42px;
    background: #fff; border-radius: 42px;
    opacity: .9;
    filter: drop-shadow(0 4px 6px rgba(120, 150, 190, .12));
    animation: ls-drift linear infinite;
}
.bk-cloud::before, .bk-cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.bk-cloud::before { width: 58px; height: 58px; left: 20px; top: -28px; }
.bk-cloud::after  { width: 42px; height: 42px; right: 24px; top: -18px; }
.bc1 { top: 9%;  transform: scale(.9);  animation-duration: 100s; animation-delay: -30s; }
.bc2 { top: 17%; transform: scale(1.15); animation-duration: 135s; animation-delay: -85s; opacity: .72; }
.bc3 { top: 5%;  transform: scale(.62); animation-duration: 78s;  animation-delay: -50s; opacity: .6; }
@keyframes ls-drift { from { left: -200px; } to { left: 105vw; } }

.bk-hills { position: absolute; left: 0; right: 0; }
.bk-far  { bottom: 20%; height: 30%; }
.bk-near { bottom: 0;   height: 30%; }
.bk-hills svg { width: 100%; height: 100%; display: block; }

/* ═══════════ Title screen ═══════════ */

.title-inner {
    flex: 1;
    display: grid;
    grid-template-areas: "top luna" "controls luna";
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    justify-items: center;
    padding: clamp(10px, 4vh, 40px) 4vw;
    row-gap: 8px;
}
.t-top { grid-area: top; text-align: center; align-self: end; }
.t-luna { grid-area: luna; align-self: center; }
.t-controls { grid-area: controls; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.game-title {
    font-size: clamp(2.4rem, 6.6vw, 4.4rem);
    line-height: 1.02;
    background: linear-gradient(100deg, #F77F00 5%, #FCBF49 34%, #7CB518 62%, #00B4D8 88%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 0 rgba(255,255,255,.9)) drop-shadow(0 6px 14px rgba(90,60,130,.24));
}
.tagline {
    margin-top: 10px;
    font-size: clamp(.95rem, 2.3vw, 1.25rem);
    font-weight: bold;
    color: var(--gk-text);
    background: rgba(255,255,255,.75);
    border-radius: 30px;
    padding: 6px 18px;
    display: inline-block;
    box-shadow: 0 3px 10px rgba(90,60,130,.12);
}
#title-luna { width: clamp(180px, 25vw, 300px); animation: gk-bob 2.8s ease-in-out infinite; }
#title-luna .luna-svg { width: 100%; }

.start-btn {
    min-height: 84px;
    padding: 16px 60px;
    font-size: clamp(1.6rem, 4.4vw, 2.3rem);
    font-weight: bold;
    color: #fff;
    border: none; cursor: pointer;
    border-radius: 60px;
    background: linear-gradient(135deg, #FCBF49 0%, #F77F00 100%);
    box-shadow: 0 10px 26px rgba(247, 127, 0, .45), inset 0 -5px 0 rgba(0,0,0,.12);
    transition: transform .15s;
}
.start-btn .btn-pulse { display: inline-block; animation: ls-pulse 1.6s ease-in-out infinite; }
.start-btn:active { transform: scale(.94); }
@keyframes ls-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }

.star-pill {
    min-height: 50px;
    display: flex; align-items: center;
    padding: 6px 22px;
    font-size: 1.25rem; font-weight: bold;
    background: rgba(255,255,255,.9);
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(90,60,130,.16);
}

#level-row { display: flex; gap: 16px; }
.lvl-btn {
    position: relative;
    width: 92px; height: 100px;
    border: none; cursor: pointer;
    border-radius: 22px;
    background: linear-gradient(160deg, #FFFFFF, #FFF0D6);
    box-shadow: 0 6px 16px rgba(90,60,130,.2), inset 0 -4px 0 rgba(90,60,130,.08);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    transition: transform .15s;
}
.lvl-btn:active { transform: scale(.93); }
.lvl-num { font-size: 1.3rem; font-weight: bold; color: var(--gk-orange); line-height: 1; }
.lvl-ic { width: 46px; height: 40px; display: flex; align-items: center; justify-content: center; }
.lvl-ic svg { width: 100%; height: 100%; }
.lvl-stars { font-size: .8rem; letter-spacing: 1px; }
.lvl-stars .dim { filter: grayscale(1) opacity(.4); }
.lvl-btn.locked { filter: grayscale(.85); opacity: .75; }
.lvl-btn .lvl-lock { display: none; }
.lvl-btn.locked .lvl-lock {
    display: flex; position: absolute; inset: 0;
    align-items: center; justify-content: center;
    font-size: 2rem; background: rgba(255,255,255,.45); border-radius: 22px;
}
.lvl-btn.just-unlocked { animation: ls-unlock 1s ease-in-out 3; }
@keyframes ls-unlock {
    0%, 100% { box-shadow: 0 6px 16px rgba(90,60,130,.2); transform: scale(1); }
    50% { box-shadow: 0 0 30px 8px rgba(252,191,73,.85); transform: scale(1.12); }
}
.lvl-btn.shake { animation: ls-shake .5s ease-in-out; }
@keyframes ls-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-7px) rotate(-3deg); } 75% { transform: translateX(7px) rotate(3deg); }
}

.info-btn {
    position: fixed;
    left: 14px; bottom: 14px;
    z-index: 30;
    width: 56px; height: 56px;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,.92);
    box-shadow: 0 4px 12px rgba(90,60,130,.25);
    font-size: 1.5rem; cursor: pointer;
    transition: transform .15s;
}
.info-btn:active { transform: scale(.9); }

/* ═══════════ Luna character rig ═══════════ */

.luna-svg { display: block; overflow: visible; }
.luna-eyes { animation: ls-blink 3.6s infinite; transform-box: fill-box; transform-origin: center 42%; }
@keyframes ls-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.luna-arm { transform-box: fill-box; transform-origin: 104px 108px; animation: ls-wave 1.6s ease-in-out infinite; }
@keyframes ls-wave { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(16deg); } }

/* ═══════════ Play screen layout ═══════════ */

#screen-play { z-index: 10; }

#daybar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 180px 4px 16px; /* right space for the GameKit HUD */
    min-height: 60px;
}
#served-dots {
    display: flex; gap: 8px;
    background: rgba(255,255,255,.82);
    padding: 7px 14px;
    border-radius: 40px;
    box-shadow: 0 4px 12px rgba(90,60,130,.15);
}
.serve-dot {
    width: 40px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    filter: grayscale(1) opacity(.35);
    transition: filter .3s, transform .3s;
}
.serve-dot svg { width: 34px; }
.serve-dot.done { filter: none; animation: ls-dot-pop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes ls-dot-pop { from { transform: scale(.2) rotate(-18deg); } to { transform: scale(1) rotate(0); } }

#scene {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#awning { position: absolute; top: 0; left: 0; right: 0; height: clamp(46px, 9%, 72px); z-index: 6; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(90,60,130,.2)); }
.awning-svg { width: 100%; height: 100%; display: block; }

#sign { position: absolute; top: clamp(38px, 7.5%, 66px); left: 50%; transform: translateX(-50%); width: clamp(150px, 24vw, 224px); z-index: 7; pointer-events: none; animation: gk-bob 3.4s ease-in-out infinite; }
.sign-svg { width: 100%; }

/* Luna behind the counter */
#luna { position: absolute; z-index: 2; right: 20%; bottom: 20px; width: clamp(120px, 15vw, 172px); }
#luna .luna-svg { width: 100%; }

/* Customer in front of the stand */
#customer { position: absolute; z-index: 9; left: clamp(4px, 3vw, 52px); bottom: 4%; width: clamp(118px, 15vw, 172px); }
#customer-art { width: 100%; }
#customer-art .cust-svg { width: 100%; }
#customer.walk-in { animation: ls-walk-in .6s cubic-bezier(.2,1.2,.4,1); }
@keyframes ls-walk-in { from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.cust-all { transform-box: fill-box; transform-origin: bottom center; }
#customer .cust-svg { animation: ls-cust-bob 2.6s ease-in-out infinite; }
@keyframes ls-cust-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.cust-paw { transform-box: fill-box; transform-origin: 82px 108px; animation: ls-wave 1.7s ease-in-out infinite; }
#customer-art.sad .cust-head { animation: ls-headshake .6s ease-in-out; transform-box: fill-box; transform-origin: center; }
@keyframes ls-headshake { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-5px) rotate(-4deg); } 75% { transform: translateX(5px) rotate(4deg); } }

#speech {
    position: absolute;
    bottom: calc(100% - 6px);
    left: 8%;
    min-width: 84px; max-width: clamp(120px, 20vw, 210px);
    background: #fff;
    border-radius: 20px 20px 20px 6px;
    padding: 10px 14px;
    box-shadow: 0 6px 16px rgba(90,60,130,.24);
    z-index: 12;
    animation: gk-pop-in .35s cubic-bezier(.2,1.4,.4,1);
}
#speech::after {
    content: '';
    position: absolute; left: 16px; bottom: -12px;
    border: 8px solid transparent;
    border-top-color: #fff; border-left-color: #fff;
}
.bub-cups { display: flex; gap: 4px; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.bub-cup { width: clamp(22px, 3vw, 32px); display: block; }
.bub-cup svg { width: 100%; display: block; }

#pay-coin { position: absolute; right: -6%; top: 30%; width: clamp(40px, 5vw, 58px); z-index: 11; animation: gk-bob 1.8s ease-in-out infinite; }
#pay-coin svg { width: 100%; }

/* Counter */
#counter { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(150px, 31vh, 210px); z-index: 5; }
#counter-top {
    position: absolute; top: 0; left: 0; right: 0; height: 30px; z-index: 4;
    background: linear-gradient(to bottom, var(--ls-wood-light) 0%, #D99B5C 100%);
    border-radius: 40% 40% 0 0 / 100% 100% 0 0;
    box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 4px 8px rgba(90,50,20,.25);
}
#counter::after {
    content: '';
    position: absolute; left: 0; right: 0; top: 24px; bottom: 0; z-index: 3;
    background:
        repeating-linear-gradient(90deg, transparent 0 92px, rgba(0,0,0,.06) 92px 96px),
        linear-gradient(to bottom, var(--ls-wood) 0%, var(--ls-wood-dark) 100%);
    box-shadow: inset 0 -8px 0 rgba(0,0,0,.16);
}

#btn-pitcher {
    position: absolute; z-index: 8;
    left: clamp(64px, 22%, 260px);
    bottom: calc(100% - 42px);
    width: clamp(84px, 10vw, 116px);
    height: clamp(104px, 13vw, 146px);
    background: none; border: none; padding: 0; cursor: pointer;
    transition: transform .12s;
    filter: drop-shadow(0 6px 10px rgba(90,50,20,.3));
}
#btn-pitcher .pitcher-svg { width: 100%; height: 100%; display: block; }
#btn-pitcher:active:not(:disabled) { transform: scale(.94) translateY(2px); }
#btn-pitcher.dim { opacity: .5; filter: grayscale(.4) drop-shadow(0 6px 10px rgba(90,50,20,.2)); }
#btn-pitcher:not(.dim) .pitcher-svg { animation: ls-pitcher-invite 2.6s ease-in-out infinite; transform-origin: 60% 90%; }
@keyframes ls-pitcher-invite { 0%, 88%, 100% { transform: rotate(0); } 94% { transform: rotate(-5deg); } }
#btn-pitcher.pouring .pitcher-svg { animation: ls-pour .5s ease-in-out; transform-origin: 74% 88%; }
@keyframes ls-pour { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-24deg); } }
.pitcher-slice { transform-box: fill-box; transform-origin: 52px 90px; animation: ls-float 3s ease-in-out infinite; }
@keyframes ls-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px) rotate(8deg); } }

.drop {
    position: absolute; left: 8%; top: 40%;
    width: 8px; height: 12px;
    border-radius: 50% 50% 60% 60%;
    background: #FCD349;
    transform: translateX(var(--dx, 0));
    animation: ls-drop .45s ease-in forwards;
    pointer-events: none;
}
@keyframes ls-drop { from { opacity: 1; transform: translate(var(--dx,0), 0) scale(1); } to { opacity: 0; transform: translate(var(--dx,0), 40px) scale(.6); } }

#cups {
    position: absolute; z-index: 8;
    left: 42%;
    bottom: calc(100% - 40px);
    display: flex; gap: 5px; align-items: flex-end; justify-content: flex-start;
    flex-wrap: wrap-reverse;
    max-width: 34%;
}
.cup { width: clamp(48px, 5.5vw, 56px); cursor: pointer; }
.cup svg { width: 100%; display: block; filter: drop-shadow(0 4px 5px rgba(90,50,20,.28)); }
.cup { animation: ls-cup-in .34s cubic-bezier(.2,1.6,.4,1); }
@keyframes ls-cup-in { from { transform: translateY(-14px) scale(.5); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.cup-svg .cup-fill { transform-box: fill-box; transform-origin: bottom; }
.cup.pouring .cup-fill { animation: ls-fill .5s ease-out; }
@keyframes ls-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.cup.taken { animation: ls-cup-away .5s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes ls-cup-away { to { transform: translate(-90px, -30px) scale(.7); opacity: 0; } }
#cups.wobble, #task-card.wobble { animation: ls-shake .45s ease-in-out; }

#tipjar {
    position: absolute; z-index: 8;
    right: clamp(10px, 6vw, 74px);
    bottom: calc(100% - 46px);
    width: clamp(72px, 8.5vw, 100px);
    height: clamp(94px, 11vw, 128px);
}
#tipjar .jar-art { position: absolute; inset: 0; z-index: 2; }
#tipjar .jar-art svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 5px 8px rgba(90,50,20,.28)); }
#tipjar .jar-level {
    position: absolute; left: 22%; right: 22%; bottom: 8%;
    height: 6%;
    background: linear-gradient(to bottom, #FDE07A, #F4C430);
    border-radius: 8px 8px 6px 6px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.5);
    z-index: 1;
    transition: height .6s cubic-bezier(.3,1.2,.4,1);
}

.fly-coin { position: fixed; z-index: 930; width: 44px; pointer-events: none; }
.fly-coin svg { width: 100%; display: block; }

/* ═══════════ Bottom action panel ═══════════ */

#panel {
    flex: none;
    position: relative;
    margin: 0 auto 10px;
    width: min(96vw, 920px);
    padding: 12px clamp(12px, 2.4vw, 22px);
    border-radius: 24px;
    background:
        repeating-linear-gradient(90deg, transparent 0 90px, rgba(0,0,0,.06) 90px 94px),
        linear-gradient(to bottom, var(--ls-wood-light) 0%, var(--ls-wood) 45%, var(--ls-wood-dark) 100%);
    box-shadow: 0 14px 30px rgba(90, 50, 20, .38), inset 0 3px 0 rgba(255,255,255,.35), inset 0 -6px 0 rgba(0,0,0,.18);
    display: flex; align-items: center; gap: clamp(10px, 2vw, 20px);
    z-index: 20;
}

#task-card {
    flex: 0 0 auto;
    min-width: clamp(136px, 24vw, 230px);
    background: var(--ls-cream);
    border-radius: 16px;
    padding: 10px 14px;
    box-shadow: 0 4px 10px rgba(90,50,20,.25), inset 0 2px 0 rgba(255,255,255,.6);
}
.tc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tc-label { font-size: clamp(.85rem, 2vw, 1.05rem); font-weight: bold; color: var(--gk-text); }
.tc-count { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: bold; color: var(--gk-orange); line-height: 1; }
.tc-slash { color: #C9A06A; margin: 0 2px; font-size: .8em; }
.tc-cups { display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.tc-cup { width: clamp(20px, 2.6vw, 30px); filter: grayscale(1) opacity(.4); transition: filter .25s; }
.tc-cup.done { filter: none; }
.tc-cup svg { width: 100%; display: block; }
.tc-hint { margin-top: 5px; font-size: .82rem; color: #8A6B45; display: flex; align-items: center; gap: 5px; }
.tc-mini { width: 24px; display: inline-block; vertical-align: middle; }
.tc-mini svg { width: 100%; display: block; }
.tc-sum { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.tc-chip {
    display: inline-flex; align-items: center; gap: 3px;
    background: #FFF3D6; border-radius: 12px; padding: 3px 8px;
    font-size: clamp(1rem, 2.6vw, 1.3rem); font-weight: bold; color: var(--gk-text);
}
.tc-chip.give { background: #E7F4CE; color: #4C7A10; }
.tc-op { font-size: 1.2rem; font-weight: bold; color: #8A6B45; }

#panel-action { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: clamp(10px, 2vw, 16px); flex-wrap: wrap; }
#coins { display: flex; gap: clamp(8px, 1.4vw, 12px); flex-wrap: wrap; justify-content: center; }

.coin {
    width: clamp(56px, 7vw, 74px);
    height: clamp(56px, 7vw, 74px);
    border: none; padding: 3px; cursor: pointer;
    border-radius: 50%;
    background: none;
    position: relative;
    transition: transform .12s;
    filter: drop-shadow(0 5px 8px rgba(90,50,20,.3));
}
.coin svg { width: 100%; height: 100%; display: block; }
.coin:active:not(:disabled) { transform: scale(.9) translateY(2px); }
.coin:not(.used) { animation: ls-coin-invite 2.8s ease-in-out infinite; }
@keyframes ls-coin-invite { 0%, 90%, 100% { transform: translateY(0); } 95% { transform: translateY(-4px); } }
.coin.used { opacity: .38; filter: grayscale(.5); cursor: default; }
.coin.used::after {
    content: '✓';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: bold; color: #4C7A10;
    text-shadow: 0 1px 2px #fff;
}
.coin.nope { animation: ls-nope .4s ease-in-out; }
@keyframes ls-nope { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px) rotate(-8deg); } 75% { transform: translateX(6px) rotate(8deg); } }

.confirm-btn {
    flex: 0 0 auto;
    min-width: clamp(120px, 15vw, 172px);
    min-height: 66px;
    padding: 10px 22px;
    border: none; cursor: pointer;
    border-radius: 20px;
    font-size: clamp(1.1rem, 2.6vw, 1.4rem); font-weight: bold; color: #fff;
    letter-spacing: .5px;
    text-shadow: 0 2px 0 rgba(0,0,0,.18);
    background: linear-gradient(160deg, #9AA6B2, #7A8794);
    box-shadow: 0 6px 14px rgba(60,40,20,.3), inset 0 -4px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.3);
    transition: transform .12s, background .2s;
}
.confirm-btn:disabled { cursor: default; opacity: .8; }
.confirm-btn.ready {
    background: linear-gradient(160deg, #8ACB2E, #5D9210);
    box-shadow: 0 6px 16px rgba(70,110,10,.45), inset 0 -4px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.35);
    animation: ls-ready 1.1s ease-in-out infinite;
}
.confirm-btn:active:not(:disabled) { transform: scale(.94); }
@keyframes ls-ready { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ═══════════ Ghost hand ═══════════ */

#ghost-hand {
    position: fixed;
    z-index: 800;
    width: 64px;
    pointer-events: none;
    filter: drop-shadow(0 6px 12px rgba(200, 140, 20, .45));
    animation: ls-hand-bounce .8s ease-in-out infinite;
    transition: left .4s ease-in-out, top .4s ease-in-out;
}
#ghost-hand .hand-svg { width: 100%; transform: rotate(-8deg); }
#ghost-hand::after {
    content: '';
    position: absolute; left: 50%; bottom: -4px;
    width: 30px; height: 30px; margin-left: -15px;
    border: 4px solid #fff; border-radius: 50%;
    box-shadow: 0 0 10px rgba(247, 127, 0, .5);
    animation: ls-tapring .9s ease-out infinite;
}
@keyframes ls-tapring { 0% { transform: scale(.35); opacity: .95; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes ls-hand-bounce { 0%, 100% { margin-top: 0; } 50% { margin-top: 14px; } }

/* ═══════════ Overlay (grown-ups) ═══════════ */

.overlay {
    position: fixed; inset: 0;
    z-index: 920;
    display: flex; align-items: center; justify-content: center;
    background: rgba(74, 59, 92, .5);
    animation: gk-fade-in .25s ease-out;
    padding: 16px;
}
.overlay-card {
    position: relative;
    max-width: min(560px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 24px 26px;
    animation: gk-pop-in .35s cubic-bezier(.2,1.4,.4,1);
}
.overlay-card h3 { font-size: 1.5rem; margin-bottom: 12px; color: var(--gk-orange); padding-right: 56px; }
.overlay-card p { font-size: 1.02rem; line-height: 1.5; margin-bottom: 10px; }
.close-btn {
    position: absolute; top: 12px; right: 12px;
    width: 52px; height: 52px;
    border: none; border-radius: 50%;
    background: #FFF0D6; color: var(--gk-orange);
    font-size: 1.4rem; font-weight: bold; cursor: pointer;
    transition: transform .15s;
}
.close-btn:active { transform: scale(.9); }

#info-flow {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #FFF6E5; border-radius: 16px; padding: 12px; margin-bottom: 12px;
}
.flow-step { display: flex; align-items: center; gap: 2px; }
.flow-step svg { width: 34px; height: 34px; display: block; }
.flow-step.flow-jar svg { width: 40px; height: 46px; }
.flow-eq { font-size: 1.4rem; font-weight: bold; color: #8A6B45; }

.tip-row { display: flex; gap: 12px; align-items: flex-start; background: #FFF6E5; border-radius: 16px; padding: 12px 14px; }
.tip-icons { font-size: 1.7rem; line-height: 1.2; }
.tip-row p { margin: 0; font-size: .95rem; }

/* ═══════════ Responsive ═══════════ */

@media (orientation: portrait) {
    .title-inner {
        grid-template-areas: "top" "luna" "controls";
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }
    #title-luna { width: clamp(150px, 30vw, 240px); }
    #daybar { padding: 76px 16px 4px; }
    #btn-pitcher { left: clamp(56px, 22%, 260px); }
}

@media (max-width: 900px) {
    #task-card { min-width: clamp(120px, 30vw, 200px); }
    .confirm-btn { min-width: 108px; min-height: 60px; }
    #luna { right: 16%; }
}

@media (max-height: 720px) {
    #panel { padding: 8px 14px; margin-bottom: 6px; }
    .coin { width: 54px; height: 54px; }
    .confirm-btn { min-height: 58px; }
    #counter { height: clamp(130px, 28vh, 180px); }
    .serve-dot { width: 34px; height: 30px; }
    .serve-dot svg { width: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .bk-cloud, .sun-svg, #title-luna, #sign, .luna-arm, .luna-eyes, .cust-paw,
    #customer .cust-svg, .pitcher-slice, #btn-pitcher:not(.dim) .pitcher-svg,
    .coin:not(.used), .confirm-btn.ready, .start-btn .btn-pulse, #pay-coin, #ghost-hand {
        animation: none !important;
    }
    .bk-sun { transition: none; }
}