/* ==========================================================================
   LAST SIGNAL — alarm red. Decay (0..1) drives glitch intensity via --decay
   and .decay-1/2/3. Effects live on overlay layers; text stays readable.
   ========================================================================== */
.screen.ls {
  --decay: 0;
  --hp: #ff3355;
  --hp-low: #ffb020;
  overflow: hidden;
  gap: 8px;
  padding-top: calc(var(--safe-t) + 8px);
  padding-bottom: calc(var(--safe-b) + 10px);
}

/* decay layers */
.screen.ls::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  opacity: calc(var(--decay) * 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noise 0.5s steps(3) infinite;
}
/* nothing to show until someone falls: keep the noise layer out of compositing entirely */
.screen.ls:not(.decay-1)::before { display: none; }
.screen.ls::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(transparent, rgba(255, 51, 85, 0.09) 40%, rgba(255, 255, 255, 0.05) 50%, transparent);
}
.screen.ls.decay-1::after { opacity: 1; animation: sweep 7s linear infinite; }
.screen.ls.decay-2::after { animation-duration: 3.4s; }
.screen.ls.decay-3::after { animation-duration: 1.7s; }
@keyframes sweep { from { transform: translateY(-120%); } to { transform: translateY(820%); } }
.ls > * { position: relative; z-index: 1; }
.ls .ls-overlay { position: absolute; z-index: 20; }

.decay-1 .ls-flash { opacity: calc(var(--decay) * 0.6); }
.ls-flash {
  position: absolute !important;
  inset: 0;
  z-index: 15 !important;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(255, 20, 50, 0.45));
}
.ls.hurt .ls-flash { animation: hurt-flash 0.7s ease-out; }
@keyframes hurt-flash { 0% { opacity: 1; } 100% { opacity: calc(var(--decay) * 0.6); } }

/* chromatic aberration grows with decay (static, no animation) */
.decay-2 .ls-title, .decay-2 .ls-q-text, .decay-2 .card-name {
  text-shadow: calc(var(--decay) * 1.6px) 0 rgba(255, 43, 214, 0.55), calc(var(--decay) * -1.6px) 0 rgba(0, 240, 255, 0.45);
}
.decay-3 .ls-arena, .decay-3 .ls-me { animation: jitter 4.2s steps(1) infinite; }
@keyframes jitter {
  0%, 91%, 100% { transform: none; }
  92% { transform: translateX(-3px); }
  94% { transform: translateX(2px) skewX(-2deg); }
  96% { transform: translateX(-1px); }
}
.ls.quake { animation: quake 0.6s; }
@keyframes quake {
  15% { transform: translate(-5px, 2px); }
  30% { transform: translate(4px, -2px); }
  45% { transform: translate(-3px, 1px); }
  60% { transform: translate(2px, 0); }
}

/* ---- header ---- */
.ls-head-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ls-title { font-family: var(--font-display); font-weight: 900; font-size: 14px; letter-spacing: 0.14em; color: var(--accent); }
.ls-title b { color: var(--text); margin-left: 6px; }
.ls-sub { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.12em; }
.ls-alive { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.ls-alive b { font-family: var(--font-num); font-size: 22px; color: var(--accent); }
.ls-alive span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em; color: var(--text-dim); }
.ls-timer { flex: none; }

/* ---- shared hp bar + pips ---- */
.hp-bar { position: relative; height: 5px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.hp-bar-lg { height: 9px; }
.hp-fill {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #a3001c, var(--hp));
  transition: transform 0.8s var(--ease);
}
.hp-fill.is-low { background: linear-gradient(90deg, #a3001c, var(--hp-low)); }
.pips { display: flex; gap: 4px; }
.pips i {
  width: 12px;
  height: 14px;
  clip-path: polygon(50% 0, 100% 20%, 100% 60%, 50% 100%, 0 60%, 0 20%);
  background: rgba(255, 255, 255, 0.12);
  transition: background-color 0.3s, opacity 0.3s;
}
.pips i.on { background: var(--cyan); }
.pips-sm i { width: 8px; height: 10px; }
.pips.shatter i:not(.on):last-of-type, .pips.shatter i:not(.on) { animation: shatter 0.7s var(--ease) both; }
@keyframes shatter {
  0% { transform: scale(1.6); background: #fff; opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- my vitals ---- */
.ls-me {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(255, 51, 85, 0.1), rgba(10, 15, 38, 0.75) 60%);
  border: 1px solid rgba(255, 51, 85, 0.25);
  border-left: 3px solid var(--c, var(--accent));
}
.ls-me-av { flex: none; }
.ls-me-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ls-me-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ls-me-name { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-me-hp { font-family: var(--font-num); font-weight: 700; font-size: 24px; line-height: 1; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.ls-me-row-2 { justify-content: space-between; font-family: var(--font-mono); font-size: 11px; }
.ls-me-target { display: flex; align-items: baseline; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; }
.ls-me-target .label { font-size: 9px; }
.ls-me-threat { color: var(--accent); font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; animation: blink 1.2s steps(2) infinite; }
.ls-dead { color: var(--text-faint); letter-spacing: 0.14em; font-weight: 700; }

/* ---- arena ---- */
.ls-arena { flex: none; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 6px; }
.ls-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 64px;
  padding: 7px 7px 6px;
  text-align: left;
  background: rgba(10, 14, 32, 0.82);
  border: 1px solid var(--line);
  border-top: 2px solid var(--c);
  transition: opacity 0.4s, border-color 0.2s, transform 0.12s;
}
.ls-card:active:not(:disabled) { transform: scale(0.96); }
.ls-card:disabled { cursor: default; }
.card-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.card-top .avatar svg { filter: none; }
.card-name { min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-bot { display: flex; align-items: center; gap: 4px; min-height: 12px; }
.card-tag { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-dim); white-space: nowrap; overflow: hidden; }
.card-tag.is-locked { color: var(--cyan); }
.card-hp { font-family: var(--font-num); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.reticle { position: absolute; inset: -4px; pointer-events: none; opacity: 0; transition: opacity 0.2s, transform 0.25s var(--ease-back); transform: scale(1.08); }
.reticle::before, .reticle::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent);
}
.reticle::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.reticle::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.ls-card.is-target { border-color: rgba(255, 51, 85, 0.6); background: linear-gradient(180deg, rgba(255, 51, 85, 0.16), rgba(10, 14, 32, 0.85)); }
.ls-card.is-target .reticle { opacity: 1; transform: none; }
.ls-card.is-target .card-name::before { content: '⌖ '; color: var(--accent); }
.ls-card.is-out { opacity: 0.35; filter: grayscale(1); border-top-color: var(--text-faint); }
.ls-card.is-out .card-tag { color: var(--accent); }
.ls-card.is-lost { opacity: 0.6; }
.ls-card.is-lost .card-tag { color: var(--red); }
.ls-card.struck { animation: struck 0.9s var(--ease); }
.ls-card.struck::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #fff, var(--accent), transparent);
  transform: rotate(-18deg) scaleX(0);
  animation: slash 0.45s var(--ease) forwards;
}
.ls-card.grazed { animation: struck 0.6s var(--ease); }
.ls-card.dying { animation: dying 1.4s steps(6) both; }
@keyframes struck { 0% { transform: translateX(0); } 15% { transform: translateX(-6px); } 35% { transform: translateX(5px); } 60% { transform: translateX(-2px); } }
@keyframes slash { 0% { transform: rotate(-18deg) scaleX(0); opacity: 1; } 60% { transform: rotate(-18deg) scaleX(1); opacity: 1; } 100% { transform: rotate(-18deg) scaleX(1); opacity: 0; } }
@keyframes dying { 0% { opacity: 1; } 30% { opacity: 0.2; transform: translateX(4px); } 50% { opacity: 0.9; transform: translateX(-3px); } 100% { opacity: 0.35; transform: none; } }

.float-dmg {
  position: absolute;
  right: 8px;
  top: 4px;
  z-index: 5;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 26px;
  color: #fff;
  text-shadow: 0 0 12px var(--accent), 0 0 2px var(--accent);
  pointer-events: none;
  animation: float-up 1.2s var(--ease) forwards;
}
.float-dmg.is-small { font-size: 16px; color: var(--accent); }
@keyframes float-up { 0% { opacity: 0; transform: translateY(8px) scale(1.4); } 20% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-34px); } }
.ls.hurt .ls-me { animation: struck 0.5s var(--ease); }
.ls-me .float-dmg { right: 72px; top: 2px; }

/* ---- question + options block (centered in the space under the arena) ---- */
.ls-play { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ls-q {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 16px;
  background: linear-gradient(180deg, rgba(255, 51, 85, 0.07), rgba(10, 12, 28, 0.85));
  border: 1px solid rgba(255, 51, 85, 0.22);
  border-left: 3px solid var(--accent);
  overflow-y: auto;
}
.ls-q-main { display: flex; flex-direction: column; gap: 8px; }
.ls-q-feed { display: none; flex-direction: column; gap: 8px; }
.ls-q.is-reveal .ls-q-main { display: none; }
.ls-q.is-reveal .ls-q-feed { display: flex; animation: q-in 0.35s var(--ease) both; }
.ls-q.is-reveal { border-left-color: var(--green); }
.ls-q-cat { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; color: var(--accent); }
.ls-q-text { font-family: var(--font-ui); font-weight: 700; font-size: clamp(17px, 4.9vw, 21px); line-height: 1.28; }
.ls-q.q-in { animation: q-in 0.45s var(--ease) both; }
@keyframes q-in { from { opacity: 0; transform: translateY(10px); } }
.ls-opts { flex: none; display: flex; flex-direction: column; gap: 7px; }
.ls-opts.q-in .ls-opt { animation: row-in 0.4s var(--ease) both; }
.ls-opts.q-in .ls-opt:nth-child(2) { animation-delay: 0.05s; }
.ls-opts.q-in .ls-opt:nth-child(3) { animation-delay: 0.1s; }
.ls-opts.q-in .ls-opt:nth-child(4) { animation-delay: 0.15s; }
.ls-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px 8px 8px;
  text-align: left;
  background: rgba(12, 16, 36, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s, border-color 0.2s, opacity 0.25s, transform 0.1s;
}
.ls-opt:active:not(:disabled) { transform: scale(0.98); }
.ls-opt-key {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  border: 1px solid rgba(255, 51, 85, 0.5);
}
.ls-opt-text { font-weight: 600; font-size: 16px; line-height: 1.2; }
.ls-opts.is-answered .ls-opt:not(.is-chosen) { opacity: 0.45; }
.ls-opt.is-chosen { border-color: var(--cyan); background: rgba(0, 240, 255, 0.1); }
.ls-opt.is-chosen .ls-opt-key { background: var(--cyan); color: var(--bg-0); border-color: var(--cyan); }
.ls-opt.is-correct { opacity: 1 !important; border-color: var(--green); background: rgba(61, 255, 139, 0.14); }
.ls-opt.is-correct .ls-opt-key { background: var(--green); color: var(--bg-0); border-color: var(--green); }
.ls-opt.is-wrong { border-color: var(--red); background: rgba(255, 51, 85, 0.14); }
.ls-opt.is-wrong .ls-opt-key { background: var(--red); color: #fff; border-color: var(--red); }
.ls-q-recap { font-size: 13px; line-height: 1.3; color: var(--text-dim); padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ls-opt:disabled { cursor: default; }
.is-hidden { visibility: hidden; }
.ls-opts { position: relative; }
.is-spectator .ls-opts::before {
  content: 'SPECTATING';
  position: absolute;
  right: 0;
  top: -18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-faint);
}
.is-spectator .ls-opt { opacity: 0.7; }

/* ---- banners ---- */
.ls-banner {
  position: absolute !important;
  z-index: 30 !important;
  left: 0;
  right: 0;
  top: 38%;
  padding: 14px 16px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.1em;
  color: #fff;
  background: linear-gradient(90deg, transparent, rgba(255, 51, 85, 0.85) 20%, rgba(255, 51, 85, 0.85) 80%, transparent);
  pointer-events: none;
  animation: banner 2.6s var(--ease) both;
}
@keyframes banner {
  0% { opacity: 0; transform: scaleY(0.2); }
  10% { opacity: 1; transform: none; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* ---- overlays ---- */
.ls-overlay { inset: 0; pointer-events: none; }
.ls-overlay:empty { display: none; }
.ls-overlay > * { pointer-events: auto; }
.ov-intro { background: rgba(6, 2, 8, 0.92); display: grid; place-items: center; animation: fade-in 0.3s both; padding: 0 var(--gutter); }
.ls-intro { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 360px; }
.ls-intro-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; color: var(--accent); animation: blink 1s steps(2) infinite; }
.ls-intro-title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 11vw, 50px);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(255, 51, 85, 0.6);
  animation: logo-in 0.8s var(--ease) both;
}
.ls-intro-title::before, .ls-intro-title::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; }
.ls-intro-title::before { color: var(--cyan); clip-path: inset(0 0 60% 0); animation: glitch-a 2.4s steps(1) infinite 0.8s; }
.ls-intro-title::after { color: #fff; clip-path: inset(55% 0 0 0); animation: glitch-b 2.4s steps(1) infinite 0.85s; }
.ls-rules { display: flex; flex-direction: column; gap: 8px; text-align: left; font-size: 15px; color: var(--text-dim); }
.ls-rules li { padding-left: 18px; position: relative; animation: row-in 0.4s var(--ease) both; }
.ls-rules li:nth-child(2) { animation-delay: 0.1s; } .ls-rules li:nth-child(3) { animation-delay: 0.2s; } .ls-rules li:nth-child(4) { animation-delay: 0.3s; }
.ls-rules li::before { content: '▸'; position: absolute; left: 0; color: var(--accent); }
.ls-rules b { color: var(--text); }
.ls-count { font-family: var(--font-num); font-weight: 700; font-size: 64px; line-height: 1; min-height: 64px; color: #fff; text-shadow: 0 0 24px rgba(255, 51, 85, 0.7); }
.ls-count.tick { animation: count-tick 0.5s var(--ease) both; }

.ls-answer { font-family: var(--font-ui); font-weight: 700; font-size: 20px; color: var(--green); }
.ls-feed { display: flex; flex-direction: column; gap: 5px; }
.ls-feed li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  background: rgba(10, 14, 32, 0.7);
  border-left: 2px solid var(--line-2);
  animation: row-in 0.35s var(--ease) both;
}
.ls-feed b { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.04em; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-arrow { color: var(--accent); }
.feed-dmg { margin-left: auto; font-family: var(--font-num); font-size: 16px; color: var(--accent); }
.feed-note { color: var(--text-dim); font-size: 11px; letter-spacing: 0.1em; }
.feed-hit { border-left-color: var(--accent) !important; }
.feed-shield { border-left-color: var(--cyan) !important; }
.feed-out { border-left-color: #fff !important; background: rgba(255, 51, 85, 0.18) !important; }

/* ---- FLATLINE (own elimination) ---- */
.flatline {
  position: absolute !important;
  inset: 0;
  z-index: 40 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(10, 0, 4, 0.94);
  animation: fade-in 0.15s both;
}
.flatline.out { opacity: 0; transition: opacity 0.6s; }
.flatline-line {
  width: 80%;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent);
  transform-origin: 0 50%;
  animation: flat 1s var(--ease) both;
}
@keyframes flat { from { transform: scaleX(0); } }
.flatline strong {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 13vw, 60px);
  letter-spacing: 0.1em;
  color: var(--accent);
  animation: winner-in 0.8s var(--ease) both;
}
.flatline strong::before, .flatline strong::after { content: attr(data-text); position: absolute; inset: 0; }
.flatline strong::before { color: var(--cyan); clip-path: inset(0 0 62% 0); animation: glitch-a 1.2s steps(1) infinite; opacity: 0; }
.flatline strong::after { color: #fff; clip-path: inset(58% 0 0 0); animation: glitch-b 1.2s steps(1) infinite; opacity: 0; }
.flatline small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--text-dim); text-align: center; padding: 0 16px; }

@media (max-height: 700px) {
  .ls-opt { min-height: 44px; }
  .ls-card { min-height: 56px; padding: 5px; }
  .ls-me { padding: 7px 10px; }
  .ls-q-text { font-size: 16px; }
}

/* 5–7 rivals, 4 per row: the card's top border already carries the player's color */
.ls-arena.is-dense .card-top .avatar { display: none; }
.ls-arena.is-dense .card-name { font-size: 11px; letter-spacing: 0.02em; }
.ls-arena.is-dense .ls-card { padding: 7px 6px 6px; }