:root {
    --deep-brown: #6B5D40;
    --forest-green: #588466;
    --sand: #E9E8C0;
    --sunset-yellow: #F0C96E;
    --amber: #F6AA1C;
    --choco: #3D1C15;
}
body {
    position: relative; /* needed so pseudo-element can position correctly */
    font-family: 'Poppins', sans-serif;
    color: black;
    overflow-x: hidden;

    background-image: url('/pennacool/pcl123/jumbies/images/jumbies_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

body::before {
    content: "";
    position: fixed;
    inset: 0; /* covers full viewport */
    background: rgba(255, 255, 255, 0.5); /* transparent white overlay */
    backdrop-filter: blur(3px); /* apply blur */
    -webkit-backdrop-filter: blur(6px); /* Safari support */
    z-index: -1; /* keep it behind page content */
}

/* === Headings and Buttons === */
h1, h2, h3, h4, h5, h6 {
    color: var(--choco) !important;
    font-weight: 700;
}

.btn,
.btn-primary {
    background-color: var(--choco) !important;
    border: none;
    color: var(--sand);
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: var(--forest-green) !important;
}

/* === Navigation Tabs === */
.nav-tabs .nav-link {
    background: var(--amber);
    color: var(--choco);
    border-radius: 10px;
    margin: 2px;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}

.nav-tabs .nav-link.active {
    background: linear-gradient(45deg, var(--forest-green), var(--sunset-yellow));
    color: var(--sand);
}

/* === Cards & Sections === */
.card, .game-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.card-title {
    color: var(--choco);
    font-weight: bold;
}

/* === Scoreboard Table === */
.table thead th {
    background: var(--forest-green);
    color: var(--sand);
    border: none;
}

.table tbody tr {
    background-color: rgba(233, 232, 192, 0.2);
    color: var(--choco);
}

.table td, .table th {
    border: none;
}

/* === Section Backgrounds === */
.Section {
    background: linear-gradient(to right, var(--forest-green), var(--amber));
    padding: 30px 20px;
    border-radius: 20px;
    margin-bottom: 30px;
}

/* === Overlay and Heading Effects === */
.Overlay {
    background: rgba(0, 0, 0, 0.3);
    /* backdrop-filter: blur(3px); */
}

/* === Carousel Navigation === */
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
    background: var(--choco) !important;
    color: var(--sand) !important;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    transition: background-color 0.3s ease;
}

.owl-nav button:hover {
    background-color: var(--forest-green) !important;
}

/* === Footer === */
#footer {
    width: 100%;
    display: block;
    margin-top: 20px;
}

/* === Mobile Friendliness === */
@media (max-width: 768px) {
    .card {
        margin-bottom: 20px;
    }

    .Section {
        padding: 20px 10px;
    }
}

.rules-section {
    background-color: rgb(0 0 0 / 30%);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1)
}

.Main {
    background-color: rgb(0 0 0 / 30%);
}


/* === Scoreboard Table === */
.table {
    border-collapse: separate;
    border-spacing: 0 6px; /* spacing between rows */
    width: 100%;
}

/* Header */
.table thead th {
    background-color: var(--deep-brown); /* strong brown for contrast */
    color: var(--sand);                  /* light text for visibility */
    font-weight: 700;
    text-align: left;
    border: none;
    padding: 14px;
    font-size: 1rem;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Rows */
.table tbody tr:nth-child(odd) {
    background-color: var(--sunset-yellow); /* soft yellow */
    color: var(--choco);
}

.table tbody tr:nth-child(even) {
    background-color: var(--amber); /* stronger orange-yellow */
    color: var(--choco);
}

/* Hover */
.table tbody tr:hover {
    background-color: var(--forest-green); /* green highlight */
    color: var(--sand);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cells */
.table td, .table th {
    border: none;
    padding: 12px;
    vertical-align: middle;
}

/* === DataTables Info (entries count) === */
.dataTables_info {
    color: var(--choco) !important;     /* dark brown for readability */
    font-weight: 600 !important;        /* stronger weight */
    font-size: 0.95rem !important;      /* slightly larger */
    padding: 0.75rem 0 !important;      /* breathing room */
}

/* === Background color for main sections === */

.Main {
    background: rgba(88, 132, 102, 0.8) !important; /* forest green w/ opacity */
    border-radius: 10px;
}


#xRulesSection {
    width: 80% !important;
    margin: 2rem auto !important;
    padding: 2rem !important;
    background: linear-gradient(135deg, var(--sand) 0%, #ffffff 100%) !important; /* light beige to white */
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    color: var(--choco) !important; /* dark text for readability */
}

/* Headings inside Rules Section */
#xRulesSection h2, 
#xRulesSection h3 {
    color: var(--forest-green) !important;
    font-weight: 700 !important;
}

/* Accent for bold text */
#xRulesSection strong {
    color: var(--deep-brown) !important;
}

#xAboutSection {
    width: 80% !important;
    margin: 2rem auto !important;
    padding: 2rem !important;
    background: rgba(88, 132, 102, 0.9) !important; /* forest green overlay */
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    color: var(--sand) !important; /* beige text for readability */
}

/* Heading styling */
#xAboutSection h1 {
    color: var(--sunset-yellow) !important; /* warm accent */
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

/* Paragraphs */
#xAboutSection p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    color: var(--choco) !important; /* dark text for readability */
    padding: 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sand) 0%, #ffffff 100%) !important; /* light beige to white */
}



/* === Floating Product Placement === */
/* =========================
   SHARED TUNABLES
   ========================= */
/* Gutter the text reserves for the pack on DESKTOP/TABLET. 
   It scales with viewport: min 160px, usually ~18–22vw, max 300px. */
:root {
  --pp-gutter: clamp(160px, 20vw, 300px);
  --pp-pack-width: clamp(140px, 18vw, 180px);
  --pp-pack-offset: clamp(-40px, -2.5vw, -16px); /* how far the pack sits outside the card edge */
}

/* =========================================================
   ABOUT: side placement on wide screens, inline on mobile
   ========================================================= */

/* Only do side placement when there's room (>= 900px) */
@media (min-width: 900px) {
  #xAboutSection.pp-force-wrap {
    position: relative !important;
    padding-right: var(--pp-gutter) !important; /* responsive lane */
    min-height: 200px !important;
  }
  #xAboutSection.pp-force-wrap > .pp-pack {
    position: absolute !important;
    z-index: 5 !important;
    top: 18px !important;
    right: var(--pp-pack-offset) !important;
    width: var(--pp-pack-width) !important;
    height: auto !important;
    pointer-events: none !important;
    /* let animation control transform */
    transform: rotate(-6deg);
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)) !important;
    transition: none !important;
    animation: pp-wiggle 8s ease-in-out infinite !important;
  }
}

/* Between 768–899px: smaller gutter + smaller image, still side placement but less intrusive */
@media (min-width: 768px) and (max-width: 899px) {
  #xAboutSection.pp-force-wrap { 
    position: relative !important;
    padding-right: clamp(120px, 16vw, 220px) !important;
  }
  #xAboutSection.pp-force-wrap > .pp-pack {
    position: absolute !important;
    z-index: 5 !important;
    top: 14px !important;
    right: clamp(-30px, -3vw, -12px) !important;
    width: clamp(120px, 16vw, 200px) !important;
    transform: rotate(-5deg);
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.22)) !important;
    animation: pp-wiggle 9s ease-in-out infinite !important;
  }
}

/* Mobile <768px: inline, centered (no jarring overlap) */
@media (max-width: 767.98px) {
  #xAboutSection.pp-force-wrap {
    padding-right: 1rem !important;
    min-height: unset !important;
  }
  #xAboutSection.pp-force-wrap > .pp-pack {
    position: static !important;
    display: block !important;
    margin: 0 auto 1rem !important;
    width: clamp(120px, 52vw, 200px) !important;
    height: auto !important;
    transform: none;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.2)) !important;
    animation: pp-wiggle 10s ease-in-out infinite !important;
  }
}
/* Rules section: keep centered, allow overhang */
#xRulesSection.pp-rules-grid {
  position: relative !important;
  overflow: visible !important;
  display: block !important;
  padding-left: 120px !important;  /* ⬅️ reserve space for text */
}

/* Pack image */
#xRulesSection .pp-pack-col {
  position: absolute !important;
  z-index: 5 !important;
  top: 20px !important;
  left: 0 !important;

  /* ⬅️ smaller and shifted outside */
  transform: translateX(-80%) rotate(5deg);
  width: clamp(120px, 15vw, 180px) !important;  /* was up to 240px */
  height: auto !important;

  pointer-events: none !important;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)) !important;
  animation: pp-wiggle-left 9s ease-in-out infinite !important;
}

/* Text body gets a bit of breathing room */
#xRulesSection .pp-rules-body {
  position: relative;
  z-index: 1;
}

/* Mobile: drop image inline above text */
@media (max-width: 900px) {
  #xRulesSection.pp-rules-grid {
    padding-left: 1rem !important; /* remove reserved gutter */
  }
  #xRulesSection .pp-pack-col {
    position: static !important;
    display: block !important;
    margin: 0 auto 0.75rem !important;
    width: clamp(120px, 46vw, 180px) !important;
    transform: none;
    animation: pp-wiggle-left 10s ease-in-out infinite !important;
  }
}