/* Force your article.card back to your intended look */
article.card {
  background-color: transparent !important;   /* remove bootstrap white BG */
  box-shadow: none !important;                /* remove bootstrap shadow */
  border: none !important;                    /* remove bootstrap border */
  transform: none !important;                 /* undo any hover transforms */
}

/* If bootstrap changed .card:hover, undo it specifically */
article.card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* If you used .card-front inside article.card, be explicit */
article.card .card-front {
  background-color: transparent !important;
}


        /* ===============================
   Basic / Global Styles & Tunables
   =============================== */

        /* Top-level tuning variables:
   - Change stat colors below (attack/defense/magic/aura)
   - Change overlay gradient / opacity via --overlay-grad-*
   - Change text shadow via --text-shadow
*/
        :root {
            --bg: #1f2023;
            --card-bg: #2b2c2f;
            --muted-text: #d7d7db;
            --grid-gap: 12px;

            /* ----- Progress bar colors (easy to edit) ----- */
            --attack-color: #e14b4b;
            /* red / Attack */
            --defense-color: #48b070;
            /* green / Defense */
            --magic-color: #6f6ef1;
            /* purple / Magic */
            --aura-color: #f0b92a;
            /* yellow / Aura */

            /* ----- Overlay / stats background gradient (opacity consistency) -----
     The name & level overlays and the stats container will use the same
     gradient so their perceived opacity matches.
     Edit the rgba() values to increase/decrease opacity.
  */
            --overlay-grad-start: rgba(0, 0, 0, 0.14);
            --overlay-grad-end: rgba(0, 0, 0, 0.22);

            /* Text shadow for readability (applies to labels, percentages, name, level) */
            --text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);

            /* Card sizing (fixed) */
            --card-width: 220px;
            --card-height: 330px;
        }

        /* basic resets */
        * {
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
            background: var(--bg);
            color: var(--muted-text);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            padding: 32px;
            line-height: 1.4;
        }

        /* Header */
        .site-header {
            max-width: 1200px;
            margin: 0 auto 20px;
            text-align: left;
        }

        .site-header h1 {
            margin: 0 0 8px;
            color: #f3f4f6;
            font-size: 2.1rem;
            letter-spacing: -0.5px;
        }

        .legend {
            margin: 0;
            padding: 12px 14px;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 8px;
            color: #cfcfd3;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
            white-space: pre-wrap;
            line-height: 1.5;
            font-size: 0.95rem;
        }

        /* ===============================
   Layout: Rows with wrapping (fixed-size cards)
   =============================== */

        .gallery {
            max-width: 1400px;
            margin: 20px auto 80px;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            gap: var(--grid-gap);
            align-items: flex-start;
        }

        .row-1 {
            justify-content: center;
        }

        .row-2 {
            justify-content: flex-start;
        }

        /* ===============================
   Card: fixed sizes and layout
   =============================== */

        .card {
            cursor: pointer;
            perspective: 1200px;
            width: var(--card-width);
            height: var(--card-height);
            flex: 0 0 var(--card-width);
            position: relative;
            outline: none;
        }

        .card-inner {
            position: absolute;
            inset: 0;
            border-radius: 10px;
            transition: transform 0.6s cubic-bezier(.2, .9, .2, 1), box-shadow 0.25s;
            transform-style: preserve-3d;
            will-change: transform;
            overflow: visible;
        }

        .card:not(.is-flipped):hover .card-inner {
            transform: translateY(-8px);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 6px 12px rgba(0, 0, 0, 0.4);
        }

        .card.is-flipped .card-inner {
            transform: rotateY(180deg);
        }

        .card-front,
        .card-back {
            position: absolute;
            inset: 0;
            border-radius: 10px;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .card-front {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
        }

        .card-back {
            transform: rotateY(180deg);
            background: linear-gradient(180deg, #2e2f32 0%, #252527 100%);
            color: var(--muted-text);
            padding: 12px;
            border: 1px solid rgba(255, 255, 255, 0.02);
            box-sizing: border-box;
        }

        /* ===============================
   Overlays: NAME (left) and LEVEL (right)
   - Name moved to top-left in its own overlay (.overlay.name-left)
   - Level remains top-right in .overlay.top-right
   - Both overlays use same gradient/opacity as .stats (consistency)
   =============================== */

        /* Base overlay styling (both name & level) */
        .overlay {
            position: absolute;
            padding: 6px 10px;
            font-size: 0.82rem;
            border-radius: 6px;
            color: #f7f7f8;
            z-index: 6;
            display: flex;
            align-items: center;
            gap: 8px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            /* Use same background as stats for consistent opacity */
            background: linear-gradient(180deg, var(--overlay-grad-start), var(--overlay-grad-end));
        }

        /* Name container (left) */
        .overlay.name-left {
            top: 10px;
            left: 10px;
            right: auto;
            /* Reserve space so it won't overlap the level overlay */
            max-width: calc(100% - 130px);
            /* tweak if you change level width */
        }

        /* Character name style — will ellipsize if too long */
        .overlay .char-name {
            display: block;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 700;
            font-size: 0.9rem;
            /* Text shadow for readability over images */
            text-shadow: var(--text-shadow);
        }


        /* Level container (right) */
        .overlay.top-right {
            top: 10px;
            right: 10px;
            left: auto;
            /* Keep level compact */
            padding: 6px 10px;
            font-weight: 700;
            font-size: 0.86rem;
            text-shadow: var(--text-shadow);
        }

        /* Level text inside the right overlay (in case you want a separate span) */
        .overlay.top-right .char-level {
            display: inline-block;
            white-space: nowrap;
            color: #ffffff;
            text-shadow: var(--text-shadow);
        }


        /* ============================
   Dynamic name box (top-left)
   ============================
   Add this near your existing .overlay/.card-front styles
*/

        /* Name box: grows with the name length */
        .name-box {
            position: absolute;
            top: 10px;
            left: 10px;
            /* pinned to top-left of the card */
            display: inline-block;
            /* allows width to be determined by content */
            padding: 6px 10px;
            font-weight: 600;
            font-size: 0.88rem;
            background: var(--overlay-bg);
            /* uses your global overlay opacity variable */
            color: #f7f7f8;
            border-radius: 6px;
            white-space: nowrap;
            /* prevents wrapping, so box expands horizontally */
            z-index: 6;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
            /* improves readability on busy images */

            /* keep name from overflowing card completely:
     subtract estimated space reserved for the top-right level box (adjust as needed) */
            max-width: calc(100% - 120px);
            /* ensures it won't overlap the level box on the right */
            overflow: visible;
            /* important: let the box expand rather than clip the text */
        }

        /* Shorten names visually if you want to force a wrap at tiny device widths:
   remove or change if you want NO truncation at all. */
        .name-box .char-name {
            display: inline-block;
            min-width: 0;
            overflow: visible;
            white-space: nowrap;
            text-overflow: ellipsis;
            /* fallback — won't apply unless you set overflow:hidden */
        }

        /* Keep existing top-right level box (slight tweak to ensure it stays pinned) */
        .overlay.top-right {
            top: 10px;
            right: 10px;
            left: auto;
            /* important — don't force it to stretch across the top */
            max-width: 100px;
            /* keep level box small and consistent */
            padding: 6px 10px;
            font-weight: 700;
            white-space: nowrap;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
            z-index: 6;
        }

        /* Optional responsive tweak: if card gets very narrow, allow name to shrink visually */
        @media (max-width: 360px) {
            .name-box {
                padding: 5px 8px;
                font-size: 0.8rem;
                max-width: calc(100% - 110px);
            }

            .overlay.top-right {
                max-width: 80px;
                padding: 5px 8px;
                font-size: 0.8rem;
            }
        }

        /* ===============================
   Stats: Slim, colored progress bars with percentage to the left
   - .stat-row now uses 3 columns: label | pct | bar
   - percentages moved into .stat-pct (left of bar)
   - each stat row gets a class: .attack / .defense / .magic / .aura
   =============================== */

        .stats {
            position: absolute;
            bottom: 8px;
            left: 8px;
            right: 8px;
            z-index: 5;
            display: grid;
            gap: 6px;
            padding: 8px;
            border-radius: 8px;
            background: linear-gradient(180deg, var(--overlay-grad-start), var(--overlay-grad-end));
            align-items: center;
        }

        /* stat-row columns: label(64px) | pct(36px) | bar(1fr) */
        .stat-row {
            display: grid;
            grid-template-columns: 64px 36px 1fr;
            align-items: center;
            gap: 8px;
            font-size: 0.72rem;
            line-height: 1;
        }

        /* Labels with text shadow for readability */
        .stat-label {
            color: #ffffff;
            opacity: 0.95;
            font-weight: 700;
            font-size: 0.72rem;
            text-shadow: var(--text-shadow);
            /* applies requested text shadow */
        }

        /* Percentage text located left of bar */
        .stat-pct {
            text-align: right;
            color: #ffffff;
            /* white as requested */
            font-weight: 700;
            font-size: 0.72rem;
            text-shadow: var(--text-shadow);
            /* same shadow as other text */
            padding-right: 6px;
            min-width: 0;
        }

        /* progress bar background (slim) */
        .stat-bar {
            height: 10px;
            width: 100%;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }

        /* stat-fill now holds only the colored fill (no text inside) */
        .stat-fill {
            height: 100%;
            width: 0%;
            /* width is set inline in HTML (style="width:NN%") */
            border-radius: 8px 0 0 8px;
            transition: width 0.4s ease;
        }

        /* ---------- Color assignments for each stat (use these vars to edit colors) ----------
   Change the variables at :root to update colors globally.
   Or change them here for per-stat overrides.
*/
        .stat-row.attack .stat-fill {
            background: var(--attack-color);
        }

        .stat-row.defense .stat-fill {
            background: var(--defense-color);
        }

        .stat-row.magic .stat-fill {
            background: var(--magic-color);
        }

        .stat-row.aura .stat-fill {
            background: var(--aura-color);
        }

        /* small-screen tweaks (cards remain fixed size; we only adjust tiny typography) */
        @media (max-width:420px) {
            .overlay {
                padding: 4px 8px;
                font-size: 0.78rem;
            }

            .stat-label {
                font-size: 0.68rem;
            }

            .stat-row {
                grid-template-columns: 56px 34px 1fr;
            }

            .stat-pct {
                font-size: 0.68rem;
                padding-right: 4px;
            }

            .stat-bar {
                height: 9px;
            }
        }

        /* back content scroll styling */
        .back-content {
            height: 100%;
            overflow-y: auto;
            padding-right: 6px;
        }

        .back-header {
            margin: 0 0 8px 0;
            font-size: 1rem;
            color: #f3f4f6;
        }

        .back-content h3 {
            margin: 8px 0 4px 0;
            font-size: 0.9rem;
            color: #e6e7e9;
        }

        .back-content p {
            margin: 0 0 8px 0;
            font-size: 0.88rem;
            color: #cfcfd3;
        }

        .back-content ol {
            margin: 4px 0 8px 18px;
        }


        /* -----------------------------
   Subtle sleek grey scrollbar
   Place this near your `.back-content` styles
   ----------------------------- */

        /* WebKit browsers (Chrome, Edge, Safari) */
        .back-content::-webkit-scrollbar {
            width: 8px;
            /* thickness (vertical scrollbars) */
            height: 8px;
            /* thickness for horizontal scrollbars */
        }

        .back-content::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.03);
            /* very faint track */
            border-radius: 6px;
        }

        .back-content::-webkit-scrollbar-thumb {
            background: rgba(200, 200, 200, 0.12);
            /* subtle grey thumb */
            border-radius: 6px;
            border: 2px solid rgba(0, 0, 0, 0.06);
            /* slight inner border to give depth */
        }

        /* Slightly more visible on hover for affordance */
        .back-content::-webkit-scrollbar-thumb:hover {
            background: rgba(200, 200, 200, 0.18);
        }

        /* Firefox */
        .back-content {
            /* 'thin' keeps it subtle; colors: thumb track */
            scrollbar-width: thin;
            scrollbar-color: rgba(200, 200, 200, 0.12) rgba(255, 255, 255, 0.03);
        }



        /* subtle focus ring */
        .card:focus-visible {
            box-shadow: 0 0 0 3px rgba(150, 170, 220, 0.15);
            border-radius: 10px;
        }





        /* Dynamically expanding name boxes on cards */
        .overlay.name-left {
            display: inline-flex;
            /* allows width to match text content */
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.55);
            /* same subtle background */
            padding: 0.35em 0.75em;
            border-radius: 0.5em;
            white-space: nowrap;
            /* keep full name on one line */
            width: auto;
            /* auto width based on text */
            max-width: 95%;
            /* prevent overflow off card edge */
            text-overflow: clip;
            /* no truncation */
        }

        .overlay.name-left .char-name {
            display: inline-block;

            color: #fff;
            line-height: 1.2;
            font-weight: 600;
        }


        /* Character name link styling */
        .overlay.name-left a {
            color: inherit;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-block;
        }

        .overlay.name-left a:hover {
            color: #ff4444;
            transform: translateY(-2px);
            text-shadow: 0 2px 8px rgba(255, 68, 68, 0.4);
        }







/* ========================================================
   4. NAVIGATION
   ======================================================== */

/* --- Mobile Navigation Circle --- */
.mobile-nav {
  position: fixed;
  bottom: 15px;
  right: -140px; /* hidden by default */
  height: 250px;
  width: 250px;
  border-radius: 50% 0 0 50%;
  background: rgba(255,255,255,0.02);
  border: 2px solid #9f2a2a;
  z-index: 9999;
  opacity: 0.5;
  backdrop-filter: blur(3px);
  transition: right 0.3s ease, opacity 0.3s ease;
  pointer-events: none; /* Base element not clickable */
}

.mobile-nav.open {
  right: 0 !important;
  opacity: 1;
}

.mobile-nav:hover {
  opacity: 1;
}

/* Make specific nav elements clickable */
.mobile-nav .nav-tab,
.mobile-nav .side-nav,
.mobile-nav .nav-link {
  pointer-events: auto;
}

/* --- Side Navigation Links --- */
.side-nav {
  position: absolute;
  bottom: 15px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  z-index: 10000;
}

.nav-link {
  display: inline-block;
  background: #9f2a2a;
  color: white;
  text-decoration: none;
  padding: 1px 25px;
  border-radius: 20px 0 0 70px;
  transition: all 0.3s ease;
  font-family: monospace;
  letter-spacing: 2px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-link:hover {
  background: #b53333;
  padding-left: 55px;
  color: #ffcccc;
  box-shadow: -6px 6px 16px rgba(0,0,0,0.4);
  transform: scale(1.02);
}

.nav-link .nav-content {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s ease;
}

.nav-link:hover .nav-content {
  transform: translateX(-10px);
}

.nav-link i {
  margin-right: 8px;
  font-size: 14px;
  min-width: 16px;
}

/* Nav link padding lengths (left side extension) */
.nav-link.home { 
  padding-left: 40px;  /* shortest */
}

.nav-link.characters { 
  padding-left: 30px; 
}

.nav-link.locations  { 
  padding-left: 50px;  /* longest */
}

.nav-link.worldinfo { 
  padding-left: 40px;  /* longest */
}

.nav-link.stories { 
  padding-left: 40px; 
}

.nav-link.au { 
  padding-left: 40px;  /* shortest */
}

/* --- Navigation Tab Toggle --- */
.nav-tab {
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  width: 20px;
  height: 60px;
  background: #9f2a2a;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  z-index: 10000;
  transition: background 0.3s ease;
}

.nav-tab:hover {
  background: #b53333;
}



/* --- Mobile Breakpoints --- */
@media (max-width: 768px) {
  /* Navigation adjustments */
  .mobile-nav {
    height: 150px;
    width: 150px;
    right: -125px;
    border-radius: 60% 0 0 60%;
    transform: scale(0.65);
    transform-origin: bottom right;
  }
}


.card-back ul {
  padding-left: 0.5rem;
  margin: 0;
  list-style: none;
}

.card-back li {
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.card-back ol {
  padding-left: 1rem;        /* reduces left indent */
  margin-left: 0;             /* removes default browser margin */
  list-style-position: inside; /* keeps numbers aligned with text */
}

.card-back li {
  margin-bottom: 0.4rem;      /* space between attacks */
  text-indent: 0;             /* prevents extra hanging indentation */
  line-height: 1.3;           /* improves readability */
}

.card-back ol {
  list-style: none;    /* hides the numbers */
  padding-left: 0.5rem;
  margin-left: 0;
}


.card-back ol {
    list-style: none;    /* hides the numbers */
    padding-left: 0.5rem;
    margin-left: 0;
}

.card-back li {
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

/* Attack name (strong) */
.card-back li strong {
    font-size: 0.92rem;   /* slightly larger */
    color: #      ;       /* optional: color to make names pop */
    display: inline-block;
    margin-right: 0.25rem;
}

/* Attack description */
.card-back li .attack-desc {
    font-size: 0.84rem;   /* smaller than name */
    color: #cfcfd3;       /* muted text for readability */
    display: inline;
}