/* ============================================
   MINECRAFT PVP STATS - AUTHENTIC BLOCK STYLE
   ============================================ */

/* CSS Variables - AUTHENTIC MINECRAFT BLOCKS */
:root {
  /* Block Colors - with texture variations */
  --mc-obsidian: #100010;
  --mc-deepslate: #1a1a1a;
  --mc-stone-dark: #6b6b6b;
  --mc-stone: #7d7d7d;
  --mc-stone-light: #8f8f8f;
  --mc-cobble: #828282;

  /* Oak Planks variations */
  --mc-planks-dark: #6b4423;
  --mc-planks: #9c7853;
  --mc-planks-light: #b88e6a;

  /* Dirt variations */
  --mc-dirt-dark: #7a5837;
  --mc-dirt: #8b6239;
  --mc-dirt-light: #9c7648;

  /* Grass variations */
  --mc-grass-dark: #5f9741;
  --mc-grass: #79c05a;
  --mc-grass-light: #8dd865;

  /* Game States */
  --mc-emerald: #50c878;
  --mc-emerald-dark: #2ea058;
  --mc-redstone: #ff0000;
  --mc-redstone-dark: #cc0000;
  --mc-gold: #fcee4b;
  --mc-lapis: #4a80ff;
  --mc-diamond: #5dade2;

  /* UI */
  --mc-text-white: #ffffff;
  --mc-text-gray: #aaaaaa;
  --mc-text-dark: #3f3f3f;
  --mc-shadow: #000000;

  /* Spacing - 8px grid */
  --mc-unit: 8px;
  --mc-space-1: 8px;
  --mc-space-2: 16px;
  --mc-space-3: 24px;
  --mc-space-4: 32px;

  /* Font */
  --mc-font: 'Press Start 2P', 'Courier New', monospace;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Body - Deepslate/Stone Block Background */
body {
  font-family: var(--mc-font);
  background: var(--mc-deepslate);
  background-image:
    /* Noise pattern - like actual MC blocks */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 2px,
      transparent 3px,
      rgba(0, 0, 0, 0.03) 4px,
      transparent 5px,
      transparent 7px,
      rgba(255, 255, 255, 0.01) 8px,
      transparent 9px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(255, 255, 255, 0.01) 1px,
      transparent 2px,
      rgba(0, 0, 0, 0.02) 3px,
      transparent 4px,
      transparent 6px,
      rgba(255, 255, 255, 0.02) 7px,
      transparent 8px,
      transparent 10px,
      rgba(0, 0, 0, 0.01) 11px,
      transparent 12px
    ),
    /* 16x16 block grid */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 16px,
      rgba(255, 255, 255, 0.01) 16px,
      rgba(255, 255, 255, 0.01) 17px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 16px,
      rgba(255, 255, 255, 0.01) 16px,
      rgba(255, 255, 255, 0.01) 17px
    );
  color: var(--mc-text-white);
  min-height: 100vh;
  line-height: 1.4;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--mc-space-2);
}

/* ==================
   HEADER - OAK PLANKS
   ================== */

header {
  background: var(--mc-planks);
  background-image:
    /* Wood texture noise */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      rgba(0, 0, 0, 0.08) 1px,
      transparent 2px,
      rgba(107, 68, 35, 0.3) 3px,
      transparent 4px,
      rgba(0, 0, 0, 0.05) 5px,
      transparent 7px,
      rgba(188, 142, 106, 0.2) 8px,
      transparent 10px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(0, 0, 0, 0.06) 1px,
      transparent 3px,
      rgba(107, 68, 35, 0.2) 4px,
      transparent 6px,
      rgba(188, 142, 106, 0.15) 7px,
      transparent 9px,
      rgba(0, 0, 0, 0.04) 11px,
      transparent 13px
    ),
    /* Plank lines */
    repeating-linear-gradient(
      90deg,
      var(--mc-planks),
      var(--mc-planks) 30px,
      var(--mc-planks-dark) 30px,
      var(--mc-planks-dark) 32px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 15px,
      rgba(0, 0, 0, 0.15) 15px,
      rgba(0, 0, 0, 0.15) 16px
    );
  border: 3px solid var(--mc-shadow);
  border-top-color: var(--mc-planks-light);
  border-left-color: var(--mc-planks-light);
  border-bottom-color: var(--mc-planks-dark);
  border-right-color: var(--mc-planks-dark);
  padding: var(--mc-space-2) var(--mc-space-3);
  margin-bottom: var(--mc-space-2);
  position: relative;
  box-shadow: 0 4px 0 var(--mc-shadow);
}

header h1 {
  font-family: var(--mc-font);
  font-size: 20px;
  color: var(--mc-text-white);
  text-shadow:
    2px 2px 0 var(--mc-shadow),
    3px 3px 0 rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
  margin-bottom: var(--mc-space-2);
  position: relative;
  z-index: 1;
}

nav {
  display: flex;
  gap: var(--mc-space-1);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Stone Button */
nav a {
  font-family: var(--mc-font);
  font-size: 12px;
  padding: var(--mc-space-1) var(--mc-space-2);
  background: var(--mc-stone);
  background-image:
    /* Stone texture */
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      rgba(0, 0, 0, 0.08) 1px,
      transparent 2px,
      rgba(255, 255, 255, 0.04) 3px,
      transparent 5px,
      rgba(0, 0, 0, 0.06) 6px,
      transparent 8px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      rgba(0, 0, 0, 0.05) 1px,
      transparent 3px,
      rgba(255, 255, 255, 0.03) 4px,
      transparent 6px,
      rgba(0, 0, 0, 0.04) 7px,
      transparent 10px
    );
  border: 2px solid var(--mc-shadow);
  border-top-color: var(--mc-stone-light);
  border-left-color: var(--mc-stone-light);
  border-bottom-color: var(--mc-stone-dark);
  border-right-color: var(--mc-stone-dark);
  color: var(--mc-text-white);
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  transition: none;
  position: relative;
  text-shadow: 1px 1px 0 var(--mc-shadow);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

nav a:hover {
  background: var(--mc-cobble);
  transform: translate(0, -2px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 4px 0 var(--mc-shadow);
}

nav a:active {
  transform: translate(0, 2px);
  border-top-color: var(--mc-stone-dark);
  border-left-color: var(--mc-stone-dark);
  border-bottom-color: var(--mc-stone-light);
  border-right-color: var(--mc-stone-light);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5);
}

nav a.active {
  background: var(--mc-cobble);
  border-top-color: var(--mc-stone-dark);
  border-left-color: var(--mc-stone-dark);
  color: var(--mc-gold);
  text-shadow: 1px 1px 0 var(--mc-shadow);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* ==================
   MAIN CONTENT
   ================== */

main {
  display: flex;
  flex-direction: column;
  gap: var(--mc-space-2);
}

/* ==================
   STAT CARDS - STONE BLOCKS
   ================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--mc-space-2);
}

.stat-card {
  background: var(--mc-stone);
  background-image:
    /* Stone block texture - very noisy like actual MC */
    repeating-linear-gradient(
      37deg,
      transparent 0px,
      rgba(0, 0, 0, 0.12) 1px,
      transparent 2px,
      rgba(255, 255, 255, 0.06) 3px,
      transparent 4px,
      rgba(0, 0, 0, 0.08) 5px,
      transparent 7px,
      rgba(255, 255, 255, 0.04) 8px,
      transparent 10px
    ),
    repeating-linear-gradient(
      143deg,
      transparent 0px,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 3px,
      rgba(255, 255, 255, 0.05) 4px,
      transparent 6px,
      rgba(0, 0, 0, 0.07) 7px,
      transparent 9px
    ),
    /* 8x8 pixel grid like inventory slot */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 8px,
      rgba(0, 0, 0, 0.15) 8px,
      rgba(0, 0, 0, 0.15) 9px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 8px,
      rgba(0, 0, 0, 0.15) 8px,
      rgba(0, 0, 0, 0.15) 9px
    );
  border: 3px solid var(--mc-shadow);
  border-top-color: var(--mc-stone-light);
  border-left-color: var(--mc-stone-light);
  border-bottom-color: var(--mc-stone-dark);
  border-right-color: var(--mc-stone-dark);
  padding: var(--mc-space-2);
  text-align: center;
  position: relative;
  transition: transform 0.05s;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.stat-card:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    2px 2px 0 var(--mc-shadow);
}

.stat-value {
  font-family: var(--mc-font);
  font-size: 32px;
  color: var(--mc-text-white);
  text-shadow:
    2px 2px 0 var(--mc-shadow),
    3px 3px 0 rgba(0, 0, 0, 0.3);
  margin-bottom: var(--mc-space-1);
  position: relative;
  z-index: 1;
}

.stat-label {
  font-family: var(--mc-font);
  font-size: 10px;
  color: var(--mc-text-gray);
  text-transform: uppercase;
  letter-spacing: 0px;
  position: relative;
  z-index: 1;
  text-shadow: 1px 1px 0 var(--mc-shadow);
}

/* Win Stat - Emerald Block */
.stat-card.win {
  background: var(--mc-emerald-dark);
  background-image:
    repeating-linear-gradient(
      37deg,
      transparent 0px,
      rgba(0, 0, 0, 0.2) 1px,
      transparent 2px,
      rgba(255, 255, 255, 0.1) 3px,
      transparent 5px
    ),
    repeating-linear-gradient(
      143deg,
      transparent 0px,
      rgba(0, 0, 0, 0.15) 1px,
      transparent 3px,
      rgba(255, 255, 255, 0.08) 4px,
      transparent 7px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 8px,
      rgba(0, 0, 0, 0.2) 8px,
      rgba(0, 0, 0, 0.2) 9px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 8px,
      rgba(0, 0, 0, 0.2) 8px,
      rgba(0, 0, 0, 0.2) 9px
    );
  border-color: var(--mc-emerald);
  border-top-color: var(--mc-emerald);
  border-left-color: var(--mc-emerald);
  animation: emerald-pulse 2s ease-in-out infinite;
}

.stat-card.win .stat-value {
  color: var(--mc-emerald);
}

/* Loss Stat - Redstone Block */
.stat-card.loss {
  background: var(--mc-redstone-dark);
  background-image:
    repeating-linear-gradient(
      37deg,
      transparent 0px,
      rgba(0, 0, 0, 0.2) 1px,
      transparent 2px,
      rgba(255, 255, 255, 0.1) 3px,
      transparent 5px
    ),
    repeating-linear-gradient(
      143deg,
      transparent 0px,
      rgba(0, 0, 0, 0.15) 1px,
      transparent 3px,
      rgba(255, 255, 255, 0.08) 4px,
      transparent 7px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 8px,
      rgba(0, 0, 0, 0.2) 8px,
      rgba(0, 0, 0, 0.2) 9px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 8px,
      rgba(0, 0, 0, 0.2) 8px,
      rgba(0, 0, 0, 0.2) 9px
    );
  border-color: var(--mc-redstone);
  border-top-color: var(--mc-redstone);
  border-left-color: var(--mc-redstone);
  animation: redstone-pulse 2s ease-in-out infinite;
}

.stat-card.loss .stat-value {
  color: var(--mc-redstone);
}

@keyframes emerald-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.4),
      0 0 12px var(--mc-emerald),
      inset 0 0 12px rgba(80, 200, 120, 0.3);
  }
}

@keyframes redstone-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.4),
      0 0 12px var(--mc-redstone),
      inset 0 0 12px rgba(255, 0, 0, 0.3);
  }
}

/* ==================
   STREAK CARD
   ================== */

.streak-section {
  display: flex;
  justify-content: center;
}

.streak-card {
  background: var(--mc-planks);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 3px,
      rgba(188, 142, 106, 0.2) 4px,
      transparent 7px
    ),
    repeating-linear-gradient(
      90deg,
      var(--mc-planks),
      var(--mc-planks) 30px,
      var(--mc-planks-dark) 30px,
      var(--mc-planks-dark) 32px
    );
  border: 3px solid var(--mc-shadow);
  border-top-color: var(--mc-planks-light);
  border-left-color: var(--mc-planks-light);
  border-bottom-color: var(--mc-planks-dark);
  border-right-color: var(--mc-planks-dark);
  padding: var(--mc-space-2) var(--mc-space-3);
  display: flex;
  align-items: center;
  gap: var(--mc-space-2);
  position: relative;
  box-shadow: 0 4px 0 var(--mc-shadow);
}

.streak-label {
  font-family: var(--mc-font);
  font-size: 12px;
  color: var(--mc-text-gray);
  text-shadow: 1px 1px 0 var(--mc-shadow);
}

.streak-value {
  font-family: var(--mc-font);
  font-size: 16px;
  font-weight: bold;
  text-shadow: 2px 2px 0 var(--mc-shadow);
}

.streak-card.win-streak .streak-value {
  color: var(--mc-emerald);
}

.streak-card.loss-streak .streak-value {
  color: var(--mc-redstone);
}

/* ==================
   PANELS - DIRT BLOCKS
   ================== */

.filter-section,
.chart-section,
.matches-section,
.form-section {
  background: var(--mc-dirt);
  background-image:
    /* Dirt texture - very noisy */
    repeating-linear-gradient(
      23deg,
      transparent 0px,
      rgba(0, 0, 0, 0.15) 1px,
      transparent 2px,
      rgba(156, 118, 72, 0.3) 3px,
      transparent 4px,
      rgba(0, 0, 0, 0.1) 5px,
      transparent 7px,
      rgba(122, 88, 55, 0.2) 8px,
      transparent 10px
    ),
    repeating-linear-gradient(
      67deg,
      transparent 0px,
      rgba(0, 0, 0, 0.12) 1px,
      transparent 3px,
      rgba(156, 118, 72, 0.25) 4px,
      transparent 6px,
      rgba(0, 0, 0, 0.08) 7px,
      transparent 9px
    ),
    repeating-linear-gradient(
      157deg,
      transparent 0px,
      rgba(122, 88, 55, 0.2) 1px,
      transparent 4px,
      rgba(0, 0, 0, 0.1) 5px,
      transparent 8px
    );
  border: 3px solid var(--mc-shadow);
  border-top-color: var(--mc-dirt-light);
  border-left-color: var(--mc-dirt-light);
  border-bottom-color: var(--mc-dirt-dark);
  border-right-color: var(--mc-dirt-dark);
  padding: var(--mc-space-3);
  position: relative;
  box-shadow:
    0 4px 0 var(--mc-shadow),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.chart-section h2,
.matches-section h2,
.form-section h2 {
  font-family: var(--mc-font);
  font-size: 14px;
  color: var(--mc-text-white);
  text-shadow:
    2px 2px 0 var(--mc-shadow),
    3px 3px 0 rgba(0, 0, 0, 0.3);
  margin-bottom: var(--mc-space-2);
  letter-spacing: 0px;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
}

/* ==================
   FILTER CONTROLS
   ================== */

.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mc-space-2);
  align-items: flex-end;
  position: relative;
  z-index: 1;
}

.filter-controls label {
  display: flex;
  flex-direction: column;
  gap: var(--mc-space-1);
  font-family: var(--mc-font);
  font-size: 10px;
  color: var(--mc-text-white);
  text-shadow: 1px 1px 0 var(--mc-shadow);
}

.filter-controls input[type="date"] {
  font-family: var(--mc-font);
  font-size: 10px;
  padding: var(--mc-space-1);
  background: var(--mc-obsidian);
  border: 2px solid var(--mc-shadow);
  color: var(--mc-text-white);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.filter-controls input[type="date"]:focus {
  outline: none;
  border-color: var(--mc-diamond);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.9),
    0 0 0 2px var(--mc-diamond);
}

/* ==================
   CHART
   ================== */

#stats-chart {
  position: relative;
  z-index: 1;
  filter: contrast(1.2) saturate(1.3);
}

/* ==================
   MATCHES LIST
   ================== */

.matches-list {
  display: flex;
  flex-direction: column;
  gap: var(--mc-space-1);
  position: relative;
  z-index: 1;
}

.match-item {
  background: var(--mc-stone);
  background-image:
    repeating-linear-gradient(
      37deg,
      transparent 0px,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 3px,
      rgba(255, 255, 255, 0.05) 4px,
      transparent 7px
    ),
    repeating-linear-gradient(
      143deg,
      transparent 0px,
      rgba(0, 0, 0, 0.08) 1px,
      transparent 4px,
      rgba(255, 255, 255, 0.04) 5px,
      transparent 9px
    );
  border: 2px solid var(--mc-shadow);
  border-top-color: var(--mc-stone-light);
  border-left-color: var(--mc-stone-light);
  border-bottom-color: var(--mc-stone-dark);
  border-right-color: var(--mc-stone-dark);
  padding: var(--mc-space-2);
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: var(--mc-space-2);
  align-items: center;
  transition: transform 0.05s;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.match-item:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    2px 2px 0 var(--mc-shadow);
}

.match-result-badge {
  font-family: var(--mc-font);
  font-size: 10px;
  padding: 4px 8px;
  border: 2px solid var(--mc-shadow);
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 1px 1px 0 var(--mc-shadow);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.match-result-badge.win {
  background: var(--mc-emerald);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-left-color: rgba(255, 255, 255, 0.4);
  color: var(--mc-text-white);
}

.match-result-badge.loss {
  background: var(--mc-redstone);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-left-color: rgba(255, 255, 255, 0.4);
  color: var(--mc-text-white);
}

.match-result-badge.inconclusive {
  background: var(--mc-cobble);
  border-top-color: var(--mc-stone-light);
  border-left-color: var(--mc-stone-light);
  color: var(--mc-text-white);
}

.match-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.match-opponent {
  font-family: var(--mc-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--mc-text-white);
  text-shadow: 1px 1px 0 var(--mc-shadow);
}

.match-notes {
  font-family: var(--mc-font);
  font-size: 10px;
  color: var(--mc-text-gray);
}

.match-timestamp {
  font-family: var(--mc-font);
  font-size: 10px;
  color: var(--mc-text-gray);
}

.match-delete-btn {
  font-size: 16px;
  padding: 6px;
  background: var(--mc-redstone);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      rgba(0, 0, 0, 0.2) 1px,
      transparent 3px,
      rgba(255, 255, 255, 0.1) 4px,
      transparent 6px
    );
  border: 2px solid var(--mc-shadow);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-left-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: var(--mc-redstone-dark);
  border-right-color: var(--mc-redstone-dark);
  cursor: pointer;
  transition: none;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.match-delete-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    2px 2px 0 var(--mc-shadow);
}

.match-delete-btn:active {
  transform: translate(2px, 2px);
  border-top-color: var(--mc-redstone-dark);
  border-left-color: var(--mc-redstone-dark);
  border-bottom-color: rgba(255, 255, 255, 0.4);
  border-right-color: rgba(255, 255, 255, 0.4);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* ==================
   FORM STYLES
   ================== */

.match-form {
  display: flex;
  flex-direction: column;
  gap: var(--mc-space-2);
  position: relative;
  z-index: 1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--mc-space-1);
}

.form-group label {
  font-family: var(--mc-font);
  font-size: 10px;
  font-weight: 600;
  color: var(--mc-text-white);
  text-shadow: 1px 1px 0 var(--mc-shadow);
  text-transform: uppercase;
}

.form-group input[type="text"],
.form-group input[type="datetime-local"],
.form-group textarea {
  font-family: var(--mc-font);
  font-size: 12px;
  padding: var(--mc-space-1);
  background: var(--mc-obsidian);
  border: 2px solid var(--mc-shadow);
  color: var(--mc-text-white);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.9);
  transition: none;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--mc-diamond);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.9),
    0 0 0 2px var(--mc-diamond);
}

.form-group small {
  font-family: var(--mc-font);
  font-size: 8px;
  color: var(--mc-text-gray);
}

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

.result-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--mc-space-1);
}

.result-btn {
  font-family: var(--mc-font);
  font-size: 12px;
  padding: var(--mc-space-2);
  border: 3px solid var(--mc-shadow);
  font-weight: bold;
  cursor: pointer;
  transition: none;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 var(--mc-shadow);
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.result-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    2px 2px 0 var(--mc-shadow);
}

.result-btn:active {
  transform: translate(2px, 2px);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.result-btn.win {
  background: var(--mc-emerald);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      rgba(0, 0, 0, 0.15) 1px,
      transparent 3px,
      rgba(255, 255, 255, 0.08) 4px,
      transparent 6px
    );
  border-top-color: rgba(255, 255, 255, 0.4);
  border-left-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: var(--mc-emerald-dark);
  border-right-color: var(--mc-emerald-dark);
  color: var(--mc-text-white);
}

.result-btn.win.selected {
  border: 4px solid var(--mc-text-white);
  box-shadow:
    0 0 12px var(--mc-emerald),
    inset 0 0 12px rgba(255, 255, 255, 0.3);
}

.result-btn.loss {
  background: var(--mc-redstone);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      rgba(0, 0, 0, 0.15) 1px,
      transparent 3px,
      rgba(255, 255, 255, 0.08) 4px,
      transparent 6px
    );
  border-top-color: rgba(255, 255, 255, 0.4);
  border-left-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: var(--mc-redstone-dark);
  border-right-color: var(--mc-redstone-dark);
  color: var(--mc-text-white);
}

.result-btn.loss.selected {
  border: 4px solid var(--mc-text-white);
  box-shadow:
    0 0 12px var(--mc-redstone),
    inset 0 0 12px rgba(255, 255, 255, 0.3);
}

.result-btn.inconclusive {
  background: var(--mc-cobble);
  background-image:
    repeating-linear-gradient(
      37deg,
      transparent 0px,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 3px,
      rgba(255, 255, 255, 0.05) 4px,
      transparent 6px
    );
  border-top-color: var(--mc-stone-light);
  border-left-color: var(--mc-stone-light);
  border-bottom-color: var(--mc-stone-dark);
  border-right-color: var(--mc-stone-dark);
  color: var(--mc-text-white);
}

.result-btn.inconclusive.selected {
  border: 4px solid var(--mc-text-white);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
}

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

.btn {
  font-family: var(--mc-font);
  font-size: 12px;
  padding: var(--mc-space-1) var(--mc-space-2);
  border: 3px solid var(--mc-shadow);
  cursor: pointer;
  text-transform: uppercase;
  transition: none;
  position: relative;
  letter-spacing: 0px;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 0 var(--mc-shadow);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.btn-primary {
  background: var(--mc-emerald);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      rgba(0, 0, 0, 0.15) 1px,
      transparent 3px,
      rgba(255, 255, 255, 0.08) 4px,
      transparent 6px
    );
  border-top-color: rgba(255, 255, 255, 0.4);
  border-left-color: rgba(255, 255, 255, 0.4);
  border-bottom-color: var(--mc-emerald-dark);
  border-right-color: var(--mc-emerald-dark);
  color: var(--mc-text-white);
}

.btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    2px 2px 0 var(--mc-shadow);
}

.btn-primary:active {
  transform: translate(2px, 2px);
  border-top-color: var(--mc-emerald-dark);
  border-left-color: var(--mc-emerald-dark);
  border-bottom-color: rgba(255, 255, 255, 0.4);
  border-right-color: rgba(255, 255, 255, 0.4);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.btn-secondary {
  background: var(--mc-stone);
  background-image:
    repeating-linear-gradient(
      37deg,
      transparent 0px,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 3px,
      rgba(255, 255, 255, 0.05) 4px,
      transparent 6px
    );
  border-top-color: var(--mc-stone-light);
  border-left-color: var(--mc-stone-light);
  border-bottom-color: var(--mc-stone-dark);
  border-right-color: var(--mc-stone-dark);
  color: var(--mc-text-white);
}

.btn-secondary:hover {
  background: var(--mc-cobble);
  transform: translate(-2px, -2px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    2px 2px 0 var(--mc-shadow);
}

.btn-secondary:active {
  transform: translate(2px, 2px);
  border-top-color: var(--mc-stone-dark);
  border-left-color: var(--mc-stone-dark);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.btn-success {
  background: var(--mc-gold);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 3px,
      rgba(255, 255, 255, 0.15) 4px,
      transparent 6px
    );
  border-top-color: rgba(255, 255, 255, 0.5);
  border-left-color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(204, 189, 61, 1);
  border-right-color: rgba(204, 189, 61, 1);
  color: var(--mc-text-dark);
  text-shadow: none;
}

.btn-success:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    2px 2px 0 var(--mc-shadow),
    0 0 12px var(--mc-gold);
}

.btn-success:active {
  transform: translate(2px, 2px);
  border-top-color: rgba(204, 189, 61, 1);
  border-left-color: rgba(204, 189, 61, 1);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.form-actions {
  display: flex;
  gap: var(--mc-space-1);
}

/* ==================
   MESSAGES
   ================== */

.message {
  padding: var(--mc-space-2);
  border: 3px solid var(--mc-shadow);
  margin-top: var(--mc-space-2);
  font-family: var(--mc-font);
  font-size: 10px;
  position: relative;
  z-index: 1;
  text-shadow: 1px 1px 0 var(--mc-shadow);
}

.message.success {
  background: var(--mc-emerald-dark);
  color: var(--mc-emerald);
  border-color: var(--mc-emerald);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-left-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 12px var(--mc-emerald);
}

.message.error {
  background: var(--mc-redstone-dark);
  color: var(--mc-redstone);
  border-color: var(--mc-redstone);
  border-top-color: rgba(255, 255, 255, 0.4);
  border-left-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 12px var(--mc-redstone);
}

.message a {
  color: inherit;
  font-weight: bold;
  text-decoration: underline;
}

.loading {
  text-align: center;
  padding: var(--mc-space-3);
  font-family: var(--mc-font);
  font-size: 12px;
  color: var(--mc-text-gray);
}

/* ==================
   RESPONSIVE DESIGN
   ================== */

@media (max-width: 768px) {
  header h1 {
    font-size: 14px;
  }

  nav a {
    font-size: 10px;
    padding: 6px 12px;
  }

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

  .stat-value {
    font-size: 24px;
  }

  .stat-label {
    font-size: 8px;
  }

  .match-item {
    grid-template-columns: auto 1fr auto;
    gap: var(--mc-space-1);
  }

  .match-delete-btn {
    grid-column: 3;
    grid-row: 1 / -1;
  }

  .filter-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .result-buttons {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }

  .chart-section h2,
  .matches-section h2,
  .form-section h2 {
    font-size: 12px;
  }
}