/* ============================================================
   Blood Bowl Companion — css/panels.css
   Glass-blue game UI. Panels are FIXED MODALS — they float
   above the page as overlays, not inline flow cards.
   Font: JetBrains Mono throughout.
   ============================================================ */

/* ────────────────────────────────────────────────────────
   PANEL BACKDROP (dims page when any panel is open)
   ──────────────────────────────────────────────────────── */

.panel-backdrop {
  position:                fixed;
  inset:                   0;
  z-index:                 var(--z-panel-backdrop, 350);
  background:              rgba(0, 5, 20, 0.6);
  backdrop-filter:         blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity:                 0;
  pointer-events:          none;
  transition:              opacity 0.22s ease;
}

.panel-backdrop.active {
  opacity:        1;
  pointer-events: auto;
}

/* ────────────────────────────────────────────────────────
   GAME TIMELINE
   ──────────────────────────────────────────────────────── */

.game-timeline-wrap {
  display:          flex;
  align-items:      center;
  gap:              0.6rem;
  padding:          0.5rem 1.1rem;
  background:       rgba(4, 10, 28, 0.75);
  border-bottom:    1px solid rgba(80, 130, 255, 0.18);
  overflow-x:       auto;
  scrollbar-width:  none;
}
.game-timeline-wrap::-webkit-scrollbar { display: none; }

.game-timeline {
  display:     flex;
  align-items: center;
  gap:         0;
  flex:        1;
  min-width:   0;
}

.timeline-step {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0.18rem;
  padding:         0.32rem 0.65rem;
  background:      none;
  border:          1px solid transparent;
  border-radius:   6px;
  cursor:          pointer;
  color:           rgba(180, 200, 240, 0.4);
  font-family:     'JetBrains Mono', monospace;
  transition:      color 0.2s, background 0.2s, border-color 0.2s, opacity 0.2s;
  flex-shrink:     0;
}

.timeline-step:hover:not(.tl-current) {
  background:    rgba(60, 100, 200, 0.12);
  border-color:  rgba(80, 130, 255, 0.25);
  color:         rgba(180, 210, 255, 0.75);
}

.timeline-step.tl-current {
  background:    rgba(60, 100, 200, 0.2);
  border-color:  rgba(100, 160, 255, 0.45);
  color:         var(--bb-gold, #D4AF37);
  box-shadow:    0 0 12px rgba(60, 120, 255, 0.25);
}

.timeline-step.tl-done    { opacity: 0.35; }
.timeline-step.tl-future  { color: rgba(140, 170, 220, 0.35); }

.tl-icon  { font-size: 1rem; line-height: 1; }
.tl-label {
  font-family:    'JetBrains Mono', monospace;
  font-weight:    700;
  font-size:      0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space:    nowrap;
}

.tl-sep {
  font-size:   0.9rem;
  color:       rgba(80, 120, 200, 0.22);
  flex-shrink: 0;
  padding:     0 0.05rem;
  user-select: none;
}

.timeline-next-btn {
  font-family:    'JetBrains Mono', monospace;
  font-weight:    700;
  font-size:      0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding:        0.32rem 0.75rem;
  background:     rgba(212, 175, 55, 0.12);
  border:         1px solid rgba(212, 175, 55, 0.35);
  border-radius:  4px;
  color:          var(--bb-gold, #D4AF37);
  cursor:         pointer;
  flex-shrink:    0;
  white-space:    nowrap;
  transition:     background 0.15s, box-shadow 0.15s;
}

.timeline-next-btn:hover {
  background: rgba(212, 175, 55, 0.25);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

/* ────────────────────────────────────────────────────────
   MODULE SECTION
   ──────────────────────────────────────────────────────── */

.module-section {
  background:    rgba(6, 14, 40, 0.85);
  border-bottom: 1px solid rgba(60, 100, 200, 0.18);
  padding:       0.85rem 1rem 0.8rem;
}

.module-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap:                   0.5rem;
  max-width:             900px;
  margin:                0 auto;
}

/* ── Individual module button ── */
.module-btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0.32rem;
  padding:         0.6rem 0.3rem 0.5rem;
  background:      rgba(10, 22, 65, 0.65);
  border:          1px solid rgba(70, 110, 200, 0.2);
  border-radius:   8px;
  color:           rgba(180, 210, 255, 0.65);
  cursor:          pointer;
  position:        relative;
  outline:         none;
  transition:      background 0.16s, border-color 0.16s, color 0.16s,
                   transform 0.14s, box-shadow 0.16s, opacity 0.25s;
}

.module-btn:hover {
  background:   rgba(30, 70, 160, 0.55);
  border-color: rgba(100, 160, 255, 0.5);
  color:        #fff;
  transform:    translateY(-2px);
  box-shadow:   0 5px 16px rgba(40, 90, 220, 0.3);
}

.module-btn:focus-visible {
  border-color: var(--bb-gold, #D4AF37);
  box-shadow:   0 0 0 2px rgba(212, 175, 55, 0.45);
}

.module-btn[aria-expanded="true"] {
  background:   rgba(212, 175, 55, 0.16);
  border-color: rgba(212, 175, 55, 0.55);
  color:        var(--bb-gold, #D4AF37);
  box-shadow:   0 0 16px rgba(212, 175, 55, 0.22);
  transform:    translateY(-1px);
}

.module-btn[aria-expanded="true"]::after {
  content:      '';
  position:     absolute;
  bottom:       -7px;
  left:         50%;
  transform:    translateX(-50%);
  width:        0; height: 0;
  border-left:  6px solid transparent;
  border-right: 6px solid transparent;
  border-top:   6px solid rgba(212, 175, 55, 0.55);
}

/* Soft dimming for out-of-phase modules */
.module-btn.module-dimmed { opacity: 0.28; filter: grayscale(0.5); }
.module-btn.module-dimmed:hover { opacity: 0.55; filter: none; transform: translateY(-1px); }

.module-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
.module-icon svg { width: 24px; height: 24px; }

.module-label {
  font-family:    'JetBrains Mono', monospace;
  font-weight:    700;
  font-size:      0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space:    nowrap;
}

/* ────────────────────────────────────────────────────────
   PANELS — FIXED MODAL OVERLAYS
   Each panel floats above the page, centered.
   No flow layout, no push-down, no slide.
   ──────────────────────────────────────────────────────── */

/* Hidden state — fully removed from layout */
.bb-panel[hidden] { display: none; }

/* Visible panel — fixed, centered, glass card */
.bb-panel {
  position:                fixed;
  top:                     50%;
  left:                    50%;
  transform:               translate(-50%, -50%) scale(0.97);
  z-index:                 var(--z-panel, 400);
  width:                   calc(100vw - 2rem);
  max-width:               660px;
  max-height:              86vh;
  overflow-y:              auto;
  scrollbar-width:         thin;
  scrollbar-color:         rgba(80, 120, 200, 0.35) transparent;

  background:              rgba(6, 14, 46, 0.94);
  backdrop-filter:         blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border:                  1px solid rgba(80, 130, 255, 0.28);
  border-radius:           12px;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.75),
    0  0  0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Open animation */
  animation: panelOpen 0.24s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

@keyframes panelOpen {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Closing */
.bb-panel.panel-closing {
  display:   block !important;
  animation: panelClose 0.16s ease-in both;
}

/* ── All wizards: large-format 16:10 panel ── */
#panel-pass[hidden],
#panel-block[hidden],
#panel-foul[hidden],
#panel-throw[hidden],
#panel-kickoff[hidden],
#panel-weather[hidden],
#panel-prayers[hidden],
#panel-injury[hidden],
#panel-scatter[hidden],
#panel-special[hidden] { display: none; }

#panel-block.panel-closing,
#panel-foul.panel-closing,
#panel-throw.panel-closing,
#panel-kickoff.panel-closing,
#panel-weather.panel-closing,
#panel-prayers.panel-closing,
#panel-injury.panel-closing,
#panel-scatter.panel-closing,
#panel-special.panel-closing {
  display: flex !important;
}

#panel-block,
#panel-foul,
#panel-throw,
#panel-kickoff,
#panel-weather,
#panel-prayers,
#panel-injury,
#panel-scatter,
#panel-special {
  width:          min(82vw, 1600px);
  max-width:      none;
  height:         min(51.25vw, 1000px, 88vh);
  max-height:     none;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
}

#panel-block .panel-header,
#panel-foul .panel-header,
#panel-throw .panel-header,
#panel-kickoff .panel-header,
#panel-weather .panel-header,
#panel-prayers .panel-header,
#panel-injury .panel-header,
#panel-scatter .panel-header,
#panel-special .panel-header { flex-shrink: 0; }

#panel-block .panel-body,
#panel-foul .panel-body,
#panel-throw .panel-body,
#panel-kickoff .panel-body,
#panel-weather .panel-body,
#panel-prayers .panel-body,
#panel-injury .panel-body,
#panel-scatter .panel-body,
#panel-special .panel-body {
  flex:       1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding:    1rem 1.5rem;
  box-sizing: border-box;
}

/* ── Pass wizard: large-format 16:10 panel ── */
#panel-pass[hidden] { display: none; }

#panel-pass.panel-closing {
  display: flex !important; /* keep flex so animationend fires; block !important from .panel-closing would abort the animation */
}

#panel-pass {
  width:          min(82vw, 1600px);
  max-width:      none;
  height:         min(51.25vw, 1000px, 88vh);
  max-height:     none;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
}
#panel-pass .panel-header {
  flex-shrink: 0;
}
#panel-pass .panel-body {
  flex:       1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding:    0.5rem 0.75rem 0.6rem;
  box-sizing: border-box;
}

/* ── Launcher wizards (Start Game / Game Settings / My Teams) ──
   Match the unified large-format size of the other wizards. */
#panel-startgame[hidden],
#panel-gamesettings[hidden],
#panel-myteams[hidden] { display: none; }

#panel-startgame.panel-closing,
#panel-gamesettings.panel-closing,
#panel-myteams.panel-closing { display: flex !important; }

#panel-startgame,
#panel-gamesettings,
#panel-myteams {
  width:          min(82vw, 1600px);
  max-width:      none;
  height:         min(51.25vw, 1000px, 88vh);
  max-height:     none;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
}

#panel-startgame .wiz-body,
#panel-gamesettings .wiz-body,
#panel-myteams .wiz-body {
  flex:       1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding:    1.25rem 1.5rem;
  box-sizing: border-box;
}

/* ── Choose Team panel: same large-format size as the other wizards ── */
#panel-chooseteam[hidden]        { display: none; }
#panel-chooseteam.panel-closing  { display: flex !important; }
#panel-chooseteam {
  width:          min(82vw, 1600px);
  max-width:      none;
  height:         min(51.25vw, 1000px, 88vh);
  max-height:     none;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
}

.ct-layout {
  flex:                  1 1 0;
  min-height:            0;
  display:               grid;
  grid-template-columns: 1fr 2fr;   /* My Teams 1/3 · Choose Team 2/3 */
}

.ct-col {
  display:        flex;
  flex-direction: column;
  min-height:     0;
  overflow:       hidden;
}
.ct-myteams { border-right: 1px solid rgba(80, 140, 255, 0.18); }

.ct-col-head {
  position:        relative;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0.9rem 1rem;
  background:      rgba(4, 10, 30, 0.55);
  border-bottom:   1px solid rgba(80, 140, 255, 0.18);
}
.ct-title {
  font-family:         'Nuffle Italic', serif;
  font-size:           clamp(1.1rem, 2vw, 1.7rem);
  color:               rgba(210, 230, 255, 0.9);
  letter-spacing:      0.03em;
  margin:              0;
  -webkit-text-stroke: 1px rgba(40, 60, 140, 0.9);
  text-stroke:         1px rgba(40, 60, 140, 0.9);
}
.ct-choose .ct-col-head .panel-close {
  position:  absolute;
  right:     0.9rem;
  top:       50%;
  transform: translateY(-50%);
}

.ct-col-body {
  flex:       1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding:    1rem;
  box-sizing: border-box;
}
.ct-grid {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   0.7rem;
  align-content:         start;
}
.ct-myteams-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0.7rem;
  align-content:         start;
}

/* Team card — skills-page card styling, accent = team colour */
.ct-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:        0.8rem 0.9rem;
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
  cursor:         pointer;
  text-align:     left;
  width:          100%;
  transition:     transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.ct-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);
}
.ct-card-name {
  font-family:    'Nuffle', serif;
  font-size:      1.05rem;
  color:          #fff;
  line-height:    1.2;
  letter-spacing: 0.03em;
}
.ct-card-meta {
  font-family:    'JetBrains Mono', monospace;
  font-size:      0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          color-mix(in srgb, var(--card-color, #fff) 80%, #fff);
}

/* My Teams card carries an inline edit button */
.ct-card--myteam { position: relative; padding-right: 2rem; }
.ct-card-edit {
  position:    absolute;
  top:         0.45rem;
  right:       0.45rem;
  background:  rgba(255, 255, 255, 0.06);
  border:      1px solid rgba(120, 160, 255, 0.3);
  color:       rgba(210, 230, 255, 0.85);
  border-radius: 4px;
  font-size:   0.7rem;
  line-height: 1;
  padding:     0.2rem 0.3rem;
  cursor:      pointer;
  transition:  background 0.15s, color 0.15s;
}
.ct-card-edit:hover { background: rgba(80, 130, 255, 0.25); color: #fff; }

/* Builder occupies the right pane (scrolls) */
.ct-builder-body { display: block; }

/* Blueprint "Create New Team" card */
.ct-card--blueprint {
  background:
    repeating-linear-gradient(45deg, rgba(90, 140, 255, 0.07) 0 10px, transparent 10px 20px),
    rgba(10, 20, 50, 0.55);
  border:          1px dashed rgba(120, 170, 255, 0.5);
  border-top:      1px dashed rgba(120, 170, 255, 0.5);
  align-items:     center;
  justify-content: center;
  min-height:      60px;
}
.ct-card--blueprint:hover { background:
    repeating-linear-gradient(45deg, rgba(90, 140, 255, 0.12) 0 10px, transparent 10px 20px),
    rgba(14, 26, 60, 0.7); }
.ct-card--blueprint .ct-card-name {
  font-family: 'Nuffle Italic', serif;
  color:       rgba(195, 218, 255, 0.92);
}

.ct-empty {
  font-family: 'JetBrains Mono', monospace;
  font-size:   0.68rem;
  line-height: 1.6;
  color:       rgba(200, 220, 255, 0.45);
  padding:     0.4rem 0.2rem;
}

@media (max-width: 720px) {
  .ct-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Centered title header (styled like the wizard launcher links) */
.wiz-header {
  position:        relative;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0.9rem 3rem;
  background:      rgba(4, 10, 30, 0.55);
  border-bottom:   1px solid rgba(80, 140, 255, 0.18);
  border-radius:   12px 12px 0 0;
}

.wiz-title {
  font-family:     'Nuffle Italic', serif;
  font-size:       clamp(1.2rem, 2.2vw, 1.8rem);
  color:           rgba(210, 230, 255, 0.9);
  letter-spacing:  0.03em;
  line-height:     1.1;
  margin:          0;
  text-align:      center;
  -webkit-text-stroke: 1px rgba(40, 60, 140, 0.9);
  text-stroke:         1px rgba(40, 60, 140, 0.9);
}

.wiz-header .panel-close {
  position:  absolute;
  right:     0.9rem;
  top:       50%;
  transform: translateY(-50%);
}

/* Start Game mode cards grid */
.sg-modes {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.5rem;
  align-items:           start;
  justify-items:         center;
  max-width:             1320px;
  margin:                0 auto;
}

@media (max-width: 860px) {
  .sg-modes { grid-template-columns: 1fr; max-width: 360px; }
}

@keyframes panelClose {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}

/* Scrollbar */
.bb-panel::-webkit-scrollbar       { width: 5px; }
.bb-panel::-webkit-scrollbar-track { background: transparent; }
.bb-panel::-webkit-scrollbar-thumb { background: rgba(80, 120, 200, 0.35); border-radius: 3px; }

/* ── Panel header ── */
.panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.75rem 1rem 0.75rem 1rem;
  background:      rgba(4, 10, 30, 0.55);
  border-bottom:   1px solid rgba(80, 140, 255, 0.18);
  border-radius:   12px 12px 0 0;
  position:        sticky;
  top:             0;
  z-index:         1;
  /* Left accent stripe */
  border-left:     3px solid rgba(212, 175, 55, 0.55);
}

.panel-header-left {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
}

.panel-icon { display: flex; align-items: center; color: rgba(180, 210, 255, 0.6); }
.panel-icon svg { width: 18px; height: 18px; }

.panel-title {
  font-family:  'JetBrains Mono', monospace;
  font-weight:  800;
  font-style:   italic;
  font-size:    1rem;
  color:        rgba(220, 235, 255, 0.92);
  margin:       0;
  line-height:  1.1;
  letter-spacing: -0.01em;
  text-shadow:  0 1px 10px rgba(60, 120, 255, 0.22);
}

.panel-close {
  background:    rgba(255, 255, 255, 0.07);
  border:        1px solid rgba(255, 255, 255, 0.1);
  color:         rgba(180, 210, 255, 0.65);
  width:         28px;
  height:        28px;
  border-radius: 50%;
  font-size:     1rem;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background 0.13s, color 0.13s;
  flex-shrink:   0;
}

.panel-close:hover { background: rgba(255, 80, 80, 0.25); color: #fff; }

/* ── Panel body ── */
.panel-body {
  padding:   1rem 1.2rem 1.3rem;
  max-width: 100%;
}

.panel-intro {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size:   0.78rem;
  color:       rgba(160, 190, 245, 0.6);
  line-height: 1.7;
  margin:      0 0 1rem;
}

/* ── Sub-tabs ── */
.sub-tabs {
  display:       flex;
  gap:           0;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(80, 120, 220, 0.2);
}

.sub-tab {
  font-family:    'JetBrains Mono', monospace;
  font-weight:    700;
  font-size:      0.65rem;
  color:          rgba(130, 170, 230, 0.5);
  background:     none;
  border:         none;
  border-bottom:  2px solid transparent;
  margin-bottom:  -1px;
  padding:        0.4rem 0.75rem;
  cursor:         pointer;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition:     color 0.13s, border-color 0.13s;
}

.sub-tab:hover  { color: rgba(200, 225, 255, 0.85); }
.sub-tab.active {
  color:              var(--bb-gold, #D4AF37);
  border-bottom-color: var(--bb-gold, #D4AF37);
}

.sub-tab-panel        { display: none; }
.sub-tab-panel.active { display: block; }

/* ────────────────────────────────────────────────────────
   INPUTS: pickers, toggles, labels
   ──────────────────────────────────────────────────────── */

.injury-inputs { margin-bottom: 0.85rem; }

.input-label {
  display:        block;
  font-family:    'JetBrains Mono', monospace;
  font-weight:    700;
  font-size:      0.58rem;
  color:          rgba(130, 165, 235, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom:  0.28rem;
  margin-top:     0.6rem;
}

.av-picker { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.av-btn {
  font-family:  'JetBrains Mono', monospace;
  font-weight:  700;
  font-size:    0.73rem;
  padding:      0.26rem 0.55rem;
  background:   rgba(15, 30, 90, 0.55);
  border:       1px solid rgba(65, 105, 195, 0.3);
  border-radius: 4px;
  cursor:       pointer;
  color:        rgba(160, 195, 255, 0.7);
  transition:   background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}

.av-btn:hover {
  background:   rgba(40, 80, 175, 0.5);
  border-color: rgba(100, 155, 255, 0.55);
  color:        #fff;
}

.av-btn.active {
  background:   rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.6);
  color:        var(--bb-gold, #D4AF37);
  box-shadow:   0 0 8px rgba(212, 175, 55, 0.18);
}

.mod-toggles { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.mod-toggle {
  font-family:  'JetBrains Mono', monospace;
  font-weight:  700;
  font-size:    0.65rem;
  padding:      0.24rem 0.5rem;
  background:   rgba(15, 30, 90, 0.55);
  border:       1px solid rgba(65, 105, 195, 0.28);
  border-radius: 4px;
  cursor:       pointer;
  color:        rgba(150, 185, 255, 0.6);
  transition:   background 0.12s, border-color 0.12s, color 0.12s;
}

.mod-toggle:hover {
  background:   rgba(40, 80, 175, 0.48);
  border-color: rgba(100, 155, 255, 0.5);
  color:        #fff;
}

.mod-toggle.active {
  background:   rgba(200, 16, 46, 0.28);
  border-color: rgba(200, 16, 46, 0.65);
  color:        #ff8fa0;
}

/* ────────────────────────────────────────────────────────
   ROLL BUTTON
   ──────────────────────────────────────────────────────── */

.roll-btn {
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
  padding:        0.65rem 1.3rem;
  background:     rgba(212, 175, 55, 0.13);
  border:         1px solid rgba(212, 175, 55, 0.42);
  border-radius:  6px;
  color:          var(--bb-gold, #D4AF37);
  font-family:    'JetBrains Mono', monospace;
  font-weight:    800;
  font-size:      0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor:         pointer;
  margin:         0.8rem 0 0;
  transition:     background 0.15s, box-shadow 0.15s, transform 0.12s, border-color 0.15s;
  box-shadow:     0 0 10px rgba(212, 175, 55, 0.06);
}

.roll-btn:hover {
  background:   rgba(212, 175, 55, 0.25);
  border-color: rgba(212, 175, 55, 0.7);
  box-shadow:   0 0 20px rgba(212, 175, 55, 0.28), 0 4px 16px rgba(0,0,0,0.35);
  transform:    translateY(-2px);
}

.roll-btn:active  { transform: translateY(0); }
.roll-btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }
.roll-btn-icon    { font-size: 1.05rem; }

/* ────────────────────────────────────────────────────────
   ROLL RESULT — styled as a rule card
   ──────────────────────────────────────────────────────── */

.roll-result {
  margin-top:  0.85rem;
  background:  rgba(3, 8, 28, 0.7);
  border:      1px solid rgba(80, 130, 255, 0.18);
  border-left: 3px solid rgba(212, 175, 55, 0.5);
  border-radius: 6px;
  padding:     0.9rem 1.05rem;
  color:       #fff;
  animation:   resultIn 0.2s ease both;
}

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

/* Re-roll button — appears inside a .roll-result after a roll completes */
.reroll-btn {
  display:          block;
  margin-top:       0.75rem;
  padding:          0.35rem 0.8rem;
  background:       rgba(80, 130, 255, 0.12);
  border:           1px solid rgba(80, 130, 255, 0.35);
  border-radius:    4px;
  color:            rgba(160, 200, 255, 0.85);
  font-family:      'JetBrains Mono', monospace;
  font-size:        0.78rem;
  font-weight:      600;
  cursor:           pointer;
  transition:       background 0.15s, border-color 0.15s, color 0.15s;
}
.reroll-btn:hover {
  background:   rgba(80, 130, 255, 0.22);
  border-color: rgba(80, 130, 255, 0.6);
  color:        #fff;
}

/* Large dice total */
.result-roll-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size:   2.2rem;
  color:       var(--bb-gold, #D4AF37);
  line-height: 1;
  margin-bottom: 0.1rem;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
  letter-spacing: -0.02em;
}

/* e.g. "4 + 3" breakdown */
.result-roll-breakdown {
  font-family:    'JetBrains Mono', monospace;
  font-size:      0.68rem;
  color:          rgba(140, 175, 235, 0.45);
  letter-spacing: 0.04em;
  margin-bottom:  0.5rem;
}

/* Event/weather name */
.result-name {
  font-family:  'JetBrains Mono', monospace;
  font-weight:  800;
  font-style:   italic;
  font-size:    1.15rem;
  color:        rgba(220, 235, 255, 0.95);
  margin-bottom: 0.35rem;
  line-height:  1.2;
  letter-spacing: -0.01em;
}

/* Full description text */
.result-desc {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size:   0.77rem;
  color:       rgba(165, 195, 250, 0.7);
  line-height: 1.8;
  margin:      0;
}

/* Direction arrow for bounce/scatter */
.result-direction {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size:   1.05rem;
  color:       var(--bb-gold, #D4AF37);
  margin-top:  0.3rem;
}

/* Short mechanical effect label */
.result-effect {
  display:        inline-block;
  font-family:    'JetBrains Mono', monospace;
  font-weight:    700;
  font-size:      0.68rem;
  color:          #FF8C00;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom:  0.45rem;
  padding:        0.2rem 0.55rem;
  background:     rgba(255, 140, 0, 0.1);
  border:         1px solid rgba(255, 140, 0, 0.3);
  border-radius:  3px;
}

/* Result header line — separator above description */
.result-divider {
  border:     none;
  border-top: 1px solid rgba(80, 120, 220, 0.18);
  margin:     0.55rem 0;
}

/* Emoji display in weather/kickoff results */
.result-emoji {
  font-size:   2rem;
  line-height: 1;
  display:     block;
  margin-bottom: 0.3rem;
}

/* Label chips used inside results */
.result-chip {
  display:        inline-block;
  font-family:    'JetBrains Mono', monospace;
  font-weight:    700;
  font-size:      0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding:        0.15rem 0.45rem;
  border-radius:  3px;
  margin-bottom:  0.35rem;
}

.result-chip-ok   { background: rgba(212, 175, 55, 0.12); color: var(--bb-gold, #D4AF37); border: 1px solid rgba(212, 175, 55, 0.35); }
.result-chip-warn { background: rgba(255, 140, 0, 0.12);  color: #FF8C00;                  border: 1px solid rgba(255, 140, 0, 0.35); }
.result-chip-bad  { background: rgba(200, 16, 46, 0.15);  color: #ff8fa0;                  border: 1px solid rgba(200, 16, 46, 0.4); }
.result-chip-info { background: rgba(80, 130, 255, 0.12); color: rgba(160, 200, 255, 0.85); border: 1px solid rgba(80, 130, 255, 0.3); }

/* ────────────────────────────────────────────────────────
   COMPASS (bounce direction)
   ──────────────────────────────────────────────────────── */

.compass-wrap { display: flex; justify-content: center; padding: 0.5rem 0 0.25rem; }

.compass {
  display:               grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows:    repeat(3, 44px);
  gap:                   2px;
}

.compass-dir {
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.35rem;
  border-radius:   4px;
  background:      rgba(15, 30, 90, 0.45);
  border:          1px solid rgba(65, 105, 195, 0.28);
  color:           rgba(100, 150, 230, 0.45);
  transition:      background 0.15s, color 0.15s;
}

.compass-dir.active {
  background:   rgba(212, 175, 55, 0.22);
  border-color: rgba(212, 175, 55, 0.6);
  color:        var(--bb-gold, #D4AF37);
  font-size:    1.7rem;
  box-shadow:   0 0 10px rgba(212, 175, 55, 0.22);
}

.compass-center { display: flex; align-items: center; justify-content: center; font-size: 0.95rem; }

/* ────────────────────────────────────────────────────────
   ROSTER SECTION (below the module grid, always visible)
   ──────────────────────────────────────────────────────── */

.roster-section {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0;
  background:            rgba(4, 10, 28, 0.88);
  border-top:            1px solid rgba(60, 100, 200, 0.18);
}

.roster-accordion {
  border-right:   1px solid rgba(40, 70, 160, 0.22);
  --tc-bg:           #12152e;
  --tc-primary:      #555;
  --tc-primary-dark: #1a1d38;
  --tc-accent:       #333;
  --tc-gold:         #888;
  --tc-gold-dark:    #666;
  --tc-header-bg:    #0a0d20;
}
.roster-accordion:last-child { border-right: none; }

.accordion-toggle {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         0.6rem 1rem;
  background:      var(--tc-header-bg);
  border:          none;
  cursor:          pointer;
  text-align:      left;
  border-bottom:   1px solid var(--tc-primary);
  transition:      background 0.15s;
}
.accordion-toggle:hover { background: var(--tc-primary-dark); }

.accord-label {
  font-family:    'JetBrains Mono', monospace;
  font-weight:    800;
  font-style:     italic;
  font-size:      1.15rem;
  color:          rgba(232, 240, 255, 0.95);
  letter-spacing: 0.01em;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
  min-width:      0;
}

.accord-right {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  flex-shrink: 0;
}

.accord-value {
  font-family:    'JetBrains Mono', monospace;
  font-weight:    700;
  font-size:      0.8rem;
  color:          var(--tc-gold, #D4AF37);
  letter-spacing: 0.02em;
  white-space:    nowrap;
}

.accord-arrow {
  font-size:  0.78rem;
  color:      rgba(140, 175, 235, 0.38);
  transition: transform 0.18s ease;
}
.accordion-toggle[aria-expanded="true"] .accord-arrow { transform: rotate(180deg); }

.accordion-body {
  background:         var(--tc-bg);
  display:            grid;
  grid-template-rows: 0fr;
  transition:         grid-template-rows 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.accordion-body.is-open { grid-template-rows: 1fr; }

.accordion-body > .roster-grid {
  overflow:   hidden;
  min-height: 0;
  padding:    0.6rem;
}

/* ────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .module-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.38rem; }
  .module-icon svg { width: 22px; height: 22px; }
  .module-label { font-size: 0.52rem; }
  .roster-section { grid-template-columns: 1fr; }
  .roster-accordion { border-right: none; border-bottom: 1px solid rgba(40,70,160,0.22); }
}

/* ── Panels become bottom sheets on small screens ── */
@media (max-width: 599px) {
  .bb-panel {
    position:      fixed;
    top:           auto;
    bottom:        0;
    left:          0;
    right:         0;
    transform:     none !important;
    width:         100%;
    max-width:     100%;
    max-height:    80vh;
    border-radius: 16px 16px 0 0;
    border-left:   none;
    border-right:  none;
    border-bottom: none;
  }

  @keyframes panelOpen {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .bb-panel.panel-closing {
    animation: panelClose 0.16s ease-in both;
  }

  @keyframes panelClose {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(100%); }
  }
}

@media (max-width: 480px) {
  .bb-panel     { max-height: 90vh; }
  .panel-body   { padding: 0.8rem 0.85rem 1rem; }
  .tl-label     { display: none; }
  .tl-icon      { font-size: 1.15rem; }
}

@media (max-width: 479px) {
  .module-grid {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.3rem;
  }
  .module-btn {
    padding: 0.45rem 0.2rem 0.4rem;
    min-height: 44px;
  }
  .module-icon svg { width: 20px; height: 20px; }
  .module-label { font-size: 0.48rem; }

  .roll-btn { min-height: 44px; }
  .av-btn, .mod-toggle { min-height: 44px; padding-top: 0.45rem; padding-bottom: 0.45rem; }
}

/* ════════════════════════════════════════════════════════
   DICE MODE TOGGLE PILL  (Sprint 2)
   ════════════════════════════════════════════════════════ */

.dmt-pill {
  display:       flex;
  gap:           0;
  border:        1px solid rgba(80, 130, 255, 0.28);
  border-radius: 4px;
  overflow:      hidden;
  margin:        0 0.4rem;
  flex-shrink:   0;
}
.dmt-btn {
  padding:     0.2rem 0.5rem;
  background:  transparent;
  border:      none;
  color:       rgba(140, 170, 230, 0.45);
  font-family: 'JetBrains Mono', monospace;
  font-size:   0.68rem;
  font-weight: 700;
  cursor:      pointer;
  transition:  background 0.12s, color 0.12s;
  white-space: nowrap;
}
.dmt-btn.active {
  background: rgba(80, 130, 255, 0.2);
  color:      rgba(160, 200, 255, 0.95);
}
.dmt-btn:hover:not(.active) {
  background: rgba(80, 130, 255, 0.08);
  color:      rgba(160, 200, 255, 0.7);
}

/* ════════════════════════════════════════════════════════
   PHYSICAL DICE BUTTONS  (Sprint 2)
   ════════════════════════════════════════════════════════ */

.physical-zone { margin-top: 0.7rem; }

.phys-grid {
  display:               grid;
  grid-template-columns: repeat(var(--phys-cols, 4), 1fr);
  gap:                   0.3rem;
}

.phys-btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         0.4rem 0.25rem;
  background:      rgba(4, 10, 28, 0.72);
  border:          1px solid rgba(80, 130, 255, 0.18);
  border-left:     2px solid rgba(80, 130, 255, 0.3);
  border-radius:   4px;
  cursor:          pointer;
  min-height:      3rem;
  font-family:     'JetBrains Mono', monospace;
  line-height:     1.2;
  transition:      background 0.1s, border-color 0.1s, transform 0.07s;
}
.phys-btn:hover {
  background:   rgba(80, 130, 255, 0.1);
  border-color: rgba(80, 130, 255, 0.35);
}
.phys-btn.selected {
  background:   rgba(80, 130, 255, 0.22);
  border-color: rgba(80, 130, 255, 0.65);
  transform:    scale(1.04);
  box-shadow:   0 0 8px rgba(80, 130, 255, 0.25);
}

.phys-val {
  font-size:   0.95rem;
  font-weight: 800;
  color:       var(--bb-gold, #D4AF37);
  line-height: 1;
}
.phys-label {
  font-size:     0.6rem;
  font-weight:   600;
  color:         rgba(200, 220, 255, 0.6);
  text-align:    center;
  margin-top:    0.18rem;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  max-width:     100%;
}

/* Severity colour bands */
.phys-btn.phys-muted   { opacity: 0.42; }
.phys-btn.phys-neutral { border-left-color: rgba(80, 130, 255, 0.45); }
.phys-btn.phys-warn    { border-left-color: #FF8C00; }
.phys-btn.phys-warn .phys-val  { color: #FF8C00; }
.phys-btn.phys-bad     { border-left-color: var(--bb-red, #C8102E); }
.phys-btn.phys-bad .phys-val   { color: #ff8fa0; }
.phys-btn.phys-good    { border-left-color: #4CAF50; }
.phys-btn.phys-good .phys-val  { color: #81c784; }

/* Dice-slot entry zone (shared physical entry, js/dice-slot.js) */
.phys-zone-title {
  font-family:    'JetBrains Mono', monospace;
  font-size:      0.72rem;
  font-weight:    700;
  color:          rgba(200, 220, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom:  0.35rem;
}
.phys-btn.phys-block-btn .phys-val {
  font-family: 'Nuffle Dice', sans-serif;
  font-size:   1.6rem;
  color:       #fee9d5;
}

/* Compass grid */
.phys-compass-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0.3rem;
  max-width:             170px;
  margin:                0.5rem auto;
}
.phys-compass-btn .phys-val {
  font-size: 1.3rem;
  color:     rgba(160, 200, 255, 0.85);
}
.phys-compass-centre {
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1rem;
}

/* ════════════════════════════════════════════════════════
   WEATHER CHIP  (Sprint 2)
   ════════════════════════════════════════════════════════ */

.weather-chip-slot {
  margin-bottom: 0.55rem;
  /* Anchor for the expanded description popover */
  position: relative;
}

.weather-chip {
  display:       flex;
  align-items:   center;
  gap:           0.45rem;
  padding:       0.38rem 0.7rem;
  background:    rgba(255, 140, 0, 0.09);
  border:        1px solid rgba(255, 140, 0, 0.28);
  border-radius: 4px;
  color:         #FF8C00;
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.72rem;
  font-weight:   600;
  cursor:        pointer;
  width:         100%;
  text-align:    left;
  transition:    background 0.12s;
}
.weather-chip:hover { background: rgba(255, 140, 0, 0.16); }

.wchip-expand {
  margin-left: auto;
  opacity:     0.55;
  font-size:   0.85rem;
  flex-shrink: 0;
}
.weather-chip-desc {
  /* Floating popover under the chip — expanding must NOT reflow the
     wizard stage (it used to push the roll button under the frame). */
  position:      absolute;
  top:           calc(100% + 0.3rem);
  left:          0;
  right:         0;
  z-index:       var(--z-tooltip, 500);
  padding:       0.5rem 0.7rem;
  background:    rgba(10, 8, 2, 0.96);
  border:        1px solid rgba(255, 140, 0, 0.35);
  border-radius: 4px;
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.7rem;
  color:         rgba(255, 220, 160, 0.9);
  line-height:   1.5;
  box-shadow:    0 8px 24px rgba(0, 0, 0, 0.55);
}

/* ════════════════════════════════════════════════════════
   ACTIVE PRAYER BANNER  (Sprint 1C)
   ════════════════════════════════════════════════════════ */

.active-prayer-banner {
  background:    rgba(212, 175, 55, 0.1);
  border:        1px solid rgba(212, 175, 55, 0.35);
  border-left:   3px solid var(--bb-gold, #D4AF37);
  padding:       0.5rem 0.75rem;
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.75rem;
  color:         rgba(220, 235, 255, 0.85);
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
}

.active-prayer-banner[hidden] { display: none; }

.apb-icon  { color: var(--bb-gold, #D4AF37); font-size: 1rem; flex-shrink: 0; }
.apb-text  { flex: 1; }
.apb-dismiss {
  background: none;
  border:     none;
  color:      rgba(180, 200, 255, 0.4);
  cursor:     pointer;
  font-size:  1rem;
  padding:    0.2rem;
  flex-shrink: 0;
}
.apb-dismiss:hover { color: rgba(255, 100, 100, 0.8); }

/* ════════════════════════════════════════════════════════
   PHYSICAL DICE LOCK-IN BAR  (Sprint 1C)
   ════════════════════════════════════════════════════════ */

.physical-lock-bar {
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
  padding:       0.5rem 0.75rem;
  background:    rgba(212, 175, 55, 0.08);
  border:        1px solid rgba(212, 175, 55, 0.3);
  border-radius: 6px;
  margin-top:    0.5rem;
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.75rem;
}

.physical-lock-bar[hidden] { display: none; }

.plb-label   { flex: 1; color: rgba(220, 235, 255, 0.85); font-weight: 700; }

.plb-confirm {
  background:    rgba(212, 175, 55, 0.18);
  border:        1px solid rgba(212, 175, 55, 0.5);
  color:         var(--bb-gold, #D4AF37);
  font-family:   'JetBrains Mono', monospace;
  font-weight:   700;
  font-size:     0.72rem;
  padding:       0.3rem 0.7rem;
  border-radius: 4px;
  cursor:        pointer;
  transition:    background 0.12s;
}
.plb-confirm:hover { background: rgba(212, 175, 55, 0.3); }

.plb-cancel {
  background:    none;
  border:        1px solid rgba(100, 100, 150, 0.3);
  color:         rgba(150, 170, 220, 0.5);
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.72rem;
  padding:       0.3rem 0.5rem;
  border-radius: 4px;
  cursor:        pointer;
}

.phys-btn.confirmed {
  background:   rgba(40, 120, 40, 0.2);
  border-color: #2E7D32;
  color:        #66EE88;
}

/* ════════════════════════════════════════════════════════
   COMPASS DIRECTION NUMBERS  (Sprint 1C)
   ════════════════════════════════════════════════════════ */

.compass-dir {
  flex-direction: column;
  gap:            2px;
}

.compass-dir::after {
  content:        attr(data-dir);
  font-size:      0.45rem;
  font-family:    'JetBrains Mono', monospace;
  font-weight:    700;
  opacity:        0.5;
  letter-spacing: 0;
  line-height:    1;
}

/* ════════════════════════════════════════════════════════
   FIRST MATCH TUTORIAL BANNER (js/tutorial.js)
   ════════════════════════════════════════════════════════ */
#bb-tutorial-banner {
  position:      fixed;
  left:          50%;
  bottom:        1rem;
  transform:     translateX(-50%);
  z-index:       var(--z-toast, 900);
  display:       flex;
  align-items:   center;
  gap:           0.7rem;
  max-width:     min(640px, calc(100vw - 2rem));
  padding:       0.6rem 0.9rem;
  background:    rgba(4, 12, 34, 0.96);
  border:        1px solid rgba(212, 175, 55, 0.45);
  border-radius: 10px;
  box-shadow:    0 8px 28px rgba(0, 0, 0, 0.55);
  font-family:   'JetBrains Mono', monospace;
}
#bb-tutorial-banner[hidden] { display: none; }
#bb-tutorial-banner .bbt-step {
  flex-shrink: 0;
  font-size:   0.7rem;
  font-weight: 800;
  color:       var(--bb-gold, #D4AF37);
}
#bb-tutorial-banner .bbt-text {
  font-size:   0.78rem;
  line-height: 1.45;
  color:       rgba(225, 235, 255, 0.92);
}
#bb-tutorial-banner .bbt-next {
  flex-shrink:   0;
  padding:       0.3rem 0.7rem;
  background:    rgba(212, 175, 55, 0.15);
  border:        1px solid rgba(212, 175, 55, 0.5);
  border-radius: 6px;
  color:         var(--bb-gold, #D4AF37);
  font-family:   inherit;
  font-size:     0.72rem;
  font-weight:   700;
  cursor:        pointer;
}
#bb-tutorial-banner .bbt-next:hover { background: rgba(212, 175, 55, 0.28); }
#bb-tutorial-banner .bbt-close {
  flex-shrink: 0;
  background:  none;
  border:      none;
  color:       rgba(170, 190, 220, 0.6);
  font-size:   0.85rem;
  cursor:      pointer;
}

/* Selected game-mode card on the Start Game panel */
.mode-card--selected {
  outline:        3px solid var(--bb-gold, #D4AF37);
  outline-offset: 2px;
}

/* Game-settings checkbox row */
.gs-toggle-label {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size:   0.8rem;
  color:       rgba(215, 230, 255, 0.85);
  cursor:      pointer;
}