/* Penny's Coin Carnival — deep plum carnival night, gold string lights,
   candy-stripe booths. GameKit tokens load first; this file only builds on top.
   Palette is saturated showtime — distinct from every other game's :root. */

:root {
    --cc-night-1: #3D1A56;
    --cc-night-2: #2A1140;
    --cc-night-3: #1E0C30;
    --cc-plum-low: #5C2B74;
    --cc-gold: #FFC94D;
    --cc-gold-hi: #FFE9A8;
    --cc-gold-deep: #E8A828;
    --cc-candy: #F0466B;
    --cc-candy-deep: #C22B4E;
    --cc-cream: #FFF6E8;
    --cc-teal: #4ED8C4;
    --cc-felt: #341347;
    --cc-ink: #3A1030;
    /* the four coins at true relative size (dime < penny < nickel < quarter) */
    --sz-dime: 58px;
    --sz-penny: 64px;
    --sz-nickel: 72px;
    --sz-quarter: 82px;
}

body {
    background: radial-gradient(120% 90% at 50% 0%, var(--cc-plum-low) 0%, var(--cc-night-1) 42%, var(--cc-night-2) 74%, var(--cc-night-3) 100%);
    color: var(--cc-cream);
}

.screen { position: fixed; inset: 0; overflow: hidden; }

/* ── backdrop: skyline, lights, vignette ── */

.skyline {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: clamp(120px, 26vh, 230px);
    opacity: .9; pointer-events: none;
}
.skyline svg { width: 100%; height: 100%; }

.lights {
    position: absolute; top: -4px; left: -2%; right: -2%;
    height: clamp(40px, 6.5vh, 56px);
    pointer-events: none; z-index: 1;
}
.lights svg { width: 100%; height: 100%; }
.bulb { animation: cc-twinkle 2.6s ease-in-out infinite; }
@keyframes cc-twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.vignette {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(18, 6, 30, .55) 100%);
}

/* ═══ TITLE ═══ */

.title-inner {
    position: relative; z-index: 2;
    height: 100%;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; justify-content: safe center;
    overflow-y: auto; overscroll-behavior: contain;
    gap: 10px;
    padding: max(18px, var(--gk-hud-clear-top)) 14px calc(var(--gk-corner-clear) + 4px);
    text-align: center;
}

.sign {
    position: relative;
    background: rgba(30, 10, 46, .82);
    border: 3px solid var(--cc-gold);
    border-radius: 20px;
    padding: 12px 26px 10px;
    box-shadow: 0 0 0 5px rgba(255, 201, 77, .18), 0 8px 30px rgba(10, 2, 20, .5);
}
.sign::before, .sign::after {
    content: '✦'; position: absolute; top: 50%;
    transform: translateY(-50%);
    color: var(--cc-gold); font-size: 1rem; opacity: .9;
}
.sign::before { left: 8px; }
.sign::after { right: 8px; }

h1.game-title {
    font-size: clamp(1.5rem, 6.2vw, 2.6rem);
    line-height: 1.08;
    color: var(--cc-gold);
    text-shadow: 0 2px 0 var(--cc-candy-deep), 0 5px 16px rgba(240, 70, 107, .45);
    letter-spacing: .5px;
}
h1.game-title .accent { color: var(--cc-cream); }

.tagline {
    margin-top: 3px;
    font-size: clamp(.85rem, 3.2vw, 1.05rem);
    color: var(--cc-gold-hi);
}

/* mascot + the four coins at true relative size */
.hero-row { display: flex; align-items: flex-end; gap: 4px; margin-top: -2px; }
#penny-title { width: clamp(88px, 22vw, 132px); }
#t-coins { display: flex; align-items: flex-end; gap: 4px; padding-bottom: 8px; }
#t-coins .tc { display: inline-block; filter: drop-shadow(0 4px 8px rgba(10, 2, 20, .6)); }
#t-coins .tc svg { display: block; }
#t-coins .coinbtn-dime svg { width: calc(var(--sz-dime) * .62); height: calc(var(--sz-dime) * .62); }
#t-coins .coinbtn-penny svg { width: calc(var(--sz-penny) * .62); height: calc(var(--sz-penny) * .62); }
#t-coins .coinbtn-nickel svg { width: calc(var(--sz-nickel) * .62); height: calc(var(--sz-nickel) * .62); }
#t-coins .coinbtn-quarter svg { width: calc(var(--sz-quarter) * .62); height: calc(var(--sz-quarter) * .62); }

#btn-start {
    min-height: 62px;
    padding: 12px 44px;
    background: linear-gradient(135deg, var(--cc-candy) 0%, var(--cc-gold-deep) 100%);
    box-shadow: 0 6px 22px rgba(240, 70, 107, .5);
}

/* level booths: three across, sized off the row — never a fixed min width */
#level-row {
    display: flex; gap: 10px; justify-content: center;
    width: min(100%, 400px);
}
.lvl-btn {
    position: relative;
    width: min(118px, calc((100% - 20px) / 3));
    min-width: 0;
    aspect-ratio: 10 / 10.6;
    border: 2.5px solid var(--cc-gold-deep);
    border-radius: 14px;
    background: rgba(38, 14, 56, .9);
    color: var(--cc-cream);
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    padding: 6px 4px 8px;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}
.lvl-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 201, 77, .25); }
.lvl-awning { position: absolute; top: 0; left: 0; right: 0; height: 20px; }
.lvl-awning svg { width: 100%; height: 100%; }
.lvl-icon { font-size: 1.5rem; margin-top: 12px; }
.lvl-name { font-size: clamp(.62rem, 2.4vw, .78rem); font-weight: bold; line-height: 1.15; margin-top: 2px; }
.lvl-stars { color: var(--cc-gold); font-size: .85rem; letter-spacing: 1px; margin-top: 2px; }
.lvl-stars i { font-style: normal; opacity: .28; }
.lvl-lock { font-size: .95rem; margin-top: 2px; }
.lvl-btn.locked { filter: saturate(.35) brightness(.7); }
.lvl-btn.fresh { animation: cc-fresh 1s ease-in-out 3; box-shadow: 0 0 18px rgba(255, 201, 77, .8); }
@keyframes cc-fresh {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}
.lvl-btn.wiggle { animation: cc-wiggle .5s; }
@keyframes cc-wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-4deg); }
    75% { transform: rotate(4deg); }
}

/* tickets + booth + nest */
.meta-row { display: flex; gap: 10px; align-items: center; }
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(30, 10, 46, .85);
    border: 2px solid var(--cc-gold-deep);
    border-radius: 40px;
    padding: 8px 16px;
    min-height: 48px;
    font-weight: bold; font-size: 1.05rem;
    color: var(--cc-gold-hi);
}
.pill .tk-svg { width: 34px; height: 21px; }
#btn-booth {
    min-height: 48px;
    border: 2px solid var(--cc-gold-deep);
    border-radius: 40px;
    background: linear-gradient(135deg, var(--cc-candy) 0%, var(--cc-candy-deep) 100%);
    color: #FFF; font-weight: bold; font-size: 1rem;
    padding: 8px 18px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(240, 70, 107, .4);
    transition: transform .15s;
}
#btn-booth:hover { transform: scale(1.05); }

#nest-shelf {
    display: flex; gap: 8px; align-items: center; justify-content: center;
    flex-wrap: wrap;
    max-width: min(94vw, 460px);
    min-height: 52px;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(30, 10, 46, .55);
    border: 2px dashed rgba(255, 201, 77, .4);
}
.nest-prize {
    width: 48px; height: 48px;
    border: none; border-radius: 12px;
    background: rgba(255, 233, 168, .12);
    cursor: pointer; padding: 3px;
    transition: transform .15s;
}
.nest-prize:hover { transform: scale(1.12) rotate(-4deg); }
.nest-prize svg { width: 100%; height: 100%; }
.nest-hint {
    border: none; background: none; color: var(--cc-gold-hi);
    font-family: inherit; font-size: .85rem; cursor: pointer;
    min-height: 48px; padding: 4px 8px;
}
.shine { animation: cc-shine .7s ease-out; }
@keyframes cc-shine {
    0% { transform: scale(1); filter: brightness(1); }
    40% { transform: scale(1.25) rotate(6deg); filter: brightness(1.8) drop-shadow(0 0 10px var(--cc-gold)); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* ═══ PLAY ═══ */

#screen-play { display: flex; flex-direction: column; }

#p-awning {
    position: absolute; top: 0; left: 0; right: 0;
    height: clamp(30px, 5vh, 44px);
    z-index: 0; pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(10, 2, 20, .5));
}
#p-awning svg { width: 100%; height: 100%; }
#screen-play .lights { top: clamp(24px, 4.4vh, 38px); }

#play-top {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 8px;
    padding: var(--gk-hud-clear-top) 10px 0;
}
#chip-tickets {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(30, 10, 46, .85);
    border: 2px solid var(--cc-gold-deep);
    border-radius: 30px;
    padding: 4px 12px;
    font-weight: bold; color: var(--cc-gold-hi); font-size: 1rem;
    min-height: 38px;
}
#chip-tickets .tk-svg { width: 30px; height: 18px; }
#chip-tickets.pop { animation: cc-pop .45s; }
@keyframes cc-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}
#round-dots { display: flex; gap: 5px; }
#round-dots span {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255, 233, 168, .25);
    border: 1.5px solid rgba(255, 201, 77, .5);
}
#round-dots span.done { background: var(--cc-gold); }
#round-dots span.now { background: var(--cc-candy); border-color: var(--cc-candy); }
#task-chip {
    margin-left: auto;
    background: var(--cc-cream); color: var(--cc-ink);
    border-radius: 30px; padding: 7px 14px;
    font-weight: bold; font-size: clamp(.85rem, 3.4vw, 1.05rem);
    box-shadow: 0 3px 10px rgba(10, 2, 20, .4);
}

#stage {
    position: relative; z-index: 2;
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    gap: 8px;
    padding: 6px 10px max(10px, env(safe-area-inset-bottom, 0px));
    width: min(100%, 640px);
    margin: 0 auto;
}
#stage.arrive { animation: cc-stage-in .45s ease-out; }
@keyframes cc-stage-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* stall row: Penny + the item on sale. In pay mode the whole booth cluster
   anchors to the bottom, so tall phones show carnival sky above the stall
   instead of a dead gap in the middle of the layout. */
#stall-row {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 8px; min-height: 88px;
    position: relative;
}
#stage.mode-pay #stall-row { margin-top: auto; }
#stage.mode-pay #pay-zone { flex: 0 0 auto; }
#penny-play { width: clamp(78px, 20vw, 108px); flex: 0 0 auto; }

#bubble {
    position: absolute;
    left: clamp(60px, 16vw, 96px); top: -8px;
    background: var(--cc-cream); color: var(--cc-ink);
    border-radius: 16px 16px 16px 4px;
    padding: 6px 14px;
    font-weight: bold; font-size: 1.3rem;
    box-shadow: 0 4px 12px rgba(10, 2, 20, .45);
    opacity: 0; transform: translateY(6px) scale(.85);
    transition: opacity .25s, transform .25s;
    pointer-events: none; z-index: 3;
}
#bubble.show { opacity: 1; transform: none; }

#item-spot { display: flex; align-items: center; gap: 6px; }
#item-art svg { width: clamp(58px, 15vw, 76px); height: clamp(58px, 15vw, 76px); filter: drop-shadow(0 4px 8px rgba(10, 2, 20, .5)); }
#item-name {
    display: block; text-align: center;
    font-size: .72rem; color: var(--cc-gold-hi); font-weight: bold;
    max-width: 86px;
}
#price-tag {
    position: relative;
    width: clamp(64px, 16vw, 80px);
    aspect-ratio: 9 / 10;
    border: none; background: none; cursor: pointer; padding: 0;
    transition: transform .15s;
}
#price-tag:hover { transform: scale(1.06) rotate(-3deg); }
#price-tag svg.tag-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#tag-num {
    position: absolute; left: 50%; top: 60%;
    transform: translate(-50%, -50%);
    font-size: clamp(1.15rem, 4.6vw, 1.5rem); font-weight: bold; color: var(--cc-ink);
}
#price-tag.flash { animation: cc-flash .8s; }
@keyframes cc-flash {
    0%, 100% { transform: none; }
    25% { transform: rotate(-6deg) scale(1.1); }
    60% { transform: rotate(5deg) scale(1.06); }
}
/* ── change equation felt (L3b): coin − price = ? ── */
#change-zone {
    flex: 1; min-height: 120px;
    display: flex; align-items: center; justify-content: center;
    background: var(--cc-felt);
    border: 3px solid var(--cc-gold-deep);
    border-radius: 18px;
    box-shadow: inset 0 0 26px rgba(10, 2, 20, .5);
    padding: 10px;
}
.chg-row { display: flex; align-items: center; gap: clamp(6px, 2.4vw, 16px); }
.paycoin svg { width: var(--sz-dime); height: var(--sz-dime); display: block; filter: drop-shadow(0 3px 8px rgba(10, 2, 20, .6)); }
.paycoin.coinbtn-quarter svg { width: var(--sz-quarter); height: var(--sz-quarter); }
.paycoin.coinbtn-nickel svg { width: var(--sz-nickel); height: var(--sz-nickel); }
.paycoin.coinbtn-penny svg { width: var(--sz-penny); height: var(--sz-penny); }
.chg-op { font-size: 2rem; font-weight: bold; color: var(--cc-gold-hi); }
.chg-chip {
    background: var(--cc-cream); color: var(--cc-ink);
    border-radius: 14px; padding: 10px 14px;
    font-size: clamp(1.3rem, 5vw, 1.7rem); font-weight: bold;
    box-shadow: 0 3px 10px rgba(10, 2, 20, .4);
}
.chg-q {
    background: var(--cc-candy); color: #FFF;
    border-radius: 14px; padding: 10px 16px;
    font-size: clamp(1.4rem, 5.4vw, 1.8rem); font-weight: bold;
    box-shadow: 0 3px 10px rgba(194, 43, 78, .5);
}

/* ── counting felt (L1) ── */
#count-zone { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
#coin-set {
    flex: 1;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    align-content: center;
    gap: 12px;
    background: var(--cc-felt);
    border: 3px solid var(--cc-gold-deep);
    border-radius: 18px;
    padding: 12px;
    box-shadow: inset 0 0 30px rgba(10, 2, 20, .5);
    min-height: 140px;
}
.set-coin {
    border: none; background: none; padding: 0; cursor: pointer;
    position: relative;
    transform: rotate(var(--rot, 0deg));
    transition: transform .2s, filter .2s;
    filter: drop-shadow(0 4px 8px rgba(10, 2, 20, .55));
}
.set-coin:hover { transform: rotate(var(--rot, 0deg)) scale(1.08); }
.set-coin svg { display: block; }
.set-coin.sz-penny svg { width: var(--sz-penny); height: var(--sz-penny); }
.set-coin.sz-nickel svg { width: var(--sz-nickel); height: var(--sz-nickel); }
.set-coin.sz-dime svg { width: var(--sz-dime); height: var(--sz-dime); }
.set-coin.sz-quarter svg { width: var(--sz-quarter); height: var(--sz-quarter); }
.set-coin.counted { filter: drop-shadow(0 0 10px var(--cc-gold)) brightness(1.08); }
.set-coin.counted::after {
    content: '✓';
    position: absolute; right: -4px; top: -6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--cc-teal); color: #0B3A32;
    font-size: .9rem; font-weight: bold; line-height: 22px;
}

/* ── till + meter + tray (L2 / L3a) ── */
#pay-zone { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; justify-content: flex-end; }

#till-panel {
    background: var(--cc-felt);
    border: 3px solid var(--cc-gold-deep);
    border-radius: 18px;
    padding: 10px 12px 12px;
    box-shadow: inset 0 0 26px rgba(10, 2, 20, .5);
}
#till-row {
    display: grid;
    grid-template-columns: repeat(4, 46px);
    gap: 6px 12px;
    justify-content: center;
    justify-items: center;
    margin-bottom: 8px;
}
#till-row.wobble { animation: cc-wobble .5s; }
.tslot {
    width: 100%; max-width: 46px; aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(10, 2, 20, .4);
    border: 2px solid rgba(255, 233, 168, .18);
    display: grid; place-items: center;
}
.tslot.ghost { border: 2.5px dashed var(--cc-gold); background: rgba(255, 201, 77, .1); }
.tslot.filled { border-color: transparent; background: none; }
.tcoin { width: 108%; height: 108%; cursor: pointer; }
.tcoin svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 5px rgba(10, 2, 20, .6)); }

.meter-labels {
    display: flex; justify-content: space-between;
    font-weight: bold; font-size: .95rem; color: var(--cc-gold-hi);
    margin-bottom: 3px;
}
#meter {
    position: relative; height: 22px;
    border-radius: 12px;
    background: rgba(10, 2, 20, .55);
    border: 2px solid var(--cc-gold-deep);
    overflow: hidden;
}
#meter-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--cc-candy), var(--cc-gold));
    border-radius: 10px;
    transition: width .3s ease-out;
}
#meter.exact { box-shadow: 0 0 14px rgba(255, 201, 77, .8); }
#meter.exact #meter-fill { background: linear-gradient(90deg, var(--cc-teal), var(--cc-gold)); }
#meter.wobble { animation: cc-wobble .5s; }
@keyframes cc-wobble {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

/* the coin tray: four piles at true relative size, value order left→right —
   the tiny dime sitting between the chunky nickel and the big quarter IS the
   lesson, so the sizes are load-bearing */
#tray {
    display: flex; align-items: flex-end; justify-content: center;
    gap: clamp(6px, 2vw, 16px);
    min-height: calc(var(--sz-quarter) + 6px);
}
.pile {
    border: none; background: none; padding: 0; cursor: pointer;
    position: relative;
    transition: transform .15s;
    filter: drop-shadow(0 5px 9px rgba(10, 2, 20, .6));
}
.pile:hover { transform: translateY(-4px) scale(1.05); }
.pile:active { transform: scale(.94); }
.pile svg { display: block; }
.pile.coinbtn-penny { width: var(--sz-penny); height: var(--sz-penny); }
.pile.coinbtn-nickel { width: var(--sz-nickel); height: var(--sz-nickel); }
.pile.coinbtn-dime { width: var(--sz-dime); height: var(--sz-dime); }
.pile.coinbtn-quarter { width: var(--sz-quarter); height: var(--sz-quarter); }
.pile svg { width: 100%; height: 100%; }
.pile::after {
    /* a second coin peeking out beneath: reads as a pile, not a lone coin */
    content: '';
    position: absolute; left: 8%; right: 8%; bottom: -5px;
    height: 12px; border-radius: 50%;
    background: rgba(10, 2, 20, .5);
    z-index: -1;
}
.pile.shake { animation: cc-shake .4s; }
@keyframes cc-shake {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-5px) rotate(-4deg); }
    70% { transform: translateX(5px) rotate(4deg); }
}

.pay-actions { display: flex; gap: 10px; justify-content: center; align-items: stretch; }
#btn-undo {
    min-height: 56px; min-width: 100px;
    border: 2.5px solid var(--cc-gold-deep);
    border-radius: 40px;
    background: rgba(30, 10, 46, .85);
    color: var(--cc-gold-hi); font-family: inherit; font-weight: bold; font-size: .95rem;
    cursor: pointer; padding: 8px 14px;
    transition: transform .15s;
}
#btn-undo:hover { transform: scale(1.05); }
#btn-confirm {
    flex: 0 1 220px;
    min-height: 56px; min-width: 150px;
    border: none; border-radius: 40px;
    background: linear-gradient(135deg, #8C8398 0%, #6E657C 100%);
    color: #FFF; font-family: inherit; font-weight: bold;
    font-size: clamp(1.05rem, 4vw, 1.3rem);
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(10, 2, 20, .45);
    transition: transform .15s, background .3s;
}
#btn-confirm.ready {
    background: linear-gradient(135deg, var(--cc-gold) 0%, var(--cc-candy) 100%);
    animation: cc-ready 1.1s ease-in-out infinite;
}
@keyframes cc-ready {
    0%, 100% { transform: scale(1); box-shadow: 0 5px 16px rgba(240, 70, 107, .5); }
    50% { transform: scale(1.05); box-shadow: 0 5px 26px rgba(255, 201, 77, .8); }
}

/* ── answer chips (L1 / L3b) ── */
#choice-zone { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; margin-top: auto; }
#choices {
    display: flex; gap: 10px; justify-content: center;
    width: min(100%, 430px);
}
.choice {
    width: min(128px, calc((100% - 20px) / 3));
    min-width: 0;
    min-height: 88px;
    border: 3px solid var(--cc-gold-deep);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--cc-cream) 0%, #FFE9C8 100%);
    color: var(--cc-ink);
    font-family: inherit; font-weight: bold;
    font-size: clamp(1.4rem, 6vw, 1.9rem);
    cursor: pointer;
    box-shadow: 0 5px 0 var(--cc-gold-deep), 0 8px 18px rgba(10, 2, 20, .4);
    transition: transform .15s, opacity .4s;
}
.choice:hover { transform: translateY(-3px); }
.choice:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--cc-gold-deep); }
.choice.right { background: linear-gradient(180deg, #CFF5E4 0%, #8FE8C4 100%); border-color: #2EA884; }
.choice.wrong { animation: cc-wobble .5s; background: linear-gradient(180deg, #FFE2E6 0%, #FFC4CE 100%); }
.choice.fade-out { opacity: 0; transform: scale(.7); pointer-events: none; }

/* ── flying fx ── */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 840; }
.fly-coin { position: fixed; width: 48px; height: 48px; z-index: 841; }
.fly-coin svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(10, 2, 20, .6)); }
.fly-ticket { position: fixed; width: 60px; z-index: 841; }
.fly-ticket svg { width: 100%; filter: drop-shadow(0 4px 10px rgba(255, 201, 77, .6)); }

/* ── ghost hand ── */
#ghost-hand {
    position: fixed; width: 52px; z-index: 850;
    pointer-events: none;
    animation: cc-hand 1.1s ease-in-out infinite;
    filter: drop-shadow(0 4px 10px rgba(10, 2, 20, .5));
}
#ghost-hand svg { width: 100%; }
@keyframes cc-hand {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(12px); }
}

/* ── Penny the magpie ── */
.penny-holder { display: block; }
.penny-holder svg { width: 100%; display: block; }
.penny-holder .pn-lid { opacity: 0; }
.penny-holder.blink .pn-lid { opacity: 1; }
.penny-holder .pn-all { animation: cc-bob 3.2s ease-in-out infinite; }
@keyframes cc-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.penny-holder .pn-head { transform-box: fill-box; transform-origin: 50% 85%; transition: transform .45s; }
.penny-holder.tilt .pn-head { transform: rotate(9deg); }
.penny-holder.hop .pn-all { animation: cc-hop .55s ease-out; }
@keyframes cc-hop {
    0%, 100% { transform: translateY(0); }
    35% { transform: translateY(-16px); }
    70% { transform: translateY(0); }
    85% { transform: translateY(-5px); }
}
.penny-holder .pn-tail { transform-box: fill-box; transform-origin: 10% 80%; animation: cc-tail 3.6s ease-in-out infinite; }
@keyframes cc-tail {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(4deg); }
}
.penny-holder .pn-wing { transform-box: fill-box; transform-origin: 0 0; transition: transform .3s; }
.penny-holder.hop .pn-wing { transform: rotate(-38deg); }
.penny-holder.hop .pn-wing-l { transform: rotate(38deg); }

/* ── celebrate card extra row ── */
.cele-tickets {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 4px 0 10px;
    font-size: 1.25rem; color: var(--gk-text);
}
.cele-tickets .ct-art svg { width: 52px; height: 32px; display: block; }

/* ── prize booth overlay ── */
#booth {
    position: fixed; inset: 0; z-index: 912;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20, 6, 34, .78);
    padding: 12px;
}
.booth-card {
    position: relative;
    width: min(94vw, 560px);
    max-height: min(88vh, 660px);
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--cc-cream);
    color: var(--cc-ink);
    border: 4px solid var(--cc-gold-deep);
    border-radius: 24px;
    padding: 18px 16px 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.booth-card h3 { text-align: center; font-size: 1.35rem; margin-bottom: 4px; }
#booth-tickets {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-weight: bold; font-size: 1.1rem; margin-bottom: 12px;
}
#booth-tickets .tk-svg { width: 36px; height: 22px; }
#booth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
}
.booth-cell {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    border: 2.5px solid var(--cc-gold-deep);
    border-radius: 16px;
    background: #FFF;
    font-family: inherit;
    padding: 10px 6px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.booth-cell:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(200, 140, 30, .35); }
.booth-cell .bc-art svg { width: 58px; height: 58px; }
.booth-cell.dim .bc-art { filter: grayscale(.9) opacity(.45); }
.booth-cell.can { box-shadow: 0 0 0 3px rgba(255, 201, 77, .55); }
.booth-cell.owned { background: #FFF8E4; }
.bc-name { font-weight: bold; font-size: .78rem; text-align: center; color: var(--cc-ink); }
.bc-cost { font-size: .85rem; font-weight: bold; color: var(--cc-candy-deep); }
.bc-owned { font-size: .78rem; font-weight: bold; color: #2EA884; }
.booth-cell.wiggle { animation: cc-wiggle .5s; }

.close-btn {
    position: absolute; top: 10px; right: 10px;
    width: 48px; height: 48px;
    border: none; border-radius: 50%;
    background: var(--cc-candy);
    color: #FFF; font-size: 1.2rem; font-weight: bold;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(194, 43, 78, .5);
}

/* ── grown-ups ── */
.info-btn {
    position: fixed;
    left: var(--gk-corner-inset); bottom: var(--gk-corner-inset);
    width: 52px; height: 52px;
    border: none; border-radius: 50%;
    background: rgba(255, 246, 232, .92);
    font-size: 1.35rem;
    cursor: pointer; z-index: 20;
    box-shadow: 0 4px 12px rgba(10, 2, 20, .5);
}
#grownups {
    position: fixed; inset: 0; z-index: 914;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20, 6, 34, .78);
    padding: 14px;
}
.grownups-card {
    position: relative;
    width: min(94vw, 520px);
    max-height: min(88vh, 640px);
    overflow-y: auto; overscroll-behavior: contain;
    color: var(--gk-text);
}
.grownups-card h3 { margin-bottom: 8px; }
.grownups-card p { margin: 8px 0; font-size: .95rem; line-height: 1.45; }
.grownups-card .tip-row { display: flex; gap: 10px; margin-top: 10px; align-items: flex-start; }
.grownups-card .tip-icons { font-size: 1.4rem; }
.coin-cheat { display: flex; gap: 12px; justify-content: center; align-items: flex-end; margin: 10px 0 4px; }
.coin-cheat .cc-c { text-align: center; font-size: .72rem; font-weight: bold; color: var(--gk-text); }
.coin-cheat .cc-c svg { display: block; margin: 0 auto 2px; }
.coin-cheat .cc-c.c-penny svg { width: 34px; height: 34px; }
.coin-cheat .cc-c.c-nickel svg { width: 38px; height: 38px; }
.coin-cheat .cc-c.c-dime svg { width: 31px; height: 31px; }
.coin-cheat .cc-c.c-quarter svg { width: 44px; height: 44px; }

/* ── phones: every screen must fit 320×568 with the HUD reserve honoured ── */
@media (max-width: 719px) {
    /* title column: compact so nothing lands under the bottom-left ℹ️ button */
    .title-inner { gap: 7px; }
    .sign { padding: 8px 16px 6px; }
    h1.game-title { font-size: clamp(1.3rem, 5.8vw, 1.9rem); }
    .tagline { font-size: .78rem; margin-top: 2px; }
    #penny-title { width: clamp(76px, 20vw, 96px); }
    #t-coins .coinbtn-dime svg { width: calc(var(--sz-dime) * .5); height: calc(var(--sz-dime) * .5); }
    #t-coins .coinbtn-penny svg { width: calc(var(--sz-penny) * .5); height: calc(var(--sz-penny) * .5); }
    #t-coins .coinbtn-nickel svg { width: calc(var(--sz-nickel) * .5); height: calc(var(--sz-nickel) * .5); }
    #t-coins .coinbtn-quarter svg { width: calc(var(--sz-quarter) * .5); height: calc(var(--sz-quarter) * .5); }
    #btn-start { min-height: 56px; padding: 10px 32px; font-size: 1.15rem; }
    .lvl-btn { aspect-ratio: 10 / 9.4; }
    .lvl-icon { font-size: 1.25rem; margin-top: 14px; }
    .pill { min-height: 44px; padding: 6px 13px; font-size: .95rem; }
    #btn-booth { min-height: 44px; font-size: .92rem; padding: 6px 14px; }
    #nest-shelf { min-height: 48px; }

    /* play column: the pay screen is the tall one — shrink every band a notch */
    #stall-row { min-height: 64px; }
    #penny-play { width: clamp(58px, 15vw, 84px); }
    #bubble { left: clamp(44px, 12vw, 76px); font-size: 1.1rem; padding: 5px 12px; }
    #item-art svg { width: clamp(48px, 13vw, 62px); height: clamp(48px, 13vw, 62px); }
    #item-name { font-size: .66rem; max-width: 72px; }
    #price-tag { width: clamp(56px, 15vw, 68px); }
    #stage { gap: 6px; padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
    #till-panel { padding: 8px 10px 10px; }
    #till-row { grid-template-columns: repeat(4, 40px); gap: 5px 10px; margin-bottom: 6px; }
    .tslot { max-width: 40px; }
    .meter-labels { font-size: .85rem; margin-bottom: 2px; }
    #meter { height: 18px; }
    #tray { min-height: calc(var(--sz-quarter) + 4px); }
    .pay-actions { gap: 8px; }
    #btn-undo { min-height: 52px; min-width: 92px; font-size: .88rem; }
    #btn-confirm { min-height: 52px; }
    .choice { min-height: 78px; }
    #change-zone { min-height: 96px; }
}
@media (max-width: 374px) {
    :root {
        --sz-dime: 50px;
        --sz-penny: 56px;
        --sz-nickel: 63px;
        --sz-quarter: 72px;
    }
    #till-row { gap: 4px; }
    .choice { min-height: 78px; }
    #btn-undo { min-width: 88px; }
}
/* very short landscape phones: let the title column scroll instead of clip */
@media (max-height: 480px) {
    .title-inner { justify-content: flex-start; }
}

/* ── reduced motion: every decorative animation goes quiet ── */
@media (prefers-reduced-motion: reduce) {
    .bulb, .penny-holder .pn-all, .penny-holder .pn-tail,
    #btn-confirm.ready, .lvl-btn.fresh, #ghost-hand,
    #chip-tickets.pop, .shine, #price-tag.flash { animation: none; }
    #stage.arrive, .choice.wrong, .lvl-btn.wiggle, .booth-cell.wiggle,
    #meter.wobble, #till-row.wobble, .pile.shake { animation: none; }
    .penny-holder.hop .pn-all { animation: none; }
    #meter-fill, #bubble, .choice, .pile, .set-coin { transition: none; }
}