/* Static markup and an opaque backdrop cover the first paint, before app.js. */
html{background:#171416}
body.startup-loading{margin:0;overflow:hidden}
#app[aria-busy=true]{visibility:hidden}
.startup-screen{
  position:fixed;inset:0;z-index:1000;overflow:auto;display:flex;align-items:center;justify-content:center;
  min-height:100svh;padding:36px 24px;color:#ead8b7;text-align:center;
  background:radial-gradient(ellipse at 50% 44%,#1e191bd9,#171416f0 76%),
    url('/assets/ui/tuvalkane-station.png') center/cover no-repeat,#171416;
  transition:opacity .18s ease-out;
}
.startup-screen[hidden],.startup-screen [hidden]{display:none!important}
.startup-screen[data-state=ready]{opacity:0;pointer-events:none}
.startup-content{width:min(100%,480px);position:relative;padding:12px 0}
.startup-portrait{
  width:clamp(140px,26vh,230px);height:clamp(140px,26vh,230px);margin:0 auto 20px;position:relative;
  background:radial-gradient(ellipse,#b7945926,transparent 70%);
}
.startup-portrait img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 20px #0008)}
.startup-community{margin:0 0 12px;font:400 .65rem/1.6 'Segoe UI',sans-serif;text-transform:uppercase;letter-spacing:.19em;color:#bc9b65}
.startup-screen h1{margin:0;color:#ead8b7;font:400 clamp(1.65rem,4.8vw,2.3rem)/1.3 'Spectral SC',Georgia,serif;letter-spacing:.015em}
.startup-slogan{margin:8px 0 38px;color:#c7b9a7;font:400 1rem/1.5 Spectral,Georgia,serif}
.startup-meter{position:relative;width:100%;padding:0 9px}
.startup-meter:before,.startup-meter:after{
  content:'';position:absolute;top:4px;width:5px;height:5px;border:1px solid #aa8650;transform:rotate(45deg);
  background:#241e1c;pointer-events:none;
}
.startup-meter:before{left:0}.startup-meter:after{right:0}
.startup-screen progress{
  display:block;appearance:none;width:100%;height:7px;margin:0;border:1px solid #8f734355;border-radius:2px;
  overflow:visible;background:#0f0c0e;accent-color:#deb474;
}
.startup-screen progress::-webkit-progress-bar{background:#0f0c0e;border-radius:2px;box-shadow:inset 0 1px 4px #0008}
.startup-screen progress::-webkit-progress-value{
  border-radius:1px;background:linear-gradient(90deg,#8f613c,#c49254 55%,#f2d196);
  box-shadow:0 0 12px #d9a56066,0 0 3px #ecc389;
  transition:width .18s ease-out;
}
.startup-screen progress::-moz-progress-bar{background:linear-gradient(90deg,#8f613c,#c49254 55%,#f2d196);box-shadow:0 0 12px #d9a56066}
.startup-caption{display:flex;align-items:baseline;justify-content:space-between;gap:16px;text-align:left;margin-top:13px;font:400 .8rem/1.7 'Segoe UI',sans-serif;color:#c7b9a7}
.startup-status{margin:0;min-width:0;overflow-wrap:anywhere}
.startup-count{font-size:.7rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:#a38b6b}
.startup-hint{margin:22px 0 0;font:400 .8rem/1.7 'Segoe UI',sans-serif;color:#c7b9a7}
.startup-retry{
  display:inline-flex;align-items:center;justify-content:center;margin-top:20px;min-height:44px;padding:10px 28px;
  border:1px solid #ba965f;background:#332822;color:#ead8b7;border-radius:2px;cursor:pointer;
  font:400 .85rem/1.5 'Spectral SC',Georgia,serif;
}
.startup-retry:hover{background:#4a3729;color:#fff0cd}
.startup-retry:focus-visible{outline:2px solid #ead8b7;outline-offset:4px}
.startup-screen[data-state=error] .startup-caption{justify-content:center;text-align:center}
.startup-screen[data-state=error] .startup-meter{display:none}
.startup-no-script{margin:18px 0;color:#ead8b7;font:400 .85rem/1.7 'Segoe UI',sans-serif}
@media(max-width:480px){
  .startup-screen{padding:28px 26px}
  .startup-slogan{margin-bottom:30px}
  .startup-community{font-size:.6rem;letter-spacing:.12em}
}
@media(max-height:520px){
  .startup-screen{align-items:flex-start;padding-block:20px}
  .startup-portrait{width:110px;height:110px;margin-bottom:12px}
  .startup-slogan{margin-bottom:22px}
}
@media(prefers-reduced-motion:reduce){
  .startup-screen,.startup-screen progress::-webkit-progress-value{transition:none}
}