/* =========================================
   ROOT VARIABLES
========================================= */
:root{
  --accent:#c0392b;
  --bg:#922b21;
  --card-bg:#efefef;
  --max-width:1200px;
  --nav-w:280px;
  --dart-width:320px;
  --dart-height:96px;
  --dart-width-sm:160px;
  --dart-height-sm:48px;
  --header-gap:14px;
  --scroller-edge-width:56px;
  
  --z-fade:20;
  --z-track:10;
  --z-item:30;
  --z-overlay:99999;

  --card-border:1px solid rgba(0,0,0,0.14);
  --card-shadow:0 2px 8px rgba(0,0,0,0.12);
    
}

/* =========================================
   GLOBAL
========================================= */
*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:#111;

  background-color:#000;

  background:
    linear-gradient(
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.25)
    ),
    url('/images/star.png');

  background-repeat:repeat;
  background-size:1400px auto;
  background-position:center top;
}

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

/* =========================================
   PAGE WRAPPER + CARD
========================================= */
.page-wrap{
  display:flex;
  justify-content:center;
  padding:18px;
}

.card{
  width:100%;
  max-width:var(--max-width);
  background:var(--card-bg);
  border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,0.12);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* =========================================
   HEADER
========================================= */
.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  padding:6px 4px;
}

.site-title{
  font-size:20px;
  font-weight:800;
  margin:0;
}

.header-right{
  display:flex;
  align-items:center;
  gap:var(--header-gap);
  min-width:220px;
}

/* =========================================
   SIDE NAV
========================================= */
.side-nav{
  transform:translateX(-120%) !important;
  position:fixed;
  left:0;
  top:0;
  bottom:0;

  width:280px;
  max-width:82vw;

  z-index:1600;
  background:#0f0f0f;
  color:#fff;

  padding:20px 16px;
  box-sizing:border-box;

  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;

  transition:transform .28s ease;
  box-shadow:6px 0 18px rgba(0,0,0,0.12);
}

.side-nav.open{
  transform:translateX(0) !important;
}

.side-nav .close-x{
  position:absolute;
  right:10px;
  top:8px;
  background:transparent;
  border:none;
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

#sideNav .nav-header{
  display:flex;
  align-items:center;
  gap:12px;
}

#sideNav .nav-header img{
  flex-shrink:0;
}

#sideNav .nav-header > div{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

/* NAV LIST */
.nav-list{
  list-style:none;
  padding:0;
  margin:18px 0 0;
}

.nav-list li{
  margin:8px 0;
}

.nav-list a.nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:6px;
  font-weight:600;
  letter-spacing:.2px;
  white-space:nowrap;
}

.nav-list a.nav-link:hover{
  background:rgba(192,57,43,0.08);
  color:var(--accent);
}

.nav-list a.nav-link img{
  width:28px;
  height:28px;
  object-fit:contain;
}

/* MOBILE PORTRAIT NAV */
@media (max-width:650px){
  .side-nav{
    width:245px !important;
    max-width:68vw !important;
    padding:20px 14px 90px !important;
  }
}

/* MOBILE LANDSCAPE NAV */
@media (max-width:950px) and (orientation:landscape){
  .side-nav{
    width:300px !important;
    max-width:45vw !important;
    padding:18px 14px 80px !important;
  }
}

/* =========================================
   MENU DART
========================================= */
.menu-dart-btn{
  background:transparent;
  border:none;
  padding:0 10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  border-radius:8px;
  width:var(--dart-width);
  height:var(--dart-height);
}
.menu-dart-btn img,#primaryMenuImg{
  width:320px;
  height:96px;
  display:block;
  object-fit:contain;
}

/* =========================================
   HERO
========================================= */
.hero{
  margin-top:0 !important;
  border-radius:8px;
  overflow:hidden;
  background:#000;
}
.hero-box{
  max-height:520px;
  overflow:hidden;
}
.hero-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================
   TOP LINKS ROW (BLACK BAR)
========================================= */
.top-links-row{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:#000;
  border-radius:0 !important;
  margin:0 !important;
}
.top-links-row img{
  height:48px;
  width:auto;
  object-fit:contain;
}

/* GOLD DIVIDER */
.black-to-players-divider{
  width:100%;
  height:2px;
  background:#d4af37;
  margin:0;
}

/* =========================================
   PLAYERS STRIP
========================================= */
.players-strip{
  margin:0;
  padding:0;
  border-radius:0 0 8px 8px;
  overflow:hidden;
  background:#000;
}
.players-strip img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* =========================================
   GOLD SPONSOR ROW
========================================= */
.gold-sponsor-row{
  width:100%;
  margin:0;
  padding:14px 0;
  background:linear-gradient(180deg,#d4af37,#b8860b);
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:0 0 8px 8px;
}
.gold-sponsor-inner{
  display:flex;
  align-items:center;
  gap:16px;
}
.gold-sponsor-row .sponsor-text{
  font-size:18px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#111;
}
.gold-sponsor-row .sponsor-logo{
  height:60px;
  width:auto;
  object-fit:contain;
}

/* =========================================
   HOME CARD
========================================= */
.home-card{
  background:#f2f2f2;
  border-radius:8px;
  padding:20px;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

/* =========================================
   SCROLLER (RESTORED)
========================================= */
.silver-wrap{
  margin-top:12px;
  background:linear-gradient(90deg,#922b21 0 6%,transparent 6%), #e0e0e0;
  padding:12px;
  border-radius:8px;
  overflow:hidden;
  position:relative;
}

.silver-wrap::before,
.silver-wrap::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:var(--scroller-edge-width);
  pointer-events:none;
  z-index:var(--z-fade);
}

.silver-wrap::before{
  left:0;

  background:linear-gradient(
    to right,
    rgba(120,0,0,.72) 0%,
    rgba(120,0,0,.22) 50%,
    rgba(120,0,0,0) 100%
  );

  opacity:.45;
  filter:blur(1px);
}

.silver-wrap::after{
  right:0;

  background:linear-gradient(
    to left,
    rgba(120,0,0,.72) 0%,
    rgba(120,0,0,.22) 50%,
    rgba(120,0,0,0) 100%
  );

  opacity:.45;
  filter:blur(1px);
}

.silver-track{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding-left:calc(var(--scroller-edge-width) + 12px);
  padding-right:calc(var(--scroller-edge-width) + 12px);
  transform:translate3d(0,0,0);
  position:relative;
  z-index:var(--z-track);
}

.silver-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:#f7f7f7;
  padding:8px;
  border-radius:6px;
  min-width:240px;
  flex:0 0 auto;
  border:1px solid #e2e2e2;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
  position:relative;
  z-index:var(--z-item);
  min-height:96px;

  font-weight:400;
}

.silver-item img{
  flex:0 0 160px;
  width:160px;
  height:120px;
  object-fit:cover;
  object-position:top;
  border-radius:6px;
  background:#fff;
}

/* CAPTION */
.caption-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  position:relative;
  z-index:10;
  padding-right:64px;
  margin-left:14px;
  flex:1 1 auto;
}

.caption-header{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
  padding:10px;
  border-radius:6px;
  min-height:44px;
  color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0.85),rgba(0,0,0,0.55));
}

.caption-header::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.20),rgba(0,0,0,0.40));
  pointer-events:none;
  z-index:1;
}

.caption-header > *{
  position:relative;
  z-index:2;
}

.card-title{
  font-size:16px;
  font-weight:700;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.caption-text{
  font-size:14px;
  font-weight:400;
  line-height:1.4;
  color:#333;
  max-height:60px;
  overflow:hidden;
  white-space:pre-wrap;
  transition:max-height .25s ease;
}

.caption-text.expanded{
  max-height:9999px;
}

.show-more-btn{
  background:#ffcc00;
  color:#111;
  border:none;
  padding:6px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
}

/* =========================================
   MOBILE FIXES
========================================= */
@media(max-width:600px){
  .hero-box{ max-height:260px; }
  .top-links-row{ gap:8px; padding:8px; }
  .caption-wrap{ padding-right:12px; }
  .caption-text{ max-height:calc(1.25em * 3); }

  /* keep red bars on desktop only */
  .silver-wrap{
    background:#f0f0f0;
  }
  .silver-wrap::before,
  .silver-wrap::after{
    display:none;
  }

  /* ⭐ FIX: show ALL scroller items in portrait mode */
  .silver-track {
    min-width: max-content;
  }
}


/* =========================================
   EDGE TABS
========================================= */
.edge-tabs{
  position:fixed;
  right:0;
  top:180%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:1200;
}
.edge-tab{
  background:#111;
  color:#fff;
  padding:8px 14px;
  border-radius:20px 0 0 20px;
  font-size:13px;
  font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
  border:1px solid rgba(255,255,255,0.08);
  min-width:160px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.edge-tab:hover{
  background:var(--accent);
  color:#fff;
}

/* =========================================
   SPONSOR BAR
========================================= */
.sponsor-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#111;
  color:#fff;
  padding:8px 16px;
  gap:12px;
}
.sponsor-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#fff;
  color:#111;
  padding:8px 12px;
  border-radius:6px;
  font-weight:700;
}

/* =========================================
   FOOTER
========================================= */
.card-footer{
  margin-top:12px;
  text-align:center;
  font-size:12px;
  color:#333;
}

/* FIX red bar shifting */
.silver-item {
  min-height: 120px !important;
}

.caption-header {
  min-height: 48px !important;
  padding: 10px 12px !important;
}
/* Remove leftover modal artifacts */
.caption-modal,
.caption-modal-backdrop,
.caption-fulltext,
.caption-fulltext * {
  display:none !important;
}
/* Restore red Show More button */
.show-more-btn {
  background:#ff3b3b !important;
  color:#fff !important;
  border:none !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  margin-left:8px !important;
}

/* Add spacing before the button */
.caption-text {
  padding-right: 10px !important;
}
/* Restore gold bar */
.gold-bar {
  background: linear-gradient(180deg, #d4af37, #b8860b) !important;
  padding: 10px 16px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 28px !important;
  align-items: center !important;
  border-radius: 8px 8px 0 0 !important;
}

.gold-bar a {
  font-size: 16px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.gold-bar img {
  width: 22px !important;
  height: 22px !important;
}
/* HARD-LOCK SCROLLER HEIGHT SO RED BAR STAYS PUT */
.silver-item {
  min-height: 140px !important;
}

.caption-wrap {
  padding-right: 80px !important; /* room for button, no reflow */
}

.caption-header {
  min-height: 52px !important;
  padding: 10px 12px !important;
}
/* FIX SHOW MORE BUTTON LOOK + SPACING */
.caption-text {
  display: block !important;
  padding-right: 14px !important;
}

.show-more-btn {
  background: #ff3b3b !important;
  color: #fff !important;
  border: none !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 0.85rem !important;
  margin-left: 8px !important;
  margin-top: 4px !important;
  display: inline-block !important;
}
/* =========================================
   GOLD "SHOW MORE / SHOW LESS" BUTTON FIX
========================================= */

/* Give the caption text breathing room */
.caption-text {
  display: block !important;
  padding-right: 24px !important;
  line-height: 1.35 !important;
}

/* Gold pill button style */
.show-more-btn,
.caption-text button {
  background: linear-gradient(180deg, #d4af37, #b8860b) !important;
  color: #111 !important;
  border: 1px solid #b8860b !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  display: inline-block !important;
  margin-left: 10px !important;
  margin-top: 8px !important;
  white-space: nowrap !important;
}

/* Ensure the button never touches the last letter */
.caption-wrap {
  padding-right: 80px !important;
}
/* ============================================================
   MAKE BOTH BUTTONS MATCH THE TOP GOLD PILL STYLE
============================================================ */
.show-more-btn {
  background: linear-gradient(180deg, #d4af37, #b8860b) !important;
  color: #111 !important;
  border: 1px solid #b8860b !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  margin-left: 10px !important;
  margin-top: 6px !important;
}

/* ============================================================
   CENTER THE TOP BUTTON IN THE BLACK ROW
============================================================ */
.top-links-row .show-more-btn {
  margin-top: 0 !important;          /* remove downward push */
  align-self: center !important;     /* center vertically */
  height: 32px !important;           /* consistent height */
  display: flex !important;
  align-items: center !important;
}


/* Give the text breathing room so the button isn't jammed */
.silver-item .caption-text {
  padding-right: 20px !important;
  display: block !important;
}
/* FIX GOLD NAV BAR ICON + TEXT ALIGNMENT */
.gold-bar a {
  display: flex !important;
  align-items: center !important;   /* centers icon + text vertically */
  gap: 8px !important;              /* clean spacing between icon and text */
}
/* FINAL FIX — PERFECT CENTERING OF GOLD PILL IN BLACK ROW */
.top-links-row {
  display: flex !important;
  align-items: center !important;   /* centers everything vertically */
  padding: 12px !important;         /* keep your original spacing */
}

.top-links-row .show-more-btn {
  display: flex !important;         /* NOT inline-flex */
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;          /* consistent pill height */
  line-height: 32px !important;     /* centers text inside pill */
  margin: 0 !important;             /* remove upward push */
}
/* HARD-LOCK THE GOLD PILL CENTERED IN THE BLACK ROW */
.caption-header {
  position: relative !important;
}

.caption-header .show-more-btn {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;          /* keep it on the right side */
  transform: translateY(-50%) !important;
  margin: 0 !important;            /* no extra push up/down */
}


/* ===== Consolidated card + login fixes ===== */

/* Outer wrappers full width safety */
.container,
.w3-content,
.w3-container,
.w3-row,
.w3-col,
.w3-main,
.w3-display-container,
.page-wrapper,
.main-wrapper,
.content-area {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Card and caption: prevent horizontal growth and reserve header space */
.silver-item { position: relative; box-sizing: border-box; }
.silver-item .card-header,
.silver-item .card-top { box-sizing: border-box; padding-right: 72px; } /* reserve space for inline control */

.silver-item,
.silver-item .caption-wrap,
.silver-item .caption,
.caption-text {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  position: relative !important;
}

/* Header inline Show less button (top-right of card) */
.silver-item .show-less-inline {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 120 !important;
  display: inline-block !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
  background: #ffd54f !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

/* Header control stable */
.silver-item .show-more-btn {
  display: inline-block;
  white-space: nowrap;
}

/* Ensure images inside caption scale down */
.caption-text img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* -------------------------
   Admin modal base styles
   (single consolidated override)
   ------------------------- */

/* Base wrapper: hidden until .show is added */
#adminModal,
.admin-modal,
.modal-login,
#loginModal {
  background: transparent !important;
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 120px !important;
  z-index: 300000 !important;
  max-height: calc(100vh - 180px) !important;
  overflow: visible !important;
  align-items: flex-start !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Visible only when .show is present */
#adminModal.show,
.admin-modal.show,
.modal-login.show,
#loginModal.show {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Backdrop (the gray dimmer) */
#adminModal .modal-backdrop,
.admin-modal .modal-backdrop,
#adminModal > .modal-backdrop,
.admin-modal > .modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.45) !important;
  z-index: 299990 !important;
  pointer-events: auto !important;
}

/* White card sits above backdrop and accepts clicks */
#adminModal .modal-card,
#adminModal > .modal-content,
#adminModal .modal-body,
.admin-modal .modal-card,
.admin-modal .modal-content {
  background: #fff !important;
  z-index: 300001 !important;
  pointer-events: auto !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
  border-radius: 6px !important;
  padding: 18px !important;
  width: 360px !important;
  max-width: calc(100vw - 32px) !important;
  box-sizing: border-box !important;
  margin-top: 8px !important;
}

/* Defensive: remove any visible background on wrapper even if inline styles are applied */
#adminModal[style*="background"],
.admin-modal[style*="background"],
.modal-login[style*="background"],
#loginModal[style*="background"] {
  background: transparent !important;
}

/* Mobile: full width with side padding */
@media (max-width: 480px) {
  #adminModal .modal-card,
  .admin-modal .modal-card,
  .modal-login .modal-card,
  #adminModal > .modal-content {
    width: auto !important;
    margin: 0 12px !important;
  }
}

/* -------------------------
   Final consolidated centering override
   (place at end — single authoritative block)
   ------------------------- */

/* Desktop: center modal wrapper and card */
@media (min-width: 481px) {
  #adminModal,
  .admin-modal,
  .modal-login,
  #loginModal {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important; /* wrapper non-interactive; children handle events */
  }

  #adminModal.show,
  .admin-modal.show,
  .modal-login.show,
  #loginModal.show {
    pointer-events: none !important;
  }

  /* Ensure backdrop accepts clicks and sits below card */
  #adminModal .modal-backdrop,
  .admin-modal .modal-backdrop,
  .modal-login .modal-backdrop,
  #loginModal .modal-backdrop {
    pointer-events: auto !important;
    z-index: 299990 !important;
  }

  /* Card sits above backdrop and accepts clicks */
  #adminModal .modal-card,
  #adminModal > .modal-content,
  .admin-modal .modal-card,
  .modal-login .modal-card,
  #loginModal .modal-card {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 300001 !important;
    pointer-events: auto !important;
    width: 520px !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 48px) !important;
    overflow: auto !important;
  }
}

/* Mobile: preserve top-pinned behavior */
@media (max-width: 480px) {
  #adminModal,
  .admin-modal,
  .modal-login,
  #loginModal {
    left: 8px !important;
    right: 8px !important;
    top: 12px !important;
    transform: none !important;
    align-items: flex-start !important;
    justify-content: center !important;
    pointer-events: none !important;
  }

  #adminModal .modal-card,
  .admin-modal .modal-card,
  .modal-login .modal-card,
  #loginModal .modal-card,
  #adminModal > .modal-content {
    width: auto !important;
    margin: 0 12px !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* Defensive: strip any inline background that some scripts may inject */
#adminModal[style*="background"],
.admin-modal[style*="background"],
.modal-login[style*="background"],
#loginModal[style*="background"] {
  background: transparent !important;
}

/* Ensure card is always above backdrop and clickable */
#adminModal .modal-card,
#adminModal > .modal-content,
.admin-modal .modal-card,
.modal-login .modal-card,
#loginModal .modal-card,
#adminModal .modal-body,
.admin-modal .modal-body {
  position: relative !important;
  z-index: 300002 !important;
  pointer-events: auto !important;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
}

/* End of stylesheet */

/* ===== Admin modal: gold card + slight downward shift (desktop only) ===== */
@media (min-width: 481px) {
  /* nudge the wrapper down from exact center so the card sits lower over the hero image */
  #adminModal,
  .admin-modal,
  .modal-login,
  #loginModal {
    /* move center down by 6vh (adjust value below if you want it higher/lower) */
    top: calc(50% + 6vh) !important;
    transform: translate(-50%, -50%) !important;
  }

  /* increase card width slightly for better presence (optional) */
  #adminModal .modal-card,
  .admin-modal .modal-card,
  .modal-login .modal-card,
  #loginModal .modal-card {
    width: 560px !important;
    max-width: calc(100vw - 48px) !important;
  }
}

/* Keep mobile behavior unchanged (top pinned) */
@media (max-width: 480px) {
  #adminModal,
  .admin-modal,
  .modal-login,
  #loginModal {
    top: 12px !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
  }
}

/* Gold admin card styling (applies on all viewports) */
#adminModal .modal-card,
.admin-modal .modal-card,
.modal-login .modal-card,
#loginModal .modal-card {
  background: linear-gradient(180deg, #d4af37, #b8860b) !important;
  color: #111 !important;
  border: 1px solid rgba(184,134,11,0.9) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.35) !important;
}

/* Ensure form fields and buttons remain readable on gold */
#adminModal .modal-card input,
#adminModal .modal-card textarea,
#adminModal .modal-card select,
.admin-modal .modal-card input,
.admin-modal .modal-card textarea,
.admin-modal .modal-card select {
  background: rgba(255,255,255,0.95) !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

/* Buttons inside the admin card: keep strong contrast */
#adminModal .modal-card .show-more-btn,
.admin-modal .modal-card .show-more-btn,
#adminModal .modal-card button,
.admin-modal .modal-card button {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
}

/* Admin card: full gold fill, no thin white border, stronger shadow, readable inputs */
@media (min-width: 481px) {
  /* nudge vertical position (adjust 6vh to taste) */
  #adminModal,
  .admin-modal,
  .modal-login,
  #loginModal {
    top: calc(50% + 6vh) !important;
    transform: translate(-50%, -50%) !important;
  }

  /* full gold card */
  #adminModal .modal-card,
  .admin-modal .modal-card,
  .modal-login .modal-card,
  #loginModal .modal-card {
    background: linear-gradient(180deg, #d4af37 0%, #b8860b 100%) !important;
    border: none !important;                    /* remove thin border */
    box-shadow: 0 18px 48px rgba(0,0,0,0.45) !important;
    color: #111 !important;
    padding: 26px !important;
    width: 560px !important;
    max-width: calc(100vw - 48px) !important;
    border-radius: 10px !important;
  }

  /* inner white form area so inputs remain readable (if you want inputs on white) */
  #adminModal .modal-card .modal-body,
  .admin-modal .modal-card .modal-body,
  .modal-login .modal-card .modal-body,
  #loginModal .modal-card .modal-body {
    background: rgba(255,255,255,0.95) !important;
    padding: 18px !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  }

  /* inputs/buttons contrast */
  #adminModal .modal-card input,
  #adminModal .modal-card textarea,
  #adminModal .modal-card select,
  .admin-modal .modal-card input,
  .admin-modal .modal-card textarea,
  .admin-modal .modal-card select {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
  }

  #adminModal .modal-card button,
  .admin-modal .modal-card button {
    background: #111 !important;
    color: #fff !important;
    border: none !important;
  }
}

/* Mobile: preserve top pinned layout and keep card readable */
@media (max-width: 480px) {
  #adminModal .modal-card,
  .admin-modal .modal-card,
  .modal-login .modal-card,
  #loginModal .modal-card {
    background: linear-gradient(180deg, #d4af37 0%, #b8860b 100%) !important;
    border: none !important;
    padding: 16px !important;
    width: auto !important;
    margin: 0 12px !important;
  }

  /* keep inner form white for readability on small screens */
  #adminModal .modal-card .modal-body,
  .admin-modal .modal-card .modal-body {
    background: rgba(255,255,255,0.98) !important;
    padding: 12px !important;
  }
}
/* Force gold admin card even if inline background exists */
#adminModal .modal-card[style],
.admin-modal .modal-card[style],
.modal-login .modal-card[style],
#loginModal .modal-card[style],
#adminModal .modal-card,
.admin-modal .modal-card,
.modal-login .modal-card,
#loginModal .modal-card {
  background-image: linear-gradient(180deg,#d4af37 0%,#b8860b 100%) !important;
  background-color: #d4af37 !important;
  background-repeat: no-repeat !important;
  border: none !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45) !important;
  color: #111 !important;
  padding: 22px !important;
  border-radius: 10px !important;
}
/* ===== Admin Login Box (non-modal version) ===== */

.admin-login-box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.admin-login-card {
  background: linear-gradient(180deg, #d4af37, #b8860b);
  padding: 20px;
  border-radius: 10px;
  width: 360px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.35);
}

.admin-login-title {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 700;
  color: #111;
  text-align: center;
}

.admin-label {
  display: block;
  margin-top: 12px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

.admin-login-card input {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.2);
  margin-bottom: 6px;
  background: #fff;
}

.admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.admin-actions button {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.2);
  background: #fff;
  cursor: pointer;
}

.login-btn {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
}
/* Anchor admin box over image 8.jpg */
.admin-login-box {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%,-50%) !important;
  z-index: 400000 !important;
  display: none;
  width: 100%;
  max-width: 640px;
  padding: 12px;
  box-sizing: border-box;
  pointer-events: auto;
}
.admin-login-box.is-visible { display: block !important; }

/* Gold outer + white inner */
.admin-login-card { background: linear-gradient(180deg,#d4af37,#b8860b) !important; padding:18px !important; border-radius:10px !important; box-shadow:0 18px 48px rgba(0,0,0,0.45) !important; margin:0 auto; }
.admin-login-inner { background: rgba(255,255,255,0.98) !important; padding:14px !important; border-radius:8px !important; display:flex; flex-direction:column; gap:10px; max-width:420px; margin:0 auto; }

/* spacing and inputs */
.admin-login-title { margin:0; font-size:18px; font-weight:700; color:#111; text-align:center; }
.admin-login-subtitle { font-size:13px; color:rgba(0,0,0,0.6); text-align:center; }
.admin-label { display:block; margin-top:12px; margin-bottom:6px; font-weight:600; color:#111; }
.admin-input { width:100%; padding:10px; border-radius:8px; border:1px solid rgba(0,0,0,0.12); background:#fff; box-sizing:border-box; }

/* password toggle */
.admin-password-wrap { position:relative; display:block; }
.admin-input { padding-right:96px; }
.toggle-password { position:absolute; right:10px; top:50%; transform:translateY(-50%); padding:6px 8px; border-radius:6px; background:rgba(255,255,255,0.96); border:1px solid rgba(0,0,0,0.06); color:#111; cursor:pointer; font-size:13px; }

/* actions */
.admin-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.btn { padding:8px 12px; border-radius:6px; cursor:pointer; border:1px solid rgba(0,0,0,0.12); background:#fff; }
.btn--primary { background:#111 !important; color:#fff !important; border:none !important; }

/* responsive */
@media (max-width:480px) {
  .admin-login-box { max-width: calc(100vw - 24px); left:50%; top:50%; transform:translate(-50%,-50%); }
  .admin-input { padding-right:80px; }
  .admin-login-inner { padding:12px; }
}
/* Admin login visibility and basic styling */
.admin-login-box { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important; z-index: 400000 !important; display: none; width: 100%; max-width: 640px; padding: 12px; box-sizing: border-box; pointer-events: auto; }
.admin-login-box.is-visible { display: block !important; }
.admin-login-card { background: linear-gradient(180deg,#d4af37,#b8860b) !important; padding: 18px !important; border-radius: 10px !important; box-shadow: 0 18px 48px rgba(0,0,0,0.45) !important; margin: 0 auto; }
.admin-login-inner { background: rgba(255,255,255,0.98) !important; padding: 14px !important; border-radius: 8px !important; display:flex; flex-direction:column; gap:10px; max-width:420px; margin:0 auto; }
.admin-login-title { margin:0; font-size:18px; font-weight:700; color:#111; text-align:center; }
.admin-label { display:block; margin-top:12px; margin-bottom:6px; font-weight:600; color:#111; }
.admin-input { width:100%; padding:10px; border-radius:8px; border:1px solid rgba(0,0,0,0.12); background:#fff; box-sizing:border-box; }
.admin-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.btn { padding:8px 12px; border-radius:6px; cursor:pointer; border:1px solid rgba(0,0,0,0.12); background:#fff; }
.btn--primary { background:#111 !important; color:#fff !important; border:none !important; }

/* Admin login visibility and styling */
.admin-login-box { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important; z-index: 400000 !important; display: none; width: 100%; max-width: 640px; padding: 12px; box-sizing: border-box; pointer-events: auto; }
.admin-login-box.is-visible { display: block !important; }
.admin-login-card { background: linear-gradient(180deg,#d4af37,#b8860b) !important; padding: 18px !important; border-radius: 10px !important; box-shadow: 0 18px 48px rgba(0,0,0,0.45) !important; margin: 0 auto; }
.admin-login-inner { background: rgba(255,255,255,0.98) !important; padding: 14px !important; border-radius: 8px !important; display:flex; flex-direction:column; gap:10px; max-width:420px; margin:0 auto; }
.admin-login-title { margin:0; font-size:18px; font-weight:700; color:#111; text-align:center; }
.admin-label { display:block; margin-top:12px; margin-bottom:6px; font-weight:600; color:#111; }
.admin-input { width:100%; padding:10px; border-radius:8px; border:1px solid rgba(0,0,0,0.12); background:#fff; box-sizing:border-box; }
.admin-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.btn { padding:8px 12px; border-radius:6px; cursor:pointer; border:1px solid rgba(0,0,0,0.12); background:#fff; }
.btn--primary { background:#111 !important; color:#fff !important; border:none !important; }

/* Admin login anchored over top image */
#adminLoginWrapper.admin-login-box {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 400000 !important;
  display: none;
  width: 100%;
  max-width: 640px;
  padding: 12px;
  box-sizing: border-box;
  pointer-events: auto;
}

#adminLoginWrapper.admin-login-box.is-visible {
  display: block !important;
}

.admin-login-card {
  background: linear-gradient(180deg,#d4af37,#b8860b) !important;
  padding: 18px !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45) !important;
  margin: 0 auto;
}

.admin-login-inner {
  background: rgba(255,255,255,0.98) !important;
  padding: 14px !important;
  border-radius: 8px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}

.admin-login-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  text-align: center;
}

.admin-login-subtitle {
  font-size: 13px;
  color: rgba(0,0,0,0.6);
  text-align: center;
}

.admin-label {
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
  font-weight: 600;
  color: #111;
}

.admin-input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  box-sizing: border-box;
  padding-right: 96px;
}

.admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.btn {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
}

.btn--primary {
  background: #111 !important;
  color: #fff !important;
  border: none !important;
}

/* password toggle */
.admin-password-wrap {
  position: relative;
  display: block;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.06);
  color: #111;
  cursor: pointer;
  font-size: 13px;
}

@media (max-width: 480px) {
  #adminLoginWrapper.admin-login-box {
    max-width: calc(100vw - 24px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .admin-input {
    padding-right: 80px;
  }

  .admin-login-inner {
    padding: 12px;
  }
}

/* REAL MOBILE FIX — matches your actual homepage */
@media (max-width: 480px) {

  /* Stop horizontal scrolling */
  html, body {
    overflow-x: hidden !important;
  }

  /* Make ALL images responsive */
  img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Center images */
  img {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Fix the 4-button row (Standings / Schedules / Facebook / Sponsor) */
  a img {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Add spacing between stacked images */
  img + img {
    margin-top: 12px !important;
  }

  /* Prevent text blocks from overflowing */
  div, p {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }
}

/* MOBILE-ONLY IMAGE FIX — does NOT affect desktop */
@media (max-width: 600px) {

  /* Stop the page from shifting left */
  html, body {
    overflow-x: hidden !important;
  }

  /* Make ALL images scale to the screen width */
  img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Fix any divs that were causing horizontal overflow */
  div {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Buttons with images (your 4 black buttons) */
  a img {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* MOBILE: scale images in gold sections only */
@media (max-width: 600px) {

  /* Main content card and gold sections */
  .home-card img,
  .hero-box img,
  .sponsor-row img,
  .main-trio img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Make sure their containers don't cause sideways scroll */
  .home-card,
  .hero,
  .sponsor-row,
  .main-trio,
  .card {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}
/* MOBILE FIX — allow gold-row containers to shrink */
@media (max-width: 600px) {

  /* Prevent sideways scroll */
  html, body {
    overflow-x: hidden !important;
  }

  /* The main card wrapper */
  .page-wrap {
    padding: 0 !important;
  }

  /* The white card that holds EVERYTHING */
  .card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    overflow-x: hidden !important;
  }

  /* Gold-row sections (hero, sponsor, trio, group photo) */
  .hero,
  .hero-box,
  .sponsor-row,
  .main-trio,
  .home-card {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Images inside those sections */
  .hero-box img,
  .sponsor-row img,
  .main-trio img,
  .home-card img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
  }
}
/* MOBILE (portrait) — container + image fix for gold rows only */
@media (max-width: 600px) {

  /* safety: prevent sideways scroll on small phones */
  html, body {
    overflow-x: hidden !important;
  }

  /* consistent box-sizing so padding doesn't create overflow */
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  /* Make main wrappers shrink to viewport and remove large side padding */
  .page-wrap,
  .card {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* Gold-row sections: hero, sponsor banner, trio, group photo, home card */
  .hero,
  .hero-box,
  .sponsor-row,
  .main-trio,
  .home-card {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
  }

  /* Ensure images inside those sections scale to the container */
  .hero-box img,
  .sponsor-row img,
  .main-trio img,
  .home-card img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* Sponsor row: allow wrapping and keep gaps reasonable */
  .sponsor-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Small tweak for the trio so images don't overflow their boxes */
  .main-trio .trio-left,
  .main-trio .trio-center,
  .main-trio .trio-right {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
  }

  /* Keep top-links row intact but prevent overflow if it contains images */
  .top-links-row {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Safety: images inside links */
  .top-links-row img,
  .top-links-row a img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}
/* ============================================================
   MOBILE PORTRAIT ONLY FIXES
   Desktop and mobile landscape unchanged
============================================================ */

@media (max-width: 600px) and (orientation: portrait) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  .page-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  .card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
  }

  /* Header stays two-column on vertical mobile */
  .card-header {
    display: grid !important;
    grid-template-columns: 1fr 42% !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 0 !important;
  }

  .site-title {
    font-size: 23px !important;
    line-height: 1.18 !important;
    margin: 0 !important;
  }

  .header-right,
  .dart-anim-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
  }

  .menu-dart-btn {
    width: 100% !important;
    max-width: 170px !important;
    height: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .menu-dart-btn img,
  #primaryMenuImg {
    width: 170px !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Hero image */
  .hero,
  .hero-box {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hero-box {
    max-height: none !important;
  }

  .hero-box img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Scroller */
  .silver-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 10px !important;
  }

  .silver-track {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 12px !important;
  }

  .silver-item {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    overflow: hidden !important;
  }

  .silver-item img {
    width: 110px !important;
    max-width: 110px !important;
    height: 90px !important;
    object-fit: cover !important;
    flex: 0 0 110px !important;
  }

  .caption-wrap {
    margin-left: 0 !important;
    padding-right: 0 !important;
    min-width: 0 !important;
  }

  .card-title {
    font-size: 13px !important;
    padding-right: 78px !important;
  }

  .caption-header .show-more-btn {
    right: 6px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
  }

  .caption-text {
    font-size: 12px !important;
    line-height: 1.3 !important;
    padding-right: 0 !important;
  }

  /* Main top block */
  .top-block-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Gold bar: horizontal scroll on portrait mobile */
  .gold-bar {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 12px !important;
    border-radius: 8px 8px 0 0 !important;
  }

  .gold-bar a {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  .gold-bar img,
  .gold-bar a img {
    width: 23px !important;
    max-width: 23px !important;
    height: 23px !important;
    object-fit: contain !important;
    display: inline-block !important;
    flex: 0 0 23px !important;
    margin: 0 !important;
  }

  /* Black DartConnect/Twitch row: horizontal scroll */
  .top-links-row {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px !important;
  }

  .top-links-row a {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  .top-links-row img,
  .top-links-row a img {
    width: auto !important;
    max-width: none !important;
    height: 34px !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  /* Players group photo */
  .players-strip,
  .players-strip a {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    overflow: hidden !important;
  }

  .players-strip img,
  .players-strip a img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  /* Sponsor row */
  .gold-sponsor-row {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  .gold-sponsor-inner {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
  }

  .gold-sponsor-row .sponsor-text {
    font-size: 18px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  .gold-sponsor-row .sponsor-logo,
  .sponsor-logo {
    width: auto !important;
    max-width: 260px !important;
    height: auto !important;
    max-height: 75px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  /* Home card */
  .home-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px !important;
    margin-top: 16px !important;
    overflow: hidden !important;
  }

  .home-card h2 {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }

  .home-card p {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }
}
/* ============================================================
   FINAL PATCH — MOBILE PORTRAIT ONLY
   Fix side nav, gold 4-link row, black 3-link row, and scroller
============================================================ */

@media (max-width: 600px) and (orientation: portrait) {

  /* -----------------------------
     1) FIX SIDE NAV — undo global img width
  ----------------------------- */

  .side-nav {
    width: min(82vw, 300px) !important;
    max-width: min(82vw, 300px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .side-nav img,
  .side-nav .nav-header img,
  .side-nav .nav-list a.nav-link img {
    width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    display: inline-block !important;
    flex: 0 0 28px !important;
    margin: 0 !important;
  }

  .side-nav .nav-header img {
    width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
  }

  .side-nav .nav-list a.nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }

  .side-nav .nav-list a.nav-link span {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* -----------------------------
     2) GOLD BAR — stack 4 links into 2 columns
     Better than horizontal cutoff on portrait
  ----------------------------- */

  .gold-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 10px !important;
    border-radius: 8px 8px 0 0 !important;
  }

  .gold-bar a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: normal !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    padding: 7px 4px !important;
    overflow: hidden !important;
  }

  .gold-bar img,
  .gold-bar a img {
    width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    object-fit: contain !important;
    display: inline-block !important;
    flex: 0 0 20px !important;
    margin: 0 !important;
  }

  /* -----------------------------
     3) BLACK ROW — stack 3 image links vertically
  ----------------------------- */

  .top-links-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 10px !important;
    background: #000 !important;
  }

  .top-links-row a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .top-links-row img,
  .top-links-row a img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 48px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* -----------------------------
     4) SCROLLER — make cards less squashed
  ----------------------------- */

  .silver-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 8px !important;
    overflow: hidden !important;
  }

  .silver-track {
    gap: 12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: stretch !important;
  }

  .silver-item {
    width: calc(100vw - 64px) !important;
    min-width: calc(100vw - 64px) !important;
    max-width: calc(100vw - 64px) !important;
    display: grid !important;
    grid-template-columns: 118px 1fr !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 8px !important;
    min-height: 130px !important;
    overflow: hidden !important;
  }

  .silver-item img,
  .silver-item .thumb-link img {
    width: 118px !important;
    max-width: 118px !important;
    height: 96px !important;
    object-fit: cover !important;
    object-position: top !important;
    flex: none !important;
    display: block !important;
    margin: 0 !important;
  }

  .silver-item .thumb-link {
    width: 118px !important;
    max-width: 118px !important;
    display: block !important;
    overflow: hidden !important;
  }

  .caption-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  .caption-header {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 8px 70px 8px 8px !important;
    overflow: hidden !important;
  }

  .card-title {
    font-size: 13px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    padding-right: 0 !important;
  }

  .caption-header .show-more-btn {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    max-width: 62px !important;
    padding: 5px 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .caption-text {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    max-height: calc(1.25em * 3) !important;
    overflow: hidden !important;
    padding-right: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .caption-text.expanded {
    max-height: none !important;
  }
}
/* MOBILE LANDSCAPE — keep the 3 images inside the black row */
@media (max-width: 900px) and (orientation: landscape) {

  /* Ensure the top-links row is a single, centered flex row */
  .top-links-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Constrain each link and its image so they stay inside the row */
  .top-links-row a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    max-width: 32% !important; /* three items fit comfortably */
    box-sizing: border-box !important;
  }

  .top-links-row img,
  .top-links-row a img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }
}
/* MOBILE PORTRAIT + LANDSCAPE — center main card horizontally and vertically */
@media (max-width: 600px) {

  /* Make the page wrapper a centered flex container on phones */
  .page-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* Constrain and center the card */
  .card {
    width: calc(100% - 24px) !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* Ensure internal content doesn't force overflow */
  .card * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Keep images inside the card responsive */
  .card img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }
}
/* Ensure admin password toggle is on top and clickable */
.admin-password-wrap {
  position: relative !important;
  z-index: 999 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

/* Admin password wrapper: consistent layout and responsive stacking */
.admin-password-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* Input reserves space on the right for the toggle button */
.admin-password-wrap .admin-input {
  flex: 1 1 auto;
  padding: 10px 12px;
  padding-right: calc(72px + 12px); /* adjust 72px if your button is wider */
  box-sizing: border-box;
  min-height: 40px;
}

/* Toggle button sits inside wrapper and is vertically centered */
.toggle-password {
  position: absolute;
  right: 8px;
  top: 45%;
  transform: translateY(-50%);
  height: 36px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-sizing: border-box;
  white-space: nowrap;
}

/* Small screens: stack the toggle under the input to avoid overlap */
@media (max-width: 480px) {
  .admin-password-wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-password-wrap .admin-input {
    padding-right: 12px; /* no reserved space when stacked */
  }
  .toggle-password {
    position: static;
    transform: none;
    margin-top: 8px;
    align-self: flex-end;
    width: auto;
  }
}

/* Optional: small visual tweaks for admin actions */
.admin-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.admin-actions .btn { min-width:80px; }

/* Menu dart base (your existing rules can remain) */
.menu-dart-btn { /* keep as-is */ }

/* Flying clone styles */
.menu-dart--flying {
  position: fixed;
  pointer-events: none;
  z-index: 1100;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
  transform-origin: center center;
  will-change: transform, left, top, opacity;
}

/* Ensure nav doesn't clip the flying clone */
.side-nav {
  z-index: 1000;
  overflow: visible;
  position: fixed; /* adapt if your layout differs */
}

/* small nav hit flash */
.side-nav.nav-hit {
  box-shadow: 0 6px 18px rgba(0,0,0,.12), inset 0 -3px 0 var(--accent, #222);
  transition: box-shadow .28s ease;
}

/* Fallback keyframe if Web Animations API not available */
@keyframes dart-fallback {
  from { transform: translate(0,0) rotate(0deg) scale(1); opacity:1; }
  to   { transform: translate(0,0) rotate(360deg) scale(.6); opacity:0; }
}
#dartAnimWrap {
    position: relative;
    z-index: 99999 !important;
}
.silver-item {
  min-width: 260px;
  flex: 0 0 auto;
}
.thumb-placeholder.event-bar {
  width: 160px;
  height: 120px;
  background: #333;
  border-radius: 6px;
  margin-bottom: 8px;
}
.silver-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Prevent scroller from stretching beyond viewport and ensure items align */
.silver-wrap { overflow: hidden; }
.silver-track { display:flex; gap:12px; align-items:flex-start; will-change:transform; transform: translate3d(0,0,0); }
.silver-item { flex: 0 0 auto; min-width: 280px; max-width: 560px; box-sizing: border-box; }
.silver-track img { max-width: 100%; height: auto; display:block; object-fit:cover; }


.silver-item {
    flex-direction: row !important;
    align-items: flex-start !important;
}

/* === FIX SCROLLER LAYOUT + BLACK BAR TEXT === */

/* 1. Put image and caption side-by-side */
.silver-item {
    flex-direction: row !important;
    align-items: flex-start !important;
}

/* 2. Align top of flyer with top of black bar */
.caption-header {
    padding: 6px 10px !important;
    min-height: 40px !important;
}

/* 3. Make black bar text white */
.caption-header .card-title {
    color: #fff !important;
}

/* ================================
   SCROLLER — WEB LINK PREVIEW CARD
   ================================ */

.web-preview-card {
  background: #111;
  border: 1px solid var(--gold-mid, #c9a44b);
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  color: #fff;
  max-width: 160px;
  box-sizing: border-box;
}

.web-preview-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--gold-top, #f0c040);
}

.web-preview-url {
  font-size: 12px;
  opacity: 0.85;
  word-break: break-all;
  margin-bottom: 8px;
}

.web-preview-button {
  display: inline-block;
  padding: 6px 10px;
  background: var(--gold-mid, #c9a44b);
  color: #000;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  font-size: 12px;
}

.web-preview-button:hover {
  background: var(--gold-top, #f0c040);
  color: #000;
}

/* ADMIN POPUP FINAL OVERRIDES - append only */
#adminLoginWrapper .admin-input,
#adminLoginWrapper #admin-username {
  border: 1.6px solid #9e9e9e !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color .12s ease !important;
}

/* keep focus identical to normal state (no darker border or glow) */
#adminLoginWrapper .admin-input:focus,
#adminLoginWrapper #admin-username:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: #9e9e9e !important;
}

/* password row layout */
#adminLoginWrapper .admin-password-wrap {
  display:flex !important;
  align-items:center !important;
  gap: 12px !important;
  margin-bottom:12px !important;
  box-sizing:border-box !important;
}

/* toggle defaults; JS will set exact px height and margin-left inline */
#adminLoginWrapper .admin-password-wrap .toggle-password {
  box-sizing: border-box !important;
  align-self: stretch !important;
  height: 100% !important;
  padding: 0 12px !important;
  min-width: 56px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius:6px !important;
  background:#fff !important;
  margin-left: 40px !important; /* default visual nudge */
  line-height: normal !important;
}

/* stronger nudge on narrow landscape */
@media (max-width:768px) and (orientation: landscape) {
  #adminLoginWrapper .admin-password-wrap { gap: 16px !important; }
  #adminLoginWrapper .admin-password-wrap .toggle-password {
    margin-left: 44px !important;
    padding: 0 10px !important;
  }
}

/* small portrait tweak */
@media (max-width:480px) and (orientation: portrait) {
  #adminLoginWrapper .admin-password-wrap .admin-input { height:44px !important; }
  #adminLoginWrapper .admin-password-wrap .toggle-password { height:44px !important; min-width:60px !important; }
}

/* Focus: stronger neutral border (subtle) */
#adminLoginWrapper .admin-input:focus,
#adminLoginWrapper #admin-username:focus {
  outline: none !important;
  box-shadow: none !important;
  border: 2px solid #6b6b6b !important;
  transition: border-color .12s ease, border-width .12s ease !important;
}

/* Fallback: make Show toggle border match Cancel (static) */
#adminLoginWrapper .admin-password-wrap .toggle-password {
  border-color: rgb(221, 221, 221) !important;
}

/* FINAL iPhone Safari override for Cancel button */
#adminCancelBtn {
  -webkit-appearance: none !important;
  appearance: none !important;

  /* remove iOS default button background */
  background: #f7f8fa !important;
  background-color: #f7f8fa !important;
  background-image: none !important;

  /* remove iOS button effects */
  box-shadow: none !important;
  filter: none !important;

  /* match desktop */
  color: #333 !important;
  border: 1px solid #ddd !important;

  /* remove blue tap flash */
  -webkit-tap-highlight-color: transparent !important;
}

/* ======================================================
   HOMEPAGE TOP TITLE
====================================================== */

.home-topbar{

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin-bottom:26px;
}

.home-title-wrap{
  flex:1;
}

.home-title{

  margin:0;

  font-size:54px;

  font-weight:900;

  line-height:1;

  letter-spacing:.5px;

  background:linear-gradient(
    180deg,
    #ffe27a 0%,
    #f1c232 35%,
    #c69214 70%,
    #8a5d00 100%
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:
    0 2px 4px rgba(0,0,0,.25),
    0 0 18px rgba(212,160,23,.18);
}

/* ======================================================
   HEADER BRAND AREA
====================================================== */

.card-header{
  width:100%;
  margin:0 0 26px 0;
  padding:0;
}

.home-brand{
  width:100%;
  box-sizing:border-box;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;

  padding:22px 28px;

  background:#050505;
  border:2px solid #c69214;
  border-radius:16px;
}

.home-brand-title{
  margin:0;
  color:#fff;
  font-size:34px;
  font-weight:900;
  line-height:1.1;
  white-space:nowrap;
}

.home-brand-sub{
  margin-top:6px;
  color:#d4af37;
  font-size:16px;
  font-weight:800;
}

.header-right{
  flex:0 0 auto;
  margin-left:auto;
}

.menu-dart-btn,
.dart-anim-wrap{
  max-width:320px;
}

.menu-dart-btn img,
#primaryMenuImg{
  width:300px;
  max-width:32vw;
  height:auto;
  display:block;
}

/* ======================================================
   TABLET
====================================================== */

@media (max-width:900px){

  .home-brand{
    gap:14px;
    padding:18px 20px;
  }

  .home-brand-title{
    font-size:42px;
    line-height:1.08;
    white-space:normal;
  }

  .menu-dart-btn img,
  #primaryMenuImg{
    width:240px;
    max-width:240px;
    height:auto;
  }
}

/* ======================================================
   MOBILE PORTRAIT HEADER
====================================================== */

@media (max-width:650px){

  .card-header{
    width:100% !important;
    padding:0 !important;
    margin:0 0 22px 0 !important;
  }

  .home-brand{
    width:100% !important;
    max-width:100% !important;
    min-width:100% !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;

    box-sizing:border-box !important;
    padding:18px !important;
    gap:12px !important;

    background:#050505 !important;
    border:2px solid #c69214 !important;
    border-radius:16px !important;
  }

  .home-brand-title{
    font-size:0 !important;
    line-height:1 !important;
    margin:0 !important;
  }

  .home-brand-title::after{
    content:"LCDL";
    display:block;
    font-size:52px !important;
    font-weight:900;
    color:#fff;
    line-height:1;
    letter-spacing:.04em;
    white-space:nowrap;
  }

  .home-brand-sub{
    font-size:15px !important;
    margin-top:6px !important;
    white-space:nowrap !important;
  }

  .header-right{
    width:100% !important;
    margin:0 !important;

    display:flex !important;
    justify-content:flex-end !important;
  }

  .dart-anim-wrap,
  .menu-dart-btn{
    width:120px !important;
    max-width:120px !important;
  }

  .menu-dart-btn img,
  #primaryMenuImg{
    width:120px !important;
    max-width:120px !important;
    height:auto !important;
    display:block !important;
  }
}

/* =========================================
   REUSABLE CONTENT CARD
========================================= */
.content-card{
  background:#efefef;
  border-radius:8px;
  padding:22px;
  box-shadow:0 2px 8px rgba(0,0,0,0.16);
  border:1px solid rgba(0,0,0,0.06);
  border-top:4px solid #d4af37;
  margin-top:5px;
  color:#111;
  line-height:1.55;
}

.content-card h1,
.content-card h2,
.content-card h3{
  margin-top:0;
  color:#111;
}

.content-card p{
  margin:0 0 18px;
  font-weight:400;
  color:#222;
}

.content-card a{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}

.content-card a:hover{
  text-decoration:underline;
}

/* =========================================
   REUSABLE CONTENT SECTIONS
========================================= */

.content-title{
  font-size:32px;
  font-weight:800;
  margin:0 0 18px;
  color:#111;
  line-height:1.1;
}

.content-subtitle{
  font-size:20px;
  font-weight:700;
  margin:28px 0 14px;
  color:#222;
  padding-bottom:8px;
  border-bottom:2px solid rgba(212,175,55,.45);
}

.content-note{
  background:rgba(0,0,0,0.04);
  border-left:4px solid #d4af37;
  padding:14px 16px;
  border-radius:6px;
  margin:18px 0;
  color:#222;
}

.content-divider{
  height:1px;
  background:linear-gradient(
    to right,
    rgba(212,175,55,0),
    rgba(212,175,55,.65),
    rgba(212,175,55,0)
  );
  margin:28px 0;
}

/* ======================================================
   FINAL MOBILE HEADER OVERRIDE
====================================================== */

@media (max-width:650px){

  .card-header{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  .card-header .home-brand{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;

    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    margin:0 !important;
    padding:18px !important;
    box-sizing:border-box !important;

    background:#050505 !important;
    border:2px solid #c69214 !important;
    border-radius:16px !important;
  }

  .card-header .home-brand-title{
    font-size:0 !important;
    line-height:1 !important;
    margin:0 !important;
    white-space:normal !important;
  }

  .card-header .home-brand-title::after{
    content:"LCDL";
    display:block;
    font-size:52px !important;
    font-weight:900 !important;
    color:#fff !important;
    line-height:1 !important;
    letter-spacing:.04em !important;
    white-space:nowrap !important;
  }

  .card-header .home-brand-sub{
    font-size:15px !important;
    margin-top:8px !important;
    white-space:nowrap !important;
  }

  .card-header .header-right{
    width:100% !important;
    max-width:none !important;
    margin:12px 0 0 0 !important;

    display:flex !important;
    justify-content:flex-end !important;

    padding-right:5 !important;
  }

  .card-header .dart-anim-wrap,
  .card-header .menu-dart-btn{
    width:130px !important;
    max-width:130px !important;
  }

  .card-header #primaryMenuImg,
  .card-header .menu-dart-btn img{
    width:130px !important;
    max-width:130px !important;
    height:auto !important;
    display:block !important;
  }

  #sideNav button,
  #sideNav .admin-login-btn{
    width:140px !important;
    max-width:140px !important;

    margin:0 auto !important;
    display:block !important;

    padding:8px 12px !important;
    font-size:15px !important;
  }

}

/* ======================================================
   FINAL SIDE NAV OVERRIDE
====================================================== */

@media (max-width:650px){

  body #sideNav.side-nav,
  body .side-nav{
    width:230px !important;
    max-width:230px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;

    padding:20px 12px 90px !important;
    box-sizing:border-box !important;
  }

}

@media (max-width:950px) and (orientation:landscape){

  body #sideNav.side-nav,
  body .side-nav{
    width:270px !important;
    max-width:270px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;

    padding:18px 12px 90px !important;
    box-sizing:border-box !important;
  }

}

/* Vertical phone only - close X position */
@media (max-width:650px) and (orientation:portrait){

  .side-nav .close-x{
    right:-50px !important;
    top:8px !important;
  }
}

/* ======================================================
   ADMIN LOGIN POPUP CENTER FIX
====================================================== */

#adminModal{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;

  display:none;
  background:rgba(0,0,0,.55) !important;
}

#adminModal.show{
  display:block !important;
}

#adminModal > div,
#adminModal .admin-box,
#adminLoginBox{
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%, -50%) !important;

  width:min(420px, calc(100vw - 36px)) !important;
  max-height:calc(100vh - 80px) !important;
  overflow:auto !important;

  margin:0 !important;
}