:root {
  --ink: #16161d;
  --void: #09090d;
  --panel: #181923;
  --panel-2: #232637;
  --paper: #f4efd8;
  --muted: #a9a38d;
  --gold: #ffd15c;
  --green: #69d37c;
  --red: #f0615d;
  --cyan: #6ad9ff;
  --violet: #ad8cff;
  --line: #34374b;
  --shadow: #000;
}

* {
  box-sizing: border-box;
}

html {
  background: #09090d;
  background: var(--void);
  color: #f4efd8;
  color: var(--paper);
}

body {
  min-width: 320px;
  margin: 0;
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 18% 10%, rgba(106,217,255,.15), transparent 28rem),
    radial-gradient(circle at 86% 16%, rgba(255,209,92,.13), transparent 24rem),
    linear-gradient(135deg, #0b0c12 0%, #151118 45%, #0d1514 100%);
  background-size: 18px 18px, 18px 18px, auto, auto, auto;
}

a {
  color: inherit;
  text-decoration: none;
}

.scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.04) 0,
    rgba(255,255,255,.04) 1px,
    transparent 1px,
    transparent 5px
  );
  mix-blend-mode: soft-light;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  padding: 1.25rem clamp(1rem, 3vw, 2rem);
}

.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.logout-form {
  margin: 0;
}

.logout-form button {
  min-height: 2.4rem;
  border: 2px solid #34374b;
  padding: .55rem .75rem;
  border: 2px solid var(--line);
  background: #16161d;
  background: var(--ink);
  color: #f4efd8;
  color: var(--paper);
  box-shadow: 4px 4px 0 #000;
  box-shadow: 4px 4px 0 var(--shadow);
  font: 800 .9rem "Courier New", ui-monospace, monospace;
  cursor: pointer;
}

.brand,
.topnav a,
.online-pill {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 2.4rem;
  padding: .55rem .75rem;
  border: 2px solid #34374b;
  border: 2px solid var(--line);
  background: #16161d;
  background: var(--ink);
  box-shadow: 4px 4px 0 #000;
  box-shadow: 4px 4px 0 var(--shadow);
  font-weight: 800;
  font-size: .9rem;
}

.online-pill {
  border-color: #69d37c;
  border-color: var(--green);
  color: #69d37c;
  color: var(--green);
}

.online-dot {
  width: .62rem;
  height: .62rem;
  border: 2px solid #0b1b11;
  background: #69d37c;
  background: var(--green);
  box-shadow: 0 0 0 2px rgba(105,211,124,.18), 0 0 12px rgba(105,211,124,.75);
}

.brand-mark {
  width: 18px;
  height: 18px;
  background:
    linear-gradient(90deg, transparent 33%, var(--red) 33% 66%, transparent 66%),
    linear-gradient(var(--red) 33%, transparent 33% 66%, var(--red) 66%);
  image-rendering: pixelated;
}

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem) 4rem;
}

.site-footer {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem) 2rem;
}

.footer-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 3.25rem;
  padding: .85rem 1rem;
  border: 2px solid var(--line);
  background: rgba(24,25,35,.78);
  box-shadow: 5px 5px 0 var(--shadow);
  color: var(--muted);
  font-size: .85rem;
  font-weight: 900;
  text-align: center;
}

.footer-credit a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22rem;
}

.footer-heart {
  color: var(--red);
  text-shadow: 2px 2px 0 #000;
}

.flash-stack {
  display: grid;
  gap: .65rem;
  max-width: 1180px;
  margin: 0 auto 1rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.flash {
  padding: .8rem 1rem;
  border: 2px solid var(--gold);
  background: #11131c;
  box-shadow: 4px 4px 0 #000;
  color: var(--paper);
  font-weight: 800;
}

.flash.error {
  border-color: var(--red);
}

.flash.success {
  border-color: var(--green);
}

.hero-shell,
.league-hero,
.subpage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
  gap: 2rem;
  align-items: end;
  min-height: 330px;
  padding: clamp(1.25rem, 4vw, 3rem);
  border: 3px solid var(--paper);
  background:
    linear-gradient(135deg, rgba(240,97,93,.2), transparent 28%),
    linear-gradient(315deg, rgba(106,217,255,.16), transparent 35%),
    #101119;
  box-shadow: 8px 8px 0 var(--shadow);
  overflow: hidden;
}

.league-hero,
.subpage {
  min-height: 230px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 1.5rem;
}

.subpage {
  display: block;
}

.eyebrow {
  margin: 0 0 .8rem;
  color: var(--gold);
  font-weight: 900;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(2.25rem, 7vw, 5.6rem);
  line-height: .95;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 #000;
}

h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  text-transform: uppercase;
}

h3 {
  margin: 0;
  font-size: 1rem;
}

.lead {
  max-width: 660px;
  margin: 1rem 0 0;
  color: #ddd4aa;
  line-height: 1.7;
}

.pixel-map {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  transform: rotate(-4deg);
}

.pixel-map span {
  aspect-ratio: 1;
  border: 2px solid rgba(244,239,216,.75);
  background: var(--panel-2);
  box-shadow: 4px 4px 0 #000;
}

.pixel-map span:nth-child(3n) { background: var(--green); }
.pixel-map span:nth-child(4n) { background: var(--red); }
.pixel-map span:nth-child(5n) { background: var(--gold); }

.dashboard-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  margin: 0 0 1.25rem;
}

.dashboard-strip > div,
.panel,
.league-tile,
.empty-state {
  border: 2px solid var(--line);
  background: rgba(24,25,35,.94);
  box-shadow: 6px 6px 0 var(--shadow);
}

.dashboard-strip > div {
  min-height: 88px;
  padding: 1rem;
}

.metric-value {
  display: block;
  min-height: 1.9rem;
  color: var(--cyan);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 900;
}

.metric-label {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 900;
}

.league-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.15rem;
}

.league-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 1.25rem;
  overflow: hidden;
  transition: transform .16s steps(2), box-shadow .16s steps(2);
}

.league-tile > *:not(.tile-glow) {
  position: relative;
  z-index: 1;
}

.league-tile:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--shadow);
}

.tile-0 { border-color: var(--gold); }
.tile-1 { border-color: var(--cyan); }
.tile-2 { border-color: var(--green); }
.tile-3 { border-color: var(--red); }

.tile-glow {
  position: absolute;
  width: 140px;
  height: 140px;
  right: -24px;
  top: -24px;
  background: repeating-linear-gradient(45deg, rgba(255,209,92,.32) 0 12px, transparent 12px 24px);
}

.tile-head,
.tile-stats,
.tile-foot,
.panel-title {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: .85rem;
  align-items: center;
}

.tile-head,
.tile-foot {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
}

.league-tile h2 {
  position: relative;
  margin-top: 2.5rem;
  min-height: 6rem;
}

.tile-stats {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--paper);
}

.tile-stats strong {
  color: var(--gold);
  font-size: 1.7rem;
}

.tile-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}

.tile-feature {
  display: grid;
  gap: .55rem;
  min-height: 118px;
  padding: .8rem;
  border: 2px solid #2d3044;
  background: rgba(8,9,13,.82);
}

.tile-feature:hover {
  border-color: var(--cyan);
}

.feature-label,
.recent-label {
  color: var(--gold);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.feature-main {
  display: flex;
  gap: .6rem;
  align-items: center;
  min-width: 0;
}

.feature-main strong,
.tile-feature > strong {
  min-width: 0;
  color: var(--paper);
  font-size: .95rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.feature-hero-image,
.feature-avatar {
  flex: 0 0 auto;
  width: 58px;
  height: 34px;
  border: 2px solid #000;
  background: #08090d;
  object-fit: cover;
}

.feature-avatar {
  width: 38px;
  height: 38px;
}

.feature-avatar-empty {
  display: grid;
  place-items: center;
  color: var(--gold);
  font-weight: 900;
}

.feature-meta {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.45;
}

.tile-foot {
  flex-direction: column;
  align-items: flex-start;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px dashed var(--line);
}

.recent-match-title {
  color: var(--paper);
  font-size: .9rem;
  line-height: 1.4;
}

.recent-match-title small {
  color: var(--red);
  font-weight: 900;
}

.recent-match-meta {
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.45;
}

.pixel-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: .25rem .5rem;
  border: 2px solid var(--paper);
  background: #000;
  color: var(--gold);
  font-size: .75rem;
  font-weight: 900;
}

.empty-state {
  min-height: 260px;
  padding: 2rem;
  text-align: center;
}

.empty-action,
.hero-actions a,
.admin-inline {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: .55rem .75rem;
  border: 2px solid var(--gold);
  background: #0b0c12;
  color: var(--gold);
  box-shadow: 4px 4px 0 #000;
  font-weight: 900;
}

.admin-inline {
  cursor: pointer;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.2rem;
}

.empty-machine {
  display: inline-grid;
  grid-template-columns: repeat(3, 32px);
  gap: 8px;
  margin-bottom: 1rem;
}

.empty-machine span {
  width: 32px;
  height: 32px;
  background: var(--panel-2);
  border: 2px solid var(--paper);
}

.score-chip {
  display: grid;
  grid-template-columns: auto auto;
  gap: .5rem 1rem;
  align-items: baseline;
  padding: 1rem;
  border: 2px solid var(--gold);
  background: #050507;
  box-shadow: 5px 5px 0 #000;
}

.score-chip span {
  color: var(--gold);
  font-size: 2.3rem;
  font-weight: 900;
}

.score-chip small {
  color: var(--muted);
}

.league-overview-grid,
.detail-grid {
  display: grid;
  gap: 1rem;
}

.league-overview-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
  align-items: stretch;
  margin-bottom: 1rem;
}

.detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel,
.panel-full {
  padding: 1rem;
}

.panel-wide,
.panel-full {
  grid-column: 1 / -1;
}

.panel-title {
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--line);
}

.panel-title span {
  color: var(--cyan);
  font-size: .8rem;
  font-weight: 900;
}

.panel-link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .35rem .55rem;
  border: 2px solid var(--cyan);
  background: #08090d;
  color: var(--cyan);
  box-shadow: 3px 3px 0 #000;
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}

.match-list {
  display: grid;
  gap: .75rem;
}

.match-row,
.team-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: .9rem;
  border: 2px solid #2d3044;
  background: #11131c;
}

.match-row:hover {
  border-color: var(--cyan);
}

.club-results-panel,
.latest-matches-panel {
  height: 100%;
}

.club-results-panel {
  display: flex;
  flex-direction: column;
}

.club-results-panel .team-stack {
  flex: 1;
  grid-auto-rows: minmax(0, 1fr);
}

.latest-match-list {
  display: grid;
  gap: .65rem;
}

.latest-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hero-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.latest-panel-title {
  gap: .75rem;
}

.hero-popularity-title {
  gap: .75rem;
}

.latest-tab-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .25rem;
  padding: .2rem;
  border: 2px solid var(--line);
  background: #08090d;
}

.hero-tab-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .25rem;
  padding: .2rem;
  border: 2px solid var(--line);
  background: #08090d;
}

.latest-tab-switch label {
  min-width: 3rem;
  padding: .3rem .55rem;
  color: var(--muted);
  cursor: pointer;
  font-size: .76rem;
  font-weight: 900;
  text-align: center;
}

.hero-tab-switch label {
  min-width: 4.4rem;
  padding: .3rem .55rem;
  color: var(--muted);
  cursor: pointer;
  font-size: .76rem;
  font-weight: 900;
  text-align: center;
}

#latest-tab-games:checked ~ .latest-panel-title label[for="latest-tab-games"],
#latest-tab-bo5:checked ~ .latest-panel-title label[for="latest-tab-bo5"] {
  background: var(--cyan);
  color: #05060a;
}

#hero-tab-picks:checked ~ .hero-popularity-title label[for="hero-tab-picks"],
#hero-tab-win-rate:checked ~ .hero-popularity-title label[for="hero-tab-win-rate"] {
  background: var(--cyan);
  color: #05060a;
}

.latest-tab-panel {
  display: none;
}

.hero-popularity-panel .hero-tab-panel {
  display: none;
}

#latest-tab-games:checked ~ .latest-games-panel,
#latest-tab-bo5:checked ~ .latest-bo5-panel {
  display: grid;
  gap: .75rem;
}

#hero-tab-picks:checked ~ .hero-picks-panel,
#hero-tab-win-rate:checked ~ .hero-win-rate-panel {
  display: grid;
  gap: .7rem;
}

.latest-all-link {
  justify-self: end;
}

.latest-match-row {
  display: grid;
  gap: .65rem;
  min-height: 7.4rem;
  padding: .85rem;
  border: 2px solid #2d3044;
  background: #11131c;
}

.latest-match-row:hover {
  border-color: var(--cyan);
}

.latest-match-head {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.latest-match-head strong {
  color: var(--paper);
  font-size: .9rem;
  line-height: 1.35;
}

.latest-match-head strong span {
  color: var(--red);
  font-size: .75rem;
}

.latest-match-head small {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
}

.latest-side-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .4rem .55rem;
  align-items: center;
  color: var(--paper);
  font-size: .8rem;
}

.side-tag {
  padding: .12rem .35rem;
  border: 1px solid #3d425a;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
}

.latest-side-grid strong {
  font-size: .8rem;
  font-weight: 900;
}

.latest-side-grid strong.is-win {
  color: var(--green);
}

.latest-side-grid strong.is-loss {
  color: var(--red);
}

.latest-match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .7rem;
  align-items: center;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

.latest-score {
  color: var(--gold);
  font-weight: 900;
}

.match-row h3 {
  display: flex;
  gap: .55rem;
  align-items: center;
  margin-top: .55rem;
}

.match-row h3 span {
  color: var(--red);
  font-size: .8rem;
}

.match-row p,
.team-line p {
  margin: .45rem 0 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.5;
}

.team-line .team-meta {
  color: var(--cyan);
  font-weight: 900;
}

.team-line .team-roster {
  max-height: 7.5rem;
  overflow: auto;
}

.match-score {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: .35rem;
  align-items: center;
  color: var(--gold);
  font-size: 1.5rem;
  font-weight: 900;
  text-align: right;
}

.match-score small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: .75rem;
}

.team-stack,
.rank-list,
.league-admin-list,
.hero-bars {
  display: grid;
  gap: .7rem;
}

.team-line {
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 0;
}

.team-result {
  display: grid;
  gap: .18rem;
  min-width: 4.8rem;
  text-align: right;
}

.team-result span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
}

.team-line strong,
.team-result strong {
  color: var(--green);
}

.team-line small,
.team-result small {
  color: var(--gold);
}

.h2h-panel {
  margin-bottom: 1rem;
}

.h2h-scroll {
  overflow-x: auto;
  padding-bottom: .2rem;
}

.h2h-matrix {
  display: grid;
  grid-template-columns: repeat(var(--h2h-size), minmax(4.9rem, 1fr));
  gap: .35rem;
  min-width: max-content;
}

.h2h-corner,
.h2h-team,
.h2h-cell {
  min-width: 4.9rem;
  min-height: 4.35rem;
  border: 2px solid #2d3044;
  background: #11131c;
}

.h2h-corner {
  background:
    repeating-linear-gradient(45deg, rgba(255,209,92,.18) 0 8px, transparent 8px 16px),
    #08090d;
}

.h2h-team {
  display: grid;
  place-items: center;
  background: #08090d;
  color: var(--gold);
  font-size: .86rem;
  font-weight: 900;
  text-align: center;
}

.h2h-team span {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 2px solid var(--red);
  background:
    linear-gradient(45deg, transparent 0 42%, rgba(240,97,93,.82) 42% 58%, transparent 58%),
    #1a1b24;
  color: var(--paper);
  text-shadow: 2px 2px 0 #000;
}

.h2h-cell {
  display: grid;
  place-content: center;
  gap: .2rem;
  padding: .45rem;
  text-align: center;
}

.h2h-cell strong {
  color: var(--paper);
  font-size: 1.05rem;
  line-height: 1;
}

.h2h-cell small {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 900;
  line-height: 1.2;
}

.h2h-cell.is-leading {
  border-color: #134823;
  background: #0b2413;
}

.h2h-cell.is-leading strong {
  color: var(--green);
}

.h2h-cell.is-trailing {
  border-color: #511114;
  background: #2b080b;
}

.h2h-cell.is-trailing strong {
  color: var(--red);
}

.h2h-cell.is-even strong {
  color: var(--gold);
}

.h2h-cell-self {
  place-items: center;
  background:
    linear-gradient(135deg, transparent calc(50% - 1px), rgba(240,97,93,.6) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    #08090d;
  opacity: .78;
}

.h2h-cell-self .brand-mark {
  width: 26px;
  height: 26px;
}

.h2h-cell-empty {
  color: var(--muted);
  opacity: .72;
}

.bo5-panel {
  margin-bottom: 1rem;
}

.bo5-list {
  display: grid;
  gap: .65rem;
}

.bo5-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: start;
  padding: .85rem;
  border: 2px solid #2d3044;
  background: #11131c;
}

.bo5-day {
  margin: 0 0 .35rem;
  color: var(--cyan);
  font-size: .75rem;
  font-weight: 900;
}

.bo5-row h3 {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  margin: 0;
  color: var(--paper);
  font-size: .9rem;
  line-height: 1.35;
}

.bo5-row h3 span {
  color: var(--red);
  font-size: .75rem;
}

.bo5-score {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: .35rem;
  align-items: center;
  color: var(--muted);
  font-size: 1.25rem;
  font-weight: 900;
  text-align: right;
}

.bo5-score .is-win {
  color: var(--green);
}

.bo5-score small {
  color: var(--muted);
  font-size: .8rem;
}

.bo5-meta {
  grid-column: 1 / -1;
  display: grid;
  gap: .2rem;
  min-width: 0;
  text-align: left;
}

.bo5-meta strong {
  color: var(--gold);
  font-size: .86rem;
}

.bo5-meta small {
  color: var(--muted);
  font-size: .72rem;
}

.team-rename-form,
.team-merge-form {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: 0 0 .35rem;
}

.team-rename-form input,
.team-merge-form select {
  min-width: 0;
  flex: 1;
  padding: .45rem .55rem;
  border: 2px solid var(--line);
  background: #08090d;
  color: var(--paper);
  font: 900 .95rem "Courier New", ui-monospace, monospace;
}

.team-rename-form button,
.team-merge-form button {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: .35rem .55rem;
  border: 2px solid var(--gold);
  background: var(--ink);
  color: var(--gold);
  box-shadow: 3px 3px 0 #000;
  font: 900 .8rem "Courier New", ui-monospace, monospace;
  cursor: pointer;
}

.team-merge-form select {
  color: var(--muted);
  font-size: .8rem;
}

.team-merge-form button {
  border-color: var(--red);
  color: var(--red);
}

.rank-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rank;
}

.rank-list li {
  counter-increment: rank;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  min-height: 2.7rem;
  padding: .65rem .75rem;
  border: 2px solid #2d3044;
  background: #11131c;
}

.rank-list li::before {
  content: counter(rank, decimal-leading-zero);
  color: var(--gold);
  font-weight: 900;
}

.rank-list li {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.hero-rank-list li {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.rank-list span:last-child,
.rank-list a + span {
  color: var(--muted);
  font-size: .82rem;
}

.league-admin-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.league-admin-item {
  display: grid;
  gap: .85rem;
  padding: .85rem;
  border: 2px solid #2d3044;
  background: #11131c;
}

.league-admin-head {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: start;
}

.league-admin-head a:first-child {
  display: inline-block;
  margin-bottom: .25rem;
  color: var(--paper);
  font-weight: 900;
}

.league-admin-head span {
  display: block;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}

.league-admin-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}

.league-admin-actions a,
.league-admin-actions button,
.modal-actions button,
.dialog-close {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: .35rem .55rem;
  border: 2px solid var(--gold);
  background: var(--ink);
  color: var(--gold);
  box-shadow: 3px 3px 0 #000;
  font: 900 .8rem "Courier New", ui-monospace, monospace;
  cursor: pointer;
}

.league-admin-actions button {
  border-color: var(--cyan);
  color: var(--cyan);
}

.league-live-preview {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.league-live-preview a {
  min-height: 1.9rem;
  padding: .35rem .55rem;
  border: 2px solid #2d3044;
  background: #08090d;
  color: var(--green);
  font-size: .78rem;
  font-weight: 900;
}

.league-edit-dialog {
  width: min(640px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 3px solid var(--paper);
  background: transparent;
  color: var(--paper);
  box-shadow: 8px 8px 0 #000;
}

.league-edit-dialog::backdrop {
  background:
    linear-gradient(rgba(9,9,13,.78), rgba(9,9,13,.78)),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.04) 0,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 5px
    );
}

.league-edit-modal {
  display: grid;
  gap: .85rem;
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(240,97,93,.18), transparent 34%),
    linear-gradient(315deg, rgba(106,217,255,.13), transparent 38%),
    #11131c;
}

.modal-title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  padding-bottom: .85rem;
  border-bottom: 2px solid var(--line);
}

.modal-title .eyebrow {
  margin-bottom: .35rem;
}

.dialog-close {
  width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border-color: var(--red);
  color: var(--red);
  font-size: 1.1rem;
  line-height: 1;
}

.league-edit-modal input,
.league-edit-modal textarea {
  width: 100%;
  min-width: 0;
  padding: .85rem;
  border: 2px solid var(--paper);
  outline: none;
  background: #08090d;
  color: var(--green);
  box-shadow: inset 4px 4px 0 #000;
  font: 900 .95rem/1.55 "Courier New", ui-monospace, monospace;
}

.league-edit-modal textarea {
  resize: vertical;
}

.league-edit-modal input:focus,
.league-edit-modal textarea:focus {
  border-color: var(--gold);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
  padding-top: .35rem;
}

.modal-actions button[type="submit"] {
  border-color: var(--gold);
  background: var(--red);
  color: var(--paper);
}

.hero-bar {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 2fr) auto;
  gap: .8rem;
  align-items: center;
  min-height: 2.8rem;
  padding: .65rem .75rem;
  border: 2px solid #2d3044;
  background: #11131c;
}

.hero-bar div {
  height: 16px;
  border: 2px solid #000;
  background: #2b2e3c;
}

.hero-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--green));
}

.hero-bar strong {
  display: grid;
  gap: .12rem;
  color: var(--gold);
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.hero-bar strong small {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
}

.player-profile-head,
.hero-profile-head {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.player-avatar,
.hero-portrait {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border: 3px solid var(--gold);
  background: #08090d;
  box-shadow: 6px 6px 0 #000;
  object-fit: cover;
  image-rendering: auto;
}

.hero-portrait {
  width: 118px;
  height: 66px;
}

.player-avatar-empty {
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 2rem;
  font-weight: 900;
}

.mini-avatar,
.hero-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 2px solid #000;
  background: #08090d;
  object-fit: cover;
}

.hero-icon {
  width: 46px;
  height: 26px;
}

.player-chip,
.hero-chip {
  display: inline-flex;
  min-width: 0;
  gap: .5rem;
  align-items: center;
}

.player-chip span,
.hero-chip span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.player-table {
  display: grid;
  gap: .55rem;
}

.player-table-head,
.player-table-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(120px, 1fr) minmax(160px, 1.35fr) .55fr .55fr .75fr;
  gap: .75rem;
  align-items: center;
  padding: .65rem .75rem;
}

.player-table-head {
  color: var(--gold);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.player-table-row {
  border: 2px solid #2d3044;
  background: #11131c;
}

.player-table-row:hover {
  border-color: var(--cyan);
}

.steam-link {
  color: var(--cyan);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: .18rem;
}

.steam-link:hover {
  color: var(--gold);
}

.player-name-cell {
  display: grid;
  gap: .45rem;
  min-width: 0;
}

.player-alias-form {
  display: flex;
  gap: .45rem;
  align-items: center;
}

.player-alias-form input {
  min-width: 0;
  flex: 1;
  padding: .42rem .5rem;
  border: 2px solid var(--line);
  background: #08090d;
  color: var(--paper);
  font: 900 .82rem "Courier New", ui-monospace, monospace;
}

.player-alias-form input::placeholder {
  color: var(--muted);
  opacity: .8;
}

.player-alias-form button {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: .35rem .55rem;
  border: 2px solid var(--gold);
  background: var(--ink);
  color: var(--gold);
  box-shadow: 3px 3px 0 #000;
  font: 900 .78rem "Courier New", ui-monospace, monospace;
  cursor: pointer;
}

.match-summary .metric-value {
  font-size: clamp(1rem, 2vw, 1.35rem);
  overflow-wrap: anywhere;
}

.match-side.winner-side {
  border-color: var(--gold);
}

.side-total {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: center;
  margin-bottom: .8rem;
  padding: .75rem;
  border: 2px solid #2d3044;
  background: #11131c;
}

.side-total strong {
  color: var(--gold);
  font-size: 1.25rem;
}

.side-total span {
  color: var(--green);
  font-weight: 900;
}

.match-player-list {
  display: grid;
  gap: .5rem;
}

.match-player-head,
.match-player-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.3fr) minmax(120px, 1.1fr) .7fr .5fr;
  gap: .75rem;
  align-items: center;
  padding: .65rem .75rem;
}

.match-player-head {
  color: var(--gold);
  font-size: .78rem;
  font-weight: 900;
}

.match-player-row {
  border: 2px solid #2d3044;
  background: #11131c;
}

.match-player-row:hover {
  border-color: var(--cyan);
}

.match-player-row strong {
  color: var(--gold);
}

.muted {
  color: var(--muted);
}

.sync-panel {
  margin-top: 1rem;
}

.sync-form {
  display: grid;
  gap: 1rem;
}

.field-label {
  color: var(--gold);
  font-size: .8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.sync-form textarea,
.sync-form input,
.sync-form select {
  width: 100%;
  padding: 1rem;
  border: 2px solid var(--paper);
  outline: none;
  background: #08090d;
  color: var(--green);
  box-shadow: inset 4px 4px 0 #000;
  font: 900 1rem/1.7 "Courier New", ui-monospace, monospace;
}

.sync-form textarea {
  min-height: 320px;
  resize: vertical;
}

.sync-form textarea.compact-textarea,
.league-edit-modal textarea.compact-textarea {
  min-height: 5.8rem;
}

.sync-form textarea:focus,
.sync-form input:focus,
.sync-form select:focus {
  border-color: var(--gold);
}

.sync-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.sync-actions p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.sync-actions button {
  min-height: 3rem;
  padding: .75rem 1rem;
  border: 2px solid var(--gold);
  background: var(--red);
  color: var(--paper);
  box-shadow: 5px 5px 0 #000;
  font: 900 1rem "Courier New", ui-monospace, monospace;
  cursor: pointer;
}

.sync-actions button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 #000;
}

.progress-panel {
  margin-top: 1rem;
}

.pixel-progress {
  height: 34px;
  border: 3px solid var(--paper);
  background:
    repeating-linear-gradient(90deg, #10121a 0 14px, #171a25 14px 28px);
  box-shadow: inset 4px 4px 0 #000;
  overflow: hidden;
}

.pixel-progress div {
  width: 0;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 10px, transparent 10px 20px),
    linear-gradient(90deg, var(--red), var(--gold), var(--green));
  transition: width .35s steps(8);
}

.progress-readout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  margin-top: 1rem;
}

.progress-readout div {
  min-height: 84px;
  padding: .85rem;
  border: 2px solid #2d3044;
  background: #11131c;
}

.progress-readout strong {
  display: block;
  color: var(--cyan);
  font-size: 1.8rem;
}

.progress-readout span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
}

.progress-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
}

.progress-actions a {
  min-height: 2.6rem;
  padding: .65rem .8rem;
  border: 2px solid var(--line);
  background: var(--ink);
  box-shadow: 4px 4px 0 #000;
  font-weight: 900;
}

.progress-panel.is-done .panel-title span {
  color: var(--green);
}

.progress-panel.is-failed .panel-title span {
  color: var(--red);
}

@media (max-width: 780px) {
  .topbar,
  .tile-head,
  .tile-stats,
  .tile-foot,
  .panel-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-shell,
  .league-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .pixel-map {
    max-width: 220px;
  }

  .dashboard-strip,
  .tile-feature-grid,
  .league-overview-grid,
  .detail-grid,
  .progress-readout {
    grid-template-columns: 1fr;
  }

  .club-results-panel {
    display: block;
  }

  .club-results-panel .team-stack {
    grid-auto-rows: auto;
  }

  .match-row,
  .team-line,
  .bo5-row,
  .hero-bar,
  .league-admin-head,
  .match-player-head,
  .match-player-row,
  .player-table-head,
  .player-table-row,
  .rank-list li,
  .sync-actions {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .team-result,
  .bo5-meta,
  .hero-bar strong {
    min-width: 0;
    text-align: left;
  }

  .match-score {
    grid-template-columns: auto auto auto;
    justify-content: start;
    text-align: left;
  }
}