/* ---------- FONT: Gilroy (local files) ---------- */
@font-face { font-family: 'Gilroy'; src: url(assets/fonts/Gilroy-Thin.otf) format('opentype'); font-weight: 100; font-style: normal; font-display: block; }
@font-face { font-family: 'Gilroy'; src: url(assets/fonts/Gilroy-UltraLight.otf) format('opentype'); font-weight: 200; font-style: normal; font-display: block; }
@font-face { font-family: 'Gilroy'; src: url(assets/fonts/Gilroy-Light.otf) format('opentype'); font-weight: 300; font-style: normal; font-display: block; }
@font-face { font-family: 'Gilroy'; src: url(assets/fonts/Gilroy-Regular.otf) format('opentype'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Gilroy'; src: url(assets/fonts/Gilroy-Medium.otf) format('opentype'); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: 'Gilroy'; src: url(assets/fonts/Gilroy-SemiBold.otf) format('opentype'); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: 'Gilroy'; src: url(assets/fonts/Gilroy-Bold.otf) format('opentype'); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: 'Gilroy'; src: url(assets/fonts/Gilroy-ExtraBold.otf) format('opentype'); font-weight: 800; font-style: normal; font-display: block; }
@font-face { font-family: 'Gilroy'; src: url(assets/fonts/Gilroy-Black.otf) format('opentype'); font-weight: 900; font-style: normal; font-display: block; }

:root {
  --pad: 22px; /* screen margin on all sides (1920x1080 reference) */
  --teal: #2ee6c0;
  --teal-dim: #1f9c84;
  --text: #e9f2f0;
  --muted: #8a9592;
  --s: 1; /* stage scale, set by JS */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0d0d; }
body { font-family: 'Gilroy', system-ui, sans-serif; color: var(--text); user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---------- MAP ---------- */
#map { position: fixed; inset: 0; }
/* Mapbox logo and attribution hidden on request (see Mapbox terms for your plan) */
.mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right { display: none; }
#vignette {
  position: fixed; inset: 0; pointer-events: none;
  background: url(assets/MENU/t_ui_map_vignette.png) center / 100% 100% no-repeat;
}

/* ---------- STAGE (1920x1080 reference) ---------- */
#stage {
  position: fixed; left: 50%; top: 50%;
  width: var(--stage-w, 1920px); height: var(--stage-h, 1080px);
  transform: translate(-50%, -50%) scale(var(--s));
  pointer-events: none;
}
#stage > * { pointer-events: auto; }

/* ---------- HEADER ---------- */
#header { position: absolute; left: var(--pad); right: var(--pad); top: var(--pad); height: 84px; pointer-events: none; }
.header-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.header-blur {
  position: absolute; inset: 0;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask: url(assets/MENU/t_ui_header_mask.png) 0 0 / 100% 100% no-repeat;
          mask: url(assets/MENU/t_ui_header_mask.png) 0 0 / 100% 100% no-repeat;
  animation: blurIn .7s ease-out both;
}
.header-buttons { position: absolute; right: 0; top: 0; display: flex; gap: 13px; pointer-events: auto; }
/* Header buttons are hidden on the mission-configuration screen */
body.screen-config .header-buttons { display: none; }
.hbtn {
  width: 134px; height: 58px; position: relative;
  background: url(assets/MENU/t_ui_header_buttons.png) 0 0 / 100% 100% no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: filter .2s;
}
.hbtn img { width: 24px; height: 24px; }
.hbtn span { font-size: 11px; color: var(--teal); letter-spacing: .02em; }
.hbtn:hover { filter: brightness(1.4); }
.hbtn:active { transform: translateY(1px); }

/* ---------- COMPASS ---------- */
#compass { position: absolute; left: 50%; top: 150px; width: 520px; height: 70px; transform: translateX(-50%); pointer-events: none; }
#compass svg { display: block; }
#compass text { font-family: 'Gilroy', sans-serif; font-size: 14px; font-weight: 500; fill: #cfd6d4; text-anchor: middle; }
#compass text.n { fill: #fff; }
.compass-pointer {
  position: absolute; left: 50%; top: 52px; transform: translateX(-50%);
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 8px solid #fff;
}

/* ---------- STEP MENU ---------- */
#menu { position: absolute; left: var(--pad); top: 138px; width: 411px; display: flex; flex-direction: column; align-items: center; }

.step-tab {
  position: relative; width: 300px; height: 58px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 500; letter-spacing: .02em; color: #9aa3a1;
  transition: color .2s;
}
.step-tab .bg {
  position: absolute; inset: 0;
  background: url(assets/MENU/t_ui_menu_title_bg.png) center / 100% 100% no-repeat; opacity: .9;
}
/* Tabs keep a blur behind them, like the open panel (same radius, ramped in the same way) */
.step-tab .blur {
  position: absolute; inset: 2px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask: url(assets/MENU/t_ui_menu_mask_small.png) center / 100% 100% no-repeat;
          mask: url(assets/MENU/t_ui_menu_mask_small.png) center / 100% 100% no-repeat;
  animation: blurIn .7s ease-out both;
}
.step-tab .idx { position: absolute; left: 12px; top: 4px; font-size: 11px; color: #5d6664; font-weight: 400; }
.step-tab span { position: relative; }
.step-tab:hover { color: #fff; }
.step-tab-slot { height: 58px; }

/* Carousel transitions: the clicked tab scales into the panel area (goStep → scaleFromRect in app.js),
   with no fade. The new neighbour tabs scale in from the panel's edge, and the
   panel being left shrinks into its own tab (shrinkInto). */
#menu:is([data-dir="next"],[data-dir="prev"]) .step-panel { animation: none; }
#menu:is([data-dir="next"],[data-dir="prev"]) .step-panel > :not(.blur) { animation: none; opacity: var(--o, 1); }
#menu:is([data-dir="next"],[data-dir="prev"]) .step-tab { animation: tabIn .5s cubic-bezier(.2,.7,.2,1); }
#menu:is([data-dir="next"],[data-dir="prev"]) .step-panel:not(.ghost) + .step-tab { transform-origin: 50% 0; }   /* tab below: grows downwards */
#menu:is([data-dir="next"],[data-dir="prev"]) .step-tab:has(+ .step-panel:not(.ghost)) { transform-origin: 50% 100%; }   /* tab above: grows upwards */
@keyframes tabIn { from { transform: scale(.6, 0); } to { transform: none; } }
.step-tab.done { color: #b5c9c4; }

.step-panel {
  position: relative; width: 411px; height: 391px;
  animation: panelIn .45s cubic-bezier(.2,.7,.2,1);
}
@keyframes panelIn { from { transform: translateY(-8px) scaleY(.92); } to { transform: none; } }
/* Never fade the panel itself: browsers disable backdrop-filter under a fading parent, which makes the
   blur pop in at the end. Fade the contents instead, and ramp the blur radius on its own. */
.step-panel > :not(.blur) { --o: 1; animation: fadeIn .45s ease-out both; }
.step-panel > .title { --o: .5; }                 /* open step's title at 50% opacity */
.step-panel > .blur { animation: blurIn .7s ease-out both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: var(--o, 1); } }
@keyframes blurIn {
  from { backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to   { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
.step-panel .blur {
  position: absolute; inset: 2px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask: url(assets/MENU/t_ui_menu_mask_big.png) center / 100% 100% no-repeat;
          mask: url(assets/MENU/t_ui_menu_mask_big.png) center / 100% 100% no-repeat;
}
.step-panel .frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.step-panel .title {
  position: absolute; left: 9px; top: 8px; width: 393px; height: 69px;
  background: url(assets/MENU/t_ui_menu_title_bg.png) center / 100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 600; letter-spacing: .01em; color: #fff;
}
.step-panel .title .idx { position: absolute; left: 7px; top: 7px; font-size: 14px; font-weight: 400; color: var(--teal-dim); letter-spacing: .05em; }

/* Frame inner edge: x 2–408, bottom 388; title ends at 76. Buttons sit ~6px from every edge:
   the rows stretch to fill the height so the bottom gap matches the top and sides. */
.options { position: absolute; left: 8px; top: 82px; height: 300px; display: grid; grid-template-columns: 194.5px 194.5px; grid-template-rows: repeat(2, 1fr); gap: 5px 5px; }
/* 5+ choices (e.g. platforms) → 3 shorter rows, like the Unity carousel */
.options.rows-3 { grid-template-rows: repeat(3, 1fr); }
.opt {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: url(assets/MENU/t_ui_menu_button_off.png) 0 0 / 100% 100% no-repeat;
  text-align: left;
}
.opt .vis { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.opt .vis.sel { opacity: 0; }
.opt .lbl { position: absolute; left: 10px; top: 8px; right: 10px; font-size: var(--opt-label-size, 12px); line-height: 1.1; color: #c4cbc9; z-index: 2; }
.opt .vis.dim { filter: grayscale(1) brightness(.75); }
.opt .lock { position: absolute; right: 12px; bottom: 12px; width: 16px; height: 16px; opacity: .7; z-index: 2; }
.opt::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url(assets/MENU/t_ui_menu_button_on.png) 0 0 / 100% 100% no-repeat;
  opacity: 0; transition: opacity .3s;
}
.opt:hover .vis.unsel { opacity: .75; }
.opt.selected::after { opacity: 1; }
.opt.selected .vis.sel { opacity: 1; }
.opt.selected .vis.unsel { opacity: 0; }
.opt.selected .lbl { color: #fff; }
.opt.locked { cursor: default; }
.opt.locked .vis.unsel { opacity: .35; filter: grayscale(1); }

/* ---------- DEPLOY BUTTON ---------- */
#deploy {
  position: absolute; left: var(--pad); bottom: var(--pad); width: 406px; height: 86px;
  background: url(assets/MENU/t_ui_menu_play_off.png) 0 0 / 100% 100% no-repeat;
  font-size: 26px; font-weight: 600; letter-spacing: .02em; color: #c8cfcd;
  transition: filter .2s;
}
#deploy.is-ready { background-image: url(assets/MENU/t_ui_menu_play_on.png); color: #fff; }
#deploy.is-ready:hover { filter: brightness(1.15); }
#deploy:disabled { cursor: default; }

/* ---------- C2 CONFIG PANEL ---------- */
#c2panel { position: absolute; right: var(--pad); bottom: var(--pad); width: 441px; height: 356px; }
#c2panel .c2-blur {
  position: absolute; inset: 0;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask: url(assets/MENU/t_ui_c2_config_mask.png) center / 100% 100% no-repeat;
          mask: url(assets/MENU/t_ui_c2_config_mask.png) center / 100% 100% no-repeat;
}
#c2panel img { position: absolute; inset: 0; width: 100%; height: 100%; }
#c2panel .c2-content { transition: opacity .25s; }
#c2panel .c2-content.swap { opacity: 0; }

/* ---------- MAP MARKERS (live outside the stage: size by --s) ---------- */
.objective {
  width: calc(420px * var(--s)); height: calc(186px * var(--s));
  pointer-events: none;
}
.objective .inner { position: absolute; inset: 0; animation: objIn .6s ease-out; }
/* transform only: an opacity fade here would switch the backdrop blur off until the end */
@keyframes objIn { from { transform: translateY(-10px); } }
.objective img, .objective .txt { animation: fadeIn .6s ease-out both; }
.objective img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The rectangle inside t_ui_map_objective.png: x 75–345, y 2–78 of 420×186 */
.objective .box {
  position: absolute; left: 17.857%; right: 17.857%; top: 1.075%; height: 40.86%;
  display: flex; align-items: center; justify-content: center;
}
.objective .blur {
  position: absolute; inset: 0;
  /* chamfered corners like the frame */
  clip-path: polygon(3.5% 0, 100% 0, 100% 84%, 96.5% 100%, 0 100%, 0 13%);
  animation: blurIn .7s ease-out both;
}
.objective .txt {
  /* the block is centered in the box; inside it, the subtitle aligns to the title's left edge */
  position: relative; text-align: left;
  font-family: 'Gilroy', sans-serif; white-space: nowrap; line-height: 1.15;
}
.objective .kind { display: block; font-size: calc(13px * var(--s)); color: #8e9896; letter-spacing: .03em; }
.objective .name { display: block; font-size: calc(19px * var(--s)); color: #fff; font-weight: 400; letter-spacing: .01em; }

/* Hidden by sheet settings (c2_config_pending_enabled / scenario_hide_deploy_when_pending) */
#deploy { transition: opacity .35s, visibility .35s; }
#deploy.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
/* C2 panel: same rule as the menu — fade the images, ramp the blur radius */
#c2panel { transition: visibility .7s; }
#c2panel > img { transition: opacity .45s; }
#c2panel .c2-blur { transition: backdrop-filter .7s ease-out, -webkit-backdrop-filter .7s ease-out; }
#c2panel.hidden { visibility: hidden; pointer-events: none; }
#c2panel.hidden > img { opacity: 0; }
#c2panel.hidden .c2-blur { backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }


/* Tooltip: comes in just after the target layers start, leaves with them */
.objective .inner { animation-delay: .25s; animation-fill-mode: both; }
.objective img, .objective .txt { animation-delay: .25s; }
.objective .blur { animation-delay: .25s; }
.objective.leaving img, .objective.leaving .txt { animation: fadeOut .3s ease-out forwards; }
.objective.leaving .blur { animation: blurOut .3s ease-out forwards; }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes blurOut {
  from { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  to   { backdrop-filter: blur(0px);  -webkit-backdrop-filter: blur(0px); }
}

/* ---------- MINE LABELS (screen-facing marker on each mine) ---------- */
.mine-label { width: calc(233px * var(--s)); height: calc(233px * var(--s)); pointer-events: none; }
.mine-label img { width: 100%; height: 100%; display: block; animation: mineIn .5s ease-out var(--delay, 0s) both; transform-origin: 50% 69.5%; }
@keyframes mineIn { from { opacity: 0; transform: translateY(-12%) scale(.8); } to { opacity: 1; transform: none; } }
.mine-label.leaving img { animation: fadeOut .3s ease-out forwards; }

/* Platform callout: drawn left to right (corner square → diagonal → line), then the name types in */
.platform-label { width: calc(220px * var(--s)); height: calc(62px * var(--s)); pointer-events: none; }
.platform-label .inner { position: absolute; inset: 0; }
.platform-label img { position: absolute; inset: 0; width: 100%; height: 100%; animation: drawIn .45s cubic-bezier(.4,.1,.3,1) var(--delay, 0s) both; }
.platform-label span {
  position: absolute; left: 31%; bottom: 22%; white-space: nowrap; line-height: 1;
  font-family: 'Gilroy', sans-serif; font-size: calc(20px * var(--s)); font-weight: 400; color: #4fb3a1; letter-spacing: .01em;
  animation: drawIn .4s steps(12, end) calc(var(--delay, 0s) + .3s) both;
}
@keyframes drawIn { from { clip-path: inset(-30% 100% -30% 0); } to { clip-path: inset(-30% 0 -30% 0); } }
.platform-label.leaving .inner { animation: fadeOut .3s ease-out forwards; }

/* C2 station icon (container on a pole), pops in over its circle like the mine markers */
.c2-label { width: calc(154px * var(--s)); height: calc(154px * var(--s)); pointer-events: none; }
.c2-label .inner { position: absolute; inset: 0; }
.c2-label img { width: 100%; height: 100%; display: block; animation: mineIn .5s ease-out var(--delay, 0s) both; transform-origin: 49% 71%; }
.c2-label.leaving .inner { animation: fadeOut .3s ease-out forwards; }

/* ---------- SPEED EFFECT: map blur while the camera moves fast (driven by app.js) ---------- */
#motion-blur {
  position: fixed; inset: 0; pointer-events: none; display: none;
  backdrop-filter: blur(var(--mb, 0px)); -webkit-backdrop-filter: blur(var(--mb, 0px));
  /* sharp in the middle, strongest at the edges, like a speed tunnel */
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 15%, rgba(0,0,0,.6) 50%, #000 85%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 15%, rgba(0,0,0,.6) 50%, #000 85%);
}
#motion-blur.on { display: block; }

/* ---------- OFFLINE PREPARATION PANEL ---------- */
#offline-panel {
  position: fixed; right: 24px; top: 24px; z-index: 50; max-width: 420px;
  padding: 16px 20px; background: rgba(11,13,13,.88); border: 1px solid #1f9c84;
  font: 14px/1.45 'Gilroy', sans-serif; color: #e9f2f0;
}
#offline-panel b { color: var(--teal); letter-spacing: .03em; }
#offline-panel a { color: var(--teal); }
#offline-panel .bar { height: 3px; margin-top: 10px; background: #233; }
#offline-panel .bar i { display: block; height: 100%; background: var(--teal); transition: width .3s; }
#offline-panel.badge { top: auto; bottom: 24px; padding: 8px 12px; font-size: 12px; }

/* Movement blur overlay (drawn by app.js, above the map canvas, below the map markers) */
#motion-trail { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; }

/* ---------- SCENARIO VIDEO PLAYER (player.js) ---------- */
#player { position: fixed; inset: 0; z-index: 40; background: #000; animation: playerIn .45s ease-out; }
#player[hidden] { display: none; }
#player.closing { animation: playerOut .4s ease-in forwards; pointer-events: none; }
@keyframes playerIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes playerOut { to { opacity: 0; } }
/* Once the player has faded in, the map and its UI are hidden (nothing to draw behind the video) */
body.screen-player :is(#map, #motion-blur, #vignette, #stage) { visibility: hidden; transition: visibility 0s .45s; }
#player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
#player.no-freeze video { opacity: 0; transition: opacity .6s; }
/* Controls live on a 1920×1080 stage scaled like #stage, so they keep the 22 px margins */
.player-stage {
  position: absolute; left: 50%; top: 50%;
  width: var(--stage-w, 1920px); height: var(--stage-h, 1080px);
  transform: translate(-50%, -50%) scale(var(--s));
  pointer-events: none;
}
.player-top, .player-bar { position: absolute; pointer-events: auto; transition: opacity .5s; }
#player.idle .player-top, #player.idle .player-bar { opacity: 0; pointer-events: none; }
#player.idle { cursor: none; }
.player-top { left: var(--pad); top: var(--pad); display: flex; gap: 13px; }
.player-bar { left: var(--pad); right: var(--pad); bottom: var(--pad); height: 68px; display: flex; align-items: center; gap: 54px; }
.pbtn { width: 68px; height: 68px; flex: none; position: relative; transition: filter .2s; }
.pbtn img { width: 100%; height: 100%; display: block; }
.pbtn.vol { background: url(assets/VIDEO_CONTROL/icon_background.png) 0 0 / 100% 100% no-repeat; }
.pbtn.vol img { width: 50%; height: 50%; margin: 25%; }
.pbtn:hover { filter: brightness(1.15); }
.pbtn:active { transform: translateY(1px); }
/* Progress over the whole scenario: teal played part, light rest, teal knob */
.progress { flex: 1; height: 44px; position: relative; cursor: pointer; touch-action: none; }
.progress .track, .progress .fill { position: absolute; left: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; }
.progress .track { right: 0; background: rgba(225, 232, 230, .85); }
.progress .fill { width: 0; background: var(--teal); }
.progress .knob, .vol-pop .knob {
  position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 10px rgba(46, 230, 192, .5);
}
.progress .knob { left: 0; top: 50%; transform: translate(-50%, -50%); }
#player.dragging .progress .knob { transform: translate(-50%, -50%) scale(1.15); }
/* Volume: vertical slider above the speaker button */
.vol-pop {
  position: absolute; right: 0; bottom: 92px; width: 68px; height: 230px;
  display: flex; justify-content: center; padding: 14px 0;
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s;
}
#player.vol-open .vol-pop { opacity: 1; transform: none; pointer-events: auto; }
.vol-pop .vtrack { position: relative; width: 44px; height: 100%; cursor: pointer; touch-action: none; }
.vol-pop .track, .vol-pop .fill { position: absolute; left: 50%; width: 6px; margin-left: -3px; bottom: 0; border-radius: 3px; }
.vol-pop .track { top: 0; background: rgba(225, 232, 230, .85); }
.vol-pop .fill { background: var(--teal); }
.vol-pop .knob { left: 50%; transform: translate(-50%, 50%); }

/* ---------- CONTENT SYNC (content.js): progress screen at launch ---------- */
#content-sync {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(5, 8, 8, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity .5s;
}
#content-sync.done { opacity: 0; pointer-events: none; }
#content-sync .box {
  width: min(520px, 86vw); padding: 28px 32px; border: 1px solid rgba(46, 230, 192, .35);
  background: rgba(14, 20, 20, .9); font-family: 'Gilroy', sans-serif; color: var(--text);
}
#content-sync .title { font-size: 20px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
#content-sync .line { font-size: 14px; color: var(--muted); min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#content-sync .bar { height: 6px; margin: 16px 0 10px; background: rgba(225, 232, 230, .15); border-radius: 3px; overflow: hidden; }
#content-sync .bar i { display: block; height: 100%; width: 0; background: var(--teal); transition: width .2s; }
#content-sync .meta { font-size: 13px; color: var(--teal); }
#content-sync .skip { margin-top: 18px; font-size: 13px; color: var(--teal); text-decoration: underline; }

/* ---------- SPLASH (index.html #splash): from the first paint until the map is ready ---------- */
#splash {
  position: fixed; inset: 0; z-index: 55; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, #13211f 0%, #0b0d0d 62%);
  transition: opacity .7s ease;
}
#splash.done { opacity: 0; pointer-events: none; }
#splash .corner { position: absolute; width: 5vmin; height: 5vmin; border: 0 solid var(--teal); opacity: .8; }
#splash .tl { left: 3vmin; top: 3vmin; border-left-width: 2px; border-top-width: 2px; }
#splash .tr { right: 3vmin; top: 3vmin; border-right-width: 2px; border-top-width: 2px; }
#splash .br { right: 3vmin; bottom: 3vmin; border-right-width: 2px; border-bottom-width: 2px; }
#splash .bl { left: 3vmin; bottom: 3vmin; border-left-width: 2px; border-bottom-width: 2px; }
.splash-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.splash-mark { width: 22vmin; height: auto; overflow: visible; margin-bottom: 4vmin; }
.splash-mark .ping { transform-origin: 512px 430px; animation: splash-ping 2.4s ease-out infinite; }
@keyframes splash-ping { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(3.1); opacity: 0; } 100% { transform: scale(3.1); opacity: 0; } }
.splash-kicker { font-size: 1.7vmin; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--teal); }
.splash-title { margin-top: 1.2vmin; font-size: 6vmin; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.splash-bar { position: relative; width: 26vmin; height: 2px; margin-top: 4vmin; overflow: hidden; background: rgba(225, 232, 230, .15); }
.splash-bar i { position: absolute; top: 0; bottom: 0; width: 35%; background: var(--teal); animation: splash-bar 1.4s ease-in-out infinite; }
@keyframes splash-bar { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .splash-mark .ping, .splash-bar i { animation: none; } }

/* ---------- SCREENSAVER (screensaver.js): film after 5 min without activity ---------- */
#screensaver { position: fixed; inset: 0; z-index: 90; background: #000; opacity: 0; transition: opacity .6s ease; cursor: none; }
#screensaver[hidden] { display: none; }
#screensaver.on { opacity: 1; }
#screensaver video { width: 100%; height: 100%; object-fit: cover; display: block; }