:root { color-scheme: dark; --orbit-bg:#101919; --orbit-ink:#f2f5e9; --orbit-muted:#a4b5ae; --orbit-accent:#d5f777; --orbit-line:#334540; --paper:var(--orbit-bg); --ink:var(--orbit-ink); --muted:var(--orbit-muted); --line:var(--orbit-line); --accent:var(--orbit-accent); }
* { box-sizing:border-box; }
body { margin:0; background:var(--orbit-bg); color:var(--orbit-ink); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
.orbit-shell { max-width:1100px; min-height:100svh; margin:auto; padding:26px 42px 24px; display:flex; flex-direction:column; }
.orbit-header { width:100%; max-width:none; padding:0; margin:0; display:flex; align-items:center; justify-content:space-between; gap:22px; }
h1 { font-size:30px; letter-spacing:-1.7px; font-weight:650; margin:0; line-height:1.4; }
#game-menu { --ink:var(--orbit-ink); --muted:var(--orbit-muted); --line:var(--orbit-line); color:var(--orbit-ink); }
#game-menu a,#game-menu button,#game-menu select,#game-menu summary { color:var(--orbit-ink); border-color:var(--orbit-line); background:var(--orbit-bg); }
main { width:100%; max-width:490px; margin:auto; padding:32px 0 20px; text-align:center; }
.orbit-intro { margin-bottom:9px; }
#guide { margin:0; font-size:17px; letter-spacing:-.25px; }
.orbit-stage { width:100%; aspect-ratio:1; }
.orbit-board { position:relative; display:block; cursor:pointer; background:none; border:0; border-radius:50%; width:100%; height:100%; padding:0; color:var(--orbit-ink); touch-action:manipulation; user-select:none; }
.orbit-board:hover:not(:disabled) { background:none; }
.game-menu-list a:hover,.game-menu-list a[aria-current] { background:#20302a !important; }
.orbit-board svg { display:block; width:100%; height:100%; overflow:visible; }
.orbit-hairline { fill:none; stroke:var(--orbit-line); stroke-width:.65; opacity:.7; }
.orbit-ticks { stroke:var(--orbit-muted); stroke-width:1; opacity:.65; }
.orbit-track { fill:none; stroke:var(--orbit-line); stroke-width:2; }
.target-outline { fill:none; stroke:var(--orbit-bg); stroke-width:22; stroke-linecap:butt; }
.orbit-target { fill:none; stroke:var(--orbit-accent); stroke-width:15; stroke-linecap:butt; }
.target-tick { fill:none; stroke:var(--orbit-ink); stroke-width:1.5; }
.satellite-outline { fill:var(--orbit-bg); stroke:var(--orbit-ink); stroke-width:2; }
.satellite { fill:var(--orbit-ink); }
.orbit-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.orbit-score { font-size:80px; line-height:1; font-weight:300; font-variant-numeric:tabular-nums; letter-spacing:-5px; margin-left:-5px; }
.score-label { font-size:10px; color:var(--orbit-muted); letter-spacing:3px; margin:12px 0 0 3px; }
.board-prompt { position:absolute; bottom:24%; font-size:12px; font-weight:550; letter-spacing:.5px; color:var(--orbit-accent); }
.orbit-feedback { min-height:31px; margin-top:-2px; }
#status { font-size:15px; font-weight:500; letter-spacing:-.35px; margin:0 0 7px; }
.orbit-controls { display:grid; grid-template-columns:100px 1fr 100px; align-items:center; gap:20px; max-width:360px; margin:20px auto 0; }
.orbit-controls button { min-height:46px; border:1px solid var(--orbit-line); border-radius:30px; background:transparent; color:var(--orbit-ink); font-size:12px; font-weight:550; cursor:pointer; }
.orbit-controls button:hover:not(:disabled) { background:#20302a; border-color:var(--orbit-muted); }
.orbit-controls button:disabled { opacity:.4; cursor:default; }
.orbit-best { font-size:10px; letter-spacing:1.6px; color:var(--orbit-muted); margin:0; white-space:nowrap; }
.orbit-best strong { color:var(--orbit-ink); font-size:14px; font-weight:500; margin-left:7px; font-variant-numeric:tabular-nums; }
.orbit-keyhint { font-size:10px; color:var(--orbit-muted); margin:21px 0 0; word-spacing:2px; }
.orbit-keyhint span { font-size:9px; letter-spacing:.75px; }
button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--orbit-accent); outline-offset:5px; }
.orbit-board:focus-visible { outline-offset:-4px; }
#error { color:#ffbaaa; font-size:12px; line-height:1.5; margin:16px 0 0; }
body[data-state="ended"] .satellite-outline { stroke:#ffbaaa; }
body[data-state="ended"] .satellite { fill:#ffbaaa; }
body[data-state="paused"] .orbit-target { stroke:var(--orbit-muted); }
body[data-state="running"] .board-prompt { visibility:hidden; }
@media (max-width:600px) { .orbit-shell { padding:20px 21px; } main { padding-top:30px; } h1 { font-size:27px; } .orbit-stage { max-width:410px; margin:auto; } .orbit-score { font-size:72px; } }
@media (max-width:370px) { .orbit-shell { padding-left:15px; padding-right:15px; } .orbit-score { font-size:61px; } #guide { font-size:15px; } .board-prompt { bottom:23%; } .orbit-controls { gap:12px; grid-template-columns:85px 1fr 85px; } }
/* A continuous height budget avoids a large board jump on ordinary laptops.
   The main column keeps its readable width; only the square play field scales. */
@media (min-width:601px) {
  .orbit-shell { padding-top:clamp(20px,calc(2svh + 10px),26px); padding-bottom:clamp(18px,calc(2svh + 8px),24px); }
  main { padding-top:clamp(18px,calc(5svh - 12px),32px); padding-bottom:clamp(14px,calc(2svh + 2px),20px); }
  .orbit-stage { max-width:clamp(240px,calc(100svh - 320px),490px); margin-inline:auto; }
  .orbit-intro { margin-bottom:clamp(0px,calc(3svh - 15px),9px); }
  .orbit-score { font-size:clamp(54px,calc(10svh - 10px),80px); }
  .orbit-controls { margin-top:clamp(12px,calc(4svh - 12px),20px); }
  .orbit-keyhint { margin-top:clamp(10px,calc(4svh - 12px),21px); }
}
@media (max-height:500px) and (orientation:landscape) { .orbit-shell { padding:15px 24px; } main { display:grid; grid-template-columns:minmax(225px,310px) minmax(200px,340px); grid-template-rows:auto auto auto auto; align-items:center; column-gap:32px; max-width:710px; padding:12px 0; } .orbit-stage { margin:0; grid-column:1; grid-row:1/5; max-height:calc(100svh - 100px); max-width:calc(100svh - 100px); } .orbit-intro,.orbit-feedback,.orbit-controls,.orbit-keyhint { grid-column:2; } .orbit-score { font-size:60px; } .orbit-intro { margin:0; } .orbit-controls { width:100%; gap:12px; margin:0; } .orbit-feedback { min-height:50px; } .orbit-keyhint { margin:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }
@media (forced-colors:active) { .orbit-track,.orbit-hairline { stroke:GrayText; } .orbit-target { stroke:Highlight; } .target-outline,.satellite-outline { fill:Canvas; stroke:CanvasText; } .satellite,.target-tick { fill:CanvasText; stroke:CanvasText; } }

@media(max-height:500px) and (orientation:landscape){.game-help{grid-column:2;grid-row:4;margin-top:0}}