/* ===================================================================
   Card Binder — "polish" layer (loaded after style.css).
   Sleeker material, real per-game theming, display type, and a
   holographic foil sheen on cards. Purely additive / overrides.
   =================================================================== */
:root {
    --ink-on-accent: #0c0e12;
    --shadow-soft: 0 2px 8px rgba(0,0,0,.30), 0 14px 40px rgba(0,0,0,.40);
    --edge-hi: inset 0 1px 0 rgba(255,255,255,.07);   /* top highlight on surfaces */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- *
   1. Display typography
 * ---------------------------------------------------------------- */
h1, h2, h3, .binder-title, .modal-title, .navbar-brand,
.game-hero h1, .hub-tile h5, .display-1, .display-2, .display-3,
.display-4, .display-5, .display-6, .stat-card .display-6 {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    letter-spacing: -.4px;
}
.navbar-brand { letter-spacing: -.5px; }
.binder-title { letter-spacing: -1.6px; }

/* ---------------------------------------------------------------- *
   2. Ambient depth + fine grain (no more flat plastic)
 * ---------------------------------------------------------------- */
body::before {                         /* grain — print hides body::before */
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: var(--grain); background-size: 220px 220px;
    opacity: .035; mix-blend-mode: overlay;
}
#bgTint { backdrop-filter: blur(1px) saturate(1.08); }

/* ---------------------------------------------------------------- *
   3. Real per-game theming — each game gets its own ambient duo-tone
      (--tint drives the secondary glow + tint overlay in style.css)
 * ---------------------------------------------------------------- */
html[data-game="mtg"]        { --tint:#3f6fb0; }   /* gold × arcane blue   */
html[data-game="pokemon"]    { --tint:#3d7dca; }   /* yellow × poké blue   */
html[data-game="yugioh"]     { --tint:#d4af37; }   /* amethyst × gold      */
html[data-game="lorcana"]    { --tint:#9b6cd6; }   /* teal × amethyst      */
html[data-game="onepiece"]   { --tint:#e8b32e; }   /* red × straw gold     */
html[data-game="starwars"]   { --tint:#e0524d; }   /* saber blue × red     */
html[data-game="digimon"]    { --tint:#2f8fd0; }   /* orange × digi blue   */
html[data-game="fleshblood"] { --tint:#8893a6; }   /* crimson × steel      */
html[data-game="netrunner"]  { --tint:#e0489a; }   /* neon green × magenta */

/* ---------------------------------------------------------------- *
   4. Surface material — top highlight + softer, layered shadows
 * ---------------------------------------------------------------- */
.card, .modal-content, .stat-card, .hub-tile, .game-hero,
.list-group-item, .alert {
    box-shadow: var(--shadow-soft), var(--edge-hi);
}
.card, .modal-content { border-color: color-mix(in srgb, var(--accent) 14%, rgba(255,255,255,.10)) !important; }
.bg-body-tertiary { box-shadow: var(--edge-hi); }

/* ---------------------------------------------------------------- *
   5. Buttons — refined sheen, flatter glass for secondary
 * ---------------------------------------------------------------- */
.btn-cb, .btn-primary { position: relative; overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
                0 6px 18px color-mix(in srgb, var(--accent) 26%, transparent); }
.btn-cb::after, .btn-primary::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 66%);
    transform: translateX(-120%); transition: transform .55s ease; }
.btn-cb:hover::after, .btn-primary:hover::after { transform: translateX(120%); }
.btn-secondary {                       /* was the plasticky grey one */
    background: color-mix(in srgb, var(--panel2) 86%, transparent) !important;
    border: 1px solid var(--hairline) !important; color: #d7deea !important;
    box-shadow: var(--edge-hi); }
.btn-secondary:hover { background: color-mix(in srgb, var(--panel2) 100%, #fff 6%) !important; color: #fff !important; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ---------------------------------------------------------------- *
   6. Navbar — animated active pill + brand mark glow
 * ---------------------------------------------------------------- */
.cb-navbar .navbar-brand .cb-icon { box-shadow: 0 0 0 1px rgba(255,255,255,.10),
    0 4px 16px color-mix(in srgb, var(--accent) 60%, transparent); }
.cb-navbar .nav-link { position: relative; }
.cb-navbar .nav-link::after {
    content: ""; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 2px; border-radius: 2px;
    background: var(--grad); transition: left .2s ease, right .2s ease; }
.cb-navbar .nav-link:hover::after { left: 28%; right: 28%; }
.cb-navbar .nav-link.active::after { left: 22%; right: 22%; }

/* ---------------------------------------------------------------- *
   7. Holographic foil sheen on card hover (the signature TCG touch)
 * ---------------------------------------------------------------- */
.cb-card { transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s; }
.cb-card-img::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
    background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.20) 36%,
        rgba(120,200,255,.18) 44%, rgba(255,120,220,.16) 51%, rgba(160,255,180,.16) 58%,
        rgba(255,225,130,.16) 65%, transparent 82%);
    background-size: 230% 230%; background-position: 150% 0; opacity: 0;
    transition: opacity .25s ease; mix-blend-mode: soft-light; }
.cb-card:hover .cb-card-img::after { opacity: 1; animation: holoSweep 1.15s ease; }
@keyframes holoSweep { from { background-position: 150% 0; } to { background-position: -60% 0; } }
/* keep interactive badges above the sheen */
.cb-card .collect-toggle, .cb-card .qty-stepper, .cb-card .qty-badge, .cb-card .own-badge,
.cb-card .cost-badge, .cb-card .alt-badge, .cb-card .print-badge, .cb-card .custom-badge { z-index: 4; }
.cb-card:hover { box-shadow: var(--shadow-soft),
    0 0 0 1px var(--accent2), 0 0 26px color-mix(in srgb, var(--accent) 30%, transparent); }

/* ---------------------------------------------------------------- *
   8. Hub landing tiles + per-game dashboard hero
 * ---------------------------------------------------------------- */
.hub-tile { transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s; }
.hub-tile::after { background:
    radial-gradient(150% 100% at 85% -25%, color-mix(in srgb, var(--g) 34%, transparent), transparent 58%),
    radial-gradient(120% 90% at -10% 120%, color-mix(in srgb, var(--g) 12%, transparent), transparent 60%); }
.hub-tile:hover { transform: translateY(-7px) scale(1.012);
    box-shadow: var(--shadow-soft), 0 0 0 1px color-mix(in srgb, var(--g) 75%, transparent),
                0 18px 50px color-mix(in srgb, var(--g) 22%, transparent); }
.hub-badge { box-shadow: 0 6px 18px color-mix(in srgb, var(--g) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,.5); position: relative; overflow: hidden; }
.hub-tile:hover .hub-badge { transform: rotate(-4deg) scale(1.06); transition: transform .25s ease; }
.hub-swatches span { transition: transform .18s ease; }
.hub-tile:hover .hub-swatches span { transform: translateY(-2px); }
.game-hero { box-shadow: var(--shadow-soft), var(--edge-hi); }
.game-hero .gh-icon { box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,.45); }

/* ---------------------------------------------------------------- *
   9. Stat cards + small touches
 * ---------------------------------------------------------------- */
.stat-pill, .badge { box-shadow: var(--edge-hi); }
.qty-badge, .own-badge { box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.form-control, .form-select { transition: border-color .15s, box-shadow .15s, background .15s; }
hr { border-color: var(--hairline) !important; opacity: .5; }

/* ---------------------------------------------------------------- *
   10. Page-load entrance
 * ---------------------------------------------------------------- */
main.container > * { animation: cbFadeUp .45s cubic-bezier(.2,.7,.3,1) both; }
@keyframes cbFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- *
   11b. Dual-faced flip button on tiles (top-centre, conflict-free)
 * ---------------------------------------------------------------- */
.flip-btn { position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    z-index: 4; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px;
    border: none; border-radius: 12px; cursor: pointer; font-size: .68rem; font-weight: 700;
    background: rgba(10,12,16,.7); color: #fff; backdrop-filter: blur(4px);
    border: 1px solid color-mix(in srgb, var(--accent2) 60%, transparent);
    box-shadow: 0 2px 8px rgba(0,0,0,.45); transition: background .14s, color .14s, transform .2s; }
.flip-btn:hover { background: var(--accent); color: #0c0e12; transform: translateX(-50%) rotate(180deg); }

/* wishlist heart (tiles) — sits just below the collection bookmark */
.wish-toggle { position: absolute; top: 44px; right: 7px; width: 32px; height: 32px; border: none;
    border-radius: 50%; background: rgba(10,12,16,.62); color: #fff; cursor: pointer; backdrop-filter: blur(4px);
    z-index: 4; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.4);
    transition: background .14s, transform .14s, color .14s; }
.wish-toggle:hover { background: rgba(0,0,0,.9); transform: scale(1.1); }
.wish-toggle.active { background: #e0407a; color: #fff; }

/* price pill */
.price-pill { font-size: .72rem; font-weight: 700; color: #7ee0a8 !important;
    background: color-mix(in srgb, #1f7a4d 38%, transparent) !important;
    border: 1px solid color-mix(in srgb, #34d27b 40%, transparent); border-radius: 8px; padding: 1px 7px; }

/* deck legality panel */
.legality { border-radius: 12px; padding: .6rem .8rem; border: 1px solid var(--hairline); box-shadow: var(--edge-hi); }
.legality.ok  { background: color-mix(in srgb, #1ba85c 15%, var(--panel)); border-color: color-mix(in srgb, #34d27b 38%, transparent); }
.legality.ok i  { color: #34d27b; }
.legality.bad { background: color-mix(in srgb, #e0a82e 14%, var(--panel)); border-color: color-mix(in srgb, #e0a82e 38%, transparent); }
.legality.bad i { color: #ffcb05; }
.legality ul { padding-left: 1.1rem; }

/* ---------------------------------------------------------------- *
   11. Toasts
 * ---------------------------------------------------------------- */
#cbToasts { position: fixed; right: 18px; bottom: 18px; z-index: 1090;
    display: flex; flex-direction: column; gap: 8px; max-width: min(92vw, 360px); }
.cb-toast { display: flex; align-items: center; padding: .6rem .85rem; border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--ink);
    border: 1px solid var(--hairline); box-shadow: var(--shadow-soft), var(--edge-hi);
    backdrop-filter: blur(14px); font-size: .88rem; font-weight: 500;
    transform: translateY(14px) scale(.98); opacity: 0; transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s; }
.cb-toast.show { transform: none; opacity: 1; }
.cb-toast i { color: var(--accent2); }
.cb-toast-error { border-color: color-mix(in srgb, #ff5a4d 60%, var(--hairline)); }
.cb-toast-error i { color: #ff7a6e; }

@media (prefers-reduced-motion: reduce) {
    main.container > *, .cb-card:hover .cb-card-img::after, .btn-cb::after, .btn-primary::after {
        animation: none !important; transition: none !important; }
    main.container > * { opacity: 1 !important; transform: none !important; }
    .cb-toast { transition: opacity .2s; transform: none; }
}