/* ============================================
   Blood Bowl Companion — style.css

   Layer order:
   1. BB palette tokens (:root)
   2. App shell
   3. Player cards (roster rows)
   4. Trading card modals (position:fixed)
   5. Skill tooltip
   6. Responsive
   ============================================ */

/* ─────────────────────────────────────────────
   0. BASE RESET
   ───────────────────────────────────────────── */

/* Ensure [hidden] always wins over any display override in author CSS */
[hidden] { display: none !important; }

/* ─────────────────────────────────────────────
   0. CUSTOM FONTS
   ───────────────────────────────────────────── */
@font-face {
  font-family: 'Nuffle';
  src: url('Nuffle.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nuffle Italic';
  src: url('Nuffle Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nuffle Dice';
  src: url('Nuffle Dice.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────────────────────
   1. BB PALETTE TOKENS
   ───────────────────────────────────────────── */
:root {
  --bb-red:        #C8102E;
  --bb-red-dark:   #8B0A1E;
  --bb-red-deeper: #3D0008;
  --bb-navy:       #003087;
  --bb-navy-dark:  #001A4A;
  --bb-navy-mid:   #1A3A6A;
  --bb-cream:      #F5F0E8;
  --bb-cream-dark: #E8E0D0;
  --bb-gold:       #D4AF37;
  --bb-gold-dark:  #9A7D0A;
  --bb-ink:        #0D0D0D;
  --bb-stone:      #2A2525;
}

/* ─────────────────────────────────────────────
   2. APP SHELL
   Glass-blue game UI aesthetic.
   ───────────────────────────────────────────── */
.bb-app {
  min-height: calc(100vh - 52px - 60px);
  background:
    radial-gradient(ellipse at 30% 0%,   rgba(20, 50, 140, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%,  rgba(10, 30, 100, 0.3)  0%, transparent 55%),
    linear-gradient(160deg, #040A18 0%, #081428 60%, #06101E 100%);
  display: flex;
  flex-direction: column;
}

/* .team-select is still used by the game-bar selects */
.team-select {
  font-family: 'JetBrains Mono', monospace;
}

/* Roster grid lives inside .accordion-body */
.roster-grid {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.25rem 0;
}

.empty-state {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.25);
  padding: 2rem 1rem;
  text-align: center;
}

/* ─────────────────────────────────────────────
   3. PLAYER CARDS  (single-line roster rows)
   Border / shadow colours use --tc-* custom
   properties set on .roster-accordion by JS.
   ───────────────────────────────────────────── */

/* Team-colour token defaults — JS overrides per .roster-accordion */
.roster-accordion {
  --tc-bg:           #2a2a2a;
  --tc-primary:      #4a4a4a;
  --tc-primary-dark: #252525;
  --tc-accent:       #353535;
  --tc-gold:         #999;
  --tc-gold-dark:    #666;
  --tc-header-bg:    #1a1a1a;
}

.player-card {
  background: #F2F2F2;
  border: 3px solid var(--tc-primary);
  border-radius: 4px;
  width: 100%;
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
  user-select: none;
  outline: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.4rem;
  padding: 0.28rem 0.75rem;
  min-height: 36px;
  box-shadow:
    3px 3px 0 0 var(--tc-primary-dark),
    6px 6px 0 0 rgba(0, 0, 0, 0.22),
    inset 1px 1px 0 rgba(255, 255, 255, 0.7),
    inset -1px -1px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.14s ease, transform 0.14s ease;
}

.player-card:hover,
.player-card:focus-visible {
  box-shadow:
    5px 5px 0 0 var(--tc-primary-dark),
    10px 10px 0 0 rgba(0, 0, 0, 0.18),
    inset 1px 1px 0 rgba(255, 255, 255, 0.7),
    inset -1px -1px 0 rgba(0, 0, 0, 0.1);
  transform: translate(-2px, -2px);
}

.player-card:focus-visible { border-color: #00e5a0; }

.player-card.star-player {
  border-color: var(--tc-gold);
  box-shadow:
    3px 3px 0 0 var(--tc-gold-dark),
    6px 6px 0 0 rgba(0, 0, 0, 0.22),
    inset 1px 1px 0 rgba(255, 255, 255, 0.7),
    inset -1px -1px 0 rgba(0, 0, 0, 0.1),
    0 0 14px rgba(212, 175, 55, 0.35);
}

.player-card.star-player:hover,
.player-card.star-player:focus-visible {
  box-shadow:
    5px 5px 0 0 var(--tc-gold-dark),
    10px 10px 0 0 rgba(0, 0, 0, 0.18),
    inset 1px 1px 0 rgba(255, 255, 255, 0.7),
    inset -1px -1px 0 rgba(0, 0, 0, 0.1),
    0 0 22px rgba(212, 175, 55, 0.55);
  transform: translate(-2px, -2px);
}

.card-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--tc-primary);
  flex-shrink: 0;
  white-space: nowrap;
}

.player-card.star-player .card-num { color: var(--tc-gold-dark); }

.player-name {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.85rem;
  color: #0D0D0D;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd {
  color: #ccc;
  font-size: 0.8rem;
  flex-shrink: 0;
  user-select: none;
}

.player-pos {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 0.85rem;
  color: #666;
  flex-shrink: 0;
  white-space: nowrap;
}

.star-badge {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.58rem;
  color: var(--tc-gold-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--tc-gold);
  background: rgba(212, 175, 55, 0.12);
  padding: 1px 4px;
  border-radius: 2px;
  flex-shrink: 0;
  white-space: nowrap;
}

.card-stats {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 0.82rem;
  color: #555;
  flex-shrink: 0;
  white-space: nowrap;
}

.ss {
  font-weight: 600;
  font-size: 0.72rem;
  color: #999;
}

.sd { color: #ccc; user-select: none; }

.card-skills {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 0.82rem;
  color: #555;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--tc-gold-dark);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   4. TRADING CARD MODALS
   Now position:fixed — cover full viewport.
   Both modals are identical in placement.
   ───────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.68);
  z-index: 500;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.modal-overlay[hidden] { display: none; }
.modal-overlay.active  { opacity: 1; }

.trading-card {
  background: #F2F2F2;
  border: 4px solid var(--tc-primary);
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 5 / 7;
  /* Container queries: internals sized in cqw so the same markup
     renders identically at ANY card width (modal, wizard, teams page).
     cqw values below mirror the original rem sizes at the 420px design
     width (1rem = 16px = 3.81cqw). */
  container-type: inline-size;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.6);
  animation: cardIn 0.2s ease both;
}

.trading-card.star-card {
  border-color: var(--tc-gold);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(212, 175, 55, 0.25),
    inset 1px 1px 0 rgba(255, 255, 255, 0.6);
}

/* ══════════════════════════════════════════════════════════
   HOLOGRAPHIC STAR CARDS
   Foil sheen + cursor-tracking glare + 3D tilt + shimmer glow.
   Driven by --mx/--my (glare position) and --rx/--ry (tilt),
   set in script.js applyHolo(). Auto-shimmers when idle.
   ══════════════════════════════════════════════════════════ */
@keyframes holoFoil {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes holoGlow {
  0%, 100% { box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(212, 175, 55, 0.35),
    inset 0 0 0 1px rgba(255, 240, 180, 0.45); }
  50%      { box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 46px rgba(255, 216, 120, 0.62),
    inset 0 0 0 1px rgba(255, 255, 225, 0.85); }
}

/* ── Big trading card ── */
.trading-card.star-card.holo {
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  animation: holoGlow 3.4s ease-in-out infinite;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.2s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.trading-card.star-card.holo.holo-active { transition: transform 0.06s linear; }

/* Foil sheen — rainbow band that drifts; intensifies on interaction */
.trading-card.star-card.holo::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255, 0, 128, 0.40) 0%,  rgba(255, 175, 0, 0.34) 20%,
    rgba(70, 255, 170, 0.34) 40%, rgba(0, 170, 255, 0.34) 60%,
    rgba(180, 80, 255, 0.40) 80%, rgba(255, 0, 128, 0.40) 100%);
  background-size: 200% 200%;
  mix-blend-mode: color-dodge;
  opacity: 0.32;
  animation: holoFoil 7s linear infinite;
}
.trading-card.star-card.holo.holo-active::after { opacity: 0.5; }

/* Glare — bright spot tracking the cursor */
.trading-card.star-card.holo::before {
  content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 45%);
  mix-blend-mode: screen;
  opacity: 0; transition: opacity 0.2s ease;
}
.trading-card.star-card.holo.holo-active::before { opacity: 0.85; }

/* ── Small roster row (lighter holo) ── */
.player-card.star-player.holo {
  --mx: 50%; --my: 50%;
  overflow: hidden;
}
.player-card.star-player.holo::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg,
    rgba(255, 0, 128, 0.30), rgba(255, 175, 0, 0.26), rgba(70, 255, 170, 0.26),
    rgba(0, 170, 255, 0.26), rgba(180, 80, 255, 0.30));
  background-size: 200% 100%;
  mix-blend-mode: overlay;
  opacity: 0.30;
  animation: holoFoil 7s linear infinite;
}
.player-card.star-player.holo::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%);
  mix-blend-mode: screen;
  opacity: 0; transition: opacity 0.15s ease;
}
.player-card.star-player.holo:hover::before,
.player-card.star-player.holo.holo-active::before { opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  .trading-card.star-card.holo,
  .trading-card.star-card.holo::after,
  .player-card.star-player.holo::after { animation: none !important; }
  .trading-card.star-card.holo { transform: none !important; }
}


@keyframes cardIn {
  from { transform: scale(0.93) translateY(10px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* ── Image overlay: name / number / position ── */
.modal-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.25rem 0.6rem;
}

/* 50% opaque background via pseudo, so text stays 100% opaque */
.modal-card-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tc-accent);
  opacity: 0.5;
  z-index: -1;
}

.modal-card-overlay.star-overlay::before {
  background: linear-gradient(110deg,
    var(--tc-gold-dark) 0%,
    var(--tc-gold)      50%,
    var(--tc-gold-dark) 100%);
  opacity: 0.5;
}

/* Jersey number circle */
.modal-jersey-circle {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-style: italic;
  font-size: 2rem;
  color: #000;
  line-height: 1;
}

/* Name + position stack */
.modal-overlay-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.modal-name {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-style: italic;
  font-size: 1.45rem;
  color: #fff;
  line-height: 1.1;
  margin: 0;
  -webkit-text-stroke: 0.75px #000;
  paint-order: stroke fill;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-card-overlay.star-overlay .modal-name {
  color: #1a0005;
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.4);
}

.modal-position {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
  -webkit-text-stroke: 0.5px #000;
  paint-order: stroke fill;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-card-overlay.star-overlay .modal-position { color: rgba(10, 5, 0, 0.75); }

.modal-qty {
  font-size: 0.65rem;
  opacity: 0.7;
  letter-spacing: 0.05em;
}

.modal-image-area {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.modal-image-area::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 18px,
    rgba(0, 0, 0, 0.06) 18px, rgba(0, 0, 0, 0.06) 36px
  );
  pointer-events: none;
  z-index: 2;
}

.modal-image-area img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.img-placeholder-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 5.5rem;
  color: rgba(255, 255, 255, 0.18);
  z-index: 0;
  letter-spacing: -0.03em;
  pointer-events: none;
}

.modal-stats {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #D8D8D8;
}

.modal-stats-row {
  display: flex;
  border: 1px solid #D8D8D8;
  border-radius: 2px;
  overflow: hidden;
}

.modal-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.45rem 0.2rem;
  border-right: 1px solid #D8D8D8;
}

.modal-stat:last-child { border-right: none; }

.ms-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 0.58rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1;
}

.ms-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 1.05rem;
  color: #0D0D0D;
  line-height: 1.3;
}

.modal-skills {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #D8D8D8;
  max-height: 9rem;
  overflow-y: auto;
  min-height: 4.5rem;
}

.skills-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.58rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.35rem;
}

.skills-text {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 0.88rem;
  color: #0D0D0D;
  line-height: 1.7;
  margin: 0;
}

.skill-link {
  font-family: inherit;
  font-weight: 600;
  font-size: inherit;
  color: var(--tc-primary);
  background: none;
  border: none;
  border-bottom: 1px dotted var(--tc-primary);
  padding: 0;
  cursor: pointer;
  line-height: inherit;
  transition: color 0.12s, border-color 0.12s;
}

.skill-link:hover,
.skill-link:focus-visible {
  color: var(--tc-accent);
  border-bottom-style: solid;
  outline: none;
}

.skill-sep { color: #888; }
.no-skills { color: #aaa; font-style: italic; }

.modal-fact {
  padding: 0.9rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-style: italic;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.7;
  background: #f7f3f3;
  border-top: 1px solid #D8D8D8;
}

/* ── Container-query scaling — same markup at any card width ──
   @container rules win over the rem bases above whenever the card
   is sized; values reproduce the 420px design exactly (px / 4.2). */
@container (min-width: 1px) {
  .modal-card-overlay     { gap: 2.48cqw; padding: 0.95cqw 2.29cqw; }
  .modal-jersey-circle    { width: 13.33cqw; height: 13.33cqw; font-size: 7.62cqw; border-width: 0.48cqw; }
  .modal-name             { font-size: 5.52cqw; }
  .modal-position         { font-size: 2.67cqw; }
  .modal-qty              { font-size: 2.48cqw; }
  .img-placeholder-num    { font-size: 20.95cqw; }
  .modal-stats            { padding: 2.67cqw 3.81cqw; }
  .modal-stat             { padding: 1.71cqw 0.76cqw; }
  .ms-label               { font-size: 2.21cqw; }
  .ms-value               { font-size: 4cqw; }
  .ms-value-gp            { font-size: 3.12cqw; }
  .modal-skills           { padding: 3.24cqw 3.81cqw; max-height: 34.29cqw; min-height: 17.14cqw; }
  .skills-label           { font-size: 2.21cqw; margin-bottom: 1.33cqw; }
  .skills-text            { font-size: 3.35cqw; }
  .modal-fact             { padding: 3.43cqw 3.81cqw; font-size: 3.24cqw; }

  /* Status / effect banner pinned to the bottom of the card art */
  .tc-status-banner {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: var(--z-card-overlay, 10);
    display: flex; flex-direction: column; gap: 0.5cqw;
    padding: 1.4cqw 2.29cqw;
    background: rgba(10, 10, 14, 0.78);
  }
  .tc-status-row { display: flex; align-items: baseline; gap: 1.9cqw; min-width: 0; }
  .tc-status-label {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800; font-style: italic;
    font-size: 3.1cqw; color: #ffd87a;
    text-transform: uppercase; letter-spacing: 0.06em;
    white-space: nowrap;
  }
  .tc-status-row.status-cas .tc-status-label,
  .tc-status-row.status-dead .tc-status-label,
  .tc-status-row.status-sent-off .tc-status-label,
  .tc-status-row.effect-debuff .tc-status-label { color: #ff8fa0; }
  .tc-status-row.effect-buff .tc-status-label   { color: #81c784; }
  .tc-status-msg {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.5cqw; color: rgba(235, 240, 255, 0.85);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* Out-of-game players: desaturate the card art (not the status banner) */
.trading-card.tc-unavailable .modal-img { filter: grayscale(0.85) brightness(0.75); }

/* ── Start Game mode cards — reuse the trading-card look ── */
.mode-card { cursor: default; }

/* Long mode titles (e.g. "Consummate Professional") need to wrap */
.mode-card .modal-name {
  white-space: normal;
  font-size:   1.1rem;
}

.mode-card-body {
  background: #F2F2F2;
  padding:    0.85rem 1rem 1rem;
}

.mode-card-flavor {
  font-family: 'JetBrains Mono', monospace;
  font-style:  italic;
  font-size:   0.82rem;
  line-height: 1.6;
  color:       #444;
  margin:      0;
}

/* ─────────────────────────────────────────────
   5. SKILL CARDS  — shared across all pages/contexts
   ───────────────────────────────────────────── */

.sk-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 3px solid var(--card-color, rgba(255,255,255,0.2));
  border-radius: 8px;
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  cursor: default;
}
.sk-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4),
              0 0 0 1px var(--card-color, rgba(255,255,255,0.15));
  background: rgba(255,255,255,0.06);
}

.sk-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.sk-card-name {
  font-family: 'Nuffle', serif;
  font-size: 1.15rem;
  color: #fff;
  line-height: 1.2;
  flex: 1;
  letter-spacing: 0.03em;
  text-align: left;
}

.sk-card-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--card-color, #fff) 20%, transparent);
  color: color-mix(in srgb, var(--card-color, #fff) 90%, #fff);
  border: 1px solid color-mix(in srgb, var(--card-color, #fff) 40%, transparent);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.sk-card-mandatory {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--bb-gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}

.sk-card-desc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
}

.sk-card-desc mark,
.sk-card-name mark {
  background: rgba(212,175,55,0.3);
  color: #fff;
  border-radius: 2px;
  padding: 0 1px;
}

/* Active/triggered state — add .sk-card--active to trigger a glow in the card's category color */
@keyframes sk-glow {
  0%, 100% { box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 8px 0 var(--card-color); }
  50%       { box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 20px 5px var(--card-color); }
}
.sk-card--active {
  outline: 2px solid var(--card-color, rgba(255,255,255,0.3));
  outline-offset: 1px;
  animation: sk-glow 1.4s ease-in-out infinite;
}

/* Compact grid of sk-cards — used in trading cards (name + badge only, no description) */
.sk-card-grid-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.sk-card-grid-compact .sk-card {
  padding: 0.35rem 0.55rem;
  gap: 0.2rem;
  flex: 0 0 auto;
}
.sk-card-grid-compact .sk-card:hover { transform: none; }
.sk-card-grid-compact .sk-card-name {
  font-size: 0.8rem;
  color: #0D0D0D;
  background: none;
  border: none;
  border-bottom: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  line-height: 1.2;
}
.sk-card-grid-compact .sk-card-name:hover { color: var(--tc-primary, #062E94); }
.sk-card-grid-compact .sk-card-badge { font-size: 0.52rem; }

/* ─────────────────────────────────────────────
   6. SKILL TOOLTIP
   Fixed overlay, positioned by JS above/below
   the triggering .skill-link element.
   ───────────────────────────────────────────── */
.skill-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.skill-overlay[hidden] { display: none; }

.skill-card {
  position: absolute;
  pointer-events: auto;
  background: #06101E;   /* skills-page backdrop so the translucent sk-card reads correctly */
  border-radius: 8px;
  width: 300px;
  overflow: visible;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.48);
  animation: skillPopIn 0.14s ease both;
}

/* In the popup the card shouldn't lift away from its arrow on hover */
.skill-card .sk-card:hover { transform: none; }

@keyframes skillPopIn {
  from { opacity: 0; transform: translateY(5px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.skill-card::before,
.skill-card::after {
  content: '';
  position: absolute;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  pointer-events: none;
}

.skill-card::before {
  bottom: -12px;
  border: 12px solid transparent;
  border-top: 12px solid #243040;
  border-bottom: none;
}

.skill-card::after {
  bottom: -8px;
  border: 8px solid transparent;
  border-top: 8px solid #101a27;
  border-bottom: none;
}

.skill-card.arrow-up::before {
  bottom: auto;
  top: -12px;
  border-top: none;
  border-bottom: 12px solid #243040;
}

.skill-card.arrow-up::after {
  bottom: auto;
  top: -8px;
  border-top: none;
  border-bottom: 8px solid #101a27;
}

/* Injury result colour classes used by panels.js */
.result-ok  { color: var(--bb-gold,  #D4AF37) !important; }
.result-ko  { color: #FF8C00         !important; }
.result-kas { color: #FF5500         !important; }  /* Stunty Badly Hurt — auto-casualty, no roll */
.result-cas { color: var(--bb-red,   #C8102E) !important; }

/* ─────────────────────────────────────────────
   PLAYER STATUS BADGES
   Applied by state.js to .player-card elements
   ───────────────────────────────────────────── */

.player-status-badge {
  font-family:    'JetBrains Mono', monospace;
  font-weight:    700;
  font-size:      0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding:        1px 5px;
  border-radius:  3px;
  border:         1px solid currentColor;
  flex-shrink:    0;
  white-space:    nowrap;
  pointer-events: none;
}

.status-prone    { color: #AACCFF; background: rgba(100, 160, 255, 0.12); }
.status-stunned  { color: #FFCC44; background: rgba(255, 200, 50, 0.12);  }
.status-ko       { color: #FF8C00; background: rgba(255, 140, 0, 0.12);   }
.status-mng      { color: #FF6600; background: rgba(255, 100, 0, 0.12);   }
.status-cas      { color: var(--bb-red, #C8102E); background: rgba(200, 16, 46, 0.12); }
.status-dead     { color: #888;    background: rgba(80, 80, 80, 0.18);    }
.status-sent-off { color: #FFAACC; background: rgba(255, 80, 130, 0.12);  }
.status-temp     { color: #BBAAFF; background: rgba(160, 120, 255, 0.12); }

/* Dim out-of-game players */
.player-unavailable {
  opacity: 0.42;
  filter:  grayscale(0.6);
}

/* Player has used their action this turn (cleared on End Turn) */
.status-acted { color: #9AA8C0; background: rgba(120, 130, 150, 0.15); }
/* Blitz action — gold, to stand out from a plain "Acted" tag */
.status-blitzed { color: #E8C24A; background: rgba(212, 175, 55, 0.16); border-color: rgba(212, 175, 55, 0.5); }
.player-card.player-acted:not(.player-unavailable) {
  opacity: 0.6;
  filter:  saturate(0.5);
}

/* Subtle highlight for prone/stunned (legal foul targets) */
.player-prone  .player-name { text-decoration: underline dotted rgba(100, 160, 255, 0.5); }
.player-stunned .player-name { text-decoration: underline dotted rgba(255, 200, 50, 0.5); }

/* ── Temporary effect badges (buffs / debuffs) — parallel to status badge ── */
.player-effect-badge {
  font-family:    'JetBrains Mono', monospace;
  font-weight:    700;
  font-size:      0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding:        1px 5px;
  border-radius:  3px;
  border:         1px solid currentColor;
  flex-shrink:    0;
  white-space:    nowrap;
  pointer-events: none;
}
.effect-buff   { color: #7CFFB0; background: rgba(60, 255, 140, 0.12); }
.effect-debuff { color: #FF9F7C; background: rgba(255, 120, 60, 0.12); }
.player-buffed { box-shadow: inset 0 0 0 1px rgba(124, 255, 176, 0.35); }

/* ── Status cycle button (⚑) ── */
.status-cycle-btn {
  position:   absolute;
  top:        2px;
  right:      2px;
  background: none;
  border:     none;
  font-size:  0.65rem;
  color:      rgba(120, 160, 230, 0.3);
  cursor:     pointer;
  padding:    2px;
  line-height: 1;
  transition: color 0.15s, transform 0.1s;
  z-index:    10;
}

.status-cycle-btn:hover {
  color:     rgba(160, 200, 255, 0.85);
  transform: scale(1.3);
}

/* ── Status context menu ── */
.status-menu {
  position:    absolute;
  top:         100%;
  right:       0;
  z-index:     600;
  background:  rgba(8, 16, 50, 0.95);
  backdrop-filter: blur(12px);
  border:      1px solid rgba(80, 130, 255, 0.3);
  border-radius: 6px;
  padding:     0.3rem;
  display:     flex;
  flex-direction: column;
  gap:         2px;
  min-width:   110px;
  box-shadow:  0 8px 28px rgba(0, 0, 0, 0.6);
  animation:   smIn 0.14s ease both;
}

@keyframes smIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.status-menu-item {
  font-family:    'JetBrains Mono', monospace;
  font-weight:    600;
  font-size:      0.7rem;
  padding:        0.3rem 0.55rem;
  background:     none;
  border:         none;
  border-radius:  4px;
  cursor:         pointer;
  color:          rgba(180, 210, 255, 0.75);
  text-align:     left;
  transition:     background 0.1s, color 0.1s;
}

.status-menu-item:hover          { background: rgba(60, 100, 200, 0.35); color: #fff; }
.status-menu-item.smitem-active  { background: rgba(212, 175, 55, 0.18); color: var(--bb-gold, #D4AF37); }
.status-menu-item.status-prone   { color: #AACCFF; }
.status-menu-item.status-stunned { color: #FFCC44; }
.status-menu-item.status-ko      { color: #FF8C00; }
.status-menu-item.status-mng     { color: #FF6600; }
.status-menu-item.status-cas     { color: var(--bb-red, #C8102E); }
.status-menu-item.status-dead    { color: #888; }
.status-menu-item.status-sent-off{ color: #FFAACC; }

/* Effects section in the status menu */
.status-menu-sep {
  font-family:    'JetBrains Mono', monospace;
  font-size:      0.55rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          rgba(150, 185, 255, 0.4);
  padding:        0.35rem 0.55rem 0.15rem;
  border-top:     1px solid rgba(80, 130, 255, 0.2);
  margin-top:     0.2rem;
}
.status-menu-item.smitem-effect {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             0.5rem;
}
.status-menu-item.smitem-effect.effect-buff   { color: #7CFFB0; }
.status-menu-item.smitem-effect.effect-debuff { color: #FF9F7C; }
.smitem-x { opacity: 0.6; font-weight: 800; }
.status-menu-item.smitem-effect:hover .smitem-x { opacity: 1; }
.status-menu-presets {
  display:        flex;
  flex-wrap:      wrap;
  gap:            3px;
  padding:        0.3rem 0.4rem 0.2rem;
}
.status-preset-btn {
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.6rem;
  font-weight:   700;
  padding:       0.15rem 0.4rem;
  border-radius: 4px;
  border:        1px solid currentColor;
  background:    rgba(255, 255, 255, 0.04);
  cursor:        pointer;
}
.status-preset-btn.effect-buff   { color: #7CFFB0; }
.status-preset-btn.effect-debuff { color: #FF9F7C; }
.status-preset-btn:hover { background: rgba(255, 255, 255, 0.12); }
.status-menu-item.smitem-apoth { color: #7CFFB0; font-weight: 700; }

/* Game Settings — clear status data */
.gs-section { padding: 0.5rem 0.25rem; }
.gs-section-title {
  font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(190, 215, 255, 0.85); margin: 0 0 0.4rem;
}
.gs-section-desc {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; line-height: 1.6;
  color: rgba(180, 210, 255, 0.6); margin: 0 0 0.8rem;
}
.gs-clear-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 700;
  color: #FF9F7C; background: rgba(255, 120, 60, 0.12);
  border: 1px solid rgba(255, 120, 60, 0.4); border-radius: 7px;
  padding: 0.55rem 1rem; cursor: pointer;
}
.gs-clear-btn:hover { background: rgba(255, 120, 60, 0.22); color: #fff; }

/* Prayer per-player effect picker (in the prayers result) */
.prayer-effect-pick { margin-top: 0.6rem; }
.prayer-effect-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; color: rgba(180, 210, 255, 0.8); margin: 0 0 0.35rem;
}
.prayer-effect-players { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.prayer-effect-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700;
  color: rgba(210, 230, 255, 0.85); background: rgba(80, 130, 255, 0.1);
  border: 1px solid rgba(80, 130, 255, 0.3); border-radius: 5px;
  padding: 0.25rem 0.5rem; cursor: pointer;
}
.prayer-effect-btn:hover:not(:disabled) { background: rgba(80, 130, 255, 0.25); color: #fff; }
.prayer-effect-btn.applied { color: #7CFFB0; border-color: rgba(124, 255, 176, 0.5); }
.prayer-effect-btn:disabled { opacity: 0.5; cursor: default; }

/* ── KO recovery / status reset prompt ── */
.bb-recovery-backdrop {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0, 0, 0, 0.7);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.bb-recovery-modal {
  background: linear-gradient(180deg, rgba(10, 20, 52, 0.98), rgba(6, 12, 34, 0.98));
  border: 1px solid rgba(90, 140, 255, 0.3);
  border-radius: 14px; padding: 1.4rem 1.5rem; max-width: 460px; width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  font-family: 'JetBrains Mono', monospace;
}
.bb-recovery-title {
  font-size: 1.05rem; font-weight: 800; font-style: italic; color: #fff; margin: 0 0 0.2rem;
}
.bb-recovery-sub { font-size: 0.68rem; color: rgba(180, 210, 255, 0.6); margin: 0 0 0.9rem; }
.bb-recovery-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0; border-top: 1px solid rgba(80, 130, 255, 0.15);
}
.bb-recovery-name { flex: 1; font-size: 0.78rem; color: rgba(220, 235, 255, 0.9); }
.bb-recovery-res  { font-size: 0.72rem; font-weight: 700; min-width: 5.5rem; text-align: right; }
.bb-recovery-res.ok  { color: #7CFFB0; }
.bb-recovery-res.bad { color: #FF9F7C; }
.bb-recovery-roll, .bb-recovery-done {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.7rem;
  border-radius: 6px; cursor: pointer; padding: 0.3rem 0.7rem;
}
.bb-recovery-roll { color: var(--bb-gold, #E8C24A); background: rgba(212,175,55,0.14); border: 1px solid rgba(212,175,55,0.4); }
.bb-recovery-roll:hover:not(:disabled) { background: rgba(212,175,55,0.26); }
.bb-recovery-roll:disabled { opacity: 0.5; cursor: default; }
.bb-recovery-done {
  margin-top: 1rem; width: 100%; color: #fff;
  background: rgba(80,130,255,0.2); border: 1px solid rgba(80,130,255,0.45);
}
.bb-recovery-done:hover { background: rgba(80,130,255,0.35); }

/* ─────────────────────────────────────────────
   WIZARD PLAYER SELECTION PANELS
   ─────────────────────────────────────────────  */

.wps-panel {
  display:       grid;
  grid-template-columns: 1fr auto 1fr;
  gap:           0.6rem;
  margin-bottom: 0.85rem;
  align-items:   start;
}

.wps-side {
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
}

.wps-heading {
  font-family:    'JetBrains Mono', monospace;
  font-weight:    800;
  font-size:      0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color:          rgba(140, 175, 240, 0.55);
  margin-bottom:  0.2rem;
}

.wps-divider {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding-top:     1.4rem;
  font-size:       1.2rem;
  opacity:         0.35;
  flex-shrink:     0;
}

.wps-list {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  max-height:     140px;
  overflow-y:     auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 120, 200, 0.3) transparent;
}

.wps-empty {
  font-family: 'JetBrains Mono', monospace;
  font-size:   0.75rem;
  font-style:  italic;
  color:       rgba(120, 160, 230, 0.35);
  padding:     0.4rem 0;
  margin:      0;
}

.wps-player-btn {
  display:        flex;
  align-items:    center;
  gap:            0.3rem;
  padding:        0.3rem 0.5rem;
  background:     rgba(15, 30, 80, 0.55);
  border:         1px solid rgba(60, 100, 200, 0.28);
  border-radius:  4px;
  cursor:         pointer;
  text-align:     left;
  transition:     background 0.12s, border-color 0.12s;
  width:          100%;
}

.wps-player-btn:hover {
  background:    rgba(40, 80, 180, 0.5);
  border-color:  rgba(100, 155, 255, 0.5);
}

.wps-player-btn.selected {
  background:    rgba(212, 175, 55, 0.18);
  border-color:  rgba(212, 175, 55, 0.6);
  box-shadow:    0 0 8px rgba(212, 175, 55, 0.2);
}

.wps-name {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size:   0.76rem;
  color:       rgba(200, 220, 255, 0.88);
  flex:        1;
  min-width:   0;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wps-pos {
  font-family: 'JetBrains Mono', monospace;
  font-size:   0.62rem;
  color:       rgba(130, 170, 240, 0.5);
  flex-shrink: 0;
  white-space: nowrap;
}

.wps-stat-badge {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size:   0.68rem;
  color:       var(--bb-gold, #D4AF37);
  flex-shrink: 0;
  white-space: nowrap;
  opacity:     0.85;
}

@media (max-width: 500px) {
  .wps-panel { grid-template-columns: 1fr 1fr; }
  .wps-divider { display: none; }
}

/* ─────────────────────────────────────────────
   BB HEADER / FOOTER OVERRIDES
   ───────────────────────────────────────────── */
.bb-site-header {
  background: rgba(4, 10, 28, 0.97);
  border-bottom: 1px solid rgba(70, 110, 220, 0.3);
  position: relative;
}

.bb-header-inner {
  max-width: none;
  padding: 0 1.5rem;
  justify-content: space-between;
}

/* ── Return to Main Menu button ── */
.bb-home-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  background: #062E94;
  color: #fff;
  text-decoration: none;
  padding: 0.3rem 0.85rem 0.3rem 0.65rem;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  white-space: nowrap;
  pointer-events: auto;
}
.bb-home-btn:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.45),
              0 0 0 1px rgba(100,160,255,0.25);
  color: #fff;
  text-decoration: none;
}
.bb-home-btn-dice {
  font-family: 'Nuffle Dice', sans-serif;
  font-size: 1.1rem;
  line-height: 1;
}
.bb-home-btn-label {
  font-family: 'Nuffle Italic', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  -webkit-text-stroke: 0.5px #000;
  paint-order: stroke fill;
}

.bb-wordmark {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  color: rgba(180, 210, 255, 0.7);
  letter-spacing: 0.04em;
  text-decoration: none;
}
.bb-wordmark .wordmark-slash { color: var(--bb-gold, #D4AF37); }
.bb-wordmark:hover { color: #fff; text-decoration: none; }

/* Nav sits on the right; flex-end pushes it there */
.bb-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  margin-left: auto;
}

.bb-nav a,
.bb-nav .my-teams-nav-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(150, 185, 255, 0.6);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem 0.65rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.bb-nav a:hover,
.bb-nav .my-teams-nav-btn:hover { color: #fff; }

/* Hamburger button — hidden on desktop */
.bb-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  margin-left: auto;
}
.bb-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(150, 185, 255, 0.7);
  border-radius: 2px;
  transition: background 0.15s;
}
.bb-nav-toggle:hover span { background: #fff; }

/* Mobile: collapse nav below header */
@media (max-width: 640px) {
  .bb-nav-toggle {
    display: flex;
  }

  .bb-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(4, 10, 28, 0.98);
    border-bottom: 1px solid rgba(70, 110, 220, 0.3);
    z-index: 300;
    padding: 0.5rem 0;
  }

  .bb-nav.bb-nav-open {
    display: flex;
  }

  .bb-nav a,
  .bb-nav .my-teams-nav-btn {
    padding: 0.65rem 1.5rem;
    text-align: left;
    width: 100%;
    border-bottom: 1px solid rgba(70, 110, 220, 0.1);
  }
}

.bb-site-footer {
  background: rgba(4, 10, 28, 0.97);
  border-top: 1px solid rgba(70, 110, 220, 0.3);
  padding: 1rem 1.5rem 0.75rem;
}

.bb-footer-inner {
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.bb-footer-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: rgba(150, 185, 255, 0.5);
  letter-spacing: 0.04em;
  text-decoration: none;
}
.bb-footer-brand:hover { color: rgba(150, 185, 255, 0.9); }

.bb-footer-about {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(150, 185, 255, 0.5);
  text-decoration: none;
  text-transform: uppercase;
}
.bb-footer-about:hover { color: rgba(150, 185, 255, 0.9); }

.bb-footer-disclaimer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: rgba(100, 130, 180, 0.4);
  text-align: center;
  line-height: 1.6;
  margin: 0;
  padding: 0 2rem 0.25rem;
}

/* ─────────────────────────────────────────────
   PAGE TITLE
   ───────────────────────────────────────────── */
.bb-page-title {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        1.5rem 1rem 1rem;
  line-height:    1.1;
  user-select:    none;
}

.bb-title-sub {
  font-family:  'Nuffle Italic', serif;
  font-size:    clamp(0.75rem, 1.8vw, 1.1rem);
  color:        #fff;
  -webkit-text-stroke: 1px #333;
  text-stroke:         1px #333;
  letter-spacing: 0.05em;
}

.bb-title-main {
  font-family:  'Nuffle', serif;
  font-size:    clamp(2.2rem, 7vw, 5.5rem);
  color:        #fff;
  -webkit-text-stroke: 2px #333;
  text-stroke:         2px #333;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────
   ACTION CARDS
   ───────────────────────────────────────────── */
.bb-action-cards {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0.75rem;
  padding:               1.25rem 1.5rem 0.5rem;
  position:              relative;
}

.bb-action-card {
  position:         relative;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          1.1rem 0.75rem;
  background:       rgba(6, 14, 46, 0.7);
  border:           1px solid rgba(80, 130, 255, 0.22);
  border-radius:    10px;
  cursor:           pointer;
  text-align:       center;
  transition:
    border-color  0.2s ease,
    box-shadow    0.2s ease,
    transform     0.2s ease,
    background    0.2s ease;
}

.bb-action-card:hover {
  background:   rgba(10, 22, 65, 0.9);
  border-color: rgba(120, 170, 255, 0.7);
  box-shadow:
    0 0 0 1px rgba(120, 170, 255, 0.35),
    0 6px 24px rgba(60, 100, 255, 0.25),
    0 0 18px rgba(80, 130, 255, 0.15);
  transform:    translateY(-3px);
}

.bb-action-card:active {
  transform:  translateY(-1px);
  box-shadow: 0 0 0 1px rgba(120, 170, 255, 0.5);
}

.bb-action-card--active,
.bb-action-card--active:hover {
  background:   rgba(10, 22, 65, 0.9);
  border-color: rgba(120, 170, 255, 0.7);
  box-shadow:
    0 0 0 1px rgba(120, 170, 255, 0.35),
    0 6px 24px rgba(60, 100, 255, 0.25);
  transform:    translateY(-2px);
}

/* More dropdown menu */
.bb-more-menu {
  position:      absolute;
  right:         1.5rem;
  top:           calc(100% - 0.25rem);
  z-index:       500;
  background:    rgba(4, 10, 30, 0.98);
  border:        1px solid rgba(80, 130, 255, 0.35);
  border-radius: 10px;
  padding:       0.4rem;
  display:       grid;
  grid-template-columns: repeat(3, 1fr);
  gap:           0.4rem;
  min-width:     360px;
  box-shadow:    0 8px 32px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
}

.bb-more-menu[hidden] { display: none; }

.bb-more-item {
  font-family:    'Nuffle Italic', serif;
  font-size:      clamp(0.85rem, 1.4vw, 1.1rem);
  color:          rgba(210, 230, 255, 0.8);
  -webkit-text-stroke: 1px rgba(40, 60, 140, 0.9);
  text-stroke:         1px rgba(40, 60, 140, 0.9);
  background:     rgba(6, 14, 46, 0.7);
  border:         1px solid rgba(80, 130, 255, 0.2);
  border-radius:  8px;
  padding:        0.8rem 0.5rem;
  cursor:         pointer;
  text-align:     center;
  transition:     border-color 0.15s, box-shadow 0.15s, color 0.15s, transform 0.15s;
}

.bb-more-item:hover {
  color:               #fff;
  border-color:        rgba(120, 170, 255, 0.6);
  -webkit-text-stroke: 1px rgba(100, 160, 255, 0.8);
  text-stroke:         1px rgba(100, 160, 255, 0.8);
  text-shadow:         0 0 10px rgba(100, 160, 255, 0.5);
  box-shadow:          0 0 0 1px rgba(120, 170, 255, 0.25), 0 4px 12px rgba(60, 100, 255, 0.2);
  transform:           translateY(-2px);
}

.bb-action-card-name {
  font-family:     'Nuffle Italic', serif;
  font-size:       clamp(1rem, 1.8vw, 1.4rem);
  color:           rgba(210, 230, 255, 0.85);
  letter-spacing:  0.03em;
  line-height:     1.1;
  -webkit-text-stroke: 1px rgba(40, 60, 140, 0.9);
  text-stroke:         1px rgba(40, 60, 140, 0.9);
  transition:
    color              0.2s ease,
    -webkit-text-stroke 0.2s ease,
    text-shadow        0.2s ease;
}

.bb-action-card:hover .bb-action-card-name {
  color:               #fff;
  -webkit-text-stroke: 1px rgba(100, 160, 255, 0.8);
  text-stroke:         1px rgba(100, 160, 255, 0.8);
  text-shadow:
    0 0 12px rgba(100, 160, 255, 0.6),
    0 0 28px rgba(80, 130, 255, 0.35);
}

/* ─────────────────────────────────────────────
   6. RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .card-skills  { font-size: 0.66rem; }
}