:root{--bg:#0d0d0c;--panel:rgba(20,20,18,.9);--line:rgba(255,255,255,.13);--text:#f3efe7;--muted:#a5a098;--orange:#ff7a1a;--yellow:#ffd24a;--red:#ff4c39;--green:#9ce174;--shadow:0 18px 60px rgba(0,0,0,.42)}*{box-sizing:border-box}html,body,#game{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}body{user-select:none}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}.topbar{position:absolute;left:0;right:0;top:0;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:linear-gradient(to bottom,rgba(8,8,7,.92),rgba(8,8,7,.5),transparent);pointer-events:none}.brand{pointer-events:auto;display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);font-weight:900;letter-spacing:.05em}.brand-mark{width:42px;height:42px;display:grid;place-items:center;background:var(--orange);color:#111;font-weight:1000;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}.brand b{display:block;font-size:14px;line-height:1}.brand small{display:block;font-size:10px;color:var(--orange);letter-spacing:.3em;margin-top:3px}.mission{text-align:center;text-shadow:0 2px 10px #000}.mission span{display:block;font-size:10px;letter-spacing:.22em;color:var(--orange);font-weight:800}.mission b{font-size:18px}.top-actions{display:flex;gap:8px;pointer-events:auto}.icon-btn{width:38px;height:38px;border:1px solid var(--line);background:rgba(0,0,0,.38);color:#fff;border-radius:7px;cursor:pointer;font-weight:900}.icon-btn:hover{border-color:var(--orange)}.hud{position:absolute;top:96px;width:248px;padding:16px;background:linear-gradient(180deg,rgba(22,22,20,.95),rgba(15,15,14,.86));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.left-panel{left:20px}.right-panel{right:20px}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:11px;letter-spacing:.14em;font-weight:900}.panel-title strong{font-size:9px;background:var(--orange);color:#16120c;padding:4px 6px}.hud p{color:var(--muted);font-size:12px;line-height:1.5}.stat-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-top:12px}.meter{height:5px;background:#302f2b;margin-top:6px;overflow:hidden}.meter i{display:block;height:100%;width:100%;background:var(--green);transition:width .2s}.meter.danger i{width:0;background:var(--red)}.divider{height:1px;background:var(--line);margin:15px 0}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mini-grid small,.score-strip small,.result-grid small{display:block;font-size:8px;letter-spacing:.13em;color:var(--muted)}.mini-grid b{font-size:13px}.tool-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tool{border:1px solid var(--line);background:#191917;color:var(--muted);padding:9px 7px;font-size:10px;font-weight:800;cursor:pointer}.tool.active{border-color:var(--orange);color:#fff;background:#2b1b10}.tool span{display:block;font-size:18px;color:var(--orange);margin-bottom:2px}.control-label{font-size:10px;display:flex;justify-content:space-between;margin-top:15px;color:var(--muted)}.control-label b{color:#fff}input[type=range]{width:100%;accent-color:var(--orange);margin:7px 0}.sequence{display:flex;gap:4px;margin:8px 0 12px}.sequence i{height:4px;flex:1;background:#333}.sequence i.active{background:var(--orange)}button{font:inherit}.detonate,.primary,.secondary{width:100%;border:0;padding:13px 14px;font-weight:1000;letter-spacing:.06em;cursor:pointer}.detonate,.primary{background:linear-gradient(135deg,#ff8d2c,#ff5d14);color:#15100b;box-shadow:0 8px 20px rgba(255,100,20,.18)}.detonate:hover,.primary:hover{filter:brightness(1.08)}.detonate:disabled{opacity:.35;cursor:not-allowed}.secondary{background:#242421;color:#fff;border:1px solid var(--line);margin-top:7px}.hint{margin-bottom:0!important;font-size:10px!important}.score-strip{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:1px;background:rgba(0,0,0,.5);border:1px solid var(--line);box-shadow:var(--shadow)}.score-strip>div{min-width:112px;padding:10px 16px;background:rgba(21,21,19,.92);text-align:center}.score-strip b{font-size:17px}.toast{position:absolute;top:85px;left:50%;transform:translate(-50%,-15px);background:#151513;border:1px solid var(--orange);padding:9px 14px;font-size:11px;font-weight:800;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.modal{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.68);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:.25s;z-index:20}.modal.open{opacity:1;pointer-events:auto}.modal-card{position:relative;width:min(520px,calc(100vw - 30px));background:linear-gradient(145deg,#191916,#10100f);border:1px solid rgba(255,255,255,.16);padding:30px;box-shadow:0 30px 90px rgba(0,0,0,.6)}.hero-card:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:repeating-linear-gradient(135deg,var(--yellow) 0 14px,#161616 14px 28px)}.hazard{font-size:10px;letter-spacing:.2em;font-weight:1000;color:var(--orange);margin-bottom:12px}.modal h1{font-size:48px;line-height:.95;margin:0 0 18px;letter-spacing:-.05em}.modal h1 em{font-style:normal;color:var(--orange)}.modal h2{margin:0 0 8px;font-size:28px}.modal p{color:var(--muted);line-height:1.55}.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:22px 0}.rules div{background:#21211e;padding:12px}.rules b{color:var(--orange);font-size:11px;display:block;margin-bottom:6px}.rules span{font-size:10px;line-height:1.3;display:block}.modal .primary{margin-top:4px}.modal-card>small{display:block;text-align:center;color:#777;font-size:9px;margin-top:12px}.grade{font-size:90px;font-weight:1000;line-height:.9;float:right;color:var(--orange);text-shadow:0 0 30px rgba(255,122,26,.25)}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:22px;clear:both}.result-grid div{background:#22221f;padding:13px}.result-grid b{font-size:18px}.stars{font-size:28px;color:var(--yellow);letter-spacing:.1em;text-align:center;margin:18px}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.modal-actions .secondary{margin:0}.help-card ul{color:var(--muted);padding-left:18px;font-size:13px;line-height:1.55}.help-card li{margin:8px 0}.close{position:absolute;right:12px;top:12px;width:35px;height:35px;background:transparent;color:#fff;border:1px solid var(--line);font-size:22px;cursor:pointer}@media(max-width:820px){.hud{top:auto;bottom:82px;width:210px;padding:12px}.left-panel{left:8px}.right-panel{right:8px}.mission{display:none}.mini-grid{gap:7px}.score-strip{bottom:12px}.score-strip>div{min-width:90px;padding:8px}.topbar{height:62px;padding:0 10px}.modal h1{font-size:38px}}@media(max-width:620px){.left-panel{display:none}.right-panel{width:190px}.score-strip{left:8px;transform:none}.score-strip>div:nth-child(2),.score-strip>div:nth-child(3){display:none}.brand span:last-child{display:none}}.icon-btn.active{border-color:var(--orange);background:#2b1b10;color:var(--orange);box-shadow:0 0 0 1px rgba(255,122,26,.25) inset}
.structural-key{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0;font-size:9px;color:var(--muted)}
.structural-key span{display:flex;align-items:center;gap:6px}
.structural-key i{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--orange);box-shadow:0 0 8px var(--orange)}

.tutorial-coach{position:absolute;left:50%;top:88px;transform:translateX(-50%);width:min(420px,calc(100vw - 30px));padding:14px 16px;background:rgba(16,16,14,.96);border:1px solid var(--orange);box-shadow:var(--shadow);z-index:15;backdrop-filter:blur(10px)}
.tutorial-step{display:flex;justify-content:space-between;gap:12px;align-items:center}
.tutorial-step span{font-size:9px;letter-spacing:.14em;color:var(--orange);font-weight:900}
.tutorial-step b{font-size:13px}
.tutorial-coach p{margin:8px 0 10px;color:var(--muted);font-size:11px;line-height:1.45}
.tutorial-actions{display:grid;grid-template-columns:1fr 1.5fr;gap:6px}
.tutorial-actions .secondary,.tutorial-actions .primary{margin:0;padding:9px 10px;font-size:10px}
@media(max-width:620px){.tutorial-coach{top:68px;width:calc(100vw - 18px)}}