/* Badlands Royale — game styles, fully scoped under .br so they never touch the site.
   All custom properties live on .br (NOT :root). */
.br {
  --br-text:#f2e9da; --br-muted:#b6a489; --br-accent:#ffd070; --br-good:#86efac;
  --br-bad:#fb7185; --br-line:rgba(255,255,255,.12);
  --br-panel:rgba(38,28,18,.86); --br-panel2:#3a2c1c;
  color:var(--br-text);
}
.br .br-head { text-align:center; padding:2px 0 14px; }
.br .br-head h1 { margin:0; font-size:clamp(28px,5vw,48px); letter-spacing:-0.04em; line-height:1;
  background:linear-gradient(180deg,#ffe9b0,#e0a04a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.br .br-head p { max-width:760px; margin:12px auto 0; color:var(--br-muted); font-size:15px; line-height:1.5; }

/* HUD */
.br .br-hud {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--br-panel); border:1px solid var(--br-line); border-radius:14px;
  padding:10px 14px; margin-bottom:12px; font-size:14px;
}
.br .br-hud b { color:var(--br-text); font-weight:800; }
.br .br-hud > div { color:var(--br-muted); white-space:nowrap; }
.br .br-hud .spacer { flex:1 1 auto; }
.br .br-vit { display:grid; gap:5px; }
.br .vit-row { display:flex; align-items:center; gap:8px; }
.br .vit-row > span { color:var(--br-muted); font-weight:800; font-size:11px; letter-spacing:.06em; width:26px; }
.br .bar { width:120px; height:11px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; border:1px solid var(--br-line); }
.br .bar > i { display:block; height:100%; width:100%; border-radius:999px; transition:width .12s linear; }
.br .bar.hp > i { background:linear-gradient(90deg,#86efac,#22c55e); }
.br .bar.sta > i { background:linear-gradient(90deg,#fde68a,#f59e0b); }
.br .br-gun { color:var(--br-muted); }
.br .br-storm { color:var(--br-accent); font-weight:700; }
.br .br-btn {
  appearance:none; border:1px solid var(--br-line); background:linear-gradient(145deg,var(--br-panel2),#2a2012);
  color:var(--br-text); border-radius:10px; padding:7px 11px; font-size:16px; cursor:pointer; line-height:1;
}
.br .br-btn:hover { border-color:rgba(255,208,112,.7); }

/* Audio settings popover — pinned to the top-right of the game stage */
.br .br-audio {
  position:absolute; top:10px; right:10px; z-index:8; width:200px;
  background:#231911; border:1px solid rgba(255,208,112,.25); border-radius:12px;
  padding:12px; box-shadow:0 18px 50px rgba(0,0,0,.5); display:grid; gap:10px;
}
.br .br-audio[hidden] { display:none; }
.br .br-audio label { display:grid; gap:6px; font-size:12px; font-weight:700; color:var(--br-muted); }
.br .br-audio input[type=range] {
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background:rgba(255,255,255,.14); outline:none; cursor:pointer;
}
.br .br-audio input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:linear-gradient(145deg,#ffd070,#e0a040); border:1px solid rgba(0,0,0,.3); cursor:pointer;
}
.br .br-audio input[type=range]::-moz-range-thumb {
  width:16px; height:16px; border:none; border-radius:50%; background:#e0a040; cursor:pointer;
}
.br .br-mute-all {
  appearance:none; border:1px solid var(--br-line); background:var(--br-panel2); color:var(--br-text);
  border-radius:9px; padding:7px; font-weight:700; font-size:12px; cursor:pointer;
}
.br .br-mute-all:hover { border-color:rgba(255,208,112,.6); }
.br .br-mute-all.on { background:linear-gradient(145deg,#7a2a2a,#4c0519); color:#fecaca; }
.br .br-mute-all.off { opacity:.55; }

/* Stage + canvas */
.br .br-stage {
  position:relative; border:1px solid var(--br-line); border-radius:16px; overflow:hidden;
  background:#1c150d; box-shadow:0 20px 55px rgba(0,0,0,.32);
}
.br #cv { display:block; width:100%; height:auto; max-width:100%; touch-action:none; background:#caa46a; cursor:crosshair; }

/* Immersive / fullscreen play: cover the whole viewport, HUD on top, the stage
   fills the rest and the canvas (sized in JS) is centered. Driven by a class so
   it works even where the Fullscreen API doesn't (iOS Safari). */
html.br-immersive, html.br-immersive body { overflow:hidden !important; height:100%; }
html.br-immersive .br {
  position:fixed; inset:0; z-index:1000; margin:0; background:#0a0a0a;
  display:flex; flex-direction:column; padding:6px; box-sizing:border-box;
}
html.br-immersive .br-head { display:none; }
html.br-immersive .br-hud { flex:0 0 auto; margin-bottom:6px; }
html.br-immersive .br-stage { flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:0; background:#000; border-radius:0; }
html.br-immersive .br-stage #cv { width:auto; height:auto; max-width:100%; max-height:100%; }

.br #btnExitFs { display:inline-flex; align-items:center; justify-content:center; }

/* On touch devices, float the HUD as a compact panel OVER the game (top-left)
   so the canvas fills the whole screen; the minimap stays clear on the right. */
@media (pointer:coarse) {
  html.br-immersive .br { padding:0; }
  html.br-immersive .br-stage { position:absolute; inset:0; }
  html.br-immersive .br-hud {
    position:absolute; top:6px; left:6px; right:auto; width:auto; max-width:54%; z-index:7;
    flex:none; margin:0; padding:4px 8px; gap:3px 8px; font-size:11px; line-height:1.15;
    background:rgba(20,12,4,.55); border:1px solid var(--br-line); border-radius:10px;
  }
  html.br-immersive .br-hud .spacer { display:none; }
  html.br-immersive .br-vit { gap:3px; }
  html.br-immersive .br-vit .bar { width:54px; height:7px; }
  html.br-immersive .br-vit .vit-row > span { font-size:9px; width:18px; }
  html.br-immersive .br-hud .br-btn { padding:3px 7px; font-size:13px; }
  /* hide the floating HUD while a start/pause/results card is up so it can't clash */
  html.br-immersive.br-cardopen .br-hud { display:none; }
}

/* sprint toggle (touch) — lit when active */
.br .br-tbtns #tcSprint.on { background:linear-gradient(145deg,#fde68a,#f59e0b); color:#2a1c0a; border-color:#f59e0b; }

/* Overlays */
.br .br-overlay {
  position:absolute; inset:0; display:flex; align-items:safe center; justify-content:center;
  padding:18px; background:rgba(20,12,4,.74); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  z-index:6; overflow-y:auto;
}
.br .br-overlay[hidden] { display:none; }
.br .br-card {
  width:min(580px,100%); background:#231911; border:1px solid rgba(255,208,112,.22);
  border-radius:18px; padding:22px; text-align:center; box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.br .br-card h2 { margin:0 0 10px; font-size:clamp(24px,4vw,34px); }
.br .br-card p { color:var(--br-muted); line-height:1.55; margin:0 0 12px; font-size:14px; }
.br .br-keys { font-size:13px; }
.br .br-keys b { color:var(--br-accent); }

.br .br-go {
  appearance:none; border:1px solid rgba(255,208,112,.3); cursor:pointer; font:inherit; font-weight:800;
  color:#2a1c0a; background:linear-gradient(145deg,#ffd070,#e0a040); border-radius:12px;
  padding:12px 22px; font-size:16px; margin:6px 5px 0;
}
.br .br-go:hover { filter:brightness(1.06); }
.br .br-go.ghost { background:linear-gradient(145deg,var(--br-panel2),#2a2012); color:var(--br-text); }

/* End screen */
.br .br-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:8px 0 14px; }
.br .br-stats > div { background:rgba(255,255,255,.04); border:1px solid var(--br-line); border-radius:12px; padding:10px 8px; }
.br .br-stats span { display:block; color:var(--br-muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.br .br-stats b { display:block; margin-top:5px; font-size:22px; font-weight:800; }
.br .br-cardimg {
  display:block; width:100%; max-width:100%; height:auto; border-radius:12px;
  border:1px solid var(--br-line); margin:0 auto 12px; background:#1a120a;
}
.br .br-share { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.br .br-share-note { color:var(--br-good); font-size:13px; min-height:18px; margin-top:10px; }

/* Touch controls — twin stick (move + aim/fire). Offsets use the safe-area insets
   and sit well clear of the very bottom edge so iOS browser chrome / the home
   indicator can't sit on top of the tap targets. */
.br .br-touch { position:absolute; inset:0; z-index:5; pointer-events:none; } /* below overlays (z6) so cards stay tappable */
.br .br-touch[hidden] { display:none; }
html.br-cardopen .br-touch { display:none; } /* clear the controls while a start/pause/results card is up */
.br .br-stick {
  position:absolute; bottom:calc(env(safe-area-inset-bottom, 0px) + 20px); width:128px; height:128px; border-radius:50%;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.16);
  pointer-events:auto; touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.br .br-stick.move { left:calc(env(safe-area-inset-left, 0px) + 18px); }
.br .br-stick.aim { right:calc(env(safe-area-inset-right, 0px) + 18px); }
.br .br-stick > i {
  position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%;
  background:rgba(255,208,112,.32); border:1px solid rgba(255,255,255,.28); pointer-events:none;
}
.br .br-stick.aim > i { background:rgba(251,113,133,.34); } /* aim/fire knob = red */
/* action buttons sit at the bottom, centered between the two sticks */
.br .br-tbtns { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom, 0px) + 18px); display:flex; flex-direction:row; gap:16px; }
.br .br-tbtns button {
  appearance:none; border:1px solid rgba(255,255,255,.2); background:rgba(38,28,18,.4); color:var(--br-text);
  border-radius:50%; width:62px; height:62px; font-weight:800; font-size:18px; cursor:pointer;
  pointer-events:auto; touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.br .br-tbtns button:active { filter:brightness(1.25); background:rgba(38,28,18,.62); }

/* Rotate-to-landscape prompt — only while actually playing (immersive), in portrait */
.br .br-rotate { display:none; }
@media (pointer:coarse) and (orientation:portrait) {
  html.br-immersive .br-rotate {
    position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; background:rgba(20,12,4,.97); color:var(--br-accent); font-weight:800; font-size:46px; text-align:center;
  }
  html.br-immersive .br-rotate span { font-size:16px; color:var(--br-text); max-width:240px; line-height:1.4; }
}
.br .br-rotate button {
  margin-top:6px; appearance:none; border:1px solid var(--br-line); background:var(--br-panel2);
  color:var(--br-text); border-radius:10px; padding:9px 18px; font-weight:700; font-size:14px; cursor:pointer; pointer-events:auto;
}

/* Touch: drop the keyboard/controller text (you use on-screen controls) so the
   start/results cards stay short and fit without being cut off. */
@media (pointer:coarse) { .br .br-keys { display:none; } }

/* Short / landscape-phone screens: compact the overlay cards so they fit */
@media (max-height:560px) {
  .br .br-card { padding:14px; }
  .br .br-card h2 { font-size:22px; margin-bottom:6px; }
  .br .br-card p { font-size:12px; margin:0 0 8px; }
  .br .br-go { padding:9px 16px; font-size:14px; }
  .br .br-stats { margin:6px 0 10px; }
  .br .br-cardimg { max-width:300px; margin-bottom:8px; }
}

@media (max-width:640px) {
  .br .br-hud { gap:9px; font-size:12.5px; padding:9px 11px; }
  .br .bar { width:84px; }
}