/* ============================================================
   MtgNie Components — Design Tokens & Shared Effects
   ============================================================
   Single theme file: tokens + effects + bundled dependencies.
   Consumer adds: <link href="_content/MtgNie.Components/mtgnie-theme.css" rel="stylesheet" />
   ============================================================ */

/* --- Bundled: flag-icons 7.2.3 (lipis/flag-icons) --- */
@import url("lib/flag-icons/css/flag-icons.min.css");

/* --- Condition Tokens --- */
:root {
    --mtg-cond-mt: #3b82f6;
    --mtg-cond-mt-dark: #1e40af;
    --mtg-cond-nm: #22c55e;
    --mtg-cond-nm-dark: #15803d;
    --mtg-cond-ex: #eab308;
    --mtg-cond-ex-dark: #a16207;
    --mtg-cond-gd: #f97316;
    --mtg-cond-gd-dark: #c2410c;
    --mtg-cond-lp: #c2956b;
    --mtg-cond-lp-dark: #8b6914;
    --mtg-cond-pl: #92643a;
    --mtg-cond-pl-dark: #6b4423;
    --mtg-cond-po: #ef4444;
    --mtg-cond-po-dark: #b91c1c;

    /* --- Rarity Tokens (shared: ExpansionIcon + RarityBadge) --- */
    --mtg-rarity-common: #1a1a1a;
    --mtg-rarity-uncommon: #c0c0c0;
    --mtg-rarity-rare: #d4a017;
    --mtg-rarity-mythic: #e84a2e;
    --mtg-rarity-special: #a855f7;

    /* --- Property Tokens --- */
    --mtg-prop-foil: #fbbf24;
    --mtg-prop-signed: #d4a90f;
    --mtg-prop-altered: #8a6c08;
    --mtg-prop-fullart: #a855f7;
    --mtg-prop-graded: #3b82f6;
    --mtg-prop-collection: #ef4444;
    --mtg-prop-sleeper: #6366f1;
    --mtg-prop-listed: #22c55e;
    --mtg-prop-sorted: #f97316;
    --mtg-prop-stored: #92643a;

    /* --- Icon States --- */
    --mtg-icon-inactive: #d1d5db;

    /* --- Fallback --- */
    --mtg-fallback: #9ca3af;
    --mtg-fallback-dark: #6b7280;
}

/* ============================================================
   Shared Hover Effects
   Applied via class: mtg-hover-{key}
   ============================================================ */

.mtg-hover-scale-up {
    transition: transform 0.15s ease;
}
.mtg-hover-scale-up:hover {
    transform: scale(1.15);
}

.mtg-hover-pulse {
    transition: transform 0.15s ease;
}
.mtg-hover-pulse:hover {
    animation: mtg-pulse 0.6s ease-in-out infinite alternate;
}

.mtg-hover-shadow {
    transition: box-shadow 0.15s ease;
}
.mtg-hover-shadow:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.mtg-hover-glow {
    transition: box-shadow 0.15s ease, filter 0.15s ease;
}
.mtg-hover-glow:hover {
    filter: brightness(1.2);
}

/* ============================================================
   Shared Permanent Effects
   Applied via class: mtg-shadow, mtg-glow
   ============================================================ */

.mtg-shadow {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* mtg-glow color is set via inline --mtg-glow-color on each component */
.mtg-glow {
    box-shadow: 0 0 6px 2px var(--mtg-glow-color, rgba(0, 0, 0, 0.15));
}

/* When both shadow and glow are active, combine them */
.mtg-shadow.mtg-glow {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 6px 2px var(--mtg-glow-color, rgba(0, 0, 0, 0.15));
}

/* ============================================================
   Shared Color Schemes  —  base layer (bg, text, border)
   Components set --mtg-color, --mtg-dark inline.
   Styles (below) override specific properties from this layer.
   ============================================================ */

/* Filled: bg=Color, text=DarkColor, border=DarkColor */
.mtg-scheme-filled {
    background-color: var(--mtg-color);
    color: var(--mtg-dark);
    border: 1.5px solid var(--mtg-dark);
}

/* Inverted: bg=Color, text=white, border=DarkColor */
.mtg-scheme-inverted {
    background-color: var(--mtg-color);
    color: #ffffff;
    border: 1.5px solid var(--mtg-dark);
}

/* Outlined: bg=white, text=DarkColor, border=DarkColor */
.mtg-scheme-outlined {
    background-color: #ffffff;
    color: var(--mtg-dark);
    border: 1.5px solid var(--mtg-dark);
}

/* OutlinedColor: bg=white, text=Color, border=Color */
.mtg-scheme-outlined-color {
    background-color: #ffffff;
    color: var(--mtg-color);
    border: 1.5px solid var(--mtg-color);
}

/* ============================================================
   Shared Styles  —  applied ON TOP of color schemes
   Components set --mtg-color, --mtg-dark, --mtg-scale inline.
   Pixel values scale via calc(Xpx * var(--mtg-scale)).

   ┌─────────┬────────────────────────────────────────────────────┐
   │  Style  │  Overrides from scheme                            │
   ├─────────┼────────────────────────────────────────────────────┤
   │  Flat   │  (none — scheme applies as-is)                    │
   │  3D     │  border → none + border-bottom for depth          │
   │         │  + transform, box-shadow, transition               │
   │         │  Preserves: background-color, color (from scheme) │
   │  Dome   │  background → gradient, border → none             │
   │         │  border-radius → 50%, aspect-ratio → 1            │
   │         │  font-weight → 700                                │
   │         │  + box-shadow, text-shadow, transition             │
   │         │  Preserves: color (from scheme)                   │
   │Pushable │  border → none                                    │
   │         │  + solid edge shadow + ground shadow               │
   │         │  + springy cubic-bezier transitions                │
   │         │  + filter:brightness on hover                      │
   │         │  Preserves: background-color, color (from scheme) │
   └─────────┴────────────────────────────────────────────────────┘
   ============================================================ */

/* 3D: raised button with press-down effect */
.mtg-style-3d {
    border: none;
    border-bottom: calc(4px * var(--mtg-scale)) solid var(--mtg-dark);
    transform: translateY(calc(-2px * var(--mtg-scale)));
    transition: transform 0.1s ease, border-bottom-width 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 calc(4px * var(--mtg-scale)) calc(6px * var(--mtg-scale)) rgba(0, 0, 0, 0.2);
}

.mtg-style-3d:hover {
    transform: translateY(calc(-3px * var(--mtg-scale)));
    box-shadow: 0 calc(6px * var(--mtg-scale)) calc(10px * var(--mtg-scale)) rgba(0, 0, 0, 0.25);
    border-bottom-width: calc(5px * var(--mtg-scale));
}

.mtg-style-3d:active {
    transform: translateY(0px);
    box-shadow: 0 calc(1px * var(--mtg-scale)) calc(2px * var(--mtg-scale)) rgba(0, 0, 0, 0.15);
    border-bottom-width: calc(1px * var(--mtg-scale));
}

/* Dome: skeuomorphic round push-button — uses --mtg-color in gradient */
.mtg-style-dome {
    background-image: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--mtg-color) 35%, white),
        color-mix(in srgb, var(--mtg-color) 55%, white)
    );
    border: none;
    border-radius: 50%;
    aspect-ratio: 1;
    font-weight: 700;
    box-shadow:
        0px calc(6px * var(--mtg-scale)) calc(8px * var(--mtg-scale)) 0px rgba(0, 0, 0, 0.25),
        inset 0px calc(4px * var(--mtg-scale)) calc(1px * var(--mtg-scale)) calc(1px * var(--mtg-scale)) color-mix(in srgb, var(--mtg-color) 15%, white),
        inset 0px calc(-3px * var(--mtg-scale)) calc(1px * var(--mtg-scale)) calc(1px * var(--mtg-scale)) color-mix(in srgb, var(--mtg-dark) 50%, transparent);
    text-shadow: 0px -1px 1px rgba(189, 181, 180, 0.4), 1px 1px 1px white;
    transition: all 0.1s linear;
}

.mtg-style-dome:hover {
    background-image: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--mtg-color) 45%, white),
        color-mix(in srgb, var(--mtg-color) 30%, white)
    );
    color: var(--mtg-dark);
    text-shadow: 0px 0px calc(6px * var(--mtg-scale)) var(--mtg-color);
}

.mtg-style-dome:active {
    background-image: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--mtg-color) 50%, white),
        color-mix(in srgb, var(--mtg-color) 40%, white)
    );
    box-shadow:
        0 calc(3px * var(--mtg-scale)) calc(4px * var(--mtg-scale)) 0 rgba(0, 0, 0, 0.35),
        inset 0px calc(-3px * var(--mtg-scale)) calc(1px * var(--mtg-scale)) calc(1px * var(--mtg-scale)) color-mix(in srgb, var(--mtg-dark) 50%, transparent);
    transform: translateY(calc(2px * var(--mtg-scale)));
}

/* Pushable: Josh Comeau style — solid edge + springy transitions */
.mtg-style-pushable {
    border: none;
    transform: translateY(calc(-4px * var(--mtg-scale)));
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1), filter 250ms;
    box-shadow:
        0 calc(4px * var(--mtg-scale)) 0 0 var(--mtg-dark),
        0 calc(6px * var(--mtg-scale)) calc(4px * var(--mtg-scale)) rgba(0, 0, 0, 0.25);
}

.mtg-style-pushable:hover {
    transform: translateY(calc(-6px * var(--mtg-scale)));
    filter: brightness(110%);
    transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5), filter 250ms;
    box-shadow:
        0 calc(6px * var(--mtg-scale)) 0 0 var(--mtg-dark),
        0 calc(10px * var(--mtg-scale)) calc(6px * var(--mtg-scale)) rgba(0, 0, 0, 0.25);
}

.mtg-style-pushable:active {
    transform: translateY(calc(-2px * var(--mtg-scale)));
    transition: transform 34ms;
    box-shadow:
        0 calc(2px * var(--mtg-scale)) 0 0 var(--mtg-dark),
        0 calc(3px * var(--mtg-scale)) calc(2px * var(--mtg-scale)) rgba(0, 0, 0, 0.2);
}

/* Glossy: skeuomorphic raised button with specular highlight + shimmer hover.
   Works on flags (background-image) thanks to ::after on wrapper span. */
.mtg-style-glossy {
    position: relative;
    border: calc(1px * var(--mtg-scale)) solid var(--mtg-dark, rgba(0, 0, 0, 0.35));
    box-shadow:
        0 calc(3px * var(--mtg-scale)) calc(6px * var(--mtg-scale)) rgba(0, 0, 0, 0.35),
        inset 0 calc(-3px * var(--mtg-scale)) calc(6px * var(--mtg-scale)) rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 0;
    /* Force background to fill under the border (no gap) */
    background-size: cover !important;
    background-origin: border-box;
    box-sizing: border-box;
    /* Explicit height so border-box applies to both axes (fixes non-square square) */
    height: 1em;
    /* Shimmer: mask setup */
    -webkit-mask-image: linear-gradient(
        45deg,
        #000 25%,
        rgba(0, 0, 0, 0.3) 50%,
        #000 75%
    );
    mask-image: linear-gradient(
        45deg,
        #000 25%,
        rgba(0, 0, 0, 0.3) 50%,
        #000 75%
    );
    -webkit-mask-size: 400%;
    mask-size: 400%;
    -webkit-mask-position: 0;
    mask-position: 0;
}

.mtg-style-glossy::after {
    content: "";
    position: absolute;
    top: calc(1px * var(--mtg-scale));
    left: 12.5%;
    width: 75%;
    height: 33%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.7),
        rgba(255, 255, 255, 0.15)
    );
    border-radius: 0 0 50% 50%;
    filter: blur(calc(1px * var(--mtg-scale)));
    pointer-events: none;
    transition: opacity 64ms ease-out;
    z-index: 1;
}

/* Glossy hover: shimmer sweep + deeper shadow */
.mtg-style-glossy:hover {
    transition: mask-position 0.8s ease, -webkit-mask-position 0.8s ease, box-shadow 200ms ease;
    -webkit-mask-position: 120%;
    mask-position: 120%;
    box-shadow:
        0 calc(4px * var(--mtg-scale)) calc(8px * var(--mtg-scale)) rgba(0, 0, 0, 0.4),
        inset 0 calc(-3px * var(--mtg-scale)) calc(6px * var(--mtg-scale)) rgba(0, 0, 0, 0.2);
}

.mtg-style-glossy:active {
    box-shadow:
        0 0 calc(2px * var(--mtg-scale)) rgba(0, 0, 0, 0.3),
        inset 0 calc(4px * var(--mtg-scale)) calc(10px * var(--mtg-scale)) rgba(0, 0, 0, 0.3);
}

.mtg-style-glossy:active::after {
    opacity: 0;
}

/* --- Bold modifier (font weight only) --- */
.mtg-bold {
    font-weight: 800;
}

/* ============================================================
   Animations
   ============================================================ */

@keyframes mtg-pulse {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}