/* =====================================================================
   La Bomba: survival on the studio floor.

   Two surfaces, like ¿Te la juegas?:
     .bm-marquee  broadcast moments over the stage (title, new bomb, duel,
                  verdict, BOOM, winner). Never interactive.
     .bm-desk     this player's role, the fuse and the circle, under the stage.

   Time lives only on the 3D bomb: no bar, percentage or count. Colour is functional (--danger: the bomb and its holder,
   --warning: who is next and misses, --success: passes) and every state
   also has an icon or a word.
   ===================================================================== */

/* --- Layout: stage at full width; the atriles carry the state. */
body.game-active.la-bomba .broadcast {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(160px, 1fr) auto auto;
  grid-template-areas: "hud" "q" "stage" "desk" "ans";
}
body.la-bomba .rank-overlay,
body.la-bomba .answer-feedback { display: none !important; }
.bm-marquee, .bm-desk { display: none; }
body.game-active.la-bomba .bm-marquee {
  grid-area: stage; position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr);
  align-content: start; justify-items: center; padding: clamp(6px, 1.5%, 18px) 12px 0;
  pointer-events: none; min-width: 0;
}
body.game-active.la-bomba .bm-desk {
  grid-area: desk; display: block; justify-self: center; width: min(100%, 860px); min-width: 0;
}
body.game-active.la-bomba .bm-desk.is-empty { display: none; }
body.la-bomba:has(.bm-marquee:not(.is-empty)) .broadcast-label { opacity: 0; }

/* HUD: no clock at all. The fuse is the only (hidden) time. */
body.la-bomba .hud-timer-text, body.la-bomba .hud-timer-wrap { display: none; }
body.la-bomba .hud-counter { color: var(--bomb-flame); }
body.la-bomba .hud-progress-fill { background: var(--danger); }

/* The holder's question leads; everyone else reads a quieter one. */
body.la-bomba.bomb-holder .hud-question-area h2 { box-shadow: 0 0 0 2px var(--danger), 0 0 36px rgb(255 95 118 / .25); }
.hud-question-area.is-compact h2 { padding: 10px 20px; font-size: clamp(1rem, .82rem + .7vw, 1.4rem); }
.answer-opt.is-watching:disabled { opacity: .78; cursor: default; }
/* A new question opens a moment after the hand-over (server lock). */
.answer-opt.is-arming { opacity: .55; }
.answer-grid.bm-flash-right { animation: bmFlashRight 600ms var(--ease-out); }
.answer-grid.bm-flash-wrong { animation: bmFlashWrong 600ms var(--ease-out); }
@keyframes bmFlashRight { from { box-shadow: 0 0 0 3px var(--success), 0 0 40px rgb(61 220 145 / .35); border-radius: var(--r-md); } }
@keyframes bmFlashWrong { from { box-shadow: 0 0 0 3px var(--warning), 0 0 40px rgb(255 159 69 / .35); border-radius: var(--r-md); } }

.bm-marquee .pc, .bm-desk .pc { color: var(--pc); font-weight: 750; }

/* =====================================================================
   Marquee
   ===================================================================== */
.bm-card, .bm-verdict, .bm-boom {
  max-width: min(100%, 900px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgb(12 20 36 / .96), rgb(6 10 20 / .97));
  box-shadow: var(--edge-highlight), var(--shadow-3);
  text-align: center;
}
.bm-card { display: grid; justify-items: center; gap: 6px; padding: 12px clamp(16px, 4vw, 36px) 14px; border-color: rgb(255 173 59 / .5); }
.bm-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a4664, var(--bomb-body)); color: var(--bomb-flame); font-size: 1.9rem;
  box-shadow: 0 0 0 2px rgb(255 173 59 / .35), 0 0 30px rgb(255 173 59 / .3); }
.bm-title {
  margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); line-height: .86;
  color: var(--bomb-flame); text-shadow: 0 2px 0 #7a3a0a, 0 0 34px rgb(255 173 59 / .4);
}
.bm-lede { margin: 0; max-width: 52ch; color: var(--text-1); font-size: clamp(1.02rem, .9rem + .5vw, 1.3rem); font-weight: 600; line-height: 1.35; text-wrap: balance; }
.bm-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.bm-rules li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--surface-sunken); color: var(--text-2); font-size: var(--fs-sm); }
.bm-rules b { color: var(--text-1); }
.bm-rules .is-up i { color: var(--success); }
.bm-rules .is-warn i { color: var(--warning); }
.bm-rules .is-down i { color: var(--danger); }
.bm-kicker { color: var(--text-2); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.bm-name { display: grid; justify-items: center; margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: .92; max-width: 100%; }
.bm-name small { font-size: clamp(1.1rem, 1rem + .7vw, 1.6rem); color: var(--text-1); letter-spacing: .04em; }
.bm-name span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.6rem); color: var(--pc); }
.bm-sub { margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--bomb-flame); font-weight: 700; }
.bm-duel { border-color: var(--danger); box-shadow: var(--edge-highlight), 0 0 50px rgb(255 95 118 / .3), var(--shadow-3); }
.bm-duel .bm-title { color: var(--danger-strong); text-shadow: 0 2px 0 #5c0c1c, 0 0 34px rgb(255 95 118 / .45); }
.bm-versus { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; margin: 0;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); text-transform: uppercase; }
.bm-vs { color: var(--text-3); font-size: .7em; }
.bm-win { border-color: var(--spot-line); }
.bm-win .bm-kicker { color: var(--spot-strong); display: inline-flex; gap: 8px; align-items: center; }

/* Verdict of an answer: short, over the stage, never blocking. */
.bm-verdict { --tone: var(--success); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 16px;
  padding: 8px clamp(16px, 3vw, 28px); border-color: color-mix(in srgb, var(--tone) 60%, transparent);
  box-shadow: var(--edge-highlight), 0 0 40px color-mix(in srgb, var(--tone) 24%, transparent), var(--shadow-3); }
.bm-verdict.is-wrong { --tone: var(--warning); }
.bm-verdict strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); line-height: .92;
  text-transform: uppercase; color: color-mix(in srgb, var(--tone) 55%, #fff); }
.bm-verdict span { font-family: var(--font-display); font-weight: 750; font-size: clamp(1.2rem, 1rem + .9vw, 1.8rem); text-transform: uppercase; color: var(--text-1); }

/* BOOM: a comic burst, then who is out and in what place. */
.bm-boom { display: grid; justify-items: center; gap: 2px; padding: 10px clamp(18px, 4vw, 40px) 14px; border-color: var(--danger);
  background: radial-gradient(circle at 50% 0%, rgb(255 173 59 / .28), transparent 60%), linear-gradient(180deg, rgb(40 10 18 / .96), rgb(12 6 12 / .97));
  box-shadow: var(--edge-highlight), 0 0 60px rgb(255 95 118 / .35), var(--shadow-3); }
.bm-boom-word { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .85;
  font-size: clamp(3.4rem, 2rem + 6vw, 7rem); color: var(--bomb-core);
  text-shadow: 0 3px 0 var(--danger), 0 6px 0 #6b1020, 0 0 40px rgb(255 173 59 / .6); transform: rotate(-3deg); }
.bm-boom.is-settled .bm-boom-word { font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem); }
.bm-boom-who { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.3rem, 1rem + 1.3vw, 2.2rem); color: var(--text-1); }
.bm-boom-pos { display: inline-flex; padding: 4px 14px; border-radius: var(--r-pill); background: var(--danger-soft); border: 1px solid var(--danger);
  color: var(--danger-strong); font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: .05em; text-transform: uppercase; }

/* =====================================================================
   Desk
   ===================================================================== */
.bm-desk-card, .bm-final { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-panel);
  box-shadow: var(--edge-highlight), var(--shadow-2); }
.bm-desk-card { display: grid; gap: 8px; padding: 10px 14px 12px; }
.bm-desk-card.is-holder { border-color: var(--danger); box-shadow: var(--edge-highlight), 0 0 0 1px rgb(255 95 118 / .3), 0 0 36px rgb(255 95 118 / .18), var(--shadow-2); }
.bm-desk-card.is-out { opacity: .92; }
.bm-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.bm-status > i { color: var(--danger); font-size: 1.3rem; align-self: center; }
.bm-status strong { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); color: var(--text-1); line-height: 1.05; }
.bm-status > span { color: var(--text-2); font-size: var(--fs-sm); }
.bm-status.is-holder strong { color: var(--danger-strong); }
.bm-status.is-out > i { color: var(--text-3); }
.bm-status.is-out strong { color: var(--text-2); }
.bm-note { margin: 0; font-size: var(--fs-sm); }
.bm-note.is-error { color: var(--danger-strong); }

/* Danger, in words: the levels of the bomb's own profile, never a time. */
.bm-warning { display: inline-flex; align-items: center; gap: 6px; justify-self: start; max-width: 100%;
  padding: 3px 12px; border-radius: var(--r-pill); border: 1px solid var(--warning); background: var(--warning-soft);
  color: var(--warning); font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.bm-warning.is-critical { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-strong); }

/* The circle, from the holder onwards. */
.bm-circle { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bm-seat { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; max-width: 100%; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent); background: var(--surface-sunken); color: var(--text-1); font-size: var(--fs-sm); }
.bm-seat i { color: var(--pc); }
.bm-seat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.bm-seat small { color: var(--text-2); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.bm-seat.is-holder { border-color: var(--danger); background: var(--danger-soft); }
.bm-seat.is-holder i, .bm-seat.is-holder small { color: var(--danger-strong); }
.bm-seat.is-next { border-color: var(--warning); }
.bm-seat.is-next i, .bm-seat.is-next small { color: var(--warning); }
.bm-seat.is-out { opacity: .55; border-style: dashed; }
.bm-seat.is-out .bm-seat-name { text-decoration: line-through; }
.bm-seat.is-out i { color: var(--text-3); }
.bm-seat.is-me { outline: 2px solid var(--signal-line); outline-offset: 1px; }
.bm-seat.is-offline::after { content: "sin señal"; color: var(--warning); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; }

/* The block's table. */
.bm-final { display: grid; gap: 8px; padding: 12px 14px; border-color: var(--spot-line); }
.bm-final-title { margin: 0; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); text-transform: uppercase; color: var(--spot-strong); }
.bm-final-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
.bm-final-table th { padding: 0 8px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; text-align: left; }
.bm-final-table th:last-child, .bm-final-table td:last-child { text-align: right; }
.bm-final-table td { padding: 8px; background: var(--surface-sunken); }
.bm-final-table td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.bm-final-table td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.bm-final-table tr.is-me td { background: var(--spot-soft); }
.bm-final-rank { width: 4em; color: var(--spot-strong); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.bm-final-award { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--spot); }
.bm-final-note { margin: 0; text-align: center; color: var(--text-3); font-size: var(--fs-xs); }

/* Entrances (never with reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  body:not(.reduce-motion) .bm-card, body:not(.reduce-motion) .bm-verdict { animation: bmIn var(--dur-base) var(--ease-out); }
  body:not(.reduce-motion) .bm-boom { animation: bmBoom 420ms cubic-bezier(.2, 1.6, .4, 1); }
  body:not(.reduce-motion) .bm-boom.is-settled { animation: none; }
}
@keyframes bmIn { from { opacity: 0; transform: translateY(-12px); } }
@keyframes bmBoom { from { opacity: 0; transform: scale(.4) rotate(-8deg); } }

/* =====================================================================
   Phones, portrait: question, stage, the role and fuse, the answers.
   ===================================================================== */
@media (orientation: portrait), (max-width: 899px) and (min-height: 541px) {
  body.game-active.la-bomba .broadcast { grid-template-rows: auto auto minmax(150px, 1fr) auto auto; }
  body.game-active.la-bomba[data-bomb-phase="fuse"] .broadcast { grid-template-rows: auto auto minmax(130px, 1fr) auto auto; }
}
@media (max-width: 599px) {
  .bm-desk-card { padding: 8px 10px 10px; gap: 6px; }
  .bm-rules { display: grid; justify-items: center; }
  .bm-rules li { font-size: var(--fs-xs); }
  .bm-warning { font-size: .85rem; }
  .bm-seat { min-height: 28px; padding: 3px 8px; font-size: var(--fs-xs); }
  .bm-final-table th { font-size: 10px; padding: 0 4px; }
  .bm-final-table td { padding: 6px 4px; font-size: var(--fs-sm); }
  .bm-final-table th:nth-child(3), .bm-final-table td:nth-child(3) { display: none; }
}

/* =====================================================================
   Phones, landscape: stage on the left, read and act on the right.
   ===================================================================== */
@media (orientation: landscape) and (max-height: 540px) {
  body.game-active.la-bomba .broadcast {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "hud hud" "stage q" "stage desk" "stage ans";
  }
  body.game-active.la-bomba .bm-desk { width: 100%; }
  body.game-active.la-bomba .bm-marquee { padding: 6px 0 0; overflow: hidden; }
  .bm-marquee > * { max-width: 100%; min-width: 0; }
  .bm-card, .bm-verdict, .bm-boom { padding: 6px 12px; gap: 2px; }
  .bm-title { font-size: 2.4rem; }
  .bm-lede { font-size: .9rem; }
  .bm-rules, .bm-icon { display: none; }
  .bm-name span { font-size: 2.4rem; }
  .bm-boom-word { font-size: 2.8rem; }
  .bm-boom-who { font-size: 1.1rem; }
  .bm-verdict strong { font-size: 1.7rem; }
  .bm-verdict span { font-size: 1rem; }
  .bm-desk-card { padding: 6px 10px 8px; gap: 5px; }
  .bm-status strong { font-size: 1.1rem; }
  .bm-circle { display: none; }
  body.la-bomba .answer-opt { min-height: 44px; }
}