/* Treasure Words — game styles. GameKit tokens load first. */

:root {
    --tw-sky: #C6EEFB;
    --tw-parch-a: #FFF7E2;
    --tw-parch-b: #FBE7BF;
    --tw-parch-edge: #E4C98C;
    --tw-ink: #5A3E1E;
    --tw-wood: #C98B4E;
    --tw-wood-dark: #8C5A2E;
}

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

.screen {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* clips decorative corner palms so the page never scrolls sideways */
}

/* ═══════════ Backdrop ═══════════ */
#backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bk-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bk-sun { transform-box: fill-box; transform-origin: 1050px 130px; }
.bk-sun-rays { transform-box: fill-box; transform-origin: 1050px 130px; animation: tw-spin 70s linear infinite; }
@keyframes tw-spin { to { transform: rotate(360deg); } }
.bk-cloud { animation: tw-drift linear infinite; }
.bkc1 { animation-duration: 90s; }
.bkc2 { animation-duration: 130s; animation-delay: -40s; }
@keyframes tw-drift { from { transform: translateX(-6vw); } to { transform: translateX(6vw); } }
.bk-waves path { animation: tw-wave 5s ease-in-out infinite; }
.bk-waves path:last-child { animation-delay: -2.2s; }
@keyframes tw-wave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-18px); } }
.bk-palm { transform-box: fill-box; transform-origin: 338px 356px; animation: tw-sway 4.6s ease-in-out infinite; }
@keyframes tw-sway { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }

body.on-play #backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 248, 236, 0.32);
}

/* ═══════════ Title screen ═══════════ */
.title-inner {
    flex: 1;
    display: grid;
    grid-template-areas: "top captain" "controls captain";
    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-captain { grid-area: captain; align-self: center; }
.t-controls { grid-area: controls; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.game-title {
    font-size: clamp(2.6rem, 7.4vw, 4.8rem);
    line-height: 1.02;
    background: linear-gradient(100deg, #E63946 5%, #F77F00 30%, #FCBF49 50%, #7CB518 68%, #00B4D8 100%);
    -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, .28));
}
.tagline {
    margin-top: 12px;
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: bold;
    color: var(--gk-text);
    background: rgba(255, 255, 255, .78);
    border-radius: 30px;
    padding: 6px 20px;
    display: inline-block;
    box-shadow: 0 3px 10px rgba(90, 60, 130, .12);
}

#title-captain { width: clamp(180px, 26vw, 320px); animation: gk-bob 2.8s ease-in-out infinite; }
#title-captain .cap-svg { width: 100%; }

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

.title-row { display: flex; gap: 14px; align-items: center; }
.gem-pill {
    min-height: 52px;
    display: flex; align-items: center;
    padding: 6px 22px;
    font-size: 1.3rem; 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: 14px; flex-wrap: wrap; justify-content: center; }
.lvl-btn {
    position: relative;
    width: clamp(96px, 24vw, 116px);
    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(140, 90, 46, .18);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    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-name { font-size: .82rem; font-weight: bold; color: var(--gk-text); }
.lvl-stars { font-size: .82rem; letter-spacing: 1px; }
.lvl-stars .dim { filter: grayscale(1) opacity(.4); }
.lvl-btn.locked { filter: grayscale(.8); opacity: .78; }
.lvl-btn .lvl-lock { display: none; }
.lvl-btn.locked .lvl-lock {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    background: rgba(255, 255, 255, .42);
    border-radius: 22px;
}
.lvl-btn.just-unlocked { animation: tw-unlock 1s ease-in-out 3; }
@keyframes tw-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, .8); transform: scale(1.12); }
}
.lvl-btn.shake { animation: tw-headshake .5s ease-in-out; }
@keyframes tw-headshake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-7px) rotate(-3deg); } 75% { transform: translateX(7px) rotate(3deg); }
}

.title-palm { position: absolute; bottom: -10px; width: clamp(110px, 15vw, 180px); pointer-events: none; z-index: 5; }
.title-palm .palm-svg { width: 100%; }
.tp-left { left: -14px; }
.tp-right { right: -14px; transform: scaleX(-1); }
.title-palm .palm-fronds { transform-box: fill-box; transform-origin: 76px 64px; animation: tw-sway 5s ease-in-out infinite; }

.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); }

/* ═══════════ Play screen ═══════════ */
#play-top {
    flex: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 200px 4px 16px; /* right room for the GameKit HUD */
    min-height: 72px;
}
#captain-corner { width: clamp(74px, 11vw, 118px); flex: none; }
#captain-corner .cap-svg { width: 100%; animation: gk-bob 3s ease-in-out infinite; }

#chest-tracker { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
#gem-pips { display: flex; gap: 7px; }
.pip {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    box-shadow: inset 0 2px 6px rgba(90, 60, 130, .28);
    display: flex; align-items: center; justify-content: center;
}
.pip.filled { background: rgba(255, 255, 255, .9); box-shadow: inset 0 1px 3px rgba(90, 60, 130, .18), 0 0 10px rgba(126, 224, 255, .6); }
.pip .gem-svg { width: 82%; }
#chest-holder { width: clamp(92px, 13vw, 132px); }
.chest-svg { width: 100%; animation: gk-bob 3.4s ease-in-out infinite; }

/* chest opening */
.chest-lid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.2, 1.7, .35, 1); }
.chest-svg.open .chest-lid { transform: rotate(-46deg); }
.chest-gold { opacity: 0; transform: translateY(8px); transition: opacity .4s .22s ease-out, transform .5s .22s cubic-bezier(.2, 1.6, .4, 1); }
.chest-svg.open .chest-gold { opacity: 1; transform: translateY(-6px); }
.chest-svg.open { animation: tw-chest-jump .5s ease-out; }
@keyframes tw-chest-jump { 0% { transform: translateY(0); } 40% { transform: translateY(-10px); } 100% { transform: translateY(0); } }

/* scroll + clue */
#scroll-area {
    flex: none;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 2px 12px 8px;
}
.scroll {
    position: relative;
    width: min(92vw, 640px);
    background: linear-gradient(to bottom, var(--tw-parch-a), var(--tw-parch-b));
    border: 3px solid var(--tw-parch-edge);
    border-radius: 16px;
    padding: 18px clamp(30px, 6vw, 52px);
    box-shadow: 0 10px 26px rgba(120, 80, 30, .28), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -6px 14px rgba(180, 130, 60, .25);
}
.scroll-eyelet {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 24px; height: 118%;
    border-radius: 10px;
    background: linear-gradient(to right, #C79A55, #E4C489, #B98C4A);
    box-shadow: 0 4px 10px rgba(120, 80, 30, .35);
}
.e-l { left: -11px; }
.e-r { right: -11px; }
.clue-text {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
    gap: 4px 16px;
    font-size: clamp(1.5rem, 4.8vw, 2.6rem);
    font-weight: bold;
    color: var(--tw-ink);
    line-height: 1.18;
    letter-spacing: .5px;
    min-height: 1.2em;
}
.clue-text .word { display: inline-block; padding: 1px 3px; }
.clue-text.pop { animation: tw-clue-pop .4s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes tw-clue-pop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.hear-btn {
    min-height: 56px;
    padding: 8px 24px;
    display: inline-flex; align-items: center; gap: 10px;
    border: none; cursor: pointer;
    border-radius: 40px;
    background: linear-gradient(135deg, #FFE9A8, #FBD263);
    color: var(--gk-text);
    font-size: clamp(1rem, 2.6vw, 1.25rem); font-weight: bold;
    box-shadow: 0 6px 16px rgba(232, 168, 40, .38), inset 0 -4px 0 rgba(180, 130, 30, .25), inset 0 2px 0 rgba(255, 255, 255, .5);
    transition: transform .15s, box-shadow .2s;
}
.hear-btn:active { transform: scale(.94); }
.hear-ic { width: 30px; height: 30px; display: inline-flex; }
.hear-ic .spk-ic { width: 100%; height: 100%; }
.hear-btn.armed { animation: tw-hear-armed 1.1s ease-in-out infinite; box-shadow: 0 0 0 4px rgba(252, 191, 73, .55), 0 6px 16px rgba(232, 168, 40, .5); }
@keyframes tw-hear-armed { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.hear-btn.speaking .hear-ic { animation: tw-speak .5s ease-in-out 2; }
@keyframes tw-speak { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }

/* scene / object cards */
#scene {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: clamp(8px, 1.6vw, 18px);
    padding: 6px clamp(12px, 3vw, 30px) 10px;
    align-content: center;
}
.obj-card {
    position: relative;
    width: clamp(90px, 15vw, 148px);
    padding: 8px 6px 10px;
    border: none; cursor: pointer;
    border-radius: 20px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 6px 16px rgba(90, 60, 130, .18), inset 0 -4px 0 rgba(140, 90, 46, .12);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    transition: transform .14s, box-shadow .2s;
}
.obj-card:hover:not(:disabled) { transform: translateY(-3px); }
.obj-card:active:not(:disabled) { transform: scale(.95); }
.obj-pic {
    position: relative;
    width: 74%;
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
}
.size-big .obj-pic { width: 92%; }
.size-small .obj-pic, .size-little .obj-pic { width: 56%; }
.size-tall .obj-pic { width: 72%; }
.obj-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.obj-label {
    font-size: clamp(1rem, 2.5vw, 1.45rem);
    font-weight: bold;
    color: var(--tw-ink);
    letter-spacing: .5px;
}
.obj-card.found { background: rgba(255, 249, 224, .95); box-shadow: 0 0 0 4px rgba(252, 191, 73, .6), 0 6px 16px rgba(90, 60, 130, .2); }
.obj-card.found .obj-pic { filter: saturate(.85); }
.obj-card.nope { animation: tw-headshake .45s ease-in-out; }
.obj-card.hintglow { animation: tw-hintglow 1.3s ease-in-out 2; }
@keyframes tw-hintglow {
    0%, 100% { box-shadow: 0 6px 16px rgba(90, 60, 130, .18); }
    50% { box-shadow: 0 0 24px 6px rgba(252, 191, 73, .85); }
}

/* gem reveal on object */
.obj-gem {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; z-index: 3;
}
.obj-gem.show { animation: tw-gem-in .55s cubic-bezier(.2, 1.7, .4, 1) forwards; }
@keyframes tw-gem-in { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 70% { transform: scale(1.12) rotate(6deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.obj-gem .gem-svg { width: 62%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .28)); }
.obj-gem .burst { position: absolute; inset: 0; }
.obj-gem .burst i {
    position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #FFF3C4;
    box-shadow: 0 0 8px 2px rgba(255, 243, 196, .9);
    animation: tw-burst .6s ease-out var(--d, 0s) forwards;
}
@keyframes tw-burst {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.3); }
}
.fly-gem { position: fixed; z-index: 930; pointer-events: none; }
.fly-gem .gem-svg { width: 100%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3)); }

/* ═══════════ Ghost hand ═══════════ */
#ghost-hand {
    position: fixed;
    z-index: 800;
    width: 62px;
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgba(120, 90, 40, .45));
    animation: tw-hand-bounce .85s ease-in-out infinite;
}
#ghost-hand .hand-svg { width: 100%; transform: rotate(-12deg); }

@keyframes tw-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); }
.tip-row { display: flex; gap: 12px; align-items: flex-start; background: #FFF6E5; border-radius: 16px; padding: 12px 14px; margin-top: 4px; }
.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" "captain" "controls";
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }
    #title-captain { width: clamp(150px, 34vw, 240px); }
    #play-top { padding: 76px 16px 4px; justify-content: space-around; }
}

@media (max-width: 900px) {
    .obj-card { width: clamp(84px, 20vw, 132px); }
    #play-top { gap: 8px; }
}

@media (max-height: 720px) {
    #title-captain { width: clamp(150px, 20vw, 230px); }
    .scroll { padding: 12px clamp(28px, 5vw, 44px); }
    #chest-holder { width: clamp(84px, 11vw, 116px); }
    .obj-card { padding: 6px 5px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .bk-sun-rays, .bk-cloud, .bk-waves path, .bk-palm, .title-palm .palm-fronds,
    #title-captain, .start-btn .btn-pulse, #captain-corner .cap-svg, .chest-svg,
    .hear-btn.armed, .hear-btn.speaking .hear-ic, #ghost-hand, .clue-text.pop,
    .obj-card.hintglow {
        animation: none;
    }
}