/*
 * GAME OF THRONES: MOTHER OF DRAGONS
 * Medieval Pixel-Art Tournament Board
 */

/* ═══════════════════════════════════════════
   PIXEL FONTS
   ═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

/* ═══════════════════════════════════════════
   CSS VARIABLES — DUNGEON PALETTE
   ═══════════════════════════════════════════ */
:root {
  --parchment-dark: #1a1510;
  --parchment-mid: #2a2218;
  --parchment-light: #3d3225;
  --parchment-glow: #5c4a35;
  --ink: #d4c4a0;
  --ink-dim: #8a7d65;
  --gold: #e8b830;
  --gold-bright: #ffd54f;
  --gold-dim: #a07820;
  --silver: #b0b8c8;
  --silver-bright: #d8dce8;
  --bronze: #c87830;
  --bronze-bright: #e89850;
  --iron: #5a5a6a;
  --iron-bright: #787888;
  --blood: #c83030;
  --blood-bright: #e85050;
  --venom: #40b840;
  --venom-bright: #60e060;
  --dragon-fire: #e85820;
  --pixel-border: #6a5a40;
  --pixel-shadow: #0a0a08;
  --scanline: rgba(0, 0, 0, 0.08);

  --font-pixel: 'Press Start 2P', monospace;
  --font-terminal: 'VT323', monospace;
}

/* ═══════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════ */
*, *::before, *::after {
  image-rendering: pixelated;
}

body.pixel-realm {
  background-color: var(--parchment-dark);
  color: var(--ink);
  font-family: var(--font-terminal);
  font-size: 18px;
  line-height: 1.4;
  overflow-x: hidden;
}

/* Scanline overlay on entire page */
body.pixel-realm::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--scanline) 2px,
    var(--scanline) 4px
  );
}

/* ═══════════════════════════════════════════
   PIXEL BORDER MIXIN via box-shadow
   ═══════════════════════════════════════════ */
.pixel-box {
  background: var(--parchment-mid);
  border: 3px solid var(--pixel-border);
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,0.05),
    inset -3px -3px 0 rgba(0,0,0,0.3),
    6px 6px 0 var(--pixel-shadow),
    0 0 30px rgba(0,0,0,0.5);
  position: relative;
}

/* Corner decorations */
.pixel-box::before,
.pixel-box::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 3px solid var(--gold-dim);
  z-index: 2;
}
.pixel-box::before {
  top: -3px;
  left: -3px;
  border-right: none;
  border-bottom: none;
}
.pixel-box::after {
  bottom: -3px;
  right: -3px;
  border-left: none;
  border-top: none;
}

/* Double-corner variant */
.pixel-box-gold {
  border-color: var(--gold-dim);
}
.pixel-box-gold::before,
.pixel-box-gold::after {
  border-color: var(--gold);
}

/* ═══════════════════════════════════════════
   PIXEL-ART SVG ICONS (inline data URIs)
   ═══════════════════════════════════════════ */

/* Dragon icon — 16x16 pixel art */
.icon-dragon::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 2px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='6' y='1' width='2' height='2' fill='%23e85820'/%3E%3Crect x='8' y='1' width='2' height='2' fill='%23e85820'/%3E%3Crect x='4' y='3' width='2' height='2' fill='%23e85820'/%3E%3Crect x='6' y='3' width='2' height='2' fill='%23ff8040'/%3E%3Crect x='8' y='3' width='2' height='2' fill='%23ff8040'/%3E%3Crect x='10' y='3' width='2' height='2' fill='%23e85820'/%3E%3Crect x='2' y='5' width='2' height='2' fill='%23e85820'/%3E%3Crect x='4' y='5' width='2' height='2' fill='%23ff8040'/%3E%3Crect x='6' y='5' width='4' height='2' fill='%23ffa060'/%3E%3Crect x='10' y='5' width='2' height='2' fill='%23ff8040'/%3E%3Crect x='12' y='5' width='2' height='2' fill='%23e85820'/%3E%3Crect x='4' y='7' width='2' height='2' fill='%23e85820'/%3E%3Crect x='6' y='7' width='4' height='2' fill='%23ff8040'/%3E%3Crect x='10' y='7' width='2' height='2' fill='%23e85820'/%3E%3Crect x='6' y='9' width='2' height='2' fill='%23e85820'/%3E%3Crect x='8' y='9' width='2' height='2' fill='%23e85820'/%3E%3Crect x='4' y='11' width='2' height='2' fill='%23c84818'/%3E%3Crect x='10' y='11' width='2' height='2' fill='%23c84818'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Castle icon */
.icon-castle::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 2px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='2' height='2' fill='%23888'/%3E%3Crect x='5' y='2' width='2' height='2' fill='%23888'/%3E%3Crect x='9' y='2' width='2' height='2' fill='%23888'/%3E%3Crect x='13' y='2' width='2' height='2' fill='%23888'/%3E%3Crect x='1' y='4' width='6' height='2' fill='%23aaa'/%3E%3Crect x='9' y='4' width='6' height='2' fill='%23aaa'/%3E%3Crect x='2' y='6' width='4' height='2' fill='%23999'/%3E%3Crect x='10' y='6' width='4' height='2' fill='%23999'/%3E%3Crect x='1' y='8' width='14' height='2' fill='%23aaa'/%3E%3Crect x='2' y='10' width='12' height='2' fill='%23999'/%3E%3Crect x='6' y='10' width='4' height='4' fill='%23654'/%3E%3Crect x='2' y='12' width='4' height='2' fill='%23888'/%3E%3Crect x='10' y='12' width='4' height='2' fill='%23888'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Crown/capital icon */
.icon-crown::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 2px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='10' width='12' height='3' fill='%23e8b830'/%3E%3Crect x='3' y='13' width='10' height='2' fill='%23a07820'/%3E%3Crect x='2' y='4' width='2' height='6' fill='%23e8b830'/%3E%3Crect x='7' y='2' width='2' height='8' fill='%23e8b830'/%3E%3Crect x='12' y='4' width='2' height='6' fill='%23e8b830'/%3E%3Crect x='4' y='6' width='3' height='4' fill='%23e8b830'/%3E%3Crect x='9' y='6' width='3' height='4' fill='%23e8b830'/%3E%3Crect x='2' y='3' width='2' height='2' fill='%23ffd54f'/%3E%3Crect x='7' y='1' width='2' height='2' fill='%23ffd54f'/%3E%3Crect x='12' y='3' width='2' height='2' fill='%23ffd54f'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Sword icon */
.icon-sword::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 2px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='12' y='1' width='2' height='2' fill='%23ccc'/%3E%3Crect x='10' y='3' width='2' height='2' fill='%23ddd'/%3E%3Crect x='8' y='5' width='2' height='2' fill='%23ddd'/%3E%3Crect x='6' y='7' width='2' height='2' fill='%23ddd'/%3E%3Crect x='4' y='9' width='2' height='2' fill='%23a07820'/%3E%3Crect x='2' y='9' width='2' height='2' fill='%23a07820'/%3E%3Crect x='4' y='7' width='2' height='2' fill='%23a07820'/%3E%3Crect x='2' y='11' width='2' height='2' fill='%23654'/%3E%3Crect x='4' y='11' width='2' height='2' fill='%23654'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Shield icon */
.icon-shield::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 2px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='1' width='10' height='2' fill='%23e8b830'/%3E%3Crect x='2' y='3' width='12' height='2' fill='%23a07820'/%3E%3Crect x='2' y='5' width='12' height='2' fill='%23e8b830'/%3E%3Crect x='3' y='7' width='10' height='2' fill='%23a07820'/%3E%3Crect x='4' y='9' width='8' height='2' fill='%23e8b830'/%3E%3Crect x='5' y='11' width='6' height='2' fill='%23a07820'/%3E%3Crect x='6' y='13' width='4' height='2' fill='%23e8b830'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ═══════════════════════════════════════════
   PAGE BACKGROUND — STONE DUNGEON TEXTURE
   ═══════════════════════════════════════════ */
.dungeon-bg {
  background-color: var(--parchment-dark);
  background-image:
    /* Faint stone pattern */
    radial-gradient(circle at 20% 30%, rgba(60, 50, 35, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(50, 40, 30, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 10%, rgba(80, 60, 30, 0.15) 0%, transparent 40%),
    /* Noise-like grid */
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 3px,
      rgba(255,255,255,0.01) 3px, rgba(255,255,255,0.01) 4px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 3px,
      rgba(255,255,255,0.01) 3px, rgba(255,255,255,0.01) 4px
    );
  min-height: 100vh;
}

/* Torch glow effect at top */
.torch-glow {
  position: relative;
}
.torch-glow::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(232, 184, 48, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════
   HEADER — PIXEL TITLE BANNER
   ═══════════════════════════════════════════ */
.realm-header {
  text-align: center;
  padding: 2.5rem 1rem 1.5rem;
  position: relative;
  z-index: 1;
}

.realm-title {
  font-family: var(--font-pixel);
  font-size: clamp(14px, 3vw, 28px);
  color: var(--gold);
  text-shadow:
    3px 3px 0 var(--pixel-shadow),
    0 0 20px rgba(232, 184, 48, 0.3);
  letter-spacing: 2px;
  line-height: 1.8;
  animation: title-flicker 4s ease-in-out infinite;
}

.realm-subtitle {
  font-family: var(--font-terminal);
  font-size: clamp(16px, 2.5vw, 26px);
  color: var(--ink-dim);
  margin-top: 0.5rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

@keyframes title-flicker {
  0%, 100% { text-shadow: 3px 3px 0 var(--pixel-shadow), 0 0 20px rgba(232, 184, 48, 0.3); }
  50% { text-shadow: 3px 3px 0 var(--pixel-shadow), 0 0 40px rgba(232, 184, 48, 0.5), 0 0 80px rgba(232, 184, 48, 0.15); }
}

/* Decorative separator — pixel chain */
.pixel-chain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 1rem auto;
  max-width: 400px;
}
.pixel-chain-link {
  width: 8px;
  height: 4px;
  background: var(--gold-dim);
  box-shadow: 0 2px 0 var(--pixel-shadow);
}
.pixel-chain-link:nth-child(odd) {
  background: var(--gold);
  height: 6px;
  margin-top: -1px;
}
.pixel-chain-gem {
  width: 12px;
  height: 12px;
  background: var(--blood);
  border: 2px solid var(--gold);
  box-shadow: 0 0 8px rgba(200, 48, 48, 0.5), 3px 3px 0 var(--pixel-shadow);
  margin: 0 4px;
  transform: rotate(45deg);
}

/* ═══════════════════════════════════════════
   TOUR BADGES — PIXEL SCROLLS
   ═══════════════════════════════════════════ */
.tour-scroll {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-pixel);
  font-size: 8px;
  padding: 6px 10px;
  background: var(--parchment-mid);
  border: 2px solid var(--pixel-border);
  color: var(--ink-dim);
  box-shadow: 2px 2px 0 var(--pixel-shadow);
  transition: all 0.15s;
}
.tour-scroll-active {
  border-color: var(--gold-dim);
  color: var(--gold);
  background: rgba(232, 184, 48, 0.1);
}
.tour-scroll:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--pixel-shadow);
}

/* ═══════════════════════════════════════════
   LEAGUE TABLE — THE GREAT HALL BOARD
   ═══════════════════════════════════════════ */
.league-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
  max-width: 1100px;
}

.league-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-terminal);
  font-size: 18px;
}

.league-table thead th {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  padding: 12px 10px;
  background: var(--parchment-dark);
  border-bottom: 3px solid var(--gold-dim);
  position: sticky;
  top: 0;
  z-index: 10;
  text-shadow: 2px 2px 0 var(--pixel-shadow);
  white-space: nowrap;
}

.league-table tbody tr {
  transition: all 0.1s;
  cursor: pointer;
  border-bottom: 1px solid rgba(106, 90, 64, 0.3);
}

.league-table tbody tr:hover {
  filter: brightness(1.3);
  transform: scale(1.005);
  z-index: 2;
  position: relative;
}

.league-table tbody tr:hover::after {
  content: '>';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--gold);
  animation: blink-cursor 0.6s step-end infinite;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.league-table td {
  padding: 8px 10px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(106, 90, 64, 0.15);
}

/* ═══════════════════════════════════════════
   LEAGUE ROW COLORS — PIXEL STYLE
   ═══════════════════════════════════════════ */

/* Gold League — rows 1-8 */
.league-row-gold {
  background: linear-gradient(90deg, rgba(232, 184, 48, 0.12) 0%, rgba(232, 184, 48, 0.05) 100%);
  border-left: 4px solid var(--gold);
}
.league-row-gold .rank-num {
  color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(232, 184, 48, 0.4);
}

/* Silver League — rows 9-16 */
.league-row-silver {
  background: linear-gradient(90deg, rgba(176, 184, 200, 0.1) 0%, rgba(176, 184, 200, 0.03) 100%);
  border-left: 4px solid var(--silver);
}
.league-row-silver .rank-num {
  color: var(--silver-bright);
}

/* Bronze League — rows 17-24 */
.league-row-bronze {
  background: linear-gradient(90deg, rgba(200, 120, 48, 0.1) 0%, rgba(200, 120, 48, 0.03) 100%);
  border-left: 4px solid var(--bronze);
}
.league-row-bronze .rank-num {
  color: var(--bronze-bright);
}

/* Iron League — rows 25-32 */
.league-row-iron {
  background: linear-gradient(90deg, rgba(90, 90, 106, 0.1) 0%, rgba(90, 90, 106, 0.03) 100%);
  border-left: 4px solid var(--iron);
}
.league-row-iron .rank-num {
  color: var(--iron-bright);
}

/* League divider rows */
.league-divider td {
  padding: 0;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--pixel-border) 0px, var(--pixel-border) 6px,
    transparent 6px, transparent 12px
  );
  border: none;
}

/* ═══════════════════════════════════════════
   RANK NUMBER — PIXEL BADGE
   ═══════════════════════════════════════════ */
.rank-num {
  font-family: var(--font-pixel);
  font-size: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-shadow: 2px 2px 0 var(--pixel-shadow);
}

/* Top 3 — special crown treatment */
.rank-crown {
  position: relative;
}
.rank-crown::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Crect x='0' y='6' width='14' height='4' fill='%23e8b830'/%3E%3Crect x='0' y='2' width='2' height='4' fill='%23e8b830'/%3E%3Crect x='6' y='0' width='2' height='6' fill='%23e8b830'/%3E%3Crect x='12' y='2' width='2' height='4' fill='%23e8b830'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ═══════════════════════════════════════════
   PLAYER AVATAR — PIXEL PORTRAIT
   ═══════════════════════════════════════════ */
.pixel-avatar {
  width: 40px;
  height: 40px;
  border: 3px solid var(--pixel-border);
  box-shadow: 3px 3px 0 var(--pixel-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--parchment-light);
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ink-dim);
  overflow: hidden;
  /* Square pixel portrait, not round! */
  image-rendering: pixelated;
}
.pixel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.league-row-gold .pixel-avatar { border-color: var(--gold-dim); }
.league-row-silver .pixel-avatar { border-color: var(--silver); }
.league-row-bronze .pixel-avatar { border-color: var(--bronze); }
.league-row-iron .pixel-avatar { border-color: var(--iron); }

/* ═══════════════════════════════════════════
   PLAYER NAME COLUMN
   ═══════════════════════════════════════════ */
.player-name {
  font-family: var(--font-terminal);
  font-size: 20px;
  color: var(--ink);
  line-height: 1.2;
}
.player-nick {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--ink-dim);
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════
   POINTS — PIXEL SCORE
   ═══════════════════════════════════════════ */
.score-points {
  font-family: var(--font-pixel);
  font-size: 14px;
  text-shadow: 2px 2px 0 var(--pixel-shadow);
}
.league-row-gold .score-points { color: var(--gold-bright); }
.league-row-silver .score-points { color: var(--silver-bright); }
.league-row-bronze .score-points { color: var(--bronze-bright); }
.league-row-iron .score-points { color: var(--iron-bright); }

/* ═══════════════════════════════════════════
   STAT CELLS
   ═══════════════════════════════════════════ */
.stat-cell {
  font-family: var(--font-terminal);
  font-size: 20px;
  color: var(--ink-dim);
  text-align: center;
}

/* ═══════════════════════════════════════════
   RANK CHANGE ARROWS — 8-BIT STYLE
   ═══════════════════════════════════════════ */
.rank-up {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--venom);
  text-shadow: 0 0 6px rgba(64, 184, 64, 0.4);
  animation: rank-pulse 2s ease-in-out infinite;
}
.rank-down {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--blood);
  text-shadow: 0 0 6px rgba(200, 48, 48, 0.4);
}
.rank-same {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--pixel-border);
}

@keyframes rank-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ═══════════════════════════════════════════
   LEAGUE LEGEND — BOTTOM BANNERS
   ═══════════════════════════════════════════ */
.league-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 1.5rem;
  padding: 1rem;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--ink-dim);
}
.legend-swatch {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.1);
  box-shadow: 2px 2px 0 var(--pixel-shadow);
}

/* ═══════════════════════════════════════════
   MODAL — PIXEL SCROLL POPUP
   ═══════════════════════════════════════════ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 8, 0.85);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fade-in 0.15s ease;
}
.modal-backdrop.hidden {
  display: none;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-scroll {
  background: var(--parchment-mid);
  border: 4px solid var(--gold-dim);
  box-shadow:
    inset 4px 4px 0 rgba(255,255,255,0.05),
    inset -4px -4px 0 rgba(0,0,0,0.3),
    8px 8px 0 var(--pixel-shadow),
    0 0 60px rgba(0, 0, 0, 0.7);
  max-width: 520px;
  width: 100%;
  padding: 2rem;
  position: relative;
  animation: scroll-open 0.2s ease;
}

@keyframes scroll-open {
  from { transform: scale(0.9) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Pixel corners on modal */
.modal-scroll::before,
.modal-scroll::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid var(--gold);
  z-index: 2;
}
.modal-scroll::before {
  top: -4px;
  left: -4px;
  border-right: none;
  border-bottom: none;
}
.modal-scroll::after {
  bottom: -4px;
  right: -4px;
  border-left: none;
  border-top: none;
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: var(--font-pixel);
  font-size: 14px;
  color: var(--ink-dim);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
  transition: color 0.15s;
  z-index: 5;
}
.modal-close:hover {
  color: var(--blood);
}

/* Modal player card */
.player-card-avatar {
  width: 96px;
  height: 96px;
  border: 4px solid var(--gold-dim);
  box-shadow: 4px 4px 0 var(--pixel-shadow);
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--parchment-light);
  font-family: var(--font-pixel);
  font-size: 20px;
  color: var(--gold);
  overflow: hidden;
}
.player-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.player-card-name {
  font-family: var(--font-pixel);
  font-size: 14px;
  color: var(--gold);
  text-align: center;
  text-shadow: 2px 2px 0 var(--pixel-shadow);
  line-height: 1.6;
}
.player-card-nick {
  font-family: var(--font-terminal);
  font-size: 22px;
  color: var(--ink-dim);
  text-align: center;
  letter-spacing: 2px;
}

/* Player card stats table */
.player-stats-table {
  width: 100%;
  font-family: var(--font-terminal);
  font-size: 18px;
  margin-top: 1rem;
  border-collapse: separate;
  border-spacing: 0;
}
.player-stats-table thead th {
  font-family: var(--font-pixel);
  font-size: 7px;
  color: var(--gold);
  padding: 8px 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--gold-dim);
}
.player-stats-table tbody td {
  padding: 6px;
  border-bottom: 1px solid rgba(106, 90, 64, 0.2);
  text-align: center;
  color: var(--ink);
}
.player-stats-table tbody tr:hover {
  background: rgba(232, 184, 48, 0.05);
}

/* ═══════════════════════════════════════════
   STAGGERED ROW ENTRANCE ANIMATION
   ═══════════════════════════════════════════ */
.league-table tbody tr {
  animation: row-slide 0.4s ease-out both;
}

@keyframes row-slide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Stagger via nth-child */
.league-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
.league-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
.league-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
.league-table tbody tr:nth-child(4) { animation-delay: 0.08s; }
.league-table tbody tr:nth-child(5) { animation-delay: 0.10s; }
.league-table tbody tr:nth-child(6) { animation-delay: 0.12s; }
.league-table tbody tr:nth-child(7) { animation-delay: 0.14s; }
.league-table tbody tr:nth-child(8) { animation-delay: 0.16s; }
.league-table tbody tr:nth-child(9) { animation-delay: 0.18s; }
.league-table tbody tr:nth-child(10) { animation-delay: 0.20s; }
.league-table tbody tr:nth-child(11) { animation-delay: 0.22s; }
.league-table tbody tr:nth-child(12) { animation-delay: 0.24s; }
.league-table tbody tr:nth-child(13) { animation-delay: 0.26s; }
.league-table tbody tr:nth-child(14) { animation-delay: 0.28s; }
.league-table tbody tr:nth-child(15) { animation-delay: 0.30s; }
.league-table tbody tr:nth-child(16) { animation-delay: 0.32s; }
.league-table tbody tr:nth-child(n+17) { animation-delay: 0.34s; }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
  .realm-title {
    font-size: 12px;
  }
  .league-table {
    font-size: 16px;
  }
  .league-table thead th {
    font-size: 7px;
    padding: 8px 6px;
  }
  .league-table td {
    padding: 6px;
  }
  .pixel-avatar {
    width: 32px;
    height: 32px;
  }
  .rank-num {
    font-size: 10px;
    width: 24px;
    height: 24px;
  }
  .score-points {
    font-size: 12px;
  }
  .player-name {
    font-size: 16px;
  }
  .player-nick {
    font-size: 7px;
  }
}

/* ═══════════════════════════════════════════
   FIRE ANIMATION for dragon icon in header
   ═══════════════════════════════════════════ */
.dragon-fire-text {
  display: inline-block;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--dragon-fire) 50%, var(--blood) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fire-shift 3s ease-in-out infinite;
}

@keyframes fire-shift {
  0%, 100% { filter: brightness(1) hue-rotate(0deg); }
  33% { filter: brightness(1.2) hue-rotate(-10deg); }
  66% { filter: brightness(0.9) hue-rotate(10deg); }
}

/* ═══════════════════════════════════════════
   CHIBI SCENE — HORIZONTAL STRIP ABOVE TABLE
   ═══════════════════════════════════════════ */
.chibi-scene {
  position: relative;
  height: 80px;
  margin-bottom: 8px;
  overflow: hidden;
  border-bottom: 3px solid var(--pixel-border);
  background:
    linear-gradient(180deg, transparent 0%, rgba(26, 21, 16, 0.6) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(61, 50, 37, 0.3) 0px, rgba(61, 50, 37, 0.3) 4px,
      transparent 4px, transparent 8px
    );
}

/* Ground line */
.chibi-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--parchment-light) 0px, var(--parchment-light) 8px,
    var(--parchment-glow) 8px, var(--parchment-glow) 12px
  );
  box-shadow: 0 -1px 0 var(--pixel-border);
}

.chibi {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  image-rendering: pixelated;
}

/* ── DRAGON — flies across the sky ── */
.chibi-dragon {
  top: 4px;
  left: -50px;
  width: 40px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Crect x='4' y='0' width='2' height='2' fill='%23c83030'/%3E%3Crect x='6' y='0' width='2' height='2' fill='%23e85050'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23c83030'/%3E%3Crect x='4' y='2' width='2' height='2' fill='%23e85050'/%3E%3Crect x='6' y='2' width='4' height='2' fill='%23e85820'/%3E%3Crect x='10' y='2' width='2' height='2' fill='%23c83030'/%3E%3Crect x='8' y='4' width='6' height='2' fill='%23e85820'/%3E%3Crect x='14' y='4' width='2' height='2' fill='%23c83030'/%3E%3Crect x='6' y='4' width='2' height='2' fill='%23ffa060'/%3E%3Crect x='6' y='6' width='10' height='2' fill='%23e85820'/%3E%3Crect x='16' y='6' width='2' height='2' fill='%23ffa060'/%3E%3Crect x='4' y='6' width='2' height='2' fill='%23e85050'/%3E%3Crect x='8' y='8' width='6' height='2' fill='%23c83030'/%3E%3Crect x='14' y='8' width='4' height='2' fill='%23e85820'/%3E%3Crect x='6' y='8' width='2' height='2' fill='%23ffd54f'/%3E%3Crect x='10' y='10' width='4' height='2' fill='%23c83030'/%3E%3Crect x='18' y='8' width='2' height='2' fill='%23ffa060'/%3E%3Crect x='2' y='8' width='2' height='2' fill='%23c83030'/%3E%3Crect x='0' y='10' width='2' height='2' fill='%23c83030'/%3E%3Crect x='12' y='12' width='2' height='2' fill='%23aa2020'/%3E%3Crect x='4' y='10' width='2' height='2' fill='%23aa2020'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: dragon-fly 11s linear infinite, chibi-bob 1s ease-in-out infinite;
}

@keyframes dragon-fly {
  0%   { left: -50px; top: 6px; }
  25%  { left: 25%;  top: 2px; }
  50%  { left: 55%;  top: 10px; }
  75%  { left: 80%;  top: 0px; }
  100% { left: calc(100% + 50px); top: 6px; }
}

@keyframes chibi-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ── RAVEN — flies zigzag above ── */
.chibi-raven {
  top: 8px;
  right: -30px;
  width: 20px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Crect x='4' y='0' width='2' height='2' fill='%23222'/%3E%3Crect x='3' y='2' width='4' height='2' fill='%23333'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23ffd54f'/%3E%3Crect x='1' y='2' width='2' height='2' fill='%23222'/%3E%3Crect x='7' y='2' width='2' height='2' fill='%23222'/%3E%3Crect x='0' y='4' width='2' height='2' fill='%23333'/%3E%3Crect x='8' y='4' width='2' height='2' fill='%23333'/%3E%3Crect x='3' y='4' width='4' height='2' fill='%23444'/%3E%3Crect x='4' y='6' width='2' height='2' fill='%23333'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: raven-fly 8s linear infinite, wing-flap 0.3s steps(2) infinite;
}

@keyframes raven-fly {
  0%   { right: -30px; top: 10px; }
  25%  { right: 25%;   top: 4px; }
  50%  { right: 50%;   top: 16px; }
  75%  { right: 75%;   top: 6px; }
  100% { right: calc(100% + 30px); top: 10px; }
}

@keyframes wing-flap {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.7); }
}

/* ── KNIGHT — walks right along ground ── */
.chibi-knight {
  bottom: 6px;
  left: -30px;
  width: 24px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Crect x='4' y='0' width='4' height='2' fill='%23888'/%3E%3Crect x='3' y='2' width='6' height='2' fill='%23aaa'/%3E%3Crect x='4' y='2' width='2' height='2' fill='%23ddd'/%3E%3Crect x='3' y='4' width='6' height='2' fill='%23fcc'/%3E%3Crect x='4' y='4' width='2' height='2' fill='%23333'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23333'/%3E%3Crect x='2' y='6' width='8' height='2' fill='%23888'/%3E%3Crect x='3' y='8' width='6' height='4' fill='%23aaa'/%3E%3Crect x='0' y='7' width='3' height='2' fill='%23ccc'/%3E%3Crect x='9' y='7' width='3' height='2' fill='%23ccc'/%3E%3Crect x='0' y='9' width='2' height='2' fill='%23e8b830'/%3E%3Crect x='3' y='12' width='2' height='2' fill='%23666'/%3E%3Crect x='7' y='12' width='2' height='2' fill='%23666'/%3E%3Crect x='3' y='14' width='2' height='2' fill='%23555'/%3E%3Crect x='7' y='14' width='2' height='2' fill='%23555'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: walk-right 16s linear infinite, chibi-step 0.5s steps(2) infinite;
}

@keyframes walk-right {
  0%   { left: -30px; }
  100% { left: calc(100% + 30px); }
}

@keyframes chibi-step {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ── DIRE WOLF — trots left along ground ── */
.chibi-wolf {
  bottom: 6px;
  right: -40px;
  width: 32px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Crect x='2' y='0' width='2' height='2' fill='%23888'/%3E%3Crect x='4' y='0' width='2' height='2' fill='%23aaa'/%3E%3Crect x='1' y='2' width='2' height='2' fill='%23aaa'/%3E%3Crect x='3' y='2' width='4' height='2' fill='%23ccc'/%3E%3Crect x='7' y='2' width='2' height='2' fill='%23aaa'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%23333'/%3E%3Crect x='2' y='4' width='8' height='2' fill='%23ccc'/%3E%3Crect x='10' y='4' width='4' height='2' fill='%23aaa'/%3E%3Crect x='4' y='6' width='8' height='2' fill='%23ccc'/%3E%3Crect x='12' y='6' width='2' height='2' fill='%23aaa'/%3E%3Crect x='14' y='4' width='2' height='2' fill='%23ccc'/%3E%3Crect x='4' y='8' width='2' height='2' fill='%23aaa'/%3E%3Crect x='8' y='8' width='2' height='2' fill='%23aaa'/%3E%3Crect x='4' y='10' width='2' height='2' fill='%23888'/%3E%3Crect x='8' y='10' width='2' height='2' fill='%23888'/%3E%3Crect x='14' y='6' width='2' height='4' fill='%23ccc'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: walk-left 20s linear infinite, chibi-step 0.35s steps(2) infinite;
}

@keyframes walk-left {
  0%   { right: -40px; }
  100% { right: calc(100% + 40px); }
}

/* ── KING — walks slowly on ground ── */
.chibi-king {
  bottom: 6px;
  left: 30%;
  width: 24px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Crect x='3' y='0' width='2' height='2' fill='%23e8b830'/%3E%3Crect x='5' y='0' width='2' height='1' fill='%23e8b830'/%3E%3Crect x='7' y='0' width='2' height='2' fill='%23e8b830'/%3E%3Crect x='3' y='2' width='6' height='2' fill='%23e8b830'/%3E%3Crect x='3' y='4' width='6' height='2' fill='%23fcc'/%3E%3Crect x='4' y='4' width='2' height='1' fill='%23333'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23333'/%3E%3Crect x='2' y='6' width='8' height='2' fill='%23722'/%3E%3Crect x='3' y='8' width='6' height='4' fill='%23a03030'/%3E%3Crect x='1' y='8' width='2' height='2' fill='%23fcc'/%3E%3Crect x='9' y='8' width='2' height='2' fill='%23fcc'/%3E%3Crect x='3' y='12' width='2' height='2' fill='%23444'/%3E%3Crect x='7' y='12' width='2' height='2' fill='%23444'/%3E%3Crect x='3' y='14' width='2' height='2' fill='%23333'/%3E%3Crect x='7' y='14' width='2' height='2' fill='%23333'/%3E%3Crect x='5' y='9' width='2' height='2' fill='%23e8b830'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: king-walk 26s linear infinite, chibi-step 0.7s steps(2) infinite;
}

@keyframes king-walk {
  0%   { left: -30px; }
  100% { left: calc(100% + 30px); }
}

/* ── RED WITCH — floats in the sky ── */
.chibi-witch {
  top: 6px;
  left: 60%;
  width: 24px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Crect x='5' y='0' width='2' height='2' fill='%23c83030'/%3E%3Crect x='4' y='2' width='4' height='2' fill='%23e85050'/%3E%3Crect x='3' y='4' width='6' height='2' fill='%23fcc'/%3E%3Crect x='4' y='4' width='2' height='1' fill='%23333'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23333'/%3E%3Crect x='2' y='6' width='8' height='2' fill='%23c83030'/%3E%3Crect x='2' y='8' width='8' height='4' fill='%23a02020'/%3E%3Crect x='1' y='8' width='2' height='2' fill='%23fcc'/%3E%3Crect x='9' y='8' width='2' height='2' fill='%23fcc'/%3E%3Crect x='9' y='10' width='2' height='2' fill='%23ff4040'/%3E%3Crect x='3' y='12' width='6' height='2' fill='%23800'/%3E%3Crect x='2' y='14' width='8' height='2' fill='%23600'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: witch-hover 6s ease-in-out infinite;
  opacity: 0.9;
}

@keyframes witch-hover {
  0%, 100% { left: 60%; top: 6px; }
  25%      { left: 63%; top: 2px; }
  50%      { left: 57%; top: 10px; }
  75%      { left: 62%; top: 4px; }
}

/* ── PIXEL TORCHES — on left/right edges ── */
.pixel-torch {
  position: absolute;
  width: 16px;
  height: 40px;
  z-index: 6;
  pointer-events: none;
  bottom: 6px;
}
.pixel-torch::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 2px;
  width: 12px;
  height: 20px;
  background: linear-gradient(to bottom, var(--parchment-glow), var(--pixel-border));
  box-shadow: 2px 2px 0 var(--pixel-shadow);
}
.pixel-torch::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Crect x='3' y='0' width='2' height='2' fill='%23ffd54f'/%3E%3Crect x='2' y='2' width='4' height='2' fill='%23ffa030'/%3E%3Crect x='1' y='4' width='6' height='2' fill='%23e85820'/%3E%3Crect x='2' y='6' width='4' height='2' fill='%23c83030'/%3E%3Crect x='3' y='8' width='2' height='2' fill='%23801010'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: torch-flicker 0.4s steps(3) infinite;
}

.pixel-torch-left { left: 8px; }
.pixel-torch-right { right: 8px; }

@keyframes torch-flicker {
  0%   { opacity: 1; transform: scaleX(1); }
  33%  { opacity: 0.8; transform: scaleX(-1); }
  66%  { opacity: 0.9; transform: scaleX(1) translateY(-1px); }
  100% { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 768px) {
  .chibi-scene { height: 60px; }
  .chibi-king { display: none; }
  .chibi-witch { display: none; }
}

/* ═══════════════════════════════════════════
   NO-RESULTS PIXEL TOMBSTONE
   ═══════════════════════════════════════════ */
.pixel-empty {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--ink-dim);
  text-align: center;
  padding: 2rem;
}

/* ═══════════════════════════════════════════
   BACK LINK — PIXEL STYLE
   ═══════════════════════════════════════════ */
.pixel-back-link {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ink-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 2px solid var(--pixel-border);
  background: var(--parchment-mid);
  box-shadow: 2px 2px 0 var(--pixel-shadow);
  transition: all 0.15s;
}
.pixel-back-link:hover {
  color: var(--gold);
  border-color: var(--gold-dim);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--pixel-shadow);
}

/* ═══════════════════════════════════════════
   PLAYER PAGE — SUMMARY GRID
   ═══════════════════════════════════════════ */
.player-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 2rem;
}
@media (max-width: 480px) {
  .player-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.player-summary-item {
  text-align: center;
  padding: 12px 8px;
  background: var(--parchment-dark);
  border: 2px solid var(--pixel-border);
  box-shadow: 2px 2px 0 var(--pixel-shadow);
}
.player-summary-value {
  display: block;
  font-family: var(--font-pixel);
  font-size: 18px;
  color: var(--gold);
  text-shadow: 2px 2px 0 var(--pixel-shadow);
  margin-bottom: 4px;
}
.player-summary-label {
  display: block;
  font-family: var(--font-pixel);
  font-size: 7px;
  color: var(--ink-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.player-section-title {
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--gold);
  text-shadow: 2px 2px 0 var(--pixel-shadow);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gold-dim);
}

/* ═══════════════════════════════════════════
   PIXEL FORM — GALLERY LOGIN
   ═══════════════════════════════════════════ */
.pixel-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pixel-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pixel-form-label {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.pixel-form-input {
  font-family: var(--font-terminal);
  font-size: 20px;
  color: var(--ink);
  background: var(--parchment-dark);
  border: 2px solid var(--pixel-border);
  padding: 10px 12px;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.3);
  outline: none;
  transition: border-color 0.15s;
}
.pixel-form-input:focus {
  border-color: var(--gold);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.3), 0 0 10px rgba(232, 184, 48, 0.2);
}

/* ═══════════════════════════════════════════
   PIXEL BUTTON
   ═══════════════════════════════════════════ */
.pixel-btn {
  font-family: var(--font-pixel);
  font-size: 10px;
  padding: 12px 20px;
  border: 3px solid var(--pixel-border);
  background: var(--parchment-light);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--pixel-shadow);
  transition: all 0.1s;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.pixel-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--pixel-shadow);
  filter: brightness(1.1);
}
.pixel-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pixel-shadow);
}
.pixel-btn-gold {
  background: var(--gold-dim);
  color: var(--parchment-dark);
  border-color: var(--gold);
}
.pixel-btn-gold:hover {
  background: var(--gold);
}

/* ═══════════════════════════════════════════
   PIXEL ALERTS
   ═══════════════════════════════════════════ */
.pixel-alert-error {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--blood-bright);
  background: rgba(200, 48, 48, 0.15);
  border: 2px solid var(--blood);
  padding: 10px 12px;
  box-shadow: 2px 2px 0 var(--pixel-shadow);
  text-align: center;
}
.pixel-alert-success {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--venom-bright);
  background: rgba(64, 184, 64, 0.1);
  border: 2px solid var(--venom);
  padding: 10px 12px;
  box-shadow: 2px 2px 0 var(--pixel-shadow);
  text-align: center;
}

/* ═══════════════════════════════════════════
   GALLERY — CARD GRID
   ═══════════════════════════════════════════ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gallery-card {
  display: block;
  background: var(--parchment-mid);
  border: 3px solid var(--pixel-border);
  box-shadow: 3px 3px 0 var(--pixel-shadow);
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
  overflow: hidden;
  animation: card-appear 0.4s ease-out both;
}
.gallery-card:hover {
  border-color: var(--gold-dim);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--pixel-shadow);
  filter: brightness(1.15);
}
.gallery-card:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--pixel-shadow);
}

@keyframes card-appear {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger gallery cards */
.gallery-card:nth-child(1) { animation-delay: 0.02s; }
.gallery-card:nth-child(2) { animation-delay: 0.04s; }
.gallery-card:nth-child(3) { animation-delay: 0.06s; }
.gallery-card:nth-child(4) { animation-delay: 0.08s; }
.gallery-card:nth-child(5) { animation-delay: 0.10s; }
.gallery-card:nth-child(6) { animation-delay: 0.12s; }
.gallery-card:nth-child(7) { animation-delay: 0.14s; }
.gallery-card:nth-child(8) { animation-delay: 0.16s; }
.gallery-card:nth-child(n+9) { animation-delay: 0.18s; }

.gallery-card-portrait {
  width: 100%;
  aspect-ratio: 1;
  background: var(--parchment-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 3px solid var(--pixel-border);
}
.gallery-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.gallery-card-initials {
  font-family: var(--font-pixel);
  font-size: 24px;
  color: var(--ink-dim);
  text-shadow: 2px 2px 0 var(--pixel-shadow);
}

.gallery-card-info {
  padding: 10px;
  text-align: center;
}
.gallery-card-name {
  font-family: var(--font-terminal);
  font-size: 18px;
  color: var(--ink);
  line-height: 1.2;
}
.gallery-card-nick {
  font-family: var(--font-pixel);
  font-size: 7px;
  color: var(--gold-dim);
  margin-top: 4px;
  letter-spacing: 0.5px;
}
.gallery-card:hover .gallery-card-nick {
  color: var(--gold);
}

/* w-full utility for buttons */
.w-full { width: 100%; }

/* ═══════════════════════════════════════════
   RULES CONTENT — STYLED TEXT
   ═══════════════════════════════════════════ */
.rules-content {
  font-family: var(--font-terminal);
  font-size: 20px;
  color: var(--ink);
  line-height: 1.6;
}
.rules-content p {
  margin-bottom: 0.75rem;
}
.rules-content p:empty {
  margin-bottom: 0.25rem;
}

/* Section headers — lines starting with emoji or ALL-CAPS words */
.rules-content p:first-child,
.rules-content p strong {
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--gold);
  text-shadow: 2px 2px 0 var(--pixel-shadow);
}

/* Horizontal rule simulation — lines that are just dashes */
.rules-content hr {
  border: none;
  height: 3px;
  margin: 1.5rem 0;
  background: repeating-linear-gradient(
    90deg,
    var(--gold-dim) 0px, var(--gold-dim) 6px,
    transparent 6px, transparent 12px
  );
}

/* Bullet points */
.rules-content ul,
.rules-content ol {
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}
.rules-content li {
  margin-bottom: 0.25rem;
  position: relative;
}
.rules-content li::marker {
  color: var(--gold-dim);
}

/* Score table lines — make them stand out */
.rules-content code {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--gold-bright);
  background: var(--parchment-dark);
  padding: 2px 6px;
  border: 1px solid var(--pixel-border);
}

/* Subsection separator */
.rules-section-divider {
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--pixel-border) 0px, var(--pixel-border) 4px,
    transparent 4px, transparent 8px
  );
  margin: 1rem 0;
}