/* ============================================================
   JoyMotion in-game HUD — standardized topbar + score/timer pills.
   Used by: horse-race, color-baskets, market-sort, memory-lanterns.
   (NOT applied to dragon-boat-race.)

   Matches the JoyMotion brand bar from arcade.html / launch.html:
   - White header with 4px black bottom border
   - Gradient circle dot + bold "JoyMotion" wordmark on the left
   - Rounded white "← BACK" pill on the right
   - All in-game score / timer / round chips render as white pills
     with a 4px black border and a 5–6px black drop shadow.
   ============================================================ */

.jm-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px clamp(14px, 3vw, 28px);
  background: #ffffff;
  border-bottom: 4px solid #0a0a0a;
  font-family: 'Inter', 'Helvetica Neue', 'Noto Sans TC', system-ui, sans-serif;
  pointer-events: auto;
}
.jm-topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0a0a0a;
  text-decoration: none;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}
.jm-topbar .brand .dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3d3d, #ffcf3a);
  border: 3px solid #0a0a0a;
  flex: 0 0 auto;
}
.jm-topbar .back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0a0a0a;
  text-decoration: none;
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 8px 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid #0a0a0a;
  box-shadow: 0 4px 0 #0a0a0a;
  transition: transform .08s, box-shadow .08s;
  pointer-events: auto;
}
.jm-topbar .back:hover { background: #fff8e0; }
.jm-topbar .back:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #0a0a0a;
}
.jm-topbar .top-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.jm-topbar .lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  background: #0a0a0a;
  border: 3px solid #0a0a0a;
  border-radius: 999px;
  box-shadow: 0 4px 0 #0a0a0a;
  pointer-events: auto;
}
.jm-topbar .lang-btn {
  min-width: 50px;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #0a0a0a;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}
.jm-topbar .lang-btn[aria-pressed="true"] {
  background: #ffcf3a;
}
@media (max-width: 640px) {
  .jm-topbar {
    align-items: flex-start;
  }
  .jm-topbar .top-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
}

/* When opened from launch.html (?auto=1), launch.html is the single tutorial
   and loading surface. Hide the duplicate in-game start screen entirely. */
html.jm-auto-launch body.jm-game-hud #startScreen,
body.jm-auto-launch.jm-game-hud #startScreen {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep legacy per-game start/countdown layers centered against the viewport.
   Some older games define these as absolute overlays; fixed avoids drift when
   camera/game layers establish their own positioning context. */
body.jm-game-hud #startScreen,
body.jm-game-hud #lobby,
body.jm-game-hud #results,
body.jm-game-hud #countdown,
body.jm-game-hud .startScreen,
body.jm-game-hud .lobby,
body.jm-game-hud .results,
body.jm-game-hud .countdown {
  position: fixed !important;
  inset: 0 !important;
}

body.jm-game-hud #countdown,
body.jm-game-hud .countdown {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

body.jm-game-hud #countdown.show,
body.jm-game-hud .countdown.show {
  display: flex !important;
}

body.jm-game-hud #cdNum {
  line-height: 1 !important;
  margin: 0 !important;
  transform-origin: center center !important;
}

/* ----------------------------------------------------------------
   Override existing in-game HUD widgets with the JoyMotion pill style.
   Selectors target `#ui ...` to avoid leaking into start screens / lobby.
   ---------------------------------------------------------------- */

/* Top-right timer pill (color-baskets, market-sort, memory-lanterns). */
#ui .timer {
  position: absolute !important;
  top: 76px !important;
  left: auto !important;
  right: 20px !important;
  transform: none !important;
  background: #ffffff !important;
  border: 4px solid #0a0a0a !important;
  border-radius: 999px !important;
  padding: 6px 22px !important;
  font-size: 38px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  color: #0a0a0a !important;
  text-shadow: none !important;
  box-shadow: 0 6px 0 #0a0a0a;
  font-variant-numeric: tabular-nums;
}
#ui .timer.low {
  color: #ff3d3d !important;
  border-color: #ff3d3d !important;
  animation: jmTimerPulse .9s infinite alternate !important;
}
@keyframes jmTimerPulse {
  from { transform: none; }
  to   { transform: scale(1.07); }
}

/* Score bar (a row of per-player pills, centered just below the topbar). */
#ui #scoreBar {
  top: 76px !important;
  z-index: 5;
}
#ui .scorePill {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border: 4px solid #0a0a0a !important;
  text-shadow: none !important;
  box-shadow: 0 4px 0 #0a0a0a;
}
#ui .scorePill .lbl {
  color: #444 !important;
  opacity: 1 !important;
  font-weight: 900 !important;
}
/* Per-player accent border (matches in-game lane colors). */
#ui .scorePill.p0 { border-color: #c9160c !important; }
#ui .scorePill.p1 { border-color: #0d3fb3 !important; }
#ui .scorePill.p2 { border-color: #1a8a2a !important; }
#ui .scorePill.p3 { border-color: #b85a00 !important; }

/* Round chip (memory-lanterns, market-sort) — top-left under topbar. */
#ui .roundChip {
  display: none !important;
}

/* Horse race uses a different structure: <div id="hud"><div id="title">…</div><div id="timer">…</div></div>. */
#ui #hud {
  top: 76px !important;
  gap: 14px !important;
  background: transparent !important;
}
#ui #hud #title {
  background: #ffd23f !important;
  color: #0a0a0a !important;
  border: 3px solid #0a0a0a !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  opacity: 1 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 0 #0a0a0a;
}
#ui #hud #timer {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border: 4px solid #0a0a0a !important;
  border-radius: 999px !important;
  padding: 6px 22px !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  text-shadow: none !important;
  box-shadow: 0 5px 0 #0a0a0a;
  font-variant-numeric: tabular-nums;
}

/* Hide the legacy floating "← Back / ← MENU" anchor — replaced by the topbar. */
#ui #back,
#startScreen .back-btn { /* kept on start screen; only nuke duplicates inside #ui if any */
  /* (no-op marker; per-game hide below) */
}
.jm-hide-legacy-back .back-btn,
.jm-hide-legacy-back #back {
  display: none !important;
}