/* ============================================================
   In-play HUD — scorecard, stats, hint, club selector, HUD menu,
   range controls. Contextual-minimalism: faint glass, one gutter.
   ============================================================ */

/* ---- Top HUD card: hole info + shot info + wind, one panel -------- */
#scorecard {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--s-3));
  left: var(--s-3);
  width: max-content;
  padding: 9px 14px;
  background: var(--surface-hud);
  -webkit-backdrop-filter: blur(var(--blur-xs));
  backdrop-filter: blur(var(--blur-xs));
  border: var(--border-hair);
  color: var(--text);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  pointer-events: none;
  font-family: var(--font);
  letter-spacing: 0.2px;
}
/* hole-info group: chip strip */
#scorecard .sc-hole {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 16px;
  row-gap: 2px;
}
#scorecard .sc-hole .line { white-space: nowrap; font-size: var(--t-cap); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1.15; }
#scorecard b { font-family: var(--font); font-size: 16px; font-weight: var(--fw-bold); }
#scorecard #course { color: var(--text-dim); font-size: 12px; font-weight: var(--fw-med); }
#scorecard #score { font-family: var(--font); font-weight: var(--fw-bold); }
/* to-par colors via shared .tp-under/.tp-over/.tp-even (css/base.css) */
#scorecard .sc-right { display: flex; column-gap: 16px; margin-left: auto; }
/* wind readout as a chip in the card (arrow rotates with the camera) */
#scorecard .sc-wind { display: inline-flex; align-items: center; gap: 5px; color: var(--brass-400); font-size: var(--t-cap); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
#scorecard .sc-wind.hidden { display: none; }
#scorecard .sc-wind-arrow { display: inline-flex; color: var(--text); transform-origin: 50% 50%; will-change: transform; }
#scorecard .sc-wind-mph { color: var(--text); }

/* ---- Swing hint (bottom-left) ----------------------------- */
#hint {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-4));
  left: var(--s-3);
  max-width: 52vw;
  white-space: nowrap;
  overflow: hidden;              /* long hint clamps to max-width instead of spilling */
  text-overflow: ellipsis;
  color: var(--w-85);
  background: rgba(0, 0, 0, 0.4);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  font-size: 12px;
  pointer-events: none;
  transition: opacity 0.3s;
}
/* .hidden here means fade out, NOT remove — override the global display:none. */
#hint.hidden { display: block !important; opacity: 0; }

/* ---- Live match: whose-turn banner (bottom-left, small + out of the way) -- */
/* Sits in the bottom-left corner as a compact pill. #hint only shows on
   hole 1's tee and floats above the ball. */
#live-turn {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-4));
  left: var(--s-3);
  max-width: 46vw;
  box-sizing: border-box;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: var(--fw-bold);
  pointer-events: none;
  z-index: 40;
  transition: opacity 0.25s;
}
/* .hidden here means fade out, NOT remove — override the global display:none. */
#live-turn.hidden { display: block !important; opacity: 0; pointer-events: none; }
#live-turn.lt-mine { background: rgba(46, 125, 79, 0.92); }   /* your turn — go */
#live-turn.lt-wait { background: rgba(0, 0, 0, 0.55); }       /* watching opponent */
/* Mobile: scorecard now sits in the bottom-left corner, so lift the turn banner above it. */
body.is-mobile #live-turn { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-4) + 104px); }

/* ---- Transient toast (milestones, near-miss, daily, share) -------- */
#toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 18%);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  max-width: 80vw;
  text-align: center;
  color: var(--text);
  background: var(--glass-solid);
  border: var(--border-edge);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--t-body);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: blur(var(--blur-sm));
  backdrop-filter: blur(var(--blur-sm));
  pointer-events: none;
  opacity: 0;
  z-index: 50;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.hidden { display: none; }
/* milestone celebration: brass instead of emoji */
#toast.toast-gold {
  color: var(--brass-bright);
  border-color: rgba(207, 168, 94, 0.55);
  font-family: var(--font-display);
}
/* penalty: red-tinted — water / out of bounds */
#toast.toast-warn {
  color: #eda49e;
  border-color: rgba(204, 70, 63, 0.55);
}

/* ---- Shot-info group: chip strip nested inside the card -------- */
#stats {
  position: static;              /* was fixed top-right; now flows in the card */
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(207, 168, 94, 0.35);  /* brass divider */
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--text);
  font-family: var(--font);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 16px;
  row-gap: 4px;
  text-align: left;
  min-width: 0;
  pointer-events: none;
}
#stats.hidden { display: none; }
#stats .srow { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
#stats .slabel { color: var(--text-dim); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.5px; }
#stats .sval { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; font-size: var(--t-cap); line-height: 1.15; }
#stats .snote {
  flex-basis: 100%;
  order: 10;
  font-size: 10px;
  color: rgba(207, 168, 94, 0.9);
  text-align: left;
  margin: 0;
  padding: 0;
  border: none;
  line-height: 1.3;
}
#stats .snote:empty { display: none; }
#stats #st-lie-fx { color: var(--brass-400); }

/* ---- HUD button (top-right) ------------------------------- */
#hud-btn {
  position: fixed;
  right: var(--s-3);
  top: calc(env(safe-area-inset-top, 0px) + var(--s-3));
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-edge);
  border-radius: var(--r-md);
  background: var(--surface-hud);
  -webkit-backdrop-filter: blur(var(--blur-xs));
  backdrop-filter: blur(var(--blur-xs));
  color: var(--text);
  font-size: 18px;
  letter-spacing: -1px;
  cursor: pointer;
  z-index: 15;
  box-shadow: var(--shadow-1);
}
#hud-btn .ic { font-size: 22px; }
#hud-btn.hidden { display: none; }
#hud-btn.open { background: rgba(46, 125, 79, 0.4); border-color: rgba(99, 185, 139, 0.5); }

/* ---- Read-green button (bottom-left) ----------------------- */
/* 3D green inspect: shows when the ball is at rest with a green in play. */
#green-view-btn {
  position: fixed;
  left: var(--s-3);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-4) + 56px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-edge);
  border-radius: var(--r-md);
  background: var(--surface-hud);
  -webkit-backdrop-filter: blur(var(--blur-xs));
  backdrop-filter: blur(var(--blur-xs));
  color: var(--text);
  cursor: pointer;
  z-index: 15;
  box-shadow: var(--shadow-1);
}
#green-view-btn .ic { font-size: 22px; }
#green-view-btn.hidden { display: none; }

/* ---- Slightly-3D tilt toggle (above the read-green button) -- */
#tilt-view-btn {
  position: fixed;
  left: var(--s-3);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-4) + 112px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-edge);
  border-radius: var(--r-md);
  background: var(--surface-hud);
  -webkit-backdrop-filter: blur(var(--blur-xs));
  backdrop-filter: blur(var(--blur-xs));
  color: var(--text);
  cursor: pointer;
  z-index: 15;
  box-shadow: var(--shadow-1);
}
#tilt-view-btn .ic { font-size: 22px; }
#tilt-view-btn.hidden { display: none; }
#tilt-view-btn.active { background: rgba(46, 125, 79, 0.4); border-color: rgba(99, 185, 139, 0.5); }

/* Apple-ground camera tilt slider — replaces #tilt-view-btn there. Same left
   anchor as the button; vertical range shares the #attr-slider treatment
   (top = 3D lean, bottom = 2D overhead). */
#tilt-slider {
  position: fixed;
  left: var(--s-3);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-4) + 112px);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-1);
  width: 44px;
  background: var(--surface-hud);
  backdrop-filter: blur(var(--blur-xs));
  -webkit-backdrop-filter: blur(var(--blur-xs));
  border: var(--border-hair);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
#tilt-slider.hidden { display: none; }
#tilt-slider .cs-end {
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
#tilt-range {
  writing-mode: vertical-lr;      /* modern vertical range */
  direction: rtl;                 /* top = max (3D), bottom = 0 (2D) */
  -webkit-appearance: slider-vertical;  /* legacy WebKit fallback */
  width: 24px;
  height: 130px;
  accent-color: var(--brass);
}

/* Inspect view open: clear the HUD out of the overlay's way */
body.gv-open #hud-btn,
body.gv-open #hm-club-row,
body.gv-open #green-view-btn,
body.gv-open #tilt-view-btn,
body.gv-open #tilt-slider,
body.gv-open #shot-power,
body.gv-open #scorecard,
body.gv-open #hint { display: none; }

/* ---- Club selector (bottom-right) ------------------------- */
#hm-club-row {
  position: fixed;
  right: var(--s-3);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-4));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: var(--s-2);
  background: var(--surface-hud);
  -webkit-backdrop-filter: blur(var(--blur-xs));
  backdrop-filter: blur(var(--blur-xs));
  border: var(--border-edge);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  z-index: 15;
}
#hm-club-row.hidden { display: none; }
/* Rolling club wheel: a masked drum. The strip of clubs scrolls (translateY only)
   over a fixed accent "payline" band; edges fade like the curve of a reel. */
#club-wheel {
  position: relative;
  width: 112px;
  height: 148px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 27%, #000 73%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 27%, #000 73%, transparent);
}
#club-wheel:active { cursor: grabbing; }
#club-window {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
  background: var(--accent);
  border-radius: var(--r-sm);
}
#club-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
}
.cw-item {
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none; /* the wheel owns all input */
}
.cw-item b { font-family: var(--font-display); font-size: 18px; line-height: 1.05; }
.cw-item small { font-size: 11.5px; letter-spacing: 0.3px; }
.cw-item.cw-sel b { color: #fff; font-size: 21px; }
.cw-item.cw-sel small { color: var(--w-85); }
/* on the green the selector is locked to the putter — quiet it down */
#hm-club-row.putting #club-window { background: var(--surface-raised); }
#hm-club-row.putting #club-wheel { opacity: 0.8; cursor: default; }
#hm-club-row.putting .cw-item.cw-sel b { color: var(--text-muted); }

/* ---- HUD dropdown menu ------------------------------------- */
#hud-menu {
  position: fixed;
  right: var(--s-3);
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  background: var(--surface-panel);
  -webkit-backdrop-filter: blur(var(--blur-lg));
  backdrop-filter: blur(var(--blur-lg));
  border: var(--border-edge);
  border-radius: var(--r-md);
  padding: var(--s-2);
  z-index: 20;
  min-width: 200px;
  box-shadow: var(--shadow-2);
  animation: panelIn 0.16s var(--ease) both;
}
#hud-menu.hidden { display: none; }
.hs-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-cap);
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 0.8px;
  padding: var(--s-1) 0 var(--s-2);
  border-bottom: 1px solid var(--w-08);
  margin-bottom: var(--s-1);
}
.hm-sep { height: 1px; background: var(--w-12); margin: 6px 0; }
.hm-item {
  display: flex;
  align-items: center;
  gap: 0.65em;
  width: 100%;
  padding: 10px var(--s-3);
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font-size: var(--t-body);
  font-weight: var(--fw-med);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: background var(--dur-fast);
}
.hm-item .ic { font-size: 1.2em; color: var(--text-dim); }
.hm-item:active { background: var(--w-08); }
.hm-item.active { color: var(--accent-bright); }
.hm-item.active .ic { color: var(--accent-bright); }
#hm-course-items.hidden { display: none; }
.hm-item.hidden { display: none; }   /* e.g. Match board outside a live match */
/* HUD panel hidden by user preference (Settings > Display). !important so it
   wins over id-specificity show rules and the per-frame .hidden toggling. */
.hud-off { display: none !important; }
.hs-sub {
  font-size: var(--t-cap);
  color: var(--text-dim);
  letter-spacing: 0.8px;
  text-align: center;
  padding: 2px 0 4px;
}
#hud-menu {
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 96px);
  overflow-y: auto;
}
.hs-sens { padding: 2px var(--s-3) 6px; }
#sens-slider { flex: 1; accent-color: var(--accent); height: 24px; }
#sens-val { font-weight: var(--fw-black); font-size: 15px; min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Slider row (swing-sensitivity control) ---- */
.range-row { display: flex; align-items: center; gap: var(--s-3); font-size: 14px; }
.range-row label { font-weight: var(--fw-bold); letter-spacing: 0.3px; }
.range-row .unit { color: var(--text-dim); font-size: 12px; }

/* ---- Tournament HUD countdown (in scorecard) -------------- */
.trn-timer {
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
.trn-timer.hidden { display: none; }
.trn-timer.trn-timer-urgent { color: var(--status-under); }

/* ============================================================
   Desktop layout overrides (body.is-desktop)
   Base styles are mobile-first; desktop has more room, so the
   corner panels scale up. Driven by IS_DESKTOP / body class in
   game.js (matchMedia). Add per-device HUD tweaks here.
   ============================================================ */
body.is-desktop #scorecard { padding: 12px 18px; }
body.is-desktop #scorecard b { font-size: 19px; }
body.is-desktop #scorecard #course { font-size: 13px; }
body.is-desktop #scorecard .sc-hole .line,
body.is-desktop #scorecard .sc-wind { font-size: var(--t-body); }

body.is-desktop #stats { column-gap: 20px; }
body.is-desktop #stats .sval { font-size: var(--t-body); }

body.is-desktop #hint { max-width: none; font-size: 13px; }

body.is-desktop #hud-menu { min-width: 224px; }
body.is-desktop .hm-item { font-size: 15px; }

/* ============================================================
   Movable HUD (mobile) — drag panels out of the way. Driven by
   body.hud-edit (toggled from the HUD menu). Positions persist in
   localStorage; see the HUD-move block in game.js.
   ============================================================ */
.hud-mobile-only { display: none; }          /* the Move/Reset menu items */
body.is-mobile .hud-mobile-only { display: flex; }

/* In edit mode the otherwise pass-through panels become grabbable. */
body.hud-edit #scorecard,
body.hud-edit #hint,
body.hud-edit #hm-club-row,
body.hud-edit #hud-btn {
  pointer-events: auto;
  cursor: grab;
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
  opacity: 0.96;
  touch-action: none;          /* let us own the drag, no scroll hijack */
  transition: none;
}
body.hud-edit .hud-dragging { cursor: grabbing; opacity: 0.85; }

#hud-edit-bar {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  white-space: nowrap;
  padding: 10px var(--s-4);
  background: var(--glass-solid);
  border: var(--border-edge);
  border-radius: var(--r-pill);
  color: var(--text);
  font-size: 13px;
  font-weight: var(--fw-med);
  box-shadow: var(--shadow-2);
  z-index: 60;
}
#hud-edit-bar.hidden { display: none; }
#hud-edit-done {
  border: none;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: 13px;
  padding: 6px var(--s-4);
  cursor: pointer;
}
.hud-zoom {
  width: 28px;
  height: 28px;
  margin: 0 1px;
  border: var(--border-edge);
  border-radius: var(--r-sm);
  background: var(--w-14);
  color: var(--text);
  font-size: 17px;
  line-height: 1;
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.hud-zoom:active { background: rgba(99, 185, 139, 0.3); }

/* ============================================================
   Mobile bars (body.is-mobile)
   HUD lives in a slim TOP scorecard bar + a BOTTOM stat strip
   (club selector stays bottom-right), leaving the full screen
   width for the hole. The camera reserves the same top/bottom
   bands (HUD_RESERVE.mobile in game.js) and frames the hole
   into the clear middle. (Canvas wind pill stays top-center.)
   ============================================================ */
body.is-mobile #hud-menu,
body.is-mobile #hm-club-row,
body.is-mobile #hud-edit-bar {
  max-width: min(260px, 70vw);
  min-width: 0;
  box-sizing: border-box;
}
body.is-mobile #hud-menu .hm-item { white-space: normal; }
body.is-mobile #club-wheel { width: 96px; }

/* ---- Top HUD card spans as a slim top bar on mobile -------- */
body.is-mobile #scorecard {
  /* full-width bar pinned to the top of the screen */
  top: calc(env(safe-area-inset-top, 0px) + var(--s-2));
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  /* keep the right-aligned Score clear of the top-right HUD button */
  padding: 8px 60px 8px 12px;
}
body.is-mobile #scorecard .sc-hole { column-gap: 12px; row-gap: 1px; }
body.is-mobile #scorecard b { font-size: 14px; }
body.is-mobile #scorecard #course { display: none; } /* name lives in the hole picker */
body.is-mobile #scorecard .sc-hole .line,
body.is-mobile #scorecard .sc-wind { font-size: 12px; }
body.is-mobile #scorecard .sc-right { column-gap: 12px; }

/* left-column view buttons, stacked in the bottom-left corner (scorecard now up top) */
body.is-mobile #green-view-btn { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-4)); }
body.is-mobile #tilt-view-btn  { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-4) + 52px); }
body.is-mobile #tilt-slider    { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-4) + 52px); }

body.is-mobile #stats { column-gap: 12px; }
body.is-mobile #stats .slabel { font-size: 9px; letter-spacing: 0.6px; }
body.is-mobile #stats .sval { font-size: 13px; }

/* ---- Hint + chip cue: centered pills above the stat strip -- */
body.is-mobile #hint {
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s-4) + 72px); /* above the corner controls */
  max-width: 86vw;
}
/* ball speed is a desktop nerd stat — keep the mobile strip tight */
body.is-mobile #st-speed-row { display: none; }

/* #hud-edit-bar: compact vertical pill in the right column */
body.is-mobile #hud-edit-bar {
  left: auto;
  right: var(--s-3);
  transform: none;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  white-space: normal;
  gap: var(--s-2);
}

/* =====================================================================
   Shot power panel — right-gutter control, every non-putter club. A power
   slider (0-max) that's a pre-swing preview AND a real MAX ceiling on the
   swipe/flick — a hard flick gets capped down to it, a soft flick is never
   boosted up — coupled with a Low/Stock/High spin selector (chipSpinBias
   chip range, flightSpinBias full shot). Shown/hidden by updateStats()
   (ball at rest, off the green, not putter) AND the "Power preview" admin
   toggle (powerPreviewEnabled).
   ===================================================================== */
#shot-power {
  position: fixed;
  right: calc(var(--sar) + var(--s-2));
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-1);
  width: 60px;
  background: var(--surface-hud);
  backdrop-filter: blur(var(--blur-xs));
  -webkit-backdrop-filter: blur(var(--blur-xs));
  border: var(--border-hair);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
#shot-power.hidden { display: none; }
#shot-power .cs-end {
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
#attr-slider {
  writing-mode: vertical-lr;      /* modern vertical range */
  direction: rtl;                 /* top = max/positive, bottom = 0/negative */
  -webkit-appearance: slider-vertical;  /* legacy WebKit fallback */
  width: 24px;
  height: 150px;
  accent-color: var(--brass);
}
#shot-power .cs-label {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
#shot-power .cs-label b {
  color: var(--brass-bright);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold, 700);
}
#shot-power .cs-seg-label {
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.7;
  text-align: center;
  margin-top: 2px;
}
#attr-seg {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}
.attr-btn {
  border: var(--border-hair);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-dim);
  font-size: 9px;
  letter-spacing: 0.02em;
  padding: 3px 2px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.attr-btn:active { transform: scale(0.96); }
.attr-btn.active {
  background: var(--brass-soft);
  color: var(--brass-bright);
  border-color: var(--brass);
  font-weight: var(--fw-bold, 700);
}