/* BomberBros — board canvas + HUD. Shell chrome is themed via config.js theme.
   No overflow:hidden on html/body — the platform stamps landing.md as a
   below-the-fold section AFTER #app; the page must scroll to reach it
   (the engine already sets body{overflow-x:hidden}). */
html, body { margin: 0; height: 100%; background: #0d0f14; }
#app { height: 100%; }

.bb-wrap {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  /* backdrop tile size (px); game.js overrides from the `backdrop` skin slot */
  --bb-tw: 64px; --bb-th: 64px;
}
/* Repeating backdrop behind the arena, panned diagonally by one tile per
   loop so the wrap is seamless. It lives on a pseudo-element one tile larger
   than the wrap and moves with `transform`, so the pan is composited (no
   per-frame repaint of the whole area). Default = pure-CSS pattern; game.js
   swaps in the `backdrop` skin tile when one is assigned or bundled. */
.bb-wrap::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: calc(-1 * var(--bb-th)); left: calc(-1 * var(--bb-tw));
  width: calc(100% + var(--bb-tw)); height: calc(100% + var(--bb-th));
  background-color: #12151e;
  background-image: var(--bb-tile, repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 8px, transparent 8px 32px));
  background-size: var(--bb-tw) var(--bb-th);
  background-repeat: repeat;
  animation: bb-pan 7s linear infinite;
  will-change: transform;
}
@keyframes bb-pan {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--bb-tw), var(--bb-th), 0); }
}
@media (prefers-reduced-motion: reduce) { .bb-wrap::before { animation: none; } }
.bb-wrap > * { position: relative; z-index: 1; }
.bb-canvas {
  display: block; border-radius: 8px; image-rendering: auto;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); touch-action: none;
}
/* The play HUD lives below the engine's reserved chrome, sized by fit(). */
.bb-wrap { box-sizing: border-box; }
.bb-stage {
  --bb-board-w: 728px;
  --bb-hud-scale: 1;
  display: grid; grid-template-columns: 140px var(--bb-board-w) 140px;
  grid-template-areas: "hud hud hud" "left board right";
  gap: 12px; align-items: center;
  color: #fff6df; font-family: system-ui, sans-serif;
}
.bb-canvas { grid-area: board; border-radius: 12px; box-shadow: 0 0 0 3px #131622, 0 0 0 5px #6e7782, 0 12px 28px #0009; }
/* Share the canvas width even when height limits the board on narrow screens. */
.bb-hud { grid-area: hud; width: var(--bb-board-w); justify-self: center; display: flex; align-items: center; justify-content: space-between; gap: calc(16px * var(--bb-hud-scale)); min-height: calc(80px * var(--bb-hud-scale)); }
.bb-eyebrow { display: block; font-size: max(8px, calc(10px * var(--bb-hud-scale))); font-weight: 900; letter-spacing: calc(2px * var(--bb-hud-scale)); color: #b9c7dd; text-shadow: 0 calc(2px * var(--bb-hud-scale)) calc(1px * var(--bb-hud-scale)) #10131e; }
.bb-loadout { min-width: 0; flex: 1; }
.bb-loadout > .bb-eyebrow { margin: 0 0 calc(5px * var(--bb-hud-scale)) calc(5px * var(--bb-hud-scale)); }
.bb-powers { display: flex; align-items: center; gap: calc(5px * var(--bb-hud-scale)); }
.bb-power { position: relative; flex: 0 1 calc(56px * var(--bb-hud-scale)); min-width: 0; aspect-ratio: 1; filter: drop-shadow(0 calc(3px * var(--bb-hud-scale)) 0 #10131e); }
.bb-power canvas { display: block; width: 100%; height: 100%; }
.bb-power-count, .bb-clock [data-part=digits], .bb-scores b {
  font-family: "Luckiest Guy", "Arial Black", Impact, sans-serif;
  font-weight: 400; paint-order: stroke fill; -webkit-text-stroke: 4px #241d25;
  text-shadow: 0 3px 0 #241d25; line-height: 1;
}
.bb-power-count { position: absolute; inset: 22% 0 auto; text-align: center; font-size: calc(32px * var(--bb-hud-scale)); color: white; }
.bb-power.is-paused { opacity: .52; }
.bb-power.is-paused::after { content: ""; position: absolute; width: 75%; height: calc(3px * var(--bb-hud-scale)); left: 12%; top: 50%; transform: rotate(-45deg); background: #e0f6ff; box-shadow: 0 calc(1px * var(--bb-hud-scale)) calc(2px * var(--bb-hud-scale)) #102039; }
/* The engine round clock is MOUNTED here (session.hud.clock, theme 'game'):
   the pill is ours, the label/digits parts + --mm-clock-* tokens are the
   engine's styling contract. */
.bb-clock { flex: 0 0 auto; min-width: calc(120px * var(--bb-hud-scale)); text-align: center; padding: calc(10px * var(--bb-hud-scale)) calc(18px * var(--bb-hud-scale)) calc(5px * var(--bb-hud-scale)); border: calc(3px * var(--bb-hud-scale)) solid #ffd375; border-radius: calc(16px * var(--bb-hud-scale)); background: linear-gradient(160deg,#ffd565,#ffad2f 70%); box-shadow: inset 0 calc(2px * var(--bb-hud-scale)) 0 #fff7c2, 0 calc(4px * var(--bb-hud-scale)) 0 #925014, 0 calc(8px * var(--bb-hud-scale)) calc(18px * var(--bb-hud-scale)) #0006;
  --mm-clock-font: "Luckiest Guy", "Arial Black", Impact, sans-serif; --mm-clock-size: calc(43px * var(--bb-hud-scale)); --mm-clock-color: #fffdf0; --mm-clock-low: #fffdf0;
  --mm-clock-bg: transparent; --mm-clock-border: transparent; --mm-clock-low-border: transparent; --mm-clock-pad: 0; --mm-clock-gap: calc(5px * var(--bb-hud-scale)); }
.bb-hud .bb-clock [data-part=label] { display: block; color: #66360f; text-shadow: none; font: 900 max(7px, calc(9px * var(--bb-hud-scale))) system-ui, sans-serif; letter-spacing: calc(1.5px * var(--bb-hud-scale)); text-transform: uppercase; }
.bb-clock [data-part=digits] { display: block; margin-top: calc(5px * var(--bb-hud-scale)); font-size: calc(43px * var(--bb-hud-scale)); color: #fffdf0; }
.bb-clock > :first-child { flex-direction: column; }
.bb-clock.is-urgent { background: linear-gradient(160deg,#ff8567,#f2404f); border-color: #ffb295; }
.bb-clock.is-urgent [data-part=label] { color: #671829; }
.bb-roster { display: flex; flex-direction: column; gap: 12px; min-width: 0; align-self: center; }
.bb-roster-left { grid-area: left; }
.bb-roster-right { grid-area: right; }
.bb-capsule { position: relative; display: flex; flex-direction: column; align-items: center; padding: 9px 8px 10px; border-radius: 24px; border: 2px solid #657181; border-top-color: #a6b6c9; background: linear-gradient(150deg,#344255,#182130 70%); box-shadow: inset 0 -3px 0 #10151e, 0 5px 0 #0b111e, 0 8px 16px #0005; }
.bb-capsule.is-you { border-color: #ffcf6b; background: linear-gradient(145deg,#64513a,#28232e 65%); }
.bb-portrait { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff5, #101827 85%); border: 3px solid var(--bro-color); box-shadow: 0 2px 0 #0009; margin-top: -3px; }
.bb-portrait canvas { width: 100%; height: 100%; transform: scale(1.15); }
.bb-bro-info { width: 100%; min-width: 0; text-align: center; }
.bb-bro-name { margin-top: 6px; font-size: 12px; font-weight: 900; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 0 #0007; }
.bb-bro-status { font-size: 8px; letter-spacing: 1.3px; font-weight: 900; color: #91a4ba; margin: 2px 0 6px; }
.is-you .bb-bro-status { color: #ffcf6b; }
.bb-scores { display: grid; grid-template-columns: 1fr 1fr; border-radius: 12px; background: #0b121d7a; padding: 7px 0 4px; }
.bb-scores > div + div { border-left: 1px solid #b7c8d426; }
.bb-scores b { display: block; font-size: 26px; -webkit-text-stroke-width: 2px; }
.bb-scores span { display: block; font-size: 8px; font-weight: 900; letter-spacing: 1px; color: #a8b8cc; margin-top: 3px; }
.bb-capsule.is-down .bb-portrait { filter: grayscale(1); opacity: .5; }
.bb-capsule.is-out { opacity: .45; filter: grayscale(.8); }
/* Eight players remain visible without crowding smaller desktop boards. */
@media (max-height: 900px) and (min-width: 760px) {
  .bb-capsule { flex-direction: row; gap: 5px; border-radius: 22px; padding: 10px 5px; }
  .bb-portrait { flex: 0 0 38px; height: 38px; border-width: 2px; margin: 0; }
  .bb-bro-name { font-size: 10px; margin-top: 0; }
  .bb-bro-status { font-size: 6px; letter-spacing: .6px; margin-bottom: 4px; }
  .bb-scores { padding: 5px 0 3px; border-radius: 8px; }
  .bb-scores b { font-size: 22px; }
  .bb-scores span { font-size: 6px; letter-spacing: .4px; }
}
@media (max-width: 759px) {
  .bb-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "hud hud" "board board" "left right"; width: calc(100vw - 24px); gap: 10px; }
  .bb-canvas { justify-self: center; }
  .bb-powers { flex-wrap: wrap; }
  .bb-roster { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; align-self: start; }
  .bb-capsule { border-radius: 15px; padding: 5px 3px; flex-direction: row; gap: 2px; }
  .bb-portrait { display: none; }
  .bb-bro-name { font-size: 9px; margin-top: 0; }
  .bb-bro-status { font-size: 6px; margin: 1px 0 3px; letter-spacing: .4px; }
  .bb-scores { padding: 3px 0 2px; border-radius: 7px; }
  .bb-scores b { font-size: 19px; }
  .bb-scores span { font-size: 6px; margin-top: 1px; }
}
/* Short landscape windows: keep every bro visible above bottom chrome. */
@media (max-height: 620px) and (min-width: 760px) {
  .bb-roster { gap: 6px; }
  .bb-capsule { height: 36px; box-sizing: border-box; padding: 3px 5px; border-radius: 18px; }
  .bb-portrait { flex-basis: 26px; height: 26px; }
  .bb-bro-name { font-size: 8px; }
  .bb-bro-status { display: none; }
  .bb-scores { padding: 2px 0 0; background: transparent; }
  .bb-scores > div { display: flex; justify-content: center; align-items: center; gap: 2px; }
  .bb-scores b { font-size: 16px; }
  .bb-scores span { font-size: 5px; margin-top: 0; }
}

/* Match the shared display type stroke to the scaled HUD, not the roster. */
.bb-power-count, .bb-clock [data-part=digits] {
  -webkit-text-stroke-width: calc(3px * var(--bb-hud-scale));
  text-shadow: 0 calc(3px * var(--bb-hud-scale)) 0 #241d25;
}

/* Engine-requested low effects: reduce decorative compositing before pixels. */
.bb-wrap.bb-lowfx::before { animation: none; will-change: auto; }
.bb-lowfx .bb-power { filter: none; }