:root{
  --void:#04060C; --panel:#0B0F1A; --line:rgba(130,165,215,.13);
  --line-strong:rgba(130,165,215,.28);
  --ink:#C7D4E8; --ink-dim:#6F7F99; --ink-bright:#EEF4FF; --key:#7FA8D8;
  --r-deepcore:#FFE7A8; --r-core:#FFD06B; --r-colonies:#C9E3FF;
  --r-inner:#8FC4F5; --r-expansion:#6BA3DC; --r-mid:#5382BC;
  --r-outer:#42648F; --r-hutt:#B7A24F; --r-wild:#8A74AD; --r-unknown:#6D5F8C;
}
*{box-sizing:border-box}
/* Opening title card (see #boot-loader in index.html). Font, color and timings match starwars-timeline. */
#boot-loader{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:0 8vw; background:#000; animation:boot-give-up 1s ease-in 10s forwards}
#boot-loader p{margin:0; max-width:30rem; font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;
  font-size:clamp(1.25rem,5.5vw,2.75rem); line-height:1.35; letter-spacing:.01em; color:#4bd5ee;
  animation:boot-fade-in .8s ease-out both}
/* Set by window.__dismissBoot(); wins over the give-up animation. */
#boot-loader.boot-done{animation:none; opacity:0; transition:opacity 700ms ease-in; pointer-events:none}
@keyframes boot-fade-in{from{opacity:0} to{opacity:1}}
@keyframes boot-give-up{to{opacity:0; visibility:hidden}}
@media (prefers-reduced-motion:reduce){#boot-loader p,#boot-loader.boot-done{animation:none; transition:none}}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{
  background:var(--void); color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-size:14px; line-height:1.45;
  display:flex; flex-direction:column; overflow:hidden; -webkit-font-smoothing:antialiased;
}
/* env(safe-area-inset-*) keeps controls clear of the notch and home indicator
   (viewport-fit=cover lets the canvases run edge to edge in landscape). */
header{padding:calc(8px + env(safe-area-inset-top)) calc(58px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left)); border-bottom:1px solid var(--line); flex:none;
       display:flex; align-items:center; gap:9px; flex-wrap:wrap; position:relative; z-index:10}
.appTitle{flex:none; font-size:13.5px; font-weight:600; color:var(--ink-bright); white-space:nowrap}
.seg{display:flex; flex:none; border:1px solid var(--line-strong); border-radius:3px; overflow:hidden}
.seg button{
  background:transparent; border:none; color:var(--ink-dim); font:inherit; font-size:12.5px;
  padding:5px 13px; cursor:pointer;
}
.seg button+button{border-left:1px solid var(--line-strong)}
.seg button[aria-pressed="true"]{background:rgba(127,168,216,.16); color:var(--ink-bright)}
.bar{display:flex; align-items:center; gap:9px; flex:1; min-width:0; flex-wrap:wrap}
.bar[hidden]{display:none}
.count,.meta{font-size:11.5px; color:var(--ink-dim); font-variant-numeric:tabular-nums}
.menuwrap{position:absolute; top:calc(7px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right))}
#appMenu{position:absolute; right:0; top:calc(100% + 6px); min-width:160px;
         background:rgba(8,12,22,.97); border:1px solid var(--line-strong); border-radius:3px;
         padding:3px; display:flex; flex-direction:column; gap:2px; z-index:20}
#appMenu button,#appMenu a{text-align:left; background:none; border:none; color:var(--ink); font:inherit;
  font-size:12.5px; padding:7px 10px; border-radius:2px; cursor:pointer; text-decoration:none; display:block}
#appMenu button:hover,#appMenu button:focus-visible,#appMenu a:hover,#appMenu a:focus-visible{background:rgba(127,168,216,.12)}
.ib{width:40px; height:40px; display:inline-grid; place-items:center; background:rgba(16,22,36,.9);
    border:1px solid var(--line-strong); border-radius:3px; color:var(--ink-dim); cursor:pointer}
.ib:hover{color:var(--ink)}
.ib[aria-pressed="true"],.ib[aria-expanded="true"]{color:var(--ink-bright); border-color:var(--key)}
#menuBtn{width:32px; height:32px}
#dockPlay.live{color:var(--key); border-color:var(--key)}
#dockFilm.live,#dockFilmS.live{color:var(--key); border-color:var(--key)}
input[type=search],input[type=text],select{
  background:var(--panel); border:1px solid var(--line-strong); color:var(--ink);
  border-radius:3px; padding:4px 8px; font:inherit; font-size:12.5px; outline:none; max-width:160px;
}
input[type=search]:focus,input[type=text]:focus,select:focus{border-color:var(--key)}
/* iOS drops the native arrow once a select is restyled, so draw our own chevron (the world pickers use it too). */
select,.picker input{appearance:none; -webkit-appearance:none; padding-right:28px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239AA7BD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:11px 8px}
input::placeholder{color:var(--ink-dim)}
main{flex:1; position:relative; min-height:0}
#adBar{flex:none; display:flex; justify-content:center; height:50px; overflow:hidden;
       padding-bottom:env(safe-area-inset-bottom); border-top:1px solid var(--line); background:var(--void)}
section.view{position:absolute; inset:0; touch-action:none}
section.view[hidden]{display:none}
canvas{display:block; width:100%; height:100%}
.hud{position:absolute; inset:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); pointer-events:none}
.card{
  position:absolute; top:8px; left:8px; background:rgba(6,10,20,.95);
  border:1px solid var(--line-strong); border-radius:3px; padding:9px 11px;
  max-width:215px; display:none; pointer-events:auto;
}
.card.on{display:block}
/* World card (both views): floats beside the selected world; card.js moves it with a transform on every draw. */
/* Two rows: name over region, sky button to the right spanning both. */
.wcard{top:0; left:0; will-change:transform; padding:7px 8px 7px 11px;
       grid-template-columns:auto auto; gap:0 12px; align-items:center}
.wcard.on{display:grid}
.wcard h2{margin:0; white-space:nowrap}
.wcard dl{grid-column:1}
.wcard .jump{grid-column:2; grid-row:1 / span 2; margin:0; width:32px; height:32px}
.card h2{margin:0 0 3px; font-size:14px; font-weight:600; color:var(--ink-bright)}
.card dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:1px 9px; font-size:12px}
.card dt{color:var(--ink-dim)}
.card dd{margin:0; font-variant-numeric:tabular-nums}
.card .est{margin:6px 0 0; font-size:11px; color:#B7A24F; line-height:1.3}
.jump{
  margin-top:8px; width:28px; height:28px; background:rgba(127,168,216,.14); border:1px solid var(--key);
  color:var(--ink-bright); padding:0; border-radius:2px;
  cursor:pointer; display:inline-grid; place-items:center;
}
.jump:hover{background:rgba(127,168,216,.26)}
input[type=range]{width:100%; margin:0; accent-color:var(--key); height:16px}
button.t{
  flex:1; background:rgba(16,22,36,.9); border:1px solid var(--line-strong); color:var(--ink-dim);
  font:inherit; font-size:11.5px; padding:4px 7px; border-radius:2px; cursor:pointer; white-space:nowrap;
}
button.t:hover{color:var(--ink)}
button.t[aria-pressed="true"]{color:var(--ink-bright); border-color:var(--key)}
.legend{display:flex; flex-wrap:wrap; justify-content:center; gap:5px}
.chip{display:flex; align-items:center; gap:5px; font:inherit; font-size:12px; color:var(--ink);
      background:rgba(6,10,20,.85); border:1px solid var(--line-strong); border-radius:2px;
      padding:5px 9px 5px 7px; cursor:pointer; user-select:none; white-space:nowrap}
.chip:hover{color:var(--ink)}
.chip.off{opacity:.3}
.chip i{width:9px; height:9px; border-radius:50%; display:block}
.chip b{font-weight:500; font-variant-numeric:tabular-nums; opacity:.7}
.films .chip[aria-pressed="true"]{color:var(--ink-bright); border-color:var(--key)}
#compass{position:absolute; top:8px; left:0; right:0; text-align:center; font-size:11px;
         color:var(--ink-dim); font-variant-numeric:tabular-nums}
#here{position:absolute; left:50%; bottom:6px; transform:translateX(-50%); max-width:calc(100% - 272px);
       font-size:12px; color:var(--ink-dim); text-align:center; white-space:nowrap;
       overflow:hidden; text-overflow:ellipsis; text-shadow:0 0 4px #03050B, 0 0 8px #03050B; pointer-events:none}
#here b{font-weight:500; color:var(--ink-bright)}
#mini{position:absolute; right:8px; bottom:8px; width:120px; height:120px; padding:0;
       background:rgba(6,10,20,.9); border:1px solid var(--line-strong); border-radius:50%;
       overflow:hidden; cursor:pointer; pointer-events:auto}
#mini:hover{border-color:var(--key)}
#dock,#gDock{position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:flex; gap:8px;
      pointer-events:auto}
#dock{bottom:28px}
.pop{position:absolute; left:50%; bottom:56px; transform:translateX(-50%); width:min(560px, calc(100% - 16px));
     pointer-events:auto; background:rgba(6,10,20,.92); border:1px solid var(--line); border-radius:3px;
     padding:7px 9px 8px}
#viewS .pop{bottom:76px}
#stand{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.pickers{display:flex; flex-direction:column; gap:7px}
.transport{flex:none; display:flex; position:relative}
.play{width:56px; padding:5px 0; background:rgba(16,22,36,.9); border:1px solid var(--line-strong);
      border-right:none; border-radius:2px 0 0 2px; color:var(--ink); font:inherit; font-size:12px; cursor:pointer}
.play[aria-pressed="true"]{color:var(--ink-bright); border-color:var(--key)}
.caret{padding:5px 8px; background:rgba(16,22,36,.9); border:1px solid var(--line-strong);
       border-radius:0 2px 2px 0; color:var(--ink-dim); font:inherit; font-size:11px;
       cursor:pointer; white-space:nowrap}
.caret:hover{color:var(--ink)}
.caret[aria-expanded="true"]{color:var(--ink-bright); border-color:var(--key)}
#modeMenu{position:absolute; bottom:calc(100% + 4px); left:0; min-width:182px; z-index:5;
          background:rgba(8,12,22,.97); border:1px solid var(--line-strong); border-radius:3px;
          padding:3px; display:flex; flex-direction:column; gap:2px}
#modeMenu[hidden]{display:none}
#modeMenu button{text-align:left; background:none; border:none; border-radius:2px; cursor:pointer;
  color:var(--ink); font:inherit; font-size:12px; padding:5px 8px 6px 22px; position:relative}
#modeMenu button em{display:block; font-style:normal; font-size:10.5px; color:var(--ink-dim); margin-top:1px}
#modeMenu button:hover{background:rgba(127,168,216,.12)}
#modeMenu button[aria-checked="true"]::before{content:"\2713"; position:absolute; left:7px; top:5px;
  color:var(--key); font-size:11px}
.sl{flex:1 1 130px; display:flex; flex-direction:column; gap:2px; min-width:110px}
.sl label{font-size:10.5px; color:var(--ink-dim); display:flex; justify-content:space-between; gap:6px}
.sl label span{font-variant-numeric:tabular-nums; color:var(--ink)}
.pre{display:flex; gap:3px; flex:1 1 100%}
.pre button{flex:1; background:rgba(16,22,36,.9); border:1px solid var(--line); color:var(--ink-dim);
  font:inherit; font-size:10.5px; padding:3px 2px; border-radius:2px; cursor:pointer}
.pre button:hover{color:var(--ink)}
.pre button[aria-pressed="true"]{color:var(--ink-bright); border-color:var(--key)}
.quick{display:flex; gap:4px; overflow-x:auto; pointer-events:auto; scrollbar-width:none; padding-bottom:2px}
.quick::-webkit-scrollbar{display:none}
.quick button{flex:none; background:rgba(6,10,20,.85); border:1px solid var(--line);
  color:var(--ink-dim); font:inherit; font-size:11.5px; padding:4px 9px; border-radius:2px;
  cursor:pointer; white-space:nowrap}
.quick button[aria-pressed="true"]{color:var(--ink-bright); border-color:var(--key)}
.quick button:hover{color:var(--ink)}
.wherewrap{pointer-events:auto; display:flex; align-items:center; gap:8px}
.wherewrap label{font-size:12px; color:var(--ink-dim)}
.wherewrap .picker{width:220px; max-width:100%; min-width:0}
/* Type-to-jump world picker (picker.js): the list drops below the box, or rises above it with .up. */
.picker{position:relative; pointer-events:auto}
.picker input{width:100%; max-width:none; box-sizing:border-box}
.picker ul{position:absolute; left:0; right:0; top:calc(100% + 3px); z-index:40; margin:0; padding:3px 0;
  list-style:none; max-height:min(260px, 45vh); overflow-y:auto; background:rgba(6,10,20,.97);
  border:1px solid var(--line-strong); border-radius:3px; font-size:12.5px; min-width:180px;
  touch-action:pan-y; overscroll-behavior:contain}
.picker.up ul{top:auto; bottom:calc(100% + 3px)}
.picker ul[hidden]{display:none}
.picker li{padding:6px 10px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink)}
.picker li:hover{background:rgba(127,168,216,.12)}
.picker li.on{background:rgba(127,168,216,.26); color:var(--ink-bright)}
#stand[hidden],#pickers[hidden],#gPickers[hidden],#legend[hidden],#sLegend[hidden],#films[hidden],#sFilms[hidden],#toast[hidden],#appMenu[hidden],#appMenu button[hidden]{display:none}
body:not(.tech) .tech{display:none !important}
#toast{position:absolute; top:8px; right:8px; left:auto; pointer-events:none;
       background:rgba(8,12,22,.95); border:1px solid var(--line-strong); border-radius:3px;
       padding:4px 10px; font-size:12px; color:var(--ink-bright); white-space:normal;
       max-width:calc(100% - 240px); text-align:right}
dialog#about,dialog#help{max-width:min(360px, calc(100% - 32px)); background:var(--panel); color:var(--ink);
             border:1px solid var(--line-strong); border-radius:4px; padding:14px 16px;
             font-size:12.5px; line-height:1.5}
:is(#about,#help)::backdrop{background:rgba(2,4,9,.7)}
:is(#about,#help) h2{margin:0 0 6px; font-size:14px; font-weight:600; color:var(--ink-bright)}
:is(#about,#help) p{margin:0 0 8px}
:is(#about,#help) a{color:var(--key)}
#about .version{font-size:11px; color:var(--ink-dim)}
#aboutClose,#helpClose{margin-top:4px}
dialog#help{max-height:calc(100% - 32px); overflow-y:auto}
#help h3{margin:10px 0 4px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim)}
#help b{color:var(--ink-bright); font-weight:600}
#help i[data-icon]{display:inline-grid; place-items:center; vertical-align:-4px; color:var(--ink-bright)}
#help i[data-icon] svg{width:16px; height:16px}
#help .keys{list-style:none; margin:0 0 8px; padding:0}
#help .keys li{display:flex; align-items:center; gap:8px; margin:0 0 5px}
#help .keys i[data-icon]{flex:none; width:28px; height:28px; border:1px solid var(--line-strong); border-radius:3px; background:rgba(16,22,36,.9)}
#help .keys i + i{margin-left:-4px}
button:focus-visible,select:focus-visible,input:focus-visible,.chip:focus-visible{
  outline:2px solid var(--key); outline-offset:1px}
@media (max-width:640px){
  .legend{gap:4px}
  .chip{font-size:11.5px; padding:6px 8px 6px 6px}
  .sl{flex:1 1 100px; min-width:96px}
  .meta{width:100%}
  #mini{width:88px; height:88px}
  #here{max-width:calc(100% - 208px)}
  #toast{max-width:calc(100% - 172px)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}