/* ===== base font sizes and step scales ===== */
:root {
  /* base size */
  --v3-font-base: 1.25rem; /* 20px */

  /* 6-tier modular scale (start at 1.3 and step ~1.15–1.18) */
  --v3-scale-sm:   1.300; /* smallest unit */
  --v3-scale-base: 1.500; /* sm * ~1.15 */
  --v3-scale-md:   1.725; /* base * ~1.15 */
  --v3-scale-lg:   1.985; /* md * ~1.15 */
  --v3-scale-xl:   2.285; /* lg * ~1.15 */
  --v3-scale-xxl:  2.630; /* xl * ~1.15 */

  /* font weights */
  --v3-font-weight-sm: 400;   /* light */
  --v3-font-weight-md: 600;   /* normal */
  --v3-font-weight-lg: 700;   /* semi-bold */
  --v3-font-weight-xl: 800;   /* extra-bold */

  /* desktop scale (100%) */
  --type-scale: 1; /* global multiplier */
}

/* ===== derived sizes (use in components) ===== */
:root {
  /* order: sm / base / md / lg / xl / xxl */
  --v3-font-size-sm:   calc(var(--v3-font-base) * var(--v3-scale-sm)   * var(--type-scale));  /* sm */
  --v3-font-size-base: calc(var(--v3-font-base) * var(--v3-scale-base) * var(--type-scale));  /* base */
  --v3-font-size-md:   calc(var(--v3-font-base) * var(--v3-scale-md)   * var(--type-scale));  /* md */
  --v3-font-size-lg:   calc(var(--v3-font-base) * var(--v3-scale-lg)   * var(--type-scale));  /* lg */
  --v3-font-size-xl:   calc(var(--v3-font-base) * var(--v3-scale-xl)   * var(--type-scale));  /* xl */
  --v3-font-size-xxl:  calc(var(--v3-font-base) * var(--v3-scale-xxl)  * var(--type-scale));  /* xxl */
}


/* ===== Breakpoints ===== */
@media (max-width: 599px) {
  /* phones: shrink everything */
  :root { --type-scale: 0.75; }
}

@media (min-width: 600px) and (max-width: 1023px) {
  /* tablets: slight shrink */
  :root { --type-scale: 0.80; }
}

@media (min-width: 1024px) {
  /* desktop font scale set to 100% */
  :root { --type-scale: .9; }
}


/* base color palette variables */
:root {
  /* Primary (Green) */
  --v3-color-primary: #147B64;
  --v3-color-primary-light: #7db0a2;
  --v3-color-primary-dark: #0f4a3c;
  --v3-color-primary-dark-alt: #0b3027;
  --v3-color-primary-darkest: #0f4b3c;

  /* Secondary (Blue) */
  --v3-color-secondary: #184672;
  --v3-color-secondary-light: #0276E3;

  /* Accents */
  --v3-color-accent-gold: #E3BA02;
  --v3-color-accent-grey-light: #eff0f2;   /* container backgrounds, offwhites */
  --v3-color-accent-grey-mid: #d0d6e2;     /* cool mid grey */
  --v3-color-accent-grey-mid-alt: #bbbbbb; /* neutral mid grey (optional) */
  --v3-color-accent-grey-dark: #37383f;    /* text on light backgrounds */
  --v3-color-accent-black: #000000;
  --v3-color-accent-white: #ffffff;
  --v3-background-overlay: rgba(255,255,255,0.05); /* semi-transparent overlay */

  /* Feedback / Status */
  --v3-color-error-dark: #d54e4d;
  --v3-color-error-light: #eccacb;
  --v3-color-success-dark: #39ad63;
  --v3-color-success-light: #b4dcbe;

  /* Gradient Variables */
  --v3-bg-primary-gradient: linear-gradient(90deg, rgba(10, 51, 44, 1) 0%, rgba(15, 80, 64, 1) 50%, rgba(19, 99, 66, 1) 100%);
  --v3-bg-primary-dark-gradient: linear-gradient(180deg, #0b3027 0%, #06201a 100%);
  --v3-bg-accent-gold-gradient: linear-gradient(90deg, rgba(139, 111, 1, 1) 0%, rgba(179, 143, 2, 1) 50%, rgba(227, 186, 2, 1) 100%);
}

/* Color utilities */
.color-primary { color: var(--v3-color-primary); }
.color-primary-light { color: var(--v3-color-primary-light); }
.color-primary-dark { color: var(--v3-color-primary-dark); }
.color-primary-dark-alt { color: var(--v3-color-primary-dark-alt); }
.color-primary-darkest { color: var(--v3-color-primary-darkest); }
.color-secondary { color: var(--v3-color-secondary); }
.color-secondary-light { color: var(--v3-color-secondary-light); }
.color-accent-gold { color: var(--v3-color-accent-gold); }
.color-accent-grey-light { color: var(--v3-color-accent-grey-light); }
.color-accent-grey-mid { color: var(--v3-color-accent-grey-mid); }
.color-accent-grey-mid-alt { color: var(--v3-color-accent-grey-mid-alt); }
.color-accent-grey-dark { color: var(--v3-color-accent-grey-dark); }
.color-accent-black { color: var(--v3-color-accent-black); }
.color-accent-white { color: var(--v3-color-accent-white); }
.color-error-dark { color: var(--v3-color-error-dark); }
.color-error-light { color: var(--v3-color-error-light); }
.color-success-dark { color: var(--v3-color-success-dark); }
.color-success-light { color: var(--v3-color-success-light); }

/* Background color utilities */
.bg-primary { background-color: var(--v3-color-primary); }
.bg-primary-light { background-color: var(--v3-color-primary-light); }
.bg-primary-dark { background-color: var(--v3-color-primary-dark); }
.bg-primary-dark-alt { background-color: var(--v3-color-primary-dark-alt); }
.bg-primary-darkest { background-color: var(--v3-color-primary-darkest); }
.bg-secondary { background-color: var(--v3-color-secondary); }
.bg-secondary-light { background-color: var(--v3-color-secondary-light); }
.bg-accent-gold { background-color: var(--v3-color-accent-gold); }
.bg-accent-grey-light { background-color: var(--v3-color-accent-grey-light); }
.bg-accent-grey-mid { background-color: var(--v3-color-accent-grey-mid); }
.bg-accent-grey-mid-alt { background-color: var(--v3-color-accent-grey-mid-alt); }
.bg-accent-grey-dark { background-color: var(--v3-color-accent-grey-dark); }
.bg-accent-black { background-color: var(--v3-color-accent-black); }
.bg-accent-white { background-color: var(--v3-color-accent-white); }
.bg-error-dark { background-color: var(--v3-color-error-dark); }
.bg-error-light { background-color: var(--v3-color-error-light); }
.bg-success-dark { background-color: var(--v3-color-success-dark); }
.bg-success-light { background-color: var(--v3-color-success-light); }
.bg-overlay { background-color: var(--v3-background-overlay); }

/* Gradient background utilities */
.bg-primary-gradient { background: var(--v3-bg-primary-gradient); }
.bg-accent-gold-gradient { background: var(--v3-bg-accent-gold-gradient); }
.bg-primary-dark-gradient { background: var(--v3-bg-primary-dark-gradient); }

/* Flex utilities */
.flex-justify-center { justify-content: center; }
.flex-justify-start { justify-content: flex-start; }
.flex-justify-end { justify-content: flex-end; }
.flex-justify-space-between { justify-content: space-between; }
.flex-justify-space-around { justify-content: space-around; }
.flex-justify-space-evenly { justify-content: space-evenly; }
.flex-align-items-center { align-items: center; }
.flex-align-items-start { align-items: flex-start; }
.flex-align-items-end { align-items: flex-end; }
.flex-align-items-baseline { align-items: baseline; }
.flex-align-items-stretch { align-items: stretch; }
.flex-align-content-center { align-content: center; }
.flex-align-content-start { align-content: flex-start; }
.flex-align-content-end { align-content: flex-end; }
.flex-align-content-between { align-content: space-between; }
.flex-align-content-around { align-content: space-around; }
.flex-align-content-evenly { align-content: space-evenly; }
.flex-align-content-stretch { align-content: stretch; }
.flex-align-self-auto { align-self: auto; }
.flex-align-self-start { align-self: flex-start; }

/* Universal flex classes - apply across all device types */
.flex-row-all { display: flex; flex-direction: row; }
.flex-column-all { display: flex; flex-direction: column; }

/* Desktop / large screens (1024px+) */
@media (min-width: 1024px) {
  .flex-row-desktop { display: flex; flex-direction: row; }
  .flex-column-desktop { display: flex; flex-direction: column; }
  .flex-row-reverse-desktop { display: flex; flex-direction: row-reverse; }
  .flex-column-reverse-desktop { display: flex; flex-direction: column-reverse; }
}

/* Tablets / iPads (600px - 1023px) */
@media (min-width: 600px) and (max-width: 1023px) {
  .flex-row-tablet {display: flex;flex-direction: row;}
  .flex-column-tablet {display: flex;flex-direction: column;}
  .flex-row-reverse-tablet {display: flex;flex-direction: row-reverse;}
  .flex-column-reverse-tablet {display: flex;flex-direction: column-reverse;}
}

/* Phones / small screens (max 599px) */
@media (max-width: 599px) {
  .flex-row-phone {display: flex;flex-direction: row;}
  .flex-column-phone {display: flex;flex-direction: column;}
  .flex-row-reverse-phone {display: flex;flex-direction: row-reverse;}
  .flex-column-reverse-phone {display: flex;flex-direction: column-reverse;}
}

/* Universal width utilities - work across all devices */
.width-sm-all { width: 25%; }
.width-md-all { width: 50%; }
.width-lg-all { width: 75%; }
.width-xl-all { width: 90%; }
.width-full-all { width: 100%; }
.width-min-all { width: min-content; }
.width-max-all { width: max-content; }

/* Universal margin utilities - work across all devices */
.margin-sm-all { margin: var(--margin-sm); }
.margin-md-all { margin: var(--margin-md); }
.margin-lg-all { margin: var(--margin-lg); }
.margin-xl-all { margin: var(--margin-xl); }

/* Universal padding utilities - work across all devices */
.padding-sm-all { padding: var(--padding-sm); }
.padding-md-all { padding: var(--padding-md); }
.padding-lg-all { padding: var(--padding-lg); }
.padding-xl-all { padding: var(--padding-xl); }

/* Desktop-specific width utilities (1024px+) */
@media (min-width: 1024px) {
  .width-sm-desktop { width: 25%; }
  .width-md-desktop { width: 50%; }
  .width-lg-desktop { width: 75%; }
  .width-xl-desktop { width: 90%; }
  .width-full-desktop { width: 100%; }
  .width-min-desktop { width: min-content; }
  .width-max-desktop { width: max-content; }
}

/* Tablet-specific width utilities (600px - 1023px) */
@media (min-width: 600px) and (max-width: 1023px) {
  .width-sm-tablet { width: 25%; }
  .width-md-tablet { width: 50%; }
  .width-lg-tablet { width: 75%; }
  .width-xl-tablet { width: 90%; }
  .width-full-tablet { width: 100%; }
  .width-min-tablet { width: min-content; }
  .width-max-tablet { width: max-content; }
}

/* Phone-specific width utilities (max 599px) */
@media (max-width: 599px) {
  .width-sm-phone { width: 25%; }
  .width-md-phone { width: 50%; }
  .width-lg-phone { width: 75%; }
  .width-xl-phone { width: 90%; }
  .width-full-phone { width: 100%; }
  .width-min-phone { width: min-content; }
  .width-max-phone { width: max-content; }
}

/* ===== MAX-WIDTH UTILITIES ===== */
/* Universal max-width utilities - work across all devices */
.max-width-sm-all { max-width: 400px; }
.max-width-md-all { max-width: 600px; }
.max-width-lg-all { max-width: 900px; }
.max-width-xl-all { max-width: 1200px; }

/* Desktop-specific max-width utilities (1024px+) */
@media (min-width: 1024px) {
  .max-width-sm-desktop { max-width: 400px; }
  .max-width-md-desktop { max-width: 600px; }
  .max-width-lg-desktop { max-width: 900px; }
  .max-width-xl-desktop { max-width: 1200px; }
}

/* Tablet-specific max-width utilities (600px - 1023px) */
@media (min-width: 600px) and (max-width: 1023px) {
  .max-width-sm-tablet { max-width: 400px; }
  .max-width-md-tablet { max-width: 600px; }
  .max-width-lg-tablet { max-width: 900px; }
  .max-width-xl-tablet { max-width: 1200px; }
}

/* Phone-specific max-width utilities (max 599px) */
@media (max-width: 599px) {
  .max-width-sm-phone { max-width: 300px; }
  .max-width-md-phone { max-width: 400px; }
  .max-width-lg-phone { max-width: 500px; }
  .max-width-xl-phone { max-width: 600px; }
}

/* margin utilities - responsive margin system */
/* Margin size variables for easy maintenance */
:root {
  --margin-sm: 0.5rem;  /* 8px */
  --margin-md: 1rem;    /* 16px */
  --margin-lg: 1.5rem;  /* 24px */
  --margin-xl: 3rem;    /* 48px */
  --margin-xxl: 6rem;   /* 96px */
  
  /* Padding variables (reuse margin values for consistency) */
  --padding-sm: 0.5rem;  /* 8px */
  --padding-md: 1rem;    /* 16px */
  --padding-lg: 1.5rem;  /* 24px */
  --padding-xl: 3rem;    /* 48px */
  --padding-xxl: 6rem;   /* 96px */
  
  /* Border radius variables copied from variables.css */
  --radius-sm: 0.1875em;
  --radius-md: 0.375em;
  --radius-base: 0.5625em;
  --radius-lg: 0.75em;
  --radius-xl: 1em;
  --radius-xxl: 2em;
}

/* Desktop-specific margin utilities (1024px+) */
.margin-auto-all { margin: auto; }
.margin-none-all { margin: 0; }

@media (min-width: 1024px) {
  .margin-auto-desktop { margin: auto; }
  .margin-sm-desktop { margin: var(--margin-sm); }
  .margin-md-desktop { margin: var(--margin-md); }
  .margin-lg-desktop { margin: var(--margin-lg); }
  .margin-xl-desktop { margin: var(--margin-xl); }
  .margin-xxl-desktop { margin: var(--margin-xxl); }
  .margin-none-desktop { margin: 0!important; }
}

/* Tablet-specific margin utilities (600px - 1023px) */
@media (min-width: 600px) and (max-width: 1023px) {
  .margin-auto-tablet { margin: auto; }
  .margin-sm-tablet { margin: var(--margin-sm); }
  .margin-md-tablet { margin: var(--margin-md); }
  .margin-lg-tablet { margin: var(--margin-lg); }
  .margin-xl-tablet { margin: var(--margin-xl); }
  .margin-xxl-tablet { margin: var(--margin-xxl); }
  .margin-none-tablet { margin: 0; }
}

/* Phone-specific margin utilities (max 599px) */
@media (max-width: 599px) {
  .margin-auto-phone { margin: auto; }
  .margin-x-auto-phone { margin-left: auto; margin-right: auto; }
  .margin-y-auto-phone { margin-top: auto; margin-bottom: auto; }
  .margin-sm-phone { margin: var(--margin-sm); }
  .margin-md-phone { margin: var(--margin-md); }
  .margin-lg-phone { margin: var(--margin-lg); }
  .margin-xl-phone { margin: var(--margin-xl); }
  .margin-xxl-phone { margin: var(--margin-xxl); }
  .margin-none-phone { margin: 0; }
}

/* Gap utilities */
.gap-xs-all { gap: var(--margin-xs); }
.gap-sm-all { gap: var(--margin-sm); }
.gap-md-all { gap: var(--margin-md); }
.gap-lg-all { gap: var(--margin-lg); }
.gap-xl-all { gap: var(--margin-xl); }
.gap-xxl-all { gap: var(--margin-xxl); }

/* Responsive gap utilities - Desktop */
@media (min-width: 1024px) {
  .gap-sm-desktop { gap: var(--margin-sm); }
  .gap-md-desktop { gap: var(--margin-md); }
  .gap-lg-desktop { gap: var(--margin-lg); }
  .gap-xl-desktop { gap: var(--margin-xl); }
  .gap-xxl-desktop { gap: var(--margin-xxl); }
}

/* Responsive gap utilities - Tablet */
@media (min-width: 600px) and (max-width: 1023px) {
  .gap-sm-tablet { gap: var(--margin-sm); }
  .gap-md-tablet { gap: var(--margin-md); }
  .gap-lg-tablet { gap: var(--margin-lg); }
  .gap-xl-tablet { gap: var(--margin-xl); }
  .gap-xxl-tablet { gap: var(--margin-xxl); }
}

/* Responsive gap utilities - Phone */
@media (max-width: 599px) {
  .gap-sm-phone { gap: var(--margin-sm); }
  .gap-md-phone { gap: var(--margin-md); }
  .gap-lg-phone { gap: var(--margin-lg); }
  .gap-xl-phone { gap: var(--margin-xl); }
  .gap-xxl-phone { gap: var(--margin-xxl); }
}

/* Text utilities */
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}

/* Responsive text alignment utilities */
@media (min-width: 1024px) {
  .text-center-desktop { text-align: center; }
  .text-left-desktop { text-align: left; }
  .text-right-desktop { text-align: right; }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .text-center-tablet { text-align: center; }
  .text-left-tablet { text-align: left; }
  .text-right-tablet { text-align: right; }
}

@media (max-width: 599px) {
  .text-center-phone { text-align: center; }
  .text-left-phone { text-align: left; }
  .text-right-phone { text-align: right; }
}

/* Font weight utilities */
.font-weight-sm { font-weight: var(--v3-font-weight-sm); }
.font-weight-md { font-weight: var(--v3-font-weight-md); }
.font-weight-lg { font-weight: var(--v3-font-weight-lg); }
.font-weight-xl { font-weight: var(--v3-font-weight-xl); }

/* Font size utilities */
.font-size-sm { font-size: var(--v3-font-size-sm); }
.font-size-base { font-size: var(--v3-font-size-base); }
.font-size-md { font-size: var(--v3-font-size-md); }
.font-size-lg { font-size: var(--v3-font-size-lg); }
.font-size-xl { font-size: var(--v3-font-size-xl); }
.font-size-xxl { font-size: var(--v3-font-size-xxl); }

/* ===== RESPONSIVE ROTATION CLASSES ===== */
.rotate-left-all {transform: rotate(-5deg);}
.rotate-right-all {transform: rotate(5deg);}

/* Desktop Rotation Classes */
@media (min-width: 1024px) {
  .rotate-left-desktop { transform: rotate(-3deg); }
  .rotate-right-desktop { transform: rotate(3deg); }
}

/* Tablet Rotation Classes */
@media (min-width: 600px) and (max-width: 1023px) {
  .rotate-left-tablet { transform: rotate(-3deg); }
  .rotate-right-tablet { transform: rotate(3deg); }
}

/* Phone Rotation Classes */
@media (max-width: 599px) {
  .rotate-left-phone { transform: rotate(-3deg); }
  .rotate-right-phone { transform: rotate(3deg); }
}

/* Shadow system */
:root {
  --shadow-depth-none: 0px;
  --shadow-depth-sm: 8px;
  --shadow-depth-md: 12px;
  --shadow-depth-lg: 16px;
  --shadow-depth-xl: 20px;
  --shadow-depth-xxl: 40px;
}

/* Shadow utilities - color-size format */
.shadow-white-none, .shadow-white-sm, .shadow-white-md, .shadow-white-lg, .shadow-white-xl, .shadow-white-xxl,
.shadow-gold-none, .shadow-gold-sm, .shadow-gold-md, .shadow-gold-lg, .shadow-gold-xl, .shadow-gold-xxl,
.shadow-green-none, .shadow-green-sm, .shadow-green-md, .shadow-green-lg, .shadow-green-xl, .shadow-green-xxl,
.shadow-green-alt-none, .shadow-green-alt-sm, .shadow-green-alt-md, .shadow-green-alt-lg, .shadow-green-alt-xl, .shadow-green-alt-xxl,
.shadow-red-none, .shadow-red-sm, .shadow-red-md, .shadow-red-lg, .shadow-red-xl, .shadow-red-xxl {
  box-sizing: border-box;
  border: solid #0000;
  border-width: 0 var(--d) var(--d) 0;
  clip-path: polygon(0 0, calc(100% - var(--d)) 0, 100% var(--d), 100% 100%, var(--d) 100%, 0 calc(100% - var(--d)));
}

/* White shadows */
.shadow-white-none { --d: var(--shadow-depth-none); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #ddd 37.5%, #ccc 0 75%, #fff 0) border-box #fff; }
.shadow-white-sm { --d: var(--shadow-depth-sm); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #ddd 37.5%, #ccc 0 75%, #fff 0) border-box #fff; }
.shadow-white-md { --d: var(--shadow-depth-md); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #ddd 37.5%, #ccc 0 75%, #fff 0) border-box #fff; }
.shadow-white-lg { --d: var(--shadow-depth-lg); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #ddd 37.5%, #ccc 0 75%, #fff 0) border-box #fff; }
.shadow-white-xl { --d: var(--shadow-depth-xl); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #ddd 37.5%, #ccc 0 75%, #fff 0) border-box #fff; }
.shadow-white-xxl { --d: var(--shadow-depth-xxl); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #ddd 37.5%, #ccc 0 75%, #fff 0) border-box #fff; }

/* Gold shadows */
.shadow-gold-none { --d: var(--shadow-depth-none); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #E3BA02 37.5%, #A78B01 0 75%, #F4D633 0) border-box #E3BA02; }
.shadow-gold-sm { --d: var(--shadow-depth-sm); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #E3BA02 37.5%, #A78B01 0 75%, #F4D633 0) border-box #E3BA02; }
.shadow-gold-md { --d: var(--shadow-depth-md); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #E3BA02 37.5%, #A78B01 0 75%, #F4D633 0) border-box #E3BA02; }
.shadow-gold-lg { --d: var(--shadow-depth-lg); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #E3BA02 37.5%, #A78B01 0 75%, #F4D633 0) border-box #E3BA02; }
.shadow-gold-xl { --d: var(--shadow-depth-xl); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #E3BA02 37.5%, #A78B01 0 75%, #F4D633 0) border-box #E3BA02; }
.shadow-gold-xxl { --d: var(--shadow-depth-xxl); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #E3BA02 37.5%, #A78B01 0 75%, #F4D633 0) border-box #E3BA02; }

/* Green shadows */
.shadow-green-none { --d: var(--shadow-depth-none); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #0004 37.5%, #0008 0 75%, #0000 0) border-box #106552; }
.shadow-green-sm { --d: var(--shadow-depth-sm); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #0004 37.5%, #0008 0 75%, #0000 0) border-box #106552; }

.shadow-green-md {background: linear-gradient(90deg, rgba(46, 122, 105, 1) 0%, rgba(64, 155, 124, 1) 50%, rgba(110, 200, 95, 1) 100%); border: 4px solid #276959; padding: 10px;}

/* replacing shadow-green-md with a modern gradient
.shadow-green-md { --d: var(--shadow-depth-md); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #0004 37.5%, #0008 0 75%, #0000 0) border-box #106552; }
*/
.shadow-green-lg { --d: var(--shadow-depth-lg); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #0004 37.5%, #0008 0 75%, #0000 0) border-box #106552; }
.shadow-green-xl { --d: var(--shadow-depth-xl); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #0004 37.5%, #0008 0 75%, #0000 0) border-box #106552; }
.shadow-green-xxl { --d: var(--shadow-depth-xxl); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #0004 37.5%, #0008 0 75%, #0000 0) border-box #106552; }

/* Green-alt shadows */
.shadow-green-alt-none { --d: var(--shadow-depth-none); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #69968a 37.5%, #467266 0 75%, #7fb1a2 0) border-box #fff; }
.shadow-green-alt-sm { --d: var(--shadow-depth-sm); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #69968a 37.5%, #467266 0 75%, #7fb1a2 0) border-box #fff; }
.shadow-green-alt-md { --d: var(--shadow-depth-md); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #69968a 37.5%, #467266 0 75%, #7fb1a2 0) border-box #fff; }
.shadow-green-alt-lg { --d: var(--shadow-depth-lg); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #69968a 37.5%, #467266 0 75%, #7fb1a2 0) border-box #fff; }
.shadow-green-alt-xl { --d: var(--shadow-depth-xl); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #69968a 37.5%, #467266 0 75%, #7fb1a2 0) border-box #fff; }
.shadow-green-alt-xxl { --d: var(--shadow-depth-xxl); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #69968a 37.5%, #467266 0 75%, #7fb1a2 0) border-box #fff; }

/* Red shadows */
.shadow-red-none { --d: var(--shadow-depth-none); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #a73b3a 37.5%, #671919 0 75%, #d54e4d 0) border-box #fff; }
.shadow-red-sm { --d: var(--shadow-depth-sm); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #a73b3a 37.5%, #671919 0 75%, #d54e4d 0) border-box #fff; }
.shadow-red-md { --d: var(--shadow-depth-md); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #a73b3a 37.5%, #671919 0 75%, #d54e4d 0) border-box #fff; }
.shadow-red-lg { --d: var(--shadow-depth-lg); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #a73b3a 37.5%, #671919 0 75%, #d54e4d 0) border-box #fff; }
.shadow-red-xl { --d: var(--shadow-depth-xl); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #a73b3a 37.5%, #671919 0 75%, #d54e4d 0) border-box #fff; }
.shadow-red-xxl { --d: var(--shadow-depth-xxl); background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #a73b3a 37.5%, #671919 0 75%, #d54e4d 0) border-box #fff; }

/* Green gradient shadow */
.shadow-green-gradient {
  box-shadow: 
    rgba(46, 170, 95, 0.4) 5px 5px,
    rgba(46, 170, 95, 0.3) 10px 10px,
    rgba(46, 170, 95, 0.2) 15px 15px,
    rgba(46, 170, 95, 0.1) 20px 20px,
    rgba(46, 170, 95, 0.05) 25px 25px;
}

/* Accent gold gradient shadow */
.shadow-accent-gold-gradient {
  box-shadow: 
    rgba(227, 186, 4, 0.4) 5px 5px,
    rgba(244, 214, 51, 0.3) 10px 10px,
    rgba(227, 186, 4, 0.2) 15px 15px,
    rgba(244, 214, 51, 0.1) 20px 20px,
    rgba(227, 186, 4, 0.05) 25px 25px;
}

/* Black gradient shadow */
.shadow-black-gradient {
  box-shadow: 
    rgba(0, 0, 0, 0.4) 5px 5px,
    rgba(34, 34, 34, 0.3) 10px 10px,
    rgba(17, 17, 17, 0.2) 15px 15px,
    rgba(34, 34, 34, 0.1) 20px 20px,
    rgba(0, 0, 0, 0.05) 25px 25px;
}

/* Border radius for bottom-left corner buttons */
.nav-menu-item.bottom-left-radius {
  border-bottom-left-radius: 24px;
}

/* Active state for bottom-left shadow buttons */
.nav-menu-item.shadow-gold-md-bottom-left.active {
  background: conic-gradient(at calc(var(--d)) calc(var(--d)), #E3BA02 37.5%, #A78B01 0 75%, #F4D633 0) border-box #E3BA02;
  color: var(--v3-color-accent-grey-dark) !important;
}


/* ===== BASE STYLES ===== */
::-webkit-scrollbar {
  display: none;
}
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Nunito', "Open Sans", sans-serif;
}
body {
  font-size: var(--v3-font-size-sm);
  font-family: 'Nunito', "Open Sans", sans-serif;
  color: var(--v3-color-primary);
  position: relative;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  cursor: default;
  background: var(--v3-bg-primary-gradient);
}
a {
  text-decoration: none;
}

input {
  transition: .1s ease-in-out;
}

/* Input utilities */
input:focus {
  border: 4px solid transparent;
  background: rgba(0, 0, 0, 0.2);
  outline: none;
  border-radius: 4px;
}

/* Buttons and utilities */
.button {
  transition: .05s ease-in-out;
  cursor: pointer;
  border-radius: 10px;
}

.button.button-std {
  display: block;
  padding: 8px 18px;
}
.button:hover {
  background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #0276e3 37.5%, #025bb2 0 75%, #66b3f4 0) border-box #0276e3;
  transform: translate(2px, 2px);
  transition: .05s ease-in-out;
  color: var(--v3-color-accent-white);
}
.button:hover * {
  color: var(--v3-color-accent-white);
}

/* Button icon colors and sizing */
.button-icon {
  width: 40px;
  height: 40px;
  min-width: 32px;
  min-height: 32px;
}

#freePlaySettings, #rankedPlaySettings {
  margin-bottom: 2rem;
}
#freePlayBtn .button-icon {
  color: #E3BA02; /* Original happy face yellow/gold */
}

#rankedPlayBtn .button-icon {
  color: #d54e4d; /* Original sad face red */
}

#freePlayBtn, #rankedPlayBtn {
  cursor: pointer;
  border-bottom-right-radius: 0;
}

.button:hover .button-icon {
  color: var(--v3-color-accent-white); /* White on hover */
}

/* Game UI Icons - Score and Timer */
.score-section {
  display: flex;
  align-items: center;
  gap: 4px;
}

.timer-section {
  display: flex;
  align-items: center;
  gap: 4px;
}

.score-icon {
  width: 28px;
  height: 28px;
  color: #E3BA02; /* Gold color for medal */
  flex-shrink: 0;
}

.timer-icon {
  width: 24px;
  height: 24px;
  color: #E3BA02; /* Gold color for clock */
  flex-shrink: 0;
}

/* Score, Timer, and Settings container styling */
#score-container,
#timer-container,
#settings-container {
  min-width: auto;
}

.settings-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--v3-color-accent-gold);
}

/* Settings icon hover state */
#settings-container:hover .settings-icon {
  color: var(--v3-color-accent-white);
}

/* Disable hover effects for score and timer containers since they're not clickable */
#score-container,
#timer-container {
  transition: none !important;
  padding: 8px 12px;
}

/* Settings container gets padding but keeps hover effects */
#settings-container {
  padding: 8px 12px;
}

#score-container:hover,
#timer-container:hover {
  background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #ddd 37.5%, #ccc 0 75%, #fff 0) border-box #fff;
  transform: none;
}

/* Prevent score and timer container hover from affecting child elements */
#score-container:hover span,
#timer-container:hover span {
  color: var(--v3-color-accent-grey-dark);
}

/* Override uppercase text-transform for timer container */
#timer-container {
  text-transform: lowercase;
}



/* Hide nav menu on mobile in horsplay game mode only */
body.horsplay-game-mode .nav-menu {
  display: none;
}

/* Settings modal positioning and display */
#settingsModal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  min-height: 400px;
  width: 90% !important;
  max-width: 600px !important;
  height: 100% !important;
  max-height: 95vh; /* Increased to 95% of viewport for more space */
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrolling */
  padding: 2rem !important;
  padding-bottom: 3rem; /* Increased bottom padding for dropdown clearance */
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-depth-lg) !important;
  background: var(--v3-bg-accent-grey-dark) !important;
  z-index: 1001 !important;
}

#inGameSettingsModal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90% !important;
  max-width: 400px !important;
  height: auto !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-depth-lg) !important;
  background: var(--v3-bg-accent-grey-dark) !important;
  z-index: 1001 !important;
}


body.horsplay-game-mode .nav-menu.mobile-visible {
  display: flex;
  z-index: 2000; /* Ensure nav menu appears above settings overlay (z-index: 1000) */
}


#scoreBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; /* Small gap between score and timer sections */
  text-transform: lowercase;
}

  /* Hide default dropdown arrow since we're using inline SVG */
  .optn-select::after {
    display: none !important;
  }

  /* Dropdown arrow styling */
  .dropdown-arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .no-highlight {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .optn-select {
    padding: 12px 24px;
  }

  .optn-select.disabled {
    pointer-events: none;
    color: var(--v3-color-accent-white);
    --d: var(--shadow-depth-md);
    background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #a73b3a 37.5%, #671919 0 75%, #d54e4d 0) border-box #fff;
  }

  /* Rotate arrow when dropdown is open */
  .custom-select.open .dropdown-arrow {
    transform: rotate(180deg);
  }

  .custom-select.open .optn-select {
    background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #0276e3 37.5%, #025bb2 0 75%, #66b3f4 0) border-box #0276e3;
    color: var(--v3-color-accent-white);
  }

  /* Custom dropdown styles */
  .custom-select {
    position: relative;
  }

  .custom-select .options {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1000;
    padding-bottom: 1rem; /* Add bottom padding so last option isn't cut off */
  }

  .custom-select.open .options {
    display: block;
    width: calc(100% - 4px);
    margin: -10px 0 0 0;
  }

  .custom-select .option {
    cursor: pointer;
    font-size: inherit;
    transition: .05s ease-in-out;
    margin-top: -6px;
  }

  .custom-select .option:hover {
    transform: translate(2px, 2px);
    transition: .05s ease-in-out;
    background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #0276e3 37.5%, #025bb2 0 75%, #66b3f4 0) border-box #0276e3;
    color: var(--v3-color-accent-white);
  }

  .custom-select .option:hover + .label {
    transform: translate(2px, 2px);
    transition: .05s ease-in-out;
  }

  .custom-select .options > .option:first-child,
  .custom-select .options > .option-flex:first-child .option {
    margin-top: 6px;
  }

  /* Login button icon color */
  #logInBtn .button-icon {
    color: var(--v3-color-error-dark);
  }

  /* Login button icon hover color */
  #logInBtn:hover .button-icon {
    color: white;
  }

/* Title containers */
.title {
  font-size: 36px;
  padding: 6px 12px;
}

/* Card containers */
.card {
  padding: 0 0 1em;
  max-width: 340px;
}

/* Rule Cards for BE A HERO section */
.rule-card {
  position: relative;
  padding: 2rem;
  background: var(--v3-background-overlay);
  border-radius: var(--radius-xl);
  border: 3px solid var(--v3-color-primary);
  transition: .15s ease-in-out;
  overflow: visible;
}

.rule-card:hover {
  transform: translate(3px, 3px);
  background: rgba(0,0,0,0.3);
  border-color: var(--v3-color-accent-gold);
}

.rule-number-badge {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--v3-bg-accent-gold-gradient);
  border: 4px solid var(--v3-color-primary-dark);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 10;
}

.rule-title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rule-description {
  line-height: 1.5;
}

/* Responsive rule cards - only custom transforms */
@media (min-width: 1024px) {
  /* Stagger the cards slightly */
  .rule-card:nth-child(1) { transform: rotate(-2deg); }
  .rule-card:nth-child(2) { transform: rotate(1deg); margin-top: 20px; }
  .rule-card:nth-child(3) { transform: rotate(-1deg); }
  
  .rule-card:hover {
    transform: rotate(0deg) translate(3px, 3px);
  }
}

/* Scores page stat box hover effects - straighten rotation on hover */
.rotate-left-desktop:hover,
.rotate-right-desktop:hover {
  transform: rotate(0deg) !important;
  transition: transform .15s ease-in-out;
}

@media (min-width: 600px) and (max-width: 1023px) {
  .rotate-left-tablet:hover,
  .rotate-right-tablet:hover {
    transform: rotate(0deg) !important;
    transition: transform .15s ease-in-out;
  }
}

@media (max-width: 599px) {
  .rotate-left-phone:hover,
  .rotate-right-phone:hover {
    transform: rotate(0deg) !important;
    transition: transform .15s ease-in-out;
  }
}

/* Data/Detail item containers */
.data-item {
  background: transparent;
  padding: var(--margin-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin: 0;
  width: 100%;
  transition: .1s ease-in-out;
  z-index: 10;
}
#profile .data-item:hover {
  background: transparent;
}
.data-item:hover {
  transform: translate(2px, 2px);
  transition: .1s ease-in-out;
  background: rgba(0,0,0,0.25);
}
.data-item:hover:not(.data-item-disabled) p {
  color: var(--v3-color-accent-gold);
}
/* Disabled data items - no hover background but keep transform */
.data-item.data-item-disabled:hover {
  transform: translate(2px, 2px);
  transition: .1s ease-in-out;
  background: transparent;
}
#index-hors-one {
  background: linear-gradient(90deg, rgba(46, 122, 105, 1) 0%, rgba(64, 155, 124, 1) 50%, rgba(110, 200, 95, 1) 100%);
  border: 4px solid #276959;
  padding: 10px;
}

#index-hors-plus {
  background: linear-gradient(90deg, rgba(15, 45, 75, 1) 0%, /* softened navy with teal undertone */ rgba(35, 95, 165, 1) 50%, /* vibrant royal blue */ rgba(0, 200, 220, 1) 100% /* aqua glow */);
  border: 4px solid #1a4a85;
  padding: 10px;
}
#index-hors-max {
  background: linear-gradient(90deg, rgba(45, 15, 60, 1) 0%, /* deep plum */ rgba(100, 40, 160, 1) 50%, /* vibrant violet */ rgba(180, 80, 200, 1) 100% /* magenta/lavender glow */);
  border: 4px solid #3a0d55;
  padding: 10px;
}

/* Navigation Menu Styles */
.nav-menu {
    display: flex;
  justify-content: center;
  margin: 2rem auto;
  width: fit-content;
  overflow: visible;
  position: relative;
  z-index: 100;
}


.nav-menu-item {
  padding: 12px 24px;
  transition: .05s ease-in-out;
  z-index: 1;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
  /* Remove gaps between menu items to create seamless appearance */
  .nav-menu-item:not(:first-child) {
    margin-left: -11px;
    z-index: 10;
  }

  /* Phone-specific adjustments */
  @media only screen and (max-width: 599px) {
    .nav-menu-item:not(:first-child) {
      margin-left: -15px;
    }
    
    /* Smaller shadows for settings, score, timer containers on phone */
    #settings-container.shadow-white-md,
    #score-container.shadow-white-md,
    #timer-container.shadow-white-md {
      --d: var(--shadow-depth-sm);
    }

    #settings-container {
      margin-left: -16px;
    }
  }
.nav-menu-item:hover {
  background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #0276e3 37.5%, #025bb2 0 75%, #66b3f4 0) border-box #0276e3;
  transform: translate(2px, 2px);
  z-index: 10;
  transition: .05s ease-in-out;
  color: var(--v3-color-accent-white) !important;
}
.nav-menu-item:first-child {
  border-top-left-radius: 24px;
}
/* Make dropdown nav items fully clickable */
.nav-menu-item.nav-dropdown {
  cursor: pointer;
}
/* Active/selected state */
.nav-menu-item.active {
  background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #E3BA02 37.5%, #A78B01 0 75%, #F4D633 0) border-box #E3BA02;
  color: var(--v3-color-accent-grey-dark) !important;
}

/* Nav dropdown styles - positioned outside nav structure */
.nav-dropdown {
  position: relative;
}

/* All dropdown menus - shared styles */
#profile-dropdown,
#stable-dropdown,
#about-dropdown {
  position: fixed;
  display: none;
  flex-direction: column;
  background: transparent;
  min-width: 150px;
  z-index: 10000;
  top: 0;
  left: 0;
}

/* Show state for all dropdowns */
#profile-dropdown.show,
#stable-dropdown.show,
#about-dropdown.show {
  display: flex;
}

/* Ensure nav dropdowns appear above settings overlay in horsplay game mode */
body.horsplay-game-mode #profile-dropdown.show,
body.horsplay-game-mode #stable-dropdown.show,
body.horsplay-game-mode #about-dropdown.show {
  z-index: 2100; /* Above nav menu (2000) and settings overlay (1000) */
}

.nav-dropdown-item {
  margin-left: 3px !important;
  margin-bottom: 0;
  z-index: 10001;
  position: relative;
}
.nav-dropdown-item:first-child {
  margin-top: 1px;
}

/* Progressive z-index for dropdown items - lower items appear on top */
.nav-dropdown-item:nth-child(1) { z-index: 10001; }
.nav-dropdown-item:nth-child(2) { z-index: 10002; }
.nav-dropdown-item:nth-child(3) { z-index: 10003; }
.nav-dropdown-item:nth-child(4) { z-index: 10004; }
.nav-dropdown-item:nth-child(5) { z-index: 10005; }

.nav-dropdown-item:hover {
  transform: translate(2px, 2px);
  z-index: 10010 !important; /* Ensure hovered item is always on top */
}

/* Active/selected state for dropdown items */
.nav-dropdown-item.active {
  background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #E3BA02 37.5%, #A78B01 0 75%, #F4D633 0) border-box #E3BA02 !important;
}
.nav-dropdown-item.active a {
  color: var(--v3-color-accent-grey-dark) !important;
}



/* Mobile responsiveness */
@media (max-width: 599px) {
  .nav-menu {
    flex-wrap: wrap;
    gap: 4px;
    margin: 1rem auto;
  }
  
  .nav-menu-item {
    padding: 8px 12px;
    font-size: var(--v3-font-size-sm);
    text-align: center;
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .nav-menu-item {
    padding: 10px 18px;
    font-size: var(--v3-font-size-sm);
  }
}

/* Index page styles */
#hero-square {
  padding: 10px;
  height: min-content;
}
#scores #hero-square {
  padding: 0;
  border: none;
  border-radius: 150% 150% 50% 30%;
  height: min-content;
}

/* Carousel for Scores Page - All Screen Sizes */
.scores-carousel-container {
  position: relative;
  width: 110%;
  height: 270px;
  overflow: hidden;
  perspective: 1000px;
}
/* Mobile responsiveness */
@media (max-width: 599px) {
  .scores-carousel-container {margin-top: -4em;}
}

.scores-carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scores-carousel-item {
  position: absolute;
  width: 74%;
  min-width: 330px;
  max-width: 400px;
  height: max-content;
  border-radius: 12px;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  user-select: none;
  transform-origin: center bottom;
  overflow: hidden;
}

/* Center item (active) - base styles */
.scores-carousel-item.active {
  border: 4px solid var(--v3-color-accent-white);
  z-index: 3;
  opacity: 1;
}

/* Left item */
.scores-carousel-item.left {
  transform: translateX(-75px) translateZ(-100px) scale(0.7) rotate(-5deg);
  z-index: 1;
  opacity: 1;
}

/* Right item */
.scores-carousel-item.right {
  transform: translateX(75px) translateZ(-100px) scale(0.7) rotate(5deg);
  z-index: 1;
  opacity: 1;
}

/* Hidden items */
.scores-carousel-item.hidden {
  transform: translateX(0) translateZ(-200px) scale(0.6);
  z-index: 0;
  opacity: 0;
}

/* Clickable side cards */
.scores-carousel-item.left,
.scores-carousel-item.right {
  cursor: pointer;
  transition: all 0.3s ease;
}


/* Carousel card structure */
.carousel-card-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.carousel-card-content {
  overflow-y: auto;
}

.carousel-card-content .data-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.carousel-card-content .data-item:last-child {
  border-bottom: none;
}

/* Smooth transitions for all carousel items */
.scores-carousel-item * {
  transition: all 0.3s ease;
  padding: 2px 0;
}

/* Hide original desktop layout on mobile */
.hero-section .flex-row-desktop.flex-column-phone {
  display: none !important;
}

/* Mobile carousel active item transform */
.scores-carousel-item.active {
  transform: translateX(0) translateZ(0) scale(0.8);
}


/* Tablet adjustments */
@media (min-width: 600px) and (max-width: 1023px) {
  .scores-carousel-container {
    height: 350px;
  }
  
  .scores-carousel-item {
    width: 60%;
    min-width: 400px;
    max-width: 500px;
  }
  
  .scores-carousel-item.active {
    transform: translateX(0) translateZ(0) scale(0.9);
  }
  
  .scores-carousel-item.left {
    transform: translateX(-150px) translateZ(-100px) scale(0.85) rotateY(15deg);
  }
  
  .scores-carousel-item.right {
    transform: translateX(150px) translateZ(-100px) scale(0.85) rotateY(-15deg);
  }
  
  /* Hide original desktop layout on tablet */
  .hero-section .flex-row-desktop.flex-column-phone {
    display: none !important;
  }
}

/* Desktop adjustments */
@media (min-width: 1024px) {
  .scores-carousel-container {
    height: 330px;
  }
  
  .scores-carousel-item {
    width: 50%;
    min-width: 450px;
    max-width: 600px;
  }
  
  .scores-carousel-item.active {
    transform: translateX(0) translateZ(0) scale(1);
  }
  
  .scores-carousel-item.left {
    transform: translateX(-140px) translateZ(-100px) scale(0.8) rotateY(15deg);
  }
  
  .scores-carousel-item.right {
    transform: translateX(140px) translateZ(-100px) scale(0.8) rotateY(-15deg);
  }
  
  /* Hide original desktop layout */
  .hero-section .flex-row-desktop.flex-column-phone {
    display: none !important;
  }
}
#profile-account-option {
  height: min-content;
  width: max-content;
}

/* Smooth scrolling for the entire page */
html {
  scroll-behavior: smooth;
}

/* Offset for fixed header if needed */
#global-scoreboard {
  scroll-margin-top: 2rem;
}

.main-label {
  font-weight: var(--v3-font-weight-xl);
  text-transform: uppercase;
  border-radius: 4px;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: .15s ease-in-out;
}
.main-label.main-label.main-label-top-right {
  top: 15px;
  right: 15px;
  position: absolute;
}
#index .main-label.main-label.main-label-top-right {
  top: 8px;
}
.main-label.main-label-top-left {
  top: 15px;
  left: 15px;
  position: absolute;
}
.main-label.main-label-bottom-left {
  bottom: 15px;
  left: 15px;
  position: absolute;
}
.main-label.main-label-bottom-right {
  bottom: 15px;
  right: 15px;
  position: absolute;
}

.main-label.main-label-one {
  background: linear-gradient(to right, #34a853, #1c5e2d);
}
.main-label.main-label-max {
  background: linear-gradient(135deg, #991EEB, #5822B4);
}
.main-label.main-label-plus {
  background: linear-gradient(to top, #0275e0, #194875);
}
.main-label.main-label-free {
  background: linear-gradient(to right, #6c757d, #495057);
}

/* Modal styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--v3-color-accent-black);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.modal-content {
  max-width: 800px;
  max-height: 90vh;
  width: 100%;
  overflow-y: auto;
  position: relative;
}

.modal-header {
  border-bottom: 1px solid var(--v3-color-accent-grey-mid);
}

/* Hero section styles */
#profile .hero-section,
#store .hero-section,
#about .hero-section,
#news .hero-section {
  margin: 10em auto;
}
#index .hero-section, #scores .hero-section {
  margin: 10em auto -40px;
  overflow: hidden;
}

#store-hero-img {width: 500px; height: auto;}
#scores-hero-img {margin-bottom: -5px;}

/* Hero image size constraints to prevent layout shift on hover */
#index-hero-img, #about-hero-img {
  width: 100%;
  height: auto;
  max-width: 500px;
  max-height: 500px;
  object-fit: contain;
  display: block;
}

/* Mobile responsiveness for hero section */
@media (max-width: 599px) {
  #index .hero-section,
  #profile .hero-section,
  #scores .hero-section,
  #store .hero-section,
  #about .hero-section,
  #news .hero-section {
    margin: 3em auto 4em;
  }
  
  /* Mobile hero image adjustments */
  #index-hero-img, #about-hero-img {
    max-width: 300px;
    max-height: 300px;
  }
}
/* Mobile responsiveness for hero section */
@media (min-width: 600px) and (max-width: 1023px) {
  #index .hero-section,
  #profile .hero-section,
  #scores .hero-section,
  #store .hero-section,
  #about .hero-section,
  #news .hero-section {
    margin: 3em auto 4em;
  }
  
  /* Tablet hero image adjustments */
  #index-hero-img, #about-hero-img {
    max-width: 400px;
    max-height: 400px;
  }
}

/* Main section styles */
.main-section {
  padding: 8em 0;
  position: relative;
}
.main-section.bg-primary-dark {
  border-top: 4px solid #082720;
  border-bottom: 4px solid #082720;
}
.main-section.bg-primary-dark-gradient {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-image: linear-gradient(90deg, rgba(46, 122, 105, 1) 0%, rgba(64, 155, 124, 1) 50%, rgba(110, 200, 95, 1) 100%) 1;
}

/* Mobile responsiveness for hero section */
@media (max-width: 599px) {
  .main-section {
    padding: 4em 0;
  }
}
/* Mobile responsiveness for hero section */
@media (min-width: 600px) and (max-width: 1023px) {
  .main-section {
    padding: 4em 0;
  }
  
  /* Fix tablet scrolling issues */
  html, body, .main-content {
    overscroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
    overscroll-behavior-x: auto !important;
  }
}



/* About Page Social Icons */
.about-social-icons {
  width: 22px;
  height: 22px;
}

/* About page FAQ question hover */
.faq-question:hover { background: linear-gradient(90deg, rgba(64,155,124,1) 0%, rgba(110,200,95,1) 50%, rgba(64,155,124,1) 100%); }

/* Table */
.scoreboard-table {
  border-collapse: separate;       /* allows spacing + rounded row ends */
  border-spacing: 0 0.75rem;               /* you can tweak this later */
  table-layout: auto;              /* columns size from their content */
  width: 100%;              /* let it grow to content width */
  min-width: 100%;                 /* but never smaller than container */
}

/* Rows: revert to real table rows (important for alignment) */
.scoreboard-table thead tr,
.scoreboard-table tbody tr {
  /* REMOVE: display: table; width:100%; table-layout:auto; */
  display: table-row;
  background: var(--v3-background-overlay);
  transition: .1s ease-in-out;
}

/* Header */
.scoreboard-table thead tr {
  background: transparent;
  font-weight: bold;
}

/* Cells */
.scoreboard-table th,
.scoreboard-table td {
  padding: var(--margin-md);
  vertical-align: middle;
  min-height: 3.5rem;
  height: 3.5rem;
  white-space: nowrap;              /* keep labels on one line */
}

/* Optional: rounded row “pills” */
.scoreboard-table tbody tr > *:first-child { border-radius: var(--radius-base) 0 0 var(--radius-base); }
.scoreboard-table tbody tr > *:last-child  { border-radius: 0 var(--radius-base) var(--radius-base) 0; }

/* Hover (apply to cells, not the row, for better support) */
.scoreboard-table tbody tr:hover > * {
  background: rgba(0,0,0,0.25);
}

/* Mobile horizontal scroll */
@media (max-width: 599px) {
  .overflow-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* Horsetranq game image */
#index-horsetranq-game-img {
  height: 100%;
}
#profile-username-edit-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}


.border-radius-sm { border-radius: var(--radius-sm); }
.border-radius-md { border-radius: var(--radius-md); }
.border-radius, .border-radius-base { border-radius: var(--radius-base); }
.border-radius-lg { border-radius: var(--radius-lg); }
.border-radius-xl { border-radius: var(--radius-xl); }
.border-radius-xxl { border-radius: var(--radius-xxl); }

.main-content {
  overflow-y: scroll;
  overflow-x: visible;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
}

/* Initial state for page animation - hide content by default */
[data-animate="page-intro"] {
  opacity: 0;
  transform: translateY(50px);
}

/* Overlay base styles */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
}

/* Exclude overlays from page slide animation - keep them in fixed position */
[data-animate="page-intro"] .overlay {
  opacity: 1 !important;
  transform: none !important;
}

/* Generic settings button class for game mode selection */
.game-mode-settings-btn {
  color: var(--v3-color-accent-gold);
  margin-left: -10px;
  height: 100%;
  border-bottom-right-radius: var(--radius-xl);
}

.game-mode-settings-btn:hover {
  background: conic-gradient(at calc(100% - var(--d)) calc(100% - var(--d)), #0276e3 37.5%, #025bb2 0 75%, #66b3f4 0) border-box #0276e3;
  color: var(--v3-color-accent-white);
  transform: translate(2px, 2px);
}

.game-mode-settings-btn .settings-icon {
  color: var(--v3-color-accent-gold);
  transition: color 0.2s ease;
}

.game-mode-settings-btn:hover .settings-icon {
  color: var(--v3-color-accent-white);
}

/* Copy button styles */
.copy-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.copy-button:hover {
  background-color: rgb(16 101 82);
  color: #fff;
  transform: scale(1.1);
}

.copy-button:active {
  transform: scale(0.95);
}

.copy-button svg {
  opacity: 0.8;
}

.copy-button:hover svg {
  opacity: 1;
}

/* Copy success animation */
.copy-button.copied {
  background-color: var(--v3-color-success-dark);
  color: var(--v3-color-success-light);
}

.copy-button.copied svg {
  opacity: 1;
}

.hide {display: none;}

/* ===== Game Tools Wrapper Positioning ===== */
.tools-wrapper {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  z-index: 100;
}

/* Mobile: buttons at bottom, far left and far right */
@media (max-width: 599px) {
  .tools-wrapper {
    top: auto;
    bottom: 20px;
  }
}

/* Placeholder text styling */
input::placeholder {
  color: var(--placeholder-color, #999);
  opacity: 1;
}

input::-webkit-input-placeholder {
  color: var(--placeholder-color, #999);
  opacity: 1;
}

input::-moz-placeholder {
  color: var(--placeholder-color, #999);
  opacity: 1;
}

input:-ms-input-placeholder {
  color: var(--placeholder-color, #999);
  opacity: 1;
}

input:-moz-placeholder {
  color: var(--placeholder-color, #999);
  opacity: 1;
}

/* ===== NOTIFICATION SYSTEM ===== */
/* Reusing existing v3 variables and design system */

/* Notification Modal Base */
.notification-modal {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background-color: transparent;
  transition: opacity 0.3s ease, background-color 0.3s ease, visibility 0s 0.3s;
}

.notification-modal.notification-modal--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.8);
  transition: opacity 0.3s ease, background-color 0.3s ease, visibility 0s;
}

/* Notification Content */
.notification-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: linear-gradient(90deg, rgba(46, 122, 105, 1) 0%, rgba(64, 155, 124, 1) 50%, rgba(110, 200, 95, 1) 100%);
  border: 4px solid #276959;
  padding: 10px;
  min-width: 360px;
}

.notification-modal--visible .notification-content {
  transform: translate(-50%, -50%) scale(1);
}

/* Notification Header */
.notification-header {
  padding: var(--padding-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-title {
  font-size: var(--v3-font-size-lg, 1.5rem);
  font-weight: var(--v3-font-weight-xl, 800);
  color: var(--v3-color-accent-white, #ffffff);
  margin: 0;
}

.notification-close {
  background: none;
  border: none;
  color: var(--v3-color-accent-white, #ffffff);
  font-size: var(--v3-font-size-xl, 1.8rem);
  cursor: pointer;
  border-radius: 100%;
  transition: background-color 0.2s ease;
}

.notification-close:hover {
  color: var(--v3-color-error-dark);
}

/* Notification Body */
.notification-body {
  padding: var(--v3-space-sm);
}

.notification-message {
  font-size: var(--v3-font-size-base, 1.25rem);
  color: var(--v3-color-accent-white, #ffffff);
  line-height: 1.5;
}

/* Notification Actions */
.notification-actions {
  display: flex;
  gap: var(--v3-space-sm, 12px);
  justify-content: flex-end;
  padding: 0 var(--v3-space-md, 20px) var(--v3-space-md, 20px);
}

/* Remove old notification button styles - now using standard button classes */

/* Notification Types */
.notification--success .notification-content {
  border: 4px solid var(--v3-color-success, #4caf50);
}

.notification--warning .notification-content {
  border: 4px solid var(--v3-color-warning, #ff9800);
}

.notification--error .notification-content {
  border: 4px solid var(--v3-color-error, #f44336);
}

.notification--info .notification-content {
  border: 4px solid var(--v3-color-info, #2196f3);
}

/* Toast Notifications (for non-blocking alerts) */
.notification-toast {
  position: fixed;
  top: var(--v3-space-md, 20px);
  right: var(--v3-space-md, 20px);
  z-index: 1001;
  background: var(--v3-bg-primary-dark, #1a1a1a);
  border-radius: var(--v3-border-radius-sm, 4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: var(--v3-space-md, 20px);
  max-width: 400px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.notification-toast.notification-toast--visible {
  transform: translateX(0);
}

.notification-toast-message {
  color: var(--v3-color-accent-white, #ffffff);
  font-size: var(--v3-font-size-base, 1.25rem);
  margin: 0;
}

/* Mobile Responsive */
@media (max-width: 599px) {
  .notification-content {
    margin: var(--v3-space-md, 20px);
    max-width: calc(100vw - 40px);
  }
  
  .notification-actions {
    flex-direction: column;
  }
  
  .notification-btn {
    width: 100%;
  }
  
  .notification-toast {
    right: var(--v3-space-sm, 12px);
    left: var(--v3-space-sm, 12px);
    max-width: none;
  }
}