@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:#0b1426;--white:#f2f7ff;--muted:#9aacc4;--stroke:#ffffff23;--mint:#8cffc7;--gold:#ffd47d}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#070d1b;color:var(--white);font-family:Nunito,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-user-select:none;user-select:none}
button{cursor:pointer;font:inherit;color:inherit;border:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible{outline:2px solid #aaffd4;outline-offset:3px}
.app{width:min(100%,620px);height:100vh;height:100dvh;margin:0 auto;display:flex;flex-direction:column;position:relative;overflow:hidden;background:radial-gradient(circle at 4% -20%,#284568,transparent 55%),linear-gradient(#0e1c34,#0b1426 70%,#111d31);box-shadow:0 0 90px #000a}
.app:before{content:"";position:absolute;pointer-events:none;inset:0;background-image:radial-gradient(#ffffff23 .6px,transparent .7px);background-size:24px 24px;opacity:.17}
.header{position:relative;z-index:2;min-height:83px;padding:calc(12px + env(safe-area-inset-top)*.48) 16px 11px;display:flex;align-items:center;gap:10px}
.logo{background:linear-gradient(145deg,#253951,#122539);border:1px solid #ffffff38;box-shadow:inset 0 1px #ffffff3c,0 4px 15px #0006;width:47px;height:47px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:0;position:relative}
.orb-mini{display:block;width:21px;height:21px;border:2px solid #fff6;border-radius:50%;box-shadow:0 0 9px #8ce9ff66}
.orb-mini.blue{background:radial-gradient(circle at 29% 25%,#fff,#adf9ff 32%,#359ce1 85%);margin-right:-5px}
.orb-mini.violet{background:radial-gradient(circle at 29% 25%,#fff,#e5c6ff 32%,#a064e1 85%);margin-left:-1px;margin-top:11px}
.brand{flex:1;min-width:0;display:flex;flex-direction:column}
.brand strong{font:900 28px/.9 'Barlow Condensed',Impact,sans-serif;letter-spacing:1.3px;white-space:nowrap}
.brand strong span{color:var(--mint)}
.brand small{font-size:8px;font-weight:900;letter-spacing:1.9px;margin-top:5px;color:#afc2d5;white-space:nowrap}
.header-actions{display:flex;gap:6px}
.round-button{height:34px;width:34px;border:1px solid #ffffff27;border-radius:11px;background:#ffffff0f;font-size:20px;font-weight:900}
.round-button:active,.side-btn:active,.primary-btn:active{transform:translateY(2px)}
.statusbar{position:relative;z-index:2;flex-shrink:0;min-height:63px;margin:0 13px 10px;padding:9px 14px;border-radius:16px;background:linear-gradient(110deg,#22354a,#16263b);border:1px solid #ffffff22;display:flex;justify-content:space-between;align-items:center;gap:14px}
.stage-name{display:flex;flex-direction:column;gap:0;min-width:0}
.stage-name span{font-size:9px;font-weight:900;color:var(--mint);letter-spacing:1.4px;white-space:nowrap}
.stage-name strong{font:900 25px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.8px}
.status-stats{display:flex;gap:16px}
.status-stats>div{min-width:49px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center}
.status-stats span{font-weight:900;letter-spacing:1px;color:#92a9c4;font-size:8px}
.status-stats strong{font:900 19px/1.15 'Barlow Condensed',sans-serif}
.ink-track{width:63px;height:3px;border-radius:3px;background:#0c1526;margin-top:4px;overflow:hidden}
.ink-track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#42d8b3,#bbffe0);transition:width .2s}
.canvas-wrap{position:relative;z-index:1;flex:1;min-height:160px;padding:0 9px;overflow:hidden;display:flex}
.scene{position:relative;flex:1;min-width:0;min-height:0;isolation:isolate;border-radius:21px;overflow:hidden;background:#12283e;border:1px solid #ffffff36;box-shadow:0 12px 30px #0008,inset 0 0 0 1px #ffffff15}
.scene:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 26px #020b1757;border-radius:21px}
#game{height:100%;width:100%;display:block;touch-action:none;cursor:crosshair}
.scene-hud{position:absolute;pointer-events:none;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:11px 10px}
.top-hints,.bottom-hints{display:flex;justify-content:space-between;align-items:center;gap:9px}
.world-pill,.time-pill{font-size:9px;letter-spacing:1px;font-weight:900;border:1px solid #ffffff30;background:#06172a96;backdrop-filter:blur(5px);padding:6px 9px;border-radius:9px}
.time-pill{color:#c9f4dc}
.bottom-hints{align-items:flex-end}
#hint{background:#06172cce;border:1px solid #ffffff22;padding:7px 9px;border-radius:9px;font-weight:900;font-size:9px;letter-spacing:.35px;line-height:1.3;max-width:73%;text-transform:uppercase}
.live{font-size:8px;letter-spacing:.6px;font-weight:900;color:#b7e1d0;white-space:nowrap;text-shadow:0 1px 4px #002}
.toast{position:absolute;z-index:4;left:50%;top:49%;transform:translate(-50%,-50%) scale(.9);border-radius:12px;padding:9px 12px;background:#0a253de6;border:1px solid #9dffe4bf;box-shadow:0 6px 28px #021b2b99;font-size:11px;font-weight:900;letter-spacing:.7px;text-align:center;opacity:0;pointer-events:none;transition:opacity .13s,transform .13s;white-space:nowrap}
.toast.shown{opacity:1;transform:translate(-50%,-50%) scale(1)}
.bottom-panel{z-index:2;position:relative;flex-shrink:0;padding:10px 15px max(11px,env(safe-area-inset-bottom));background:linear-gradient(#15243a,#111d2f);border-top:1px solid #ffffff12}
.marble-status{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.marble-row{display:flex;align-items:center;gap:5px;background:#ffffff08;border:1px solid #ffffff15;padding:7px 9px;border-radius:10px;min-width:0}
.marble-row>span:not(.dot){font-size:9px;color:#bbd4e5;letter-spacing:.4px;font-weight:900}
.dot{height:10px;width:10px;border-radius:50%;box-shadow:0 0 6px currentColor;flex-shrink:0}
.dot.blue{color:#86ecff;background:#8de8ff}.dot.violet{color:#cfacff;background:#d0b0ff}
.progress{background:#061b2a;min-width:10px;height:5px;border-radius:99px;flex:1;overflow:hidden}
.progress i{height:100%;width:0;display:block;transition:width .1s linear}
.p-blue{background:#8feaff}.p-violet{background:#d0b0ff}
.marble-row strong{font-size:8px;letter-spacing:.3px;color:#c6e6d9;white-space:nowrap}
.control-row{display:grid;grid-template-columns:1fr 2.65fr 1fr;gap:9px;height:61px}
.side-btn{border-radius:14px;border:1px solid #ffffff2a;border-bottom:3px solid #0a1524;background:linear-gradient(#2b4359,#1a3045);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.side-btn>span{font:800 26px/1 'Barlow Condensed',sans-serif}
.side-btn small{font-size:9px;letter-spacing:.8px;font-weight:900;color:#b4cbe0}
.side-btn:disabled{opacity:.35}
.primary-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(130deg,#c3ffe3,#7df4b7 68%,#59c9ad);border-bottom:4px solid #368f77;border-radius:16px;color:#173c3d;box-shadow:0 5px 19px #6ef0be46}
.primary-btn>span{font-size:18px}
.primary-btn strong{font:900 24px 'Barlow Condensed',Impact,sans-serif;letter-spacing:.8px}
.gesture-tip{font-size:9px;font-weight:700;letter-spacing:.1px;text-align:center;color:#aabdd3;margin-top:10px;line-height:1.4}
.gesture-tip strong{color:#d8fff1}
.scrim{position:absolute;z-index:10;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#050c1adf;backdrop-filter:blur(8px)}
.scrim[aria-hidden=true]{display:none}
.dialog{width:min(100%,465px);max-height:min(90%,780px);overflow-y:auto;overscroll-behavior:contain;border-radius:23px;background:linear-gradient(155deg,#243b56,#121f33 78%);border:1px solid #ffffff3b;padding:20px;box-shadow:0 20px 70px #0009}
.dialog .eyebrow{font-size:10px;letter-spacing:2px;color:#a0ffd4;font-weight:900}
.dialog h2{font:900 42px/.95 'Barlow Condensed',Impact,sans-serif;letter-spacing:.2px;margin:7px 0 10px}
.dialog p{font-size:12px;line-height:1.6;color:#bfd0e1;margin:10px 0 17px}
.dialog .topline{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dialog .xbtn{min-width:35px;height:35px;border:1px solid #ffffff21;background:#ffffff16;border-radius:10px;font-size:23px}
.dialog .action{width:100%;display:block;border-radius:13px;padding:13px 12px;margin-top:9px;background:linear-gradient(130deg,#baffdf,#7be9b6);color:#173b3b;border-bottom:3px solid #379a79;font:900 22px 'Barlow Condensed',sans-serif;letter-spacing:.7px}
.dialog .action.alt{background:#314761;color:#e4f4ff;border-bottom-color:#14263d}
.dialog .big-star{font:900 58px/1 'Barlow Condensed',Impact,sans-serif;color:#ffd87e;letter-spacing:2px;margin:15px 0}
.dialog .metric{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid #ffffff19;font-size:11px}
.dialog .metric strong{color:#c1ffe4}
.how{display:flex;gap:12px;align-items:center;margin:10px 0;padding:12px;border-radius:13px;border:1px solid #ffffff1b;background:#ffffff09}
.how b{font-size:25px;min-width:34px;text-align:center;color:#adffdd}
.how span{font-size:12px;line-height:1.4}
.chapter{margin-top:19px}
.chapter .chaphead{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:900;padding-bottom:8px;border-bottom:1px solid #ffffff20}
.chapter .chaphead small{font-size:9px;color:#91a8c0}
.level-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:9px}
.level{aspect-ratio:.86;min-width:0;padding:1px;border:1px solid #ffffff27;background:#ffffff0e;border-radius:9px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px}
.level strong{font:900 19px 'Barlow Condensed',sans-serif}
.level small{font-size:9px;letter-spacing:-1px;color:#ffd47d}
.level.locked{opacity:.35}.level.unlocked{background:#82f3bd1d;border-color:#a2ffdc72}.level.selected{box-shadow:inset 0 0 0 1px #b6ffe0;background:#70ffbd38}
@media(max-height:730px){.header{min-height:67px;padding-top:7px;padding-bottom:6px}.logo{height:37px;width:37px}.orb-mini{height:16px;width:16px}.brand strong{font-size:25px}.statusbar{min-height:50px;margin-bottom:5px;padding:6px 12px}.bottom-panel{padding-top:7px}.marble-status{margin-bottom:6px}.marble-row{padding:5px 7px}.control-row{height:49px}.gesture-tip{margin-top:5px;font-size:8px}.scene{border-radius:16px}.dialog{padding:16px}}
@media(max-width:350px){.header{gap:6px;padding-left:10px;padding-right:10px}.brand strong{font-size:23px}.round-button{width:29px;height:29px}.header-actions{gap:4px}.brand small{letter-spacing:1px}.marble-status{gap:5px}.marble-row{gap:3px;padding:5px}.marble-row strong{font-size:7px}.gesture-tip{font-size:8px}}