/* Loading screen (src/client/engine/ui/Loading.ts) — every class here is ws-load-*; shared names (ws-glass, ws-wordmark) come from base.css */

/* ── pause overlay ── */

/* play-mode HUD hides while the intro is up */

/* Loading screen facts panel (src/client/engine/ui/Loading.ts). Base panel/wordmark styles live in hud.css. */
/* base */
.ws-load { position: fixed; inset: 0; z-index: calc(var(--ws-layer-hud) + 20); font-family: var(--ws-mono); color: var(--ws-text); background: radial-gradient(ellipse at 50% 30%, #0d1a26 0%, #06090f 60%, #030508 100%); display: flex; flex-direction: column; justify-content: space-between; user-select: none; transition: opacity 0.25s ease; }
/* A fresh-page handoff also covers a running page's title/menu layer. */
.ws-load[data-navigation] { z-index: calc(var(--ws-layer-menu) + 1); opacity: 1; transition: none; pointer-events: auto; }
.ws-load.hide { opacity: 0; pointer-events: none; }
.ws-load .ws-load-play { display: block; width: 100%; min-height: 48px; margin-top: 18px; border: 1px solid var(--ws-cyan); background: rgba(9, 22, 36, 0.88); color: var(--ws-cyan); font: 700 18px var(--ws-display); letter-spacing: 0.18em; cursor: pointer; touch-action: manipulation; }
.ws-load .ws-load-play:focus-visible { outline: 2px solid var(--ws-cyan); outline-offset: 3px; }
.ws-load[data-hold] .ws-load-head, .ws-load[data-hold] .ws-load-foot { flex-shrink: 0; }
.ws-load[data-hold] .ws-load-body { min-height: 0; overflow-y: auto; align-items: flex-start; overscroll-behavior: contain; touch-action: pan-y; }
.ws-load[data-hold] .ws-load-panel { flex-shrink: 0; }
.ws-load[data-hold] .ws-load-play { flex: none; align-self: center; width: calc(100% - 32px); max-width: 560px; margin: 8px 16px 14px; }
.ws-load::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(3, 8, 15, 0.62), rgba(3, 8, 15, 0.84) 54%, rgba(3, 8, 15, 0.93)), var(--ws-load-portrait); background-position: center; background-size: cover; pointer-events: none; }
.ws-load::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(143, 227, 255, 0.025) 0 1px, transparent 1px 3px); pointer-events: none; }
.ws-load .ws-load-head, .ws-load .ws-load-body, .ws-load .ws-load-foot, .ws-load .ws-load-play { position: relative; z-index: calc(var(--ws-layer-hud) + 1); }
.ws-load .ws-load-head { padding: 34px 44px 0; }
.ws-load .ws-wordmark { font-family: var(--ws-display); font-weight: 700; font-size: 54px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.ws-load .ws-wordmark b { color: var(--ws-cyan); }
.ws-load .ws-load-tagline { margin-top: 10px; font-size: 13px; letter-spacing: 0.04em; color: var(--ws-text-dim); }
.ws-load .ws-load-body { flex: 1; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; }
.ws-load .ws-load-hold { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: calc(100% - 32px); max-width: 560px; min-height: 52px; padding: 12px 16px; appearance: none; -webkit-appearance: none; border: 1px solid var(--ws-cyan-line); background: var(--ws-glass-deep); color: var(--ws-text-dim); font: 11px var(--ws-mono); letter-spacing: 0.18em; text-transform: uppercase; text-align: left; cursor: pointer; touch-action: manipulation; transition: border-color 0.18s, color 0.18s, background 0.18s; }
/* G875 (Jake: "a nicer toggle button"): the hold is an on / off switch, label left, a pill and knob right (the Settings switch's pill, loading-card size) */
.ws-load .ws-load-hold .ws-gmenu-swlabel { flex: 1 1 auto; min-width: 0; }
.ws-load .ws-load-hold .ws-gmenu-pill { position: relative; flex: none; width: 44px; height: 24px; border-radius: 12px; background: rgba(6, 10, 18, 0.7); border: 1px solid rgba(143, 227, 255, 0.35); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); transition: background 0.18s, border-color 0.18s, box-shadow 0.18s; }
.ws-load .ws-load-hold .ws-gmenu-pill::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ws-text-dim); transition: transform 0.18s, background 0.18s; }
.ws-load .ws-load-hold.on { border-color: var(--ws-cyan); background: rgba(143, 227, 255, 0.08); color: #fff; }
.ws-load .ws-load-hold.on .ws-gmenu-pill { background: rgba(143, 227, 255, 0.28); border-color: var(--ws-cyan); box-shadow: 0 0 12px rgba(143, 227, 255, 0.35), inset 0 0 6px rgba(143, 227, 255, 0.25); }
.ws-load .ws-load-hold.on .ws-gmenu-pill::after { transform: translateX(20px); background: var(--ws-cyan); box-shadow: 0 0 8px var(--ws-cyan); }
.ws-load .ws-load-hold[hidden] { display: none; }
/* LS4 (J188): Copy diagnostics takes Hold's place once the game is ready, the same box with its label centred */
.ws-load .ws-load-copy { flex: none; display: block; width: calc(100% - 32px); max-width: 560px; min-height: 52px; padding: 12px 16px; appearance: none; -webkit-appearance: none; border: 1px solid var(--ws-cyan-line); background: var(--ws-glass-deep); color: #fff; font: 12px var(--ws-mono); letter-spacing: 0.22em; text-transform: uppercase; text-align: center; cursor: pointer; touch-action: manipulation; }
.ws-load .ws-load-copy:focus-visible { outline: 2px solid var(--ws-cyan); outline-offset: 3px; }
.ws-load .ws-load-retry { flex: none; min-height: 44px; padding: 8px 16px; border: 1px solid var(--ws-cyan); color: var(--ws-cyan); background: var(--ws-glass-deep); font: 12px var(--ws-mono); cursor: pointer; }
.ws-load .ws-load-retry[hidden] { display: none; }
.ws-load .ws-load-foot { align-items: center; gap: 12px; }
.ws-load .ws-load-panel { box-sizing: border-box; width: 560px; padding: 22px 26px 20px; }
.ws-load .ws-load-title { font-family: var(--ws-display); font-weight: 700; font-size: 20px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
.ws-load .ws-load-title b { color: var(--ws-cyan); }
.ws-load .ws-load-meta { margin: 14px 0 18px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; row-gap: 7px; }
.ws-load .ws-load-meta div { display: flex; justify-content: space-between; font-size: 11px; border-bottom: 1px solid rgba(143, 227, 255, 0.08); padding-bottom: 5px; }
.ws-load .ws-load-meta span:first-child { color: var(--ws-text-dim); letter-spacing: 0.16em; font-size: 9.5px; text-transform: uppercase; }
.ws-load .ws-load-bar { height: 4px; background: rgba(143, 227, 255, 0.12); position: relative; overflow: hidden; }
.ws-load .ws-load-fill { height: 100%; width: 0; background: linear-gradient(90deg, rgba(143, 227, 255, 0.6), var(--ws-cyan)); box-shadow: 0 0 12px rgba(143, 227, 255, 0.6); transition: width 0.1s linear; }
.ws-load .ws-load-log { margin-top: 12px; font-size: 9.5px; letter-spacing: 0.08em; color: rgba(196, 220, 232, 0.4); min-height: 70px; line-height: 1.6; }
.ws-load .ws-load-foot { display: flex; justify-content: space-between; padding: 0 44px 26px; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(196, 220, 232, 0.4); }
.ws-load[data-stalled="true"] [data-el="foot"] { color: #ffcd73; }
/* QS2: a long fault (a file path) wraps; at its unbreakable min-content width it pushed RETRY off a 402 px screen */
.ws-load [data-el="foot"] { min-width: 0; overflow-wrap: anywhere; }

/* panel */
.ws-load .ws-load-meta-1 { grid-template-columns: 1fr; margin: 10px 0 8px; }
.ws-load .ws-load-title { display: flex; align-items: baseline; }
.ws-load .ws-load-title b { margin-left: 6px; }
.ws-load .ws-load-clock { margin-left: auto; font-family: var(--ws-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--ws-cyan); font-weight: 400; }
/* LS2 (J188, density 2): Start, Download and Load. Only the running phase shows its rows; a tap on a head opens the others. */
.ws-load .ws-load-phase { margin-top: 14px; }
.ws-load .ws-load-phase[hidden] { display: none; }
.ws-load .ws-load-phase > .ws-load-track-row { width: 100%; margin: 0 0 7px; padding: 0; border: 0; background: none; appearance: none; -webkit-appearance: none; color: inherit; font: inherit; font-size: 10.5px; text-align: left; cursor: pointer; touch-action: manipulation; }
.ws-load .ws-load-phase > .ws-load-track-row .ws-load-track-name::before { content: '▸'; display: inline-block; width: 1.4em; font-size: 0.8em; }
.ws-load .ws-load-phase[data-open] > .ws-load-track-row .ws-load-track-name::before { content: '▾'; }
.ws-load .ws-load-phase[data-state='on'] .ws-load-track-name { color: var(--ws-cyan); }
.ws-load .ws-load-phase[data-state='on'] .ws-load-track-fact { color: #fff; }
.ws-load .ws-load-phase:not([data-open]) .ws-load-log, .ws-load .ws-load-phase:not([data-open]) .ws-load-grid { display: none; }
.ws-load .ws-load-title .ws-load-kicker { flex: none; white-space: nowrap; }
.ws-load .ws-load-title b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-load .ws-load-clock { flex: none; padding-left: 10px; }
.ws-load .ws-load-track-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.ws-load .ws-load-grid { margin: 8px 0 0; }
.ws-load .ws-load-track-row[hidden] { display: none; }
.ws-load .ws-load-track-name { width: 96px; color: var(--ws-cyan-dim); flex: none; white-space: nowrap; }
.ws-load .ws-load-track-fact { flex: 1; color: var(--ws-text-dim); text-transform: none; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-load .ws-load-track-pct { color: #fff; font-family: var(--ws-display); font-size: 18px; letter-spacing: 0.04em; width: 44px; text-align: right; flex: none; }
.ws-load .ws-load-track-pct::after { content: '%'; font-size: 11px; margin-left: 2px; color: var(--ws-text-dim); }
.ws-load .ws-load-log { margin-top: 10px; min-height: 0; }
.ws-load .ws-load-log:empty { display: none; }
.ws-load .ws-load-log div { display: flex; gap: 10px; align-items: baseline; font-size: 10.5px; letter-spacing: 0.06em; line-height: 1.75; color: rgba(196, 220, 232, 0.7); }
.ws-load .ws-load-log div.on { color: var(--ws-cyan-dim); }
.ws-load .ws-load-log .ws-load-row-label { flex: none; }
.ws-load .ws-load-log .ws-load-row-detail { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(196, 220, 232, 0.6); }
.ws-load .ws-load-log div.on .ws-load-row-detail { color: #fff; }
.ws-load .ws-load-log .ws-load-row-ms { flex: none; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
@media (max-width: 600px) {
  .ws-load .ws-load-track-name { width: 88px; }
  .ws-load .ws-load-track-fact { font-size: 10px; }
  .ws-load .ws-load-log { min-height: 0; }
}

/* phone: the panel fills the width, the head and foot tighten, safe areas respected */
@media (max-width: 700px) {
  .ws-load .ws-load-head { padding: calc(44px + env(safe-area-inset-top, 0px)) 16px 0; } /* clears the build pill top-right */
  .ws-load .ws-wordmark { font-size: 34px; letter-spacing: 0.06em; }
  .ws-load .ws-load-tagline { font-size: 11px; }
  .ws-load .ws-load-body { padding: 12px 16px; align-items: flex-start; }
  .ws-load .ws-load-panel { width: 100%; padding: 16px 14px 14px; }
  .ws-load .ws-load-title { font-size: 16px; }
  .ws-load .ws-load-clock { font-size: 12px; }
  .ws-load .ws-load-meta { grid-template-columns: 1fr; margin: 10px 0 12px; }
  .ws-load .ws-load-meta div { font-size: 10.5px; }
  .ws-load .ws-load-foot { padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px)); font-size: 8.5px; letter-spacing: 0.14em; }
  .ws-load .ws-load-hold, .ws-load .ws-load-copy { width: 100%; }
}

/* G846: everyone sees the detailed progress; only the hold control is Developer-only. */