/* ==========================================================================
   THE DUBS - EISHOCKEY TIPPSPIEL (AUTHENTIC EARLY-2000s RETRO PALETTE)
   Iconic Colors: Windows 2000 Classic Gray (#d4d0c8), Deep Navy Blue (#0a246a),
   DEL Hockey Orange (#ff8800), Netscape Link Blue (#0000cc) & Soft Yellow (#ffffcc)
   ========================================================================== */

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

body {
  font-family: Verdana, Geneva, Tahoma, "Trebuchet MS", sans-serif;
  background-color: #0b1f33;
  background-image: 
    linear-gradient(rgba(8, 24, 48, 0.86), rgba(12, 32, 58, 0.90)),
    url("../../images/background/eishockey/bg_001.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  color: #1a1a1a;
  font-size: 13px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Top Retro Ticker (Marquee Style - Iconic Black & Amber/Yellow)
   -------------------------------------------------------------------------- */
.ticker-wrap {
  width: 100%;
  background: #000000;
  border-bottom: 3px solid #ff8800;
  color: #ffcc00;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 0;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 1px;
}

.ticker-content {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 34s linear infinite;
}

@keyframes ticker {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* --------------------------------------------------------------------------
   Main Layout Wrapper (Authentic Windows 2000 3D Bevel Frame)
   -------------------------------------------------------------------------- */
.main-wrapper {
  max-width: 1180px;
  margin: 15px auto 30px;
  background-color: #d4d0c8; /* Windows 2000 System Gray */
  border-top: 3px solid #ffffff;
  border-left: 3px solid #ffffff;
  border-right: 3px solid #404040;
  border-bottom: 3px solid #404040;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
}

/* --------------------------------------------------------------------------
   Header Banner (Deep Hockey Navy with Golden/Orange Text)
   -------------------------------------------------------------------------- */
header.site-header {
  background: linear-gradient(180deg, #001b38 0%, #003366 50%, #002244 100%);
  border-bottom: 3px solid #ff8800;
  padding: 22px 25px;
  text-align: center;
  position: relative;
}

header.site-header h1 {
  font-family: Verdana, sans-serif;
  font-size: 33px;
  font-weight: bold;
  color: #ffaa00;
  text-shadow: 2px 2px 0px #000000, 4px 4px 1px #001122;
  letter-spacing: 1.5px;
}

header.site-header .tagline {
  color: #b8d5f7;
  font-size: 12px;
  font-style: italic;
  margin-top: 6px;
  letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   2-Column Section: Sidebar Nav & Main Article
   -------------------------------------------------------------------------- */
.content-section {
  display: flex;
  background: #d4d0c8;
}

/* Sidebar Navigation (Early 2000s Sports Portal Navy) */
nav.side-nav {
  width: 250px;
  min-width: 250px;
  background: #0d233e;
  border-right: 3px solid #29476b;
  padding: 15px 12px;
}

nav.side-nav .nav-group-title {
  background: linear-gradient(90deg, #0a246a 0%, #1f508a 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 6px 10px;
  margin-bottom: 8px;
  border-left: 4px solid #ff8800;
  border-bottom: 1px solid #001020;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 1px #000000;
}

nav.side-nav ul {
  list-style-type: none;
  margin-bottom: 16px;
}

nav.side-nav ul li {
  margin-bottom: 6px;
}

/* Authentic Windows 2000 3D Bevel Push Buttons */
.retro-nav-btn {
  display: block;
  width: 100%;
  background: #e4e0d8;
  color: #000000;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
  padding: 9px 12px;
  text-align: left;
  text-decoration: none;
  font-family: Verdana, sans-serif;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: none; /* Instant 2000s tactile feel */
}

.retro-nav-btn:hover {
  background: #fff2cc; /* Warm golden rollover */
  color: #000080;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #605030;
  border-bottom: 2px solid #605030;
}

.retro-nav-btn:active,
.retro-nav-btn.active {
  background: #ff8800; /* Hockey Orange active */
  color: #ffffff;
  border-top: 2px solid #404040;
  border-left: 2px solid #404040;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  text-shadow: 1px 1px 1px #000000;
}

.retro-nav-btn.btn-home {
  background: #183556;
  border-top: 2px solid #3d648f;
  border-left: 2px solid #3d648f;
  border-right: 2px solid #001020;
  border-bottom: 2px solid #001020;
  color: #cce5ff;
}

.retro-nav-btn.btn-home:hover {
  background: #254a75;
  color: #ffffff;
}

/* Bot Status Box (ICQ / IRC Widget) */
.bot-status-panel {
  background: #000000;
  padding: 8px 10px;
  border: 2px inset #555555;
  color: #00ff66;
  font-size: 11px;
  font-family: "Courier New", monospace;
  margin-top: 4px;
}

.icq-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #008000;
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border: 1px outset #55dd55;
  font-family: Verdana, sans-serif;
}

.icq-flower {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #00ff00;
  border-radius: 50%;
  box-shadow: 0 0 5px #00ff00;
}

/* --------------------------------------------------------------------------
   Main Article Content Container (Windows 2000 Dialog Grey)
   -------------------------------------------------------------------------- */
article.main-article {
  flex: 1;
  padding: 20px;
  background: #ece9d8; /* Authentic Win2000 / XP dialog background */
  min-height: 680px;
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Retro Window (Windows 2000 3D Frame)
   -------------------------------------------------------------------------- */
.retro-window {
  background: #ece9d8;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
  margin-bottom: 22px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.35);
}

/* Iconic Windows 2000 Active Titlebar Gradient: #0a246a -> #a6caf0 */
.window-titlebar {
  background: linear-gradient(90deg, #0a246a 0%, #2060b0 60%, #a6caf0 100%);
  color: #ffffff;
  padding: 5px 8px;
  font-weight: bold;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #001030;
  text-shadow: 1px 1px 1px #001030;
}

/* Alternate Titlebars */
.window-titlebar.titlebar-orange {
  background: linear-gradient(90deg, #993300 0%, #ff8800 65%, #ffcc66 100%);
}

.window-titlebar.titlebar-green {
  background: linear-gradient(90deg, #004d00 0%, #2e8b57 65%, #80e27e 100%);
}

.window-controls {
  display: flex;
  gap: 2px;
}

.win-btn {
  display: inline-block;
  width: 16px;
  height: 14px;
  background: #d4d0c8;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  color: #000000;
  font-size: 9px;
  line-height: 12px;
  text-align: center;
  font-family: sans-serif;
  cursor: default;
  font-weight: bold;
}

.win-btn:active {
  border-top: 1px solid #404040;
  border-left: 1px solid #404040;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.window-body {
  padding: 16px;
  background: #ffffff;
  border-top: 1px solid #808080;
}

/* Tab Panels */
.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* Headings */
h2.section-heading {
  font-size: 18px;
  color: #0a246a; /* Windows Navy */
  border-bottom: 2px solid #ff8800;
  padding-bottom: 5px;
  margin-bottom: 14px;
}

h3.sub-heading {
  font-size: 14px;
  color: #003366;
  margin: 14px 0 8px;
}

/* --------------------------------------------------------------------------
   Retro Tables (Classic greyGridTable & DEL League Table)
   -------------------------------------------------------------------------- */
table.retro-table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #4a6582;
  background: #ffffff;
  margin: 12px 0;
  font-size: 12px;
}

table.retro-table th {
  background: linear-gradient(180deg, #18426d 0%, #0c2b4c 100%);
  color: #ffffff;
  padding: 8px 10px;
  text-align: left;
  border: 1px solid #2f567f;
  font-weight: bold;
  text-shadow: 1px 1px 1px #000000;
}

table.retro-table th.th-orange {
  background: linear-gradient(180deg, #ff9900 0%, #e67300 100%);
  color: #000000;
  text-shadow: none;
}

table.retro-table td {
  padding: 7px 10px;
  border: 1px solid #94a3b8;
  vertical-align: middle;
}

table.retro-table tr:nth-child(even) td {
  background: #eaf2fb; /* Crisp Ice Blue Alternating */
}

/* Iconic Early 2000s Table Row Hover Color: Soft Cream Yellow */
table.retro-table tr:hover td {
  background: #fff9c4 !important;
}

.team-badge-pill {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-weight: bold;
  padding: 2px 7px;
  border: 1px inset #808080;
  background: #e8edf2;
  color: #002244;
  font-size: 12px;
}

/* Classic Hyperlink Blue & Red Hover */
.team-link {
  color: #0000cc;
  font-weight: bold;
  text-decoration: underline;
}

.team-link:hover {
  color: #cc0000;
}

.team-link:visited {
  color: #551a8b;
}

/* --------------------------------------------------------------------------
   Iframe Container in Retro Window
   -------------------------------------------------------------------------- */
.iframe-frame-container {
  width: 100%;
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  background: #ffffff;
  overflow: hidden;
}

.iframe-frame-container iframe {
  width: 100%;
  border: none;
  display: block;
}

.external-actions-bar {
  background: #ece9d8;
  border-top: 1px solid #b0b0b0;
  padding: 6px 12px;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.external-actions-bar a {
  color: #0000cc;
  font-weight: bold;
  text-decoration: underline;
}

.external-actions-bar a:hover {
  color: #cc0000;
}

/* --------------------------------------------------------------------------
   Search & Filter Bar (Windows 2000 Inset Well)
   -------------------------------------------------------------------------- */
.filter-search-well {
  background: #ece9d8;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-search-well input {
  flex: 1;
  padding: 5px 8px;
  font-family: Verdana, sans-serif;
  font-size: 12px;
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   Marvin Bot mIRC Console
   -------------------------------------------------------------------------- */
.mirc-terminal {
  background: #000000;
  color: #00ff66;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  padding: 12px 16px;
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  margin-top: 10px;
  line-height: 1.6;
}

.mirc-terminal .irc-nick {
  color: #00ffff;
  font-weight: bold;
}

.mirc-terminal .irc-system {
  color: #ffff00;
}

.mirc-terminal .irc-cmd {
  color: #ff3399;
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   Retro Rule Boxes (Parchment Yellow & Amber Accent)
   -------------------------------------------------------------------------- */
.retro-rule-card {
  border: 1px solid #e0c880;
  background: #fffae6;
  padding: 12px;
  margin-bottom: 12px;
  border-left: 5px solid #ff8800;
}

.retro-rule-card h4 {
  font-size: 13px;
  color: #8a3c00;
  margin-bottom: 4px;
}

.retro-rule-card p {
  color: #333333;
  font-size: 12px;
}

/* Warning / Notice Card */
.retro-warning-card {
  background: #fffae6;
  border: 2px solid #ff8800;
  padding: 12px;
  margin-bottom: 14px;
}

.retro-warning-card strong.warning-title {
  color: #b35900;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Retro Photo Gallery
   -------------------------------------------------------------------------- */
.retro-gallery-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 12px;
}

.retro-photo-frame {
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  background: #ece9d8;
  padding: 6px;
  text-align: center;
}

.retro-photo-frame img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border: 1px solid #000000;
}

.retro-photo-caption {
  font-size: 11px;
  color: #333333;
  margin-top: 5px;
  font-style: italic;
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   Footer: Windows 2000 Multi-Panel Status Bar Look
   -------------------------------------------------------------------------- */
footer.site-footer {
  background: #d4d0c8;
  border-top: 3px solid #ff8800;
  color: #000000;
  padding: 14px 16px 10px;
  text-align: center;
  font-size: 11px;
}

.footer-nav {
  margin-bottom: 10px;
}

.footer-nav a {
  color: #0000cc;
  text-decoration: underline;
  margin: 0 6px;
  font-weight: bold;
}

.footer-nav a:hover {
  color: #cc0000;
}

.win-statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin: 8px 0;
}

.statusbar-panel {
  background: #d4d0c8;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  padding: 3px 10px;
  font-size: 11px;
  color: #222222;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Digital LED Counter */
.counter-box {
  display: inline-block;
  background: #000000;
  border-top: 1px solid #404040;
  border-left: 1px solid #404040;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: bold;
  padding: 1px 8px;
  letter-spacing: 2px;
}

.browser-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
  background: #d4d0c8;
  color: #003366;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: bold;
  cursor: default;
  transition: background 0.1s ease;
  user-select: none;
}

.browser-badge:hover {
  background: #f0ece0;
  color: #002244;
}

/* --------------------------------------------------------------------------
   Responsive (Mobile Compatibility)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .content-section {
    flex-direction: column;
  }

  nav.side-nav {
    width: 100%;
    min-width: 100%;
    border-right: none;
    border-bottom: 3px solid #ff8800;
  }

  header.site-header h1 {
    font-size: 24px;
  }

  .retro-gallery-table {
    display: block;
  }

  .retro-gallery-table tr,
  .retro-gallery-table td {
    display: block;
    width: 100%;
  }

  .win-statusbar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
   Interactive Retro Components (Forms, Score Pickers, Live Tables)
   -------------------------------------------------------------------------- */
.retro-btn {
  background: #d4d0c8;
  color: #000000;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
  padding: 5px 12px;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.retro-btn:hover {
  background: #e4e0d8;
  color: #000080;
}

.retro-btn:active {
  border-top: 2px solid #404040;
  border-left: 2px solid #404040;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

.retro-btn-large {
  background: linear-gradient(180deg, #ff9900 0%, #e67300 100%);
  color: #ffffff;
  border-top: 2px solid #ffcc66;
  border-left: 2px solid #ffcc66;
  border-right: 2px solid #993300;
  border-bottom: 2px solid #993300;
  padding: 10px 20px;
  font-family: Verdana, sans-serif;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  text-shadow: 1px 1px 1px #000000;
  display: inline-block;
  margin-top: 10px;
}

.retro-btn-large:hover {
  background: linear-gradient(180deg, #ffa826 0%, #f58400 100%);
}

.retro-btn-large:active {
  border-top: 2px solid #993300;
  border-left: 2px solid #993300;
  border-right: 2px solid #ffcc66;
  border-bottom: 2px solid #ffcc66;
}

.stepper-btn {
  width: 26px;
  height: 26px;
  background: #d4d0c8;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  font-family: monospace;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  line-height: 22px;
  text-align: center;
}

.stepper-btn:active {
  border-top: 1px solid #404040;
  border-left: 1px solid #404040;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.score-input {
  width: 36px;
  height: 26px;
  text-align: center;
  font-family: "Courier New", monospace;
  font-size: 15px;
  font-weight: bold;
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  background: #ffffff;
  color: #000080;
}

.fixture-group-header {
  background: linear-gradient(90deg, #0a246a 0%, #1f508a 100%);
  color: #ffffff;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: bold;
  margin: 16px 0 8px 0;
  border-left: 4px solid #ff8800;
  border-bottom: 1px solid #001020;
}

.fixture-card {
  background: #ece9d8;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  padding: 10px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.fixture-matchup {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  flex: 1;
  min-width: 260px;
}

.fixture-picker {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fixture-meta {
  font-size: 11px;
  color: #555555;
}

.retro-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  background: #ece9d8;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  padding: 14px;
  margin-bottom: 14px;
}

.retro-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.retro-form-field label {
  font-size: 11px;
  font-weight: bold;
  color: #002244;
}

.retro-form-field input,
.retro-form-field select {
  padding: 5px 8px;
  font-family: Verdana, sans-serif;
  font-size: 12px;
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  background: #ffffff;
}

.alert-box {
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 12px;
  font-weight: bold;
  display: none;
}

.alert-success {
  background: #d4edda;
  color: #155724;
  border: 2px solid #c3e6cb;
}

.alert-error {
  background: #f8d7da;
  color: #721c24;
  border: 2px solid #f5c6cb;
}

.badge-pts-4 {
  background: #16a34a;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 7px;
  border: 1px solid #15803d;
  border-radius: 2px;
}

.badge-pts-1 {
  background: #e65100;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 7px;
  border: 1px solid #bf360c;
  border-radius: 2px;
}

.badge-pts-0 {
  background: #e2e8f0;
  color: #334155;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 7px;
  border: 1px solid #94a3b8;
  border-radius: 2px;
}

.standings-rank-1 {
  background: #fef08a !important;
  color: #713f12 !important;
  font-weight: bold;
}

.standings-points-cell {
  font-size: 14px;
  font-weight: bold;
  color: #b35900;
}

.player-crowns {
  display: inline-block;
  font-size: 12px;
  cursor: help;
  vertical-align: middle;
  letter-spacing: 1px;
  margin-left: 2px;
}

/* --------------------------------------------------------------------------
   Matrix Cross-Table View (Google Sheet Style)
   -------------------------------------------------------------------------- */
.matrix-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  background: #ffffff;
  border: 2px solid #334e68;
}

.matrix-table th {
  background: linear-gradient(180deg, #18426d 0%, #0c2b4c 100%);
  color: #ffffff;
  padding: 8px 6px;
  text-align: center;
  border: 1px solid #2f567f;
  white-space: nowrap;
  font-size: 11px;
  text-shadow: 1px 1px 1px #000000;
}

.matrix-table th.matrix-th-player {
  background: #002244;
  border-right: 2px solid #001830;
  text-align: left;
  padding-left: 10px;
}

.matrix-table th.matrix-th-match {
  min-width: 95px;
  font-family: monospace, monospace;
  font-size: 11px;
}

.matchup-header-badge {
  display: inline-block;
  background: #ffffff !important;
  color: #002244 !important;
  padding: 3px 6px;
  border: 1px solid #7a9cb8 !important;
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.35);
  font-family: monospace, monospace;
  font-size: 11px !important;
  font-weight: bold !important;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.matrix-table th.matrix-th-match .matchup-header-badge,
.matrix-table th.matrix-th-match .team-badge-pill {
  background: #ffffff !important;
  color: #002244 !important;
  border: 1px solid #7a9cb8 !important;
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.35);
  font-size: 11px !important;
  font-weight: bold !important;
}

.matrix-table td {
  padding: 5px 6px;
  border: 1px solid #8ca0b3;
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
}

/* Tipper / Player name column in matrix */
.matrix-table td.matrix-player-name-cell {
  background: #f1f5f9;
  font-weight: bold;
  color: #0f172a;
  text-align: left;
  padding-left: 8px;
  border-right: 2px solid #475569 !important;
}

.matrix-table tr:nth-child(even) td.matrix-player-name-cell {
  background: #e2e8f0;
}

/* Retro Row Hover: Bright Soft Cream Yellow */
.matrix-table tbody tr:hover td {
  background-color: #fff9c4 !important;
  color: #000000 !important;
}
.matrix-table tbody tr:hover td.matrix-cell-exact {
  background-color: #48bb78 !important;
  color: #052e16 !important;
}
.matrix-table tbody tr:hover td.matrix-cell-tendency {
  background-color: #7bcba4 !important;
  color: #064e3b !important;
}
.matrix-table tbody tr:hover td.matrix-row-result {
  background-color: #fde047 !important;
}

/* Official Result Row: Warm Golden Yellow / Amber */
.matrix-row-result td {
  background: #fde047 !important;
  font-weight: bold;
  font-size: 12px;
  border-top: 2px solid #b45309 !important;
  border-bottom: 2px solid #b45309 !important;
  border-left: 1px solid #d97706 !important;
  border-right: 1px solid #d97706 !important;
  color: #000000 !important;
}
.matrix-row-result td.matrix-result-label-cell {
  background: #fde68a !important;
  color: #78350f !important;
  border-right: 2px solid #b45309 !important;
  text-align: left;
  padding-left: 8px;
}

/* Exakter Treffer: Saturated Google Sheets Emerald Green (4P) */
.matrix-cell-exact {
  background: #57bb8a !important;
  color: #052e16 !important;
  font-weight: bold;
  border: 1px solid #2e7d32 !important;
}

/* Tendenz richtig: Fresh Mint Green (1P) */
.matrix-cell-tendency {
  background: #8fd2b1 !important;
  color: #064e3b !important;
  font-weight: bold;
  border: 1px solid #38a169 !important;
}

/* 0 Punkte: Structured Slate Neutral */
.matrix-cell-zero {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #94a3b8 !important;
  font-weight: 500;
}

/* Noch offen: Neutral White */
.matrix-cell-open {
  background: #ffffff !important;
  color: #64748b !important;
  border: 1px dashed #cbd5e1 !important;
}

/* Gesamtpunkte Spalte (PKT): Ice Navy Blue */
.matrix-points-cell {
  background: #bfdbfe !important;
  font-weight: bold;
  font-size: 12px;
  color: #1e3a8a !important;
  border-left: 2px solid #2563eb !important;
  border-right: 2px solid #2563eb !important;
}

/* Legend Chips */
.matrix-legend-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: bold;
}

.matrix-legend-exact {
  background: #57bb8a;
  color: #052e16;
  border: 1px solid #2e7d32;
}

.matrix-legend-tendency {
  background: #8fd2b1;
  color: #064e3b;
  border: 1px solid #38a169;
}

.matrix-legend-zero {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #94a3b8;
}

.matrix-legend-open {
  background: #ffffff;
  color: #64748b;
  border: 1px dashed #94a3b8;
}

/* --------------------------------------------------------------------------
   Matchup-Grouped Cards View (Sorted by Encounter)
   -------------------------------------------------------------------------- */
.matchup-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.matchup-card {
  background: #fbfbfb;
  border: 2px solid #003366;
  box-shadow: 3px 3px 0px #5a738e;
}

.matchup-card-header {
  background: #003366;
  color: #ffffff;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
}

.matchup-card-score {
  background: #fde047;
  color: #000000;
  padding: 2px 8px;
  font-weight: bold;
  border: 1px solid #ca8a04;
  border-radius: 2px;
}

.matchup-tips-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}

.matchup-tip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
}

.matchup-tip-row.tip-exact {
  background: #57bb8a !important;
  border-color: #2e7d32 !important;
  color: #052e16 !important;
  font-weight: bold;
}

.matchup-tip-row.tip-tendency {
  background: #8fd2b1 !important;
  border-color: #38a169 !important;
  color: #064e3b !important;
  font-weight: bold;
}

/* View Mode Buttons */
.view-mode-btn.active {
  background: #003366 !important;
  color: #ffffff !important;
  border-style: inset !important;
}

/* DEL Live Indicator Pulse */
@keyframes livePulseDot {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.live-pulse-dot {
  animation: livePulseDot 2s infinite ease-in-out;
}