/* ================= VARIABLES ================= */
:root {
  /* Brand colors */
  --green: #0C6836;
  --orange: #EF7827;
  --pink: #E9108B;
  --purple: #3e0c68;

  /* Neutrals */
  --white: #ffffff;
  --black: #1A1814;

  /* Light tones */
  --orange-50: #FFF3E0;
  --orange-100: #FFE0B2;
  --orange-200: #FFD699;
  --cream: #FFE6C6;

  /* Scoreboard alt rows */
  --row-odd: #f6adec;
  --row-even: #ff83ee;

  /* Transparent / effect colors */
  --white-10: rgba(255,255,255,0.1);
  --white-18: rgba(255,255,255,0.18);
  --white-30: rgba(255,255,255,0.3);

  --black-03: rgba(0, 0, 0, 0.3);
  --shadow-light: rgba(0,0,0,0.1);
  --shadow-medium: rgba(0,0,0,0.06);
  --shadow-drop-15: rgba(0,0,0,.15);
  --shadow-drop-18: rgba(0,0,0,.18);

  --border-dark-soft: rgba(26,24,20,0.08);
  --border-dark-mid: rgba(26,24,20,0.2);

  --panel-green: rgb(0 255 44 / 20%);
  --header-orange: rgb(255 139 27);

  /* Reusable gradients */
  --gradient-page: linear-gradient(135deg, var(--orange) 0%, var(--green) 100%);
  --gradient-page-alt: linear-gradient(135deg, var(--orange) 0%, var(--purple) 100%);
  --gradient-tabs-active: linear-gradient(45deg, var(--orange), var(--green));
  --gradient-table-head: linear-gradient(90deg, var(--green) 0%, var(--pink) 100%);
  --gradient-section: linear-gradient(to right, var(--green), var(--orange));
}

/* === Base Styling === */
body {
    font-family: 'Poppins', sans-serif;
    background: var(--gradient-page);
    color: var(--white);
    overflow-x: hidden;
}


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

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

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

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

.nav-tabs .nav-link.active {
    background: var(--gradient-tabs-active);
    color: var(--white);
}

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

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

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

/* === Scoreboard Table === */
.table thead th {
    background: var(--gradient-table-head);
    color: var(--white);
    border: none;
}

.table tbody tr {
    background-color: var(--white-10);
    color: var(--black);
}

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

/* === Section Backgrounds === */
.Section {
    background: var(--gradient-section);
    padding: 30px 20px;
    border-radius: 20px;
    margin-bottom: 30px;
}

/* === Overlay and Heading Effects === */
/* .Overlay {
    background: var(--black-03);
    backdrop-filter: blur(3px);
} */

/* .Heading, .Menu .Item {
    background-color: var(--orange);
    color: var(--white);
    border-radius: 10px;
    padding: 8px 15px;
    margin: 0 5px;
    transition: background 0.3s ease;
}

.Menu .Item:hover {
    background: linear-gradient(to right, var(--pink), var(--green));
    color: var(--white);
} */

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

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

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

/* === Mobile Friendliness === */
@media (max-width: 768px) {
    /* .Heading, .Menu {
        text-align: center;
        flex-direction: column;
    } */

    .card {
        margin-bottom: 20px;
    }

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


/* Make the Main area show a faint, scrolling background image */ 
.Main { position: relative;/* anchor the overlay */
    background: transparent; /* let the body gradient show through */ 
    z-index: 0; /* create a stacking context */ 
} /* Ensure content inside .Main stays above the overlay */ 

.Main > * { position: relative; z-index: 1; } 

body { 
    font-family: 'Poppins', sans-serif; color: var(--white); 
    overflow-x: hidden; /* Fixed image with gradient fallback/tint */ 
    background-image: url("https://sea.pennacool.com/pennacool/pcl123/holiday/images/bigfoot_microsite_bg.png"), var(--gradient-page-alt); 
    background-position: center center, center center; 
    background-size: cover, cover; 
    background-repeat: no-repeat, no-repeat; 
    background-attachment: fixed, fixed; /* Optional: uncomment to tint/darken the image with the gradient */ /* background-blend-mode: multiply; */ } /* ==== BASIC, NON-LAYOUT COLORING (Scoreboard only) ==== */ /* Header */ 

#Scoreboard table.dataTable thead th, 
#Scoreboard .dataTables_scrollHead th { 
    background-color: var(--green); /* dark green header */ 
    color: var(--white); border: 0 !important; /* avoid width shifts in scroll head */ 
} /* Thin separators between header cells without affecting widths */ 

#Scoreboard table.dataTable thead th + th, 
#Scoreboard .dataTables_scrollHead th + th { 
    box-shadow: inset 1px 0 0 var(--white-18); 
} /* Sorted column cue (subtle orange underline) */ 

#Scoreboard table.dataTable thead th.sorting_asc, 
#Scoreboard table.dataTable thead th.sorting_desc { 
    box-shadow: inset 0 -3px 0 var(--orange); 
} /* Body text color */ 

#Scoreboard table.dataTable tbody td { 
    color: var(--black); 
} /* Zebra rows (warm oranges, like your reference screenshot) */ 

#Scoreboard table.dataTable tbody tr:nth-child(odd) { 
    background-color: var(--orange-50); 
} /* orange-50 */ 

#Scoreboard table.dataTable tbody tr:nth-child(even) { 
    background-color: var(--orange-100); 
} /* orange-100 */ /* Row hover (slightly deeper) */ 

#Scoreboard table.dataTable tbody tr:hover { 
    background-color: var(--orange-200) !important; 
} /* Responsive “+” toggle (pink accent) */ 

#Scoreboard table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, 
#Scoreboard table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before { 
    background-color: var(--pink) !important; 
    color: var(--white) !important; 
} /* Controls: search + length (minimal) */ 

#Scoreboard .dataTables_filter label,
#Scoreboard .dataTables_length label { 
    color: var(--black); 
    font-weight: 600; 
} 

#Scoreboard .dataTables_filter input, 
#Scoreboard .dataTables_length select { 
    background: var(--white); 
    color: var(--black); 
    border: 1px solid var(--green); 
    border-radius: 6px; } 

#Scoreboard .dataTables_filter input:focus, 
#Scoreboard .dataTables_length select:focus { 
    outline: 2px solid var(--pink); 
    border-color: var(--pink); 
} /* Pagination (basic buttons) */ 

#Scoreboard .dataTables_paginate .paginate_button { 
    background: var(--white) !important; 
    color: var(--black) !important; 
    border: 1px solid var(--green) !important; 
    border-radius: 6px !important; } 

#Scoreboard .dataTables_paginate .paginate_button:hover { 
    background: var(--orange-200) !important; 
    border-color: var(--orange) !important; 
} 

#Scoreboard .dataTables_paginate .paginate_button.current, 
#Scoreboard .dataTables_paginate .paginate_button.current:hover { 
    background: var(--orange) !important; 
    border-color: var(--orange) !important; 
    color: var(--white) !important; 
} /* Tabs above the table (simple to match the screenshot vibe) */ 

#Scoreboard .nav-tabs .nav-link { 
    background-color: var(--green); 
    color: var(--white); 
    border: 1px solid var(--orange-200); /* light orange edge */ 
    border-radius: 8px; 
} 

#Scoreboard .nav-tabs .nav-link.active { 
    background-color: var(--orange) !important; 
    border-color: var(--orange) !important; } /* ==== Scoreboard: light panel + single-color headers ==== */ 

#Scoreboard { /* easy knobs */ --sb-header-bg: var(--green); /* try var(--orange) if you want an orange header */ 
    --sb-header-fg: var(--white); 
    --sb-panel-1: rgba(255,247,238,0.94); /* soft orange tint */ 
    --sb-panel-2: rgba(238,246,240,0.94); /* soft green tint */ 
    --sb-row-odd: var(--row-odd); /* very light row colors */ 
    --sb-row-even: var(--row-even); --sb-row-hover: var(--cream); 
    --sb-text: var(--black); 
} /* Light background so the whole block floats above the page art */

#Scoreboard > .col-md-12.small { 
    background: var(--panel-green); 
    border: 1px solid var(--border-dark-soft); 
    border-radius: 14px; 
    box-shadow: 0 8px 18px var(--shadow-medium); 
    padding: 16px; /* gentle breathing room without touching table widths */ 
} /* Header: one color, high contrast */ 

#Scoreboard table.dataTable thead th, 
#Scoreboard .dataTables_scrollHead th { 
    background: var(--header-orange) !important; 
    color: var(--sb-header-fg) !important; 
    border: 0 !important; text-shadow: none; 
} /* Make sort chevrons visible on the solid header */ 

#Scoreboard table.dataTable thead th:before, 
#Scoreboard table.dataTable thead th:after { 
    color: var(--sb-header-fg) !important; 
    opacity: 0.9; 
} /* Body text + gentle zebra */ 

#Scoreboard table.dataTable tbody td { color: var(--sb-text); } 

#Scoreboard table.dataTable tbody tr:nth-child(odd) { background: var(--sb-row-odd); } 

#Scoreboard table.dataTable tbody tr:nth-child(even) { background: var(--sb-row-even); } 

#Scoreboard table.dataTable tbody tr:hover { background: var(--sb-row-hover) !important; } /* Controls sit nicely on the panel */ 

#Scoreboard .dataTables_filter input, 
#Scoreboard .dataTables_length select { 
    background: var(--white); 
    color: var(--sb-text); 
    border: 1px solid var(--border-dark-mid); 
    border-radius: 8px; 
} /* Tabs simplified to match */ 

#Scoreboard .nav-tabs .nav-link { 
    background: var(--green); 
    color: var(--white); 
    border: 1px solid var(--white-30); 
    border-radius: 8px; 
} 

#Scoreboard .nav-tabs .nav-link.active { 
    background: var(--orange); 
    border-color: var(--orange); 
}

#xAboutSection {
  background: var(--gradient-section); /* same panel color */
  border: 1px solid var(--border-dark-soft);
  border-radius: 14px;
  box-shadow: 0 8px 18px var(--shadow-medium);
  color: var(--black);
  padding: 24px;
} 

#xAboutSection p {
    color: var(--white);
}


#fg-about-bigfoot { 
    position: absolute; 
    top: -20%; 
    right: 1%; 
    transform: translateX(50%) rotate(-30deg); 
    z-index: 10; 
    width: clamp(80px, 12vw, 100px); /* Adjusts fluidly */ 
    transition: all 0.3s ease-in-out; 
} 

#fg-about-bigfoot > img { 
    width: clamp(100px, 15vw, 160px); /* Adjusts fluidly */ 
} 

#fg-about-bigfoot:hover { 
    transform: translateX(45%) rotate(-30deg); 
}



#xRulesSection {
  position: relative;
  overflow: visible; /* allow the art to peek out */
}

/* Decorative image injected in foreground */
#xRulesSection::before {
  content: "";
  position: absolute;
  top: -90px;
  left: -25%;
  width: clamp(130px, 16vw, 350px);
  aspect-ratio: 1/1.05; /* keep shape without a fixed height */
  background: url("https://sea.pennacool.com/pennacool/pcl123/holiday/images/bigfoot_mascot_no_bg.png")
              center / contain no-repeat;
  transform: rotate(18deg);
  z-index: 2;           /* above the panel bg */
  pointer-events: none;
  filter: drop-shadow(0 8px 12px var(--shadow-drop-15));
}
/* Ensure the actual content sits above the panel bg but under the art if needed */
#xRulesSection > * { position: relative; z-index: 1; }

/* Breakpoints */
  /* or hide on phones:
  #xRulesSection::before { content: none; }
  */


/* Make sure Rules can host layered art */
#xRulesSection {
  position: relative;
  overflow: visible; /* let the art peek out */
  /* Z-index knobs for the decorative layers */
 /* set to 0 to put behind the section's content */
}

#xRulesSection strong {
    color: var(--white); /* or your preferred color */
}


/* Anchor the decoration to the scoreboard block */
#Scoreboard { position: relative; overflow: visible; }

/* Right-side product pack (foreground by default) */
#Scoreboard::after {
  content: "";
  position: absolute;
  top: -40px;                 /* peek above the panel edge */
  right: 25%;
  width: clamp(140px, 20vw, 150px);
  aspect-ratio: 1/1.1;
  background: url("https://sea.pennacool.com/pennacool/pcl123/holiday/images/bigfoot_pack_no_bg.png")
              center / contain no-repeat;
  transform: rotate(-16deg);
  z-index: 5;                 /* foreground */
  pointer-events: none;
  filter: drop-shadow(0 10px 14px var(--shadow-drop-18));
}


/* Tweak/hide on smaller screens */
@media (max-width: 992px) { #Scoreboard::after { right: 3%; top: -18px; width: 220px; } }
@media (max-width: 768px) { #Scoreboard::after { right: 5%; top: -12px; width: 170px; } }
@media (max-width: 600px) { #Scoreboard::after { content: none; } } /* hide on phones */

/* ========= reusable keyframes ========= */
@keyframes bob-wobble {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}

@keyframes rock-left {
  /* keep the base rotate and add a bob */
  0%, 100% { transform: rotate(16deg) translateY(0); }
  50%      { transform: rotate(22deg) translateY(-10px); }
}

@keyframes rock-right {
  0%, 100% { transform: rotate(-14deg) translateY(0); }
  50%      { transform: rotate(-20deg) translateY(-10px); }
}

/* ========= About mascot (child img animates; container transform untouched) ========= */
#fg-about-bigfoot > img {
  transform-origin: 50% 85%;
  animation: bob-wobble 6s ease-in-out infinite;
  will-change: transform;
}

/* subtle hover: pause bob + tiny pop (only on devices with hover) */
@media (hover:hover) and (pointer:fine) {
  #fg-about-bigfoot:hover > img {
    animation-play-state: paused;
    transform: translateY(0) rotate(0deg) scale(1.03);
    transition: transform .2s ease;
  }
}

#tablemonthlytable_info {
    color: var(--black);
}

/* About mascot */
#fg-about-bigfoot > img {
  transform-origin: 50% 85%;
  animation: bob-wobble 1.75s ease-in-out infinite; /* was 6s */
  will-change: transform;
}

/* Rules mascot */
#xRulesSection::before {
  transform-origin: 40% 80%;
  animation: rock-left 2s ease-in-out infinite; /* was 7.5s */
  will-change: transform;
  animation-delay: .1s;
}

/* Scoreboard pack */
#Scoreboard::after {
  transform-origin: 60% 90%;
  animation: rock-right 2s ease-in-out infinite; /* was 8.5s */
  will-change: transform;
  animation-delay: .6s;
}