:root{color-scheme:dark;--text:#edf7ff;--muted:#98a9bf;--cyan:#60f5d7;--blue:#6bbcff;--gold:#ffd166;--red:#ff5f7d;--line:#ffffff1c}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%}body{min-height:100vh;overflow:auto;color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;background:radial-gradient(circle at 12% 8%,#60f5d730,transparent 30%),radial-gradient(circle at 86% 18%,#ff5f7d24,transparent 31%),linear-gradient(145deg,#070d18 0%,#050914 58%,#130818 100%)}button{border:0;font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #9ffff0;outline-offset:3px}.shell{width:min(1320px,100vw);min-height:100vh;margin:0 auto;padding:clamp(8px,1.7vw,18px);display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px}.stage,.side{border:1px solid var(--line);border-radius:28px;background:linear-gradient(180deg,#0a1426f5,#050a14f7);box-shadow:0 24px 90px #0008,inset 0 1px 0 #ffffff12}.stage{min-width:0;min-height:0;padding:clamp(8px,1.4vw,16px);display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;overflow:hidden}.hud{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.hud-card{min-width:0;padding:10px 12px;border:1px solid #ffffff14;border-radius:17px;background:linear-gradient(180deg,#ffffff12,#ffffff08);box-shadow:inset 0 1px 0 #ffffff13}.hud-card small,.status-panel small{display:block;color:var(--muted);font-size:11px;font-weight:850}.hud-card strong,.status-panel strong{display:block;margin-top:3px;font-size:clamp(16px,2vw,25px);line-height:1;font-weight:950;letter-spacing:-.04em;white-space:nowrap}.canvas-wrap{position:relative;min-height:0;display:grid;place-items:center;border-radius:23px;overflow:hidden;background:#020610;border:1px solid #ffffff10}canvas{display:block;width:100%;max-height:calc(100vh - 130px);aspect-ratio:16/9;height:auto;background:#050914}.side{padding:18px;display:flex;flex-direction:column;gap:14px}.eyebrow{margin:0 0 7px;color:var(--cyan);font-size:12px;font-weight:950;letter-spacing:.16em}h1,h2{margin:0;line-height:1;letter-spacing:-.05em}h1{font-size:clamp(30px,4vw,46px)}h2{font-size:32px}.lead,.landscape-note{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.55}.meter-block,.map-picker{padding:13px;border-radius:19px;background:linear-gradient(180deg,#ffffff0e,#ffffff07);border:1px solid #ffffff12}.meter-label,.map-picker>span{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px;font-weight:900}.meter-label strong{color:var(--text)}.meter{height:13px;margin-top:10px;border-radius:999px;overflow:hidden;background:#ffffff14;border:1px solid #ffffff12}.meter div{width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--gold),var(--red));box-shadow:0 0 18px #60f5d755;transition:width .08s linear}.map-select{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.map-select button{min-height:34px;padding:7px 8px;border-radius:12px;border:1px solid #ffffff16;background:#ffffff0c;color:#d8e5f7;font-size:12px;font-weight:950}.map-select button.active{color:#06111d;background:linear-gradient(135deg,var(--cyan),var(--blue));border-color:#ffffff55}.tips{display:grid;gap:8px;margin:0;padding:0;list-style:none;color:#d2dceb;font-size:13px;line-height:1.45}.tips li{padding:10px 11px;border-radius:14px;border:1px solid #ffffff11;background:linear-gradient(180deg,#ffffff0d,#ffffff07)}.tips li:first-child,.tips li:nth-child(2),.tips li:nth-child(3){border-color:#60f5d733;background:linear-gradient(180deg,#60f5d71a,#ffffff07)}.status-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.status-panel div{min-width:0;padding:11px 10px;border-radius:16px;border:1px solid #ffffff12;background:#ffffff0b}.status-panel strong{font-size:20px}.side-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}.side-actions button,.modal-actions button{min-height:43px;padding:10px 13px;border-radius:15px;background:#ffffff15;border:1px solid #ffffff1b;font-weight:950;box-shadow:inset 0 1px 0 #ffffff12}.side-actions button:hover,.modal-actions button:hover{background:#ffffff23}.side-actions button:active,.modal-actions button:active{transform:translateY(1px)}.side-actions button:last-child{grid-column:1/-1}button.primary,.modal-actions .primary{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#03111b;border-color:#ffffff55}.overlay{position:absolute;z-index:8;inset:0;display:none;place-items:center;padding:18px;background:#020710c8;backdrop-filter:blur(10px)}.overlay.show{display:grid}.modal{width:min(540px,94vw);max-height:min(90vh,660px);overflow:auto;padding:clamp(19px,3vw,30px);border-radius:28px;border:1px solid #ffffff2c;background:linear-gradient(180deg,#12213bfa,#050914fb);box-shadow:0 24px 90px #000a,inset 0 1px 0 #ffffff17;text-align:center}.modal p:not(.eyebrow){margin:12px 0 0;color:#b7c5d9;line-height:1.58;word-break:keep-all}.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:17px 0 4px;text-align:left}.result-grid div{padding:11px 12px;border-radius:15px;border:1px solid #ffffff12;background:#ffffff0d}.result-grid small{display:block;color:var(--muted);font-size:11px;font-weight:850}.result-grid strong{display:block;margin-top:4px;font-size:20px;font-weight:950}.modal-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:17px}.toast{position:absolute;z-index:7;top:16px;left:50%;transform:translate(-50%,-10px);opacity:0;pointer-events:none;min-width:min(460px,78%);padding:12px 15px;border-radius:999px;border:1px solid #ffffff28;background:#071527ef;color:#effaff;font-weight:950;text-align:center;box-shadow:0 16px 42px #0009;transition:opacity .18s ease,transform .18s ease}.toast.show{opacity:1;transform:translate(-50%,0)}.touch-controls{position:absolute;z-index:6;left:14px;right:14px;bottom:14px;display:none;align-items:end;justify-content:space-between;gap:12px;pointer-events:none}.touch-controls button{pointer-events:auto;user-select:none;min-height:66px;padding:10px 18px;border-radius:21px;border:1px solid #ffffff3a;background:#071527db;box-shadow:0 12px 36px #0007,inset 0 1px 0 #ffffff18;font-size:24px;font-weight:950}.touch-controls button:active{transform:scale(.97)}.steer-pair,.action-pair{display:flex;gap:10px}.steer-pair button{min-width:72px;font-size:27px}.action-pair .drift-touch{min-width:132px;color:#1b1000;background:linear-gradient(135deg,var(--gold),#ff8c5b)}.action-pair .boost-touch{min-width:116px;color:#03111b;background:linear-gradient(135deg,var(--cyan),var(--blue))}@media (pointer:coarse),(max-width:920px){.touch-controls{display:flex}canvas{max-height:calc(100vh - 112px)}}@media (max-width:980px){.shell{grid-template-columns:1fr}.side{order:2}.stage{min-height:55vh}}@media (max-width:720px){.hud{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:640px){.shell{padding:7px;gap:9px}.stage,.side{border-radius:20px;padding:9px}.hud{gap:6px}.hud-card{padding:8px 9px;border-radius:13px}.hud-card small{font-size:10px}.hud-card strong{font-size:17px}.canvas-wrap{border-radius:16px}.side{gap:10px}h2{font-size:25px}.tips{font-size:12px}.touch-controls{left:8px;right:8px;bottom:8px}.touch-controls button{min-height:58px;border-radius:17px;font-size:20px}.steer-pair button{min-width:62px}.action-pair .drift-touch{min-width:112px}.action-pair .boost-touch{min-width:96px}.result-grid{grid-template-columns:1fr}}@media (max-height:520px) and (orientation:landscape){.shell{grid-template-columns:minmax(0,1fr) 260px;padding:6px;gap:8px}.stage,.side{border-radius:16px;padding:7px}.hud-card{padding:6px 8px}.hud-card strong{font-size:16px}.side{gap:8px}h2{font-size:22px}.lead,.tips,.landscape-note{font-size:11px}.tips li{padding:6px 8px}.touch-controls button{min-height:52px}}