@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@500;600;700;800;900&display=swap');

:root { --ink:#193b55; --deep:#114968; --gold:#ffc43d; --orange:#f28b31; --cream:#fff9e9; --teal:#2aafaa; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:#082c45; color:var(--ink); font-family:'Nunito',sans-serif; }
.game-shell { min-height:100vh; overflow:hidden; position:relative; padding:24px max(20px, calc((100vw - 1120px)/2)); background-image:linear-gradient(180deg,#0c567044 0%,#159bb01c 42%,#7a431b52 100%),url('assets/tropical-treasure-bg.png'); background-size:cover; background-position:center; background-attachment:fixed; }
.game-shell:after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.2; background-image:radial-gradient(#fff 1px,transparent 1px); background-size:18px 18px; mask-image:linear-gradient(transparent 10%,black 48%,transparent 95%); }
.topbar,.progress-wrap,.play-card,.welcome,.result,footer { position:relative; z-index:3; }
.topbar { display:flex; justify-content:space-between; align-items:center; max-width:1120px; margin:auto; }
.brand { font:800 1.35rem 'Baloo 2'; color:#fff; letter-spacing:2px; text-shadow:0 3px 0 #197391; display:flex; gap:10px; align-items:center; }
.brand-icon { color:var(--gold); font-size:2rem; }
.top-stats { display:flex; gap:10px; }.stat-pill { background:#ffffffd9; border:2px solid #fff; border-radius:30px; padding:7px 13px; display:flex; gap:7px; align-items:center; box-shadow:0 4px 0 #2a8092; }.lives { letter-spacing:2px; }
.progress-wrap { max-width:680px; margin:22px auto 0; }.progress-label { display:flex; justify-content:space-between; color:#fff; font-weight:900; font-size:.82rem; text-transform:uppercase; letter-spacing:1px; text-shadow:0 2px 2px #277d95; }.progress-track { height:11px; background:#ffffff75; border-radius:20px; margin-top:7px; padding:2px; }.progress-bar { height:100%; width:0; border-radius:20px; background:linear-gradient(90deg,#ffe66b,#ff9c35); transition:width .4s; }
.scene { height:255px; max-width:1120px; margin:auto; position:relative; }.island,.ocean,.sand,.palm,.chest-wrap,.crab,.shell { display:none; }
.palm { position:absolute; z-index:2; width:150px; height:220px; bottom:30px; }.palm i { position:absolute; width:13px; height:190px; background:#795333; left:65px; bottom:0; transform:rotate(14deg); border-radius:10px; }.palm b { position:absolute; width:100px; height:30px; background:#247f5b; border-radius:100% 0 100% 0; transform-origin:0 50%; left:72px; bottom:180px; }.palm b:nth-child(2){transform:rotate(-35deg)}.palm b:nth-child(3){transform:rotate(5deg)}.palm b:nth-child(4){transform:rotate(40deg)}.palm b:nth-child(5){transform:rotate(75deg)}.palm-left { left:-35px; transform:scale(1.1) }.palm-right { right:-25px; transform:scale(.72) rotate(8deg); bottom:55px; }
.chest-wrap { position:absolute; z-index:3; bottom:12px; left:50%; transform:translateX(-50%); width:180px; }.chest-body { height:87px; background:linear-gradient(90deg,#8c3e18,#c96a20 30%,#8b3815); border:7px solid #603014; border-radius:8px 8px 18px 18px; position:relative; box-shadow:0 8px 0 #8d5527, inset 0 8px #f4a22a; }.chest-lid { height:57px; background:linear-gradient(#ec9a28,#9c4016); border:7px solid #603014; border-bottom:0; border-radius:80px 80px 0 0; position:relative; transform:translateY(8px); text-align:center; font-size:2.2rem; color:#ffe86c; text-shadow:0 0 10px #fff; padding-top:5px; }.chest-band { position:absolute; height:100%; width:14px; left:76px; top:0; background:#f3ad31; border-left:3px solid #713412;border-right:3px solid #713412; }.lock { position:absolute; z-index:2; left:67px; top:23px; width:34px;height:42px;border-radius:8px;background:#ffce45;border:4px solid #7d411a; font:800 1.6rem 'Baloo 2'; text-align:center; }.chest-shadow { height:13px; background:#9b5c27aa; border-radius:50%; margin-top:3px; }.crab { position:absolute; z-index:4; font-size:2.2rem; bottom:15px; }.crab-one { left:21%; }.crab-two { right:25%; transform:scale(.7); }.shell { position:absolute; z-index:3; color:#c27749; font-size:2rem; bottom:24px; }.shell-one{left:35%}.shell-two{right:34%}
.play-card { max-width:680px; margin:-3px auto 0; background:var(--cream); border:4px solid #fff; border-radius:24px; box-shadow:0 9px 0 #bd7a3b, 0 16px 25px #633e2270; padding:25px 30px 29px; text-align:center; }.eyebrow { color:#e47728; font-weight:900; font-size:.76rem; letter-spacing:2px; }.play-card h1,.welcome h1,.result h2 { font:800 2.25rem/1.1 'Baloo 2'; margin:7px 0 0; color:var(--deep); }.hint { margin:4px 0 17px; color:#668293; }.answers { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }.answer { border:3px solid #d6e5e1; color:var(--deep); background:#fff; font:800 1.45rem 'Baloo 2'; border-radius:14px; padding:12px; cursor:pointer; transition:.15s; box-shadow:0 4px 0 #d6e5e1; }.answer:hover { border-color:var(--teal); transform:translateY(-2px); box-shadow:0 6px 0 #84c8c1; }.answer.correct { background:#d4f5d9; border-color:#56b878; color:#197246; }.answer.wrong { background:#ffe0d8; border-color:#e67762; color:#a9362b; }.answer:disabled { cursor:default; }.feedback { min-height:22px; margin-top:13px; font-weight:900; }.feedback.good{color:#29905a}.feedback.bad{color:#d0523e}
.welcome,.result { max-width:550px; margin: -15px auto 0; background:var(--cream); border-radius:24px; padding:28px 34px; text-align:center; box-shadow:0 9px 0 #bd7a3b; }.welcome { display:block; }.welcome h1 { font-size:2.7rem; }.welcome p { color:#5c7481; line-height:1.5; }.compass,.result-icon { font-size:3.4rem; color:#f0a42d; text-shadow:0 3px #b95b25; }.primary-btn { border:0; border-bottom:5px solid #bd5a20; background:linear-gradient(#ffbd49,#f18827); border-radius:30px; color:#fff; padding:13px 25px; font:800 1.05rem 'Nunito'; cursor:pointer; box-shadow:0 3px 0 #fff8; transition:.15s; }.primary-btn:hover { transform:translateY(-2px); filter:brightness(1.06); }.tip { color:#77909a; margin-top:19px; font-size:.83rem; }.tip span { color:#ee9b2c; font-size:1.2rem; }.result-score { margin:18px auto; padding:12px; border-radius:15px; background:#fff0bd; display:flex; gap:10px; align-items:center; justify-content:center; }.result-score strong { color:#e77c22; font:800 2.4rem 'Baloo 2'; }.result-score small { color:#8a735a; }.result h2 { font-size:2.1rem; }footer { text-align:center; color:#fff; opacity:.9; font-size:.78rem; font-weight:800; letter-spacing:1px; margin:28px 0 7px; }.sky-decor,.bird { position:absolute; pointer-events:none; }.cloud { background:#ffffff55; width:160px;height:30px;border-radius:40px; top:90px; }.cloud:after,.cloud:before{content:"";position:absolute;background:inherit;border-radius:50%;width:60px;height:60px;top:-25px}.cloud:before{left:25px}.cloud:after{right:22px}.cloud-one{left:2%}.cloud-two{right:4%;top:155px;transform:scale(.7)}.bird { color:#fff; font-size:3rem; transform:rotate(-20deg); }.bird-one{right:23%;top:80px}.bird-two{right:15%;top:118px;transform:scale(.6) rotate(-20deg)}
@media (max-width:650px){.game-shell{padding:16px 14px}.topbar{align-items:flex-start}.brand{font-size:1rem}.top-stats{gap:4px}.stat-pill{padding:5px 7px;font-size:.8rem}.lives{letter-spacing:0;font-size:.75rem}.scene{height:190px}.palm{transform:scale(.7);transform-origin:bottom}.palm-right{transform:scale(.5)}.island-back{width:300px;height:110px;left:20%;top:35px}.chest-wrap{transform:translateX(-50%) scale(.78);transform-origin:bottom}.crab-one{left:8%}.crab-two{right:8%}.play-card{padding:20px 15px}.play-card h1{font-size:1.85rem}.answer{font-size:1.2rem}.welcome,.result{padding:23px 18px}.welcome h1{font-size:2.3rem}.progress-wrap{margin-top:14px}}

.cloud-one { animation: drift 22s ease-in-out infinite; }
.cloud-two { animation: drift 29s ease-in-out -9s infinite reverse; }
.bird-one { animation: bird-hop 5s ease-in-out infinite; }
.bird-two { animation: bird-hop 6s ease-in-out -2s infinite; }
.gull { position:absolute; z-index:2; width:42px; height:18px; pointer-events:none; animation:fly-across 18s linear infinite; }
.gull:before,.gull:after { content:""; position:absolute; top:6px; width:23px; height:11px; border-top:3px solid #fff; border-radius:70% 70% 0 0; }
.gull:before { left:0; transform:rotate(12deg); }.gull:after { right:0; transform:rotate(-12deg); }
.gull-one { top:86px; left:-55px; animation-delay:-3s; transform:scale(.85); }
.gull-two { top:150px; left:-90px; animation-delay:-10s; transform:scale(.58); }
.gull-three { top:57px; left:-70px; animation-delay:-15s; transform:scale(.65); }
@keyframes drift { 0%,100% { margin-left:-20px; } 50% { margin-left:38px; } }
@keyframes bird-hop { 0%,100% { margin-top:0; } 50% { margin-top:8px; } }
@keyframes fly-across { 0% { left:-70px; opacity:0; } 8% { opacity:.9; } 50% { margin-top:-24px; } 92% { opacity:.9; } 100% { left:calc(100% + 70px); opacity:0; } }