:root{color-scheme:dark;--bg:#17191d;--panel:#1e2026;--line:#30323b;--muted:#a0a2ae;--text:#efeee9;--gold:#ebc57c;--mint:#8ed7c9;font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--text)}
button,input{font:inherit}
button{cursor:pointer;border:0;background:transparent;color:var(--text)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button:disabled{opacity:.34;cursor:default}
[hidden]{display:none!important}
.game{height:100dvh;width:100%;max-width:1800px;margin:auto;padding:0 12px 12px;display:grid;grid-template-rows:54px minmax(0,1fr);min-height:0;position:relative}
.game-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.back-link{text-decoration:none;color:var(--muted);font-size:12px}
.back-link:hover{color:var(--text)}
.brand{font-size:22px;letter-spacing:-.045em;font-weight:780;line-height:1}
.brand span{color:var(--gold)}
.header-right{display:flex;align-items:center;gap:12px;justify-self:end;font-size:12px;color:var(--muted)}
#difficulty{border:1px solid var(--line);border-radius:20px;padding:5px 10px;font-size:11px;color:var(--gold)}
#difficulty:hover{border-color:#a68d5f}
.game-body{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:10px;min-height:0;overflow:hidden}
.mission,.graph-stage{background:var(--panel);border:1px solid var(--line);border-radius:14px;min-width:0;min-height:0;overflow:hidden}
.mission{display:flex;flex-direction:column;padding:15px 16px;gap:14px}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--bg);border:1px solid var(--line);padding:3px;border-radius:10px}
.mode-switch button{padding:8px;font-size:13px;border-radius:7px;color:var(--muted);transition:background-color .15s}
.mode-switch button[aria-pressed="true"]{background:#30323b;color:var(--text);font-weight:700}
.mission-copy{min-height:0;flex:1;overflow:hidden}
.kicker{margin:0;color:var(--gold);font-size:10px;letter-spacing:.11em;font-weight:750}
.mission h1{font-size:clamp(22px,2.2vw,29px);letter-spacing:-.045em;line-height:1.1;margin:11px 0 17px}
#mission-story{font-size:15px;line-height:1.65;white-space:pre-line;color:var(--text);margin:0}
.mission-task{color:var(--gold);font-size:13px;font-weight:630;line-height:1.5;margin:16px 0 0}
#hint-text{color:#d9d0b9;font-size:12px;line-height:1.45;margin:14px 0 0;padding:12px;background:#292b32;border-radius:8px}
.mission-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:10px;margin-top:auto}
.mission-footer button{color:var(--muted);font-size:12px;padding:6px 4px}
.mission-footer button:hover{color:var(--text)}
.graph-stage{display:grid;grid-template-rows:37px minmax(0,1fr) auto;position:relative}
.stage-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 14px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.draw-step{display:flex;align-items:center;gap:7px;font-weight:650;color:var(--text)}
#step-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
#stage-progress{font-size:11px;color:#c3b79b;font-variant-numeric:tabular-nums}
#plane{width:100%;height:100%;min-height:0;touch-action:none;user-select:none;display:block;background:var(--bg);cursor:crosshair}
#plane.is-guess{cursor:default;touch-action:pan-y}
#plane .grid-line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
#plane .axis-line{stroke:#737683;stroke-width:1.35;vector-effect:non-scaling-stroke}
#plane .axis-text{fill:var(--muted);font:12px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#plane .drawn{stroke-width:4;stroke-linecap:round;stroke-linejoin:round;fill:none;vector-effect:non-scaling-stroke}
#plane .mystery{stroke-width:4;stroke-linecap:round;stroke-linejoin:round;fill:none;vector-effect:non-scaling-stroke}
#plane .intersection-dot{fill:#f4f0e5;stroke:var(--panel);stroke-width:2;vector-effect:non-scaling-stroke}
#plane .intersection-label{font:650 12px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;fill:var(--text);paint-order:stroke;stroke:var(--bg);stroke-width:4;stroke-linejoin:round}
#plane .soft-guide{stroke:#b8ad8d;stroke-dasharray:4 6;stroke-width:1;opacity:.55}
.stage-footer{min-height:56px;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:9px 13px;border-top:1px solid var(--line)}
.stage-footer button{font-size:13px;padding:9px 12px;white-space:nowrap}
#undo-button{color:var(--muted)}
#stage-status{font-size:12px;line-height:1.4;color:var(--muted);flex:1;margin:0;text-align:center}
.primary{background:var(--gold);color:#231d13!important;border-radius:9px;padding:10px 17px;font-weight:740}
.primary:disabled{opacity:.3}
.primary:not(:disabled):active{transform:scale(.98)}
#guess-panel{position:absolute;bottom:65px;left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 24px));z-index:3;border:1px solid #50535c;background:var(--panel);box-shadow:0 8px 28px #0007;border-radius:13px;padding:11px}
#guess-form{display:flex;align-items:flex-end;gap:9px}
#guess-fields{flex:1;min-width:0;display:grid;gap:6px}
.guess-field{display:flex;align-items:center;gap:6px}
.guess-field label{font-size:11px;color:var(--gold);width:20px}
.guess-field input{width:100%;min-width:0;border:1px solid #50535c;background:var(--bg);color:var(--text);border-radius:8px;padding:9px 10px;font-size:15px}
#guess-form button{font-size:12px;white-space:nowrap;padding:11px 12px}
.review{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:12px;background:#101115c9}
.review-card{width:min(520px,100%);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;border:1px solid #555761;border-radius:17px;background:var(--panel);padding:24px;box-shadow:0 18px 80px #0009}
.review h2{font-size:23px;line-height:1.15;letter-spacing:-.035em;margin:7px 0 10px}
#review-question{font-size:15px;line-height:1.5;margin:0 0 14px}
#review-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#review-answers button{min-height:45px;border:1px solid #494c56;border-radius:9px;background:#292b32;padding:9px 11px;text-align:left;font-size:13px}
#review-answers button.correct{border-color:#8abf9d;background:#304538}
#review-answers button.incorrect{border-color:#c18a79;background:#4a3530}
#review-explanation{font-size:13px;color:#ddd9c9;margin:13px 0 0}
#review-points{font-size:12px;color:var(--gold);font-weight:750}
.review-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.review-actions button:not(.primary){border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:12px}
.gate{position:absolute;inset:0;background:var(--bg);z-index:15;display:grid;place-content:center;text-align:center}
.gate a{color:var(--gold)}
@media(max-width:780px){
 .game{grid-template-rows:42px minmax(0,1fr);padding:0 6px 6px}
 .brand{font-size:19px}
 .header-right{gap:5px}
 #solved-count{display:none}
 .game-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:6px}
 .mission{padding:8px 11px;gap:6px;border-radius:10px}
 .mode-switch{max-width:250px;min-height:34px;padding:2px}
 .mode-switch button{padding:5px;font-size:12px}
 .mission-copy{flex:none;overflow:hidden}
 .mission .kicker{display:none}
 .mission h1{font-size:19px;margin:4px 0 4px}
 #mission-story{font-size:12px;line-height:1.4;max-height:6.9em;overflow:hidden}
 .mission-task{font-size:11px;margin:4px 0 0;line-height:1.3}
 #hint-text{font-size:11px;margin:6px 0 0;padding:6px}
 .mission-footer{padding-top:3px;margin:0;justify-content:flex-end;border:0;gap:13px}
 .mission-footer button{padding:2px 0;font-size:11px}
 .graph-stage{border-radius:10px;grid-template-rows:30px minmax(0,1fr) auto}
 .stage-header{padding:4px 9px;font-size:11px}
 .stage-footer{padding:5px 7px;min-height:45px;gap:5px}
 .stage-footer button{padding:7px 9px;font-size:12px}
 #stage-status{font-size:10px}
 #guess-panel{bottom:50px;padding:7px}
 #guess-form button{padding:9px;font-size:11px}
 .guess-field input{font-size:13px;padding:8px}
 .review-card{padding:17px;max-height:calc(100dvh - 16px)}
 .review h2{font-size:21px}
 #review-answers{grid-template-columns:1fr}
}
@media(max-height:700px) and (min-width:781px){
 .game{grid-template-rows:42px minmax(0,1fr);padding-bottom:6px}
 .mission{padding:11px;gap:8px}
 .mission h1{font-size:24px;margin:9px 0 11px}
 #mission-story{font-size:13px;line-height:1.45}
 .mission-task{font-size:12px;margin-top:10px}
}
@media(max-width:410px) and (max-height:720px){
 .mission{padding:6px 9px}
 .mission h1{font-size:16px;margin:2px 0}
 #mission-story{max-height:4.25em;font-size:11px}
 .mission-task{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .mode-switch button{transition:none}
}