/* Astraline's observatory: the same ink, brass and editorial type as the landing.
   Presentation only: IDs and game-state ownership stay with the existing shell. */
:root {
  color-scheme: dark;
  --bg:#090e17; --panel:#101720f5; --line:#ffffff24; --txt:#eae7dd;
  --dim:#a2a7ad; --gold:#dcc28b; --accent:#dcc28b; --bad:#f48f96;
  --serif:"Iowan Old Style",Baskerville,"Palatino Linotype","Songti TC",serif;
  --sans:"Avenir Next","PingFang TC","Noto Sans TC",sans-serif;
  --mono:"SFMono-Regular",Consolas,monospace;
}
* { box-sizing:border-box; }
html,body { font-family:var(--sans); -webkit-font-smoothing:antialiased; }
button,input,textarea { font-family:inherit; }
button { background:#141d28; border-color:var(--line); border-radius:3px; line-height:1.4;
  transition:background .16s,border-color .16s,color .16s; }
button:hover:not(:disabled) { background:#242b30; border-color:var(--gold); }
button.primary { background:var(--gold); border-color:var(--gold); color:var(--bg); }
button.primary:hover:not(:disabled) { background:#efdab0; color:var(--bg); }
button.small { min-height:34px; }
button:disabled { opacity:.45; cursor:not-allowed; }
button:focus-visible,summary:focus-visible,[role=button]:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
button.mode-on { background:#34332b; border-color:var(--gold); color:var(--gold); }
button#btn-wipe { color:var(--bad); }
h1,h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.02em; }
h1 { font-size:44px; }
.eyebrow { font:11px/1.6 var(--mono); color:var(--gold); letter-spacing:.16em; margin-bottom:12px; }
.sub { line-height:1.8; font-size:15px; }
.hint { font-size:12px; line-height:1.7; }
.screen { background:var(--panel); backdrop-filter:none; border-radius:4px; padding:28px 32px;
  max-height:92dvh; max-width:calc(100vw - 48px); scrollbar-width:thin; scrollbar-color:#6a6252 transparent; }
#shell { justify-content:center; padding:24px max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left)); }
#home { width:min(1200px,100%); max-width:none; height:min(820px,100%); max-height:none; padding:0;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:6%;
  background:none; border:0; overflow:visible; pointer-events:none !important; }
.home-intro { position:relative; min-width:0; padding:24px 0; }
.home-intro h1 { font-size:clamp(62px,7vw,100px); color:var(--txt); line-height:1.15; margin:0 0 20px; }
.home-intro h1 span { color:var(--gold); font-size:.5em; vertical-align:top; margin-left:12px; }
.home-intro .back-to-site { pointer-events:auto; margin-bottom:48px; text-decoration:none; }
.home-intro .sub { max-width:310px; }
.observatory-dial { position:absolute; top:34%; left:-4%; width:100%; max-height:62%; color:#dcc28b38; pointer-events:none; }
.home-caption { position:absolute; bottom:20px; left:0; font-size:12px; color:var(--dim); letter-spacing:.04em; }
.home-caption > span:first-child { color:var(--gold); font-family:var(--mono); }
.home-console { pointer-events:auto; align-self:center; padding:24px 0 24px 30px; border-left:1px solid var(--line);
  max-height:100%; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#6a6252 transparent;
  background:linear-gradient(90deg,#090e17ed,#090e17fa); }
.console-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.console-heading .eyebrow { margin:0; }
#btn-lang { white-space:nowrap; background:transparent; font-size:11px; margin:0; }
.dust { display:flex; align-items:center; gap:8px; color:var(--dim); font-size:12px; margin:20px 0; }
.dust b { color:var(--gold); font:20px var(--serif); }
.dust > span:last-child { color:var(--gold); }
.home-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.home-actions button { width:100%; margin:0; min-height:48px; font-size:13px; text-align:left; padding:12px 14px; }
.home-actions #btn-observe { grid-column:1/-1; font-size:19px; min-height:64px; display:flex; justify-content:space-between; align-items:center; }
#btn-observe::after { content:"↗"; font-size:23px; margin-left:12px; }
.home-actions #btn-online { grid-column:1/-1; border-color:#dcc28b66; color:var(--gold); }
.home-actions #btn-collection { grid-column:1/-1; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; }
.sect { border:0; border-top:1px solid var(--line); background:transparent; border-radius:0; padding:14px 0; margin-top:0; }
.sect > .sect-t { font:10px/1.6 var(--mono); letter-spacing:.12em; color:var(--gold); margin-bottom:10px; }
#chron-sect { margin-top:20px; border-top:0; }
#chron-status { line-height:1.6; }
.console-details { border-top:1px solid var(--line); }
.console-details summary { cursor:pointer; padding:16px 2px; font-size:13px; color:var(--txt); }
.console-details summary::marker { color:var(--gold); }
.console-details[open] > summary { color:var(--gold); }
.settings-controls { display:flex; flex-wrap:wrap; padding-bottom:12px; }
.console-note { font-size:11px; line-height:1.8; color:var(--dim); margin-top:20px; }
.chips span { background:#dcc28b12; border-radius:2px; color:var(--gold); line-height:1.7; }
#stage-label { position:static; max-width:none; margin:8px 0 18px; text-shadow:none; }
#stage-label .nm { font-family:var(--serif); }
#stage-label .ln { font-size:12px; line-height:1.6; }
#stage-label .nm { font-size:24px; }
.chron-name { text-shadow:none; }
#editor { width:min(1150px,100%); }
#editor h1 { font-size:38px !important; margin-bottom:22px; }
#editor .row { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(270px,1fr); gap:32px; align-items:start; }
.board-workspace,.board-library { min-width:0; }
.board-library { border-left:1px solid var(--line); padding-left:28px; }
#board-svg { display:block; width:100%; height:auto; background:#0b121c; border-radius:2px; border-color:#dcc28b40; }
.cell { fill:#121c27; stroke:#293440; }
.cell.dark { fill:#0a1019; stroke:#1c2530; }
.star-main { fill:var(--gold); }
.star-support { fill:#9bc6d1; }
.link-line { stroke:#dcc28b; pointer-events:none; }
.cell:focus-visible { stroke:var(--gold); stroke-width:3px; outline:none; }
#board-hint { color:var(--dim); font-size:12px; line-height:1.6; margin-top:12px; }
.skills { font-family:var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.palette { min-width:0; max-height:42dvh; gap:0; padding-right:4px; scrollbar-width:thin; }
.pal-item { border:0; border-bottom:1px solid var(--line); border-radius:0; padding:12px 8px; font-size:13px; line-height:1.5; }
.pal-item.sel { background:#dcc28b18; box-shadow:inset 2px 0 var(--gold); }
.pal-item.empty { opacity:.48; }
.pal-item > * { min-width:0; overflow-wrap:anywhere; }
#result { width:min(640px,100%); border-top:2px solid var(--gold); }
#result h2 { font-size:46px; margin:18px 0 24px; }
#result-body { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; margin-bottom:20px; }
.stellagram-print { font-family:var(--serif); }
#coll-overlay .screen { max-width:calc(100vw - 32px) !important; }
#coll-overlay h2 { font-size:30px; }
#genesis h2 { font-size:36px; }
#dlg-input,#name-input { background:#0b121c !important; border-radius:2px !important; }
#dlg-input { max-width:100%; }
#online-panel { width:min(760px,calc(100vw - 32px)); border-color:#dcc28b70; border-radius:4px; padding:30px; }
#online-panel h2 { font-family:var(--serif); font-size:32px; letter-spacing:0; }
#online-panel h3 { font-size:15px; font-weight:500; }
#online-panel p,#online-panel output { font-size:13px; }
#online-panel input:not([type=checkbox]),#online-panel textarea { background:#101923; border-radius:2px; }
#online-panel .publish-consent { background:#dcc28b0d; }
.observation-card { background:#0b121c; border-color:#dcc28b66; border-radius:2px; }
.card-score { font-family:var(--serif); font-size:24px; }
.card-id,#online-evidence { font-family:var(--mono); }
@media (max-width:1000px) {
  #home { gap:3%; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); }
  .home-console { padding-left:20px; }
  .home-intro h1 { font-size:64px; }
  #editor .row { gap:20px; grid-template-columns:minmax(0,1fr) minmax(240px,1fr); }
  .board-library { padding-left:18px; }
}
@media (max-width:640px) and (min-height:501px) {
  #shell { padding:16px; }
  #home { display:block; overflow-y:auto; pointer-events:auto !important; background:#090e17f5; }
  .home-intro { padding:0 0 12px; }
  .home-intro .back-to-site { margin-bottom:16px; }
  .home-intro h1 { font-size:56px; margin-bottom:10px; }
  .home-intro .sub { margin-bottom:8px; }
  .observatory-dial,.home-caption { display:none; }
  .home-console { max-height:none; border:0; padding:12px 0; }
  .screen { padding:20px; max-width:100%; }
  #editor .row { grid-template-columns:1fr; }
  .board-library { border-left:0; padding-left:0; }
  #editor h1 { font-size:30px !important; }
  .palette { max-height:36dvh; }
  #online-panel { padding:18px; }
}
@media (max-height:500px) {
  #shell { padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left)); }
  #home { grid-template-columns:minmax(0,.75fr) minmax(0,1fr); gap:24px; }
  .home-intro { padding:4px 0; }
  .home-intro .back-to-site { margin-bottom:18px; }
  .home-intro h1 { font-size:52px; }
  .home-intro .sub { font-size:12px; }
  .home-console { align-self:stretch; padding:8px 0 8px 20px; }
  .home-actions button { min-height:42px; padding:9px 12px; }
  .home-actions #btn-observe { min-height:48px; font-size:16px; }
  .dust { margin:10px 0; }
  .home-caption { bottom:4px; font-size:10px; }
  .observatory-dial { top:30%; max-height:68%; }
  .screen { max-height:calc(100dvh - 20px); padding:14px 18px; }
  #editor { width:100%; }
  #editor h1,#editor > .eyebrow { display:none; }
  #editor .row { grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:20px; }
  #board-svg { width:min(100%,64dvh); margin:auto; }
  .board-library { padding-left:16px; }
  .palette { max-height:42dvh; }
  .pal-item { padding:8px; font-size:12px; }
  #board-hint { font-size:11px; }
  #stage-label { bottom:10vh; }
  #stage-label .nm { font-size:18px; }
  #stage-label .ln { font-size:10px; }
  #online-panel { max-height:90dvh; padding:16px 22px; }
}
@media (prefers-reduced-motion:reduce) { button { transition:none; } }