:root { --rp-radius: 14px; --rp-gap: 16px; --rp-bg:#0f0f12; --rp-border:#1f1f25; }

/* Header styles to match screenshot */
.rp-pregame-header {display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin:2rem 0 1.25rem;}
.rp-eyebrow{margin:0 0 .35rem; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:#c4a2ff; opacity:.9;}
.rp-pregame-title{margin:0; font-weight:800; line-height:1.15; font-size:clamp(1.6rem, 3vw, 2.1rem);}
.rp-title-gradient{
  background: linear-gradient(180deg,#E9D5FF 0%, #C084FC 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 24px rgba(124,58,237,.25);
}
.rp-subtitle{margin:.4rem 0 0; color:#b7b4c6; font-size:.95rem}

/* Section + Grid */
.rp-pregame-section {margin: 2rem 0;}
.rp-pregame-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rp-gap); }
@media (max-width: 1024px){ .rp-pregame-grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .rp-pregame-grid{grid-template-columns: 1fr;} }

/* Card */
.rp-pregame-item { position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius: var(--rp-radius); background: var(--rp-bg); border:1px solid var(--rp-border); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; will-change: transform; }
.rp-pregame-item:hover { transform: translateY(-2px); border-color:#3a3a44; box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* Fixed media box */
.rp-pregame-media { width:100%; aspect-ratio: 4 / 5; overflow:hidden; background:#15151b; }
.rp-pregame-img, .rp-pregame-placeholder {width:100%; height:100%; display:block; object-fit:cover;}
.rp-pregame-item:hover .rp-pregame-img { transform: scale(1.05); transition: transform .35s ease; }

/* Caption */
.rp-pregame-caption { font-size:.95rem; padding:.6rem .8rem .8rem; color:#e7e7ea }

/* Full-card clickable overlay */
.rp-pregame-link { position:absolute; inset:0; z-index:5; text-decoration:none; }
.rp-pregame-item::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(124,58,237,0) 60%, rgba(124,58,237,.15) 100%); opacity:0; transition: opacity .25s ease; }
.rp-pregame-item:hover::after {opacity:1;}

/* Actions */
.rp-pregame-actions {text-align:center; margin-top:1rem;}
.rp-pregame-load {cursor:pointer; border:0; padding:.7rem 1.25rem; border-radius:999px; background:#7c3aed; color:white; font-weight:600;}
.rp-pregame-load:disabled {opacity:.5; cursor:not-allowed;}

/* Lightbox */
.rp-lightbox {position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999;}
.rp-lightbox.is-open {display:flex;}
.rp-lightbox-backdrop {position:absolute; inset:0; background:rgba(0,0,0,.85);}
.rp-lightbox-inner {position:relative; max-width:90vw; max-height:90vh;}
.rp-lightbox-img {display:block; max-width:90vw; max-height:85vh; border-radius:12px;}
.rp-lightbox-close {position:absolute; top:-40px; right:0; background:transparent; border:0; font-size:32px; color:#fff; cursor:pointer;}

/* ===== Mobile slider (<=640px) using scroll-snap ===== */
@media (max-width: 640px){
  .rp-pregame-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 0 16px;           /* λίγο πλάι για “αναπνοή” */
    scrollbar-width: none;
  }
  .rp-pregame-grid::-webkit-scrollbar{ display:none; }

  /* Μία κάρτα ανά «κάδρο» */
  .rp-pregame-item{
    flex: 0 0 88%;             /* ~1 κάρτα στην οθόνη */
    scroll-snap-align:center;
  }

  /* Dots */
  .rp-slider-dots{
    display:flex; align-items:center; justify-content:center;
    gap:8px; margin: 10px 0 0;
  }
  .rp-slider-dots .rp-dot{
    width:8px; height:8px; border-radius:999px;
    background:#5b5b66; border:0;
  }
  .rp-slider-dots .rp-dot.is-active{
    transform: scale(1.2); background:#a78bfa;
  }
}

/* Κρύψε τα dots σε μεγαλύτερες οθόνες */
@media (min-width: 641px){
  .rp-slider-dots{ display:none; }
}