/* Conker's Tumble Towers — game styles. GameKit tokens loaded first. */

:root {
    --tt-sky-top: #BFE3F7;
    --tt-sky-bot: #FFF3DC;
    --tt-wood: #B98146;
    --tt-wood-dark: #8A5A32;
    --tt-cream: #F5E6C8;
    --tt-leaf: #E8944A;
}

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

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

/* ═══════════ Backdrop — autumn fair ═══════════ */

#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(--tt-sky-top) 0%, #E4F0F7 52%, var(--tt-sky-bot) 100%);
}
.bk-sun { position: absolute; top: -26px; right: 5vw; width: clamp(110px, 15vw, 180px); }
.sun-svg { width: 100%; animation: tt-sunspin 90s linear infinite; }
@keyframes tt-sunspin { to { transform: rotate(360deg); } }

.bk-cloud {
    position: absolute;
    width: 150px; height: 44px;
    background: #fff; border-radius: 44px;
    opacity: .9;
    animation: tt-drift linear infinite;
}
.bk-cloud::before, .bk-cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.bk-cloud::before { width: 62px; height: 62px; left: 22px; top: -30px; }
.bk-cloud::after  { width: 44px; height: 44px; right: 26px; top: -20px; }
.bc1 { top: 8%;  transform: scale(.9);  animation-duration: 105s; animation-delay: -35s; }
.bc2 { top: 17%; transform: scale(1.15); animation-duration: 140s; animation-delay: -90s; opacity: .7; }
@keyframes tt-drift { from { left: -220px; } to { left: 105vw; } }

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

.bk-trees { position: absolute; bottom: 24%; left: 0; right: 0; height: 0; }
.bk-tree { position: absolute; bottom: 0; width: clamp(64px, 8vw, 104px); transform-origin: bottom center; }
.bk-tree svg { width: 100%; }

.bk-bunting { position: absolute; top: 0; left: 0; right: 0; height: clamp(60px, 9vh, 96px); }
.bk-bunting svg { width: 100%; height: 100%; }
.bunt { transform-origin: center top; animation: tt-bunt 3.4s ease-in-out infinite; }
@keyframes tt-bunt { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.4deg); } }

.bk-leaf { position: absolute; top: -30px; width: 22px; animation: tt-fall linear infinite; }
.bk-leaf svg { width: 100%; animation: tt-leafspin 3.6s ease-in-out infinite alternate; }
@keyframes tt-fall { from { transform: translateY(-4vh); } to { transform: translateY(108vh); } }
@keyframes tt-leafspin { from { transform: rotate(-70deg) translateX(-8px); } to { transform: rotate(50deg) translateX(10px); } }

@media (prefers-reduced-motion: reduce) {
    .bk-leaf, .bk-cloud, .sun-svg, .bunt { animation: none !important; }
}

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

#screen-title { align-items: center; justify-content: center; gap: 8px; padding: 16px; }

.game-title {
    font-size: clamp(2.4rem, 7vw, 4.2rem);
    line-height: 1.02;
    text-align: center;
    color: var(--tt-wood-dark);
    text-shadow: 0 3px 0 #fff, 0 6px 14px rgba(138, 90, 50, .3);
    letter-spacing: .01em;
    margin: 0;
}
.tagline {
    margin: 6px 0 0;
    font-size: clamp(1rem, 2.4vw, 1.3rem);
    color: #7A5A38;
    font-weight: 700;
    text-align: center;
}

.t-conker { width: clamp(150px, 24vh, 230px); margin: 4px 0; }
.conker-svg { width: 100%; display: block; }
#title-conker .conker-svg { animation: tt-bob 3s ease-in-out infinite; }
@keyframes tt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
#title-conker .ck-arm-wave { transform-origin: 52px 150px; animation: tt-wave 1.8s ease-in-out infinite; }
@keyframes tt-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
#title-conker .ck-tail { transform-origin: 130px 170px; animation: tt-tail 4s ease-in-out infinite; }
@keyframes tt-tail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg); } }

.start-btn {
    font-family: inherit;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 900;
    padding: 18px 54px;
    border: none;
    border-radius: 60px;
    color: #fff;
    background: linear-gradient(180deg, #8FC94E, #689F38);
    box-shadow: 0 8px 0 #4E7A2A, 0 14px 26px rgba(78, 122, 42, .35);
    cursor: pointer;
    margin-top: 8px;
}
.start-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 #4E7A2A; }
.btn-pulse { display: inline-block; animation: tt-pulse 1.6s ease-in-out infinite; }
@keyframes tt-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.title-row { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.star-pill, .album-btn {
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tt-wood-dark);
    background: rgba(255, 255, 255, .85);
    border: 3px solid var(--tt-wood);
    border-radius: 40px;
    padding: 10px 20px;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.album-btn { cursor: pointer; }
.album-btn:active { transform: scale(.95); }

#level-row { display: flex; gap: 16px; margin-top: 14px; }
.lvl-btn {
    position: relative;
    font-family: inherit;
    width: clamp(104px, 13vw, 132px);
    padding: 12px 8px 10px;
    border: none;
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 5px 0 rgba(138, 90, 50, .35), 0 10px 18px rgba(138, 90, 50, .18);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.lvl-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(138, 90, 50, .35); }
.lvl-num {
    font-size: 1.5rem; font-weight: 900; color: #fff;
    background: linear-gradient(180deg, #F2B05E, #D97E32);
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.lvl-name { font-size: .86rem; font-weight: 800; color: var(--tt-wood-dark); }
.lvl-stars { font-size: .9rem; letter-spacing: 1px; }
.lvl-stars .dim { opacity: .25; filter: grayscale(1); }
.lvl-lock { display: none; position: absolute; top: -10px; right: -6px; font-size: 1.5rem; }
.lvl-btn.locked { opacity: .68; filter: saturate(.5); }
.lvl-btn.locked .lvl-lock { display: block; }
.lvl-btn.shake { animation: tt-shake .45s ease-in-out; }
.lvl-btn.just-unlocked { animation: tt-unlock 1s ease-in-out; }
@keyframes tt-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes tt-unlock { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.16) rotate(-3deg); } 70% { transform: scale(1.08) rotate(2deg); } }

.info-btn {
    position: absolute;
    bottom: 14px;
    left: 14px;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .82);
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(138, 90, 50, .25);
    z-index: 40;
}
.info-btn:active { transform: scale(.92); }

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

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

#play-top {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 10px 12px 0;
    position: relative;
    min-height: 108px;
}

#tracker {
    position: absolute;
    left: 12px;
    top: 14px;
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, .78);
    border: 3px solid rgba(185, 129, 70, .55);
    border-radius: 40px;
    padding: 6px 12px;
    box-shadow: 0 4px 10px rgba(138, 90, 50, .18);
}
.trk-jar { width: clamp(38px, 5vw, 52px); opacity: .38; filter: grayscale(.9); transition: all .3s; }
.trk-jar svg { width: 100%; display: block; }
.trk-jar.done { opacity: 1; filter: none; }
.trk-jar.fresh { animation: tt-jarpop .7s cubic-bezier(.5, 1.6, .5, 1); }
@keyframes tt-jarpop { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }

#sum-sign {
    position: relative;
    width: clamp(240px, 34vw, 340px);
    height: clamp(86px, 12vw, 118px);
    filter: drop-shadow(0 6px 12px rgba(138, 90, 50, .3));
}
#sum-sign-board, .sign-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#sum-text {
    position: absolute;
    inset: 8% 6% 34%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);
    font-weight: 900;
    color: #5E3A1A;
}
#sum-text .op { color: #B25E24; font-weight: 800; }
#sum-text .mystery { color: #B565D8; animation: tt-pulse 1.3s ease-in-out infinite; display: inline-block; }
#sum-dots {
    position: absolute;
    left: 8%; right: 8%; bottom: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.dot-group { display: flex; gap: 2px; }
.dot-group svg { width: clamp(13px, 1.7vw, 18px); height: auto; transition: transform .2s; }
.dot-group svg.counted { transform: scale(1.35); filter: drop-shadow(0 0 4px #FCBF49); }
.dot-plus { font-weight: 900; color: #B25E24; font-size: 1rem; }

#stage-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
}
#stage {
    position: absolute;
    inset: 0;
    touch-action: none;
    cursor: crosshair;
}

#conker-side {
    position: absolute;
    left: 1%;
    bottom: 2%;
    width: clamp(76px, 9vw, 112px);
    pointer-events: none;
    z-index: 3;
}
#conker-side .conker-svg { transform: scaleX(-1); }
#conker-side.cheer { animation: tt-hop .7s ease-out; }
#conker-side.flip { animation: tt-flip .9s ease-in-out; }
#conker-side.peek { animation: tt-peek 1s ease-in-out; }
@keyframes tt-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-26px); } }
@keyframes tt-flip { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } }
@keyframes tt-peek { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg) translateY(4px); } 65% { transform: rotate(6deg); } }

/* ammo tray */
#ammo-tray {
    position: relative;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, var(--tt-wood), var(--tt-wood-dark));
    border-top: 5px solid #7A4A22;
    box-shadow: 0 -8px 22px rgba(94, 56, 26, .25);
    z-index: 20;
}
#ammo-rack {
    display: flex;
    justify-content: center;
    gap: clamp(12px, 3vw, 28px);
}
#ammo-rack.disabled .ammo-btn { opacity: .55; }
.ammo-btn {
    position: relative;
    font-family: inherit;
    width: clamp(96px, 14vw, 132px);
    min-height: 96px;
    border: none;
    border-radius: 20px;
    background: var(--tt-cream);
    box-shadow: 0 6px 0 #C9A96E, 0 10px 16px rgba(94, 56, 26, .3);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    transition: transform .12s;
}
.ammo-btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 #C9A96E; }
.ammo-btn svg { width: 34px; height: auto; }
.ammo-num { font-size: 2rem; font-weight: 900; color: #5E3A1A; line-height: 1.05; }
.ammo-dots { font-size: .6rem; letter-spacing: 2px; color: #B25E24; }
.ammo-btn.shake { animation: tt-shake .45s ease-in-out; }
.ammo-btn.glow { animation: tt-glow 1s ease-in-out infinite; }
@keyframes tt-glow {
    0%, 100% { box-shadow: 0 6px 0 #C9A96E, 0 0 0 4px rgba(252, 191, 73, .0); }
    50% { box-shadow: 0 6px 0 #C9A96E, 0 0 0 10px rgba(252, 191, 73, .55); transform: scale(1.05); }
}
.ammo-btn.loaded { opacity: .35; }

/* drag hint — a pulsing finger sweeping up-right */
#drag-hint {
    position: fixed;
    z-index: 30;
    pointer-events: none;
    font-size: 2.6rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25));
    animation: tt-draghint 1.7s ease-in-out infinite;
}
#drag-hint::after {
    content: '✨';
    position: absolute;
    top: -34px;
    right: -30px;
    font-size: 1.4rem;
}
@keyframes tt-draghint {
    0%   { transform: translate(0, 0) rotate(-14deg); opacity: 0; }
    18%  { opacity: 1; }
    62%  { transform: translate(90px, -110px) rotate(-14deg); opacity: 1; }
    100% { transform: translate(110px, -134px) rotate(-14deg); opacity: 0; }
}

/* banners */
.tt-banner {
    position: fixed;
    top: 26%;
    left: 50%;
    z-index: 60;
    transform: translateX(-50%);
    font-size: clamp(1.6rem, 4.6vw, 2.6rem);
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #F2B05E, #D97E32);
    border-radius: 60px;
    padding: 14px 34px;
    box-shadow: 0 10px 30px rgba(217, 126, 50, .45);
    animation: tt-banner .28s cubic-bezier(.4, 1.6, .6, 1), tt-banner-out .3s ease-in 1.25s forwards;
    pointer-events: none;
    white-space: nowrap;
}
@keyframes tt-banner { from { transform: translateX(-50%) scale(.3); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes tt-banner-out { to { transform: translateX(-50%) scale(.8) translateY(-30px); opacity: 0; } }

/* flying bits */
.fly-acorn { position: fixed; z-index: 70; width: 44px; pointer-events: none; }
.fly-acorn svg { width: 100%; }
.fly-star { position: fixed; z-index: 70; font-size: 1.9rem; pointer-events: none; }
.fly-trophy { position: fixed; z-index: 70; width: 110px; pointer-events: none; }
.fly-trophy svg { width: 100%; }

/* ═══════════ Overlays ═══════════ */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(74, 46, 22, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.overlay-card {
    position: relative;
    max-width: 560px;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    padding: 26px 26px 22px;
}
.overlay-card h3 { margin: 0 0 12px; font-size: 1.5rem; color: var(--tt-wood-dark); }
.overlay-card p { line-height: 1.55; color: #5B4632; margin: 0 0 12px; }
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: #F0E2C8;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--tt-wood-dark);
    cursor: pointer;
}
.close-btn:active { transform: scale(.92); }

#trophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.trophy-cell {
    background: #FBF4E4;
    border-radius: 16px;
    padding: 10px 6px 8px;
    text-align: center;
}
.trophy-cell svg { width: 70%; max-width: 90px; }
.trophy-cell.dim svg { filter: grayscale(1) brightness(.75); opacity: .5; }
.trophy-name { font-size: .82rem; font-weight: 800; color: var(--tt-wood-dark); margin-top: 4px; }

.tip-row { display: flex; gap: 12px; align-items: flex-start; background: #FBF4E4; border-radius: 14px; padding: 12px; }
.tip-icons { font-size: 1.6rem; }
.tip-row p { margin: 0; font-size: .95rem; }

#info-acorns { display: flex; gap: 6px; justify-content: center; margin: 6px 0 14px; }
#info-acorns svg { width: 34px; }

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

@media (max-width: 900px) {
    #play-top { min-height: 92px; }
    #tracker { top: 8px; left: 8px; }
}
@media (max-height: 760px) {
    .t-conker { width: clamp(120px, 20vh, 180px); }
    #level-row { margin-top: 8px; }
}