@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Nunito:wght@500;600;700;800;900&display=swap');
:root {--bg:#101a2b;--panel:#17243a;--stroke:rgba(182,211,233,.16);--text:#f4f9ff;--muted:#97aac2;--accent:#83f0b5;--gold:#ffd079;--radius:22px;}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#0b1220;color:var(--text);font-family:Nunito,system-ui,-apple-system,sans-serif;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;touch-action:manipulation}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.35;filter:grayscale(.6);cursor:default}
.shell{width:min(100%,580px);margin:auto;height:100vh;height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden;background:radial-gradient(ellipse at 14% -10%,#263e52 0%,transparent 48%),linear-gradient(160deg,#17253a,#0f1728 65%,#111a2a);box-shadow:0 0 100px #0008}
.shell:before{content:"";pointer-events:none;position:absolute;inset:0;background-image:radial-gradient(#fff2 .7px,transparent .9px);background-size:26px 26px;opacity:.13}
.topbar,.levelbar,.controls{flex-shrink:0;position:relative;z-index:2}
.topbar{height:84px;padding:calc(12px + env(safe-area-inset-top) * .45) 19px 9px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#c3ffe1,#6cdba6);box-shadow:0 3px 0 #308763,0 7px 22px #4cdda73d;transform:rotate(-6deg)}
.brand-mark span{font-size:43px;line-height:1;font-family:Georgia,serif;font-weight:900;color:#193846;transform:rotate(-38deg) translateY(-2px)}
.brand-copy h1{font:900 37px/.87 "Barlow Condensed",Impact,sans-serif;letter-spacing:1.6px;margin:0;text-shadow:0 3px 12px #0005}
.brand-copy h1 span{color:var(--accent)}
.brand-copy small{font:900 9px/1 Nunito,sans-serif;letter-spacing:2.35px;color:#9eafc6}
.topactions{display:flex;gap:7px}
.iconbtn{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;font-size:20px;font-weight:900;color:#c8d9ec;background:#ffffff10;border:1px solid #ffffff18}
.iconbtn:active{background:#ffffff30;transform:scale(.96)}
.mapbtn{font-size:22px;color:var(--accent)}
.levelbar{min-height:67px;margin:0 15px 10px;padding:10px 14px;border:1px solid var(--stroke);border-radius:17px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(110deg,#24354a,#1a293f 75%);box-shadow:0 7px 30px #040b1730}
.level-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.level-id span{font-weight:900;letter-spacing:1.5px;font-size:9px;color:var(--accent);white-space:nowrap}
.level-id strong{font:900 24px/.9 "Barlow Condensed",Impact,sans-serif;letter-spacing:1px}
.counters{display:flex;gap:12px}
.counter{display:flex;flex-direction:column;align-items:center;gap:1px;padding-left:10px;border-left:1px solid #ffffff14}
.counter>span{font-size:8px;letter-spacing:1.1px;font-weight:900;color:var(--muted)}
.counter strong{font:900 21px/1.2 "Barlow Condensed",Impact,sans-serif}
.counter .accent{color:var(--accent)}
.counter .gold{color:var(--gold)}
.counter em{font:700 12px Nunito,sans-serif;font-style:normal;color:#9cacc1}
.game-area{flex:1;min-height:160px;position:relative;padding:0 10px;display:flex;align-items:stretch;justify-content:center;overflow:hidden}
.game-frame{position:relative;width:100%;height:100%;min-height:0;border-radius:23px;overflow:hidden;background:#263c57;box-shadow:inset 0 0 0 1px #ffffff32,0 8px 34px #050a1655;border:1px solid #ffffff28;isolation:isolate}
.game-frame:after{content:"";position:absolute;pointer-events:none;inset:0;border-radius:23px;box-shadow:inset 0 0 38px #0611205b}
#world{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.frame-top,.frame-bottom{position:absolute;left:13px;right:13px;z-index:1;display:flex;align-items:center;justify-content:space-between;pointer-events:none;gap:12px}
.frame-top{top:13px}
.frame-bottom{bottom:13px;align-items:flex-end}
.frame-top span{padding:7px 10px;border:1px solid #ffffff21;background:#07162678;backdrop-filter:blur(6px);border-radius:10px;font-size:9px;letter-spacing:1.15px;font-weight:900}
#areaBadge{color:#e8f5ff}
#timeBadge{color:#c1eacf}
#hint{font-size:10px;line-height:1.6;letter-spacing:.8px;font-weight:900;max-width:69%;padding:7px 9px;background:#081324a0;border-radius:9px;text-shadow:0 1px 2px #001}
.legend{font-size:8px;letter-spacing:.7px;font-weight:900;color:#b5e7d1;white-space:nowrap}
.toast{position:absolute;z-index:4;left:50%;bottom:83px;transform:translateX(-50%) translateY(10px);max-width:90%;width:max-content;background:#0d2336e8;border:1px solid #afffe7aa;color:#effff9;border-radius:13px;padding:9px 13px;letter-spacing:.45px;font-size:11px;font-weight:900;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;box-shadow:0 6px 25px #0016}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.controls{padding:13px 17px max(14px,env(safe-area-inset-bottom));min-height:124px}
.control-row{display:grid;grid-template-columns:1fr 2.25fr 1fr;gap:10px;height:62px}
.smallbtn{background:linear-gradient(180deg,#293b50,#202e40);border:1px solid #ffffff2a;border-bottom:3px solid #0e1723;border-radius:15px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;box-shadow:0 3px 9px #0003}
.smallbtn>span{font:800 27px/1 "Barlow Condensed",sans-serif}
.smallbtn small{font:900 9px Nunito,sans-serif;letter-spacing:1px;color:#aabdd1}
.smallbtn:active:not(:disabled){transform:translateY(2px)}
.playbtn{background:linear-gradient(125deg,#b6ffe2,#80edb4 65%,#53c992);color:#183c39;border-radius:17px;border-bottom:4px solid #379870;display:flex;align-items:center;justify-content:center;gap:13px;box-shadow:0 4px 23px #7ce4ae36;position:relative;overflow:hidden}
.playbtn #rollIcon{font-size:21px}
.playbtn strong{font:900 27px "Barlow Condensed",Impact,sans-serif;letter-spacing:1.6px}
.playbtn:active{transform:translateY(2px)}
.playshine{position:absolute;left:-50%;top:-100%;height:250%;width:25%;transform:rotate(22deg);background:#fff5;animation:shine 5s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,65%{left:-60%}95%,100%{left:150%}}
.footer-tip{margin:11px 0 0;text-align:center;font-size:9px;font-weight:800;color:#93a9bf;line-height:1.4;letter-spacing:.05px}
.overlay{position:absolute;z-index:10;inset:0;background:#06101cda;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:18px}
.overlay[aria-hidden="true"]{display:none}
.modal{width:min(100%,480px);max-height:min(92%,810px);overflow-y:auto;overscroll-behavior:contain;border:1px solid #a7b7db44;border-radius:25px;background:linear-gradient(155deg,#21344a,#151f34 65%);padding:22px;box-shadow:0 18px 70px #000a}
.modal h2{font:900 45px/.95 "Barlow Condensed",Impact,sans-serif;letter-spacing:.3px;margin:4px 0 8px}
.modal h3{font:900 21px "Barlow Condensed",sans-serif;letter-spacing:.3px;margin:0}
.modal p{color:#bbcadc;font-size:13px;line-height:1.6;margin:10px 0 20px}
.modal .eyebrow{font-weight:900;letter-spacing:2.4px;font-size:10px;color:var(--accent)}
.modal .large-score{font:900 49px/1 "Barlow Condensed",Impact,sans-serif;color:#ffd276;text-shadow:0 4px 25px #ffd27638;letter-spacing:2px;padding:10px 0}
.modal .fine{color:#a6b9cd;font-size:11px;margin:7px 0}
.modal .close-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal .xbtn{background:#ffffff14;border-radius:10px;width:34px;height:34px;font-size:21px}
.modal .cta{width:100%;padding:14px;border-radius:14px;margin-top:8px;border-bottom:3px solid #2a8d66;background:linear-gradient(130deg,#affbd9,#75dca6);color:#143b34;font:900 22px "Barlow Condensed",sans-serif;letter-spacing:.8px}
.modal .cta.alt{color:#d5edfa;background:#2e4156;border-bottom-color:#0f182a}
.modal .cta:disabled{opacity:.35}
.chapter{margin-top:19px}
.chapter-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff18;padding:0 0 8px}
.chapter-head span{display:flex;gap:9px;align-items:center;font-weight:900;font-size:12px}
.chapter-head small{color:#91a8bf;font-size:9px;letter-spacing:.9px;font-weight:900}
.level-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:9px}
.level-tile{aspect-ratio:.9;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:10px;background:#ffffff10;border:1px solid #ffffff17}
.level-tile span{font:900 19px "Barlow Condensed",sans-serif}
.level-tile small{font-size:8px;letter-spacing:-.5px;color:#ffd078}
.level-tile.unlocked{border-color:#95f6bf80;background:#7becae18;color:#d6ffed}
.level-tile.active{background:#8febbb30;box-shadow:inset 0 0 0 1px #8febbb}
.level-tile.locked{opacity:.42}
.key-row{display:flex;align-items:center;gap:12px;background:#ffffff09;border:1px solid #ffffff13;border-radius:15px;padding:11px;margin:10px 0}
.key-row b{font-size:27px;min-width:40px;text-align:center;color:var(--accent)}
.key-row span{font-size:12px;color:#d6e2ef;line-height:1.5}
.stat-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #ffffff1b;gap:10px;font-size:12px}
.stat-row strong{color:#e0ffef}
@media(max-height:700px){.topbar{height:68px;padding:8px 14px}.brand-copy h1{font-size:30px}.brand-mark{width:37px;height:37px}.levelbar{min-height:55px;margin-bottom:6px;padding:7px 12px}.controls{min-height:102px;padding:9px 13px max(8px,env(safe-area-inset-bottom))}.control-row{height:54px}.footer-tip{margin-top:6px;font-size:8px}.modal{padding:17px}.game-frame{border-radius:18px}.frame-bottom{bottom:8px}}
@media(min-width:610px){.shell{border-left:1px solid #ffffff1b;border-right:1px solid #ffffff1b}}