:root{
  --ink:#172b23; --ink2:#244235; --yellow:#f4e600; --cream:#fff6d6; --mango:#f2a31f; --leaf:#5f9a2a; --red:#d9532b;
  --font:"Baloo Tammudu 2","Noto Sans Telugu",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0e1c16;overflow:hidden;font-family:var(--font);color:var(--cream);overscroll-behavior:none}
body{touch-action:none;user-select:none;-webkit-user-select:none}
#viewport{position:fixed;inset:0;display:grid;place-items:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
/* #stage is a fixed 1280x720 design space, scaled to fit by game.js */
#stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform-origin:0 0;background:#9fd6f0;overflow:hidden;border-radius:10px;box-shadow:0 10px 60px #000a}
#c{position:absolute;inset:0;width:1280px;height:720px;display:block;touch-action:none;cursor:crosshair}

/* HUD */
#hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:22px;padding:14px 20px;pointer-events:none;background:linear-gradient(#0a1a1299,#0a1a1200)}
#hud[hidden]{display:none}
#hud .btns{pointer-events:auto;margin-left:auto;display:flex;gap:8px}
.stones{display:flex;gap:6px;min-width:150px;align-items:center}
.stones i{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d6dae0,#7d838d 70%);box-shadow:0 2px 0 #0006,inset 0 -2px 3px #0005;display:block}
.stones i.used{opacity:.18;filter:grayscale(1)}
.score{flex:1;max-width:520px;min-width:0}
.lvl{font-size:17px;line-height:1;margin-bottom:18px;text-shadow:0 2px 0 #0008;white-space:nowrap}
.lvl b{color:var(--yellow);font-weight:800}
.bar{position:relative;height:16px;border-radius:9px;background:#0d1d1699;border:2px solid #fff8;overflow:visible}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:linear-gradient(90deg,#8fd13a,var(--mango));width:0;transition:width .35s}
.bar .mk{position:absolute;top:-5px;width:4px;height:22px;border-radius:2px;background:#fff;opacity:.9}
.bar .mk::after{content:"★";position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:13px;color:#fff;text-shadow:0 1px 0 #000}
.bar .mk.got{background:var(--yellow)} .bar .mk.got::after{color:var(--yellow)}
.pts{font-size:30px;font-weight:800;line-height:1;text-shadow:0 2px 0 #0009;white-space:nowrap}
.pts small{font-size:16px;opacity:.85;font-weight:500;margin-left:4px}
button.ico{width:46px;height:46px;border-radius:12px;border:2px solid #fff9;background:#172b23cc;color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
button.ico:hover{background:#244235}
button.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

#toast{line-height:1.25;position:absolute;left:50%;top:92px;transform:translate(-50%,-10px);max-width:760px;padding:10px 22px;border-radius:16px;background:#172b23ee;border:2px solid var(--yellow);font-size:21px;text-align:center;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* Screens & cards */
.screen{position:absolute;inset:0;display:none;place-items:center;background:radial-gradient(ellipse at 50% 40%,#0a1a1255,#0a1a12cc);z-index:5}
.screen.show{display:grid}
#screenTitle{background:linear-gradient(#0a1a1233,#0a1a12aa)}
.card{position:relative;width:640px;max-width:92%;padding:26px 34px 24px;border-radius:26px;background:linear-gradient(#244235f4,#172b23f7);border:3px solid var(--yellow);box-shadow:0 14px 50px #000a,inset 0 0 0 4px #ffffff10;text-align:center}
.card.wide{width:1040px}.card.small{width:520px}
.card h2{margin:6px 0 4px;font-size:34px;line-height:1.35;color:var(--yellow)}
.card.title{padding-top:70px;width:680px}
.mangoLogo{position:absolute;left:50%;top:-58px;width:116px;transform:translateX(-50%) rotate(-8deg);filter:drop-shadow(0 8px 6px #0007)}
.eyebrow{margin:0 0 6px;font:700 13px/1 system-ui,sans-serif;letter-spacing:.14em;color:#c9d9a0}
h1{margin:0;line-height:.95;display:flex;flex-direction:column;align-items:center}
h1 .te{line-height:1.3;margin-top:8px;font-size:58px;font-weight:800;color:var(--yellow);text-shadow:0 4px 0 #0007}
h1 .en{font-size:30px;font-weight:700;letter-spacing:.06em;margin-top:6px}
.sub{margin:8px 0 12px;font-size:24px;color:var(--mango);font-weight:700}
.blurb{line-height:1.35;margin:0 auto 18px;max-width:520px;font-size:19px;line-height:1.35;color:#eaf0d6}
.fine{margin:14px 0 0;font:500 13px system-ui,sans-serif;opacity:.7}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.col{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.btn{font:700 22px/1 var(--font);padding:14px 26px;min-height:52px;border-radius:14px;border:2px solid var(--yellow);background:transparent;color:var(--yellow);cursor:pointer}
.btn:hover{background:#ffffff14}
.btn.primary{background:var(--yellow);color:var(--ink);box-shadow:0 4px 0 #a39a00}
.btn.primary:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(2px)}
.btn[hidden]{display:none}
.how{list-style:none;padding:0;margin:8px 0 0;text-align:left;font-size:19px;line-height:1.3}
.how li{padding:9px 0;border-bottom:1px dashed #fff3}
.how li:last-child{border:0}
.how em{display:block;font-size:15px;opacity:.75;font-style:normal;margin-top:3px}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.dot.raw{background:#7fb23a}.dot.ripe{background:#f28c1f}.dot.gold{background:#ffd21a;box-shadow:0 0 6px #ffd21a}

.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:6px}
.lv{position:relative;padding:12px 6px 10px;border-radius:16px;border:2px solid #f4e60099;background:#ffffff0d;color:var(--cream);cursor:pointer;font-family:var(--font);display:flex;flex-direction:column;align-items:center;gap:2px;min-height:118px}
.lv:hover:not(:disabled){background:#f4e60022;border-color:var(--yellow)}
.lv .n{font-size:30px;font-weight:800;color:var(--yellow);line-height:1}
.lv .nm{font-size:14px;line-height:1.1;font-weight:700}
.lv .tt{font-size:13px;opacity:.75}
.lv .st{font-size:19px;letter-spacing:2px;color:#ffffff40;margin-top:auto}
.lv .st b{color:var(--yellow);font-weight:400}
.lv:disabled{opacity:.4;cursor:not-allowed}
.lv:disabled::after{content:"🔒";position:absolute;right:8px;top:6px;font-size:14px}

.te.big{margin:0 0 4px;font-size:30px;color:var(--mango);font-weight:800}
.stars{display:flex;justify-content:center;gap:10px;margin:6px 0 12px;height:70px}
.stars span{font-size:62px;line-height:70px;color:#ffffff2e;transition:transform .5s cubic-bezier(.3,1.8,.5,1),color .3s;transform:scale(.7)}
.stars span.on{color:var(--yellow);transform:scale(1) rotate(-6deg);text-shadow:0 0 16px #f4e60099}
.tally{margin:0 auto;max-width:340px;font-size:20px}
.tally div{display:flex;justify-content:space-between;padding:4px 0}
.tally dt{opacity:.85}.tally dd{margin:0;font-weight:800}
.tally .tot{border-top:2px solid #fff4;margin-top:4px;padding-top:8px;font-size:26px;color:var(--yellow)}
.msg{line-height:1.3;margin:10px 0 0;font-size:17px;opacity:.85;min-height:22px}

#rotate{display:none;position:fixed;inset:0;z-index:99;background:#0e1c16;color:var(--yellow);place-items:center;text-align:center;font-size:24px}
#rotate>div{display:grid;gap:8px;justify-items:center}
@media (orientation:portrait) and (max-width:820px){#rotate{display:grid}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.card .eyebrow{margin-bottom:12px}
.card h2{margin-top:2px}

.pill{height:46px;padding:0 16px;border-radius:23px;border:2px solid #fff9;background:#172b23cc;color:#fff;font:700 17px/1 var(--font);cursor:pointer}
.pill:hover{background:#244235}
.pill.armed{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.pill[hidden]{display:none}

/* Studio navigation remains available in title and pause screens. */
.fine a{color:#ffe27a;text-underline-offset:3px}.col a.btn{text-decoration:none;text-align:center;display:block}