/* ==========================================================================
   Battleship — electric naval theme, built on the Stake token palette.
   Mirrors the Pong lobby aesthetic (animated glow, scan-line accents,
   green CTA) but with a nautical two-color split: red (your) / blue
   (enemy) throughout the placing + playing views.

   Pixi canvas does the actual boards; CSS only handles layout, the
   ship-selection lobby, the placing sidebar, the HUD, and result
   overlays.
   ========================================================================== */

:root {
  --bs-red:      #ff4567;
  --bs-blue:     #4fc3f7;
  --bs-cyan:     #66ffe5;
  --bs-deep:     #0a1426;
  --bs-gold:     #ffd166;
  --bs-glow-red: 0 0 24px rgba(255, 69, 103, .5);
  --bs-glow-blue: 0 0 24px rgba(79, 195, 247, .5);
  --bs-glow-cyan: 0 0 18px rgba(102, 255, 229, .45);
}

.bs-page { position: relative; isolation: isolate; }

/* ---- Header ---------------------------------------------------------- */
.bs-header { position: relative; text-align: center; margin-bottom: 18px; }
.bs-title {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--s-text);
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}
.bs-title-word {
  background: linear-gradient(100deg, var(--bs-red) 0%, var(--bs-cyan) 50%, var(--bs-blue) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: bsTitleSweep 8s linear infinite;
}
@keyframes bsTitleSweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.bs-title-underline {
  width: 160px;
  height: 2px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, var(--bs-cyan), transparent);
  box-shadow: var(--bs-glow-cyan);
  animation: bsLineBreathe 2.6s ease-in-out infinite;
}
@keyframes bsLineBreathe {
  0%,100% { opacity: .65; transform: scaleX(1); }
  50%     { opacity: 1;   transform: scaleX(1.25); }
}

.bs-view { width: 100%; }

/* ==========================================================================
   LOBBY VIEW
   Grid / create card shell / open-lobbies panel / fleet row layout / bet
   input / refresh button all come from /css/qk-lobby.css (the shared
   .qk-lobby component; #bs-lobby carries data-accent="battleship" for
   the red-primary / blue-alt accent combo). The only BS-specific piece
   left is .bs-ship-img — the actual ship artwork, which replaces the
   generic silhouette <i> the shared component uses.
   ========================================================================== */

/* Ship photo inside a .qk-lobby-ship-row — the real battleship PNGs. */
.bs-ship-img {
  display: block;
  width: 100%;
  max-width: 460px;
  max-height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
  transition: filter .18s, transform .18s;
}
.qk-lobby-ship-row.selected .bs-ship-img {
  filter: drop-shadow(0 0 10px rgba(102, 255, 229, .55)) drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}

.gp-quick { display: flex; gap: 6px; }
.gp-quick button {
  flex: 1 1 0;
  padding: 8px 10px;
  background: var(--s-bg-3);
  border: 1px solid var(--s-line);
  border-radius: 8px;
  color: var(--s-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.gp-quick button:hover {
  background: var(--s-bg-4);
  color: var(--s-text);
  border-color: rgba(102, 255, 229, .35);
}

/* ---- CTA + status --------------------------------------------------- */
.bs-create-btn, .gp-btn {
  position: relative;
  padding: 12px 18px;
  background: var(--s-green);
  border: 0;
  border-radius: 10px;
  color: #061108;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: transform .08s, box-shadow .15s, background .15s;
  box-shadow: 0 0 0 0 rgba(127, 248, 0, .55), 0 4px 14px rgba(127, 248, 0, .18);
}
.bs-create-btn:hover, .gp-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(127, 248, 0, .55), 0 4px 14px rgba(127, 248, 0, .25);
}
.bs-create-btn:active, .gp-btn:active { transform: translateY(0); }
.bs-create-btn:disabled, .gp-btn:disabled {
  background: var(--s-bg-3);
  color: var(--s-muted);
  cursor: not-allowed;
  box-shadow: none;
}
.gp-btn.secondary {
  background: var(--s-bg-3);
  color: var(--s-text);
  box-shadow: none;
  border: 1px solid var(--s-line);
}
.gp-btn.secondary:hover {
  background: var(--s-bg-4);
  box-shadow: 0 0 0 1px var(--s-line);
}
.bs-status-text {
  min-height: 16px;
  color: var(--s-muted);
  font-size: 12px;
  margin: 2px 0 0;
}
.bs-status-text.error { color: #ff7687; }

/* ---- Lobby card internals (shell provided by .qk-lobby-card) -------- */
/* Open-lobbies panel + lobby-card outer box + refresh button + empty
   state + accent strips live in /css/qk-lobby.css. Only the BS-specific
   card contents (bet colour, creator row, fleet meta pill, actions) stay
   here. */
.bs-lobby-bet {
  font-weight: 800;
  color: var(--s-green);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.bs-lobby-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bs-lobby-creator {
  color: var(--s-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-lobby-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--s-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.bs-lobby-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  color: var(--s-muted);
  font-size: 10px;
  font-weight: 700;
}
.bs-lobby-badge.fleet { color: var(--bs-cyan); border-color: rgba(102, 255, 229, .35); }
.bs-lobby-actions { display: flex; gap: 6px; }
.bs-lobby-actions button {
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: .04em;
}

/* ==========================================================================
   WAITING VIEW
   ========================================================================== */
#bs-waiting {
  display: flex;
  justify-content: center;
}
.bs-waiting-card {
  position: relative;
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
  max-width: 460px;
  width: 100%;
  overflow: hidden;
}
.bs-waiting-pulse {
  position: relative;
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--bs-cyan) 0%, transparent 70%);
  animation: bsWaitingPulse 1.8s ease-in-out infinite;
}
.bs-waiting-pulse::after {
  content: "";
  position: absolute; inset: 22px;
  border-radius: 50%;
  background: var(--s-text);
  box-shadow: var(--bs-glow-cyan);
}
@keyframes bsWaitingPulse {
  0%,100% { transform: scale(.9);  opacity: .7; }
  50%     { transform: scale(1.2); opacity: 1;  }
}
.bs-waiting-card h3 { margin: 0 0 6px; font-size: 20px; color: var(--s-text); }
.bs-waiting-card p { color: var(--s-muted); margin: 0 0 16px; font-size: 13px; }
.bs-wait-meta {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.bs-wait-meta span {
  padding: 5px 12px;
  background: var(--s-bg-3);
  border: 1px solid var(--s-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--s-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ==========================================================================
   PLACING VIEW
   ========================================================================== */
#bs-placing {
  max-width: 1120px;
  margin: 0 auto;
}
.bs-placing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 10px;
}
.bs-placing-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--s-text);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bs-placing-timer {
  font-size: 14px;
  font-weight: 800;
  color: var(--bs-gold);
  letter-spacing: .04em;
  padding: 4px 12px;
  background: rgba(255, 209, 102, .1);
  border: 1px solid rgba(255, 209, 102, .4);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.bs-placing-timer.urgent { color: #ff7687; border-color: rgba(255, 118, 135, .5); background: rgba(255, 118, 135, .1); }

.bs-placing-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 880px) {
  .bs-placing-body { grid-template-columns: 1fr; }
}
.bs-placing-side {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bs-placing-hint {
  font-size: 12px;
  color: var(--s-muted);
  line-height: 1.5;
}
.bs-placing-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  background: var(--s-bg-3);
  border: 1px solid var(--s-line);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--s-text);
}

/* Vertical list of ships awaiting placement. Each item highlights when
   active, greys out once placed. */
.bs-ships-to-place {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bs-ship-chip {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--s-bg-3);
  border: 1px solid var(--s-line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.bs-ship-chip:hover:not(.placed) {
  border-color: rgba(102, 255, 229, .4);
  background: var(--s-bg-4);
}
.bs-ship-chip.active {
  border-color: var(--bs-cyan);
  background: rgba(102, 255, 229, .1);
  box-shadow: 0 0 12px rgba(102, 255, 229, .25);
}
.bs-ship-chip.placed {
  opacity: .5;
  cursor: default;
}
.bs-ship-chip .bs-chip-ico {
  width: 32px; height: 10px;
  background: var(--bs-cyan);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(102, 255, 229, .45);
}
.bs-ship-chip.placed .bs-chip-ico { background: var(--s-muted); box-shadow: none; }
.bs-ship-chip .bs-chip-name { font-size: 13px; font-weight: 700; color: var(--s-text); }
.bs-ship-chip .bs-chip-cells { font-size: 11px; color: var(--s-muted); letter-spacing: .04em; text-transform: uppercase; }

.bs-placing-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bs-placing-actions button { flex: 1 1 0; padding: 9px 10px; font-size: 11px; }

#bs-ready-btn { margin-top: 4px; }

.bs-placing-arena {
  position: relative;
  width: 100%;
  /* Cap the placing arena so the whole placement screen (header +
     timer + sidebar + arena + about) fits in a typical 1080p viewport
     without vertical scrolling. The 1:1 aspect-ratio still applies, so
     the arena stays square — it just stops growing past 480 × 480. The
     inner Pixi canvas (rendered at 500 × 500 internal resolution) is
     downscaled via `.bs-placing-arena canvas` below; CSS scaling keeps
     mouse-event coordinates correct because Pixi v8's EventSystem
     reads the canvas's CSS bounding rect, not its raw pixel size.
     The play-phase arena (.bs-arena) intentionally keeps the larger
     full-width sizing — only the placement screen needs to be more
     compact. */
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bs-deep);
  border: 1px solid var(--s-line);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(102, 255, 229, .05);
  outline: none;
  /* Suppress the browser's native touch behaviours over the placing
     board so a finger-drag for ship placement can't simultaneously
     scroll the page or trigger pinch-zoom. The HUD + sidebar above
     and below remain scrollable (touch-action lives on the arena
     only). */
  touch-action: none;
}
.bs-placing-arena:focus-visible {
  border-color: rgba(102, 255, 229, .45);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 0 2px rgba(102, 255, 229, .35);
}
/* Scale the Pixi canvas (created at a fixed 500 × 500 internal
   resolution by makeBoardApp() in battleship.js) to whatever size the
   capped arena ends up. width:100%/height:100% on the canvas element
   leaves Pixi's internal renderer untouched and only changes its CSS
   display size — sharp rendering is preserved and the scaling is
   transparent to the click/drag hit-testing logic. */
.bs-placing-arena canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ==========================================================================
   PLAYING VIEW
   ========================================================================== */
#bs-playing {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Sticky HUD: stays pinned at the top of the viewport during the playing
   phase so the player always sees whose-turn / countdown timer / scores
   without scrolling, even on mobile where the two boards stack
   vertically and the body becomes tall. */
.bs-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 12px 16px;
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  /* On scrolled-past, the HUD's translucent borders would let the board
     bleed through. Force a solid backdrop. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bs-hud-side {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bs-hud-side.left  { align-items: flex-start; }
.bs-hud-side.right { align-items: flex-end; }
/* Name + chevron sit on the same row so the chevron always points at the
   active player. The chevrons stay in DOM at all times (not toggled in/out)
   so the row's bounding box doesn't shift on turn flips. */
.bs-hud-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}
.bs-hud-side.right .bs-hud-name-row { justify-content: flex-end; }
.bs-hud-chev {
  font-size: 11px;
  line-height: 1;
  color: var(--s-muted-2, var(--s-muted));
  opacity: .35;
  transition: color .2s, opacity .2s, text-shadow .2s, transform .2s;
}
.bs-hud-chev.active {
  opacity: 1;
  color: var(--s-green);
  text-shadow: 0 0 10px rgba(127, 248, 0, .7);
  animation: bsHudChev 1.2s ease-in-out infinite;
}
@keyframes bsHudChev {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(2px); }
}
.bs-hud-side.right .bs-hud-chev.active {
  /* Right-side chevron is "&#x25C0;" so its "forward" direction is leftward. */
  animation-name: bsHudChevR;
}
@keyframes bsHudChevR {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-2px); }
}
.bs-hud-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--s-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.bs-hud-score {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--s-text);
}
.bs-hud-side.left  .bs-hud-score { color: var(--bs-red); text-shadow: 0 0 12px rgba(255, 69, 103, .35); }
.bs-hud-side.right .bs-hud-score { color: var(--bs-blue); text-shadow: 0 0 12px rgba(79, 195, 247, .35); }

.bs-hud-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bs-hud-turn {
  font-size: 13px;
  font-weight: 800;
  color: var(--s-text);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 12px;
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  border-radius: 999px;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.bs-hud-turn.mine {
  color: var(--bs-cyan);
  border-color: rgba(102, 255, 229, .6);
  box-shadow: 0 0 16px rgba(102, 255, 229, .25);
}
.bs-hud-turn.theirs {
  color: var(--s-muted);
}
.bs-hud-bet {
  font-size: 11px;
  color: var(--s-green);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bs-hud-timer {
  /* On desktop the big center-of-grid widget is the primary timer and the
     HUD pill is redundant, so we hide it. On mobile the boards stack
     vertically and the center widget can scroll out of view; we surface
     the HUD timer there (see the @media block below) so the countdown is
     ALWAYS visible from the sticky header bar regardless of scroll. */
  display: none;
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--s-text);
  letter-spacing: .02em;
  line-height: 1;
  padding: 2px 10px;
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  border-radius: 999px;
  min-width: 48px;
  text-align: center;
}
.bs-hud-timer.urgent {
  color: #ff7687;
  border-color: rgba(255, 118, 135, .55);
  background: rgba(255, 118, 135, .08);
  animation: bsTimerPulse 0.8s ease-in-out infinite alternate;
}

/* ---- Two-board layout ----------------------------------------------- */
/* Fixed middle column so the two boards have identical widths and can't
   be jostled by arrow glyph / timer / label variations. The center
   widget has its own fixed width below. */
.bs-board-pair {
  display: grid;
  grid-template-columns: 1fr 140px 1fr;
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 820px) {
  .bs-board-pair { grid-template-columns: 1fr; }
  /* On mobile the sticky HUD already shows whose-turn (chevron) and the
     countdown timer, so the big center widget below the first board is
     redundant. Hide it to save vertical real estate; the HUD-bar timer
     becomes the canonical source of truth. */
  .bs-turn-center { display: none; }
  /* Surface the HUD-bar timer on mobile (it was display:none on desktop
     because the center widget owned the seconds readout). */
  .bs-hud-timer { display: inline-block; }
}

/* ---- Center turn widget: big arrow + timer + label ------------------ */
/* Fixed outer width (matches the 140px column from .bs-board-pair above)
   + fixed sub-element boxes so the widget can never push the adjacent
   boards around. Arrow glyph sits inside a 100px fixed-width box so
   the "→" ↔ "←" swap can't change the flow width by even a pixel. */
.bs-turn-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140px;
  box-sizing: border-box;
  padding: 8px 6px;
  gap: 8px;
  user-select: none;
}
.bs-turn-arrow {
  width: 100px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  /* Color fade is fine to animate; DO NOT animate `transform` here or the
     flip between "→" and "←" interpolates through scaleX(0), which makes
     the arrow briefly collapse to zero width — the user saw that as
     "the size changes". We now swap the glyph text outright in JS
     instead of flipping with transform, which keeps bounding box size
     constant across turn flips. */
  transition: color .2s, text-shadow .2s;
}
.bs-turn-arrow.mine {
  color: var(--s-green);
  text-shadow: 0 0 28px rgba(127, 248, 0, .6), 0 0 8px rgba(127, 248, 0, .9);
}
.bs-turn-arrow.theirs {
  color: var(--bs-red);
  text-shadow: 0 0 28px rgba(255, 69, 103, .6), 0 0 8px rgba(255, 69, 103, .9);
}
.bs-turn-timer-big {
  width: 80px;
  text-align: center;
  font-size: 48px;
  font-weight: 900;
  color: var(--s-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  line-height: 1;
  transition: color .15s;
}
/* Urgent timer — fade opacity only, NO scale transform; scaling the
   number would nudge the center column, which then shifts both boards. */
.bs-turn-timer-big.urgent {
  color: #ff7687;
  animation: bsTimerPulse 0.8s ease-in-out infinite alternate;
}
@keyframes bsTimerPulse {
  0%   { opacity: 1; }
  100% { opacity: .6; }
}
.bs-turn-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--s-muted);
  transition: color .15s;
}
.bs-turn-label.mine   { color: var(--s-green); }
.bs-turn-label.theirs { color: var(--bs-red); }
.bs-board-card {
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bs-board-card.your-board  { box-shadow: inset 0 0 0 1px rgba(255, 69, 103, .2); }
.bs-board-card.enemy-board { box-shadow: inset 0 0 0 1px rgba(79, 195, 247, .2); }
.bs-board-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s-muted);
  text-align: center;
}
.bs-board-card.your-board  .bs-board-label { color: var(--bs-red); }
.bs-board-card.enemy-board .bs-board-label { color: var(--bs-blue); }

.bs-arena {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bs-deep);
  border: 1px solid var(--s-line);
  outline: none;
  /* `manipulation` lets taps fire instantly (no 300ms double-tap
     zoom delay) while still allowing two-finger gestures to scroll
     the page if the player wants to escape the board. */
  touch-action: manipulation;
}
.bs-arena:focus-visible { border-color: rgba(102, 255, 229, .45); }
.bs-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bs-stage > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ---- Event feed ----------------------------------------------------- */
.bs-feed {
  min-height: 28px;
  padding: 8px 14px;
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 10px;
  font-size: 13px;
  color: var(--s-muted);
  text-align: center;
  transition: color .15s, border-color .15s;
}
.bs-feed.hit  { color: var(--bs-cyan); border-color: rgba(102, 255, 229, .35); }
.bs-feed.miss { color: var(--s-muted); }
.bs-feed.sunk { color: var(--bs-gold); border-color: rgba(255, 209, 102, .4); }

/* ---- Result overlay ------------------------------------------------- */
.bs-result {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: rgba(5, 10, 18, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 50;
  animation: bsResultIn .35s ease;
}
.bs-result[hidden] { display: none; }
@keyframes bsResultIn { from { opacity: 0; } to { opacity: 1; } }
.bs-result-head {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 900;
  color: #fff;
  letter-spacing: .02em;
}
.bs-result-head.win  { color: var(--s-green); text-shadow: 0 0 24px rgba(127, 248, 0, .55); }
.bs-result-head.loss { color: #ff7687;        text-shadow: 0 0 24px rgba(255, 118, 135, .45); }
.bs-result-sub {
  font-size: 16px;
  color: var(--s-muted);
  text-align: center;
  max-width: 420px;
}
.bs-result-payout {
  font-size: 14px;
  color: var(--s-text);
  margin-bottom: 4px;
  letter-spacing: .04em;
}

/* ---- About ---------------------------------------------------------- */
.bs-about { margin-top: 28px; }
.bs-about h2 {
  font-size: 18px;
  color: var(--s-text);
  font-weight: 700;
  margin: 0 0 8px;
}
.bs-about p {
  color: var(--s-muted);
  font-size: 14px;
  line-height: 1.55;
}
.bs-about strong { color: var(--s-text); }

@media (max-width: 600px) {
  .bs-hud { padding: 10px 12px; gap: 8px; }
  .bs-hud-score { font-size: 15px; }
  .bs-hud-name { font-size: 11px; letter-spacing: .06em; }
  .bs-hud-turn { font-size: 11px; padding: 2px 8px; }
  .bs-hud-bet  { font-size: 10px; }
  .bs-hud-timer { font-size: 16px; padding: 2px 8px; min-width: 42px; }
  .bs-hud-chev { font-size: 10px; }
  .bs-ship-img { max-height: 36px; }
}