/* ─────────────────────────────────────────────────────────────
   TrenchRush "Sporty Arcade" — shared component kit.
   Rounded soft-glass navy panels · cyan brand / yellow CTA /
   gold reward / cyan speed accent. Calm chrome — no scanlines, no metal
   brackets, no neon outlines. Restyled in place; selectors unchanged.
   ───────────────────────────────────────────────────────────── */

.panel {
  position: relative;
  width: min(480px, 92vw);
  padding: clamp(18px, 3.4vh, 30px) clamp(20px, 3vw, 34px) clamp(20px, 3.6vh, 32px);
  border-radius: 20px;
  background:
    radial-gradient(130% 100% at 50% -10%, rgba(0, 229, 255, .1), transparent 60%),
    linear-gradient(168deg, rgba(14, 27, 51, .62) 0%, rgba(10, 20, 40, .58) 52%, rgba(5, 13, 31, .6) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .1);
}
/* single subtle top-highlight — replaces scanline + cyan frame */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 22%);
  pointer-events: none;
}

.panel h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: center;
  font-size: clamp(24px, 3.2vw, 32px);
  margin-bottom: 4px;
  color: var(--cream);
  text-shadow: 0 2px 6px rgba(3, 8, 20, .55);
}
.panel h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 9px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 35%, var(--brass) 65%, transparent);
  opacity: .8;
}
.panel .hint {
  text-align: center;
  font-size: clamp(12px, 1.5vw, 14.5px);
  font-weight: 600;
  color: var(--bark);
  margin-bottom: clamp(10px, 2vh, 18px);
}

.opt { margin: clamp(10px, 2vh, 16px) 0 0; }
.opt .lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-hi);
  margin: 0 2px 7px;
}
.opt .lbl::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass);
  opacity: .85;
}

/* ── Segmented control — soft rounded track ──────────────── */
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(6, 14, 30, .55);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}
.seg button {
  position: relative;
  flex: 1 1 0;
  min-width: 52px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(13px, 1.6vw, 15px);
  color: var(--bark);
  background: rgba(27, 47, 80, .4);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
  transition: transform var(--engine-dur) var(--engine-ease),
    color var(--engine-dur) var(--engine-ease),
    background var(--engine-dur) var(--engine-ease);
}
.seg button:hover,
.seg button:active { color: var(--cream); background: rgba(36, 60, 100, .5); }
.seg button.on {
  color: #04121E;
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 60%, var(--brass-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 2px 8px rgba(0, 229, 255, .22);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}

/* ── Buttons — rounded soft pills · sporty brighten + crisp press ── */
.btn {
  position: relative;
  overflow: hidden;
  padding: clamp(11px, 1.8vh, 14px) clamp(22px, 3vw, 32px);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 20px);
  letter-spacing: .02em;
  color: #0A1320;
  /* default = YELLOW primary CTA (the logo pop) — dark ink on bright yellow */
  background: linear-gradient(180deg, var(--gold-hot) 0%, var(--gold) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 6px 16px rgba(0, 0, 0, .4);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform var(--engine-dur) var(--engine-ease),
    filter var(--engine-dur) var(--engine-ease),
    box-shadow var(--engine-dur) var(--engine-ease);
}
/* speed cue: a faint diagonal light sheen that sweeps across on hover */
.btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: translateX(-180%) skewX(-18deg);
  pointer-events: none;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn:hover::before { transition: transform .26s var(--engine-ease); transform: translateX(420%) skewX(-18deg); }
.btn:active { transform: scale(.97); filter: brightness(1.14); }
.btn:disabled { cursor: not-allowed; filter: saturate(.5) brightness(.8); }
@media (prefers-reduced-motion: reduce) {
  .btn::before { display: none; }
  .btn:active { transform: none; }
}

/* .btn.teal → CYAN confirm (system confirms / data) */
.btn.teal {
  color: #04121E;
  background: linear-gradient(180deg, var(--brass) 0%, var(--brass-lo) 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}

/* .btn.coral → CYAN speed/boost (RUSH) — cyan secondary CTA.
   (token --coral now remaps to cyan; selector kept for existing markup) */
.btn.coral {
  color: #04121E;
  background: linear-gradient(180deg, var(--coral-hi) 0%, var(--coral) 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
}

/* .btn.danger → RUBY (cancel / leave / delete) */
.btn.danger {
  color: #2A0712;
  background: linear-gradient(180deg, #FF8FB2 0%, var(--gem-ruby) 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}

/* .btn.ghost → transparent + 1px light edge */
.btn.ghost {
  color: var(--cream);
  font-weight: 600;
  background: rgba(27, 47, 80, .35);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}
.btn.ghost:hover {
  filter: none;
  background: rgba(40, 64, 104, .45);
  border-color: rgba(255, 255, 255, .22);
}
.btn.sm { padding: 9px 16px; font-size: 15px; border-radius: 11px; }

/* ── Soft input — dark rounded field, cyan focus ring ────── */
.carved-input {
  width: 100%;
  padding: 12px 16px;
  margin: 6px 0 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  outline: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 21px);
  text-align: center;
  color: var(--cream);
  caret-color: var(--brass);
  background: rgba(6, 14, 30, .55);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4);
  transition: border-color var(--engine-dur) var(--engine-ease),
    box-shadow var(--engine-dur) var(--engine-ease);
}
.carved-input::placeholder { color: var(--bark); opacity: .5; }
.carved-input:focus {
  border-color: var(--brass);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .4),
    0 0 0 3px rgba(0, 229, 255, .35);
}

/* ── Currency pill / chip — mono numbers, JS adds .pop ───── */
.curr-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(13px, 1.6vw, 16px);
  color: var(--cream);
  background: rgba(10, 20, 40, .55);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform var(--engine-dur) var(--engine-ease);
}
.curr-pill::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFF3B0 10%, var(--gem-gold) 55%, var(--marigold-dark));
  box-shadow: 0 0 6px var(--marigold-glow);
}
.curr-pill.pop { animation: pillPop .42s var(--spring); }
@keyframes pillPop { 40% { transform: scale(1.18); } }
/* .sol → cyan SOL gem variant */
.curr-pill.sol::before {
  background: radial-gradient(circle at 36% 30%, #fff 8%, var(--brass) 55%, var(--brass-lo));
  box-shadow: 0 0 6px rgba(0, 229, 255, .45);
}

/* ── Featured / NEW tag — cyan (the RUSH speed accent) ───── */
.badge-new {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #04121E;
  background: linear-gradient(180deg, var(--coral-hi), var(--coral));
  box-shadow: 0 2px 6px rgba(var(--glow-coral), .35);
}

/* ── Currency bar — soft world-HUD strip ─────────────────── */
.currency-bar {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 14px;
  border-radius: 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
  background: rgba(10, 20, 40, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 6px 16px rgba(0, 0, 0, .4);
}
.currency-bar .cb-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(14px, 1.7vw, 17px);
}
.currency-bar .cb-item + .cb-item { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .1); }
.currency-bar .cb-coin,
.currency-bar .cb-gem { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.currency-bar .cb-coin {
  background: radial-gradient(circle at 36% 30%, #FFF3B0 10%, var(--gem-gold) 55%, var(--marigold-dark));
  box-shadow: 0 0 7px var(--marigold-glow), inset 0 1px 2px rgba(255, 255, 255, .6);
}
.currency-bar .cb-gem {
  background: radial-gradient(circle at 36% 30%, #fff 8%, var(--brass) 55%, var(--brass-lo));
  box-shadow: 0 0 7px rgba(0, 229, 255, .5), inset 0 1px 2px rgba(255, 255, 255, .6);
}

/* ── Short-landscape safety net (global) ──────────────────────
   On short landscape phones (<=430px tall) panel content can push
   the primary CTA below the fold. Bound every .panel to the viewport
   and let it scroll so the action stays reachable, plus trim vertical
   rhythm so most panels fit without scrolling. Per-screen agents
   tighten further; desktop/tablet untouched. */
@media (orientation: landscape) and (max-height: 430px) {
  .panel {
    max-height: calc(100dvh - 10px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 18px 14px;
  }
  .panel h2 { font-size: clamp(18px, 2.6vw, 24px); }
  .panel h2::after { margin-top: 6px; }
  .panel .hint { margin-bottom: 8px; }
  /* pin the action row to the panel bottom so the CTA stays visible while options scroll */
  .panel .row, .panel .lobby-actions {
    position: sticky; bottom: 0; z-index: 2;
    margin-top: 12px; padding-top: 10px;
    background: linear-gradient(180deg, transparent, var(--deep-surface) 42%);
  }
}