/* ------------------------------------------------------------
# Fonts
---------------------------------------------------------------*/
/*Google Fonts*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i");
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');

@font-face {
    font-family: 'MagicMedieval Regular';
    font-style: normal;
    font-weight: normal;
    src: url('../../fonts/Magicm.woff') format('woff');
}

.magic {
    font-family: "MagicMedieval Regular", sans-serif;
}

/* NAVBAR DROPDOW */
.dropdown ul {
    display: block;
    position: absolute;
    left: 14px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0 0 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
    border-radius: 4px;
}

.dropdown ul li {
    min-width: 200px;
}

.dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    font-weight: 600;
}

.navbar .dropdown ul a i {
    font-size: 12px;
}

.dropdown ul a:hover,
.dropdown ul .active:hover,
.dropdown ul li:hover > a {
    color: var(--primary);
}

.dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.dropdown img {
    max-width: 24px;
}


/* HERO  */
.logo {
    opacity: 0;
    scale: 0.9
}

.banner {
    background-image: var(--bg-img);
}

.event-logo {
    background-image: var(--event-logo);
}

.hero-item {
    opacity: 0;
    y: 20px;
}

.second-name {
    font-family: MedievalSharp, cursive;
    color: rgb(195, 106, 90);
    -webkit-text-stroke: 4px rgb(253, 219, 212);
    paint-order: stroke;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.75));
    font-size: 3rem;
    letter-spacing: 0.05em;
    opacity: 1;
    transform: none;
}

.hero-block h1 {
    margin-bottom: 0;
}

.hero-block .payline {
    margin-bottom: 16px;
    color: #fff;
}

.hero-block .date-loc {
    margin-bottom: 64px;
}

.hero
.card-hand {
    opacity: 0
}

.card-hand-1 {
    y: 80px;
    /* transform: rotate(-35deg); */
}

.card-hand-2 {
    y: 70px;
    /* transform: rotate(-20deg); */
}

.card-hand-3 {
    y: 60px;
    /* transform: rotate(-10deg); */
}

.card-hand-4 {
    y: 50px;
}

.card-hand-5 {
    y: 60px;
    /* transform: rotate(10deg); */
}

.card-hand-6 {
    y: 70px;
    /* transform: rotate(20deg) */
}

.card-hand-7 {
    y: 80px;
    /* transform: rotate(35) */
}

/* FESTIVAL and GENERAL SECTIONS */

.motion-item {
    opacity: 0;
    y: 30px;
    transform: none;
}

.motion-item-2,
.guest-box {
    opacity: 0;
    y: 40px;
    transform: none;
}

.spirit-box {
    opacity: 0;
    y: 50px;
    transform: none;
    display: flex;
    flex-direction: column;
}

.spirit-box i {
    font-size: 3rem; /* or 48px */
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
}

.spirit-box .text-card-foreground {
    flex: 1;
}

.leftcol {
    opacity: 0;
    x: -50px;
    transform: none;
}

.rightcol {
    opacity: 0;
    x: 50px;
    transform: none;
}

.card-cone-container {
    opacity: 0;
    /* scale: 0.8; */
}

.card-cone {
    opacity: 0;
    scale: 1;
    y: 0;
}

.featured {
    opacity: 0;
    scale: 1;
}

.featured:hover {
    scale: 1.1;
    y: -8px;
}

.card-cone.top-left {
    transform: translateY(-8px);
}

.card-cone.top-left:hover {
    scale: 1.05;
    transform: translateY(-12px);
}

.card-cone.top-right {
    transform: translateY(12px);
}

.card-cone.top-right:hover {
    scale: 1.05;
    transform: translateY(8px);
}

.card-cone.bottom-left {
    transform: translateY(8px);
}

.card-cone.bottom-left:hover {
    scale: 1.05;
    transform: translateY(4px);
}

.card-cone.bottom-right {
    transform: translateY(-12px);
}

.card-cone.bottom-right:hover {
    scale: 1.05;
    transform: translateY(-16px);
}

.text-tourney {
    color: var(--tourney);
}

.text-tourney-foreground {
    color: var(--tourney-foreground);
}

.text-raffle {
    color: #d946ef;
}

.text-oldschool {
    color: #fc9a00;
}

.text-premodern {
    color: var(--primary);
}

.text-closed {
    color: #ef4444;
}

.bg-tourney {
    background-color: var(--tourney);
}

.bg-tourney\/5 {
    background-color: var(--tourney);
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-tourney\/5 {
        background-color: color-mix(in oklab, var(--tourney) 5%, transparent);
    }
}

.bg-tourney\/10 {
    background-color: var(--tourney);
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-tourney\/10 {
        background-color: color-mix(in oklab, var(--tourney) 10%, transparent);
    }
}

.border-tourney {
    border-color: var(--tourney);
}

.border-tourney\/20 {
    border-color: var(--tourney);
}

@supports (color: color-mix(in lab, red, red)) {
    .border-tourney\/20 {
        border-color: color-mix(in oklab, var(--tourney) 20%, transparent);
    }
}

.border-tourney\/30 {
    border-color: var(--tourney);
}

@supports (color: color-mix(in lab, red, red)) {
    .border-tourney\/30 {
        border-color: color-mix(in oklab, var(--tourney) 30%, transparent);
    }
}

@media (hover: hover) {
    .hover\:bg-tourney\/80:hover {
        background-color: var(--tourney);
    }

    @supports (color: color-mix(in lab, red, red)) {
        .hover\:bg-tourney\/80:hover {
            background-color: color-mix(in oklab, var(--tourney) 80%, transparent);
        }
    }
}

@media (hover: hover) {
    .hover\:bg-tourney\/90:hover {
        background-color: var(--tourney);
    }

    @supports (color: color-mix(in lab, red, red)) {
        .hover\:bg-tourney\/90:hover {
            background-color: color-mix(in oklab, var(--tourney) 90%, transparent);
        }
    }
}

.bg-raffle {
    background-color: #d946ef;
}

.bg-raffle\/5 {
    background-color: oklab(66.6764% .204559 -.158959 / .05);
}

.bg-raffle\/10 {
    background-color: oklab(66.6764% .204559 -.158959 / .1);
}

.bg-raffle\/20 {
    background-color: oklab(66.6764% .204559 -.158959 / .2);
}

.bg-raffle\/30 {
    background-color: oklab(66.6764% .204559 -.158959 / .3);
}

.border-raffle {
    border-color: #d946ef;
}

.border-raffle\/30 {
    border-color: oklab(66.6764% .204559 -.158959 / .3);
}

.border-raffle\/20 {
    border-color: oklab(66.6764% .204559 -.158959 / .2);
}

.bg-closed\/10 {
    background-color: oklab(67.5516% .221501 .13137 / .1);
}

.border-closed\/30 {
    border-color: oklab(67.5516% .221501 .13137 / .3);
}

.border-oldschool {
    border-color: #fc9a00;
}

.border-oldschool\/20 {
    border-color: oklab(76.9935% .0697004 .156593 / .2);
}

.border-oldschool\/30 {
    border-color: oklab(76.9935% .0697004 .156593 / .3);
}

.border-oldschool\/50 {
    border-color: oklab(76.9935% .0697004 .156593 / .5);
}

.border-oldschool\/60 {
    border-color: oklab(76.9935% .0697004 .156593 / .6);
}

.border-oldschool\/80 {
    border-color: oklab(76.9935% .0697004 .156593 / .8);
}

.bg-oldschool {
    background-color: #fc9a00;
}

.bg-oldschool\/5 {
    background-color: oklab(76.9935% .0697004 .156593 / .05);
}

.bg-oldschool\/10 {
    background-color: oklab(76.9935% .0697004 .156593 / .1);
}

.bg-premodern {
    background-color: var(--primary);
}

.bg-premodern\/5 {
    background-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-premodern\/5 {
        background-color: color-mix(in oklab, var(--primary) 5%, transparent);
    }
}

.bg-premodern\/10 {
    background-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-premodern\/10 {
        background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
}

.border-premodern {
    border-color: var(--primary);
}

.border-premodern\/20 {
    border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
    .border-premodern\/20 {
        border-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
}

.border-premodern\/30 {
    border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
    .border-premodern\/30 {
        border-color: color-mix(in oklab, var(--primary) 30%, transparent);
    }
}

.border-premodern\/50 {
    border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
    .border-premodern\/50 {
        border-color: color-mix(in oklab, var(--primary) 50%, transparent);
    }
}

.border-premodern\/60 {
    border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
    .border-premodern\/60 {
        border-color: color-mix(in oklab, var(--primary) 60%, transparent);
    }
}

/*
==================================================
HOVER
==================================================
*/
@media (hover: hover) {
    .hover\:border-oldschool\/80:hover {
        border-color: oklab(76.9935% .0697004 .156593 / .8);
    }
}

@media (hover: hover) {
    .hover\:border-premodern\/40:hover {
        border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
        .hover\:border-premodern\/40:hover {
            border-color: color-mix(in oklab, var(--primary) 40%, transparent);
        }
    }
}

@media (hover: hover) {
    .hover\:border-premodern\/80:hover {
        border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
        .hover\:border-premodern\/80:hover {
            border-color: color-mix(in oklab, var(--primary) 80%, transparent);
        }
    }
}

@media (hover: hover) {
    .hover\:bg-oldschool\/10:hover {
        background-color: oklab(76.9935% .0697004 .156593 / .1);
    }
}

@media (hover: hover) {
    .hover\:bg-oldschool\/90:hover {
        background-color: oklab(76.9935% .0697004 .156593 / .9);
    }
}

@media (hover: hover) {
    .hover\:bg-premodern\/10:hover {
        background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
        .hover\:bg-premodern\/10:hover {
            background-color: color-mix(in oklab, var(--primary) 10%, transparent);
        }
    }
}

@media (hover: hover) {
    .hover\:bg-premodern\/90:hover {
        background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
        .hover\:bg-premodern\/90:hover {
            background-color: color-mix(in oklab, var(--primary) 90%, transparent);
        }
    }
}

@media (hover: hover) {
    .hover\:shadow-oldschool\/10:hover {
        --tw-shadow-color: #fc9a001a;
    }

    @supports (color: color-mix(in lab, red, red)) {
        .hover\:shadow-oldschool\/10:hover {
            --tw-shadow-color: color-mix(in oklab, oklab(76.9935% .0697004 .156593 / .1) var(--tw-shadow-alpha), transparent);
        }
    }
}

@media (hover: hover) {
    .hover\:shadow-premodern\/10:hover {
        --tw-shadow-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
        .hover\:shadow-premodern\/10:hover {
            --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--primary) 10%, transparent) var(--tw-shadow-alpha), transparent);
        }
    }
}

/* Oldschool gradient classes */
.from-oldschool-950\/95 {
    --tw-gradient-from: color-mix(in srgb, oklch(.266 .079 36.259) 95%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

@supports (color: color-mix(in lab, red, red)) {
    .from-oldschool-950\/95 {
        --tw-gradient-from: color-mix(in oklab, oklch(.266 .079 36.259) 95%, transparent);
    }
}

.via-oldschool-950\/90 {
    --tw-gradient-via: color-mix(in srgb, oklch(.279 .077 45.635) 90%, transparent);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
}

@supports (color: color-mix(in lab, red, red)) {
    .via-oldschool-950\/90 {
        --tw-gradient-via: color-mix(in oklab, oklch(.279 .077 45.635) 90%, transparent);
    }
}

.to-oldschool-900\/95 {
    --tw-gradient-to: color-mix(in srgb, oklch(.408 .123 38.172) 95%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

@supports (color: color-mix(in lab, red, red)) {
    .to-oldschool-900\/95 {
        --tw-gradient-to: color-mix(in oklab, oklch(.408 .123 38.172) 95%, transparent);
    }
}

/* Premodern gradient classes */
.from-premodern-900\/85 {
    --tw-gradient-from: color-mix(in srgb, oklch(.208 .042 265.755) 85%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

@supports (color: color-mix(in lab, red, red)) {
    .from-premodern-900\/85 {
        --tw-gradient-from: color-mix(in oklab, oklch(.208 .042 265.755) 85%, transparent);
    }
}

.from-premodern-950\/95 {
    --tw-gradient-from: color-mix(in srgb, oklch(.129 .042 264.695) 95%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

@supports (color: color-mix(in lab, red, red)) {
    .from-premodern-950\/95 {
        --tw-gradient-from: color-mix(in oklab, oklch(.129 .042 264.695) 95%, transparent);
    }
}

.via-premodern-950\/90 {
    --tw-gradient-via: color-mix(in srgb, oklch(.262 .051 172.552) 90%, transparent);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
}

@supports (color: color-mix(in lab, red, red)) {
    .via-premodern-950\/90 {
        --tw-gradient-via: color-mix(in oklab, oklch(.262 .051 172.552) 90%, transparent);
    }
}

.to-premodern-900\/90 {
    --tw-gradient-to: color-mix(in srgb, oklch(.208 .042 265.755) 90%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

@supports (color: color-mix(in lab, red, red)) {
    .to-premodern-900\/90 {
        --tw-gradient-to: color-mix(in oklab, oklch(.208 .042 265.755) 90%, transparent);
    }
}

.to-premodern-900\/95 {
    --tw-gradient-to: color-mix(in srgb, oklch(.208 .042 265.755) 95%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

@supports (color: color-mix(in lab, red, red)) {
    .to-premodern-900\/95 {
        --tw-gradient-to: color-mix(in oklab, oklch(.208 .042 265.755) 95%, transparent);
    }
}

a.form-link {
    color: var(--tourney);
    font-weight: bold;
}

a.form-link:hover {
    text-decoration: underline;
}

a.charity-link {
    color: var(--color-sky-600);
    font-weight: bold;
}

a.charity-link:hover {
    text-decoration: underline;
}

/* ============================================
   Bootstrap-style Utility Classes (Tailwind-based)
   ============================================ */

/* Badge Base Styles */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 0.375rem;
    white-space: nowrap;
}

.badge.rounded-pill {
    border-radius: 9999px;
}

/* Success Colors */
.bg-success {
    background-color: #22c55e;
}

.bg-success\/10 {
    background-color: rgba(34, 197, 94, 0.1);
}

.bg-success\/20 {
    background-color: rgba(34, 197, 94, 0.2);
}

.text-success {
    color: #22c55e;
}

.border-success {
    border-color: #22c55e;
}

.border-success\/20 {
    border-color: rgba(34, 197, 94, 0.2);
}

/* Warning Colors */
.bg-warning {
    background-color: #f97316;
}

.bg-warning\/10 {
    background-color: rgba(249, 115, 22, 0.1);
}

.bg-warning\/20 {
    background-color: rgba(249, 115, 22, 0.2);
}

.text-warning {
    color: #f97316;
}

.border-warning {
    border-color: #f97316;
}

.border-warning\/20 {
    border-color: rgba(249, 115, 22, 0.2);
}

/* Danger Colors (alias for destructive) */
.bg-danger {
    background-color: var(--destructive);
}

.bg-danger\/10 {
    background-color: var(--destructive);
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-danger\/10 {
        background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
}

.bg-danger\/20 {
    background-color: var(--destructive);
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-danger\/20 {
        background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
}

.text-danger {
    color: var(--destructive);
}

.border-danger {
    border-color: var(--destructive);
}

.border-danger\/20 {
    border-color: var(--destructive);
}

@supports (color: color-mix(in lab, red, red)) {
    .border-danger\/20 {
        border-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
}

/* Info Colors (using cyan) */
.bg-info {
    background-color: #06b6d4;
}

.bg-info\/10 {
    background-color: rgba(6, 182, 212, 0.1);
}

.bg-info\/20 {
    background-color: rgba(6, 182, 212, 0.2);
}

.text-info {
    color: #06b6d4;
}

.border-info {
    border-color: #06b6d4;
}

.border-info\/20 {
    border-color: rgba(6, 182, 212, 0.2);
}

/* Badge Color Variants */
.badge.bg-success {
    color: #fff;
}

.badge.bg-warning {
    color: #fff;
}

.badge.bg-danger {
    color: #fff;
}

.badge.bg-info {
    color: #fff;
}

.badge.bg-primary {
    color: var(--primary-foreground);
}

.badge.bg-secondary {
    color: var(--secondary-foreground);
}

/* Muted background with opacity */
.bg-muted\/50 {
    background-color: var(--muted);
}

@supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/50 {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    }
}

/* Primary border with opacity */
.border-primary\/30 {
    border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
    .border-primary\/30 {
        border-color: color-mix(in oklab, var(--primary) 30%, transparent);
    }
}

/* Food description help text */
.food-description,
.food-description p {
    font-size: 0.75rem; /* 12px */
    line-height: 1.5;
    color: #aaa;
    margin: 0;
}

/* ------------------------------------------------------------
# Team Grid - Centered flexbox layout for organizer cards
# Layout rules:
#   1-4 members: 1 row
#   5-6 members: 2 rows of 3
#   7-8 members: 2 rows (4 + 3/4)
#   9+: 4 per row, last row centered
---------------------------------------------------------------*/
.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    max-width: 1200px; /* Limit to ~4 cards per row */
    margin-left: auto;
    margin-right: auto;
}

.team-grid .team-card {
    width: 280px;
    flex-shrink: 0;
}

/* 5-6 members: limit to 3 per row */
.team-grid[data-count="5"],
.team-grid[data-count="6"] {
    max-width: 900px; /* ~3 cards per row */
}

/* ============================================
   Prize Card Classes
   ============================================ */

/* Aspect ratio for MTG cards (5:7) */
.aspect-\[5\/7\] {
    aspect-ratio: 5 / 7;
}

/* ============================================
   Sponsor Tier Classes
   ============================================ */

/* Max-width arbitrary values */
.max-w-\[280px\] { max-width: 280px; }
.max-w-\[250px\] { max-width: 250px; }
.max-w-\[220px\] { max-width: 220px; }
.max-w-\[200px\] { max-width: 200px; }
.max-w-\[190px\] { max-width: 190px; }
.max-w-\[180px\] { max-width: 180px; }
.max-w-\[160px\] { max-width: 160px; }
.max-w-\[140px\] { max-width: 140px; }
.max-w-\[120px\] { max-width: 120px; }
.max-w-\[100px\] { max-width: 100px; }
.max-w-\[80px\] { max-width: 80px; }
.max-w-\[50px\] { max-width: 50px; }

/* Max-height arbitrary values */
.max-h-\[160px\] { max-height: 160px; }
.max-h-\[145px\] { max-height: 145px; }
.max-h-\[130px\] { max-height: 130px; }
.max-h-\[120px\] { max-height: 120px; }
.max-h-\[115px\] { max-height: 115px; }
.max-h-\[110px\] { max-height: 110px; }
.max-h-\[100px\] { max-height: 100px; }
.max-h-\[85px\] { max-height: 85px; }
.max-h-\[80px\] { max-height: 80px; }
.max-h-\[70px\] { max-height: 70px; }
.max-h-\[60px\] { max-height: 60px; }
.max-h-\[50px\] { max-height: 50px; }
.max-h-\[30px\] { max-height: 30px; }

/* Grayscale filters */
.grayscale-\[30\%\] { filter: grayscale(30%); }
.grayscale-\[50\%\] { filter: grayscale(50%); }
.group:hover .group-hover\:grayscale-0 { filter: grayscale(0%); }

/* Ring utilities */
.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-primary\/30 {
    --tw-ring-color: hsl(var(--primary) / 0.3);
}
.ring-red-500\/50 {
    --tw-ring-color: rgb(239 68 68 / 0.5);
}

/* Radio indicator: inner dot on selection */
.radio-indicator::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: white;
    opacity: 0;
    transition: opacity 0.15s;
}
:checked + .radio-indicator {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary));
}
:checked + .radio-indicator::after {
    opacity: 1;
}

/* Checkbox indicator: checkmark on selection */
.checkbox-indicator::after {
    content: '';
    width: 10px;
    height: 6px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg) translateY(-1px);
    opacity: 0;
    transition: opacity 0.15s;
}
:checked + .checkbox-indicator {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary));
}
:checked + .checkbox-indicator::after {
    opacity: 1;
}

/* Border top */
.border-t {
    border-top-width: 1px;
}

/* Text opacity variants */
.text-primary\/60 { color: hsl(var(--primary) / 0.6); }
.text-primary\/70 { color: hsl(var(--primary) / 0.7); }
.text-primary\/80 { color: hsl(var(--primary) / 0.8); }
.text-primary\/90 { color: hsl(var(--primary) / 0.9); }
.text-muted-foreground\/70 { color: hsl(var(--muted-foreground) / 0.7); }
.text-muted-foreground\/80 { color: hsl(var(--muted-foreground) / 0.8); }

/* Border opacity variants */
.border-primary\/10 { border-color: hsl(var(--primary) / 0.1); }

.border-primary\/15 {
    border-color: var(--primary);
}
@supports (color: color-mix(in oklab, white, black)) {
    .border-primary\/15 {
        border-color: color-mix(in oklab, var(--primary) 15%, transparent);
    }
}

.border-primary\/25 {
    border-color: var(--primary);
}
@supports (color: color-mix(in oklab, white, black)) {
    .border-primary\/25 {
        border-color: color-mix(in oklab, var(--primary) 25%, transparent);
    }
}

.border-primary\/40 {
    border-color: var(--primary);
}
@supports (color: color-mix(in oklab, white, black)) {
    .border-primary\/40 {
        border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    }
}

/* Background opacity variants */
.bg-white\/5 { background-color: rgb(255 255 255 / 0.05); }

/* Hover backgrounds */
.hover\:bg-primary\/5:hover {
    background-color: hsl(var(--primary) / 0.05);
}

@media (hover: hover) {
    .hover\:bg-primary\/10:hover {
        background-color: var(--primary);
    }
    @supports (color: color-mix(in oklab, white, black)) {
        .hover\:bg-primary\/10:hover {
            background-color: color-mix(in oklab, var(--primary) 10%, transparent);
        }
    }
}

/* Hover borders */
@media (hover: hover) {
    .hover\:border-primary\/25:hover {
        border-color: var(--primary);
    }
    @supports (color: color-mix(in oklab, white, black)) {
        .hover\:border-primary\/25:hover {
            border-color: color-mix(in oklab, var(--primary) 25%, transparent);
        }
    }

    .hover\:border-primary\/30:hover {
        border-color: var(--primary);
    }
    @supports (color: color-mix(in oklab, white, black)) {
        .hover\:border-primary\/30:hover {
            border-color: color-mix(in oklab, var(--primary) 30%, transparent);
        }
    }

    .hover\:border-primary\/40:hover {
        border-color: var(--primary);
    }
    @supports (color: color-mix(in oklab, white, black)) {
        .hover\:border-primary\/40:hover {
            border-color: color-mix(in oklab, var(--primary) 40%, transparent);
        }
    }

    .hover\:border-primary\/60:hover {
        border-color: hsl(var(--primary) / 0.6);
    }
}

/* Hover shadows */
@media (hover: hover) {
    .hover\:shadow-primary\/5:hover {
        --tw-shadow-color: hsl(var(--primary) / 0.05);
        --tw-shadow: var(--tw-shadow-colored);
    }
    .hover\:shadow-primary\/10:hover {
        --tw-shadow-color: hsl(var(--primary) / 0.1);
        --tw-shadow: var(--tw-shadow-colored);
    }
    .hover\:shadow-primary\/20:hover {
        --tw-shadow-color: hsl(var(--primary) / 0.2);
        --tw-shadow: var(--tw-shadow-colored);
    }
}

/* Group hover variants */
.group:hover .group-hover\:border-primary\/30 {
    border-color: hsl(var(--primary) / 0.3);
}
.group:hover .group-hover\:text-primary {
    color: hsl(var(--primary));
}

/* Max-width 5xl */
.max-w-5xl {
    max-width: 64rem;
}

/* Green badge classes for card legality */
.bg-green-500\/10 { background-color: rgb(34 197 94 / 0.1); }
.border-green-500\/30 { border-color: rgb(34 197 94 / 0.3); }
.text-green-400 { color: rgb(74 222 128); }

/* Red badge classes for card legality */
.bg-red-500\/10 { background-color: rgb(239 68 68 / 0.1); }
.border-red-500\/30 { border-color: rgb(239 68 68 / 0.3); }
.text-red-400 { color: rgb(248 113 113); }

/* ============================================
   Peer-checked variants (feedback questionnaire)
   ============================================ */

/* Rating: peer-checked primary */
.peer:checked ~ .peer-checked\:border-primary {
    border-color: var(--primary);
}
.peer:checked ~ .peer-checked\:bg-primary\/10 {
    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
}
.peer:checked ~ .peer-checked\:text-primary {
    color: var(--primary);
}

/* Yes: peer-checked green */
.peer:checked ~ .peer-checked\:border-green-500 {
    border-color: rgb(34 197 94);
}
.peer:checked ~ .peer-checked\:bg-green-500\/10 {
    background-color: rgb(34 197 94 / 0.1);
}
.peer:checked ~ .peer-checked\:text-green-400 {
    color: rgb(74 222 128);
}

/* No: peer-checked red */
.peer:checked ~ .peer-checked\:border-red-500 {
    border-color: rgb(239 68 68);
}
.peer:checked ~ .peer-checked\:bg-red-500\/10 {
    background-color: rgb(239 68 68 / 0.1);
}
.peer:checked ~ .peer-checked\:text-red-400 {
    color: rgb(248 113 113);
}

/* ============================================
   Has-checked variants (choice questions & food preferences)
   ============================================ */
.has-\[\:checked\]\:border-primary:has(:checked) {
    border-color: var(--primary);
}
.has-\[\:checked\]\:bg-primary\/10:has(:checked) {
    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
}
.has-\[\:checked\]\:border-tourney:has(:checked) {
    border-color: var(--tourney);
}
.has-\[\:checked\]\:bg-tourney\/5:has(:checked) {
    background-color: color-mix(in oklab, var(--tourney) 5%, transparent);
}
.has-\[\:checked\]\:bg-tourney\/10:has(:checked) {
    background-color: color-mix(in oklab, var(--tourney) 10%, transparent);
}

/* ============================================
   Hover border variants (feedback & food preferences)
   ============================================ */
@media (hover: hover) {
    .hover\:border-primary\/50:hover {
        border-color: var(--primary);
    }
    @supports (color: color-mix(in oklab, white, black)) {
        .hover\:border-primary\/50:hover {
            border-color: color-mix(in oklab, var(--primary) 50%, transparent);
        }
    }

    .hover\:border-green-500\/50:hover {
        border-color: rgb(34 197 94 / 0.5);
    }
    .hover\:border-red-500\/50:hover {
        border-color: rgb(239 68 68 / 0.5);
    }
    .hover\:border-tourney\/50:hover {
        border-color: var(--tourney);
    }
    @supports (color: color-mix(in oklab, white, black)) {
        .hover\:border-tourney\/50:hover {
            border-color: color-mix(in oklab, var(--tourney) 50%, transparent);
        }
    }
}

/* Arbitrary heights for location map */
.min-h-\[500px\] { min-height: 500px; }
.h-\[500px\] { height: 500px; }