:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;background:#081523;color:#eaf9ff;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;overscroll-behavior:none}
body{background:radial-gradient(ellipse at 50% 27%,#20415b 0%,#102b40 42%,#071521 95%);overflow:hidden}
button{cursor:pointer;font:inherit}button:focus-visible{outline:2px solid #a8ffe5;outline-offset:2px}
.app{max-width:500px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;height:100vh;height:100dvh;padding:max(12px,env(safe-area-inset-top)) 15px max(9px,env(safe-area-inset-bottom));overflow:hidden}
.top{height:49px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px}.identity{display:flex;gap:10px;align-items:center}.mark{width:42px;height:42px;border:1px solid #8efde475;border-radius:12px;display:grid;place-items:center;background:#224550;color:#b3ffe7;font-size:27px;box-shadow:0 0 24px #7cfdda29}.logo{font-weight:950;font-size:21px;letter-spacing:1px;line-height:1}.logo span{color:#a0ffe0}.eyebrow{font-size:8px;font-weight:900;letter-spacing:1.8px;color:#88acc1;margin-top:5px}.topactions{display:flex;align-items:center;gap:8px}.small,.stagebtn{height:38px;background:#152d43;border:1px solid #44677a;color:#e0faf9;border-radius:11px;font-size:17px;font-weight:800}.small{width:39px}.stagebtn{min-width:64px;padding:0 10px;font-size:14px}
.progress{height:3px;flex-shrink:0;background:#25465a;margin-top:13px;border-radius:7px;overflow:hidden}.progress>div{width:4%;height:100%;background:linear-gradient(90deg,#53c8dd,#a9ffda);transition:width .25s}
.intro{text-align:center;flex-shrink:0;padding:16px 0 9px}.chapter{font-size:10px;letter-spacing:1.9px;font-weight:900;color:#7ce7d2}.intro h1{font-size:clamp(25px,7vw,32px);line-height:1.1;font-weight:950;letter-spacing:-1px;margin:8px 0 5px}.intro p{font-size:12px;min-height:17px;margin:0;color:#abc4d0}
.play{min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.boardFrame{flex-shrink:1;width:min(100%,414px,calc((100dvh - 328px)*6/7));max-height:100%;padding:7px;background:linear-gradient(135deg,#6492a0,#24495c 40%,#4c7e88 70%,#153449);border-radius:23px;box-shadow:0 14px 50px #0009,0 0 34px #9dffda12}.board{position:relative;aspect-ratio:6/7;overflow:hidden;border-radius:17px;border:1px solid #74a0a37a;background:radial-gradient(circle at 48% 40%,#1a3c4f,#102940 64%,#0a1c2e);touch-action:none;cursor:grab}.board:active{cursor:grabbing}
.cells,.overlayObjects{position:absolute;inset:0;pointer-events:none}.cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr))}.cell{border-right:1px solid #b1e2d61c;border-bottom:1px solid #b1e2d61c;position:relative}.cell:after{content:"";position:absolute;width:3px;height:3px;background:#9fdbdb20;border-radius:50%;top:50%;left:50%}.cell.wall{border-radius:9px;border:1px solid #699aaa58;background:linear-gradient(140deg,#426879,#243e53 64%,#132d43);box-shadow:inset 2px 2px 3px #d9ffff24,inset -5px -5px 7px #02152199,0 3px 9px #06131d9c}.cell.wall:after{width:24%;height:24%;left:38%;top:38%;border:1px solid #99ccd14c;border-radius:3px;background:#244c605b}
.goal,.actor{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;--c:#a4ffe7}.goal{width:13%;aspect-ratio:1;border:2px solid var(--c);border-radius:16px;background:#0c2739c7;box-shadow:0 0 17px color-mix(in srgb,var(--c) 35%,transparent),inset 0 0 14px #081727}.goal:before{content:"";position:absolute;inset:6%;border:1px dashed var(--c);border-radius:11px;opacity:.68}.goal .symbol{font-size:clamp(19px,5vw,29px);color:var(--c);opacity:.72}.goal.filled{opacity:.4;background:var(--c);box-shadow:0 0 25px var(--c)}
.actor{z-index:3;width:12%;aspect-ratio:1;border:2px solid #ffffffb4;border-radius:17px;background:linear-gradient(145deg,#fff 0%,var(--c) 36%,color-mix(in srgb,var(--c) 35%,#051527) 100%);box-shadow:0 4px 8px #0008,0 0 20px color-mix(in srgb,var(--c) 52%,transparent),inset -4px -5px 10px #0015226b;transition:left .275s cubic-bezier(.18,.84,.28,1),top .275s cubic-bezier(.18,.84,.28,1);will-change:left,top}.actor:before{content:"";inset:-5px;position:absolute;border:1px solid var(--c);border-radius:20px;opacity:.35}.actor .symbol{color:#123142;font-size:clamp(20px,5vw,28px);font-weight:900;text-shadow:0 1px 1px #fff9}.actor.fixed{box-shadow:0 0 23px var(--c),0 4px 7px #0007}.actor.instant{transition:none!important}
.c0{--c:#8cfce2}.c1{--c:#ffb5a5}.c2{--c:#f8de80}
.particle{width:6px;height:6px;border-radius:50%;position:absolute;background:var(--c);box-shadow:0 0 9px var(--c);animation:burst .6s ease-out forwards;z-index:6}@keyframes burst{to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
.guide{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:13px 22px;border:1px solid #b0ffe2a1;border-radius:18px;background:#0b293be8;color:#d2fff0;text-align:center;box-shadow:0 13px 29px #0009;animation:bob .8s ease-in-out infinite alternate;z-index:10;pointer-events:none}.guide[hidden]{display:none}.guide span{display:block;font-size:44px;line-height:1}.guide small{display:block;font-size:10px;letter-spacing:2px;font-weight:900}@keyframes bob{to{transform:translate(-50%,-42%)}}.legend{display:flex;align-items:center;justify-content:center;gap:15px;font-size:9px;letter-spacing:1px;font-weight:850;color:#85a9ba;flex-shrink:0}.legend span{display:flex;align-items:center;gap:6px}.legend b{font-size:18px;color:#7acbb5}.legend i{display:block;width:12px;height:12px}.legend .live{border-radius:4px;background:#a3ffe2;box-shadow:0 0 8px #9cffe7}.legend .pad{border-radius:4px;border:2px solid #a0ffe3}
.controls{margin-top:12px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-shrink:0}.status{height:61px;min-width:0;flex:1;padding:6px 4px;border-radius:13px;border:1px solid #2f5265;background:#142b41;display:flex;align-items:center;justify-content:space-around}.status div{text-align:center}.status small{display:block;font-size:8px;color:#89aebd;letter-spacing:.85px;font-weight:900}.status strong{display:block;font-size:20px;margin-top:2px}.status>i{width:1px;height:22px;background:#426376}.buttons{display:flex;gap:7px}.buttons button{height:61px;width:48px;border-radius:13px;background:#173247;border:1px solid #3c6172;color:#d2f5eb;font-size:28px;font-weight:700}.buttons button:disabled{opacity:.28}.buttons #hint{color:#ffe49a}
.feedback{height:21px;flex-shrink:0;font-size:11px;color:#a7c4d1;text-align:center;margin-top:9px}.bottomline{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-top:3px;color:#578195;font-weight:850;letter-spacing:1px;font-size:9px}
.veil{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:max(18px,env(safe-area-inset-top)) 17px max(18px,env(safe-area-inset-bottom));background:#04101de8;backdrop-filter:blur(13px)}.veil[hidden]{display:none}.panel{width:min(100%,425px);border:1px solid #558d95;border-radius:25px;padding:27px 20px;text-align:center;background:radial-gradient(circle at 50% 0%,#2a5360,#142e40 64%,#102638);box-shadow:0 25px 80px #000c}.bigstar{font-size:73px;color:#bbffe7;line-height:1;text-shadow:0 0 27px #9afbdc96}.panel h2{font-size:27px;letter-spacing:-.5px;margin:9px 0}.rating{font-size:32px;letter-spacing:6px;color:#ffe29d;text-shadow:0 0 19px #ffde9a58}.panel p{font-size:13px;color:#b1d1dc;margin:11px 0 20px}.primary{display:block;width:100%;border:0;border-radius:12px;background:linear-gradient(90deg,#84f3d5,#baffea);color:#10353c;padding:15px;font-size:13px;font-weight:950;letter-spacing:1px;box-shadow:0 8px 26px #85f5d426}.ghost{border:0;background:transparent;color:#a3beca;margin-top:11px;padding:8px;font-weight:850;font-size:12px}.pickhead{display:flex;justify-content:space-between;align-items:flex-start;text-align:left}.pickhead h2{margin:6px 0 16px;font-size:25px}.levels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.lvl{height:47px;border-radius:10px;background:#173649;border:1px solid #416c79;color:#dcf5f6;font-weight:900;font-size:15px;position:relative}.lvl:disabled{opacity:.27}.lvl.current{border-color:#aeffe0;background:#285c62}.lvl.done:after{content:"✦";position:absolute;right:3px;bottom:1px;color:#ffe298;font-size:9px}.panel .picknote{font-size:11px;margin:15px 0 0}
@media(max-height:740px){.app{padding-top:max(7px,env(safe-area-inset-top))}.top{height:42px}.mark{width:36px;height:36px;font-size:23px}.logo{font-size:19px}.progress{margin-top:9px}.intro{padding:10px 0 6px}.intro h1{font-size:25px;margin:6px 0 4px}.boardFrame{width:min(100%,414px,calc((100dvh - 277px)*6/7))}.controls{margin-top:7px}.status,.buttons button{height:52px}.buttons button{width:46px}.feedback{margin-top:5px}.legend{font-size:8px}}
@media(max-height:605px){.app{padding:5px 12px}.top,.progress,.intro,.legend,.bottomline{display:none}.boardFrame{width:min(70vw,calc((100dvh - 92px)*6/7))}.controls{width:min(400px,100%);margin:5px auto 0}.feedback{font-size:10px}}
@media(prefers-reduced-motion:reduce){.actor{transition:none}.guide{animation:none}}