/* UNITIQX Matrix Arcade token-led design system v0.1 */
:root{color-scheme:dark;--canvas:#080f20;--surface:#111c35;--surface-hi:#192b4b;--surface-low:#0b162b;--border:#304563;--text:#eef8ff;--muted:#adc5dc;--accent:#61e9e1;--accent-on:#061a23;--secondary:#b6a2ff;--success:#85f3b7;--danger:#ffa4b6;--warning:#fce08e;--radius:17px;--focus:#ffeb8e;--shadow:0 20px 70px #0006;--space:8px;font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--text);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer;min-height:44px;border:1px solid #4a6486;background:#192e4b;color:var(--text);border-radius:12px;padding:10px 15px;transition:transform .12s,border-color .12s,background .12s}button:hover{background:#23446a;border-color:var(--accent)}button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:3px}a{color:var(--accent);min-height:26px;display:inline-flex;align-items:center}.skip{position:absolute;left:-200vw}.skip:focus{left:12px;top:12px;z-index:100;background:var(--text);color:var(--canvas);padding:9px}.hidden{display:none!important}
.stars{pointer-events:none;position:fixed;inset:0;opacity:.25;background-image:radial-gradient(#61e9e1 1px,transparent 1px),radial-gradient(#a7a2ff 1px,transparent 1px);background-size:91px 91px,151px 151px;background-position:8px 14px,40px 50px;mask-image:linear-gradient(#000,transparent 95%)}.app{position:relative;max-width:1260px;padding:0 22px;margin:auto}
.top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--border)}.brand{color:var(--text);gap:13px;text-decoration:none}.brand>span:last-child{display:grid}.brand b{letter-spacing:.16em;font-size:20px}.brand small{letter-spacing:.17em;color:var(--muted);font-size:10px}.mark{width:47px;height:47px;border:1px solid var(--accent);border-radius:13px;background:#102f3c;display:grid;place-content:center;font-size:24px;font-weight:900}.mark span{color:var(--accent)}nav{display:flex;gap:8px;flex-wrap:wrap}nav button{font-size:13px;min-height:40px}
.hero{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:56px 0 35px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.2em;color:var(--accent);margin:0 0 12px}.hero h1{font-size:clamp(45px,7vw,95px);letter-spacing:-.07em;line-height:.94;margin:0 0 24px;text-shadow:0 0 70px #51f4ff29}.hero h1 em{font-style:normal;color:var(--accent)}.lead{color:var(--muted);font-size:clamp(15px,1.7vw,19px);max-width:680px;margin:0}.lead strong{color:var(--text)}.completion{width:210px;flex-shrink:0;text-align:center}.orb{width:178px;height:178px;border-radius:50%;margin:0 auto 15px;border:5px solid #255a70;background:radial-gradient(circle at center,#24465b 0%,#101b34 65%);box-shadow:inset 0 0 28px #62dce544,0 0 45px #51f4ff22;display:flex;flex-direction:column;align-items:center;justify-content:center}.orb span{font-size:45px;font-weight:900;letter-spacing:-.06em}.orb small{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.2em}.meter{height:10px;background:#1b304c;border-radius:10px;overflow:hidden}.meter>div{width:0;height:100%;background:linear-gradient(90deg,var(--secondary),var(--accent));transition:width .2s}.completion>span{display:block;font-size:12px;color:var(--muted);margin-top:10px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:25px}.stats span{background:var(--surface-low);padding:14px 17px;border:1px solid var(--border);border-radius:12px}.stats b{font-size:22px}.stats small{font-size:10px;letter-spacing:.12em;color:var(--muted)}
.panel{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(150deg,#12223c,#0b1629);padding:25px;box-shadow:var(--shadow);margin:20px 0 30px}.panelHead,.arenaHead{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}.panel h2{margin:0;font-size:clamp(27px,4vw,38px);letter-spacing:-.04em}.fine{font-size:12px;color:var(--muted);max-width:310px;margin:0}
.worldGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:15px;margin-top:22px}.world{background:var(--surface);border:1px solid #345071;border-radius:14px;padding:18px;display:flex;flex-direction:column;align-items:stretch;text-align:left;min-height:214px}.world.unlocked:hover{border-color:var(--accent);transform:translateY(-2px)}.world.locked{opacity:.55}.world .worldTop{display:flex;justify-content:space-between;align-items:center}.worldIcon{font-size:30px}.worldProgress{font-size:12px;color:var(--success)}.world h3{font-size:20px;margin:13px 0 5px}.world p{margin:0;color:var(--muted);font-size:13px;flex:1}.world .track{height:5px;background:#293c55;border-radius:8px;overflow:hidden;margin:14px 0 6px}.world .track span{display:block;background:var(--accent);height:100%}.world small{font-size:11px;color:var(--muted)}.mapActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.primary{background:var(--accent);color:var(--accent-on);font-weight:800;border-color:var(--accent)}.primary:hover{background:#9bfff0;color:var(--accent-on)}#resetBtn{color:var(--danger)}
.arenaHead{padding-bottom:20px;border-bottom:1px solid var(--border)}.chip{font-size:12px;background:#263858;border-radius:20px;padding:6px 13px;color:var(--muted)}.missionTitle{padding:25px 0 18px}.missionTitle h2{margin-bottom:10px}.questStrip{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 16px;border:1px solid #254957;background:#102e38;border-radius:11px;color:#dcffff;font-size:13px}
.playfield{display:grid;justify-items:center;align-content:center;gap:15px;padding:25px 5px;min-height:280px}.gameBar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:19px}.gameBar #feedback{color:var(--success);flex:1;min-width:160px;font-size:14px}.guideGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin:22px 0}.guideGrid article{padding:20px;border:1px solid var(--border);background:#101d32;border-radius:12px}.guideGrid h3{margin:0 0 8px}.guideGrid p{margin:0;color:var(--muted)}
.maze{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,64px));gap:5px;width:min(100%,400px)}.cell{width:100%;aspect-ratio:1;border-radius:8px;display:grid;place-items:center;background:#1b304d;border:1px solid #375172;font-size:24px}.cell.wall{background:#090f20;border-color:#17253b}.cell.goal{background:#173a39;border-color:#52afa2}.cell.player{background:#1b646d;border-color:#93faff;box-shadow:0 0 20px #51f4ff66}.dpad{display:grid;grid-template-columns:repeat(3,58px);gap:7px;justify-content:center}.dpad button{padding:5px;min-height:50px}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}
.options{width:min(100%,690px);display:grid;gap:12px}.option{min-height:56px;text-align:left;padding:14px 20px;font-size:16px}.option .num{display:inline-flex;width:31px;height:31px;border-radius:7px;background:#365171;align-items:center;justify-content:center;margin-right:12px;font-size:13px;color:#d9ebf8}.prompt{font-size:clamp(20px,3vw,30px);font-weight:800;text-align:center;max-width:700px}.clue{max-width:640px;color:var(--muted);text-align:center}.badgeLine{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.badgeLine span{background:#183752;padding:10px 16px;border-radius:10px}.sequence{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.pad{height:90px;width:90px;font-size:32px;border-width:3px}.pad.lit{background:var(--accent);color:#09232a;box-shadow:0 0 26px var(--accent)}.memoryMsg{min-height:28px;text-align:center;color:var(--muted)}.bulbs{display:grid;grid-template-columns:repeat(3,68px);gap:9px}.bulb{height:68px;border-radius:12px;font-size:30px;padding:8px}.bulb.on{background:#1b6153;border-color:var(--success);color:var(--success);box-shadow:0 0 12px #85f3b722}.bulb.off{background:#251f36;color:#887999}.resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(100%,650px)}.resource{border:1px solid #44627b;border-radius:14px;padding:18px;text-align:center;background:#132541;min-height:115px}.resource.selected{border-color:var(--success);background:#1b4c49}.resource b{font-size:24px;display:block}.resource small{color:var(--muted)}.codeSample{background:#091326;color:#d8eeff;border:1px solid #436184;padding:18px 25px;border-radius:12px;white-space:pre-wrap;font:16px/1.8 ui-monospace,Menlo,monospace;max-width:min(100%,680px);overflow-wrap:anywhere}.victory{display:grid;gap:12px;text-align:center;justify-items:center}.trophy{font-size:66px}.victory h3{font-size:35px;margin:0;color:var(--success)}.victory p{max-width:550px;color:var(--muted);margin:0}.bigscore{font-size:29px;font-weight:900}.final{color:var(--warning)}.levelDots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.levelDots b{font-size:11px;background:#243c5b;border-radius:8px;padding:5px 9px;color:var(--muted)}.levelDots b.done{background:#155147;color:#dbfff2}
footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:25px 0 40px;color:var(--muted);font-size:11px;letter-spacing:.1em}
@media(max-width:700px){.app{padding:0 13px}.hero{padding:38px 0 20px;display:grid;gap:28px}.completion{width:100%;display:flex;gap:15px;align-items:center;flex-wrap:wrap}.orb{height:106px;width:106px;margin:0}.orb span{font-size:30px}.completion .meter{flex:1;min-width:140px}.completion>span{flex-basis:100%;margin-top:0}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:17px}.resources{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.resource{padding:10px 5px;min-height:96px}.resource b{font-size:19px}.pad{height:68px;width:68px}.worldGrid{grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:9px}.world{padding:13px;min-height:205px}.world h3{font-size:17px}.cell{font-size:18px}.maze{gap:3px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}