:root{--panel:#10141cd1;--panel-edge:#ffffff17;--text:#efe3ce;--text-dim:#a9b0ba;--accent:#ffb454;--accent2:#7fd1ff;--danger:#ff6d5a;--granite-deep:#151d27;--stone:#7d8590;--mustard:#d4a03c;--display:"Familjen Grotesk", system-ui, sans-serif;--body:"Karla", "Avenir Next", system-ui, sans-serif;--mono:"Martian Mono", ui-monospace, monospace;font-family:var(--body)}*{box-sizing:border-box;margin:0;padding:0}:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}button,input,a,.levelcard{touch-action:manipulation;-webkit-tap-highlight-color:transparent}html,body,#app{width:100%;height:100%;color:var(--text);background:#0b0a10;overflow:hidden}canvas.game{cursor:crosshair;touch-action:none;width:100%;height:100%;display:block}.hud{pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0}.hud .topbar{background:var(--panel);border:1px solid var(--panel-edge);pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;align-items:center;gap:18px;padding:8px 18px;display:flex;position:absolute;top:10px;left:50%;transform:translate(-50%);box-shadow:0 4px 18px #00000073}.stat{flex-direction:column;align-items:center;min-width:64px;display:flex}.stat .value{letter-spacing:.5px;font-variant-numeric:tabular-nums;font-size:19px;font-weight:700}.stat .label{text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim);font-size:10px}.stat .value.warn{color:var(--danger)}.stat .value.good{color:var(--accent)}.controlbtn{pointer-events:auto;border:1px solid var(--panel-edge);color:var(--text);cursor:pointer;background:#ffffff12;border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600;transition:background .12s,transform 60ms}@media (hover:hover){.controlbtn:hover{background:#ffffff29}}.controlbtn:active{transform:scale(.94)}.controlbtn.armed{background:var(--danger);color:#1a0a08}.skillbar{background:var(--panel);border:1px solid var(--panel-edge);pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:14px;gap:8px;padding:10px;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%);box-shadow:0 6px 22px #00000080}.skill{width:64px;height:76px;color:var(--text);cursor:pointer;background:#ffffff0f;border:2px solid #0000;border-radius:10px;flex-direction:column;flex:none;align-items:center;padding-top:4px;font-family:inherit;transition:background .12s,border-color .12s,transform 80ms;display:flex;position:relative}@media (hover:hover){.skill:hover{background:#ffffff21;transform:translateY(-2px)}}.skill.selected{border-color:var(--accent);background:#ffb64829;box-shadow:0 0 14px #ffb64859}.skill.depleted{opacity:.35;cursor:not-allowed}.skill canvas{width:40px;height:40px}.skill .count{font-variant-numeric:tabular-nums;font-size:15px;font-weight:800}.skill .key{color:var(--text-dim);font-size:10px;position:absolute;top:3px;left:6px}.skill .name{text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);font-size:8.5px}.toasts{flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:74px;left:50%;transform:translate(-50%)}.toast{background:var(--panel);border:1px solid var(--panel-edge);border-left:3px solid var(--danger);border-radius:8px;padding:6px 14px;font-size:13px;animation:.25s ease-out toastIn,.4s ease-in 3.2s forwards toastOut}.toast.info{border-left-color:var(--accent2)}@keyframes toastIn{0%{opacity:0;transform:translateY(-8px)}}@keyframes toastOut{to{opacity:0;transform:translateY(-6px)}}.cursorTip{pointer-events:none;background:var(--panel);border:1px solid var(--panel-edge);white-space:nowrap;border-radius:6px;padding:3px 8px;font-size:11.5px;position:absolute;transform:translate(12px,-26px)}.overlay{pointer-events:auto;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#06050aa8;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay .card{background:var(--panel);border:1px solid var(--panel-edge);text-align:center;border-radius:18px;max-width:460px;padding:34px 48px;box-shadow:0 14px 50px #0009}.overlay h2{letter-spacing:1px;margin-bottom:6px;font-size:30px}.overlay h2.won{color:var(--accent)}.overlay h2.lost{color:var(--danger)}.overlay p{color:var(--text-dim);margin-bottom:20px;font-size:14px;line-height:1.5}.overlay .buttons{justify-content:center;gap:10px;display:flex}.bigbtn{background:var(--accent);color:#241503;cursor:pointer;border:none;border-radius:10px;padding:12px 26px;font-size:15px;font-weight:800;transition:transform 80ms,filter .12s}.bigbtn:hover{filter:brightness(1.12)}.bigbtn:active{transform:scale(.95)}.bigbtn.ghost{color:var(--text);background:#ffffff1a}.menu{background:linear-gradient(180deg, var(--granite-deep) 0, var(--granite-deep) 420px, #0e141c 1400px);padding:0 24px 80px;position:absolute;inset:0;overflow-y:auto}.menu.splashing{overflow:hidden}.menu .hero{z-index:0;pointer-events:none;animation:.9s ease-out both heroIn;position:fixed;inset:0}@keyframes heroIn{0%{opacity:0}}@keyframes cardIn{0%{opacity:0;transform:translateY(16px)}}.menu .hero canvas.cover,.menu .hero canvas.hero3dgl{width:100%;height:100%;display:block;position:absolute;inset:0}.menu .herohint{z-index:2;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#5c6673;z-index:3;pointer-events:none;align-items:center;gap:.6rem;font-size:.58rem;display:flex;position:fixed;bottom:clamp(18px,3.5vh,40px);right:clamp(20px,3.2vw,40px)}.menu .herohint .dot{background:var(--accent);width:5px;height:5px;box-shadow:0 0 9px var(--accent);border-radius:50%;animation:2.6s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.35}50%{opacity:1}}.splashscreen:focus-visible{outline:none}.splashscreen{z-index:6;text-align:center;cursor:pointer;opacity:1;background:radial-gradient(85% 65% at 50% 48%,#151d2747 0%,#151d27db 72%,#0e141c 100%);flex-direction:column;justify-content:center;align-items:center;transition:opacity .55s;display:flex;position:absolute;inset:0}.menu.entered .splashscreen{opacity:0;pointer-events:none}.splashscreen .s-eyebrow{font-family:var(--mono);letter-spacing:.36em;text-transform:uppercase;color:var(--stone);margin-bottom:1.6rem;font-size:.6rem}.splashscreen .s-mark{font-family:var(--display);letter-spacing:-.05em;color:var(--text);text-shadow:0 0 70px #ffb45429;font-size:clamp(5rem,17vw,15rem);font-weight:700;line-height:.8}.splashscreen .s-rule{background:linear-gradient(90deg,#0000,#d4a03c8c,#0000);width:min(30rem,62vw);height:1px;margin:2rem 0 1.5rem}.splashscreen .s-tag{color:#c6cbd2;max-width:34rem;padding:0 1.5rem;font-size:clamp(.95rem,1.5vw,1.1rem);line-height:1.55}.splashscreen .s-start{font-family:var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--mustard);margin-top:3rem;font-size:.62rem;animation:3s ease-in-out infinite breathe}@keyframes breathe{0%,to{opacity:.4}50%{opacity:1}}.menu.splashing .herohint,.menu.splashing .menuhead,.menu.splashing .coderow,.menu.splashing .levelgrid,.menu.splashing .hint,.menu.splashing .menufoot{opacity:0}.menu .herohint,.menu .menuhead,.menu .coderow,.menu .levelgrid,.menu .hint,.menu .menufoot{transition:opacity .5s .25s}.levelgrid{z-index:1;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),340px));justify-content:center;gap:18px;margin-top:30px;display:grid;position:relative}.levelcard{font:inherit;color:var(--text);text-align:left;background:var(--panel);border:1px solid var(--panel-edge);cursor:pointer;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));animation:.5s cubic-bezier(.22,.8,.3,1) both cardIn;animation-delay:var(--d,0s);border-radius:14px;transition:transform .16s ease-out,box-shadow .16s,border-color .16s;position:relative;overflow:hidden}@media (hover:hover){.levelcard:hover{--lift:-5px;border-color:var(--accent);box-shadow:0 14px 38px #0000008c}}.levelcard:focus-visible{border-color:var(--accent);box-shadow:0 14px 38px #0000008c}.levelcard:after{content:"";background:radial-gradient(340px circle at var(--mx,50%) var(--my,40%), #ffecc81f, transparent 62%);opacity:0;pointer-events:none;transition:opacity .2s;position:absolute;inset:0}@media (hover:hover){.levelcard:hover:after{opacity:1}}.levelcard canvas{width:100%;height:150px;display:block}.levelcard .meta{padding:12px 16px 14px}.levelcard .num{color:var(--accent);letter-spacing:2px;font-size:11px}.levelcard h3{margin:2px 0 3px;font-size:17px}.levelcard .sub{color:var(--text-dim);font-size:12px}.levelcard .done{float:right;color:var(--accent);font-size:18px}.hint{z-index:1;text-align:center;color:var(--text-dim);margin-top:30px;font-size:12px;line-height:1.9;position:relative}.menufoot{z-index:1;justify-content:center;align-items:center;gap:26px;margin-top:18px;display:flex;position:relative}.footlink{color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;cursor:pointer;background:0 0;border:none;padding:4px 2px;font-family:inherit;font-size:11px;text-decoration:none;transition:color .12s}.footlink:hover{color:var(--accent)}.creditsoverlay{z-index:10;position:fixed}.overlay .card.creditscard{text-align:left;max-width:540px}.overlay .card.creditscard h2{text-align:center}.creditsbody{max-height:56vh;color:var(--text-dim);margin-bottom:20px;padding-right:8px;font-size:13px;line-height:1.6;overflow-y:auto}.creditsbody h3{color:var(--text);text-transform:uppercase;letter-spacing:1.6px;margin:16px 0 6px;font-size:12px}.creditsbody p{margin:6px 0}.creditsbody ul{margin:6px 0;padding-left:18px}.creditsbody a{color:var(--accent2);text-decoration:none}.creditsbody a:hover{text-decoration:underline}.creditsbody strong{color:var(--text)}.htp-skills{gap:8px;margin:10px 0 4px;display:grid}.htp-skill{grid-template-columns:40px 1fr;align-items:center;gap:10px;display:grid}.htp-skill canvas{border:1px solid var(--panel-edge);background:#ffffff0f;border-radius:8px;width:36px;height:36px;padding:2px}kbd{border:1px solid var(--panel-edge);background:#ffffff1a;border-radius:4px;padding:1px 6px;font-family:inherit;font-size:11px}.menuhead{z-index:1;pointer-events:none;justify-content:center;padding-top:7vh;animation:1.1s cubic-bezier(.22,.8,.3,1) both markIn;display:flex;position:relative}.gamemark{font-family:var(--display);letter-spacing:-.04em;background:linear-gradient(100deg,#efe3ce 0% 38%,#ffd9a0 48%,#ffb454 52%,#efe3ce 62% 100%) 120% 0/260% 100%;color:#0000;filter:drop-shadow(0 4px 18px #0a0e14cc)drop-shadow(0 0 30px #ffb4544d);will-change:transform, background-position;-webkit-background-clip:text;background-clip:text;font-size:clamp(3.6rem,9vw,8rem);font-weight:700;line-height:.82;animation:7s ease-in-out 1.2s infinite markSheen,11s ease-in-out infinite markFloat}@keyframes markSheen{0%{background-position:120% 0}45%,to{background-position:-60% 0}}@keyframes markFloat{0%,to{transform:translateY(0)rotate(-.35deg)}28%{transform:translateY(-8px)rotate(.25deg)}55%{transform:translateY(-3px)rotate(-.15deg)}78%{transform:translateY(-6px)rotate(.2deg)}}@keyframes markIn{0%{opacity:0;transform:translateY(-14px)scale(.985)}}.coderow{z-index:1;justify-content:center;align-items:center;gap:8px;margin-top:30vh;display:flex;position:relative}.codeinput{border:1px solid var(--panel-edge);color:var(--text);letter-spacing:3px;text-transform:uppercase;text-align:center;background:#ffffff12;border-radius:8px;outline:none;width:200px;padding:8px 14px;font-size:14px}.codeinput:focus{border-color:var(--accent)}.codemsg{color:var(--danger);min-width:90px;font-size:12px}.levelcard.locked{filter:grayscale(.9)brightness(.55);cursor:default}.levelcard.locked:hover{--lift:0px;border-color:var(--panel-edge);box-shadow:none}.levelcard.locked:hover:after{opacity:0}@media (prefers-reduced-motion:reduce){.menu .hero,.levelcard,.menuhead,.gamemark,.splashscreen .s-start,.herohint .dot,.rotatehint .glyph{animation:none}.levelcard{transform:none}}.overlay .code{color:var(--text-dim);margin:-8px 0 18px;font-size:13px}.overlay .code b{color:var(--accent2);letter-spacing:4px;font-size:16px}.settings{background:var(--panel);border:1px solid var(--panel-edge);pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;width:240px;padding:14px 16px;position:absolute;top:66px;right:18px;box-shadow:0 8px 26px #00000080}.settings h2{text-transform:uppercase;letter-spacing:1.6px;color:var(--text-dim);margin-bottom:10px;font-size:12px}.setrow{cursor:pointer;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;font-size:13px;display:flex}.setrow input[type=range]{width:110px;accent-color:var(--accent)}.setrow input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}.rotatehint{display:none}@media (pointer:coarse) and (orientation:portrait) and (max-width:700px){.rotatehint{z-index:20;text-align:center;pointer-events:auto;background:#06050aeb;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex;position:absolute;inset:0}}.rotatehint .glyph{color:var(--accent);font-size:48px;animation:2.4s ease-in-out infinite rotateNudge}.rotatehint p{color:var(--text-dim);font-size:15px;line-height:1.6}.rotatehint strong{color:var(--text);font-size:17px}@keyframes rotateNudge{0%,35%,to{transform:rotate(0)}55%,80%{transform:rotate(90deg)}}@supports (height:100dvh){body,#app{height:100dvh}}@media (pointer:coarse){.cursorTip{display:none!important}.controlbtn{min-width:44px;min-height:40px}.setrow input[type=range]{height:28px}}@media (max-width:860px){.hud .topbar{top:calc(6px + env(safe-area-inset-top));left:max(8px, env(safe-area-inset-left));right:max(8px, env(safe-area-inset-right));flex-wrap:wrap;justify-content:center;gap:8px 12px;padding:6px 10px;transform:none}.stat{min-width:48px}.stat .value{font-size:16px}.toasts{top:calc(118px + env(safe-area-inset-top));width:auto;padding:0 12px;left:0;right:0;transform:none}.skillbar{left:max(8px, env(safe-area-inset-left));right:max(8px, env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom));overscroll-behavior-x:contain;scrollbar-width:thin;justify-content:safe center;gap:6px;padding:8px;overflow-x:auto;transform:none}.overlay{padding:12px}.overlay .card{width:min(92vw,460px);padding:24px 20px}.overlay .buttons{flex-wrap:wrap}.settings{top:calc(118px + env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));max-width:calc(100vw - 20px);max-height:58vh;overflow-y:auto}.menu{padding:0 max(14px, env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left))}.coderow{flex-wrap:wrap;row-gap:10px;margin-top:22vh}.menu .herohint{display:none}.codemsg{text-align:center;flex-basis:100%;min-width:0}.menufoot{flex-wrap:wrap;gap:12px 26px}.creditsbody{max-height:48vh}}@media (max-height:480px){.skillbar{padding:6px}.skill{height:62px}.skill .name{display:none}.skill canvas{width:32px;height:32px}.settings{max-height:calc(100vh - 140px);overflow-y:auto}}