/* =========================================================================
   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;
  text-transform: uppercase;
  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: 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: .7;
}
.btn-auth-out:hover { opacity: 1; background: rgba(201,160,32,.08); }
.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; text-transform: uppercase;
  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%; }
.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); }

/* =========================================================================
   E-INK DISPLAY MODE (added 2026-07-20)
   Opt-in high-contrast, no-motion mode for e-ink tablets (Boox Go/Palma) at
   the gaming table. Ported from knights (the suite pilot) — same toggle
   mechanism, same ../suite.css motion kill-switch — but bb7s needed a very
   different CSS strategy here: this file has ~600 hardcoded (non-variable)
   colors across ~130 component families (dice trays, star player pickers,
   post-game/level-up modals, inducement panels, weather cells, history
   cards, event log...) vs. knights' ~20. Hand-listing every one of those
   individually (knights' approach) was not tractable at this scale and
   would have guaranteed some were missed.

   Strategy instead: a UNIVERSAL flatten — every element gets a white
   background, black text, and black borders, full stop — then a short,
   deliberate list of exceptions for the handful of elements that actually
   need something else:
     1. Filled/pip marks that carry meaning through fill alone with no text
        of their own (the live-game pulse dot, a progress-bar fill) — these
        must stay dark or they vanish against the now-white page.
     2. Genuine color-only state (no accompanying text/shape difference):
        the possession dot, three "winner" text colors, and the season
        standings "your row" tint. Each gets a real shape/text substitute
        below, not just a color swap.
     3. One deliberate style choice: the primary CTA button (.btn-primary)
        is kept as a black pill with white text so there's still one clear
        "main action" affordance per screen, matching knights' identical
        treatment of its own .btn-primary.
   This also means the extensive var(--navy)/var(--gold)/var(--crimson)/etc.
   dual-role audit (many of those variables are used BOTH as a background
   fill in one place AND as text-on-a-light-card color in another, which
   would conflict if the variable were simply redefined) is moot here — the
   universal !important rule overrides every declaration, hardcoded or
   var()-based, so no per-variable direction had to be chosen. The root
   variable redefinition below is kept anyway for elements that read the
   variables through non-color properties (e.g. accent-color on checkboxes)
   and for semantic clarity, not as the actual enforcement mechanism. */

:root[data-eink] {
  --navy:       #fff;
  --navy-dk:    #fff;
  --navy-mid:   #fff;
  --gold:       #000;
  --gold-lt:    #000;
  --crimson:    #000;
  --crimson-lt: #000;
  --parchment:  #fff;
  --cream:      #000;
  --cream-dim:  #333;
  --brown:      #000;
  --brown-lt:   #333;
  --brown-dark: #333;
  --offwhite:   #000;
}

/* The actual enforcement: flatten every element under <html data-eink> to
   white background / black text / black border. background-color only
   (never the `background` shorthand) so that team/roster photo
   background-images are untouched — those are real content, not decorative
   theming. Animations/transitions/box-shadow/text-shadow are already killed
   suite-wide by ../suite.css's `[data-eink] *` rule. */
[data-eink],
[data-eink] * {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}
[data-eink] a:hover,
[data-eink] button:hover,
[data-eink] [onclick]:hover {
  background-color: #eee !important;
}

/* ---- Exception 1: filled marks with no text of their own ---- */

/* Roster budget meter — a plain filled progress bar, no label on top. Under
   the universal rule both the fill and its track go white, so the bar
   simply disappears. Keep the track a light grey and the fill solid black
   so progress is still visible at a glance. */
[data-eink] .bb-budget-bar-bg { background-color: #eee !important; border: 1px solid #000 !important; }
[data-eink] .bb-budget-bar-fill { background-color: #000 !important; }

/* Live-game pulse dot on the landing page — suite.css already kills the
   pulse animation, and the universal rule would turn its fill white
   (invisible). Keep it a solid black dot AND add a "LIVE" text label next
   to it — a static, colorless, non-pulsing dot has no other way left to say
   "this game is live" once both its color and its motion are gone. */
[data-eink] .lg-live-dot {
  background-color: #000 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 2px !important;
  display: inline-block;
  font: .58rem/1 Impact, 'Arial Narrow', sans-serif;
  letter-spacing: .12em;
  color: #fff !important;
  padding: 2px 5px !important;
}
[data-eink] .lg-live-dot::before { content: "LIVE"; }

/* ---- Exception 2: genuine color-only state → real shape/text substitutes ---- */

/* Possession dot — always the same "●" glyph (js/bb7s.js:4439,4454,4474,4485;
   index.php:822,830), only its color ever changed between on/off. Give the
   "on" state a solid filled dot and the "off" state a hollow outline dot so
   the distinction survives losing color entirely. */
[data-eink] .hb-poss-dot.poss-on,
[data-eink] .sp-poss-dot.poss-on { color: #000 !important; }
[data-eink] .hb-poss-dot.poss-off,
[data-eink] .sp-poss-dot.poss-off { font-size: 0 !important; }
[data-eink] .hb-poss-dot.poss-off::after {
  content: "\25CB"; font-size: .9rem; color: #000;
}
[data-eink] .sp-poss-dot.poss-off::after {
  content: "\25CB"; font-size: .65rem; color: #000;
}

/* Winner text — .lg-last-winner is already bold (color was reinforcement),
   but .hist-winner and .sp-final-winner (spectator view) rely on color
   alone with no other differentiator from the losing team's name. Add a
   ★ marker and bold weight to all three so the distinction is explicit and
   consistent everywhere a winner is shown. */
[data-eink] .lg-last-winner,
[data-eink] .hist-winner,
[data-eink] .sp-final-winner {
  font-weight: bold !important;
}
[data-eink] .lg-last-winner::before,
[data-eink] .hist-winner::before,
[data-eink] .sp-final-winner::before {
  content: "\2605 "; /* ★ */
}

/* "Your row" in season standings — previously a background tint only, with
   no border/weight difference from any other row. Add a left border and
   bold weight so it still stands out once the tint itself is gone. */
[data-eink] .season-standings tr.standings-me td {
  background-color: #eee !important;
  border-left: 3px solid #000 !important;
  font-weight: bold;
}

/* ---- Exception 3: one deliberate primary-action affordance ---- */

/* Keep a single clear "main action" per screen — a solid black pill with
   white text, same treatment knights gives its own .btn-primary. */
[data-eink] .btn-primary {
  background-color: #000 !important;
  color: #fff !important;
}
[data-eink] .btn-primary:hover { background-color: #333 !important; }

/* Level-up skill picker — .lu-result-picked previously said "this is the
   chosen skill" purely via border-color + background tint + box-shadow, all
   three of which the universal flatten above (and ../suite.css's shared
   box-shadow kill) erase, leaving the picked option visually identical to
   the unpicked one with zero other cue (no checkmark, no bold text). Same
   failure shape as knights' Aim Table cell highlight — a state that relied
   entirely on now-removed color/glow with nothing else backing it up. */
[data-eink] .lu-result-opt.lu-result-picked {
  border: 2px solid #000 !important;
  font-weight: bold;
}
[data-eink] .lu-result-opt.lu-result-picked::before { content: "\2713  "; }

/* Roster card team photos — .roster-card-photo's opacity (.65, .5 for guest
   cards) was tuned to blend into the ORIGINAL warm parchment/navy card
   background. Once that background is forced to white above, the same
   opacity value reads as a barely-visible, washed-out ghost — a real bug
   found from a screenshot, not just a preference: the photo is still there,
   just alpha-blended against a much lighter backdrop than it was designed
   for, so the math changes drastically even though nothing else about the
   image did. Boost opacity so the photo is clearly visible; the mask-image
   fade (transparent on the left edge) is untouched and still softens it. */
[data-eink] .roster-card-photo,
[data-eink] .roster-card-guest .roster-card-photo {
  opacity: .92 !important;
}
/* Same fix for the spectator view's team photos (index.php's own inline
   <style> block, `.sp-team-photo`) — its visible-state opacity (.55) is set
   via inline style by spLoadPhoto() in JS, not this stylesheet, but a
   stylesheet !important rule still wins over a non-important inline value. */
[data-eink] .sp-team-photo {
  opacity: .92 !important;
}
/* Same low-opacity-blend pattern found in two more places while checking
   for this bug class: the roster builder's own photo preview, and the
   live H2H game view's team photo banner. */
[data-eink] #builder-photo.has-photo,
[data-eink] .hb-team-photo.has-photo {
  opacity: .92 !important;
}

/* Second, bigger bug in the same area, found from a follow-up screenshot:
   the photo's TEXT-WRAPPING containers (.roster-card-content and its
   children, .hb-team-content, .sp-team-content) never had their own
   background in the original design — they're plain flex layout divs that
   rely entirely on z-index to sit above the photo, with the card's OWN
   background (not theirs) providing the visible backdrop. The universal
   flatten rule above forces `background-color:#fff` onto every element
   including these, which turns each one into an opaque white block —
   these divs are block-level and span nearly the full card width/height
   even though the text inside them doesn't, so the photo behind them gets
   blotted out everywhere except the card's own outer padding (the thin
   slivers of photo visible at the very top/bottom of each card in the
   screenshot). Restoring these specific wrappers to transparent lets the
   photo show through again; actual badges/buttons inside them
   (.roster-team-badge, .btn) keep their own opaque background from the
   flatten rule as normal, since those genuinely are visual chips, not
   pass-through layout containers. */
[data-eink] .roster-card-content,
[data-eink] .roster-card-header,
[data-eink] .roster-card-stats,
[data-eink] .roster-card-actions,
[data-eink] .hb-team-content,
[data-eink] .sp-team-content {
  background-color: transparent !important;
}

/* ── E-ink optimization pass #2 (2026-07-21) ───────────────────────────────
   Hardware-specific refinements beyond the color flatten: legible body
   font, native-widget theming, sturdier hairline borders, bigger tap
   targets. See ../CLAUDE.md "E-ink mode" for the full rationale. */
:root { color-scheme: dark; }
:root[data-eink] {
  /* Georgia's serif hairlines/thin-to-thick stroke contrast dither less
     cleanly on 16-gray e-ink than a plain sans-serif — swapped body copy
     only, Impact (headings) is already bold/blocky and reads fine as-is. */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

/* 1px borders render inconsistently on e-ink's spatial dithering — bump
   every visible border to 2px minimum. Elements with no border at all are
   unaffected (border-style:none makes border-width irrelevant regardless of
   value). Intentional 3-4px colored accent-stripe borders used for left-edge
   category markers throughout this file also get flattened to 2px as a side
   effect — accepted; still clearly visible, and consistent with how much
   other decorative distinction already gets simplified under e-ink
   elsewhere in this file. */
[data-eink] * { border-width: 2px !important; }

/* Bigger tap targets — Boox devices have extra glass/parallax between the
   touch layer and the e-ink layer, making small buttons physically harder to
   land precisely than on a phone touchscreen. bb7s defines its own button
   classes rather than using the shared suite.css .btn/.btn-sm component
   (unlike hive/knights), so each is listed explicitly. Bespoke small icon
   buttons (camera icon, etc.) weren't individually audited this pass. */
[data-eink] .btn-primary,
[data-eink] .btn-secondary,
[data-eink] .btn-danger,
[data-eink] .btn-auth-in,
[data-eink] .btn-auth-out,
[data-eink] .btn-bb-waaagh,
[data-eink] .btn-back,
[data-eink] .bb-notify-toggle {
  min-height: 44px;
  padding: 12px 22px;
}
[data-eink] input[type="checkbox"],
[data-eink] input[type="radio"] { transform: scale(1.4); }

/* Opacity audit: every other opacity:<1 declaration in this file besides
   the photo-blend ones already fixed above (roster cards, H2H view, builder
   preview, spectator view) is disabled-state/muted-text/struck-through
   dimming — that reads correctly regardless of backdrop color since it's
   dimming toward the (now white, still legible) background either way, not
   blending a foreground photo against a specific tuned backdrop. Nothing
   else in that bug class found. */

/* ── E-ink button hierarchy (2026-07-23) ───────────────────────────────────
   Real-device feedback after the Boox arrived: layout, tap targets, and
   refresh behavior all held up, but every button besides .btn-primary (see
   Exception 3 above) renders identically — white fill, black outline, black
   text — regardless of which of bb7s's five other button classes it is.
   A toolbar with 6-8 of these side by side reads as an undifferentiated
   "sea of white boxes" rather than a scannable set of distinct actions.

   Fix: a second visual tier using fill weight (not color, which e-ink can't
   show meaningfully) to rank emphasis:
     Tier 1 — .btn-primary:            solid black fill  (already done above)
     Tier 2 — .btn-secondary/.btn-h2h: light grey fill    (NEW — the workhorse
                                        action buttons: PRE-GAME, CASUALTY,
                                        DICE, RULES, SKILLS, EDIT, MANAGE, etc.)
     Tier 3 — .btn-back:               unfilled, outline only (unchanged) —
                                        deliberately recedes now that tier 2
                                        has a fill; fitting for "go back/cancel"
     Tier 4 — .btn-danger:             unfilled but heavier border + bold
                                        text (NEW) — destructive actions lose
                                        their red color entirely under the
                                        flatten, so they need a weight cue
                                        that reads as "handle with care"
                                        instead of just another outline box.
   .btn-auth-in/.btn-auth-out/.btn-bb-waaagh (header utility pills, used far
   less often than the toolbar actions) are left as plain outline — same
   reasoning as .btn-back, they're meant to recede next to the tier-2 fill. */
[data-eink] .btn-secondary,
[data-eink] .btn-h2h {
  background-color: #ddd !important;
}
[data-eink] .btn-secondary:hover,
[data-eink] .btn-h2h:hover {
  background-color: #c4c4c4 !important;
}
[data-eink] .btn-danger {
  border-width: 3px !important;
  font-weight: bold;
}

/* ── E-ink section-bar overflow fix (2026-07-23) ───────────────────────────
   Real-device screenshot: the signed-in roster-list toolbar (HISTORY / 2025
   RULES / GUEST GUIDE / SEASONS / CLEAR GAMES / EXPORT BACKUP / IMPORT
   BACKUP / + NEW ROSTER — 8 items, more than the anonymous view ever shows)
   overflowed past .bb-section-bar's own right border under eink, since the
   tap-target bump earlier in this file (min-height 44px, 12px 22px padding,
   up from ~6px 14px normally) pushed the row's total width past the
   container. Explicitly NOT wrapped to a second row (would still be a
   correct fix, but changes the toolbar's shape more than necessary) —
   instead the bar scrolls horizontally, keeping every button reachable with
   a swipe while staying visually contained inside its own border. Scoped to
   [data-eink] only since this row already fits fine at normal-mode sizing;
   the existing @media (max-width:600px) phone wrap rule is untouched and
   still applies below that width regardless of eink state. */
[data-eink] .bb-section-bar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}