﻿/* =========================================================================
   Blood Bowl 7s â€” Roster Builder
   Colour palette: navy / gold / crimson / parchment (official GW style)
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 20px; } /* base for rem â€” bumped for iPad hip-height legibility */

:root {
  --navy:      #0d1f5c;
  --navy-dk:   #080f30;
  --navy-mid:  #162a7a;
  --gold:      #c9a020;
  --gold-lt:   #e0ba40;
  --crimson:   #8a1a1a;
  --crimson-lt:#cc2020;
  --parchment: #e8d4a8;
  --cream:     #d4c4a0;
  --brown:     #2a1808;
  --brown-lt:  #5a3a18;
  --offwhite:  #f0e8d0;
}

body {
  background: var(--navy-dk);
  color: var(--brown);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 17px;
  min-height: 100vh;
}

/* =========================================================================
   HEADER
   ========================================================================= */

.bb-header {
  background: var(--navy);
  border-bottom: 3px solid var(--gold);
  padding: 10px 20px;
  position: sticky; top: 0; z-index: 100;
}

.bb-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.bb-header-logo {
  height: 52px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(201,160,32,.4));
}

.bb-header-auth {
  margin-left: auto;
}

.btn-auth-in {
  background: none;
  color: var(--gold);
  border: 1px solid rgba(201,160,32,.35);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .75rem;
  letter-spacing: .1em;
  padding: 4px 12px;
  cursor: pointer;
  opacity: .7;
}
.btn-auth-in:hover { opacity: 1; background: rgba(201,160,32,.08); }

.btn-auth-out {
  background: none;
  color: rgba(201,160,32,.6);
  border: none;
  font-family: inherit;
  font-size: .75rem;
  cursor: pointer;
  padding: 4px 8px;
}
.btn-auth-out:hover { color: var(--gold); }
.btn-bb-waaagh {
  background: none; color: rgba(200,80,60,.85);
  border: 1px solid rgba(200,80,60,.35);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .75rem; letter-spacing: .1em;
  padding: 4px 12px; cursor: pointer; text-decoration: none;
  opacity: .8; margin-right: 4px;
}
.btn-bb-waaagh:hover { opacity: 1; background: rgba(200,80,60,.08); color: #e05030; }
.bb-notify-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; color: var(--gold);
  border: 1px solid rgba(201,160,32,.35);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 12px; cursor: pointer;
  opacity: .8; margin-right: 4px; white-space: nowrap;
}
.bb-notify-toggle:hover { opacity: 1; background: rgba(201,160,32,.08); }
.bb-notify-toggle input { accent-color: var(--gold); margin: 0; }

.bb-title-area {
  line-height: 1.1;
}

.bb-subtitle {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--gold);
  opacity: .7;
}

.bb-title {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1.6rem;
  letter-spacing: .12em;
  color: var(--offwhite);
}

/* =========================================================================
   MAIN / VIEWS
   ========================================================================= */

.bb-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

.bb-view { }

/* =========================================================================
   SECTION BAR
   ========================================================================= */

.bb-section-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--navy);
  border: 1px solid var(--gold);
  padding: 8px 14px;
  margin-bottom: 16px;
}

.bb-section-bar-sm {
  padding: 5px 14px;
  margin-top: 20px;
  margin-bottom: 8px;
}

.bb-section-title {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--gold);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================================
   BUTTONS
   ========================================================================= */

.btn-primary {
  background: var(--crimson);
  color: var(--offwhite);
  border: 1px solid #c03030;
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .85rem;
  letter-spacing: .1em;
  padding: 6px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.btn-primary:hover { background: #b02020; }

.btn-secondary {
  background: var(--navy-mid);
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .8rem;
  letter-spacing: .08em;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.btn-secondary:hover { background: #1e3a9a; }

.btn-danger {
  background: none;
  color: var(--crimson-lt);
  border: 1px solid var(--crimson);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .8rem;
  letter-spacing: .08em;
  padding: 6px 14px;
  white-space: nowrap;
  cursor: pointer;
}
.btn-danger:hover { background: rgba(138,26,26,.3); }

.btn-back {
  background: none;
  color: var(--gold);
  border: 1px solid rgba(201,160,32,.4);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .8rem;
  letter-spacing: .08em;
  padding: 6px 14px;
  white-space: nowrap;
  cursor: pointer;
}
.btn-back:hover { background: rgba(201,160,32,.1); }

/* =========================================================================
   ROSTER LIST CARDS
   ========================================================================= */

.bb-empty {
  background: var(--parchment);
  color: var(--brown-lt);
  padding: 20px;
  text-align: center;
  font-style: italic;
  border: 1px solid var(--cream);
}

#roster-content {
  padding-top: 16px;
}
.roster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 600px) {
  .roster-grid { grid-template-columns: 1fr; }
}

.roster-card {
  background: var(--parchment);
  border: 1px solid var(--cream);
  border-left: 4px solid var(--crimson);
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
  min-height: 100px;
}

.roster-card-content {
  position: relative;
  z-index: 1;
}

.roster-card-photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 62%;
  background-size: cover;
  background-position: center center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.7) 45%, black 80%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.7) 45%, black 80%);
  opacity: .65;
  pointer-events: none;
}

.roster-card-guest .roster-card-photo { opacity: .5; }

.roster-photo-btn { display: none; } /* hidden until needed — code kept intact */
.roster-photo-btn {
  position: absolute;
  top: 7px; right: 8px;
  z-index: 2;
  background: rgba(0,0,0,.65);
  color: var(--gold);
  border: 1px solid rgba(201,162,39,.5);
  border-radius: 3px;
  padding: 2px 7px;
  font-size: .65rem;
  letter-spacing: .06em;
  cursor: pointer;
  line-height: 1.6;
  font-family: Impact, 'Arial Narrow', sans-serif;
}
.roster-photo-btn:hover { background: rgba(0,0,0,.9); border-color: var(--gold); }

.roster-photo-del {
  right: 42px; /* sits left of the 📷 button */
  color: #c06050;
  border-color: rgba(192,96,80,.4);
}
.roster-photo-del:hover { border-color: #c06050; }

.roster-photo-input { display: none; }

.roster-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.roster-name {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: var(--navy);
}

.roster-team-badge {
  background: var(--navy);
  color: var(--gold);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .7rem;
  letter-spacing: .08em;
  padding: 2px 8px;
  white-space: nowrap;
}

.roster-card-stats {
  display: flex;
  gap: 12px;
  font-size: .8rem;
  color: var(--brown-lt);
  margin-bottom: 10px;
}

.roster-card-actions { display: flex; gap: 8px; align-items: stretch; }

/* =========================================================================
   BUILDER FORM
   ========================================================================= */

.bb-form-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--parchment);
  border: 1px solid var(--cream);
  padding: 14px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.bb-form-subrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.bb-form-subrow-mid {
  flex: 1;
  min-height: 8px;
}

#builder-photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 55%;
  background-size: cover;
  background-position: center center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 40%, black 75%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 40%, black 75%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
#builder-photo.has-photo { opacity: .55; }

.bb-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 160px;
}

.bb-field-sm { flex: 0 1 120px; }

.bb-label {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--navy);
}

.bb-input, .bb-select {
  background: var(--offwhite);
  color: var(--brown);
  border: 1px solid var(--cream);
  border-bottom-color: var(--brown-lt);
  padding: 5px 8px;
  font-family: inherit;
  font-size: .875rem;
  outline: none;
}

.bb-input:focus, .bb-select:focus {
  border-color: var(--navy);
  background: #fff;
}

.bb-textarea { resize: vertical; }

.bb-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: .85rem;
  color: var(--brown);
  padding-top: 4px;
}

.bb-check-label input { accent-color: var(--crimson); }

.bb-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bb-step-btn {
  background: var(--navy);
  color: var(--gold);
  border: none;
  width: 24px;
  height: 24px;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-step-btn:hover { background: var(--navy-mid); }

#f-rr-count {
  font-family: Impact, sans-serif;
  font-size: 1.1rem;
  color: var(--navy);
  min-width: 16px;
  text-align: center;
}

.bb-hint {
  font-size: .75rem;
  color: var(--brown-lt);
  font-style: italic;
}

.bb-hint-center { text-align: center; padding: 16px; }

.bb-dim { color: var(--brown-lt); opacity: .5; }

/* =========================================================================
   BUDGET BAR
   ========================================================================= */

.bb-budget-wrap {
  background: var(--parchment);
  border: 1px solid var(--cream);
  padding: 10px 14px;
  margin-bottom: 8px;
}

.bb-budget-bar-bg {
  height: 12px;
  background: var(--cream);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}

.bb-budget-bar-fill {
  height: 100%;
  background: var(--gold);
  transition: width .3s, background .3s;
  border-radius: 2px;
}

.bb-budget-labels {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--brown-lt);
}

.bb-budget-warning {
  text-align: center;
  color: var(--crimson-lt);
  font-family: Impact, sans-serif;
  letter-spacing: .1em;
  font-size: .85rem;
  margin-top: 4px;
}

/* =========================================================================
   RULES STRIP
   ========================================================================= */

.bb-rules-strip {
  background: var(--navy);
  border-left: 3px solid var(--crimson);
  padding: 6px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--gold);
  opacity: .85;
}

/* =========================================================================
   PLAYER SLOTS
   ========================================================================= */

#player-slots {
  background: var(--parchment);
  border: 1px solid var(--cream);
}

.slot-header-row {
  display: grid;
  grid-template-columns: 44px 1fr 200px 200px 60px 36px;
  gap: 6px;
  padding: 6px 10px;
  background: var(--navy);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--gold);
  align-items: center;
}

.slot-row {
  display: grid;
  grid-template-columns: 44px 1fr 200px 200px 60px 36px;
  gap: 6px;
  padding: 6px 10px;
  align-items: center;
  border-bottom: 1px solid var(--cream);
}

.slot-row:nth-child(even) { background: rgba(212,196,160,.25); }

.slot-row.slot-specialist {
  border-left: 3px solid var(--crimson);
}

.slot-jersey-input {
  width: 100%;
  font-family: Impact, sans-serif;
  font-size: .85rem;
  color: var(--navy);
  text-align: center;
  background: rgba(212,196,160,.35);
  border: 1px solid var(--cream);
  border-radius: 3px;
  padding: 3px 2px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.slot-jersey-input::-webkit-outer-spin-button,
.slot-jersey-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.slot-jersey-input::placeholder { opacity: .45; }

.slot-pos-select { font-size: .82rem; padding: 3px 6px; }

.slot-name-input { font-size: .82rem; padding: 3px 6px; }

.slot-stats {
  font-size: .78rem;
  color: var(--brown-lt);
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  text-align: center;
}

.slot-cost {
  font-family: Impact, sans-serif;
  font-size: .85rem;
  color: var(--navy);
  text-align: right;
  white-space: nowrap;
}

.slot-remove-btn {
  background: none;
  border: none;
  color: var(--crimson);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  text-align: center;
  opacity: .7;
}

.slot-remove-btn:hover { opacity: 1; }

.slot-skills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 10px 6px 44px;
  background: rgba(212,196,160,.12);
  border-bottom: 1px solid var(--cream);
}

.skill-pill {
  background: var(--crimson);
  color: var(--offwhite);
  font-size: .65rem;
  font-family: Impact, sans-serif;
  letter-spacing: .06em;
  padding: 1px 7px;
  white-space: nowrap;
}

/* =========================================================================
   ROSTER WARNINGS
   ========================================================================= */

.bb-warnings {
  background: rgba(138,26,26,.12);
  border: 1px solid var(--crimson);
  border-top: none;
  padding: 8px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: .8rem;
  color: var(--crimson-lt);
}

/* =========================================================================
   FORM ACTIONS
   ========================================================================= */

.bb-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

/* =========================================================================
   RESPONSIVE SLOTS
   ========================================================================= */

@media (max-width: 680px) {
  .slot-header-row,
  .slot-row {
    grid-template-columns: 24px 1fr 100px 52px 28px;
  }
  .sh-stats, .slot-stats { display: none; }
}

@media (max-width: 480px) {
  .slot-header-row,
  .slot-row {
    grid-template-columns: 24px 1fr 50px 28px;
  }
  .sh-name, .slot-name-input { display: none; }
}

/* =========================================================================
   GAME MODE
   ========================================================================= */

/* Team info strip */
.gm-info-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  background: var(--navy);
  border: 1px solid var(--gold);
  border-top: 1px solid rgba(201,160,32,.25);
  padding: 8px 14px;
  margin-bottom: 10px;
}

.gm-info-item {
  font-family: Impact, sans-serif;
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--offwhite);
}

.gm-info-label {
  font-size: .62rem;
  letter-spacing: .14em;
  color: var(--gold);
  margin-right: 6px;
}

.gm-special-rules {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding: 0 4px;
}

.gm-sr-label {
  font-family: Impact, sans-serif;
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--gold);
  opacity: .7;
}

.gm-sr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.gm-sr-badge {
  background: rgba(13,31,92,.6);
  border: 1px solid rgba(201,160,32,.3);
  color: var(--offwhite);
  font-size: .72rem;
  font-family: Impact, sans-serif;
  letter-spacing: .06em;
  padding: 2px 10px;
  flex-shrink: 0;
}

.gm-sr-desc {
  font-size: .72rem;
  color: rgba(232,212,168,.75);
  font-style: italic;
  line-height: 1.4;
}

/* Special rules strip in builder */
.b-sr-strip {
  margin: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.b-sr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.b-sr-badge {
  background: rgba(138,26,26,.7);
  border: 1px solid rgba(201,160,32,.4);
  color: var(--offwhite);
  font-size: .7rem;
  font-family: Impact, sans-serif;
  letter-spacing: .06em;
  padding: 2px 10px;
  flex-shrink: 0;
}

.b-sr-desc {
  font-size: .72rem;
  color: var(--brown-dark);
  font-style: italic;
  line-height: 1.4;
}

/* Force header cells to gold so they're visible on the navy background */
.gm-player-header .gph-num,
.gm-player-header .gph-name,
.gm-player-header .gph-pos,
.gm-player-header .gph-stats,
.gm-player-header .gph-skills {
  color: var(--gold);
  font-weight: normal;
}

/* Player table */
.gm-player-table {
  background: var(--parchment);
  border: 1px solid var(--cream);
  margin-bottom: 16px;
}

.gm-player-header {
  display: grid;
  grid-template-columns: 34px 1fr 1fr repeat(5, 52px) 1fr 68px;
  gap: 4px;
  padding: 7px 10px;
  background: var(--navy);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--gold);
  align-items: center;
}

.gm-player-row {
  display: grid;
  grid-template-columns: 34px 1fr 1fr repeat(5, 52px) 1fr 68px;
  gap: 4px;
  padding: 8px 10px;
  align-items: center;
  border-bottom: 1px solid var(--cream);
  min-height: 40px;
}

.gm-player-row:nth-child(even) { background: rgba(212,196,160,.2); }

.gm-player-row.gm-specialist {
  border-left: 4px solid var(--crimson);
}

.gph-num {
  font-family: Impact, sans-serif;
  font-size: .9rem;
  color: var(--brown-lt);
  text-align: center;
}

.gph-name {
  font-family: Impact, sans-serif;
  font-size: .9rem;
  color: var(--navy);
  letter-spacing: .04em;
}

.gph-pos {
  font-size: .8rem;
  color: var(--brown-lt);
  font-style: italic;
}

.gph-stats {
  font-family: 'Courier New', monospace;
  font-size: .82rem;
  font-weight: bold;
  color: var(--navy);
  text-align: center;
}

.gph-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Skill badges in game mode */
.gm-skill-badge {
  background: var(--crimson);
  color: var(--offwhite);
  font-size: .7rem;
  font-family: Impact, sans-serif;
  letter-spacing: .05em;
  padding: 2px 8px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.gm-skill-badge.has-rule {
  cursor: pointer;
  border-color: rgba(232,212,168,.3);
}

.gm-skill-badge.has-rule:hover {
  background: #6a1212;
  border-color: var(--gold);
}

.gm-skill-badge.gm-skill-earned {
  background: #1a3a1a;
  color: #80d880;
  border-color: #2a5a2a;
}
/* Prayers to Nuffle temporary effect badge */
.gm-skill-badge.gm-skill-pn {
  background: rgba(100, 40, 160, .45);
  color: #d8b0f8;
  border-color: rgba(160, 80, 220, .55);
  font-style: italic;
}
/* Stat cells modified by a PN effect */
.gph-stats.pn-stat-buff { color: #80e898; font-weight: 700; }
.gph-stats.pn-stat-nerf { color: #ff8060; font-weight: 700; }
/* Faint left border on rows that have any PN effect applied */
.gm-player-row.gm-player-pn { border-left: 3px solid rgba(160, 80, 220, .55); }

/* Notes */
.gm-notes {
  background: var(--parchment);
  border: 1px solid var(--cream);
  border-left: 3px solid var(--gold);
  padding: 10px 14px;
  font-style: italic;
  color: var(--brown-lt);
  font-size: .85rem;
  margin-top: 10px;
  margin-bottom: 16px;
  white-space: pre-wrap;
}

/* Skills glossary */
.gm-glossary {
  background: var(--parchment);
  border: 1px solid var(--cream);
  border-top: 3px solid var(--navy);
}

.gm-glossary-title {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .9rem;
  letter-spacing: .14em;
  color: var(--offwhite);
  background: var(--navy);
  padding: 8px 14px;
}

.gm-gloss-cat {
  font-family: Impact, sans-serif;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--gold);
  background: rgba(13,31,92,.08);
  padding: 5px 14px 3px;
  border-bottom: 1px solid var(--cream);
  margin-top: 4px;
}

.gm-gloss-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(212,196,160,.5);
  transition: background .2s;
}

.gm-gloss-row:last-child { border-bottom: none; }

.gm-gloss-name {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--crimson);
  align-self: start;
  padding-top: 1px;
}

.gm-gloss-rule {
  font-size: .82rem;
  color: var(--brown);
  line-height: 1.5;
}

.gm-gloss-highlight {
  background: rgba(201,160,32,.25) !important;
}

/* Responsive game view */
@media (max-width: 700px) {
  .gm-player-header,
  .gm-player-row {
    grid-template-columns: 24px 1fr repeat(5, 34px) 1fr 56px;
  }
  .gph-pos { display: none; }

  .gm-gloss-row { grid-template-columns: 1fr; gap: 3px; }
  .gm-gloss-name { font-size: .9rem; }
}

/* Phone: section bars wrap instead of overflowing */
@media (max-width: 600px) {
  .bb-section-bar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
  }
  .bb-section-bar .btn-secondary,
  .bb-section-bar .btn-back {
    font-size: .72rem;
    padding: 5px 10px;
  }
}

/* Phone: skills can't fit inline â€” push them to a full-width row below the stats */
@media (max-width: 580px) {
  /* Print button isn't useful on a phone at the table */
  .bb-section-bar .btn-primary { display: none; }

  /* 8-column grid (no skills column) â€” skills auto-wrap to row 2, status stays in-row */
  .gm-player-header,
  .gm-player-row {
    grid-template-columns: 28px 1fr repeat(5, 30px) 52px;
  }

  /* Skills span the full second row */
  .gph-skills {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 8px 6px 36px;
  }

  /* Status stays in-row — no full-width treatment needed */
  .gm-player-row .gph-status { grid-column: auto; }

  /* "SKILLS & TRAITS" header label is redundant once skills are below each row */
  .gm-player-header .gph-skills { display: none; }
}

/* Print: game mode */
@media print {
  .gm-player-header { background: #ddd; color: #000; }
  .gm-player-table  { background: white; border: 1px solid #999; }
  .gm-glossary      { background: white; border: 1px solid #999; }
  .gm-glossary-title{ background: #ddd; color: #000; }
  .gm-skill-badge   { background: #444; color: white; }
  .gm-info-strip    { background: #ddd; border: 1px solid #999; }
  .gm-info-item, .gm-info-label { color: #000; }
  .gm-gloss-name    { color: #8a1a1a; }
}

/* =========================================================================
   LOGIN VIEW
   ========================================================================= */

.bb-login-wrap {
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}

.bb-login-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  background: var(--parchment);
  border: 1px solid var(--cream);
  border-top: 3px solid var(--crimson);
  padding: 24px 20px;
}

.bb-login-error {
  color: var(--crimson-lt);
  font-size: .82rem;
  font-style: italic;
}

.bb-login-link {
  color: var(--gold);
  text-decoration: underline;
}

/* =========================================================================
   PRINT
   ========================================================================= */

@media print {
  body { background: white; color: #000; }
  .no-print { display: none !important; }

  .bb-header {
    background: white;
    border-bottom: 2px solid #000;
    color: #000;
  }
  .bb-logo-area, .bb-title, .bb-subtitle { color: #000; text-shadow: none; }

  .bb-section-bar {
    background: #ddd;
    border: 1px solid #999;
  }
  .bb-section-title { color: #000; }

  .bb-form-row, #player-slots, .bb-budget-wrap {
    background: white;
    border: 1px solid #999;
  }

  .slot-header-row { background: #ddd; color: #000; }
  .slot-row { break-inside: avoid; }

  .bb-budget-bar-fill { background: #666 !important; }
  .bb-budget-warning { color: #a00; }

  .skill-pill {
    background: #444;
    color: white;
  }

  .slot-row.slot-specialist { border-left: 3px solid #a00; }
}

/* =========================================================================
   RULES REFERENCE VIEW
   ========================================================================= */

/* Fan-made footer â€” always visible at the bottom */
.bb-fan-footer {
  background: var(--navy-dk);
  border-top: 1px solid rgba(201,160,32,.2);
  color: rgba(201,160,32,.45);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .62rem;
  letter-spacing: .1em;
  text-align: center;
  padding: 8px 16px;
}
.bb-fan-footer-full {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(201,160,32,.35);
}
.bb-footer-copy {
  color: var(--gold);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .72rem;
  letter-spacing: .1em;
  margin-bottom: 5px;
}
.bb-footer-email {
  color: var(--offwhite);
  text-decoration: none;
  opacity: .75;
}
.bb-footer-email:hover { opacity: 1; text-decoration: underline; }
.bb-footer-legal {
  color: rgba(201,160,32,.42);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .58rem;
  letter-spacing: .08em;
}

/* Search bar */
.rs-search-bar {
  background: var(--parchment);
  border: 1px solid var(--cream);
  border-top: none;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.rs-search-input {
  flex: 1;
  font-size: .85rem;
  padding: 6px 10px;
}

.rs-search-count {
  font-size: .75rem;
  color: var(--brown-lt);
  white-space: nowrap;
  font-style: italic;
}

/* 7s reminder strip */
.rs-7s-strip {
  background: var(--navy);
  border-left: 4px solid var(--crimson);
  padding: 7px 14px;
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--gold);
}

/* Fan note (in rules view) */
.rs-fan-note {
  background: rgba(13,31,92,.25);
  border: 1px solid rgba(201,160,32,.2);
  color: rgba(201,160,32,.5);
  font-size: .7rem;
  font-style: italic;
  padding: 8px 14px;
  margin: 8px 0 4px;
  line-height: 1.5;
}

/* Accordion container */
.rules-accordion {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Section */
.rs-section {
  border: 1px solid rgba(201,160,32,.25);
}

/* Section header button */
.rs-hdr {
  width: 100%;
  background: var(--navy);
  color: var(--offwhite);
  border: none;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .92rem;
  letter-spacing: .1em;
  text-align: left;
  transition: background .15s;
}

.rs-hdr:hover { background: var(--navy-mid); }

.rs-badge {
  background: var(--crimson);
  color: var(--offwhite);
  font-size: .7rem;
  font-family: Impact, sans-serif;
  letter-spacing: .06em;
  padding: 1px 7px;
  flex-shrink: 0;
}

.rs-chevron {
  margin-left: auto;
  color: var(--gold);
  font-size: .85rem;
  flex-shrink: 0;
}

/* Section body */
.rs-body {
  background: var(--parchment);
  padding: 14px 16px;
  color: var(--brown);
}

/* Two-column layout */
.rs-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.rs-2col-wide {
  grid-template-columns: 1fr 1.6fr;
}

@media (max-width: 680px) {
  .rs-2col, .rs-2col-wide { grid-template-columns: 1fr; }
}

/* Warning block (red-tinted column) */
.rs-warn-block {
  background: rgba(138,26,26,.07);
  border-left: 3px solid var(--crimson);
  padding: 10px 12px;
}

/* Sub-headings */
.rs-sub {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--navy);
  margin-bottom: 7px;
}

.rs-sub-red { color: var(--crimson); }

/* Lists */
.rs-ol, .rs-ul { padding-left: 18px; margin-bottom: 4px; }
.rs-ol li, .rs-ul li { margin-bottom: 5px; font-size: .83rem; line-height: 1.5; }
.rs-ul-red li { color: var(--crimson); }
.rs-ol-procedure { counter-reset: proc; }
.rs-ol-procedure li { font-size: .86rem; }

/* Definition list */
.rs-dl { margin-bottom: 4px; }
.rs-dl dt {
  font-family: Impact, sans-serif;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--crimson);
  margin-top: 8px;
  margin-bottom: 2px;
}
.rs-dl dd { font-size: .82rem; line-height: 1.5; padding-left: 10px; }

/* Reference tables */
.rs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
  margin-bottom: 4px;
}

.rs-table th {
  background: var(--navy);
  color: var(--gold);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .66rem;
  letter-spacing: .12em;
  padding: 5px 8px;
  text-align: left;
}

.rs-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--cream);
  vertical-align: top;
  line-height: 1.45;
}

.rs-table tr:nth-child(even) td { background: rgba(212,196,160,.25); }
.rs-table tr:hover td { background: rgba(201,160,32,.08); }

.rs-table-full { width: 100%; }

.rs-tc { text-align: center; white-space: nowrap; font-weight: bold; }

.rs-td-bad  { background: rgba(138,26,26,.12) !important; color: var(--crimson); font-weight: bold; }
.rs-td-good { background: rgba(20,80,20,.1) !important; color: #2a5a2a; font-weight: bold; }
.rs-tr-warn td { background: rgba(138,26,26,.08); }
.rs-tr-dead td { background: rgba(50,0,0,.18) !important; color: var(--crimson); font-weight: bold; }

/* Post-game explainer section extras */
.rs-formula-block {
  margin: 8px 0;
  padding: 10px 14px;
  background: #120e06;
  border-left: 3px solid var(--gold);
  border-radius: 2px;
}
.rs-formula {
  font-family: 'Courier New', monospace;
  font-size: .82rem;
  color: #d4c4a0;
  letter-spacing: .03em;
}

/* EM table — colour cells */
.rs-em-ok { background: rgba(20,60,20,.35); color: #60c060; font-weight: bold; }
.rs-em-cat { background: rgba(80,10,10,.4); color: #f04040; font-weight: bold; }

.rs-em-table th { font-size: .6rem; padding: 4px 6px; text-align: center; }
.rs-em-table td { text-align: center; font-size: .75rem; padding: 4px 6px; }
.rs-em-table td:first-child { font-weight: bold; color: var(--gold); }

/* D8 direction chart */
.rs-d8-wrap { display: inline-block; }

.rs-d8 {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(3, 36px);
  gap: 2px;
  background: var(--cream);
  border: 2px solid var(--navy);
  padding: 2px;
}

.rs-d8 > div {
  background: var(--navy);
  color: var(--gold);
  font-family: Impact, sans-serif;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.rs-d8-c {
  background: var(--crimson) !important;
  color: var(--offwhite) !important;
  font-size: .9rem !important;
}

.rs-d8-legend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  font-size: .7rem;
  color: var(--brown-lt);
  font-style: italic;
}

/* Block dice results */
.rs-block-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rs-br {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 10px;
  border-left: 4px solid transparent;
  background: rgba(232,212,168,.4);
  font-size: .82rem;
  line-height: 1.45;
}

.rs-br-face {
  font-size: 1.3rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  line-height: 1.2;
}

.rs-br-skull  { border-left-color: var(--crimson-lt); background: rgba(138,26,26,.12); }
.rs-br-bd     { border-left-color: #c07020; background: rgba(180,100,20,.08); }
.rs-br-push   { border-left-color: #2a5a8a; background: rgba(42,90,138,.06); }
.rs-br-stumble{ border-left-color: #6a5a20; background: rgba(100,80,20,.06); }
.rs-br-pow    { border-left-color: #2a6a2a; background: rgba(42,106,42,.08); }

/* Notes and paragraphs */
.rs-note {
  font-size: .76rem;
  color: var(--brown-lt);
  font-style: italic;
  line-height: 1.5;
}

.rs-p {
  font-size: .83rem;
  line-height: 1.5;
  margin-bottom: 6px;
}

.rs-red { color: var(--crimson); font-weight: bold; }

/* Print: rules view */
@media print {
  .bb-fan-footer { display: none; }
  .rs-hdr  { background: #ddd !important; color: #000 !important; }
  .rs-body { background: white; }
  .rs-section { break-inside: avoid; border: 1px solid #ccc; }
  .rs-table th { background: #ddd; color: #000; }
  .rs-7s-strip { background: #ddd; color: #000; border: none; }
  .rs-fan-note { color: #888; border: 1px solid #ccc; }
  .rs-badge { background: #888; color: white; }
  .rs-br { background: #f5f5f5; }
  .rs-br-skull { background: #fee; }
  .rs-br-pow   { background: #efe; }
}

/* =========================================================================
   Desperate Measures Panel
   ========================================================================= */

.dm-panel {
  margin: 28px 0 24px;
}

.dm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--navy-dk);
  border: 1px solid var(--gold);
  border-bottom: none;
  padding: 8px 14px;
}

.dm-title {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--gold);
  flex-shrink: 0;
}

.dm-hint {
  font-size: .72rem;
  color: rgba(232,212,168,.55);
  font-style: italic;
  flex: 1 1 0;
}

.dm-roll-btn {
  background: var(--crimson);
  color: var(--offwhite);
  border: 1px solid var(--gold);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .85rem;
  letter-spacing: .06em;
  padding: 5px 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.dm-roll-btn:hover { background: var(--crimson-lt); }
.dm-roll-btn.dm-roll-disabled { opacity: .4; cursor: default; }

.dm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--gold);
}

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

.dm-card {
  padding: 10px 12px;
  background: var(--parchment);
  border-right: 1px solid rgba(201,160,32,.25);
  border-bottom: 1px solid rgba(201,160,32,.25);
  cursor: default;
  transition: background .12s;
}
.dm-card:nth-child(4n) { border-right: none; }

.dm-card-rolled {
  background: #e8f0d4;
  cursor: pointer;
}
.dm-card-rolled:hover { background: #d8e8c0; }

.dm-card-used {
  background: #ddd;
  opacity: .55;
  cursor: pointer;
}

.dm-card-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}

.dm-num {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1.1rem;
  color: var(--crimson);
  flex-shrink: 0;
  min-width: 18px;
}

.dm-name {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--brown);
  flex: 1 1 0;
}

.dm-badge {
  font-size: .65rem;
  font-family: Impact, 'Arial Narrow', sans-serif;
  letter-spacing: .06em;
  padding: 1px 7px;
  flex-shrink: 0;
}
.dm-badge-rolled { background: var(--navy); color: var(--gold); }
.dm-badge-used   { background: #888; color: #fff; }

.dm-timing {
  font-size: .68rem;
  font-style: italic;
  color: var(--crimson);
  margin-bottom: 4px;
}

.dm-rule {
  font-size: .72rem;
  color: var(--brown-lt);
  line-height: 1.4;
}

/* =========================================================================
   Prayers to Nuffle Panel
   ========================================================================= */

.pn-panel { margin: 28px 0 24px; }

.pn-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #1a0a2a;
  border: 1px solid rgba(192, 144, 240, .5);
  border-bottom: none;
  padding: 8px 14px;
}

.pn-title {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1rem;
  letter-spacing: .08em;
  color: #c090f0;
  flex-shrink: 0;
}

.pn-hint {
  font-size: .72rem;
  color: rgba(192, 144, 240, .55);
  font-style: italic;
  flex: 1 1 0;
}

.pn-roll-btn {
  background: #4a1a6a;
  color: #c090f0;
  border: 1px solid rgba(192, 144, 240, .4);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .8rem;
  letter-spacing: .08em;
  padding: 4px 14px;
  cursor: pointer;
  transition: background .12s;
}

.pn-roll-btn:hover { background: #5a2a7a; }
.pn-roll-btn.pn-roll-disabled { opacity: .4; cursor: default; }

.pn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid rgba(192, 144, 240, .35);
}

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

.pn-card {
  padding: 10px 12px;
  background: var(--parchment);
  border-right: 1px solid rgba(192, 144, 240, .2);
  border-bottom: 1px solid rgba(192, 144, 240, .2);
  cursor: default;
  transition: background .12s;
}

.pn-card:nth-child(4n) { border-right: none; }

.pn-card-rolled { background: #ede0f8; cursor: pointer; }
.pn-card-rolled:hover { background: #dfd0f0; }
.pn-card-used { background: #ddd; opacity: .55; cursor: pointer; }

.pn-card-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}

.pn-num {
  font-family: Impact, sans-serif;
  font-size: 1.1rem;
  color: #6a2a9a;
  flex-shrink: 0;
  min-width: 18px;
}

.pn-name {
  font-family: Impact, sans-serif;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--brown);
  flex: 1 1 0;
}

.pn-badge {
  font-size: .65rem;
  font-family: Impact, sans-serif;
  letter-spacing: .06em;
  padding: 1px 7px;
  flex-shrink: 0;
}

.pn-badge-rolled { background: #4a1a6a; color: #c090f0; }
.pn-badge-used   { background: #888; color: #fff; }

.pn-timing {
  font-size: .68rem;
  font-style: italic;
  color: #6a2a9a;
  margin-bottom: 4px;
}

.pn-rule {
  font-size: .72rem;
  color: var(--brown-lt);
  line-height: 1.4;
}

/* =========================================================================
   Inducement Panel (H2H season games)
   ========================================================================= */

.ind-panel { margin: 28px 0 24px; }
.ind-section { border: 1px solid #2a2a3a; border-radius: 3px; background: #0a0a14; }
.ind-summary {
  cursor: pointer; padding: 8px 12px; font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .8rem; letter-spacing: .14em; color: #a888e8;
  list-style: none; user-select: none; display: flex; align-items: center; gap: 10px;
}
.ind-summary::-webkit-details-marker { display: none; }
.ind-summary::before { content: '▶ '; font-size: .65rem; color: #6a5a9a; }
details[open] .ind-summary::before { content: '▼ '; }
.ind-game-badge {
  font-size: .62rem; letter-spacing: .1em; background: #1a2a1a; color: #80d880;
  padding: 2px 7px; border-radius: 2px; font-family: Impact, 'Arial Narrow', sans-serif;
}
.ind-body { padding: 10px 12px 12px; }
.ind-cash-line {
  font-size: .75rem; margin-bottom: 10px; padding: 5px 10px; border-radius: 2px;
}
.ind-cash-available { background: #0a1a0a; color: #80d840; border: 1px solid #1a3a1a; }
.ind-cash-none { background: #1a1808; color: #6a5a3a; border: 1px solid #2a2414; }
.ind-list { display: flex; flex-direction: column; gap: 4px; }
.ind-list-hdr {
  display: grid; grid-template-columns: 2fr 2fr 1fr 90px 60px;
  font-size: .62rem; color: #5a4a2a; letter-spacing: .08em; padding: 0 4px; margin-bottom: 2px;
}
.ind-row {
  display: grid; grid-template-columns: 2fr 2fr 1fr 90px 60px;
  align-items: center; gap: 6px; padding: 4px 6px;
  border-radius: 2px; font-size: .75rem;
}
.ind-row:hover { background: #0f0f1a; }
.ind-row-other { border-top: 1px solid #1a1a2a; margin-top: 4px; padding-top: 6px; }
.ind-row-name  { color: var(--cream); }
.ind-row-note  { color: #6a5a3a; font-size: .67rem; }
.ind-row-cost  { color: #7a6a5a; font-size: .7rem; text-align: right; }
.ind-row-qty-ctrl { display: flex; align-items: center; gap: 5px; justify-content: center; }
.ind-qty-btn {
  background: #0a0a18; border: 1px solid #2a2a4a; color: #a888e8;
  width: 22px; height: 22px; border-radius: 2px; cursor: pointer; font-size: .9rem; line-height: 1;
}
.ind-qty-btn:hover:not(:disabled) { background: #12124a; }
.ind-qty-btn:disabled { opacity: .3; cursor: default; }
.ind-qty-num { min-width: 20px; text-align: center; color: var(--cream); font-size: .78rem; }
.ind-other-input {
  width: 48px; background: #0a0e14; border: 1px solid #2a3040;
  color: var(--cream); font-size: .78rem; padding: 2px 5px; border-radius: 2px; text-align: right;
}
.ind-other-input:focus { border-color: #a888e8; outline: none; }
.ind-other-unit { font-size: .7rem; color: #6a5a3a; }
.ind-row-linetotal { text-align: right; color: #6a5a3a; font-size: .72rem; }
.ind-linetotal-active { color: var(--gold); font-weight: bold; }
.ind-total-line {
  margin-top: 10px; padding-top: 6px; border-top: 1px solid #1a1a2a;
  font-size: .75rem; color: #9a8a6a; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.ind-total-line strong { color: var(--gold); }
.ind-over-budget { color: #c86030; }
.ind-remainder { font-size: .68rem; color: #7a6a5a; }
.ind-over-warn { font-size: .68rem; color: #c06030; background: #200e08; padding: 2px 7px; border-radius: 2px; }
.ind-opp-summary {
  margin-top: 8px; padding-top: 6px; border-top: 1px solid #1a1a2a;
  font-size: .7rem; color: #6a5a3a;
}
.ind-opp-label { color: #5a4a3a; letter-spacing: .08em; margin-right: 6px; }
.ind-opp-detail { color: #7a6a4a; }

/* =========================================================================
   Weather Bar
   ========================================================================= */

/* =========================================================================
   GAME SETUP PANEL â€” coin flip / weather / kick-off grouped card
   ========================================================================= */
.game-setup-panel {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--gold);
  margin-bottom: 0;
  background: var(--navy);
}

.setup-cell {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 14px;
  gap: 5px;
  border-right: 1px solid rgba(201,160,32,.2);
  min-width: 0;
}
.setup-cell:last-child { border-right: none; }

.setup-cell-kickoff { background: #030e08; }

/* Weather condition tinting via data-wx attribute */
.setup-cell[data-wx="wx-nice"]     { background: #0e1f0e; }
.setup-cell[data-wx="wx-hot"]      { background: #1f1500; }
.setup-cell[data-wx="wx-sunny"]    { background: #181800; }
.setup-cell[data-wx="wx-rain"]     { background: #060f1f; }
.setup-cell[data-wx="wx-blizzard"] { background: #0e0e1a; }

.setup-cell-label {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .6rem;
  letter-spacing: .18em;
  color: rgba(201,160,32,.55);
  text-transform: uppercase;
}

.setup-cell-icon { font-size: 1.3rem; line-height: 1; }

.setup-cell-result {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--offwhite);
  line-height: 1.1;
}

.setup-cell-roll {
  font-size: .65rem;
  color: rgba(201,160,32,.5);
}

.setup-cell-effect {
  font-family: Georgia, serif;
  font-size: .7rem;
  font-style: italic;
  color: rgba(196,180,154,.65);
  line-height: 1.35;
  max-width: 220px;
}

.setup-cell-hint {
  font-size: .62rem;
  font-style: italic;
  color: rgba(196,180,154,.35);
}

.setup-roll-btn {
  background: rgba(201,160,32,.12);
  border: 1px solid rgba(201,160,32,.5);
  color: var(--gold);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .82rem;
  letter-spacing: .1em;
  padding: 6px 18px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.setup-roll-btn:hover { background: rgba(201,160,32,.22); border-color: var(--gold); }

.setup-roll-btn-ko {
  background: rgba(64,192,96,.1);
  border-color: rgba(64,192,96,.45);
  color: #80d880;
}
.setup-roll-btn-ko:hover { background: rgba(64,192,96,.2); border-color: #80d880; }

.setup-reroll-btn {
  background: none;
  border: none;
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .65rem;
  letter-spacing: .08em;
  color: rgba(201,160,32,.45);
  cursor: pointer;
  padding: 2px 6px;
  transition: color .15s;
}
.setup-reroll-btn:hover { color: var(--gold); }

.setup-reroll-btn-ko { color: rgba(64,192,96,.4); }
.setup-reroll-btn-ko:hover { color: #80d880; }

/* Coin flip result colours */
.cf-heads { color: var(--gold); }
.cf-tails { color: #9090d0; }

/* Weather result colours per condition */
.setup-cell[data-wx="wx-nice"]     .setup-cell-result { color: #b8e8b8; }
.setup-cell[data-wx="wx-hot"]      .setup-cell-result { color: #f0c860; }
.setup-cell[data-wx="wx-sunny"]    .setup-cell-result { color: #e8e070; }
.setup-cell[data-wx="wx-rain"]     .setup-cell-result { color: #90b8e8; }
.setup-cell[data-wx="wx-blizzard"] .setup-cell-result { color: #c8d8f0; }

.setup-ko-name { color: #80d880; }

/* =========================================================================
   H2H â€” HEAD-TO-HEAD MODE
   ========================================================================= */

/* H2H code modal */
.h2h-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 400;
  display: flex; align-items: center; justify-content: center;
}
.h2h-modal-inner {
  background: var(--navy);
  border: 2px solid var(--gold);
  padding: 36px 48px;
  text-align: center;
  max-width: 360px; width: 90%;
}
.h2h-modal-label {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--cream);
  margin-bottom: 8px;
}
.h2h-modal-code {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 4rem;
  letter-spacing: .35em;
  color: var(--gold);
  line-height: 1;
  margin: 4px 0 12px;
}
.h2h-modal-hint {
  font-size: .78rem;
  color: var(--cream-dim);
  margin: 0 0 20px;
  font-style: italic;
}
.h2h-modal-btn { margin: 0 auto; }

/* Join strip */
.h2h-join-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--parchment);
  border: 1px solid var(--cream);
  border-top: 3px solid var(--crimson);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.h2h-join-label {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--cream);
  white-space: nowrap;
}
.h2h-code-input {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1.3rem;
  letter-spacing: .3em;
  width: 80px;
  text-transform: uppercase;
  text-align: center;
}
.h2h-roster-select { flex: 1 1 160px; }

/* Roster section dividers */
.roster-section-label {
  grid-column: 1 / -1;
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  letter-spacing: .18em;
  color: var(--gold);
  text-transform: uppercase;
  padding: 6px 0 4px;
  border-bottom: 1px solid #2a2010;
  margin-bottom: 4px;
}
.roster-section-label-guest {
  color: #7090b8;
  border-bottom-color: #1a2a3a;
  margin-top: 8px;
}

/* Roster card â€” guest styling */
.roster-card-guest {
  border-left-color: #3a5a8a;
  background: #1a2235;
}
.roster-card-guest .roster-name { color: #a8c4e8; }
.roster-card-guest .roster-card-stats { color: #6a8aaa; }
.roster-guest-badge {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .6rem;
  letter-spacing: .12em;
  background: var(--navy);
  color: #90b8e8;
  border: 1px solid #4a6a9a;
  padding: 1px 6px;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: middle;
}
.btn-h2h {
  background: var(--navy);
  color: #90b8e8;
  border-color: #4a6a9a;
}
.btn-h2h:hover { background: #1a2a5a; }

/* H2H game layout */
.h2h-tv-banner {
  background: var(--navy);
  border-left: 4px solid var(--gold);
  padding: 7px 16px;
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .85rem;
  letter-spacing: .07em;
  color: var(--offwhite);
  margin-bottom: 12px;
}
.h2h-my-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .8rem;
  letter-spacing: .14em;
  color: var(--gold);
  padding: 6px 0 4px;
}
.h2h-opp-divider {
  border-top: 3px solid var(--crimson);
  margin: 24px 0 0;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.h2h-opp-label {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .8rem;
  letter-spacing: .14em;
  color: var(--crimson-lt);
}

/* Waiting state */
.h2h-waiting {
  text-align: center;
  padding: 40px 20px;
  color: var(--offwhite);
}
.h2h-waiting p { margin-bottom: 8px; }
.h2h-code-big {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 3rem;
  letter-spacing: .3em;
  color: var(--gold);
  margin: 10px 0 6px;
}
.h2h-waiting-hint {
  font-size: .82rem;
  font-style: italic;
}

/* =========================================================================
   H2H â€” PLAYER STATUS TRACKING
   ========================================================================= */


.gph-status {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Status toggle button */
.ps-btn {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .72rem;
  letter-spacing: .08em;
  padding: 3px 6px;
  border: 1px solid var(--cream);
  background: transparent;
  color: var(--brown-lt);
  cursor: pointer;
  min-width: 52px;
  text-align: center;
}

.ps-btn-prn  { background: #7a5e00; color: #ffe080; border-color: #b8920a; }
.ps-btn-stn  { background: #6a1010; color: #ffb0b0; border-color: #8a2020; }
.ps-btn-res  { background: #1a3a5a; color: #80b8e0; border-color: #2a6090; }
.ps-btn-ko   { background: #7a5a00; color: #ffe080; border-color: #c9a020; }
.ps-btn-cas  { background: #6a2a00; color: #ffb060; border-color: #c06020; }
.ps-btn-dead { background: #4a0808; color: #ff8080; border-color: #8a1a1a; text-decoration: line-through; }

/* Row state overrides */
.gm-player-row.ps-res {
  opacity: .6;
  border-left: 4px solid #2a6090;
  background: rgba(20, 50, 90, .08) !important;
}
.gm-player-row.ps-res .gph-name { color: #2a6090; }

.gm-player-row.ps-ko {
  opacity: .75;
  border-left: 4px solid var(--gold);
}
.gm-player-row.ps-ko .gph-name { color: #7a5a00; }

.gm-player-row.ps-cas {
  opacity: .7;
  border-left: 4px solid #c06020;
}
.gm-player-row.ps-cas .gph-name { color: #8a4010; }

.gm-player-row.ps-dead {
  opacity: .55;
  border-left: 4px solid var(--crimson);
  background: rgba(100, 10, 10, .08) !important;
}
.gm-player-row.ps-dead .gph-name {
  text-decoration: line-through;
  color: var(--crimson);
}

.gm-player-row.ps-prn {
  opacity: .85;
  border-left: 4px solid #b8920a;
}
.gm-player-row.ps-prn .gph-name { color: #b8920a; }

.gm-player-row.ps-stn {
  opacity: .8;
  border-left: 4px solid #8a2020;
}
.gm-player-row.ps-stn .gph-name { color: #d06060; }

/* =========================================================================
   H2H â€” RE-ROLL PIPS
   ========================================================================= */
.rr-pips {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  vertical-align: middle;
}
.rr-pip {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px;
}
.rr-avail       { color: var(--gold); }
.rr-used        { color: var(--brown-lt); opacity: .5; }
.rr-free-avail  { color: #40c060; font-size: .9rem; cursor: pointer; }
.rr-free-avail:hover { color: #60e080; }
.rr-free-used   { color: #40c060; opacity: .3; font-size: .9rem; cursor: pointer; }
.rr-add-free {
  background: none;
  border: 1px solid rgba(64,192,96,.35);
  border-radius: 3px;
  color: #40c060;
  font-size: .72rem;
  line-height: 1;
  padding: 2px 5px;
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s, border-color .15s;
  vertical-align: middle;
}
.rr-add-free:hover { opacity: 1; border-color: #40c060; }
/* Bribe pips â€” teal to distinguish from re-rolls */
.bribe-avail { color: #40b8c8; font-size: .9rem; cursor: pointer; }
.bribe-avail:hover { color: #60d8e8; }
.bribe-used  { color: #40b8c8; opacity: .3; font-size: .9rem; cursor: pointer; }
.bribe-pips .rr-add-free { border-color: rgba(64,184,200,.35); color: #40b8c8; }
.bribe-pips .rr-add-free:hover { border-color: #40b8c8; opacity: 1; }

/* =========================================================================
   H2H â€” SCOREBOARD
   ========================================================================= */
.h2h-scoreboard {
  background: var(--navy);
  border: 2px solid var(--gold);
  margin-bottom: 10px;
  padding: 10px 14px;
}
.hb-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  width: 100%;
}
.hb-scores {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  width: 100%;
}
.hb-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
  min-height: 90px;
  padding: 10px 8px;
  flex: 1;
  position: relative;
  overflow: hidden;
}

.hb-team-photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 75%;
  background-size: cover;
  background-position: center center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.7) 40%, black 75%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.7) 40%, black 75%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}
.hb-team-photo.has-photo { opacity: .65; }

.hb-team-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hb-team-name {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--cream);
  text-align: center;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hb-score-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hb-score {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 2.4rem;
  letter-spacing: .06em;
  color: var(--gold);
  min-width: 36px;
  text-align: center;
  line-height: 1;
}
.hb-vs {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .9rem;
  letter-spacing: .15em;
  color: var(--crimson-lt);
}
.hb-step {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(201,160,32,.3);
  color: var(--gold);
  font-family: Impact, sans-serif;
  font-size: .9rem;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hb-step:hover { background: rgba(201,160,32,.2); }
.hb-score-btn { font-size: 1.1rem; width: 32px; height: 32px; }

.hb-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.hb-meta-label {
  font-family: Impact, sans-serif;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--cream);
}
.hb-meta-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(201,160,32,.4);
  color: var(--gold-lt);
  font-family: Impact, sans-serif;
  font-size: .72rem;
  letter-spacing: .1em;
  padding: 4px 10px;
  cursor: pointer;
}
.hb-meta-btn:hover { background: rgba(201,160,32,.2); }
.hb-turn-num {
  font-family: Impact, sans-serif;
  font-size: 1rem;
  color: var(--gold);
  min-width: 18px;
  text-align: center;
}
.hb-meta-ro {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--cream);
  margin-top: 4px;
}
.hb-readonly { flex-direction: column; align-items: center; gap: 6px; }

/* ---- Landing hero ---- */
#bb-landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 48px;
}
.bb-hero-logo {
  max-width: min(480px, 90vw);
  height: auto;
}
.bb-hero-roster-btn {
  margin-top: 28px;
  font-size: 1.1rem;
  letter-spacing: .12em;
  padding: 12px 36px;
}
.bb-section-title-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: none;
}
.bb-section-title-btn:hover { text-decoration: underline; }

/* ---- Live games strip (landing view) ---- */
.lg-strip {
  border-bottom: 1px solid #1a2a1a;
  background: #060f06;
}
.lg-strip-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 14px;
}
.lg-empty {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .7rem;
  letter-spacing: .12em;
  color: #2a3a2a;
}
.lg-last-game {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lg-last-label {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .65rem;
  letter-spacing: .1em;
  color: #3a5a3a;
}
.lg-last-matchup {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
}
.lg-last-team   { color: #5a7a5a; font-family: 'Arial Narrow', Arial, sans-serif; }
.lg-last-winner { color: #c9a227; font-weight: bold; }
.lg-last-score  { font-family: Impact, 'Arial Narrow', sans-serif; font-size: .9rem; color: #8a9a8a; }
.lg-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0a1a0a;
  border: 1px solid #1e4a1e;
  border-radius: 3px;
  padding: 6px 14px;
}
.lg-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #40c040;
  box-shadow: 0 0 6px #40c04099;
  animation: lg-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes lg-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}
.lg-code {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .75rem;
  letter-spacing: .2em;
  color: #40c040;
  background: #0f2a0f;
  padding: 1px 7px;
  border-radius: 2px;
  flex-shrink: 0;
}
.lg-matchup {
  flex: 1;              /* fills remaining card width */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lg-team {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .85rem;
  letter-spacing: .05em;
  color: #c4b49a;
}
.lg-score {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1.25rem;
  color: #e8e0cc;
  min-width: 22px;
  text-align: center;
}
.lg-vs {
  color: #4a4030;
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .75rem;
}
.lg-meta {
  font-size: .65rem;
  color: #4a6a4a;
  letter-spacing: .08em;
  font-family: Impact, 'Arial Narrow', sans-serif;
  flex-shrink: 0;
}
.lg-spectate-btn {
  font-size: .7rem;
  padding: 3px 10px;
  text-decoration: none;
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .lg-card { gap: 4px 8px; padding: 6px 8px; flex-wrap: wrap; }
  .lg-code { display: none; }
  .lg-meta { display: none; }
  .lg-matchup { flex: 1; min-width: 0; }
  .lg-spectate-btn { flex: 0 0 100%; text-align: center; }
}

/* Scheduled game card */
.lg-sched-card {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lg-sched-soon { animation: lg-pulse 1.2s ease-in-out infinite; }
.lg-sched-icon { font-size: 1rem; }
.lg-sched-label {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .65rem;
  letter-spacing: .15em;
  color: #4a7a4a;
}
.lg-sched-when {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .85rem;
  letter-spacing: .06em;
  color: #c4b49a;
}
.lg-sched-countdown {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .75rem;
  color: #80d880;
  background: #0f2a0f;
  padding: 1px 8px;
  border-radius: 2px;
}
.lg-sched-note {
  font-size: .72rem;
  color: #6a8a6a;
  font-style: italic;
  font-family: Georgia, serif;
}

/* Admin schedule edit button */
.lg-sched-edit-btn {
  margin-left: auto;
  font-size: .7rem;
  padding: 3px 10px;
  flex-shrink: 0;
}

/* Admin schedule form (below the strip inner row) */
.lg-sched-form {
  border-top: 1px solid #1a2a1a;
  padding: 8px 14px;
}
.lg-sched-form-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.lg-sched-form-label {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .65rem;
  letter-spacing: .15em;
  color: #4a7a4a;
  flex-shrink: 0;
}
.lg-sched-input {
  font-size: .8rem;
  padding: 4px 8px;
  background: #0a180a;
  border-color: #2a4a2a;
  color: #c4b49a;
}
.lg-sched-input[type="date"],
.lg-sched-input[type="time"] { width: auto; flex-shrink: 0; }
.lg-sched-input[type="text"]  { flex: 1 1 160px; }
.lg-sched-select { flex-shrink: 0; cursor: pointer; }

/* Scheduled game type badge */
.lg-sched-type {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .72rem;
  letter-spacing: .1em;
  padding: 2px 8px;
  border-radius: 2px;
}
.lg-sched-type-scrimmage { background: #1a2a1a; color: #80d880; }
.lg-sched-type-season    { background: #0a1a3a; color: #80a8e8; }

/* Scheduled game matchup line */
.lg-sched-matchup {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.lg-sched-team {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .82rem;
  letter-spacing: .04em;
  color: #c9a227;
}
.lg-sched-record {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .72rem;
  color: #6a8a6a;
}
.lg-sched-vs {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .65rem;
  letter-spacing: .12em;
  color: #4a5a4a;
}

/* kick-off bar colours now handled by .setup-cell-kickoff and .setup-ko-name */

/* ---- Casualty Modal ---- */
.cas-modal-inner {
  min-width: 300px;
  max-width: 480px;
  text-align: center;
}
.cas-modal-roll-num {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 3rem;
  line-height: 1;
  color: #8a7060;
  letter-spacing: .1em;
  margin-bottom: 6px;
}
.cas-modal-name {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1.8rem;
  letter-spacing: .1em;
  margin-bottom: 10px;
}
.cas-modal-desc {
  font-family: Georgia, serif;
  font-size: .85rem;
  color: #c4b49a;
  line-height: 1.5;
}
/* Casualty severity colours â€” BB7s 2D6 Sevens Injury Table */
.cas-stunned { color: #7a7a7a; }
.cas-ko      { color: #c9a227; }
.cas-bh      { color: #e07820; }
.cas-sh      { color: #e04820; }
.cas-dead    { color: #e02020; }
/* Stunty toggle */
.cas-stunty-toggle { display:block; font-size:.75rem; color:#8a7a5a; margin-bottom:10px; cursor:pointer; }
.cas-stunty-toggle input { margin-right:5px; cursor:pointer; }

/* ---- Pre-Game Sequence Modal ---- */
.pregame-modal-inner {
  min-width: 300px;
  max-width: 520px;
  text-align: left;
}
.pregame-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: #c9a227;
  letter-spacing: .1em;
  margin: 0 0 16px;
  text-align: center;
}
.pregame-steps {
  margin: 0;
  padding-left: 1.4em;
  list-style: decimal;
}
.pregame-steps li {
  font-family: Georgia, serif;
  font-size: .85rem;
  color: #c4b49a;
  line-height: 1.55;
  margin-bottom: 12px;
}
.pregame-steps li:last-child { margin-bottom: 0; }
.pregame-step-name {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  color: #c9a227;
  letter-spacing: .06em;
  margin-bottom: 2px;
}

/* ---- H2H code modal spectate row ---- */
.h2h-spectate-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: #0a180a;
  border: 1px solid #1a4a1a;
  border-radius: 3px;
  padding: 8px 12px;
  margin: 12px 0;
}
.h2h-spectate-label {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .65rem;
  letter-spacing: .15em;
  color: #3a7a3a;
  flex-shrink: 0;
}
.h2h-spectate-url {
  flex: 1 1 180px;
  font-size: .72rem;
  color: #80d880;
  word-break: break-all;
}
.h2h-spectate-copy {
  font-size: .72rem;
  padding: 3px 10px;
  flex-shrink: 0;
}

/* ---- Star players table ---- */
.rs-star-table { font-size: .78rem; }
.rs-star-table th { font-size: .68rem; }
.rs-star-name { font-family: Impact, 'Arial Narrow', sans-serif; letter-spacing: .04em; color: #c9a227; white-space: nowrap; }
.rs-star-table .rs-tier-row td { background: rgba(70,15,80,.55); border-left: 3px solid #8a4a9a; color: #c9a227; font-family: Cinzel, serif; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px; }

/* ---- Possession dot ---- */
.hb-name-row { display:flex; align-items:center; gap:4px; justify-content:center; }
.hb-poss-dot { background:none; border:none; cursor:pointer; font-size:.9rem; line-height:1; padding:0 2px; transition:color .15s; }
.hb-poss-dot.poss-on  { color:#c9a227; }
.hb-poss-dot.poss-off { color:#1a1615; }
.hb-poss-dot.poss-off:hover { color:#3a3020; }
span.hb-poss-dot { cursor:default; }
.sp-poss-dot { font-size:.65rem; line-height:1; }
.sp-poss-dot.poss-on  { color:#c9a227; }
.sp-poss-dot.poss-off { color:#0e0c0a; }

/* ---- Finalize modal ---- */
.finalize-score { font-family:Impact,'Arial Narrow',sans-serif; font-size:1.15rem; color:#c4b49a; text-align:center; margin:12px 0 4px; letter-spacing:.04em; }
.fin-score { font-size:1.6rem; color:#c9a227; margin:0 8px; }
.fin-team  { color:#7a6a5a; }

/* ---- Game history view ---- */
.history-content { padding:16px; max-width:960px; margin:0 auto; }
.hist-upcoming {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#0d1828; border:1px solid #1a3050; border-left:4px solid #c9a227;
  padding:10px 14px; margin-bottom:16px; border-radius:3px;
}
.hist-upcoming-label { font-family:Impact,'Arial Narrow',sans-serif; letter-spacing:.1em; color:#c9a227; font-size:.8rem; flex-shrink:0; }
.hist-upcoming-when  { color:#c4b49a; font-size:.9rem; }
.hist-upcoming-note  { color:#5a5040; font-size:.8rem; margin-left:auto; }
.hist-card { background:#0d1017; border:1px solid #1a2030; border-radius:3px; padding:10px 14px; margin-bottom:8px; }
.hist-date { font-family:'Cinzel',serif; font-size:.72rem; color:#5a5040; display:block; margin-bottom:6px; }
.hist-matchup { display:flex; align-items:center; gap:10px; }
.hist-team { flex:1; font-family:Impact,'Arial Narrow',sans-serif; letter-spacing:.06em; font-size:.9rem; color:#7a6a5a; }
.hist-team-right { text-align:right; }
.hist-winner { color:#c9a227; }
.hist-score { font-family:Impact,'Arial Narrow',sans-serif; font-size:1.3rem; color:#c4b49a; letter-spacing:.05em; white-space:nowrap; }
.hist-result-badge { display:inline-block; margin-top:4px; font-family:Impact,'Arial Narrow',sans-serif; font-size:.68rem; letter-spacing:.1em; padding:1px 6px; border-radius:2px; }
.hist-draw { background:#2a2828; color:#6a6060; }
.hist-empty { color:#5a5040; font-size:.9rem; padding:20px; text-align:center; }
.hist-cas-block { margin-top:8px; display:flex; flex-direction:column; gap:4px; border-top:1px solid #1e1c18; padding-top:6px; }
.hist-casualties { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.hist-cas-team { font-family:Impact,'Arial Narrow',sans-serif; font-size:.65rem; letter-spacing:.08em; color:#5a5040; min-width:60px; flex-shrink:0; }
.hist-cas-badge { font-size:.68rem; padding:1px 6px; border-radius:2px; white-space:nowrap; }
.hist-cas-badge em { font-style:normal; font-weight:bold; margin-left:3px; }
.hcas-ko   { background:#1a2a3a; color:#6090c0; }
.hcas-cas  { background:#2a1a08; color:#c08040; }
.hcas-dead { background:#1a0808; color:#c04040; }

/* ---- Play-by-play event log ---- */
.event-log {
  margin: 10px 0;
  border: 1px solid #1a2a1a;
  border-radius: 3px;
  background: #060d06;
  padding: 6px 0;
  max-height: 220px;
  overflow-y: auto;
}
.event-log::-webkit-scrollbar { width: 4px; }
.event-log::-webkit-scrollbar-track { background: #060d06; }
.event-log::-webkit-scrollbar-thumb { background: #2a3a2a; border-radius: 2px; }
.ev-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  font-size: .75rem;
  border-bottom: 1px solid #0e160e;
}
.ev-row:last-child { border-bottom: none; }
.ev-turn {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .65rem;
  letter-spacing: .08em;
  color: #3a4a3a;
  flex-shrink: 0;
  min-width: 34px;
}
.ev-icon { flex-shrink: 0; font-size: .8rem; }
.ev-msg  { color: #8a7a60; flex: 1; }

/* Event type colours */
.ev-td     .ev-msg { color: #c9a227; font-family: Impact, 'Arial Narrow', sans-serif; letter-spacing: .06em; font-size: .8rem; }
.ev-half   .ev-msg { color: #9a9080; font-style: italic; }
.ev-reroll .ev-msg { color: #60a0a0; }
.ev-dm     .ev-msg { color: #a060c0; }
.ev-weather  .ev-msg { color: #6080a0; }
.ev-kickoff  .ev-msg { color: #60a060; }
.ev-tackle   .ev-msg { color: #4a8a9a; }
.ev-tackle-link { color: #4a8a9a; text-decoration: underline; margin-left: 4px; }
.ev-tackle-link:hover { color: #7ababc; }

/* Injury severity */
.ev-inj-ko   .ev-msg { color: #6090c0; }
.ev-inj-cas  .ev-msg { color: #c08040; }
.ev-inj-dead .ev-msg { color: #c04040; }

/* In spectator page (inline style override since spectator has no full stylesheet context) */
.sp-event-log { margin: 14px 0 0; }

/* In history (collapsible) */
.hist-report { margin-top: 8px; border-top: 1px solid #1e1c18; padding-top: 6px; }
.hist-report-summary {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .68rem;
  letter-spacing: .1em;
  color: #5a5040;
  cursor: pointer;
  user-select: none;
}
.hist-report-summary:hover { color: #8a7a60; }
.hist-event-log { max-height: 180px; margin-top: 6px; }

/* Coin flip colours now handled by .cf-heads / .cf-tails in game-setup-panel block */
/* Spectator coin flip */
.sp-coin-flip { color: #9898d8; }

/* ---- Dice Tray Modal ---- */
.dt-modal-inner {
  min-width: 320px;
  max-width: 520px;
  text-align: left;
}
.dt-section {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #1e1c18;
}
.dt-section-title {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .7rem;
  letter-spacing: .15em;
  color: #5a5040;
  margin-bottom: 8px;
}
.dt-std-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dt-die-btn {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .9rem;
  letter-spacing: .1em;
  padding: 6px 16px;
}
.dt-results {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  min-height: 36px;
}
/* Standard die chip */
.dt-die-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: #1a1615;
  border: 1px solid #3a3028;
  border-radius: 4px;
  padding: 4px 10px;
  min-width: 48px;
}
.dt-die-label {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .6rem;
  letter-spacing: .12em;
  color: #5a5040;
}
.dt-die-val {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1.5rem;
  line-height: 1.1;
  color: #c9a227;
}
/* Block dice results in dice tray â€” reuses .rs-br colour classes but overrides for dark modal */
.dt-block-results {
  flex-direction: column;
  gap: 4px;
}
.dt-block-row {
  border-radius: 3px;
  font-size: .82rem;
}
.dt-block-desc {
  color: #9a8a70;
  font-size: .78rem;
}
/* Brighter overrides for dark modal context */
.dt-block-row.rs-br-skull  { border-left-color: #e04040; background: rgba(180,40,40,.18); color: #f08080; }
.dt-block-row.rs-br-bd     { border-left-color: #e08030; background: rgba(200,120,30,.14); color: #f0a050; }
.dt-block-row.rs-br-push   { border-left-color: #4090d0; background: rgba(60,120,180,.12); color: #80c0f0; }
.dt-block-row.rs-br-stumble{ border-left-color: #c0a030; background: rgba(160,130,20,.12); color: #e0c060; }
.dt-block-row.rs-br-pow    { border-left-color: #40b040; background: rgba(50,150,50,.12);  color: #80e080; }
/* Face icon inherits colour from row; name uses same */
.dt-block-row strong { color: inherit; }

/* Roster name validation */
.slot-name-input.slot-name-error { border-color: #d04040; box-shadow: 0 0 0 2px rgba(208,64,64,.3); }
.roster-name-banner { background: #3a0a0a; border: 1px solid #c03030; border-radius: 4px; color: #f08080;
  font-family: Impact, sans-serif; letter-spacing: .06em; font-size: .85rem;
  padding: 8px 14px; margin-top: 10px; }

/* Name field + per-slot dice button */
.slot-name-wrap { display: flex; gap: 3px; align-items: center; min-width: 0; }
.slot-name-wrap .slot-name-input { flex: 1; min-width: 0; }
.slot-dice-name {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(201,162,39,.25);
  border-radius: 3px;
  color: var(--gold);
  font-size: .95rem;
  line-height: 1;
  padding: 3px 5px;
  cursor: pointer;
  opacity: .7;
  transition: opacity .15s, border-color .15s;
}
.slot-dice-name:hover { opacity: 1; border-color: var(--gold); }

/* Skill tooltip modal */
.st-modal-inner { max-width: 380px; text-align: left; }
.st-skill-name  { font-family: Impact, sans-serif; font-size: 1.5rem; letter-spacing: .06em; color: var(--gold); margin-bottom: 4px; }
.st-skill-cat   { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); opacity: .7; margin-bottom: 12px; }
.st-skill-rule  { font-family: Georgia, serif; font-size: .88rem; line-height: 1.5; color: var(--offwhite); }

/* =========================================================================
   Season / standings
   ========================================================================= */

/* Season view header */
.season-view-header {
  font-family: Impact, sans-serif;
  font-size: 1.4rem;
  letter-spacing: .08em;
  color: var(--gold);
  text-align: center;
  padding: 12px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Season list stacked cards */
.season-card {
  background: #0e0d0a;
  border: 1px solid rgba(201,160,32,.25);
  border-left: 4px solid rgba(201,160,32,.25);
  border-radius: 4px;
  padding: 14px 16px;
  margin: 0 0 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.season-card:hover { border-color: var(--gold); background: #141208; }
.season-card-active { border-left-color: #2a8a2a; }
.season-card-ended  { border-left-color: #5a4a20; opacity: .75; }
.season-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.season-card-name {
  font-family: 'Impact', sans-serif;
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--gold);
  flex: 1;
}
.season-card-meta {
  font-size: .72rem;
  color: rgba(196,180,154,.7);
  letter-spacing: .04em;
}
.season-card-teams {
  font-size: .7rem;
  color: rgba(196,180,154,.5);
  margin-top: 3px;
}
.season-admin-section { margin-top: 0; }
.h2h-warn {
  font-size: .72rem;
  color: #e87070;
  padding: 6px 0;
}

/* Status badges */
.season-status-badge {
  font-size: .62rem;
  letter-spacing: .12em;
  padding: 2px 7px;
  border-radius: 3px;
  vertical-align: middle;
  font-family: Impact, sans-serif;
}
.season-status-active { background: #1a4a1a; color: #80e880; border: 1px solid #2a7a2a; }
.season-status-ended  { background: #3a2a10; color: var(--gold); border: 1px solid #5a4a20; }

/* Standings table */
.season-standings-wrap { overflow-x: auto; margin: 12px 0; }
.season-standings {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
.season-standings thead tr {
  background: rgba(201,160,32,.15);
  border-bottom: 1px solid rgba(201,160,32,.3);
}
.season-standings th {
  font-family: Impact, sans-serif;
  letter-spacing: .06em;
  color: var(--gold);
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
}
.standings-th-team { text-align: left !important; }
.season-standings td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--offwhite);
  text-align: center;
  vertical-align: middle;
}
.standings-team { text-align: left !important; display: flex; align-items: center; gap: 6px; }
.standings-pos {
  display: inline-block;
  width: 18px;
  font-family: Impact, sans-serif;
  color: rgba(201,160,32,.5);
  font-size: .7rem;
  flex-shrink: 0;
}
.standings-num { font-family: Impact, sans-serif; font-size: .88rem; }
.standings-pts { color: var(--gold) !important; font-size: .95rem !important; }
.standings-you {
  font-size: .6rem;
  background: var(--gold);
  color: var(--navy-dk);
  padding: 1px 4px;
  border-radius: 2px;
  font-family: Impact, sans-serif;
  letter-spacing: .06em;
}
/* Logged-in coach's row highlighted */
.season-standings tr.standings-me td {
  background: rgba(201,160,32,.08);
}
.season-standings tr.standings-me td.standings-pts {
  color: #e8c840 !important;
}

/* My team button strip */
.season-my-team-wrap {
  text-align: center;
  padding: 10px 0 4px;
}

/* Recent results */
.season-results-header {
  font-family: Impact, sans-serif;
  letter-spacing: .1em;
  color: var(--gold);
  font-size: .78rem;
  text-align: center;
  padding: 12px 0 6px;
  border-top: 1px solid rgba(201,160,32,.2);
  margin-top: 8px;
}
.season-results-strip {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.season-result-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,.04);
  border-radius: 4px;
  font-size: .75rem;
  border-left: 3px solid transparent;
}
.season-result-card.sr-host-win  { border-left-color: #2a8a2a; }
.season-result-card.sr-guest-win { border-left-color: var(--crimson); }
.season-result-card.sr-draw      { border-left-color: #5a5a2a; }
.sr-team  { flex: 1; color: var(--offwhite); }
.sr-score { font-family: Impact, sans-serif; font-size: .9rem; color: var(--gold); white-space: nowrap; }
.sr-date  { color: var(--cream); opacity: .55; font-size: .68rem; white-space: nowrap; }

/* =========================================================================
   Coach PIN modal
   ========================================================================= */
.coach-pin-modal-inner {
  max-width: 300px;
  text-align: center;
  padding: 28px 24px 20px;
}
.coach-pin-title {
  font-family: Impact, sans-serif;
  font-size: 1.25rem;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: 6px;
}
.coach-pin-roster-name {
  font-family: Georgia, serif;
  font-size: .82rem;
  color: var(--cream);
  margin-bottom: 14px;
  opacity: .9;
}
.coach-pin-modal-inner input[type="password"] {
  width: 100%;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(201,160,32,.3);
  border-radius: 4px;
  color: var(--offwhite);
  font-size: .95rem;
  padding: 9px 12px;
  text-align: center;
  letter-spacing: .2em;
  margin-bottom: 10px;
  outline: none;
}
.coach-pin-modal-inner input[type="password"]:focus { border-color: var(--gold); }
.coach-pin-error {
  color: #e85050;
  font-size: .72rem;
  margin-bottom: 8px;
  letter-spacing: .04em;
}
.coach-pin-modal-inner .btn-primary,
.coach-pin-modal-inner .btn-back {
  width: 100%;
  margin-bottom: 6px;
}

/* =========================================================================
   Roster card season/coach badges
   ========================================================================= */
.roster-card-mine { border-color: rgba(201,160,32,.5) !important; }
.roster-mine-badge {
  display: inline-block;
  font-size: .6rem;
  font-family: Impact, sans-serif;
  letter-spacing: .1em;
  background: var(--gold);
  color: var(--navy-dk);
  padding: 1px 6px;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: middle;
}
.roster-season-badge {
  display: inline-block;
  font-size: .6rem;
  font-family: Impact, sans-serif;
  letter-spacing: .1em;
  background: #1a4a1a;
  color: #80e880;
  border: 1px solid #2a7a2a;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: middle;
}

/* =========================================================================
   Season admin section
   ========================================================================= */
.season-admin-section {
  margin-top: 20px;
  padding: 14px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(201,160,32,.15);
  border-radius: 6px;
}
.season-admin-header {
  font-family: Impact, sans-serif;
  font-size: .88rem;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: 10px;
}
.season-admin-subheader {
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--cream);
  opacity: .65;
  text-transform: uppercase;
  margin: 12px 0 6px;
}

/* PIN list per season roster */
.season-pin-list { display: flex; flex-direction: column; gap: 8px; }
.season-pin-row  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.season-pin-team { flex: 1; font-size: .78rem; color: var(--offwhite); }
.season-pin-status {
  font-size: .65rem;
  font-family: Impact, sans-serif;
  letter-spacing: .08em;
  padding: 2px 6px;
  border-radius: 2px;
}
.pin-set   { background: #1a3a1a; color: #80d080; border: 1px solid #2a5a2a; }
.pin-unset { background: #3a1a1a; color: #d08080; border: 1px solid #5a2a2a; }
.season-pin-form { display: none; margin-top: 6px; width: 100%; }
.season-pin-form input {
  width: 100%;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(201,160,32,.3);
  border-radius: 4px;
  color: var(--offwhite);
  font-size: .82rem;
  padding: 6px 10px;
  margin-bottom: 4px;
  outline: none;
}
.season-pin-form input:focus { border-color: var(--gold); }

/* Roster checkboxes for create/update season */
.season-roster-checkboxes { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.season-roster-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--offwhite);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.season-roster-check:hover { background: rgba(201,160,32,.06); }
.season-roster-check input[type="checkbox"] { accent-color: var(--gold); }

/* Create season form */
.season-create-form input[type="text"] {
  width: 100%;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(201,160,32,.3);
  border-radius: 4px;
  color: var(--offwhite);
  font-size: .88rem;
  padding: 8px 12px;
  margin-bottom: 8px;
  outline: none;
}
.season-create-form input[type="text"]:focus { border-color: var(--gold); }

/* Finalize modal â€” season game checkbox */
.finalize-season-row {
  margin: 8px 0 2px;
  text-align: center;
}
.finalize-season-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  color: var(--cream);
  cursor: pointer;
  letter-spacing: .04em;
}
.finalize-season-label input[type="checkbox"] { accent-color: var(--gold); cursor: pointer; }

.h2h-game-type-row {
  margin: 10px 0 6px;
  text-align: center;
}
.h2h-game-type-label {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .65rem;
  letter-spacing: .18em;
  color: #8a7a5a;
  margin-bottom: 7px;
}
.h2h-type-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 10px;
  cursor: pointer;
  font-size: .8rem;
  color: var(--cream);
  letter-spacing: .03em;
}
.h2h-type-opt input[type="radio"] { accent-color: var(--gold); cursor: pointer; }

/* =========================================================================
   Post-Game Form Modal
   ========================================================================= */

.pg-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 450;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px 12px;
  overflow-y: auto;
}
.pg-modal {
  background: #0d1017;
  border: 2px solid var(--gold);
  width: 100%; max-width: 1200px;
}
.pg-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(201,162,39,.4);
  background: #0a0c10;
}
.pg-modal-title {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1rem; letter-spacing: .14em;
  color: var(--gold);
}
.pg-close-btn {
  background: none; border: none;
  color: #7a6a50; font-size: 1.1rem;
  cursor: pointer; padding: 4px 8px;
  transition: color .15s;
}
.pg-close-btn:hover { color: var(--cream); }

#pg-content { padding: 16px; }

.pg-game-summary {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-bottom: 4px;
}
.pg-team-a, .pg-team-b {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1rem; letter-spacing: .06em; color: var(--cream);
}
.pg-game-score {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1.8rem; letter-spacing: .1em; color: var(--gold);
}
.pg-season-tag {
  text-align: center; font-size: .7rem; letter-spacing: .12em;
  color: #7a6a50; margin-bottom: 16px; text-transform: uppercase;
}

.pg-teams-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;
}
@media (max-width: 620px) { .pg-teams-grid { grid-template-columns: 1fr; } }

.pg-team-block {
  background: #080b0f; border: 1px solid #1a2030; border-radius: 3px; padding: 12px;
}
.pg-team-name {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .9rem; letter-spacing: .08em; color: var(--gold);
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #1a2030;
}
.pg-no-roster { color: #7a6a50; font-size: .82rem; font-style: italic; }

.pg-player-row {
  padding: 8px 4px; border-bottom: 1px solid #10131a;
}
.pg-player-row:last-of-type { border-bottom: none; }
.pg-player-is-cas {
  background: rgba(100,20,20,.18); border-radius: 3px;
  padding: 8px 6px; margin-bottom: 4px;
}

.pg-player-meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 6px;
}
.pg-player-name {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .85rem; letter-spacing: .04em; color: var(--cream);
}
.pg-player-pos { font-size: .7rem; color: #9a8a6a; }
.pg-player-spp { font-size: .7rem; color: var(--gold); margin-left: auto; }

.pg-mng-badge {
  background: #4a1010; color: #e06060;
  font-size: .62rem; font-family: Impact, sans-serif;
  letter-spacing: .1em; padding: 1px 5px; border-radius: 2px;
}
.pg-lu-badge {
  background: #1a3a10; color: #80d840;
  font-size: .62rem; font-family: Impact, sans-serif;
  letter-spacing: .08em; padding: 1px 6px; border-radius: 2px;
}

.pg-spp-checks {
  display: flex; flex-wrap: wrap; gap: 6px; font-size: .75rem;
}
.pg-spp-checks label {
  display: flex; align-items: center; gap: 4px; cursor: pointer;
  color: var(--offwhite); padding: 3px 7px;
  border: 1px solid #1a2030; border-radius: 3px;
  transition: border-color .12s, background .12s;
}
.pg-spp-checks label:hover { border-color: var(--gold); background: rgba(201,162,39,.08); }
.pg-spp-checks input[type=checkbox] { accent-color: var(--gold); cursor: pointer; }

.pg-cas-sev {
  margin-top: 8px; padding: 6px 8px;
  background: rgba(80,20,20,.3); border: 1px solid #4a2020; border-radius: 3px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pg-cas-label { font-size: .7rem; color: #e07070; letter-spacing: .06em; white-space: nowrap; }

.pg-select {
  background: #0a0e14; border: 1px solid #2a3040;
  color: var(--cream); font-size: .75rem; padding: 4px 8px;
  border-radius: 3px; cursor: pointer;
}
.pg-select:focus { border-color: var(--gold); outline: none; }

.pg-mvp-row, .pg-winnings-row, .pg-fans-row {
  margin-top: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.pg-mvp-label, .pg-winnings-label, .pg-fans-label {
  font-size: .7rem; letter-spacing: .08em; color: var(--cream);
  text-transform: uppercase; white-space: nowrap;
}
.pg-mvp-select { flex: 1; min-width: 120px; }
.pg-fans-select { min-width: 80px; }
.pg-winnings-formula { font-size: .75rem; color: #9a8a6a; }
.pg-winnings-formula strong { color: #80d840; }

/* Expensive Mistakes section inside post-game modal */
.pg-em-row {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #4a2a10;
  border-radius: 3px;
  background: #1a1008;
}
.pg-em-header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin-bottom: 6px;
}
.pg-em-label {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: #c9a040; white-space: nowrap;
}
.pg-em-info {
  font-size: .72rem; color: #9a8060;
}
.pg-em-info strong { color: #c9a040; }
.pg-em-roll-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.pg-em-roll-btn {
  font-size: .7rem; padding: 4px 12px;
  background: #2a1a08; border: 1px solid #c9a040; color: #c9a040;
  border-radius: 2px; cursor: pointer; letter-spacing: .06em;
}
.pg-em-roll-btn:hover:not(:disabled) { background: #3a2a10; }
.pg-em-roll-btn:disabled { opacity: .45; cursor: default; }
.pg-em-result { font-size: .72rem; }
.em-outcome {
  display: inline-block; font-size: .65rem; font-family: Impact, 'Arial Narrow', sans-serif;
  letter-spacing: .1em; padding: 1px 6px; border-radius: 2px;
  vertical-align: middle; margin-right: 4px;
}
.em-crisis      { background: #1a3a1a; color: #60c060; }
.em-minor       { background: #3a2a08; color: #c0a030; }
.em-major       { background: #3a1a08; color: #e08030; }
.em-catastrophe { background: #3a0a0a; color: #f04040; }
.em-detail      { color: #9a8060; }

.pg-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 12px; border-top: 1px solid #1a2030;
}
.pg-save-pending { opacity: .5; border-color: #6a5020 !important; }
.pg-save-pending::after { content: ' ⚠ Complete all dice rolls first'; font-size: .65em; display: block; line-height: 1.2; }

/* Hiring section inside post-game modal */
.pg-hire-section {
  margin-top: 10px; padding: 8px 0 4px;
  border-top: 1px solid #2a2a1a;
}
.pg-hire-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pg-hire-note { font-size: .68rem; color: #6a5a3a; font-style: italic; }
.pg-hire-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.pg-hire-row {
  display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 6px; align-items: center;
}
.pg-hire-row-cost { font-size: .72rem; color: var(--gold); white-space: nowrap; text-align: right; }
.pg-hire-add-btn {
  font-size: .68rem; padding: 3px 10px;
  background: #0a1a0a; border: 1px solid #1a4a1a; color: #60b860;
  border-radius: 2px; cursor: pointer;
}
.pg-hire-add-btn:hover { background: #0f250f; }
.pg-hire-remove-btn {
  background: none; border: 1px solid #3a1010; color: #a04040;
  border-radius: 2px; cursor: pointer; padding: 2px 7px; font-size: .8rem; line-height: 1;
}
.pg-hire-remove-btn:hover { background: #1a0808; }
.pg-hire-total { font-size: .72rem; color: #9a8a6a; margin-top: 6px; }
.pg-hire-total strong { color: var(--gold); }
.pg-hire-name-input {
  background: #0a0e14; border: 1px solid #2a3040;
  color: var(--cream); font-size: .78rem; padding: 4px 8px; border-radius: 2px;
  width: 100%;
}
.pg-hire-name-input:focus { border-color: var(--gold); outline: none; }

/* Release (fire/retire) players section */
.pg-release-section {
  margin-top: 10px; padding: 8px 0 4px;
  border-top: 1px solid #2a2a1a;
}
.pg-release-summary {
  cursor: pointer; font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .72rem; letter-spacing: .12em; color: #9a6a4a;
  list-style: none; user-select: none;
}
.pg-release-summary::-webkit-details-marker { display: none; }
.pg-release-summary::before { content: '▶ '; font-size: .6rem; }
details[open] .pg-release-summary::before { content: '▼ '; }
.pg-release-hint { font-size: .65rem; color: #5a4a2a; font-style: italic; letter-spacing: 0; font-family: Georgia, serif; }
.pg-release-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.pg-release-row {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 4px 6px; border-radius: 2px;
  border: 1px solid transparent; transition: background .1s;
}
.pg-release-row:hover { background: #1a1208; border-color: #3a2a18; }
.pg-release-row.is-released {
  opacity: .5; text-decoration: line-through; background: #1a0808; border-color: #3a1010;
}
.pg-release-check { accent-color: #c04040; cursor: pointer; flex-shrink: 0; }
.pg-release-info { display: flex; flex-direction: column; gap: 1px; }
.pg-release-name { font-size: .78rem; color: var(--cream); }
.pg-release-pos { font-size: .65rem; color: #6a5a3a; }
.pg-release-empty { font-size: .72rem; color: #5a4a2a; font-style: italic; }

/* Post-game inducement cost row */
.pg-induce-row {
  margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.pg-induce-label {
  font-size: .7rem; letter-spacing: .08em; color: var(--cream);
  font-family: Impact, 'Arial Narrow', sans-serif;
}
.pg-induce-cost { font-size: .75rem; color: #c06030; }

/* Dedicated Fans D6 roll */
.pg-fans-roll-btn {
  font-size: .7rem; padding: 4px 10px;
  background: #0a0f1a; border: 1px solid #2a3a5a; color: #80a8d8;
  border-radius: 2px; cursor: pointer;
}
.pg-fans-roll-btn:hover:not(:disabled) { background: #10182a; }
.pg-fans-roll-btn:disabled { opacity: .45; cursor: default; }
.pg-fans-result { font-size: .72rem; color: #80d880; }

/* History: post-game button / done badge */
.hist-postgame-btn {
  font-size: .7rem !important; padding: 3px 9px !important; margin-top: 6px;
}
.hist-pg-done {
  display: inline-block; font-size: .68rem; letter-spacing: .1em;
  color: #3a6a3a; margin-top: 6px;
}

/* Skill Advance section inside post-game modal */
.pg-advance-row {
  padding: 10px 0 4px;
  border-top: 1px solid #2a2a1a;
  margin-top: 6px;
}
.pg-advance-label {
  display: block;
  font-size: .7rem;
  letter-spacing: .1em;
  color: #9a8060;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.pg-advance-type-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.pg-advance-type-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #c4b49a;
  font-size: .8rem;
  cursor: pointer;
}
.pg-advance-type-label input[type=radio] { accent-color: #c9a227; cursor: pointer; }

/* =========================================================================
   Season Roster Development Section
   ========================================================================= */

.sr-section-alert { color: #f0d060; }

.sr-roster-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 640px) { .sr-roster-grid { grid-template-columns: 1fr; } }

.sr-roster-card {
  background: #0d0d17;
  border: 1px solid #2a2a3a;
  border-radius: 3px;
  overflow: hidden;
}
.sr-roster-card.sr-has-levelup { border-color: #c9a227; }

.sr-roster-header {
  background: #161624;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid #2a2a3a;
}
.sr-roster-name {
  font-family: Impact, 'Arial Narrow', sans-serif;
  letter-spacing: .06em;
  color: #c9a227;
  font-size: .9rem;
}
.sr-roster-meta {
  font-size: .72rem;
  color: #7a6a50;
  flex-shrink: 0;
}

.sr-player-row {
  padding: 6px 12px;
  border-bottom: 1px solid #1a1a28;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sr-player-row:last-child { border-bottom: none; }

.sr-player-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sr-player-jersey {
  font-family: Impact, sans-serif;
  font-size: .75rem;
  color: var(--gold);
  min-width: 22px;
  text-align: center;
  margin-right: 2px;
  opacity: .8;
}
.sr-player-name {
  color: #c4b49a;
  font-size: .82rem;
  font-weight: 600;
}
.sr-player-pos {
  color: #5a4a30;
  font-size: .72rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-player-spp {
  font-size: .7rem;
  color: #9a8060;
  font-family: Impact, 'Arial Narrow', sans-serif;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.sr-mng-badge {
  display: inline-block;
  background: #5a0a0a;
  color: #f08080;
  font-size: .6rem;
  font-family: Impact, 'Arial Narrow', sans-serif;
  letter-spacing: .1em;
  padding: 1px 5px;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 4px;
}
.gm-player-mng {
  opacity: .55;
  border-left: 2px solid #7a1a1a;
}
.sr-lu-badge {
  display: inline-block;
  background: #3a2a00;
  color: #f0d060;
  font-size: .7rem;
  font-family: Impact, 'Arial Narrow', sans-serif;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 2px;
  align-self: flex-start;
}
.sr-lu-btn {
  font-size: .72rem !important;
  padding: 3px 10px !important;
  align-self: flex-start;
}
.sr-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sr-skill-badge {
  background: #1a2a1a;
  color: #80c880;
  font-size: .65rem;
  padding: 2px 7px;
  border-radius: 2px;
  font-family: Impact, 'Arial Narrow', sans-serif;
  letter-spacing: .06em;
}
.sr-skill-double {
  background: #2a1a3a;
  color: #c090f0;
}

/* =========================================================================
   Level-Up Skill Picker Modal — with D8 category roller
   ========================================================================= */

.lu-player-name {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1.05rem;
  color: #c9a227;
  letter-spacing: .06em;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lu-type-hint {
  font-family: inherit;
  font-size: .65rem;
  color: #9a8060;
  letter-spacing: .1em;
  font-weight: normal;
}

.lu-section-label {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .6rem;
  letter-spacing: .14em;
  color: #9a8060;
  margin: 10px 0 6px;
}

/* Category tabs */
.lu-cat-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lu-cat-btn {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .68rem;
  letter-spacing: .1em;
  padding: 4px 11px;
  background: #1a1208;
  border: 1px solid #3a2a10;
  color: #7a6a4a;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.lu-cat-btn:hover { border-color: #c9a040; color: #c9a040; }
.lu-cat-btn.active { background: #2a1e08; border-color: #c9a227; color: #c9a227; }

/* Roller box */
.lu-roller-area {
  background: #120e06;
  border: 1px solid #3a2a10;
  border-radius: 3px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.lu-roller-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.lu-roller-label {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .66rem;
  letter-spacing: .1em;
  color: #c9a040;
}
.lu-roll-btn {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .68rem;
  letter-spacing: .1em;
  padding: 4px 12px;
  background: #2a1a06;
  border: 1px solid #c9a040;
  color: #c9a040;
  border-radius: 2px;
  cursor: pointer;
}
.lu-roll-btn:hover { background: #3a2a10; color: #e0b840; border-color: #e0b840; }

.lu-roll-hint {
  font-size: .75rem;
  color: #4a3a22;
  font-style: italic;
  padding: 4px 0;
}

/* Roll result pair */
.lu-results-row { display: flex; gap: 8px; margin-bottom: 8px; }
.lu-result-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 8px;
  border: 1px solid #3a2a10;
  border-radius: 3px;
  background: #1a1208;
  cursor: pointer;
  text-align: center;
  transition: border-color .12s, background .12s;
}
.lu-result-opt:hover { border-color: #c9a040; background: #221808; }
.lu-result-opt.lu-result-picked {
  border-color: #c9a227;
  background: #2a1e06;
  box-shadow: 0 0 10px rgba(201,162,39,.18);
}
.lu-die-badge {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .6rem;
  letter-spacing: .1em;
  color: #6a5a38;
}
.lu-result-opt.lu-result-picked .lu-die-badge { color: #9a8040; }
.lu-result-skill {
  font-size: .85rem;
  font-weight: bold;
  color: #d4c4a0;
}
.lu-result-opt.lu-result-picked .lu-result-skill { color: #c9a227; }

.lu-reroll-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .68rem;
  color: #4a3a22;
}
.lu-reroll-btn {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .64rem;
  letter-spacing: .08em;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid #3a2a10;
  color: #6a5a38;
  border-radius: 2px;
  cursor: pointer;
}
.lu-reroll-btn:hover { border-color: #c9a040; color: #c9a040; }

/* TV cost radios */
.lu-type-row { display: flex; flex-direction: column; gap: 8px; }
.lu-type-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c4b49a;
  font-size: .82rem;
  cursor: pointer;
}
.lu-type-label input[type=radio] { accent-color: #c9a227; cursor: pointer; }

/* --- Star Players ------------------------------------------------------- */
.gm-player-row.gm-star-row {
  background: rgba(80, 20, 80, .18);
  border-left: 2px solid #8a4a9a;
}
.gm-star-row .gph-num {
  color: #c9a227;
  font-size: 1rem;
}
.sp-remove-btn {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .65rem;
  letter-spacing: .05em;
  background: #3a1a1a;
  color: #e08080;
  border: 1px solid #5a2a2a;
  border-radius: 2px;
  cursor: pointer;
  padding: 3px 7px;
  white-space: nowrap;
}
.sp-remove-btn:hover { background: #5a1a1a; border-color: #e08080; }
.sp-add-btn {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .72rem;
  letter-spacing: .08em;
  background: rgba(80, 20, 80, .3);
  color: #c09ad0;
  border: 1px solid #6a3a7a;
  border-radius: 2px;
  cursor: pointer;
  padding: 3px 10px;
}
.sp-add-btn:hover { background: rgba(110, 30, 120, .45); border-color: #b080d0; color: #e0b0f0; }
.sp-header-btn { margin-left: auto; flex-shrink: 0; font-size: .75rem; padding: 4px 12px; }
/* Clear Games modal */
.cgm-intro { color: #9a8a6a; font-size: .8rem; margin: 0 0 12px; line-height: 1.5; }
.cgm-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid #2a1e10; cursor: pointer; }
.cgm-row:last-child { border-bottom: none; }
.cgm-row:hover { background: rgba(201,162,39,.05); }
.cgm-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: #c9a227; }
.cgm-row-body { flex: 1; min-width: 0; }
.cgm-row-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.cgm-code { font-family: Cinzel, serif; color: #c9a227; font-size: .9rem; font-weight: 700; letter-spacing: .08em; }
.cgm-badge { font-size: .62rem; padding: 1px 5px; border-radius: 2px; font-weight: 600; letter-spacing: .06em; }
.cgm-badge-season { background: #1a3a5a; color: #80c0f0; }
.cgm-badge-scrimmage { background: #2a1a3a; color: #c090d8; }
.cgm-matchup { color: #c4b49a; font-size: .82rem; }
.cgm-vs { color: #6a5a4a; }
.cgm-date { color: #5a4a3a; font-size: .7rem; margin-top: 2px; }
.cgm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 12px; border-top: 1px solid #2a1e10; }

/* Picker modal */
.sp-modal-inner {
  min-width: min(680px, 94vw);
  max-height: 82vh;
  overflow-y: auto;
  text-align: left;
  padding: 20px 20px 16px;
}
.sp-modal-title {
  font-family: Cinzel, serif;
  color: #c9a227;
  font-size: 1rem;
  letter-spacing: .06em;
  text-align: center;
  display: block;
  margin-bottom: 10px;
}
.sp-col-headers {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 3px 10px 6px;
  border-bottom: 1px solid #2a1e10;
  margin-bottom: 4px;
}
.sp-ch-name, .sp-ch-cost, .sp-ch-stat {
  font-family: Cinzel, serif;
  font-size: .6rem;
  color: #9a8060;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sp-ch-name { flex: 1; }
.sp-ch-cost { min-width: 50px; text-align: right; }
.sp-ch-stat { min-width: 38px; text-align: center; }
.sp-tier-header {
  color: #c9a227;
  font-family: Cinzel, serif;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 14px 6px 5px 10px;
  border-bottom: 1px solid #3a2a10;
  border-left: 3px solid #7a3a8a;
  margin-bottom: 4px;
  margin-top: 4px;
}
.sp-tier-header.tier-2 { border-left-color: #2a6a4a; }
.sp-tier-header.tier-3 { border-left-color: #3a4a7a; }
.sp-tier-header.tier-4 { border-left-color: #7a5a1a; }
.sp-tier-header.tier-5 { border-left-color: #7a2a2a; color: #c08080; }
.sp-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid #1e1608;
}
.sp-row:hover { background: rgba(201, 162, 39, .12); }
.sp-row-hired {
  background: rgba(80, 20, 80, .25);
  border-left: 3px solid #8a4a9a;
}
.sp-row-line1 { display: flex; align-items: center; gap: 5px; }
.sp-row-name { flex: 1; color: #c9a227; font-size: .85rem; font-weight: 600; font-family: Cinzel, serif; }
.sp-row-cost { min-width: 50px; text-align: right; color: #c09040; font-size: .75rem; font-weight: 600; }
.sp-row-stat { min-width: 38px; text-align: center; color: #90b8d8; font-size: .75rem; }
.sp-row-skills { display: flex; flex-wrap: wrap; gap: 3px; }
.sp-row-special { color: #c8c0f0; font-size: .68rem; font-style: italic; line-height: 1.4; }
.gm-star-special {
  background: var(--parchment);
  color: #594c3b;
  font-style: italic;
  font-size: .72rem;
  padding: 3px 8px 5px 30px;
  border-left: 2px solid #6a3a7a;
  margin-top: -1px;
  border-bottom: 1px solid #1a1018;
}

.lu-actions { display: flex; gap: 8px; margin-top: 18px; justify-content: flex-end; }

.bb7s-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: #1a1410; border: 1px solid #c9a020; color: #c9a020; font-family: Cinzel, serif; font-size: .78rem; letter-spacing: .08em; padding: 10px 22px; border-radius: 3px; z-index: 500; pointer-events: none; white-space: nowrap; }
.tv-star-note { color: #8a7a5a; font-size: .75em; }

/* Game alerts — Prayer to Nuffle / Desperate Measures */
.game-alert { position: fixed; top: 28%; left: 50%; transform: translateX(-50%); z-index: 600; display: flex; align-items: flex-start; gap: 18px; padding: 22px 30px; border-radius: 4px; min-width: 300px; max-width: min(480px, 92vw); pointer-events: none; animation: ga-in 0.4s cubic-bezier(.22,1,.36,1) forwards; }
.game-alert.ga-out { animation: ga-out 1.2s ease forwards; }
.game-alert-pn { background: #16100a; border: 2px solid #c9a020; box-shadow: 0 0 60px rgba(201,160,32,.45), 0 8px 32px rgba(0,0,0,.9); }
.game-alert-dm { background: #120808; border: 2px solid #b03820; box-shadow: 0 0 60px rgba(176,56,32,.45), 0 8px 32px rgba(0,0,0,.9); }
.ga-icon { font-size: 2.6rem; line-height: 1; flex-shrink: 0; margin-top: 3px; }
.ga-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ga-header { font-family: Impact, 'Arial Narrow', sans-serif; letter-spacing: .18em; font-size: .8rem; margin-bottom: 3px; }
.game-alert-pn .ga-header { color: #c9a020; }
.game-alert-dm .ga-header { color: #b03820; }
.ga-team { font-family: Cinzel, serif; font-size: .75rem; color: #a09070; letter-spacing: .04em; text-transform: uppercase; }
.ga-name { font-family: Cinzel, serif; font-size: 1.05rem; letter-spacing: .04em; }
.game-alert-pn .ga-name { color: #e8d070; }
.game-alert-dm .ga-name { color: #e08050; }
.ga-timing { font-size: .72rem; color: #706050; font-style: italic; margin-top: 2px; }
@keyframes ga-in { from { opacity:0; transform:translateX(-50%) translateY(-14px) scale(.93); } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }
@keyframes ga-out { from { opacity:1; transform:translateX(-50%) translateY(0); } to { opacity:0; transform:translateX(-50%) translateY(-10px); } }

/* Alternate weather table tints */
.setup-cell[data-wx="wx-wind"]  { background: #04111e; }
.setup-cell[data-wx="wx-mist"]  { background: #0c0f16; }
.setup-cell[data-wx="wx-sub"]   { background: #0a060e; }
.setup-cell[data-wx="wx-lava"]  { background: #1a0800; }
.setup-cell[data-wx="wx-grave"] { background: #0e050e; }
.setup-cell[data-wx="wx-leaf"]  { background: #140c00; }
.setup-cell[data-wx="wx-sand"]  { background: #1a1200; }

.setup-cell[data-wx="wx-wind"]  .setup-cell-result { color: #90b8d8; }
.setup-cell[data-wx="wx-mist"]  .setup-cell-result { color: #a0b0c8; }
.setup-cell[data-wx="wx-sub"]   .setup-cell-result { color: #a090b8; }
.setup-cell[data-wx="wx-lava"]  .setup-cell-result { color: #e09060; }
.setup-cell[data-wx="wx-grave"] .setup-cell-result { color: #b090d0; }
.setup-cell[data-wx="wx-leaf"]  .setup-cell-result { color: #c0a060; }
.setup-cell[data-wx="wx-sand"]  .setup-cell-result { color: #d0b870; }

/* Weather table picker select */
.wx-table-select {
  background: rgba(10,8,5,.65);
  border: 1px solid rgba(201,160,32,.3);
  color: rgba(196,180,154,.8);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .6rem;
  letter-spacing: .1em;
  padding: 2px 5px;
  border-radius: 2px;
  cursor: pointer;
  max-width: 160px;
  text-transform: uppercase;
}
.wx-table-select:focus { outline: none; border-color: rgba(201,160,32,.6); }
.wx-table-select option, .wx-table-select optgroup { background: #1a1408; color: #c4b49a; }

/* Table name label in post-roll weather bar */
.wx-table-name { color: rgba(201,160,32,.45); font-size: .55rem; letter-spacing: .12em; }
.cf-coin-img { width: 112px; height: 112px; object-fit: contain; display: block; }
.wd-row-break { flex-basis: 100%; height: 4px; }
.wd-result { color: #90b8d8; font-size: 1.1rem; letter-spacing: .06em; }

/* H2H series record banner */
.h2h-record-banner { text-align:center; font-size:.72rem; color:#7a6a5a; letter-spacing:.08em; padding:2px 0 6px; }
.h2h-record-banner .rec-w { color:#4a9a4a; font-weight:bold; }
.h2h-record-banner .rec-l { color:#9a3a3a; font-weight:bold; }
.h2h-record-banner .rec-d { color:#7a7a7a; font-weight:bold; }

/* Match chronicle */
.hist-chronicle { font-style:italic; font-size:.8rem; color:#9a8a7a; margin:.15rem 0 .35rem; line-height:1.45; }

/* Pitch Invasion panel */
.pi-hint { font-size:.72rem; color:#9a8a6a; margin:.2rem 0 .5rem; }
.pi-teams { display:flex; gap:20px; flex-wrap:wrap; width:100
/* H2H series record banner */
.h2h-record-banner { text-align:center; font-size:.72rem; color:#7a6a5a; letter-spacing:.08em; padding:2px 0 6px; }
.h2h-record-banner .rec-w { color:#4a9a4a; font-weight:bold; }
.h2h-record-banner .rec-l { color:#9a3a3a; font-weight:bold; }
.h2h-record-banner .rec-d { color:#7a7a7a; font-weight:bold; }

/* Match chronicle */
.hist-chronicle { font-style:italic; font-size:.8rem; color:#9a8a7a; margin:.15rem 0 .35rem; line-height:1.45; }

/* Pitch Invasion panel */
.pi-hint { font-size:.72rem; color:#9a8a6a; margin:.2rem 0 .5rem; }
.pi-teams { display:flex; gap:20px; flex-wrap:wrap; width:100%; }
.pi-team-col { flex:1; min-width:140px; }
.pi-team-label { font-size:.68rem; color:#7a6a5a; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; }
.pi-player-row { display:flex; justify-content:space-between; align-items:center; padding:3px 0; font-size:.8rem; border-bottom:1px solid #1e1810; }
.pi-player-name { color:#c4b49a; }
.pi-roll-btn { font-size:.7rem; padding:2px 7px; background:#1a1410; border:1px solid #5a4a30; color:#c9a020; cursor:pointer; border-radius:2px; }
.pi-roll-btn:hover { background:#2a2018; border-color:#c9a020; }
.pi-result { font-size:.78rem; font-weight:bold; letter-spacing:.04em; }
.pi-stunned { color:#c04030; }
.pi-safe { color:#4a8a4a; }

/* Clear Games — expired game badge */
.cgm-badge-expired { background:#3a2a1a; color:#9a7a5a; border:1px solid #5a4a30; }


/* ── Status event log entries (PRONE / STUNNED announcements) ─────────── */
.ev-status      { color:#c9a020; border-left:2px solid #b8920a; }
.ev-status-stn  { color:#d08080; border-left:2px solid #8a2020; }
.ev-turnover    { color:#80c8e0; border-left:2px solid #2a6a8a; font-style:italic; }

/* Skill Glossary styles live in an inline <style> block in index.php
   to avoid CSS parse issues from Unicode characters earlier in this file. */

/* Journeyman rows */
.gm-journeyman-row { border-left:3px solid #2a6a2a !important; background:rgba(42,106,42,.07) !important; }
.gm-jrn-badge { display:inline-block; background:#1a3a1a; color:#80d880; font-family:Impact,'Arial Narrow',sans-serif; font-size:.55rem; letter-spacing:.1em; padding:1px 4px; border-radius:2px; }
.gm-jrn-add-btn { display:inline-block; margin-top:6px; background:rgba(42,106,42,.18); color:#80d880; border:1px solid rgba(42,106,42,.4); font-family:Impact,'Arial Narrow',sans-serif; font-size:.7rem; letter-spacing:.08em; padding:4px 12px; cursor:pointer; border-radius:2px; }
.gm-jrn-add-btn:hover { background:rgba(42,106,42,.32); }
.gm-jrn-remove-btn { background:rgba(120,20,20,.3); color:#f08080; border:1px solid rgba(180,40,40,.4); font-family:Impact,'Arial Narrow',sans-serif; font-size:.58rem; padding:1px 5px; cursor:pointer; border-radius:2px; margin-left:4px; }
.gm-jrn-remove-btn:hover { background:rgba(180,30,30,.45); }

/* Apothecary modal */
.apo-modal-header { font-family:Impact,'Arial Narrow',sans-serif; font-size:1.3rem; letter-spacing:.12em; color:#80d880; margin-bottom:6px; }
.apo-modal-player { font-family:Impact,'Arial Narrow',sans-serif; font-size:.9rem; color:#c9a227; letter-spacing:.08em; margin-bottom:10px; }
.apo-modal-desc { font-size:.84rem; color:#c4b49a; margin-bottom:10px; }
.apo-roll-result { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:3px; margin:8px auto; max-width:300px; }
.apo-roll-success { background:rgba(42,106,42,.2); border:1px solid #2a6a2a; color:#80d880; }
.apo-roll-fail    { background:rgba(106,20,20,.2); border:1px solid #6a1010; color:#f08080; }
.apo-roll-num { font-family:Impact,'Arial Narrow',sans-serif; font-size:2.2rem; line-height:1; }

/* Season roster management */
.srm-team-list { display:flex; flex-direction:column; gap:2px; margin-bottom:4px; }
.srm-team-row { display:flex; align-items:center; gap:10px; padding:6px 4px; border-bottom:1px solid rgba(255,255,255,.06); flex-wrap:wrap; }
.srm-team-name { flex:1; font-family:Impact,'Arial Narrow',sans-serif; font-size:.8rem; letter-spacing:.06em; color:#e8d4a8; }
.srm-treasury { font-size:.78rem; color:#80d880; min-width:60px; font-weight:600; }
.srm-player-count { font-size:.72rem; color:#a09070; }
.srm-manage-btn { font-size:.68rem !important; padding:3px 10px !important; }
.srm-modal-inner { max-width:580px; width:min(580px,94vw); max-height:85vh; overflow-y:auto; text-align:left; padding:22px 24px; color:#d4c4a0 !important; }
.srm-modal-title { font-family:Impact,'Arial Narrow',sans-serif; letter-spacing:.1em; font-size:1.4rem; color:#e0ba40; margin-bottom:2px; text-transform:uppercase; }
.srm-treasury-line { font-size:.9rem; color:#b8a880; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid rgba(201,160,32,.2); }
.srm-treasury-line strong { color:#90e890; font-size:1.05rem; }
.srm-section-hdr { font-family:Impact,'Arial Narrow',sans-serif; font-size:.72rem; letter-spacing:.16em; color:#e0ba40; border-bottom:1px solid rgba(201,160,32,.3); padding-bottom:5px; margin-bottom:10px; }
.srm-player-list { display:flex; flex-direction:column; gap:3px; margin-bottom:6px; }
.srm-player-row { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:3px; background:rgba(255,255,255,.05); font-size:.85rem; flex-wrap:wrap; border-left:2px solid rgba(201,160,32,.15); }
.srm-player-row:hover { background:rgba(201,160,32,.1); border-left-color:rgba(201,160,32,.5); }
.srm-pnum { min-width:30px; color:#c9a020; font-family:Impact,'Arial Narrow',sans-serif; font-size:.8rem; letter-spacing:.04em; }
.srm-pname { flex:1; color:#e8d4a8; font-size:.88rem; }
.srm-ppos { color:#9a8a6a; font-size:.78rem; font-style:italic; }
.srm-mng-badge { background:#6a1010; color:#ffb0b0; font-family:Impact,'Arial Narrow',sans-serif; font-size:.62rem; letter-spacing:.08em; padding:2px 6px; border-radius:2px; }
.srm-pactions { display:flex; gap:5px; margin-left:auto; }
.srm-btn { font-family:Impact,'Arial Narrow',sans-serif; font-size:.68rem; letter-spacing:.08em; padding:3px 9px; cursor:pointer; border-radius:2px; border:1px solid transparent; }
.srm-btn-edit { background:rgba(201,160,32,.18); color:#e0ba40; border-color:rgba(201,160,32,.45); }
.srm-btn-fire { background:rgba(140,20,20,.35); color:#ff9090; border-color:rgba(200,50,50,.5); }
.srm-btn:hover { filter:brightness(1.25); }
.srm-hire-form { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.srm-hire-pos,.srm-hire-name,.srm-hire-jersey { height:32px; font-size:.85rem; background:rgba(255,248,220,.07); color:#d4c4a0; border:1px solid rgba(201,160,32,.3); }
.srm-hire-pos:focus,.srm-hire-name:focus,.srm-hire-jersey:focus { background:rgba(255,248,220,.13); border-color:rgba(201,160,32,.65); color:#e8d4a8; outline:none; }
.srm-hire-jersey { width:60px !important; }
.srm-cost-label { font-size:.82rem; color:#90e890; min-width:80px; font-weight:600; }
.srm-hire-err { color:#e04040; font-size:.82rem; margin-top:4px; }
.srm-staff-grid { display:flex; flex-direction:column; gap:5px; margin-bottom:6px; }
.srm-staff-row { display:flex; align-items:center; gap:10px; padding:6px 8px; background:rgba(255,255,255,.04); border-radius:3px; border-left:2px solid rgba(201,160,32,.2); }
.srm-staff-name { flex:1; color:#e8d4a8; font-size:.85rem; }
.srm-staff-count { min-width:36px; color:#e0ba40; font-family:Impact,'Arial Narrow',sans-serif; font-size:.95rem; letter-spacing:.04em; text-align:center; }
.srm-staff-cost { color:#9a8a6a; font-size:.75rem; min-width:58px; text-align:right; }
.srm-btn-buy { background:rgba(180,130,10,.22); color:#c9a227; border-color:rgba(201,160,32,.5); }
.srm-btn-buy:disabled { opacity:.3; cursor:not-allowed; filter:none; }

/* Apothecary badge in game info strip */
.gm-apo-badge { font-family:Impact,'Arial Narrow',sans-serif; font-size:.65rem; letter-spacing:.08em; padding:2px 8px; border-radius:2px; vertical-align:middle; }
.gm-apo-avail { background:rgba(180,130,10,.22); color:#c9a227; border:1px solid rgba(201,160,32,.55); cursor:pointer; }
.gm-apo-avail:hover { background:rgba(201,160,32,.35); border-color:rgba(201,160,32,.8); }
.gm-apo-used  { background:rgba(50,50,50,.45); color:#686868; border:1px solid rgba(100,100,100,.3); cursor:default; }

/* Apothecary player picker modal */
.apo-pick-list { display:flex; flex-direction:column; gap:6px; }
.apo-pick-btn  { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; background:rgba(201,160,32,.08); border:1px solid rgba(201,160,32,.25); border-radius:3px; cursor:pointer; color:#e8d4a8; font-size:1rem; width:100%; }
.apo-pick-btn:hover { background:rgba(201,160,32,.18); border-color:rgba(201,160,32,.5); }
.apo-pick-name { text-align:left; flex:1; font-size:1rem; }
.apo-pick-st   { font-family:Impact,'Arial Narrow',sans-serif; font-size:.72rem; letter-spacing:.08em; padding:3px 8px; border-radius:2px; }
.apo-pick-st-ko   { background:rgba(180,120,0,.35);   color:#e0a030; }
.apo-pick-st-cas  { background:rgba(120,20,20,.45);   color:#f08080; }
.apo-pick-st-dead { background:rgba(60,0,80,.55);     color:#d080f0; }

/* Starting Reserves modal — "Oi! Too Many Boyz!" */
.sbm-player-btn  { display:flex; align-items:center; gap:10px; width:100%; padding:9px 14px; background:rgba(201,160,32,.07); border:1px solid rgba(201,160,32,.22); border-radius:3px; cursor:pointer; color:#e8d4a8; font-size:.88rem; text-align:left; transition:background .15s; }
.sbm-player-btn:hover { background:rgba(201,160,32,.17); border-color:rgba(201,160,32,.45); }
.sbm-benched      { background:rgba(60,60,60,.35) !important; border-color:rgba(120,120,120,.25) !important; color:#888 !important; }
.sbm-benched .sbm-nm { text-decoration:line-through; opacity:.6; }
.sbm-jn  { font-family:'Cinzel',serif; font-size:.78rem; color:#c9a227; min-width:32px; font-variant-numeric:tabular-nums; }
.sbm-nm  { flex:1; font-weight:600; }
.sbm-ps  { font-size:.72rem; color:#9a8a70; }
.sbm-badge { font-family:Impact,'Arial Narrow',sans-serif; font-size:.65rem; letter-spacing:.09em; padding:2px 7px; border-radius:2px; white-space:nowrap; }
.sbm-on  { background:rgba(50,140,50,.35); color:#90e890; border:1px solid rgba(80,180,80,.3); }
.sbm-off { background:rgba(100,80,0,.45);  color:#c8a040; border:1px solid rgba(160,120,0,.3); }
