/* Small worlds, drawn in the same paper-and-pencil language as the notebook. */
.play-heading { display:flex; justify-content:space-between; align-items:center; gap:35px; padding-bottom:33px; }
.play-heading p { color:#61705d; font-size:16px; line-height:1.9; margin-top:22px; }
.play-heading-art { width:220px; height:180px; position:relative; margin-right:50px; flex:none; }
.sketch-orbit { position:absolute; inset:30px 0; border:1px dashed #aaa891; border-radius:50%; transform:rotate(-28deg); }
.sketch-orbit::after { content:""; position:absolute; inset:-21px 34px; border:1px solid #bec5ad; border-radius:50%; transform:rotate(64deg); }
.sketch-planet { position:absolute; font-size:110px; color:#cd9a49; left:54px; top:-11px; transform:rotate(12deg); }
.sketch-satellite { position:absolute; font-size:39px; color:#8b7ba1; right:-2px; top:35px; }
.play-heading-art .hand-note { position:absolute; bottom:-10px; left:13px; white-space:nowrap; }
.play-tabs { display:flex; gap:30px; padding:18px 0; border-block:1px dashed #c9ceba; font:11px/1.5 monospace; color:#74816a; }
.play-tabs a { padding:7px 0; display:flex; gap:12px; align-items:center; }
.play-tabs span { font:14px/1.5 "DM Sans",sans-serif; color:#3c594a; }
.mission-section { padding-top:54px; scroll-margin-top:20px; }
.mission-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:25px; }
.mission-heading h2 { font-size:38px; font-weight:500; letter-spacing:-1.2px; margin-top:9px; }
.mission-heading p { color:#62745f; font-size:14px; line-height:1.8; margin-top:9px; max-width:610px; }
.tiny-star { display:inline-block; color:#c69b58; font-size:31px; margin-left:17px; transform:rotate(15deg); }
.mission-stamp { border:1px solid #c7cbb2; padding:12px 18px; font:11px/1.9 monospace; color:#728060; transform:rotate(4deg); text-align:center; flex:none; }
.mission-stamp strong { font-weight:400; font-size:10px; }
.mission-console { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); background:#f2f0e4; border:1px solid #d8ddc9; border-radius:8px; overflow:hidden; }
.mission-board-panel { padding:24px; min-width:0; background:radial-gradient(ellipse at 25% 20%,#f9f6e7,transparent 70%),#ececde; }
.board-top,.sky-top { display:flex; align-items:center; justify-content:space-between; gap:14px; font:10px/1.7 monospace; color:#6d7a61; margin-bottom:18px; }
.board-top > span:last-child { display:flex; align-items:center; gap:6px; }
.rover-board { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:4px; padding:7px; background:#d7ddc9; border:1px solid #c6ceb6; border-radius:6px; }
.rover-cell { appearance:none; position:relative; aspect-ratio:1; padding:0; border:1px solid transparent; border-radius:4px; background:#c6cdb9; color:#75816c; font:11px/1 monospace; display:flex; align-items:center; justify-content:center; cursor:default; }
.rover-cell::after { content:"·"; opacity:.4; font-size:15px; }
.rover-cell.is-known { background:#f6f2df; border-color:#e3ddc5; }
.rover-cell.is-known::after { content:""; }
.rover-cell.is-reachable { cursor:pointer; box-shadow:inset 0 0 0 2px #3c5a43; background:#e9f0dc; }
.rover-cell.is-reachable:hover { background:#d5e1bc; }
.rover-cell.is-rock { background:#b6bca8; border-color:#adb49d; }
.rover-cell.is-rock::before { content:""; width:48%; height:39%; background:#8f9881; border-radius:60% 45% 30% 30%; transform:rotate(-16deg); box-shadow:3px 3px 0 #a3ad94; }
.rover-cell.is-supply::before { content:"✦"; color:#b87c32; font-size:27px; }
.rover-cell.is-collected::before { content:"✓"; color:#8b9b72; font-size:21px; }
.rover-cell.has-plan { box-shadow:inset 0 0 0 2px var(--rover-color); }
.plan-marker { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--rover-color); bottom:5px; right:5px; }
.rover-icon { display:block; position:relative; width:61%; height:42%; max-width:33px; background:var(--rover-color); border:2px solid #fffc; border-radius:5px; box-shadow:0 3px 0 #33453744; z-index:1; }
.rover-icon::before { content:""; position:absolute; left:20%; right:20%; top:22%; height:22%; background:#faf8ef; border-radius:2px; }
.rover-icon::after { content:""; position:absolute; width:3px; height:7px; background:var(--rover-color); top:-7px; left:50%; }
.rover-cell.is-selected { outline:2px solid var(--rover-color); outline-offset:-2px; }
.board-legend { display:flex; flex-wrap:wrap; gap:12px; font-size:10px; color:#6d7d64; margin:17px 0 20px; }
.board-legend span { display:flex; align-items:center; gap:5px; }
.board-legend i { display:inline-block; width:10px; height:10px; border-radius:2px; font-style:normal; }
.legend-fog { background:#c6cdb9; }.legend-rock { background:#919c81; }.legend-supply { color:#b87c32; font-size:16px; }.legend-trail { border:1px dashed #6a8767; }
.board-legend .legend-supply { display:inline-flex; align-items:center; justify-content:center; font-size:13px; line-height:1; }
.mission-readout { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; border-top:1px dashed #bdc7ae; padding-top:18px; }
.mission-readout div { display:flex; flex-direction:column; gap:4px; }
.mission-readout strong { color:#46614e; font-size:27px; font-weight:500; letter-spacing:-1px; }
.mission-readout span { color:#738163; font-size:11px; }
.mission-controls { padding:27px; border-left:1px solid #d8ddc9; background:#fcfaf0; }
.mission-controls fieldset { border:0; padding:0; margin:0; min-width:0; }
.map-mode legend { font-size:13px; font-weight:500; margin-bottom:11px; }
.mode-options { display:flex; gap:5px; border:1px solid #d9ddcc; padding:4px; border-radius:5px; background:#f0f1e7; }
.mode-options label { position:relative; flex:1; cursor:pointer; text-align:center; }
.mode-options input { position:absolute; opacity:0; width:1px; height:1px; }
.mode-options span { display:block; padding:10px 4px; font-size:12px; border-radius:3px; }
.mode-options input:checked + span { background:#496750; color:#fffdf3; box-shadow:0 1px 3px #203b3522; }
.mode-options input:focus-visible + span { outline:2px solid #b37a39; outline-offset:2px; }
.map-mode p { color:#6a7a61; font-size:11px; line-height:1.7; margin-top:10px; min-height:37px; }
.control-step { display:flex; align-items:center; gap:9px; margin:22px 0 11px; }
.step-number { width:21px; height:21px; border:1px solid #bfc9ae; border-radius:50%; font:11px/20px monospace; text-align:center; color:#788969; }
.control-step h3 { font-weight:500; font-size:14px; }
.rover-selector { display:flex; gap:7px; }
.rover-choice { flex:1; border:1px solid #d6dccb; background:transparent; border-radius:4px; padding:11px 5px; display:flex; align-items:center; justify-content:center; gap:6px; font:13px/1.4 "DM Sans",sans-serif; cursor:pointer; color:#5b705b; }
.rover-choice i { width:9px; height:9px; background:var(--rover-color); border-radius:2px; }
.rover-choice[aria-pressed="true"] { border-color:var(--rover-color); background:#eaf0e0; box-shadow:0 0 0 1px var(--rover-color); }
.control-hint { color:#68785f; font-size:12px; line-height:1.7; }
.steering { display:flex; gap:20px; align-items:center; margin:13px 0 17px; }
.direction-pad { display:grid; grid-template-columns:repeat(3,40px); grid-template-rows:repeat(3,35px); gap:3px; flex:none; }
.direction-pad button { appearance:none; border:1px solid #d6dcc8; background:#f1f1e3; color:#5c7456; border-radius:4px; font-size:20px; cursor:pointer; }
.direction-pad button:hover { background:#e2e9d5; }.direction-pad button:disabled { opacity:.35; cursor:default; }
.direction-pad button[data-direction="up"] { grid-area:1/2; }.direction-pad button[data-direction="left"] { grid-area:2/1; }.direction-pad button[data-direction="stay"] { grid-area:2/2; }.direction-pad button[data-direction="right"] { grid-area:2/3; }.direction-pad button[data-direction="down"] { grid-area:3/2; }
#plan-summary { font:10px/2 monospace; color:#768167; white-space:pre-line; }
.cosmic-button { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:46px; padding:12px 18px; border:1px solid #426047; background:#496950; border-radius:4px; color:#fffdf1; font:500 13px/1.5 "DM Sans",sans-serif; cursor:pointer; }
.cosmic-button:hover { background:#38563e; }.cosmic-button:disabled { opacity:.45; cursor:default; }.cosmic-button span { font-size:18px; }
.move-button { width:100%; justify-content:space-between; }
.quiet-button { border:0; background:none; color:#66795d; font:12px/1.6 "DM Sans",sans-serif; padding:9px 0; min-height:40px; cursor:pointer; text-decoration:underline; text-decoration-color:#c4cdb4; text-underline-offset:4px; }
.quiet-button:hover { color:#8b6031; }.quiet-button:disabled { opacity:.4; cursor:default; }
.mission-message { min-height:40px; margin-top:12px; font-size:12px; color:#6b7d62; line-height:1.7; }
.mission-reset { display:flex; justify-content:space-between; gap:15px; border-top:1px dashed #d6ddc7; padding-top:7px; }
.mission-result { margin-top:22px; padding:27px 30px; background:#f1e8d4; border:1px solid #e2d5b7; border-radius:5px; scroll-margin-top:25px; }
.mission-result h3 { font-size:25px; font-weight:500; margin:9px 0 10px; letter-spacing:-.5px; }.mission-result p { color:#68725b; font-size:14px; line-height:1.8; }
.result-actions { display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:18px; align-items:center; }.comparison-copy { margin-top:12px; }
.replay-details { margin-top:20px; border-top:1px dashed #cabe9e; padding-top:15px; }.replay-details summary { font-size:13px; cursor:pointer; min-height:35px; }.replay-details label { display:block; font-size:12px; margin:12px 0; }.replay-details input { width:100%; accent-color:#627a55; }.replay-details p { font-size:11px; }
.science-note { margin-top:20px; border:1px dashed #c4ceb8; border-radius:5px; padding:0 23px; }.science-note summary { display:flex; align-items:center; gap:12px; padding:20px 0; cursor:pointer; font-size:13px; list-style:none; }.science-note summary::-webkit-details-marker { display:none; }.science-note summary > span:first-child { font-size:23px; color:#8f9f78; }.science-toggle { margin-left:auto; }.science-note[open] .science-toggle { transform:rotate(45deg); }.science-note > div { padding:5px 0 22px; max-width:850px; }.science-note h3 { font-size:20px; font-weight:500; }.science-note p { font-size:13px; line-height:1.9; color:#65745e; margin:13px 0; }.science-note .text-link { display:flex; font-size:12px; }
.constellation-section { margin-top:70px; scroll-margin-top:25px; }.constellation-intro { max-width:630px; color:#69755f; font-size:14px; line-height:1.9; margin:-5px 0 27px; }.constellation-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); gap:30px; align-items:start; }
.sky-panel { background:#eef0e5; border:1px solid #d6ddc9; border-radius:7px; overflow:hidden; }.sky-top { margin:0; padding:11px 20px; border-bottom:1px dashed #c9d2b9; }.sky-top .quiet-button { font-size:10px; white-space:nowrap; }.star-sky { position:relative; aspect-ratio:1.3; isolation:isolate; overflow:hidden; cursor:crosshair; background:radial-gradient(ellipse at 70% 25%,#fbf5df77,transparent 55%),radial-gradient(ellipse at 20% 80%,#dce5d5,transparent 65%); }
.star-sky::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(#7d917333 .8px,transparent .8px); background-size:24px 24px; }.sky-orbit { position:absolute; border:1px dashed #b1bda388; width:62%; height:44%; left:20%; top:26%; border-radius:50%; transform:rotate(-25deg); pointer-events:none; }.sky-orbit.second { width:43%; height:70%; left:30%; top:15%; transform:rotate(28deg); }
.sky-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; text-align:center; color:#778565; pointer-events:none; }.sky-empty > span { font-size:51px; color:#b6b394; }.sky-empty strong { font-size:17px; font-weight:400; }.sky-empty p { font-size:12px; }
.visitor-star { position:absolute; transform:translate(-50%,-50%); width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; color:var(--star-color); font-size:31px; cursor:pointer; z-index:2; border-radius:50%; text-shadow:0 0 14px #fff8; }.visitor-star:hover { background:#fff8; }.visitor-star.is-mine { outline:1px dashed var(--star-color); outline-offset:3px; }.star-moon { position:absolute; width:7px; height:7px; border-radius:50%; background:#8e82ac; right:-3px; top:5px; border:2px solid #f5f1e0; }.star-draft { position:absolute; transform:translate(-50%,-50%); font-size:36px; pointer-events:none; color:var(--star-color); opacity:.6; z-index:1; }.star-draft::after { content:"your spot"; position:absolute; white-space:nowrap; font:10px/1.5 monospace; left:50%; top:43px; transform:translateX(-50%); color:#738269; }
#sky-caption { font-size:11px; color:#768267; text-align:center; min-height:45px; line-height:1.7; padding:12px 20px; border-top:1px dashed #c9d2b9; }
.star-panel { min-width:0; padding:5px 0; }.storage-note { font:10px/1.8 monospace; color:#738169; margin-bottom:15px; }.star-panel h3 { font-size:26px; font-weight:500; letter-spacing:-.7px; margin-bottom:18px; }.star-panel label:not(.swatch),.owner-login label { display:block; font-size:12px; font-weight:500; color:#577051; margin:16px 0 8px; }.star-panel input:not([type="radio"]),.star-panel select,.star-panel textarea,.owner-login input,.owner-reply textarea { width:100%; min-width:0; border:1px solid #cfd7c1; background:#fffdf4; border-radius:4px; padding:12px; color:#425b45; font:13px/1.6 "DM Sans",sans-serif; }.star-panel textarea,.owner-reply textarea { resize:vertical; }.star-panel input::placeholder,.star-panel textarea::placeholder { color:#8e9980; }
.star-palette { display:flex; gap:8px; border:0; padding:0; margin:19px 0 0; }.star-palette legend { font-size:12px; font-weight:500; margin-bottom:11px; }.swatch { cursor:pointer; position:relative; }.swatch input { position:absolute; opacity:0; width:1px; height:1px; }.swatch span { display:block; border:1px solid #a88d5544; padding:9px 11px; border-radius:3px; font-size:11px; }.swatch-gold span { background:#eddbad; }.swatch-sage span { background:#d5e1cd; }.swatch-lilac span { background:#e3dbec; }.swatch-coral span { background:#efd2c4; }.swatch input:checked + span { outline:2px solid #6b805e; outline-offset:2px; }.swatch input:focus-visible + span { outline:2px solid #ac672b; outline-offset:3px; }
.form-note,.constellation-footnote { color:#77846b; font-size:11px; line-height:1.8; margin-top:10px; }.star-panel .cosmic-button { margin-top:17px; width:100%; }.form-feedback { font-size:12px; color:#536e4c; line-height:1.8; margin-top:12px; overflow-wrap:anywhere; }.form-feedback.is-error { color:#9b4d36; }.constellation-footnote { margin:22px 0 15px; max-width:680px; }.star-panel #star-welcome { font-size:13px; color:#64765c; line-height:1.8; }.star-badges { display:flex; flex-wrap:wrap; gap:8px; margin:15px 0; }.star-badge { font-size:11px; padding:7px 11px; color:#726384; background:#ede7f2; border:1px solid #d7cce0; border-radius:3px; }.reply-note { background:#e7eddb; border-left:3px solid #92a776; padding:17px; margin:17px 0; }.reply-note p { font-size:13px; line-height:1.8; margin-top:9px; white-space:pre-wrap; overflow-wrap:anywhere; }.secondary-button { background:transparent; color:#49654a; border-color:#b9c8a7; }.secondary-button:hover { background:#e7edda; }.forget-star { font-size:10px; margin-top:17px; }.visitor-run { font-size:11px; color:#6d7d61; padding:10px 0; border-bottom:1px dashed #d5ddc6; }.visitor-run strong { font-weight:500; color:#526a4b; }.visitor-message { font-size:12px; line-height:1.8; margin-top:12px; padding:13px 15px; background:#f0ecd9; border-radius:4px; white-space:pre-wrap; overflow-wrap:anywhere; }
.play-invitation { display:grid; grid-template-columns:1fr auto; align-items:center; gap:26px; padding:26px 30px; margin-top:36px; background:#edf0df; border:1px dashed #bac8a7; border-radius:5px; }.play-invitation h3 { font-size:24px; font-weight:500; letter-spacing:-.5px; margin:8px 0; }.play-invitation p { color:#67785c; font-size:13px; line-height:1.8; }.play-invitation .text-link { white-space:nowrap; }
.owner-login { max-width:460px; padding:28px; border:1px solid #d0d9c0; border-radius:5px; background:#f0f1e5; }.owner-login p { font-size:13px; line-height:1.8; color:#6c7c61; }.owner-login .cosmic-button { margin-top:18px; }.owner-bar { display:flex; justify-content:space-between; gap:20px; align-items:center; margin:10px 0 25px; }.owner-stats { display:flex; gap:24px; font-size:13px; }.owner-entry { border:1px solid #d4dbc6; border-radius:5px; margin-bottom:20px; padding:25px; background:#fcfaf0; }.owner-entry h2 { font-size:23px; font-weight:500; }.owner-entry time { font:10px/1.8 monospace; color:#7d8a6e; }.owner-entry ul { margin:18px 0; padding-left:18px; }.owner-entry li { font-size:13px; line-height:1.9; color:#637659; margin-top:10px; overflow-wrap:anywhere; white-space:pre-wrap; }.owner-reply label { display:block; font-size:12px; margin-bottom:8px; }.owner-reply .cosmic-button { margin-top:10px; }.owner-entry .owner-meta { font-size:11px; margin:6px 0 15px; color:#728266; }
.cosmic-button:focus-visible,.quiet-button:focus-visible,.rover-cell:focus-visible,.rover-choice:focus-visible,.direction-pad button:focus-visible,.visitor-star:focus-visible { outline:3px solid #b48038; outline-offset:3px; }
.star-panel h3,.owner-entry h2,#sky-caption { overflow-wrap:anywhere; }
@media(max-width:1000px) { .mission-console,.constellation-layout { grid-template-columns:minmax(0,1.2fr) minmax(275px,1fr); }.mission-board-panel { padding:18px; }.mission-controls { padding:22px; }.steering { gap:10px; }.play-heading-art { margin-right:10px; }.board-legend { gap:9px; }.mission-stamp { display:none; } }
@media(max-width:800px) { .mission-console,.constellation-layout { grid-template-columns:1fr; }.mission-controls { border-left:0; border-top:1px solid #d8ddc9; }.mission-board-panel { padding:24px; }.rover-board { max-width:590px; margin:auto; }.rover-cell { max-height:65px; }.star-panel { padding:10px 5px; }.star-sky { aspect-ratio:1.5; }.play-heading-art { width:150px; height:150px; margin-right:10px; }.sketch-planet { font-size:90px; left:35px; top:0; }.play-heading-art .hand-note { font-size:10px; left:-10px; bottom:-15px; }.direction-pad { grid-template-columns:repeat(3,44px); grid-template-rows:repeat(3,40px); }.steering { gap:28px; }#plan-summary { font-size:12px; }.mission-message { min-height:0; margin-bottom:15px; } }
@media(max-width:600px) { .play-heading { padding-bottom:26px; }.play-heading-art { display:none; }.play-heading h1 { font-size:44px; }.play-heading p { font-size:14px; }.play-tabs { gap:25px; }.play-tabs a { gap:9px; }.play-tabs span { font-size:12px; }.mission-section { padding-top:35px; }.mission-heading h2 { font-size:32px; }.mission-heading p { font-size:13px; }.mission-heading .notebook-kicker { font-size:9px; }.mission-board-panel { padding:14px 12px 18px; }.rover-board { padding:4px; gap:3px; }.rover-cell { border-radius:3px; }.rover-cell.is-supply::before { font-size:22px; }.rover-icon { border-width:1px; border-radius:3px; }.rover-icon::after { height:5px; top:-5px; }.board-top { font-size:9px; margin-bottom:13px; }.board-legend { gap:10px; font-size:9px; margin:13px 0 17px; }.board-legend i { width:8px; height:8px; }.mission-readout strong { font-size:24px; }.mission-readout span { font-size:10px; }.mission-controls { padding:22px; }.mission-result { padding:24px 22px; }.mission-result h3 { font-size:22px; }.mission-result p { font-size:13px; }.science-note { padding:0 18px; }.science-note summary { font-size:12px; align-items:flex-start; }.science-note summary > span:first-child { line-height:1; }.science-note p { font-size:12px; }.science-note h3 { font-size:18px; }.constellation-section { margin-top:45px; }.constellation-section .hand-note { display:none; }.constellation-intro { font-size:13px; }.star-sky { aspect-ratio:1.05; }.sky-top { padding:10px 14px; font-size:9px; }.star-panel { padding:0; }.play-invitation { grid-template-columns:1fr; gap:9px; padding:24px; }.play-invitation h3 { font-size:22px; }.owner-stats { gap:12px; font-size:11px; }.owner-entry { padding:21px; }.owner-bar { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .visitor-star,.rover-cell,.cosmic-button { transition:none; } }
/* Keep the whole tap-to-plan loop together on a phone. Arrow keys still work on the map. */
@media(max-width:800px) {
  .mission-console { display:flex; flex-direction:column; }
  .mission-controls { display:contents; }
  .mission-controls .map-mode { order:0; margin:18px 18px 12px; }
  .map-mode p { min-height:0; margin-top:7px; }
  .rover-selector { order:1; margin:0 18px 12px; }
  .control-hint { order:2; margin:0 18px 12px; font-size:11px; }
  .mission-board-panel { order:3; border-block:1px solid #d8ddc9; }
  .mission-controls .control-step,.mission-controls .steering { display:none; }
  .move-button { order:4; width:auto; margin:15px 18px 0; }
  .mission-message { order:5; margin:10px 18px; }
  .mission-reset { order:6; margin:0 18px 8px; }
}