/* ============================================================
   PNCL — Retro Sportsbook Design System
   Aesthetic: early-2000s retro sportsbook style
   ============================================================ */

:root {
  /* ---- Core palette: battleship grey chrome ---- */
  --c-chrome-50:  #F5F3EE;   /* off-white table alt row */
  --c-chrome-100: #EDEAE0;   /* page bg warm grey */
  --c-chrome-200: #DCDAD0;   /* panel bg */
  --c-chrome-300: #C8C5B8;   /* beveled button face */
  --c-chrome-400: #9C9988;   /* shadow edge */
  --c-chrome-500: #6B6956;   /* deep chrome */
  --c-chrome-900: #2B2A22;   /* near-black text */

  /* ---- Navy (bookmaker heritage) ---- */
  --c-navy-900: #001A33;
  --c-navy-800: #002A52;
  --c-navy-700: #003366;     /* primary nav bar */
  --c-navy-600: #0B4B85;     /* hover */
  --c-navy-500: #2A6FA8;

  /* ---- Retro sportsbook accents (tinted) ---- */
  --c-pnn-nav:     #0A2E5A;     /* dark navy nav */
  --c-pnn-nav-lt:  #163C6D;     /* nav hover */
  --c-pnn-sub:     #EFEDE4;     /* subnav background (beige, not white) */
  --c-pnn-sub-br:  #C8C5B8;     /* subnav border */
  --c-pnn-deposit: #2F8C3C;     /* green deposit button */
  --c-pnn-deposit-hi:#44A855;
  --c-pnn-deposit-lo:#236528;
  --c-pnn-btnblue: #2862A8;     /* blue action buttons (My Leagues/Parlays) */
  --c-pnn-btnblue-lo:#1A4B85;
  --c-pnn-tab-sel: #F7E9C4;     /* selected tab background (ivory) */
  --c-pnn-row-alt: #EEF3F8;     /* very light blue zebra */
  --c-pnn-row-live:#F3FBEC;     /* live-match greenish tint */
  --c-pnn-delay-bg:#FFF3CC;     /* guest-delay yellow strip */
  --c-pnn-delay-br:#E0B800;

  /* ---- Classic hyperlink blues ---- */
  --c-link:     #0033AA;
  --c-link-hov: #0055DD;
  --c-visited:  #551A8B;

  /* ---- Odds / state colors ---- */
  --c-up:       #006622;     /* odds drift up / win */
  --c-down:     #990000;     /* odds drift down / loss */
  --c-live:     #CC0000;     /* LIVE dot red */
  --c-highlight:#FFF7A8;     /* yellow highlight bar */
  --c-highlight-border: #D4B800;
  --c-accent:   #D97706;     /* burnt orange / promo */

  /* ---- Table chrome ---- */
  --c-table-border:  #6B6956;
  --c-table-head-a:  #5B7088;   /* gradient top */
  --c-table-head-b:  #35516F;   /* gradient bottom */
  --c-table-head-txt:#FFFFFF;
  --c-table-zebra:   #E8E4D8;

  /* ---- Typography (NO Google Fonts — era-correct stacks) ---- */
  --ff-body:  Verdana, Geneva, "DejaVu Sans", sans-serif;
  --ff-chrome:Tahoma, "Lucida Grande", Verdana, sans-serif;
  --ff-head:  "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --ff-mono:  "Courier New", Courier, "Lucida Console", monospace;
  --ff-serif: "Times New Roman", Times, serif;

  /* ---- Font sizes — tight era scale ---- */
  --fs-xxs: 9px;
  --fs-xs:  10px;
  --fs-sm:  11px;   /* body default */
  --fs-md:  12px;
  --fs-lg:  14px;
  --fs-xl:  16px;
  --fs-2xl: 20px;
  --fs-3xl: 26px;

  --lh-tight: 1.15;
  --lh-body:  1.35;

  /* ---- Spacing — 2px grid, era-appropriate cramped ---- */
  --sp-0: 0;
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-8: 24px;

  /* ---- Bevels (the signature retro effect) ---- */
  --bevel-out: inset  1px  1px 0 #FFFFFF,
               inset -1px -1px 0 #6B6956;
  --bevel-out-hard: 1px 1px 0 #FFFFFF inset,
                    -1px -1px 0 #6B6956 inset,
                    2px 2px 0 #9C9988 inset,
                    -2px -2px 0 #EEE8D8 inset;
  --bevel-in:  inset  1px  1px 0 #6B6956,
               inset -1px -1px 0 #FFFFFF;

  /* ---- Max page width — era-correct 984px ---- */
  --page-w: 984px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-chrome-100);
  color: var(--c-chrome-900);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  /* era-correct: background tile pattern */
  background-image:
    linear-gradient(var(--c-chrome-100), var(--c-chrome-100)),
    repeating-linear-gradient(
      0deg,
      rgba(107,105,86,0.04) 0 1px,
      transparent 1px 3px
    );
}

a {
  color: var(--c-link);
  text-decoration: underline;
}
a:hover { color: var(--c-link-hov); text-decoration: underline; }
a:visited { color: var(--c-visited); }
a.no-visited:visited { color: var(--c-link); }

h1, h2, h3, h4 {
  font-family: var(--ff-head);
  font-weight: 900;
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--c-navy-900);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

hr {
  border: 0;
  border-top: 1px solid var(--c-chrome-400);
  border-bottom: 1px solid #FFFFFF;
  margin: var(--sp-5) 0;
}

/* ============================================================
   Layout shell
   ============================================================ */
.page {
  max-width: var(--page-w);
  margin: 0 auto;
  background: var(--c-chrome-100);
  border-left: 1px solid var(--c-chrome-400);
  border-right: 1px solid var(--c-chrome-400);
}

.container {
  padding: var(--sp-5);
}

/* ============================================================
   Chrome bars (top gradient bars with white text — pure 2003)
   ============================================================ */
.chromebar {
  background: linear-gradient(
    to bottom,
    var(--c-table-head-a) 0%,
    var(--c-table-head-b) 100%
  );
  color: #FFFFFF;
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  font-weight: bold;
  padding: 3px 8px;
  border-top: 1px solid #7B90A8;
  border-bottom: 1px solid #1F3B58;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  letter-spacing: 0.02em;
}
.chromebar--navy {
  background: linear-gradient(
    to bottom,
    #0B4B85 0%,
    #003366 100%
  );
  border-top-color: #2F6FAB;
  border-bottom-color: #001F40;
}
.chromebar--gold {
  background: linear-gradient(to bottom, #FFD95A 0%, #CC9900 100%);
  color: var(--c-chrome-900);
  border-top-color: #FFE89A;
  border-bottom-color: #8A6A00;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.chromebar .tab {
  display: inline-block;
  padding: 0 10px;
  color: #FFFFFF;
  text-decoration: none;
}
.chromebar .tab:hover { background: rgba(255,255,255,0.15); }
.chromebar .tab.active { background: var(--c-chrome-100); color: var(--c-navy-900); text-shadow: none; }

/* ============================================================
   Buttons — beveled 2000s chrome
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  font-weight: bold;
  color: var(--c-chrome-900);
  background: linear-gradient(to bottom, #F5F3EC 0%, #D4D0C4 50%, #C0BCB0 51%, #E0DCD0 100%);
  border: 1px solid var(--c-chrome-500);
  padding: 3px 10px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--bevel-out);
  line-height: 1.3;
}
.btn:hover { background: linear-gradient(to bottom, #FFFEF4 0%, #E0DCCC 50%, #C8C4B8 51%, #EEEAE0 100%); }
.btn:active { box-shadow: var(--bevel-in); padding: 4px 9px 2px 11px; }

.btn--primary {
  background: linear-gradient(to bottom, #F5B840 0%, #E0992A 50%, #C47E13 51%, #E0992A 100%);
  border-color: #7A4E00;
  color: #1F1200;
}
.btn--primary:hover { background: linear-gradient(to bottom, #FFCC55 0%, #F0A83A 50%, #D48E23 51%, #F0A83A 100%); }

.btn--go {
  background: linear-gradient(to bottom, #6ACB3F 0%, #3E9B1B 50%, #2C7F0D 51%, #4FAA28 100%);
  border-color: #1F5508;
  color: #FFFFFF;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.btn--go:hover { filter: brightness(1.08); }

.btn--danger {
  background: linear-gradient(to bottom, #E25555 0%, #B02020 50%, #8A0000 51%, #B82828 100%);
  border-color: #5A0000;
  color: #FFFFFF;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

.btn--xs { font-size: var(--fs-xs); padding: 1px 6px; }
.btn--block { display: block; width: 100%; text-align: center; }

/* ============================================================
   Panels / boxes
   ============================================================ */
.panel {
  background: var(--c-chrome-50);
  border: 1px solid var(--c-chrome-500);
  box-shadow: var(--bevel-out);
  margin-bottom: var(--sp-5);
}
.panel__head {
  background: linear-gradient(to bottom, var(--c-table-head-a), var(--c-table-head-b));
  color: #FFFFFF;
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-sm);
  padding: 3px 8px;
  border-bottom: 1px solid var(--c-navy-900);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.02em;
}
.panel__head--gold {
  background: linear-gradient(to bottom, #FFD95A 0%, #CC9900 100%);
  color: var(--c-chrome-900);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  border-bottom-color: #8A6A00;
}
.panel__head--red {
  background: linear-gradient(to bottom, #D03030 0%, #900000 100%);
  border-bottom-color: #5A0000;
}
.panel__body { padding: var(--sp-5); }
.panel__body--flush { padding: 0; }

/* Inset inner well (for bet-slip cells, login form background) */
.well {
  background: #FFFFFF;
  border: 1px solid var(--c-chrome-400);
  box-shadow: var(--bevel-in);
  padding: var(--sp-4);
}

/* ============================================================
   Tables — the heart of the retro sportsbook
   ============================================================ */
table.odds-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: #FFFFFF;
}
table.odds-tbl th {
  background: linear-gradient(to bottom, var(--c-table-head-a), var(--c-table-head-b));
  color: #FFFFFF;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  font-family: var(--ff-chrome);
  font-weight: bold;
  text-align: left;
  padding: 3px 6px;
  border: 1px solid var(--c-navy-900);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
table.odds-tbl td {
  padding: 3px 6px;
  border: 1px solid var(--c-chrome-300);
  vertical-align: middle;
}
table.odds-tbl tbody tr:nth-child(even) td { background: var(--c-chrome-50); }
table.odds-tbl tbody tr:hover td { background: var(--c-highlight); }

table.odds-tbl td.num,
table.odds-tbl th.num {
  font-family: var(--ff-mono);
  text-align: right;
  white-space: nowrap;
}

/* Odds cell — clickable */
.odds {
  display: inline-block;
  font-family: var(--ff-mono);
  font-weight: bold;
  font-size: var(--fs-md);
  color: var(--c-navy-800);
  background: linear-gradient(to bottom, #FFFFFF 0%, #E4E0D4 100%);
  border: 1px solid var(--c-chrome-500);
  box-shadow: var(--bevel-out);
  padding: 2px 8px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}
.odds:hover { background: var(--c-highlight); color: var(--c-chrome-900); }
.odds.up    { color: var(--c-up); }
.odds.down  { color: var(--c-down); }
.odds.sel   {
  background: linear-gradient(to bottom, #FFE680 0%, #D4A800 100%);
  border-color: #7A5A00;
  color: #2A1F00;
  box-shadow: var(--bevel-in);
}
.odds .lbl {
  display: block;
  font-family: var(--ff-chrome);
  font-weight: normal;
  font-size: var(--fs-xxs);
  color: var(--c-chrome-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   Badges / tags
   ============================================================ */
.tag {
  display: inline-block;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xxs);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  background: var(--c-chrome-300);
  border: 1px solid var(--c-chrome-500);
  color: var(--c-chrome-900);
  vertical-align: middle;
  line-height: 1.4;
}
.tag--live   { background: var(--c-live); color: #FFFFFF; border-color: #5A0000; }
.tag--new    { background: #FFFF33; color: #7A5A00; border-color: #7A5A00; animation: blinkNew 1.2s steps(2, end) infinite; }
.tag--hot    { background: var(--c-accent); color: #FFFFFF; border-color: #7A3E00; }
.tag--hi     { background: var(--c-highlight); color: var(--c-chrome-900); border-color: var(--c-highlight-border); }

@keyframes blinkNew {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.4; }
}

/* LIVE pulse dot */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-live);
  box-shadow: 0 0 0 1px #5A0000, 0 0 4px rgba(204,0,0,0.6);
  vertical-align: middle;
  margin-right: 4px;
  animation: livepulse 1s ease-in-out infinite;
}
@keyframes livepulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ============================================================
   Forms — beveled inset inputs
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  padding: 3px 5px;
  border: 1px solid var(--c-chrome-500);
  background: #FFFFFF;
  box-shadow: var(--bevel-in);
  color: var(--c-chrome-900);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid #FFCC33;
  outline-offset: -2px;
}
label {
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  font-weight: bold;
  color: var(--c-chrome-900);
}

/* ============================================================
   Misc
   ============================================================ */
.num { font-family: var(--ff-mono); }
.small { font-size: var(--fs-xs); }
.tiny { font-size: var(--fs-xxs); }
.mono { font-family: var(--ff-mono); }
.tc { text-align: center; }
.tr { text-align: right; }
.muted { color: var(--c-chrome-500); }
.accent-bar { height: 2px; background: var(--c-navy-700); margin: var(--sp-2) 0; }

/* dotted underline (classic info tooltip link) */
.info {
  border-bottom: 1px dotted var(--c-chrome-500);
  cursor: help;
}

/* blink (for marquee "last updated") */
.blink { animation: blink 1s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* marquee ticker */
.ticker {
  overflow: hidden;
  white-space: nowrap;
  background: #000000;
  color: #FFEE66;
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  padding: 3px 0;
}
.ticker__track {
  display: inline-block;
  padding-left: 100%;
  animation: tickerscroll 55s linear infinite;
}
.ticker__track span { padding: 0 18px; }
.ticker__track .up { color: #5AEE5A; }
.ticker__track .down { color: #FF6868; }
.ticker__track .sep { color: #555; }
@keyframes tickerscroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ASCII divider */
.ascii-div {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--c-chrome-500);
  white-space: pre;
  text-align: center;
  line-height: 1;
  margin: var(--sp-5) 0;
}

/* table of crypto accents for wallet */
.chip-btc { color: #B8860B; font-family: var(--ff-mono); font-weight: bold; }
.chip-eth { color: #3C3C3C; font-family: var(--ff-mono); font-weight: bold; }
.chip-usdt{ color: #006622; font-family: var(--ff-mono); font-weight: bold; }

/* grid utilities */
.row { display: flex; gap: var(--sp-5); align-items: stretch; }
.row--tight { gap: var(--sp-2); }
.col { flex: 1 1 0; min-width: 0; }
.col--sidebar-l { flex: 0 0 168px; }
.col--sidebar-r { flex: 0 0 256px; }
.col--sidebar-bs { flex: 0 0 236px; }

/* CRT scanline overlay — very subtle (optional) */
.crt {
  position: relative;
}
.crt::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.02) 0 1px,
    transparent 1px 2px
  );
  pointer-events: none;
}

/* ============================================================
   Retro sportsbook layout v2
   ============================================================ */

/* full-width site container */
.site {
  min-height: 100vh;
  background: var(--c-chrome-100);
}

/* ---- Top bar (retro-style, minimal): logo + utility right ---- */
.pnn-top {
  background: linear-gradient(to bottom, #F5F3EE 0%, #E8E4D8 100%);
  border-bottom: 1px solid var(--c-chrome-400);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
}
.pnn-top__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pnn-balance {
  background: #FFFFFF;
  border: 1px solid var(--c-chrome-400);
  box-shadow: var(--bevel-in);
  padding: 3px 10px;
  font-family: var(--ff-mono);
  color: var(--c-navy-900);
  font-weight: bold;
}
.pnn-balance .cur {
  font-size: var(--fs-xs);
  color: var(--c-chrome-500);
  margin-right: 4px;
  font-family: var(--ff-chrome);
  font-weight: normal;
}
.pnn-deposit {
  background: linear-gradient(to bottom, var(--c-pnn-deposit-hi) 0%, var(--c-pnn-deposit) 50%, var(--c-pnn-deposit-lo) 100%);
  color: #FFFFFF;
  border: 1px solid #163F18;
  padding: 4px 18px;
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-md);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
  box-shadow: var(--bevel-out);
  cursor: pointer;
  text-decoration: none;
}
.pnn-deposit:hover { filter: brightness(1.1); }
.pnn-deposit:visited { color: #FFFFFF; }
.pnn-user {
  color: var(--c-navy-900);
  font-weight: bold;
  cursor: pointer;
}
.pnn-user::after {
  content: ' ▾';
  font-size: var(--fs-xs);
  color: var(--c-chrome-500);
  font-weight: normal;
}
.pnn-icn {
  color: var(--c-chrome-500);
  cursor: pointer;
  text-decoration: none;
  padding: 2px 4px;
}
.pnn-icn:hover { color: var(--c-navy-700); }

/* ---- Main nav: SPORTS / ESPORTS / LIVE CASINO / CASINO / ... ---- */
.pnn-nav {
  background: linear-gradient(to bottom, var(--c-pnn-nav-lt) 0%, var(--c-pnn-nav) 100%);
  border-top: 1px solid #3A5F90;
  border-bottom: 2px solid #FFCC33;
  padding: 0 8px;
  display: flex;
  align-items: stretch;
  font-family: var(--ff-chrome);
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
  color: #FFFFFF;
}
.pnn-nav a {
  color: #FFFFFF;
  text-decoration: none;
  padding: 10px 16px 8px;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-right: 1px solid rgba(0,0,0,0.25);
  border-left: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.pnn-nav a:first-child { border-left: none; }
.pnn-nav a:hover { background: rgba(255,255,255,0.08); }
.pnn-nav a.on {
  background: #FFFFFF;
  color: var(--c-pnn-nav);
  text-shadow: none;
  border-bottom: 2px solid #FFCC33;
  margin-bottom: -2px;
}
.pnn-nav__ico {
  width: 14px; height: 14px;
  display: inline-block;
  vertical-align: middle;
}

/* ---- Secondary strip: Settings / Results / Help ---- */
.pnn-sub {
  background: var(--c-pnn-sub);
  border-bottom: 1px solid var(--c-pnn-sub-br);
  padding: 3px 12px;
  display: flex;
  align-items: center;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
}
.pnn-sub__spacer { flex: 1; }
.pnn-sub a {
  color: var(--c-navy-900);
  text-decoration: none;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.pnn-sub a:hover { color: var(--c-pnn-nav); background: #FFFFFF; }
.pnn-sub .sep { color: var(--c-chrome-400); padding: 0 4px; }

/* ---- Guest delay strip ---- */
.pnn-delay {
  background: var(--c-pnn-delay-bg);
  border-bottom: 1px solid var(--c-pnn-delay-br);
  color: #5A4500;
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pnn-delay .ico {
  display: inline-block;
  width: 14px; height: 14px;
  background: #E0B800;
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
  line-height: 14px;
  font-size: 10px;
  border-radius: 2px;
  font-family: var(--ff-mono);
}
.pnn-delay a { color: #5A4500; }
.pnn-delay__view {
  margin-left: auto;
  color: var(--c-pnn-nav);
  font-weight: bold;
  text-decoration: underline;
  font-size: var(--fs-xs);
}
.pnn-delay__dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: #5A4500;
  margin-left: 12px;
}

/* ---- Slow ticker (replaces fast marquee when needed) ---- */
.ticker--slow .ticker__track { animation-duration: 140s; }

/* ---- Main content with sidebar layout ---- */
.pnn-main {
  display: flex;
  gap: 0;
  background: var(--c-chrome-100);
}
.pnn-side {
  width: 230px;
  flex: 0 0 230px;
  background: var(--c-chrome-100);
  border-right: 1px solid var(--c-chrome-400);
}
.pnn-body {
  flex: 1;
  min-width: 0;
  background: #FFFFFF;
  border-left: 1px solid var(--c-chrome-400);
}

/* ---- Sidebar: BetSlip/Pending tabs ---- */
.pnn-bs-tabs {
  display: flex;
  background: linear-gradient(to bottom, #D4D0C4 0%, #B8B4A8 100%);
  border-bottom: 1px solid var(--c-chrome-500);
}
.pnn-bs-tabs button {
  flex: 1;
  background: transparent;
  border: none;
  padding: 6px 4px;
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  cursor: pointer;
  color: var(--c-chrome-500);
  border-right: 1px solid var(--c-chrome-400);
  letter-spacing: 0.06em;
}
.pnn-bs-tabs button.on {
  background: var(--c-pnn-nav);
  color: #FFFFFF;
  box-shadow: inset 0 -3px 0 #FFCC33;
}
.pnn-bs-tabs button .badge {
  display: inline-block;
  background: var(--c-pnn-btnblue);
  color: #FFFFFF;
  font-family: var(--ff-mono);
  padding: 0 4px;
  margin-left: 4px;
  font-size: var(--fs-xxs);
  border-radius: 2px;
}

/* ---- Sidebar: top/my leagues toggle row ---- */
.pnn-row-btn-2 {
  display: flex;
  background: var(--c-chrome-200);
  border-bottom: 1px solid var(--c-chrome-400);
}
.pnn-row-btn-2 button {
  flex: 1;
  background: linear-gradient(to bottom, var(--c-pnn-btnblue) 0%, var(--c-pnn-btnblue-lo) 100%);
  color: #FFFFFF;
  border: none;
  border-right: 1px solid var(--c-chrome-400);
  padding: 5px 4px;
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.pnn-row-btn-2 button.ghost {
  background: linear-gradient(to bottom, #E8E4D8, #D4D0C4);
  color: var(--c-navy-900);
}

/* ---- "ALL EVENTS" accordion heading ---- */
.pnn-all-events {
  background: linear-gradient(to bottom, #F7F4EC 0%, #E8E4D8 100%);
  padding: 6px 10px;
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-navy-900);
  border-bottom: 1px solid var(--c-chrome-400);
  text-align: center;
}

/* ---- sub-tabs inside bet slip: SPORTS / PARLAYS ---- */
.pnn-subtabs {
  display: flex;
  background: #FFFFFF;
  border-bottom: 1px solid var(--c-chrome-400);
}
.pnn-subtabs button {
  flex: 1;
  background: transparent;
  border: none;
  padding: 5px 4px;
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  cursor: pointer;
  color: var(--c-chrome-500);
  letter-spacing: 0.06em;
  border-right: 1px solid var(--c-chrome-400);
}
.pnn-subtabs button.on {
  color: var(--c-navy-900);
  border-bottom: 2px solid var(--c-live);
  margin-bottom: -1px;
  background: var(--c-pnn-tab-sel);
}

/* ---- Sport-list rail (LIVE / SPORTS sections w/ icons) ---- */
.pnn-sport-hdr {
  background: linear-gradient(to bottom, var(--c-pnn-nav-lt), var(--c-pnn-nav));
  color: #FFFFFF;
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.pnn-sport-hdr--live {
  background: linear-gradient(to bottom, #9F0000, #6B0000);
  color: #FFCC33;
}
.pnn-sport-row {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  color: var(--c-navy-900);
  text-decoration: none;
  border-bottom: 1px dotted var(--c-chrome-300);
  background: #FFFFFF;
  cursor: pointer;
  gap: 8px;
}
.pnn-sport-row:hover { background: var(--c-highlight); }
.pnn-sport-row.on {
  background: var(--c-pnn-nav);
  color: #FFFFFF;
}
.pnn-sport-row.on .count { color: #FFCC33; }
.pnn-sport-row .count {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--c-chrome-500);
}

/* sport sub-menu (when expanded) */
.pnn-sport-sub {
  background: #FAF7EE;
  border-bottom: 1px dotted var(--c-chrome-300);
}
.pnn-sport-sub a {
  display: flex;
  justify-content: space-between;
  padding: 3px 10px 3px 30px;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  color: var(--c-navy-800);
  text-decoration: none;
  border-bottom: 1px dotted var(--c-chrome-300);
  background: transparent;
}
.pnn-sport-sub a.on {
  background: var(--c-live);
  color: #FFFFFF;
  font-weight: bold;
}
.pnn-sport-sub a .n {
  font-family: var(--ff-mono);
  font-size: var(--fs-xxs);
  color: var(--c-chrome-500);
}
.pnn-sport-sub a.on .n { color: #FFCC33; }

/* ---- BODY: search bar + leagues/parlays/all-times row ---- */
.pnn-searchbar {
  background: #FFFFFF;
  border-bottom: 1px solid var(--c-chrome-400);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pnn-searchbar input[type="text"] {
  flex: 1;
  padding: 4px 8px 4px 26px;
  font-size: var(--fs-sm);
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 6px center no-repeat;
}
.pnn-searchbar .pnn-btn-blue {
  background: linear-gradient(to bottom, var(--c-pnn-btnblue) 0%, var(--c-pnn-btnblue-lo) 100%);
  color: #FFFFFF;
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-xs);
  padding: 4px 10px;
  border: 1px solid #0B2E5A;
  box-shadow: var(--bevel-out);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.pnn-searchbar .pnn-btn-blue:hover { filter: brightness(1.1); }
.pnn-searchbar .pnn-drop {
  background: linear-gradient(to bottom, #F5F3EE, #D4D0C4);
  color: var(--c-navy-900);
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  padding: 4px 24px 4px 8px;
  border: 1px solid var(--c-chrome-500);
  box-shadow: var(--bevel-out);
  cursor: pointer;
  text-decoration: none;
  position: relative;
}
.pnn-searchbar .pnn-drop::after {
  content: '▾';
  position: absolute; right: 6px; top: 3px;
  color: var(--c-chrome-500);
}

/* ---- The main odds table "Soccer · LIVE MATCHES" ---- */
.pnn-league-hdr {
  background: linear-gradient(to bottom, #F7E9C4, #E5D5A0);
  border-bottom: 1px solid var(--c-chrome-400);
  padding: 4px 10px;
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-sm);
  color: var(--c-navy-900);
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #FFFFFF;
}
.pnn-league-hdr .live-tag {
  background: var(--c-live);
  color: #FFFFFF;
  font-size: var(--fs-xxs);
  padding: 1px 6px;
  letter-spacing: 0.08em;
  font-family: var(--ff-chrome);
}

/* odds table, 6-group version */
.pnn-odds {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-chrome);
  font-size: var(--fs-sm);
  background: #FFFFFF;
}
.pnn-odds thead th {
  background: linear-gradient(to bottom, #E8E4D8, #C8C5B8);
  border: 1px solid var(--c-chrome-400);
  border-top: 1px solid #FFFFFF;
  color: var(--c-chrome-500);
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 4px;
  text-align: center;
}
.pnn-odds thead th.grp-start {
  border-left: 2px solid var(--c-chrome-500);
}
.pnn-odds thead .grp-title {
  background: linear-gradient(to bottom, #D4D0C4, #9C9988);
  color: #FFFFFF;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
}
.pnn-odds td {
  border: 1px solid var(--c-chrome-300);
  padding: 4px 4px;
  vertical-align: middle;
  font-size: var(--fs-sm);
}
.pnn-odds tbody tr.live td { background: var(--c-pnn-row-live); }
.pnn-odds tbody tr:hover td { background: var(--c-highlight); }
.pnn-odds .cell-event { min-width: 140px; }
.pnn-odds .cell-event .lg {
  font-size: var(--fs-xxs);
  color: var(--c-chrome-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pnn-odds .cell-time {
  font-family: var(--ff-mono);
  font-size: var(--fs-xxs);
  color: var(--c-chrome-500);
  text-align: center;
  width: 42px;
}
.pnn-odds .cell-time .sc {
  color: var(--c-live);
  font-weight: bold;
  font-size: var(--fs-xs);
}

.pnn-odds .odd-cell {
  text-align: center;
  padding: 2px;
  cursor: pointer;
  font-family: var(--ff-mono);
  font-weight: bold;
  color: var(--c-navy-800);
}
.pnn-odds .odd-cell:hover {
  background: var(--c-highlight) !important;
}
.pnn-odds .odd-cell.grp-start { border-left: 2px solid var(--c-chrome-400); }
.pnn-odds .odd-cell .hdp {
  display: block;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xxs);
  color: var(--c-chrome-500);
  font-weight: normal;
}
.pnn-odds .odd-cell.sel {
  background: var(--c-pnn-tab-sel) !important;
  color: var(--c-up);
}
.pnn-odds .odd-cell.locked {
  background: #F5F3EE;
  color: var(--c-chrome-400);
  cursor: not-allowed;
}
.pnn-odds .odd-cell.locked::before {
  content: '🔒';
  font-size: 10px;
  display: block;
  color: var(--c-chrome-400);
  filter: grayscale(1);
}
.pnn-odds .cell-fav {
  width: 16px; text-align: center; padding: 2px 0;
}
.pnn-odds .cell-plus {
  width: 28px; text-align: center;
  background: #F5F3EE;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--c-pnn-nav);
  cursor: pointer;
  font-weight: bold;
}
.pnn-odds .cell-plus:hover { background: var(--c-highlight); }

/* favorites star button */
.fav {
  display: inline-block;
  width: 14px; height: 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  color: var(--c-chrome-400);
}
.fav.on { color: #E0A800; }
.fav:hover { color: #E0A800; }

/* LIVE tag inline */
.live-badge {
  display: inline-block;
  background: var(--c-live);
  color: #FFFFFF;
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-xxs);
  padding: 1px 5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---- Accepted bet block (in bet slip) ---- */
.pnn-accept {
  background: #FFFFFF;
  border: 1px solid var(--c-up);
  padding: 6px 8px;
  margin: 6px;
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  position: relative;
}
.pnn-accept__hdr {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  color: var(--c-up);
  margin-bottom: 4px;
}
.pnn-accept__close {
  background: none;
  border: 1px solid var(--c-chrome-400);
  width: 14px; height: 14px;
  line-height: 10px;
  font-size: 10px;
  cursor: pointer;
  padding: 0;
  color: var(--c-chrome-500);
}
.pnn-accept__row {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
}
.pnn-accept__row .v { font-weight: bold; font-family: var(--ff-mono); }
.pnn-accept__reuse {
  background: none;
  border: none;
  color: var(--c-pnn-btnblue);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: var(--fs-xs);
  font-family: var(--ff-chrome);
}

/* Pending leg block */
.pnn-pleg {
  background: #FFFFFF;
  border: 1px solid var(--c-chrome-400);
  padding: 6px 8px;
  margin: 6px;
  font-size: var(--fs-xs);
  font-family: var(--ff-chrome);
}
.pnn-pleg__meta {
  font-family: var(--ff-mono);
  font-size: var(--fs-xxs);
  color: var(--c-chrome-500);
  margin-top: 3px;
}

/* ---- View pending bets full-width button ---- */
.pnn-viewpending {
  background: linear-gradient(to bottom, var(--c-pnn-nav-lt), var(--c-pnn-nav));
  color: #FFFFFF;
  text-align: center;
  padding: 8px;
  font-family: var(--ff-chrome);
  font-weight: bold;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
  display: block;
  border-top: 1px solid #FFCC33;
}
.pnn-viewpending:hover { filter: brightness(1.1); }

/* ---- Marquee ticker (slow, single-line, retro-style) ---- */
.pnn-mq {
  display: flex;
  align-items: stretch;
  background: #000;
  color: #FFCC33;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  font-family: var(--ff-chrome);
  font-size: 11px;
  height: 22px;
  overflow: hidden;
}
.pnn-mq__label {
  flex: 0 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, #B20000, #700000);
  color: #FFCC33;
  font-weight: bold;
  letter-spacing: 0.08em;
  border-right: 1px solid #333;
  white-space: nowrap;
}
.pnn-mq__viewport {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
}
.pnn-mq__track {
  display: inline-flex;
  white-space: nowrap;
  animation: pnn-mq-scroll 240s linear infinite;
  animation-delay: -30s;
  will-change: transform;
}
@keyframes pnn-mq-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.pnn-mq__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  color: #E8E8E8;
  height: 22px;
  line-height: 22px;
}
.pnn-mq__flag { font-size: 12px; }
.pnn-mq__teams { color: #FFF; }
.pnn-mq__teams .pnn-mq__vs { color: #888; margin: 0 4px; }
.pnn-mq__odds { display: inline-flex; gap: 4px; align-items: center; }
.pnn-mq__odds .lbl { color: #888; font-size: 10px; }
.pnn-mq__odds .up { color: #7CFF7C; }
.pnn-mq__odds .dn { color: #FF7C7C; }
.pnn-mq__sep { color: #333; padding: 0 4px; }

/* ---- Footer minimal (retro-style) ---- */
.pnn-foot {
  background: var(--c-chrome-900);
  color: var(--c-chrome-400);
  font-family: var(--ff-chrome);
  font-size: var(--fs-xs);
  padding: 10px 16px;
  text-align: center;
  border-top: 2px solid #FFCC33;
}
.pnn-foot a {
  color: var(--c-chrome-400);
  text-decoration: none;
  padding: 0 6px;
}
.pnn-foot a:hover { color: #FFCC33; }
.pnn-foot__links { display: flex; gap: 0; flex-wrap: wrap; }
.pnn-foot__links a { border-right: 1px solid #444; }
.pnn-foot__links a:last-child { border-right: 0; }
.pnn-foot__copy {
  color: #777;
  margin-top: 6px;
  font-size: var(--fs-xxs);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pnn-foot__badges { display: inline-flex; gap: 6px; }
.pnn-foot__badges span {
  border: 1px solid #555;
  padding: 1px 6px;
  color: #AAA;
  font-size: 9px;
  letter-spacing: 0.05em;
}