:root{color-scheme:dark;--cyan:#8cf7ed;--pink:#ff4e9c;--ink:#070a14;--muted:#95a9b7}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:#eef9ff;font-family:Arial,Helvetica,sans-serif;overscroll-behavior:none}body{touch-action:none}button,input,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid white;outline-offset:4px}button:active{transform:translateY(2px)}#world{position:fixed;inset:0;width:100%;height:100%;display:block}#grain{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,#03081750,transparent 30%,transparent 60%,#02051090);z-index:1}#masthead{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:max(26px,env(safe-area-inset-top)) max(36px,env(safe-area-inset-right)) 12px max(36px,env(safe-area-inset-left));z-index:12;pointer-events:none}.brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:900;letter-spacing:3px}.brand-icon{display:grid;place-items:center;background:var(--cyan);color:#091a23;clip-path:polygon(20% 0,100% 0,100% 75%,80% 100%,0 100%,0 25%);width:39px;height:39px;font-size:28px;font-style:italic;letter-spacing:-3px;padding-right:5px}.brand small{display:block;font-size:9px;letter-spacing:3px;color:var(--muted);margin-top:5px;font-weight:500}.utilities{display:flex;gap:9px;pointer-events:auto}.icon-button{height:42px;min-width:42px;border:1px solid #adcddb30;background:#0a172bb0;color:#e9f9ff;border-radius:8px;font-size:20px}.icon-button span{font-size:9px;margin-left:4px}#sound{padding:0 11px}.screen{position:fixed;inset:0;z-index:5}.hidden{display:none!important}.home-content{position:absolute;left:7%;bottom:17%;max-width:610px}.eyebrow{color:var(--cyan);font-size:12px;letter-spacing:2.6px;font-weight:700;display:flex;align-items:center;gap:9px}.eyebrow>span{height:6px;width:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}h1{font-size:clamp(38px,5.6vw,88px);line-height:1.03;letter-spacing:-3px;margin:20px 0 18px;font-weight:900}h1 em{font-style:normal;color:var(--cyan)}.intro{color:#bdcbd7;font-size:17px;line-height:1.55;margin:0 0 30px;text-shadow:0 1px 8px black}.primary{display:flex;justify-content:space-between;align-items:center;background:var(--cyan);color:#062029;border:0;padding:20px 24px;min-height:58px;width:100%;font-weight:800;font-size:15px;letter-spacing:1.4px;border-radius:3px;box-shadow:0 0 34px #53ffe019;transition:background .2s,box-shadow .2s}.primary:hover{background:#bdfff8;box-shadow:0 0 35px #53ffe038}.primary span{font-size:23px;line-height:1}.home-content>.primary{max-width:325px}.home-meta{display:flex;align-items:center;gap:28px;color:#94a8b8;font-size:10px;letter-spacing:1.1px;margin-top:22px}.home-meta b{color:white;font-size:14px;margin-left:7px;font-variant-numeric:tabular-nums}.home-bottom{position:absolute;bottom:max(26px,env(safe-area-inset-bottom));left:36px;right:36px;display:flex;justify-content:space-between;color:#a3b8c9;font-size:10px;letter-spacing:2px}.mobile-hint{display:none}#hud{position:fixed;inset:0;pointer-events:none;z-index:3}.score-panel{position:absolute;top:108px;left:36px}.score-panel>.eyebrow{font-size:10px;letter-spacing:2px}.score-panel>strong{display:block;font-size:46px;letter-spacing:-2px;line-height:1.1;font-variant-numeric:tabular-nums}.score-panel strong small{font-size:16px;margin-left:5px;color:var(--muted)}.score-row{display:flex;gap:22px;margin-top:12px;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}.shard-icon{color:var(--cyan)}.right-hud{position:absolute;right:36px;top:108px;display:flex;flex-direction:column;align-items:end;gap:5px}.right-hud>span{font-size:10px;letter-spacing:2px;color:var(--muted)}.right-hud>strong{font-size:36px;color:var(--cyan);font-style:italic}.right-hud>small{font-size:11px;letter-spacing:1px;color:var(--muted)}#toast{position:absolute;top:32%;left:0;right:0;text-align:center;color:var(--cyan);font-size:20px;font-weight:900;letter-spacing:3px;text-shadow:0 2px 16px #001919;opacity:0;transition:opacity .15s}#toast.show{opacity:1}#turnCue{position:absolute;top:24%;left:50%;transform:translateX(-50%);background:#071323e8;border:1px solid #8cf7ed90;padding:10px 28px 15px;display:flex;align-items:center;flex-direction:column;border-radius:8px;min-width:200px;box-shadow:0 0 40px #8cf7ed22}#turnArrow{font-size:64px;line-height:1}#turnText{font-size:12px;letter-spacing:2px;font-weight:800}progress{appearance:none;width:100%;height:3px;border:0;margin-top:12px;background:#8cf7ed30}progress::-webkit-progress-bar{background:#8cf7ed30}progress::-webkit-progress-value{background:var(--cyan)}progress::-moz-progress-bar{background:var(--cyan)}#tutorial{position:absolute;bottom:100px;left:15px;right:15px;text-align:center;font-size:13px;letter-spacing:1px;color:#d4f5f7;text-shadow:0 2px 8px black}#powers{position:absolute;top:210px;left:36px;display:flex;flex-direction:column;gap:6px}#powers span{padding:7px 10px;background:#071522bf;border-left:2px solid var(--cyan);font-size:11px;letter-spacing:1px;color:var(--cyan)}#touchControls{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:22px;right:22px;display:none;justify-content:center;gap:10px;pointer-events:auto}#touchControls.visible{display:flex}#touchControls button{width:58px;height:48px;background:#102137b8;border:1px solid #99d5de55;color:#cafff8;border-radius:9px;font-size:23px}.modal-screen{display:flex;align-items:center;justify-content:center;padding:85px 20px 25px;background:#030914a8;backdrop-filter:blur(13px);overflow:auto;touch-action:pan-y;z-index:15}.panel{background:linear-gradient(155deg,#112338ed,#091222f5);border:1px solid #88badb30;padding:36px;width:440px;max-width:100%;border-radius:10px;box-shadow:0 25px 100px #0008}.panel h2{font-size:34px;letter-spacing:-1.2px;margin:14px 0}.panel p{color:#a6bbcc;font-size:15px;line-height:1.55}.panel .primary{margin-top:24px}.secondary{width:100%;padding:15px;margin-top:10px;color:#b9d0df;background:transparent;border:1px solid #88badb25;border-radius:3px;font-size:12px;letter-spacing:1px}.secondary:hover{background:#adcddb10}.result-score{margin-top:28px;display:flex;flex-direction:column;gap:6px}.result-score span{font-size:10px;letter-spacing:2px;color:var(--muted)}.result-score strong{font-size:50px;letter-spacing:-2px;font-variant-numeric:tabular-nums}.results{display:flex;justify-content:space-between;padding:18px 0;border-top:1px solid #88badb25;border-bottom:1px solid #88badb25;margin-top:16px}.results>div{display:flex;flex-direction:column;gap:7px}.results b{font-size:19px}.results span{color:var(--muted);font-size:9px;letter-spacing:1px}.best-result{display:block;text-align:center;font-size:11px;color:var(--muted);margin-top:20px}.setting{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 0;border-bottom:1px solid #88badb20;font-size:14px}.setting select{max-width:190px;width:55%;background:#081320;color:white;border:1px solid #88badb40;padding:10px 6px;border-radius:3px;font-size:12px}.setting input{accent-color:var(--cyan)}.setting input[type=range]{width:45%}.setting input[type=checkbox]{width:20px;height:20px}.settings-note{font-size:12px!important}.settings-panel{margin:auto}.playing .brand small{display:none}
@media(max-width:600px){#masthead{padding: max(19px,env(safe-area-inset-top)) 18px 10px}.brand{font-size:14px;letter-spacing:2px;gap:8px}.brand small{font-size:7px;letter-spacing:2px}.brand-icon{width:31px;height:33px;font-size:24px}.utilities{gap:5px}.icon-button{height:35px;min-width:35px;font-size:18px}#sound{padding:0 7px}.home-content{left:25px;right:25px;bottom:13%;max-width:none}h1{font-size:clamp(36px,9.2vw,56px);letter-spacing:-1.7px}.home-content>.eyebrow{font-size:10px;letter-spacing:2px}.intro{font-size:14px;margin-bottom:23px}.home-content>.primary{max-width:none}.home-meta{justify-content:space-between;gap:7px;font-size:8px;letter-spacing:.6px}.home-meta b{font-size:12px;margin-left:4px}.home-bottom{left:25px;right:25px;bottom:max(20px,env(safe-area-inset-bottom));font-size:8px;letter-spacing:1px;gap:16px}.desktop-hint{display:none}.mobile-hint{display:block}.score-panel{left:20px;top:88px}.score-panel>strong{font-size:36px}.right-hud{top:88px;right:20px}.right-hud>span{font-size:8px}.right-hud>strong{font-size:30px}#powers{left:20px;top:182px}#tutorial{font-size:10px;letter-spacing:.3px;bottom:85px}.panel{padding:25px}.panel h2{font-size:29px}.result-score strong{font-size:43px}.modal-screen{padding-top:35px}.setting{font-size:13px}#turnCue{top:27%}#toast{top:39%;font-size:15px}.score-row{font-size:13px;gap:16px}.home-content{text-shadow:0 2px 15px #0009}}
@media(max-height:560px) and (min-width:601px){#masthead{padding-top:15px}.home-content{bottom:15%;left:5%}h1{font-size:40px;margin:10px 0}.intro{font-size:13px;margin:8px 0 14px}.primary{padding:14px 20px;min-height:45px}.home-meta{margin-top:12px}.home-bottom{bottom:15px}.score-panel,.right-hud{top:76px}.panel{padding:22px}.modal-screen{align-items:flex-start;padding:20px}.panel h2{font-size:28px}.result-score{margin-top:15px}.result-score strong{font-size:38px}.panel .primary{margin-top:15px}.results{padding:12px 0;margin-top:10px}#tutorial{bottom:28px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}