/* =========================================================
   1. GLOBAL & RESET
========================================================= */
:root {
  --app-bg: #0e1217;
  --menu-bg: #1a1a1a;
  --header-h: 70px;
  --card-bg: #0f1619;
  --card-header-bg: rgba(255, 255, 255, 0.08);
  --table-header-bg: rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.08);
  --text: rgba(255, 255, 255, 0.9);
  --text-dim: #6a7785;
  --accent: #3dd1dc;
  --flag-w: 20px;
  --flag-h: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; background: var(--app-bg); min-height: 100vh;
  color: var(--text); font-family: system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

body { padding-top: env(safe-area-inset-top); }
body::-webkit-scrollbar { display: none; }
body.pan-active { overflow: hidden; touch-action: none; }

/* =========================================================
   2. APP SHELL
========================================================= */
#app { position: relative; min-height: 100vh; padding-top: var(--header-h); }

.menu-layer {
  width: 160px; background-color: var(--menu-bg); transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-bottom-right-radius: 24px;
}
.menu-layer.visible { transform: translateX(0); }

.menu-layer.backdrop { cursor: pointer; /* Tells the user "you can click here to go back" */}
#menu-track { position: fixed; top: var(--header-h); bottom: 0; left: 0; z-index: 1000; }

#menu-interface {
  position: fixed; top: var(--header-h); bottom: 0; left: 0; z-index: 30001;
  box-shadow: 4px 0 15px rgba(0,0,0,0.5); border-right: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column;
}

#menu-interface {
    background: var(--menu-bg) !important;
    transition: 0.5s;
}

#menu-interface.about-active{
    background: var(--app-bg) !important;
    transition: 0.5s;
}



.menu-scroll-container { flex: 1; overflow-y: auto; padding: 20px; padding-bottom: 120px; }
.menu-link {
    display: block;
    color: #aaa; /* Start dim to reduce visual noise */
    text-decoration: none;

    /* Compact spacing */
    padding: 8px 12px;
    /*margin: 2px 8px; !* Floats slightly off edge *!*/
    /*border-radius: 6px;*/

    /* Only transition color/bg - NO transform */
    transition: background 0.15s ease, color 0.15s ease;
}

.menu-link:hover {
    /* Subtle glass effect */
    /*background: rgb(77 72 72 / 8%);*/

    /* Text goes pure white */
    color: #cbc7c7;
}

/* Specific override for the backdrop layer */
#menu-track {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;           /* Cover full width */
    height: 100vh;          /* Cover full height */
    background: rgba(0, 0, 0, 0.5); /* Dim the background */
    z-index: 20001;         /* Below menu (20001) but above everything else */

    /* Override the default .menu-layer styles */
    transform: none;
    display: none;          /* Hidden by default */
    border: none;
    /*cursor: pointer;*/
}

/* Show it when the .visible class is added */
#menu-track.visible {
    display: block;
}

.sidebar-footer {
    margin-top: 15px;
    padding: 20px 24px; /* Align strictly with your menu links */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Crisp line */
    background: transparent; /* No boxiness */
}

/* Make About look like a regular link, just separated */
.footer-primary {
    color: #aaa;
    font-size: 13px;
    /*font-weight: 500;*/
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    transition: color 0.2s;
}

.footer-primary:hover {
    color: #cbc7c7;
    /*padding-left: 4px; !* Subtle movement on hover *!*/
}

/* Legal text faded out */
.footer-secondary {
    color: #444;
    font-size: 10px;
    text-transform: uppercase; /* Makes it look like "fine print" */
    letter-spacing: 0.5px;
    text-decoration: none;
}





#menu-burger {
  background: transparent; border: none; width: 44px; height: 44px;
  color: white; font-size: 28px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; z-index: 10001;
}

.burger-view { display: block; line-height: 1; }
.close-view { display: none; line-height: 1; }
#menu-burger.is-active .burger-view { display: none; }
#menu-burger.is-active .close-view { display: block; }

#app-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 20001; pointer-events: none; }

#action-bar {
  pointer-events: auto; display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: var(--header-h); padding: 0 20px;
  background: rgba(14, 18, 23, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-section { flex: 1; display: flex;  z-index: 21000;}
#controls-section { flex: 0 0 auto; display: flex; justify-content: center; }
#interactive-section { flex: 1; display: flex; justify-content: flex-end; }

.run-tournament-button {
  height: 42px; padding: 0 24px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.92);
  color: #000; font-weight: 800; text-transform: uppercase; cursor: pointer;
}
.interactive-data {
  height: 42px; padding: 0 16px; border-radius: 99px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.05);
  display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 12px;
}

/* small number animation helper */
.user-count #count,
#tournaments-count {
  display: inline-block;
  transition: all 0.3s ease-in-out;
  opacity: 1;
  transform: scale(1);
}

.updating-count {
  opacity: 0 !important;
  transform: scale(0.5) !important;
}

/* =========================================================
   3. GROUP STAGE
========================================================= */
#groupstagewrapper {
  position: relative; padding: 0 40px; z-index: 1000; overflow: hidden;
}

/* DESKTOP FIXED */
@media (min-width: 768px) {
  #groupstagewrapper {
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    z-index: 20000;
    background-color: rgba(14, 18, 23, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 20px;
    transition: all 0.3s ease; /* Smooth switch between fixed/static */
  }

  /* ✅ NEW: STATIC MODE OVERRIDE (For huge tables like CL) */
  #groupstagewrapper.layout-static {
    position: relative !important; /* Put it back in flow */
    top: 0 !important;
    background-color: transparent !important; /* Remove heavy header look */
    backdrop-filter: none !important;
    border-bottom: none !important;
    padding-top: 20px; /* Add breathing room */
    padding-bottom: 40px; /* Gap before bracket */
  }

  /* Center the giant table nicely when static */
  #groupstagewrapper.layout-static .group {
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  }
}

/* === GRADIENT FADES === */
#groupstagewrapper::before,
#groupstagewrapper::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; pointer-events: none; z-index: 50;
}
#groupstagewrapper::before {
  left: 0; background: linear-gradient(to right, var(--app-bg) 20%, rgba(14,18,23,0) 100%);
}
#groupstagewrapper::after {
  right: 0; background: linear-gradient(to left, var(--app-bg) 20%, rgba(14,18,23,0) 100%);
}

#groupstage {
  display: flex; overflow-x: auto; gap: 34px; padding: 16px 30px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    align-items: flex-start;
}
#groupstage::-webkit-scrollbar { display: none; }

/* === THE CARD (FLUSH CONTAINER) === */
.group {
  flex: 0 0 auto;
  width: 440px; max-width: 92vw;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 18px 55px rgba(0,0,0,0.65);
  scroll-snap-align: center;

  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  transform: translateZ(0);
}

/* === GROUP NAME (Header) === */
.group-name {
  text-align: center; font-size: 18px; font-weight: 800; padding: 14px 10px;
  background: var(--card-header-bg); color: var(--text); border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* === TABLE === */
.group-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto !important;
}

.groupstage-header th {
  padding: 8px 10px; background: var(--table-header-bg); color: var(--text-dim);
  font-size: 12px; font-weight: 800; border-bottom: 1px solid rgba(255,255,255,0.06);
}

.group-table td { padding: 9px 10px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }

/* Remove bottom border from last row */
.group-table tr:last-child td { border-bottom: none !important; }

/* === FOOTER CELL PADDING (The "Floating" Effect) === */
.group-table tfoot td {
  padding: 8px !important;
  border: none !important;
  background: var(--card-bg);
}

/* ALIGNMENT */
.group-table th:nth-child(1), .group-table td:nth-child(1) { text-align: center; }
.group-table th:nth-child(2), .group-table td:nth-child(2) { text-align: center; }
.group-table th:nth-child(3), .group-table td:nth-child(3) { text-align: left; }
.group-table th:nth-child(n+4), .group-table td:nth-child(n+4) { text-align: center; }

.team-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.country-img { width: var(--flag-w); border-radius: 4px; display: block; margin: 0 auto; }

tr.advances td { background: rgba(255, 255, 255, 0.04); color: #fff; font-weight: 700; }
tr.eliminated td { opacity: 0.45; }

/* === MATCHES BUTTON (FLOATING STYLE) === */
.toggle-matches-button {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0;

  /* ROUNDED BUTTON inside the padded cell */
  border-radius: 12px;

  background: var(--table-header-bg); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-dim); padding: 10px; font-weight: 800; text-transform: uppercase; cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}
.toggle-matches-button:active { transform: scale(0.98); }

.toggle-matches-button::after {
  content: "▼"; font-size: 10px; display: inline-block; transition: transform 0.2s ease;
}
.toggle-matches-button.open { color: white; }

.toggle-matches-button.open::after { transform: rotate(180deg); }

.toggle-matches-button:hover{
    background-color: rgba(255, 255, 255, 0.08);
}

/* === MATCH TABLE === */
.match-table-grid-wrapper { display: grid; grid-template-rows: 0fr; transition: 0.15s; overflow: hidden; }
.match-table-grid-wrapper.open { grid-template-rows: 1fr; }

.match-table {
  min-height: 0; width: 100%; font-size: 13px;
  background: rgba(255,255,255,0.02);
  border-collapse: collapse; table-layout: fixed;
}

.match-row td {
  padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: middle;
}

.match-row td:nth-child(1) { text-align: right; width: 35%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-row td:nth-child(2) { text-align: center; width: 30px; padding: 0; }
.match-row td:nth-child(3) { text-align: center; width: 45px; white-space: nowrap; font-weight: 700; }
.match-row td:nth-child(4) { text-align: center; width: 30px; padding: 0; }
.match-row td:nth-child(5) { text-align: left; width: 35%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === SCROLL BUTTONS === */
.scroll-btn {
  position: absolute; top: 50%; transform: translateY(-20%);
  width: 3em; height: 3em;
  background: transparent; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center;
  z-index: 60;
}
.scroll-btn img { max-width: 60%; filter: invert(1); }
#scroll-left-groupstage-button { left: 0; }
#scroll-right-groupstage-button { right: 0; }

/* =========================================================
   4. BRACKET (DESKTOP DEFAULT)
========================================================= */

/* 1. THE VIEWPORT (The Fixed Window) */
.bracketwrapper {
  /* Dimensions */
  width: 100%;
  height: 85vh; /* 🟢 CRITICAL: Fixed height so the 'Camera' logic knows the bounds */
  max-height: 800px; /* Optional cap for huge screens */

  /* Behavior */
  overflow: hidden; /* 🟢 Kills native scrollbars. The JS now handles movement. */
  position: relative;
  z-index: 1;
  padding: 0;

  /* Interaction */
  cursor: grab;
  user-select: none; /* Prevents text highlighting while panning */
  background: var(--app-bg); /* Ensures clean edges */

  /* Reset scrollbars just in case */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bracketwrapper.dragging { cursor: grabbing; }
.bracketwrapper::-webkit-scrollbar { display: none; }
.bracketwrapper.hidden { display: none; }

/* 2. THE CAMERA LAYER (The Moving Canvas) */
.bracket {
  /* Positioning */
  position: absolute !important; /* 🟢 Detaches from flow so translate(x,y) works perfectly */
  top: 0;
  left: 0;

  /* Layout */
  display: flex !important;
  flex-direction: row !important;
  width: max-content !important;

  /* Spacing */
  padding: 50px !important;
  box-sizing: border-box !important;
  padding: 50px 50px 200px 50px !important;

  /* Performance */
  transform-origin: 0 0; /* Zooms from top-left */
  will-change: transform; /* Tells browser to prep GPU */
}

/* 1. THE INVISIBLE BOUNDARY (The Header) */
.bracketwrapper h3 {
    /* Position it above the moving bracket */
    position: relative;
    z-index: 10;

    /* Make it solid so lines disappear behind it */
    background-color: var(--app-bg); /* Matches your dark background #0e1217 */

    /* Cosmetics to make the boundary look natural */
    margin: 0;
    padding-top: 20px;    /* Breathing room top */
    padding-bottom: 20px; /* Extends the "safe zone" below text */
    box-shadow: 0 10px 20px var(--app-bg); /* 🟢 Optional: A fade-out gradient at the edge */

    /* Ensure text stays centered */
    text-align: center;
    color: white;
}

.bracketwrapper {
    /* ☢️ NUCLEAR OPTION: Force this layer to the top */
    position: relative;
    z-index: 20000 !important;

    /* Ensure it has a surface to catch clicks */
    background-color: var(--app-bg);

    /* Hardware acceleration to fix the "Mouse Move" lag */
    transform: translateZ(0);
    will-change: transform;
}

/* 2. OFFSET THE BRACKET (So it doesn't start hidden) */
.bracket {
    /* Push the starting position down so it starts visible BELOW the header */
    top: 70px !important; /* Approx height of your header + padding */
}


.ko-round {
  display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
  min-width: 260px !important; margin-right: 40px !important;
}
.ko-round:last-child { margin-right: 0 !important; }

.match {
  position: relative !important; display: flex !important; flex-direction: column !important;
  width: 100% !important; height: 60px !important; max-height: 60px !important;
  justify-content: center !important; margin: 0 !important; overflow: visible !important;
  transition: transform 0.2s ease;
}

/* Hover Effect */
.match:hover {
  transform: scale(1.02);
  z-index: 10;
}

/* Default Gaps (Desktop) */
.ko-round:nth-child(1) { padding-top: 0 !important; gap: 20px !important; }
.ko-round:nth-child(2) { padding-top: 40px !important; gap: 100px !important; }
.ko-round:nth-child(3) { padding-top: 120px !important; gap: 260px !important; }
.ko-round:nth-child(4) { padding-top: 280px !important; gap: 580px !important; }
.ko-round:nth-child(5) { padding-top: 600px !important; gap: 0 !important; }

/* === MATCH CHIPS (DESKTOP DEFAULT) === */
.match .match-top { border-radius: 2px 2px 0 0; border-bottom: none; }
.match .match-bottom { border-radius: 0 0 2px 2px; border-top: none; }

/* General Team Styling */
.match .team {
  display: flex; align-items: center; width: 100%; height: 100%;
  position: relative; box-sizing: border-box;
  background: #151b22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
  transition: all 0.2s ease;
  padding: 0 10px;
}

/* Team Name: Bold */
.match .team .name {
  color: var(--text-dim);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 8px;
  flex: 1;
}

/* Flag Image */
.match .team .image img {
  display: block;
  width: 20px;
  border-radius: 3px;
}

.placeholder-text { color: var(--text) !important;}

/* Score */
/* 1. The Wrapper becomes the Grid Controller */
.bracket .scorewrapper {
    display: grid;
    /* Create 3 fixed columns of 25px.
       Use 'auto' for the name span area if needed,
       but here we focus on the scores. */
    grid-template-columns: repeat(3, 22px);
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    margin-left: 15px;
}


/* 2. Standardize the Spans */
.bracket .scorewrapper span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative; /* Anchors the penalty 'p' */
    font-weight: bold;
    font-size: 14px;
}

/* 3. The Penalty 'p' - Absolute positioning so it doesn't
      stretch the 25px grid cell */
.bracket .penalty-mark {
    position: absolute !important;
    font-size: 0.65em !important;
    color: #4dd0e1;
    top: -0.3em;
    right: -1.1em;
    pointer-events: none; /* Crucial for 'Pick Your Winner' mode */
}
.winner-p {
    color: #4dd0e1; /* Your Cyan Blue */
    font-weight: bold;
}

.loser-p {
    color: rgba(77, 208, 225, 0.7) !important; /* Match the exact Gray used for losing aggregate scores */
    font-weight: normal; /* Normal weight helps it recede further */
}


.match .team .score {
  margin-left: auto;
  color: var(--text-dim);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.leg-score {
    color: var(--text-dim);; /* Dimmed so the aggregate 'main' score stands out */
    font-weight: normal;
    font-size: 13px;
}




/* ======================================================
   BRACKET WINNER STYLES (Blue + 6px Universal Glow)
   ====================================================== */

/* 1. The Container (Card Background) */
/* Sets the dark card + blue border + resets text to white */
div.match.winner-top .match-top,
div.match.winner-bottom .match-bottom {
  background: #1f2a36 !important;
  border-color: rgba(61, 209, 220, 0.3) !important;
  z-index: 2;
  color: #ffffff;
}

/* 2. The Score: NEON BLUE (6px Glow) */
/* Targets .scorewrapper .score to be specific and win over other rules */
.bracket .match.winner-top .match-top .scorewrapper .score,
.bracket .match.winner-bottom .match-bottom .scorewrapper .score {
  color: #3dd1dc !important; /* Cyan Blue */
  font-weight: 800 !important;
  /* 6px is the sweet spot: Visible glow, but not blurry */
  text-shadow: 0 0 6px rgba(61, 209, 220, 0.6) !important;
}

/* 3. The Name: FORCE WHITE (No Glow) */
/* We explicitly strip the shadow so names don't look fuzzy */
.bracket .match.winner-top .match-top .name,
.bracket .match.winner-bottom .match-bottom .name {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* 4. The Losers: DIMMED GREY */
.bracket .match .match-top:not(.winner) .score,
.bracket .match .match-bottom:not(.winner) .score {
    color: #666 !important;
}

/* 5. Penalty Marks */
/* Keep these sharp (no glow) so the tiny numbers are readable */
.bracket .penalty-mark {
    color: #3dd1dc !important;
    text-shadow: none !important;
}

/* =========================================
   1. SHARED BASE STYLES (Mobile & Desktop)
   ========================================= */
.group-table {
    border-collapse: collapse;
    width: 100%;
    border-spacing: 0;
}

.group-table tbody tr {
    transition: background-color 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ensure the pill from previous versions is gone */
.group-table tbody tr td:first-child::before {
    display: none;
}

/* --- TIER 1 (Qualified) --- */
.row.tier-1 {
    /* The Gradient: Green tint fading to transparent */
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.12) 0%, transparent 85%);
}

/* --- TIER 2 (Wildcard) --- */
.row.tier-2 {
    /* The Gradient: Yellow tint fading to transparent */
    background: linear-gradient(90deg, rgba(241, 196, 15, 0.12) 0%, transparent 85%);
}

/* --- ELIMINATED (The "Sharp Grey" Look) --- */
.row.eliminated {
    /* 1. RESET OPACITY: Keep the container fully solid so it renders sharply */
    opacity: 1;

    /* 2. REMOVE FILTERS: Let the colors exist naturally */
    filter: none;

    background-color: transparent;

    /* 3. GREY TEXT: Explicitly color the text grey.
       #bbb is bright enough to read easily on dark backgrounds,
       but dull enough to look "inactive" compared to bright white. */
    color: #bbb;
}

/* 4. THE FLAG: Dim only the image, don't kill the color */
.row.eliminated .country-img {
    opacity: 0.6; /* Makes the flag look "ghostly" but you can still see it's red/green */
}

/* 5. THE RANK: Make the number darker to push it into background */
.row.eliminated td:first-child {
    color: #666;
    font-weight: 400;
}

/* The Thick Divider Line */
.row.zone-divider {
    border-bottom: 2px solid #555;
}


/* =========================================
   2. MOBILE LAYOUT (< 768px) -> "THE POP"
   ========================================= */
@media (max-width: 767px) {
    /* On Mobile: Color the RANK NUMBER itself for high contrast */

    .row.tier-1 td:first-child {
        color: #2ecc71 !important; /* Force Green */
        font-weight: 800;
    }

    .row.tier-2 td:first-child {
        color: #f1c40f !important; /* Force Yellow */
        font-weight: 800;
    }

    /* Align text center */
    .group-table tbody tr td:first-child {
        text-align: center;
        padding-left: 10px;
    }
}


/* =========================================
   3. DESKTOP LAYOUT (>= 768px) -> "THE PRO"
   ========================================= */
@media (min-width: 768px) {
    /* On Desktop: Keep text white, use Status Dots */

    .row.tier-1 td:first-child,
    .row.tier-2 td:first-child,
    .row.eliminated td:first-child {
        color: inherit; /* Keep standard text color */
        font-weight: 500;
        position: relative;
        text-align: center; /* Center rank number */
    }

    /* The "Status Dot" Generator */
    /* We apply this to ALL rows (including eliminated) to reserve the space */
    .row.tier-1 td:first-child::after,
    .row.tier-2 td:first-child::after,
    .row.eliminated td:first-child::after {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-left: 8px; /* Pushes the dot to the right of the number */
        transform: translateY(-2px);
    }

    /* Color the Dots */
    .row.tier-1 td:first-child::after {
        background-color: #2ecc71; /* Green Dot */
        box-shadow: 0 0 4px rgba(46, 204, 113, 0.4); /* Tiny glow */
    }

    .row.tier-2 td:first-child::after {
        background-color: #f1c40f; /* Yellow Dot */
        box-shadow: 0 0 4px rgba(241, 196, 15, 0.4);
    }

    /* The "Ghost Dot" for Eliminated Rows */
    /* It is transparent, but takes up exactly 6px width so the number '4' aligns with '1,2,3' */
    .row.eliminated td:first-child::after {
        background-color: transparent;
        box-shadow: none;
    }
}

/* Only color the very top and very bottom if you want */
.ucl-qualifier {
    /* No background color, just let the line do the work */
}

.uel-qualifier {
    /* No background */
}

.relegation-playoff {
    /*background-color: rgba(243, 156, 18, 0.1); !* Subtle Orange *!*/
}

.direct-relegation {
    /*background-color: rgba(231, 76, 60, 0.2); !* Red *!*/
}

/* The thick line (This works for everyone) */
.row.zone-divider td {
    border-bottom: 2px solid #666;
}



/* LINES */
.match-lines {
  display: block !important; position: absolute; top: 50%; right: 0; z-index: 1;
  width: 20px; height: 1px; overflow: visible !important;
}
.match-lines.alt { display: none !important; }

.match-lines .line { background: rgba(255, 255, 255, 0.15); position: absolute; }

.match-lines .line.one { width: 100%; height: 1px; top: 0; right: -20px; }
.match-lines .line.two { width: 1px; right: -20px; transform: translateY(-50%); }

.match:nth-child(odd) .match-lines .line.two { top: 0; bottom: auto; transform: none !important; }
.match:nth-child(even) .match-lines .line.two { top: auto; bottom: 0; transform: none !important; }

/* Desktop Lines */
.ko-round:nth-child(1) .match-lines .line.two { height: 40px !important; }
.ko-round:nth-child(2) .match-lines .line.two { height: 80px !important; }
.ko-round:nth-child(3) .match-lines .line.two { height: 160px !important; }
.ko-round:nth-child(4) .match-lines .line.two { height: 320px !important; }
.ko-round:last-child .match-lines { display: none !important; }

.ko-round:not(:first-child) .match::before {
  content: ""; position: absolute; left: -20px; top: 50%; width: 20px; height: 1px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 0;
}

/* Helper Utilities */
.disable-image .image, .disable-seed .seed, .disable-name .name, .disable-score .score { display: none !important; }
.disable-borders, .disable-borders .team { border-width: 0px !important; }

/* =========================================================
   5. MOBILE & UTILITIES
========================================================= */
.carousel-dots {
  display: none; justify-content: center; align-items: center; gap: 8px; padding: 10px 0 6px;
}
.carousel-dot {
  width: 7px; height: 7px; border-radius: 999px; border: 0;
  background: rgba(255, 255, 255, 0.22); cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.carousel-dot.is-active { background: rgba(255, 255, 255, 0.85); transform: scale(1.25); }

#spinner {
  visibility: hidden; width: 80px; height: 80px;
  border: 2px solid #f3f3f3; border-top: 3px solid #f25a41; border-radius: 100%;
  position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
  animation: spin 1s infinite linear; z-index: 99999;
}
#spinner.show { visibility: visible; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.group-table, .match-table, .interactive-data, .group-stage-score {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

@media (max-width: 600px) {
    #run-tournament-button {
        font-size: 0;
        padding: 0 16px !important;
        min-width: auto;
    }

    #run-tournament-button::after {
        content: "RUN";
        font-size: 14px;
    }

    /* MOBILE OVERRIDE: Natural scroll for everything */
    #groupstagewrapper {
        position: relative;
        padding: 0 12px;
        top: 0;
        background: transparent;
        backdrop-filter: none;
        border: none;
    }

    /* MOBILE GRADIENTS: Subtle & Narrow (40px) */
    #groupstagewrapper::before,
    #groupstagewrapper::after {
        width: 40px;
    }

    /* FIXED: LEFT-ALIGNED with proper padding */
    #groupstage {
        padding: 16px 0;
        padding-left: 24px;
        padding-right: 24px;
        gap: 16px;
    }

    /* MOBILE CARD WIDTH */
    .group {
        width: 82vw;
        max-width: 420px;
    }

    /* MOBILE TABLE: Compact */
    .group-table th, .group-table td {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    .group-table td {
        font-size: 11px !important;
    }

    .scroll-btn {
        display: none;
    }

    .carousel-dots {
        display: flex;
    }

    /* === MOBILE VIEW: OPTICAL ZOOM (The Safe Fix) === */
    /* 1. Scale down Desktop layout (Perfect Alignment preserved) */
    .bracket {
        /* Scale the entire bracket by 75% so more fits on screen.
           We rely on the standard desktop margins (40px) to ensure lines connect perfectly. */
        zoom: 0.75;

        /* Reset margins so the zoomed element fits */
        margin: 0 !important;

        /* Adjust padding to create the 'canvas' feel */
        padding: 30px 60px 30px 20px !important;

        width: max-content !important;
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }

    /* 2. Boost fonts so they remain readable at 75% */
    .match .team .name {
        font-size: 14px !important; /* Visual equivalent of ~11px */
        margin-left: 6px !important;
    }

    .match .team .score {
        font-size: 14px !important;
    }


    /* === MOBILE OVERRIDE: THE "PERMANENT CARD" LOOK === */
    .bracketwrapper {
        /* 1. POSITIONING: Floating Card */
        margin-top: 10px !important;
        margin-bottom: 40px !important;
        margin-left: 24px !important;
        margin-right: 24px !important; /* Symmetrical margins */

        width: auto !important;

        /* 2. SCROLLING PHYSICS */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: none; /* Prevents bouncing the whole page */

        /* 3. VISUALS: Always a complete box */
        background: var(--card-bg);

        /* 🟢 CHANGE: Solid border all around, always visible */
        border: 1px solid var(--card-border) !important;

        /* 🟢 CHANGE: Fully rounded corners always */
        border-radius: 24px !important;

        /* Shadow for depth */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    }

    /* 4. CLEANUP: Remove the "Scroll End" hacks */
    /* Since the border is always there, we don't need the fade-in animation */
    .bracketwrapper.scroll-end {
        /* No overrides needed anymore */
    }
}

/* =========================================================
   6. IOS HORIZONTAL SWIPE FIX
========================================================= */
@media (hover: none) and (pointer: coarse) {
  .bracketwrapper {
    touch-action: pan-x pan-y;
    cursor: default;
  }
  .bracket { width: max-content !important; padding-right: 50px; }
}

/* =========================================================
   7. AUTO-DETECT: GIANT LEAGUE TABLES (> 8 Teams)
   =========================================================
   This creates a "Smart Switch". If a table has a 9th row,
   CSS knows it is a League (like UCL) and not a Group (WC).
*/

/* Target Desktop Only (Since Mobile already has colored numbers) */
@media (min-width: 768px) {

    /* 1. HIDE THE DOTS (Reduces Clutter on big lists) */
    .group-table:has(tbody tr:nth-child(9)) .row.tier-1 td:first-child::after,
    .group-table:has(tbody tr:nth-child(9)) .row.tier-2 td:first-child::after,
    .group-table:has(tbody tr:nth-child(9)) .row.eliminated td:first-child::after {
        display: none !important;
    }

    /* 2. RE-CENTER THE NUMBER */
    /* Since we removed the dot (which had margin-left), we center the text again */
    .group-table:has(tbody tr:nth-child(9)) .row td:first-child {
        text-align: center !important;
        padding-left: 8px !important;
    }

    /* 3. COLOR THE NUMBERS (Switch to "Mobile Style" coloring) */
    /* This allows scanning the long list by color instead of counting dots */

    /* Tier 1: Green Number */
    .group-table:has(tbody tr:nth-child(9)) .row.tier-1 td:first-child {
        color: #2ecc71 !important;
        font-weight: 700 !important;
    }

    /* Tier 2: Yellow Number */
    .group-table:has(tbody tr:nth-child(9)) .row.tier-2 td:first-child {
        color: #f1c40f !important;
        font-weight: 700 !important;
    }

    /* Eliminated: Grey Number */
    .group-table:has(tbody tr:nth-child(9)) .row.eliminated td:first-child {
        color: #666 !important;
        font-weight: 400 !important;
    }
}

/* =========================================================
   NEW MATCH GRID SYSTEM (With Nested Accordion Physics)
   ========================================================= */

/* 1. THE MAIN WRAPPER (Toggled by the "MATCHES" button) */
.match-table-grid-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    /* Use a standard ease-in-out for the headers */
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

/* When the "MATCHES" button adds the .open class */
.match-table-grid-wrapper.open {
    grid-template-rows: 1fr;
}

/* Measuring child for the main wrapper */
.match-table-inner {
    min-height: 0;
}

/* 2. THE MATCHDAY CONTAINER */
.matchday-container {
    margin-bottom: 0px;
}

/* 3. THE MATCHDAY HEADER */
.matchday-header {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    padding: 12px 0 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(4px);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.matchday-header:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.matchday-header::after {
    content: '▼';
    font-size: 8px;
    margin-left: 8px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.matchday-container.open .matchday-header::after {
    transform: rotate(180deg);
}
.matchday-container.open .matchday-header{
    color: white;
}

/* 4. THE INTERNAL MATCHDAY CONTENT (Increased to 0.5s) */
.matchday-content {
    display: grid;
    grid-template-rows: 0fr;
    /* Use a longer time, but a "Snappier" curve */
    /* This curve has a long 'tail' so the extra distance in tall lists
       is covered during the fast middle section. */
    transition: grid-template-rows 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.matchday-container.open .matchday-content {
    grid-template-rows: 1fr;
}

/* Necessary for the grid height calculation */
.matchday-inner {
    min-height: 0;
}

/* 5. THE MATCH ROW */
.match-grid-row {
    display: grid;
    grid-template-columns: 1fr 24px 60px 24px 1fr;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 8px 12px;
    width: 100%;
}

/* 6. THE CELLS */
.match-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    font-size: 13px;
}

.cell-right { text-align: right; justify-self: end; width: 100%; }
.cell-center { text-align: center; justify-self: center; width: 100%; }
.cell-left { text-align: left; justify-self: start; width: 100%; }

.match-score {
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.match-flag img {
    display: block;
    width: 20px;
    border-radius: 2px;
    margin: 0 auto;
}

.team-initial-icon {
    width: 20px; height: 20px; background: rgba(61, 209, 220, 0.2);
    color: var(--accent); font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; line-height: 1; text-transform: uppercase;
    border: 1px solid rgba(61, 209, 220, 0.3); flex-shrink: 0;
}

/* =========================================================
   8. GHOSTBUSTER FIX (The "Click-Through" Patch)
   =========================================================
   This fixes the issue where the transparent Group Stage
   wrapper was blocking the mouse from reaching the Bracket.
*/

/* 1. Make the wrapper invisible to the mouse */
#groupstagewrapper.layout-static {
    pointer-events: none !important;
}

/* 2. Make the content (Table, Buttons) visible to the mouse again */
#groupstagewrapper.layout-static * {
    pointer-events: auto !important;
}

/* =========================================
   MOBILE STICKY HEADER FIX
   ========================================= */
@media (max-width: 767px) {
    .bracketwrapper h3 {
        /* 1. The Anchor */
        position: sticky;
        left: 0;

        /* 2. Sizing */
        width: 100%; /* Ensures it spans the full viewport width */

        /* 3. Layering */
        z-index: 100; /* Float above the bracket lines */

        /*!* 4. Camouflage *!*/
        /*!* We need a solid background so the bracket lines*/
        /*   don't show through the text as they slide under it. *!*/
        /*background-color: var(--card-bg);*/

        /* 5. Polish */
        /* Match the rounded corner of the container */
        border-top-left-radius: 24px;

        /* Reset margins to fit snug */
        margin-top: 0;
        padding-top: 20px;
        padding-bottom: 10px;
    }
}
/* ########## SEO ########### */
/* Hides element while keeping it in the DOM for Bots and Screen Readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 600px) {
    /* 1. Unlock the Wrapper Height */
    .bracketwrapper {
        height: auto !important;       /* Overrides 85vh so it can grow */
        max-height: none !important;   /* Removes any height caps */
        /* REMOVED: display: block !important; (This was the bug) */
    }

    /* 2. Force the Bracket to push the wrapper open */
    .bracket {
        position: relative !important; /* Switch from absolute to relative */
        top: 0 !important;             /* Reset desktop positioning */
        margin: 0 !important;          /* Ensure no negative margins pull it up */
    }
}


/* ======================================
   legal shit
   ===================================== */

.spa-overlay {
    position: fixed;
    inset: 0;
    background: #0e1217; /* Match your app background */
    z-index: 30000; /* Higher than your app-header (20001) */
    transform: translateY(100%); /* Start off-screen */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    display: none; /* Hidden by default */
}

.spa-overlay.is-visible {
    display: block;
    transform: translateY(0);
}

.overlay-header {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    background: var(--app-bg);
    z-index: 100;
    backdrop-filter: blur(10px);
}

.overlay-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-dim);
    letter-spacing: 2px;
}

.close-overlay {
    background: transparent;
    color: #3dd1dc;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

/* The Scrollable Body of the Overlay */
.overlay-body {
    padding: 40px 20px 100px 20px;
    max-width: 800px;
    margin: 0 auto;
    color: var(--text);
}

/* Legal Document Typography */
.legal-document h1 {
    color: #555; /* 🟢 Changed from var(--accent) to dark grey */
    font-size: 14px; /* 🟢 Reduced from 24px to 14px ("way smaller") */
    font-weight: 800;
    margin-bottom: 16px;
    /*text-transform: uppercase;*/
    letter-spacing: 1px;
}

.legal-document h2 {
    color: #666; /* 🟢 Dark grey for sub-headers too */
    font-size: 13px;
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 10px;
}

.legal-document h3 {
    color: #777;
    font-size: 12px;
    font-weight: 700;
    margin-top: 16px;
    margin-bottom: 8px;
}

.legal-document p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-size: 13px; /* Slightly smaller body text to match new headers */
    margin-bottom: 16px;
}

.legal-document strong {
    color: var(--text);
}

.legal-document hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 40px 0;
}

.modal{}

@media (max-width: 768px) {
    /* 1. Move Modal ABOVE the Menu (Z-index 20001 -> 20005) */
    .modal {
        z-index: 30001 !important;

        /* 2. Remove the dark backdrop (the menu is already dark enough) */
        background: transparent !important;

        /* 3. 🟢 THE TRICK: Make the overlay "ghostly" to clicks */
        /* This lets you click "through" the empty space to hit the menu links behind it */
        pointer-events: none;
    }

    /* 4. Restore clicks ONLY for the actual card content */
    .modal .modal-card {
        pointer-events: auto; /* The card itself is solid/clickable */

        /* Optional: Add a strong shadow so it separates from the menu visually */
        box-shadow: 0 0 50px rgba(0,0,0,0.8);
        border: 1px solid rgba(255,255,255,0.1);
    }
}



/* =========================================
   MODAL: HYBRID BEHAVIOR
   Mobile = Pop-in (Instant)
   Desktop = Fade-in (Smooth)
   ========================================= */

/* 1. The Backdrop (Base / Mobile) */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30000;

    /* Layout */
    align-items: center;
    justify-content: center;
    padding: 20px;

    /* 🟢 MOBILE: Instant Toggle (Pop-in) */
    display: none;

    touch-action: none;
    -ms-touch-action: none;
}

.modal-backdrop.is-visible {
    /* 🟢 MOBILE: Instant Visible */
    display: flex;
}

/* 2. The Modal Card (Base / Mobile) */
.modal-card {
    background: #22282b;
    max-width: 72vw;
    max-height: 26vh;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* 🟢 MOBILE: No Transforms/Opacity. Just solid. */
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------
   3. DESKTOP OVERRIDES (Smooth Animations)
   --------------------------------------------------------- */
@media (min-width: 769px) {

    /* Backdrop: Use Visibility for smooth fade */
    .modal-backdrop {
        /* Keep it in layout so we can animate */
        display: flex;

        /* Start Hidden */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        /* Enable Transition */
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .modal-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Card: Use Transform + Opacity for "Pop & Fade" */
    .modal-card {
        opacity: 0;
        max-width: 26vw;
        transform: scale(0.9) translateY(20px);
        transition:
            transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
            opacity 0.3s ease;
    }

    .modal-backdrop.is-visible .modal-card {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 3. Header & Tab Styling (Muted Greyish) */
.modal-header {
    padding-top: 8px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-footer {
    padding-top: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-tabs {
    display: flex;
    gap: 16px;
}

.tab-btn {
    background: none;
    border: none;
    color: #555; /* 🟢 Dark greyish title */
    font-weight: 700;
    font-size: 12px;
    /*text-transform: uppercase;*/
    letter-spacing: 1.2px;
    cursor: pointer;
    padding: 8px 4px;
    position: relative;
    transition: color 0.3s ease;
}

.tab-btn.active {
    color: var(--text);
}

/* Minimalist Underline for active tab */
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent); /* Your Cyan for the thin indicator line */
    border-radius: 2px;
}

.modal-close {
    /*background: rgba(255, 255, 255, 0.03);*/
    /*border: 1px solid rgba(255, 255, 255, 0.05);*/
    /*color: var(--text-dim);*/
    /*width: 32px;*/
    /*height: 32px;*/
    /*border-radius: 50%;*/
    /*cursor: pointer;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*font-size: 14px;*/
    /*line-height: 0;*/

    background: rgb(34 40 43);
    border: none;
    color: var(--text-dim);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    line-height: 0;
    position: relative;
    /*right: 21px;*/
    @media (max-width: 767px){
        font-size:2em;
    }
}

.modal-close:hover{
    color: white;
}

/* =========================================================
   4. SCROLL LOCK (Modal & Menu)
========================================================= */

/* 🟢 FIX: We must lock HTML because 'overflow-x: hidden' moved the scrollbar there. */
html:has(body.modal-open),
html:has(body.menu-is-open), /* <--- ADD THIS LINE */
body.modal-open,
body.menu-is-open {
    overflow: hidden !important;
    overscroll-behavior: none;
    scrollbar-gutter: stable;
}

/* Ensure the modal-body remains the only scrollable area */
.modal-body {
    padding: 20px 24px 40px 24px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch; /* Essential for smooth scrolling on iPhones */

    /* 🟢 Dual Fade Mask: Fades both top and bottom */
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

/*!* 2. THE CHROME/SAFARI SPECIAL: This is usually what re-triggers on iOS *!*/
/*body.modal-open::-webkit-scrollbar {*/
/*    display: none !important;*/
/*    width: 0 !important;*/
/*    height: 0 !important;*/
/*}*/

/* Standardized scrollbar */
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}




/* 1. Standard approach (Firefox) */
* {
    scrollbar-width: none;
}

/* 2. Webkit approach (Safari, Chrome, iOS) */
::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 3. Redundant safety for the body specifically */
body {
    -ms-overflow-style: none; /* Old Edge/IE */
    scrollbar-width: none;
}

body::-webkit-scrollbar {
    display: none !important;
}


/* 1. Re-enable for the modal container (standard) */
.modal-body {
    scrollbar-width: thin !important; /* For Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important; /* For Firefox */
}

/* 2. Redefine the look for Webkit (iOS/Safari/Chrome) */
/* We have to rebuild the "track" and the "thumb" from scratch */

/* 1. Standard scrollbar track */
.modal-body::-webkit-scrollbar {
    display: block !important;
    width: 10px !important; /* Slightly wider so we have room for the padding */
}

/* 2. The Thumb (The moving part) */
.modal-body::-webkit-scrollbar-thumb {
    /* 🟢 THE KEY: Use a transparent border to "push" the thumb away from edges */
    background-color: rgba(255, 255, 255, 0.2) !important;
    background-clip: padding-box !important;

    /* This creates a 4px gap at top/bottom and 3px on sides */
    border: 3px solid transparent !important;
    border-top: 10px solid transparent !important;
    border-bottom: 10px solid transparent !important;

    border-radius: 10px !important;
}

/* 3. The Track (The background part) */
.modal-body::-webkit-scrollbar-track {
    background: transparent !important;
    /* 🟢 Ensures the track doesn't overlap the rounded border of the card */
    margin-top: 15px;
    margin-bottom: 15px;
}

/* --- UTILITY: Hides elements completely --- */
.hidden {
    display: none !important;
}



/* --- ABOUT VIEW (The "Pseudo-Page") --- */
#about-view {
    /* Fixed position covering the screen */
    position: fixed;
    inset: 0;
    z-index: 20002;
    background-color: #0e1217;
    overflow-y: auto;

    /* 🚀 ANIMATION SETUP */

    /* 1. Start off-screen (pushed down 100%) */
    transform: translateX(-100%);

    /* 2. Smooth Physics (The "Apple" Ease) */
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);

    /* 3. Ensure it renders so it can slide (Overrides .hidden) */
    display: block !important;

    /* 4. Optional: Fade in slightly while sliding for extra smoothness */
    /*opacity: 0.5;*/
}

/* The Active State (When open) */
#about-view.active {
    transform: translateX(0); /* Slide to normal position */
    opacity: 1;
}

@media (max-width: 767px)
{
    #about-view {
        z-index: 30001;
    }
}

/* --- ABOUT HEADER --- */
.about-header {
    height: 70px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    padding: 0 20px;

    /* Stick to top when scrolling */
    position: sticky;
    top: 0;
    background-color: #0e1217;
}

/* --- BACK BUTTON --- */
.back-btn {
    background: none;
    border: none;
    color: #aaa; /* Dimmed by default */
    cursor: pointer;
    font-size: 16px;
    margin-right: 15px;
    padding: 8px; /* Bigger click target */
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.back-btn:hover {
    color: #fff; /* Bright on hover */
}

/* =========================================================
   9. CONTENT FREEZE & HEADER PRIORITY
========================================================= */

/* FREEZE CONTENT:
   Disable interaction if Modal OR Menu is open.
   (Removed 'overflow: hidden' to fix mobile animation snap)
*/
body.modal-open #app-content,
body.menu-is-open #app-content {
    pointer-events: none !important;
    touch-action: none !important;
    /* 🔴 REMOVED: overflow: hidden !important; */
}

/* UNLOCK HEADER */
body.modal-open #app-header,
body.menu-is-open #app-header {
    z-index: 30050 !important;
    pointer-events: auto !important;
}

/* =========================================================
   10. VISUAL DYNAMICS (Final Mobile-Stable Version)
========================================================= */

/* BASE STATE: Prepare the transition */
#app-content {
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: opacity;
}

/* DESKTOP: Full visual experience (Scale + Dim) */
@media (min-width: 769px) {
    #app-content {
        transform-origin: center top;
        will-change: transform, opacity;
        transform: scale(1) translate3d(0, 0, 0);
    }

    body.menu-is-open #app-content,
    body.modal-open #app-content {
        transform: scale(0.96) translate3d(0, 10px, 0);
        opacity: 0.6;
        border-radius: 16px;
    }
}

/* MOBILE: Just Dimming (No Scale/Translate = No Snapping) */
@media (max-width: 768px) {
    body.menu-is-open #app-content,
    body.modal-open #app-content {
        /* 🟢 Simply fade the background.
           This makes the menu/modal stand out without triggering
           the iPhone's transform lag. */
        opacity: 0.3;

        /* 🔴 NO transforms here (prevents snapping) */
        transform: none !important;
    }
}