/*
 * Star Sentinel overlays: title, HUD, reticles, results. Deep-space cinematic:
 * thin luminous lines, glass panels, rose/amber threats against cool blues,
 * tabular numerals, everything sized for a TV at couch distance.
 *
 * No backdrop-filter anywhere: over a live WebGL canvas it re-blurs every
 * frame, which weak TV GPUs cannot afford (the kit's rule too); the glass is
 * a near-opaque tint instead.
 */

:root { --ss-glass: color-mix(in oklab, #0a0d1a 82%, transparent); --ss-line: color-mix(in oklab, #9fb6ff 26%, transparent); --ss-hot: #ff5c8a; --ss-cool: #5cf7d2; }

/* ---------- title ---------- */
.ss-title { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) min(23rem, 30vw); grid-template-rows: auto 1fr auto; padding: 7vh 5vw 5vh; gap: 2vh 4vw; }
.ss-title__brand { grid-column: 1; }
/* The kit's join card (QR, code, the players' chips) sits in the title's right column. */
.ss-on-title .gk-join:not(.gk-join--compact) {
  --card-pad: var(--s-5); inset-block-start: 6vh; inset-inline-start: auto; inset-inline-end: 5vw; translate: none;
  inline-size: min(23rem, 30vw); gap: var(--s-3);
}
.ss-on-title .gk-join:not(.gk-join--compact) .pr-qr { --qr-size: min(26vh, 13rem); }
@media (max-height: 640px) {
  .ss-on-title .gk-join:not(.gk-join--compact) { inset-block-start: 4vh; gap: var(--s-2); --card-pad: var(--s-4); }
  .ss-on-title .gk-join:not(.gk-join--compact) .pr-qr { --qr-size: min(22vh, 13rem); }
}
.ss-title__kicker { margin: 0; color: var(--ss-cool); letter-spacing: .32em; text-transform: uppercase; font-size: .85em; font-weight: var(--fw-bold); opacity: .85; }
.ss-title__name {
  margin: .1em 0 .12em; font-size: clamp(54px, 6.4vw, 140px); line-height: .95; font-weight: var(--fw-black); letter-spacing: -0.035em;
  background: linear-gradient(100deg, #ffffff 0%, #d8dcff 40%, #ff9ab8 72%, #ffc24b 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 40px rgb(108 92 255 / .45));
}
.ss-title__tagline { margin: 0; max-width: 34em; font-size: 1.25em; color: var(--ink-200); line-height: var(--lh-snug); }
.ss-menu { display: grid; gap: .8em; width: min(30em, 100%); }
.ss-menu__item {
  pointer-events: auto; font: inherit; font-size: 1.35em; color: var(--text); text-align: start;
  display: flex; justify-content: space-between; align-items: center; gap: 1em;
  padding: .85em 1.3em; border-radius: var(--r-lg); cursor: pointer;
  background: var(--ss-glass); border: 1px solid var(--ss-line);
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2), box-shadow var(--dur-2), background var(--dur-2);
}
.ss-menu__item--primary { background: linear-gradient(120deg, color-mix(in oklab, var(--violet-500) 70%, transparent), color-mix(in oklab, #ff5c8a 45%, transparent)); border-color: transparent; font-weight: var(--fw-bold); }
.ss-menu__item.is-focused {
  transform: scale(1.06); border-color: var(--focus);
  box-shadow: 0 0 0 2px var(--focus), 0 18px 60px -20px color-mix(in oklab, var(--mint-500) 80%, transparent);
}
.ss-menu__item.is-blocked { opacity: .55; }
.ss-menu__value { color: var(--ss-cool); font-weight: var(--fw-bold); }
.ss-menu__value::before { content: '‹ '; opacity: .6; }
.ss-menu__value::after { content: ' ›'; opacity: .6; }
.ss-title__main { grid-column: 1; align-self: center; display: grid; gap: 1.2em; justify-items: start; }
.ss-title__note { margin: 0; max-width: 30em; padding: .55em 1em; border-radius: var(--r-md); background: var(--ss-glass); border: 1px solid var(--ss-line); color: var(--ink-200); }
.ss-title__hint { grid-column: 1; margin: 0; color: var(--text-muted); font-size: .95em; }
@keyframes ss-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- reticles ---------- */
.ss-reticles { position: absolute; inset: 0; }
.ss-reticle { position: absolute; inset-block-start: 0; left: 0; width: 0; height: 0; will-change: transform; }
.ss-reticle__svg { max-inline-size: none; position: absolute; width: 7.2em; height: 7.2em; left: -3.6em; top: -3.6em; overflow: visible; filter: drop-shadow(0 0 6px color-mix(in oklab, var(--c) 80%, transparent)); transition: transform var(--dur-1) var(--ease-out); }
.ss-reticle__halo { fill: none; stroke: var(--c); stroke-width: 2; opacity: 0; }
.ss-reticle__track { fill: none; stroke: rgb(255 255 255 / .12); stroke-width: 3.5; }
.ss-reticle__heat { fill: none; stroke: #ffc24b; stroke-width: 3.5; stroke-linecap: round; transform: rotate(-90deg); transition: stroke var(--dur-2); }
.ss-reticle__ring { fill: none; stroke: var(--c); stroke-width: 3; }
.ss-reticle__ticks { stroke: var(--c); stroke-width: 3; stroke-linecap: round; transition: transform var(--dur-2) var(--ease-spring); }
.ss-reticle__lock { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: 0; transform: scale(1.6) rotate(45deg); transition: opacity var(--dur-1), transform var(--dur-2) var(--ease-spring); }
.ss-reticle__dot { fill: #fff; }
.ss-reticle__tag { position: absolute; top: 3.6em; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .3em; white-space: nowrap; font-size: .78em; font-weight: var(--fw-bold); color: #fff; padding: .1em .6em; border-radius: var(--r-pill); background: color-mix(in oklab, var(--c) 55%, rgb(0 0 0 / .4)); }
.ss-reticle__glyph { width: 1em; height: 1em; color: #fff; }
.ss-reticle.is-locked .ss-reticle__lock { opacity: 1; transform: none; }
.ss-reticle.is-locked .ss-reticle__ticks { transform: scale(.82); }
.ss-reticle.is-firing .ss-reticle__svg { transform: scale(.94); }
.ss-reticle.is-hot .ss-reticle__heat { stroke: #ff6b3d; }
.ss-reticle.is-overheated .ss-reticle__heat { stroke: #ff3d4a; animation: ss-blink .3s steps(2) infinite; }
.ss-reticle.is-overheated .ss-reticle__ring { stroke: #ff3d4a; }
.ss-reticle.is-nova .ss-reticle__halo { opacity: 1; stroke: var(--ss-cool); animation: ss-halo 1.2s ease-in-out infinite; transform-origin: center; }
.ss-reticle { transition: opacity .6s var(--ease-out); }
.ss-reticle.is-away { opacity: .35; }
.ss-reticle.is-idle { opacity: 0; }
/* Capture screenshots (kit ?capture=1): menu reticles of the mock phones all rest at the centre; leave them out. */
html[data-capture] .ss-reticle.is-menu { visibility: hidden; }
.ss-reticle.is-menu .ss-reticle__heat, .ss-reticle.is-menu .ss-reticle__track { display: none; }
.ss-reticle.is-menu .ss-reticle__svg { width: 5.4em; height: 5.4em; left: -2.7em; top: -2.7em; }
.ss-reticle.is-menu .ss-reticle__tag { top: 2.8em; }
.ss-reticle.is-kick .ss-reticle__svg { animation: ss-kick .22s var(--ease-out); }
@keyframes ss-blink { 50% { opacity: .25; } }
@keyframes ss-halo { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.15); opacity: .5; } }
@keyframes ss-kick { 0% { transform: scale(1.25) rotate(8deg); } 100% { transform: none; } }

/* ---------- HUD ---------- */
/* During a run the bottom corners belong to the gunner cards and the top to the hull and boss bars:
   the kit's sound chip waits at the side, mid-height. */
.ss-in-run .gk-sound { inset-block-end: auto; inset-block-start: 44vh; }
.ss-hud { position: absolute; inset: 0; }
.ss-top { position: absolute; inset-block-start: 2.6vh; inset-inline: 0; display: grid; justify-items: center; gap: .9vh; }
.ss-hull { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8em; width: min(34em, 42vw); padding: .45em .9em; border-radius: var(--r-pill); background: var(--ss-glass); border: 1px solid var(--ss-line); }
.ss-hull__label { font-size: .8em; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-bold); }
.ss-hull__bar { position: relative; height: .75em; border-radius: var(--r-pill); background: rgb(255 255 255 / .07); overflow: hidden; }
.ss-hull__fill, .ss-hull__ghost { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v, 1)); border-radius: inherit; }
[dir="rtl"] .ss-hull__fill, [dir="rtl"] .ss-hull__ghost { transform-origin: right; }
.ss-hull__ghost { background: #ffe0e6; opacity: .65; }
.ss-hull__fill { background: linear-gradient(90deg, #3da9ff, #5cf7d2); box-shadow: 0 0 14px rgb(92 247 210 / .55); transition: transform .25s var(--ease-out); }
.ss-hull__cells { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 2px), rgb(5 6 12 / .85) calc(5% - 2px) 5%); }
.ss-hull__value { font-variant-numeric: tabular-nums; font-weight: var(--fw-black); font-size: 1.1em; min-width: 2.2em; text-align: end; }
.ss-hull.is-critical .ss-hull__fill { background: linear-gradient(90deg, #ff3d4a, #ff8a3d); box-shadow: 0 0 18px rgb(255 61 74 / .7); animation: ss-blink .9s steps(2) infinite; }
.ss-hull.is-critical { border-color: rgb(255 77 94 / .6); }
.ss-progress { display: flex; align-items: center; gap: .8em; width: min(40em, 50vw); font-size: .82em; color: var(--text-muted); }
.ss-progress__label { white-space: nowrap; letter-spacing: .12em; text-transform: uppercase; }
.ss-progress__bar { position: relative; flex: 1; height: 3px; background: rgb(255 255 255 / .1); border-radius: 3px; }
.ss-progress__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--violet-400), #ff9ab8); transform-origin: left; transform: scaleX(var(--v, 0)); border-radius: inherit; }
[dir="rtl"] .ss-progress__fill { transform-origin: right; }
.ss-progress__boss { position: absolute; inset-inline-end: -.4em; top: 50%; width: .8em; height: .8em; margin-top: -.4em; transform: rotate(45deg); background: var(--ss-hot); box-shadow: 0 0 10px var(--ss-hot); }
.ss-boss { width: min(52em, 64vw); }
.ss-boss__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3em; }
.ss-boss__name { font-weight: var(--fw-black); letter-spacing: .4em; color: #ffd6e2; text-shadow: 0 0 18px rgb(255 92 138 / .8); }
.ss-boss__phase { font-size: .85em; color: #ff9ab8; }
.ss-boss__bar { height: .7em; border-radius: var(--r-pill); background: rgb(255 92 138 / .14); border: 1px solid rgb(255 92 138 / .45); overflow: hidden; }
.ss-boss__fill { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--v, 1)); background: linear-gradient(90deg, #e05cff, #ff5c8a 60%, #ffc24b); box-shadow: 0 0 20px rgb(255 92 138 / .8); transition: transform .2s var(--ease-out); }
[dir="rtl"] .ss-boss__fill { transform-origin: right; }

.ss-cards { position: absolute; inset-inline: 0; inset-block-end: 2.2vh; height: 0; direction: ltr; }
.ss-card {
  position: absolute; bottom: 0; left: calc(12.5% + var(--seat) * 25%); transform: translateX(-50%); width: min(17em, 22vw);
  padding: .55em .8em .65em; border-radius: var(--r-md); background: var(--ss-glass);
  border: 1px solid color-mix(in oklab, var(--c) 45%, transparent); box-shadow: inset 0 2px 0 color-mix(in oklab, var(--c) 70%, transparent);
  transition: border-color var(--dur-2), box-shadow var(--dur-2), opacity var(--dur-2);
}
[dir="rtl"] .ss-card { direction: rtl; }
.ss-card__id { display: flex; align-items: center; gap: .45em; font-size: .85em; }
.ss-card__glyph { width: 1.05em; height: 1.05em; color: var(--c); flex: none; }
.ss-card__name { font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-card__away { margin-inline-start: auto; font-size: .8em; color: var(--amber-500); }
.ss-card__row { display: flex; align-items: baseline; justify-content: space-between; margin: .1em 0 .3em; }
.ss-card__score { font-size: 1.6em; font-weight: var(--fw-black); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ss-card__combo { direction: ltr; unicode-bidi: isolate; font-weight: var(--fw-black); color: #ffc24b; text-shadow: 0 0 12px rgb(255 194 75 / .7); }
.ss-card__combo.is-pop { animation: ss-combo .35s var(--ease-spring); }
.ss-card__meters { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.ss-card__meter { position: relative; height: .42em; border-radius: var(--r-pill); background: rgb(255 255 255 / .08); overflow: hidden; }
.ss-card__heat, .ss-card__nova { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v, 0)); border-radius: inherit; }
.ss-card__heat { background: linear-gradient(90deg, #ffc24b, #ff5a1f); }
.ss-card__nova { background: linear-gradient(90deg, #3da9ff, var(--ss-cool)); }
.ss-card__novalabel { position: absolute; inset-inline-end: .2em; top: -1.35em; font-size: .62em; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.ss-card.is-nova { box-shadow: inset 0 2px 0 var(--c), 0 0 0 1px var(--ss-cool), 0 0 30px -6px var(--ss-cool); }
.ss-card.is-nova .ss-card__novalabel { color: var(--ss-cool); }
.ss-card.is-overheated .ss-card__heat { animation: ss-blink .3s steps(2) infinite; }
.ss-card.is-away { opacity: .5; }
.ss-card.is-pulse { animation: ss-pulse .4s var(--ease-out); }
@keyframes ss-combo { from { transform: scale(1.8); } to { transform: none; } }
@keyframes ss-pulse { from { box-shadow: inset 0 2px 0 var(--c), 0 0 40px 0 color-mix(in oklab, var(--c) 70%, transparent); } }
.ss-waiting { position: absolute; inset-block-end: 13vh; inset-inline: 0; margin-inline: auto; width: fit-content; padding: .3em 1em; border-radius: var(--r-pill); background: var(--ss-glass); color: var(--text-muted); font-size: .85em; }

.ss-banner { position: absolute; inset-block-start: 21vh; inset-inline: 0; text-align: center; opacity: 0; transform: scale(.94); transition: opacity .35s var(--ease-out), transform .5s var(--ease-spring); }
.ss-banner.is-in { opacity: 1; transform: none; }
.ss-banner__title { margin: 0; font-size: clamp(34px, 3.6vw, 76px); font-weight: var(--fw-black); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 0 30px rgb(142 128 255 / .8), 0 2px 0 rgb(0 0 0 / .4); }
.ss-banner__sub { margin: .25em 0 0; font-size: 1.15em; color: var(--ink-200); letter-spacing: .04em; }
.ss-banner::before, .ss-banner::after { content: ''; display: block; height: 1px; width: min(40em, 60vw); margin: .6em auto; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .5), transparent); }
.ss-banner[data-tone="warn"] .ss-banner__title { color: #ffd2d8; text-shadow: 0 0 30px rgb(255 61 74 / .9); }
.ss-banner[data-tone="good"] .ss-banner__title { color: #d8fff4; text-shadow: 0 0 30px rgb(46 242 194 / .9); }
.ss-banner[data-tone="boss"] .ss-banner__title { color: #ffd6e2; letter-spacing: .3em; text-shadow: 0 0 40px rgb(255 92 138 / 1); }

.ss-popups { position: absolute; inset: 0; }
.ss-popup { position: absolute; left: 0; top: 0; opacity: 0; display: grid; justify-items: center; pointer-events: none; }
.ss-popup b { font-size: 1.2em; font-weight: var(--fw-black); color: #fff; text-shadow: 0 0 10px var(--c), 0 0 2px #000; font-variant-numeric: tabular-nums; translate: -50% -50%; }
.ss-popup small { direction: ltr; unicode-bidi: isolate; font-weight: var(--fw-black); color: #ffc24b; translate: -50% -50%; }
.ss-popup.is-on { animation: ss-float 1s var(--ease-out) forwards; }
@keyframes ss-float { 0% { opacity: 0; margin-top: 10px; scale: .7; } 15% { opacity: 1; scale: 1.15; } 30% { scale: 1; } 100% { opacity: 0; margin-top: -60px; } }

.ss-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgb(2 3 10 / .55) 100%); }
.ss-vignette.is-critical { animation: ss-crit 1.6s ease-in-out infinite; }
@keyframes ss-crit { 50% { background: radial-gradient(ellipse at center, transparent 45%, rgb(160 10 30 / .45) 100%); } }
.ss-damage { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 35%, rgb(255 40 60 / .55) 100%); }
.ss-damage[data-side="left"] { background: radial-gradient(ellipse at 0% 50%, rgb(255 40 60 / .7), transparent 55%); }
.ss-damage[data-side="right"] { background: radial-gradient(ellipse at 100% 50%, rgb(255 40 60 / .7), transparent 55%); }
.ss-damage.is-on { animation: ss-dmg .5s var(--ease-out); }
@keyframes ss-dmg { 0% { opacity: 1; } 100% { opacity: 0; } }
.ss-flash { position: absolute; inset: 0; opacity: 0; }
.ss-flash[data-kind="nova"] { background: radial-gradient(circle at 50% 55%, rgb(220 255 248 / .95), rgb(46 242 194 / .4) 40%, transparent 75%); }
.ss-flash[data-kind="beam"] { background: radial-gradient(circle at 50% 50%, rgb(255 230 240 / .9), rgb(255 92 138 / .5) 45%, rgb(80 0 30 / .3)); }
.ss-flash[data-kind="white"] { background: #fff; }
.ss-flash.is-on { animation: ss-flash .7s var(--ease-out); }
@keyframes ss-flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- results ---------- */
.ss-results { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(90deg, rgb(3 4 10 / .78), rgb(3 4 10 / .35)); }
.ss-results__card { width: min(1200px, 90vw); padding: 2.2em 2.6em; border-radius: var(--r-xl); background: var(--ss-glass); border: 1px solid var(--ss-line); box-shadow: 0 40px 120px -30px rgb(0 0 0 / .9); }
.ss-results__headline { margin: 0; font-size: clamp(40px, 4.4vw, 92px); font-weight: var(--fw-black); letter-spacing: -0.02em; line-height: 1; }
.ss-results[data-outcome="victory"] .ss-results__headline { background: linear-gradient(100deg, #fff, #5cf7d2 60%, #3da9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ss-results[data-outcome="defeat"] .ss-results__headline { color: #ffb3c0; text-shadow: 0 0 40px rgb(255 61 74 / .6); }
.ss-results__sub { margin: .3em 0 1em; color: var(--ink-200); font-size: 1.15em; }
.ss-results__team { display: flex; flex-wrap: wrap; gap: .6em 2.4em; margin: 0 0 1.4em; }
.ss-results__stat dt { font-size: .75em; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
.ss-results__stat dd { margin: .1em 0 0; font-size: 1.5em; font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.ss-results__rows { list-style: none; margin: 0 0 1.6em; padding: 0; display: grid; gap: .55em; }
.ss-row {
  display: grid; grid-template-columns: 2.2em 1.6em minmax(0, 1fr) 7em 5.5em 5.5em 5.5em; align-items: center; gap: .9em;
  padding: .7em 1em; border-radius: var(--r-md); background: color-mix(in oklab, var(--c) 10%, rgb(255 255 255 / .02));
  border-inline-start: 4px solid var(--c); opacity: 0; animation: ss-row .6s var(--ease-out) forwards; animation-delay: calc(var(--i) * 140ms + 200ms);
}
@keyframes ss-row { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ss-row__rank { font-size: 1.6em; font-weight: var(--fw-black); color: var(--text-muted); text-align: center; }
.ss-row__glyph { width: 1.4em; height: 1.4em; color: var(--c); }
.ss-row__name { font-size: 1.3em; font-weight: var(--fw-bold); display: flex; align-items: center; gap: .6em; overflow: hidden; white-space: nowrap; }
.ss-row__mvp { font-size: .62em; font-weight: var(--fw-black); letter-spacing: .15em; padding: .25em .7em; border-radius: var(--r-pill); color: #1a1205; background: linear-gradient(120deg, #ffe08a, #ffc24b); box-shadow: 0 0 20px rgb(255 194 75 / .7); }
.ss-row__score { font-size: 1.6em; font-weight: var(--fw-black); font-variant-numeric: tabular-nums; text-align: end; }
.ss-row__stat { display: grid; justify-items: end; }
.ss-row__stat b { direction: ltr; unicode-bidi: isolate; font-size: 1.15em; font-variant-numeric: tabular-nums; }
.ss-row__stat small { font-size: .7em; color: var(--text-muted); letter-spacing: .08em; }
.ss-row.is-mvp { box-shadow: 0 0 0 1px rgb(255 194 75 / .55), 0 0 40px -10px rgb(255 194 75 / .6); }
.ss-results__actions { display: flex; gap: 1em; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .ss-banner, .ss-popup.is-on, .ss-row { animation: none !important; transition: none !important; opacity: 1; }
}

/* ---------- Hebrew ---------- */
/* Hebrew is never letter-spaced: tracking pulls a Hebrew word apart into single
   letters at couch distance. Every tracked overlay rule above is reset for a
   Hebrew / RTL page (Latin words such as PHONEREMO read fine untracked too). The
   inner :is() list includes the boss-tone title, which lifts the whole selector
   to its specificity, so this one rule wins over every rule it resets. */
:is(:lang(he), [dir="rtl"]) :is(.ss-title__kicker, .ss-title__name, .ss-hull__label, .ss-progress__label,
  .ss-boss__name, .ss-card__score, .ss-card__novalabel, .ss-banner__title, .ss-banner__sub, .ss-results__headline,
  .ss-results__stat dt, .ss-row__mvp, .ss-row__stat small, .ss-banner[data-tone="boss"] .ss-banner__title) { letter-spacing: normal; }