/* Vintage Cube — base styles & design tokens.
   Hand-written (no build step). The full MTG design system (self-hosted Cinzel/Spectral,
   Mana/Keyrune icons, parchment panels) layers on top of these tokens in a later phase. */

:root {
    /* Surfaces — dark, near-black with a warm cast */
    --vc-bg:        #0c0a08;
    --vc-bg-2:      #15110c;
    --vc-surface:   #1c1813;
    --vc-surface-2: #241f18;
    --vc-border:    #3a3127;

    /* Ink */
    --vc-ink:       #ece3d4;
    --vc-muted:     #a99e8c;
    --vc-faint:     #6f6657;

    /* Accent — beveled gold / bronze (card-frame feel) */
    --vc-gold:      #c8a24b;
    --vc-gold-2:    #b08d4f;
    --vc-gold-ink:  #1a1408;

    /* WUBRG (Mana-font pip tints; saturated variants for state) */
    --mtg-w: #f0f2c0;
    --mtg-u: #b5cde3;
    --mtg-b: #aca29a;
    --mtg-r: #db8664;
    --mtg-g: #93b483;
    --mtg-c: #beb9b2;

    --vc-danger:    #d3202a;
    --vc-r:         #e88a8a;   /* soft red — readable on dark surfaces where --vc-danger fails AA */
    --vc-ok:        #00733e;

    --vc-radius:    10px;
    --vc-radius-sm: 6px;
    --vc-shadow:    0 10px 30px rgba(0, 0, 0, .45);

    --vc-serif: 'Cinzel', Georgia, "Times New Roman", serif;     /* headings & wordmark */
    --vc-sans:  'Spectral', Georgia, "Times New Roman", serif;   /* body & rules text */
}

* { box-sizing: border-box; }

[x-cloak] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: var(--vc-sans);
    color: var(--vc-ink);
    background:
        radial-gradient(1200px 600px at 50% -10%, #221a10 0%, transparent 60%),
        linear-gradient(180deg, var(--vc-bg-2) 0%, var(--vc-bg) 100%);
    background-attachment: fixed;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--vc-serif);
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--vc-ink);
    margin: 0 0 .4em;
}

a { color: var(--vc-gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Layout --- */
.vc-center {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.vc-container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* --- Panels (card-frame look) --- */
.vc-panel {
    background: linear-gradient(180deg, var(--vc-surface-2), var(--vc-surface));
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius);
    box-shadow: var(--vc-shadow), inset 0 1px 0 rgba(255, 255, 255, .03);
    padding: 1.75rem;
}

.vc-auth-card { width: 100%; max-width: 420px; }

.vc-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}
.vc-brand .vc-wordmark {
    font-family: var(--vc-serif);
    font-size: 1.9rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vc-gold);
    text-shadow: 0 1px 0 #000;
}
.vc-brand .vc-tagline { color: var(--vc-muted); font-size: .85rem; }

/* --- Forms --- */
.vc-field { margin-bottom: 1.1rem; }
.vc-field label {
    display: block;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vc-muted);
    margin-bottom: .35rem;
}
.vc-input {
    width: 100%;
    padding: .65rem .8rem;
    background: #0f0c08;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius-sm);
    color: var(--vc-ink);
    font-size: 1rem;
    transition: border-color .15s, box-shadow .15s;
}
.vc-input:focus {
    outline: none;
    border-color: var(--vc-gold-2);
    box-shadow: 0 0 0 3px rgba(200, 162, 75, .18);
}
.vc-input::file-selector-button {
    margin-right: .75rem;
    padding: .4rem .7rem;
    background: var(--vc-surface-2);
    color: var(--vc-ink);
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius-sm);
    cursor: pointer;
}
.vc-row { display: flex; gap: .9rem; }
.vc-row > * { flex: 1; }

.vc-check { display: flex; align-items: center; gap: .5rem; color: var(--vc-muted); font-size: .9rem; }

.vc-error { color: var(--vc-r); font-size: .82rem; margin-top: .35rem; }

/* --- Buttons --- */
.vc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.1rem;
    border-radius: var(--vc-radius-sm);
    border: 1px solid var(--vc-border);
    background: var(--vc-surface-2);
    color: var(--vc-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform .05s, filter .15s, background .15s;
}
.vc-btn:hover { filter: brightness(1.1); text-decoration: none; }
.vc-btn:active { transform: translateY(1px); }
.vc-btn-primary {
    background: linear-gradient(180deg, var(--vc-gold), var(--vc-gold-2));
    border-color: var(--vc-gold-2);
    color: var(--vc-gold-ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
.vc-btn-block { width: 100%; }
.vc-btn-link { background: none; border: none; color: var(--vc-gold); padding: 0; }

/* --- Top nav (authenticated layout) --- */
.vc-topnav {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.25rem;
    background: rgba(12, 10, 8, .8);
    border-bottom: 1px solid var(--vc-border);
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 10;
}
.vc-topnav .vc-logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--vc-serif);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vc-gold);
}
.vc-topnav .vc-logo svg { width: 26px; height: 26px; flex: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); }
.vc-topnav .vc-spacer { flex: 1; }
.vc-topnav .vc-user { display: inline-flex; align-items: center; gap: .5rem; color: var(--vc-muted); font-size: .9rem; min-width: 0; }
.vc-name-short { display: none; }

.vc-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--vc-gold-2);
    vertical-align: middle;
}
.vc-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vc-surface-2);
    color: var(--vc-gold);
    font-family: var(--vc-serif);
    font-weight: 700;
    line-height: 1;
}
.vc-player-link { display: inline-flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; }
.vc-player-link:hover { color: var(--vc-gold); text-decoration: none; }

/* --- Event cards: tear-off calendar leaf + body ---
   (a.vc-panel-link sets display:block later in the file — out-specify it) */
a.vc-panel-link.vc-event-card { display: flex; gap: 1rem; align-items: flex-start; }
.vc-event-body { flex: 1; min-width: 0; }
.vc-cal {
    flex: none;
    width: 58px;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius-sm);
    background: var(--vc-surface);
    text-align: center;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.vc-cal-dow {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: .2rem 0 .14rem;
    color: var(--vc-gold-ink);
    background: linear-gradient(180deg, var(--vc-gold), var(--vc-gold-2));
}
.vc-cal-day {
    display: block;
    font-family: var(--vc-serif);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.15;
    padding-top: .1rem;
}
.vc-cal-mon, .vc-cal-year {
    display: block;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--vc-muted);
}
.vc-cal-mon { padding-bottom: .28rem; }
.vc-cal-year { margin-top: -.3rem; padding-bottom: .28rem; }
.vc-cal-muted .vc-cal-dow { background: var(--vc-surface-2); color: var(--vc-muted); }
.vc-cal-muted .vc-cal-day { color: var(--vc-muted); }

/* The card's key line: time + countdown; gold when the event is today */
.vc-event-when { margin: .3rem 0 0; }
.vc-event-when.is-today { color: var(--vc-gold); font-weight: 600; }
a.vc-event-today { border-color: var(--vc-gold-2); }
a.vc-event-today:hover { border-color: var(--vc-gold); }

/* Your own availability on the event card */
.vc-rsvp-chip {
    display: inline-block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .15rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--vc-border);
    white-space: nowrap;
}
.vc-rsvp-chip.is-yes { color: var(--vc-gold); border-color: var(--vc-gold-2); }
.vc-rsvp-chip.is-unsure { color: var(--vc-muted); }
.vc-rsvp-chip.is-no { color: var(--vc-r); border-color: var(--vc-r); }
.vc-rsvp-chip.is-cta {
    color: var(--vc-gold-ink);
    font-weight: 700;
    background: linear-gradient(180deg, var(--vc-gold), var(--vc-gold-2));
    border-color: var(--vc-gold-2);
}

/* Attending players on event cards — compact name chips (names beat bare avatars at a glance) */
.vc-event-people { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.vc-event-people .vc-player-tile { padding: .15rem .6rem .15rem .25rem; gap: .4rem; font-size: .82rem; }

/* Player tile (avatar + name + availability mark) — event detail "Kto przyjdzie" */
.vc-resp-tiles { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.vc-player-tile {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    max-width: 100%;
    padding: .3rem .75rem .3rem .35rem;
    border: 1px solid var(--vc-border);
    border-radius: 999px;
    background: var(--vc-surface-2);
    color: var(--vc-ink);
    transition: border-color .15s;
}
a.vc-player-tile:hover { border-color: var(--vc-gold-2); text-decoration: none; }
.vc-player-tile .vc-avatar { flex: none; }
.vc-player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-resp-mark { font-weight: 700; line-height: 1; }
.vc-resp-mark.is-yes { color: var(--vc-gold); }
.vc-resp-mark.is-unsure { color: var(--vc-muted); }
.vc-resp-mark.is-no { color: var(--vc-r); }
.vc-table th a { color: var(--vc-muted); text-decoration: none; white-space: nowrap; }
.vc-table th a:hover { color: var(--vc-gold); }

.vc-pill {
    display: inline-block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .15rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--vc-border);
    color: var(--vc-muted);
}
.vc-pill-admin { color: var(--vc-gold); border-color: var(--vc-gold-2); }
.vc-pill-cancelled { color: var(--vc-r); border-color: var(--vc-r); }

.vc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}
.vc-muted { color: var(--vc-muted); }
.vc-mt { margin-top: 1rem; }
.vc-mobile-only { display: none; }
@media (max-width: 640px) { .vc-mobile-only { display: block; } }
.vc-center-text { text-align: center; }

/* WUBRG mana-pip flourish (Mana font) */
.vc-pips { margin-top: .7rem; font-size: 1.15rem; display: flex; gap: .3rem; justify-content: center; }

/* --- Layout helpers --- */
.vc-head-row { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.vc-notice { border-color: var(--vc-gold-2); }
.vc-inline-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }

a.vc-panel-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s; }
a.vc-panel-link:hover { border-color: var(--vc-gold-2); text-decoration: none; }

/* Dashboard tile glyphs (inline SVG, set-symbol style — see partials/icon.blade.php) */
.vc-tile-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .35rem; }
.vc-tile-head h3 { margin: 0; }
.vc-tile-icon {
    width: 34px;
    height: 34px;
    flex: none;
    color: var(--vc-gold);
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6));
    transition: filter .15s;
}
.vc-tile-icon svg { width: 100%; height: 100%; display: block; }
a.vc-panel-link:hover .vc-tile-icon {
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 7px rgba(200, 162, 75, .4));
}

/* --- Color filter chips --- */
.vc-filter { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.vc-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .75rem; border: 1px solid var(--vc-border); border-radius: 999px;
    color: var(--vc-muted); font-size: .9rem;
}
.vc-chip:hover { text-decoration: none; border-color: var(--vc-gold-2); }
.vc-chip.is-active { background: var(--vc-surface-2); border-color: var(--vc-gold-2); color: var(--vc-ink); }

/* --- Cube card grid --- */
.vc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; margin-top: 1rem; }
.vc-card { margin: 0; background: var(--vc-surface); border: 1px solid var(--vc-border); border-radius: var(--vc-radius-sm); overflow: hidden; }
.vc-card-img { aspect-ratio: 488 / 680; background: #0f0c08; }
.vc-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-card-meta { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .45rem .55rem; }
.vc-card-name { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-card-pips { flex-shrink: 0; font-size: .8rem; }

/* --- Deck photo gallery --- */
.vc-deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.vc-deck { margin: 0; }
.vc-deck img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--vc-radius-sm); border: 1px solid var(--vc-border); display: block; }
.vc-deck figcaption { font-size: .8rem; margin-top: .3rem; }

/* --- Tables --- */
.vc-table { width: 100%; border-collapse: collapse; }
.vc-table th, .vc-table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--vc-border); vertical-align: middle; }
.vc-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--vc-muted); }

/* --- Result dialog (modal) --- */
.vc-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(3px);
    /* A modal taller than the screen scrolls instead of clipping (margin:auto keeps it centered). */
    overflow-y: auto;
}
.vc-modal {
    width: 100%;
    max-width: 420px;
    margin: auto;
    text-align: left;
    background: linear-gradient(180deg, var(--vc-surface-2), var(--vc-surface));
    border: 1px solid var(--vc-gold-2);
    border-radius: var(--vc-radius);
    box-shadow: var(--vc-shadow);
    padding: 1.5rem;
}
.vc-modal-title { margin: 0; font-family: var(--vc-serif); color: var(--vc-gold); font-size: 1.1rem; }
.vc-modal-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--vc-muted); margin: 1rem 0 .45rem; }
.vc-seg { display: flex; gap: .4rem; flex-wrap: wrap; }
.vc-seg-btn {
    flex: 1;
    min-width: 90px;
    padding: .55rem .6rem;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius-sm);
    background: var(--vc-surface);
    color: var(--vc-ink);
    font: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.vc-seg-btn:hover { border-color: var(--vc-gold-2); }
.vc-seg-btn.is-active { background: var(--vc-surface-2); border-color: var(--vc-gold-2); color: var(--vc-gold); font-weight: 600; }
.vc-modal-actions { display: flex; gap: .6rem; justify-content: flex-end; align-items: center; margin-top: 1.5rem; }

/* Square icon buttons (edit / clear a recorded result) */
.vc-result-row { display: inline-flex; align-items: center; gap: .5rem; }
.vc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius-sm);
    background: var(--vc-surface-2);
    color: var(--vc-ink);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: border-color .15s, filter .15s, transform .05s;
}
.vc-icon-btn:hover { border-color: var(--vc-gold-2); filter: brightness(1.1); }
.vc-icon-btn:active { transform: translateY(1px); }

/* --- Deck-recognition resolve rows --- */
.vc-rec-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--vc-border); border-radius: 8px; }
.vc-rec-row.is-flagged { border-color: #a66; }
.vc-rec-img { width: 42px; height: 59px; object-fit: cover; border-radius: 4px; background: #222; flex: none; }
.vc-rec-main { flex: 1; min-width: 0; }
.vc-rec-suggestions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.vc-rec-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.vc-rec-qty { display: flex; align-items: center; gap: 4px; }
.vc-rec-qty span { min-width: 1.6em; text-align: center; }

/* --- Mobile (≤640px) — the stylesheet was desktop-only before this --- */
@media (max-width: 640px) {
    .vc-container { padding: .9rem; }
    .vc-panel { padding: 1.1rem; }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }

    /* Top nav: ONE row — admin/logout/pill hidden (logout lives on the profile page),
       the user link collapses to first name + avatar pinned to the right edge. */
    .vc-topnav { flex-wrap: nowrap; gap: .5rem; padding: .55rem .8rem; }
    .vc-topnav .vc-spacer { display: none; }
    .vc-topnav .vc-pill, .vc-topnav .vc-nav-admin, .vc-topnav .vc-nav-logout { display: none; }
    .vc-topnav .vc-user { font-size: .82rem; margin-left: auto; flex-direction: row-reverse; }
    .vc-topnav .vc-user .vc-name-full { display: none; }
    .vc-topnav .vc-user .vc-name-short { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vc-topnav .vc-btn { padding: .45rem .7rem; flex: none; }
    .vc-topnav .vc-logo { flex: none; }

    /* Wide tables scroll horizontally instead of pushing the page sideways */
    .vc-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

    /* Event cards: slimmer calendar leaf, tighter gap */
    a.vc-panel-link.vc-event-card { gap: .75rem; }
    .vc-cal { width: 52px; }
    .vc-cal-day { font-size: 1.4rem; }

    /* Recognition rows: controls wrap to a second line; the card art grows to fill the
       row's full height instead of leaving the left side empty. */
    .vc-rec-row { flex-wrap: wrap; position: relative; padding-left: 102px; min-height: 134px; }
    .vc-rec-row .vc-rec-img {
        position: absolute;
        left: 8px;
        top: 8px;
        width: 86px;
        height: calc(100% - 16px);
        object-fit: cover;
        border-radius: 6px;
    }
    .vc-rec-controls { flex-basis: 100%; margin-left: 0; justify-content: flex-end; }
}

/* --- Unrecognized-card crops (resolve page) --- */
.vc-crop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .8rem; margin-top: .6rem; }
.vc-crop { margin: 0; }
.vc-crop img { width: 100%; border-radius: var(--vc-radius-sm); border: 1px solid var(--vc-border); display: block; margin-bottom: .3rem; }
.vc-crop figcaption { font-size: .75rem; margin: .3rem 0; }

/* --- Recognition rework: photo overlay, hover preview, compare modal --- */
.vc-rec-layout { display: grid; gap: 1.25rem; align-items: start; }
/* Expand/contract button: semi-transparent overlay pinned to the map's top-right corner */
.vc-map-expand {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(200, 162, 75, .45);
    border-radius: var(--vc-radius-sm);
    background: rgba(12, 10, 8, .55);
    color: var(--vc-gold);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(2px);
    transition: background .15s, border-color .15s;
}
.vc-map-expand:hover { background: rgba(12, 10, 8, .8); border-color: var(--vc-gold); }
@media (min-width: 1100px) {
    /* Two columns only when the photo aside is actually rendered (photos can all be deleted). */
    .vc-rec-layout:has(.vc-rec-photos) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
    .vc-rec-photos { position: sticky; top: 70px; max-height: calc(100dvh - 90px); overflow-y: auto; padding-right: 4px; }

    /* Expanded map: one full-width column — the photo gets the map + decklist width, list below. */
    .vc-rec-layout.is-wide:has(.vc-rec-photos) { grid-template-columns: minmax(0, 1fr); }
    .vc-rec-layout.is-wide .vc-rec-photos { position: static; max-height: none; overflow: visible; padding-right: 0; }
    .vc-map-expand { display: inline-flex; }
}

.vc-photo-stage { position: relative; margin: 0 0 .6rem; }
.vc-photo-stage img { width: 100%; display: block; border-radius: var(--vc-radius-sm); border: 1px solid var(--vc-border); }

/* Card outlines are quadrilaterals (SVG polygons) hugging the actual card edges. The SVG layer is
   click-through; only the polygons take pointer events, so empty photo areas keep the gap-add. */
.vc-stage-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vc-stage-svg polygon { pointer-events: auto; cursor: pointer; }
.vc-poly { fill: transparent; stroke-width: 1.5px; transition: fill .15s, stroke .15s; }
.vc-poly.is-ok { stroke: rgba(200, 162, 75, .55); }
.vc-poly.is-warn { stroke: #eb8; fill: rgba(238, 187, 136, .1); }
.vc-poly.is-bad { stroke: #e88; fill: rgba(238, 136, 136, .12); }
.vc-poly.is-unread { stroke: #e88; stroke-width: 2px; stroke-dasharray: 5 4; fill: rgba(211, 32, 42, .14); }
/* Spotlight mode: veil what was recognized, so the missed cards are the bright spots. */
.vc-photo-stage.is-dim .vc-poly.is-veiled { fill: rgba(5, 4, 3, .6); stroke: rgba(200, 162, 75, .3); }
.vc-poly.is-hot, .vc-photo-stage.is-dim .vc-poly.is-veiled.is-hot {
    stroke: var(--vc-gold);
    stroke-width: 2.5px;
    fill: rgba(200, 162, 75, .16);
}

.vc-overlay-legend { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; font-size: .75rem; color: var(--vc-muted); margin-top: .4rem; }
.vc-overlay-legend .vc-chip { font-size: .78rem; padding: .15rem .55rem; gap: .35rem; }
.vc-overlay-legend .vc-dot { display: inline-block; width: 11px; height: 11px; border: 1.5px solid; border-radius: 3px; vertical-align: -1px; margin-right: .25rem; }

/* Recognition rows: whole row is clickable (opens the compare modal) */
.vc-rec-row { cursor: pointer; transition: border-color .15s, background .15s; }
.vc-rec-row.is-hot { border-color: var(--vc-gold-2); background: rgba(200, 162, 75, .07); }

/* Floating enlarged card art on row hover — desktop pointers only */
.vc-hover-preview { position: fixed; z-index: 60; width: 270px; pointer-events: none; display: none; }
.vc-hover-preview img { width: 100%; border-radius: 13px; display: block; box-shadow: 0 14px 40px rgba(0, 0, 0, .65); }
@media (hover: hover) and (pointer: fine) {
    .vc-hover-preview { display: block; }
}

/* Compare modal: card art vs photo crop */
.vc-modal.vc-compare { max-width: 760px; }
.vc-compare-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1rem; align-items: start; }
.vc-compare-art img { width: 100%; border-radius: 11px; display: block; }
.vc-compare-noart { display: flex; align-items: center; justify-content: center; aspect-ratio: 488 / 680; padding: 10px; text-align: center; background: #222; color: #aaa; border-radius: 11px; }
.vc-compare-photo { position: relative; width: 100%; border-radius: var(--vc-radius-sm); border: 1px solid var(--vc-border); background-repeat: no-repeat; overflow: hidden; }
/* Tall multi-copy panes (e.g. a column of basics): fix the height, let aspect-ratio set the width */
.vc-compare-photo.is-tall { width: auto; max-width: 100%; height: 56dvh; margin: 0 auto; }
/* Quad outlines inside modal panes; the shade dims everything around the active quad */
.vc-pane-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vc-pane-svg polygon { pointer-events: auto; }
.vc-pane-shade { fill: rgba(0, 0, 0, .3); pointer-events: none; }
.vc-poly-modal.is-active { stroke: var(--vc-gold); stroke-width: 2px; stroke-dasharray: 6 4; fill: transparent; pointer-events: none; }
/* Sibling copies of the same card: dimmer, clickable to jump to that copy */
.vc-poly-modal.is-sibling { stroke: rgba(200, 162, 75, .45); stroke-width: 1.5px; stroke-dasharray: 6 4; fill: transparent; cursor: pointer; }
.vc-poly-modal.is-sibling:hover { stroke: var(--vc-gold); }
.vc-outline-num, .vc-bbox-num {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 4px;
    background: rgba(12, 10, 8, .85);
    color: var(--vc-gold);
    font-size: 11px;
    line-height: 1.4;
    border-radius: 0 0 4px 0;
    pointer-events: none;
}
.vc-bbox-num { font-size: 10px; }

/* Coverage ledger */
.vc-ledger-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--vc-surface-2); border: 1px solid var(--vc-border); }
.vc-ledger-bar .seg-ok { background: linear-gradient(180deg, var(--vc-gold), var(--vc-gold-2)); transition: width .25s; }
.vc-ledger-bar .seg-warn { background: #8a5a2a; transition: width .25s; }

/* Sticky action bar (keeps progress + confirm in reach on long lists) */
.vc-rec-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: .6rem .8rem;
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(18, 14, 10, .94);
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius-sm);
    backdrop-filter: blur(6px);
}

/* Cube search results (search modal) */
.vc-search-results { display: flex; flex-direction: column; gap: 4px; margin-top: .8rem; max-height: 48dvh; overflow-y: auto; }
.vc-search-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border: 1px solid var(--vc-border); border-radius: 8px; background: none; color: var(--vc-ink); font: inherit; text-align: left; cursor: pointer; }
.vc-search-row:hover { border-color: var(--vc-gold-2); background: var(--vc-surface-2); }
.vc-search-row img { width: 34px; height: 48px; object-fit: cover; border-radius: 4px; flex: none; background: #222; }

@media (max-width: 640px) {
    .vc-compare-grid { grid-template-columns: 1fr; }
    .vc-compare-art { max-width: 220px; margin: 0 auto; }
}

/* --- Deck browser (Decki) --- */
.vc-deck-browser { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; margin-top: 1rem; }
.vc-deck-tile {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--vc-surface-2), var(--vc-surface));
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius);
    overflow: hidden;
    color: inherit;
    box-shadow: var(--vc-shadow), inset 0 1px 0 rgba(255, 255, 255, .03);
    transition: border-color .15s;
}
.vc-deck-tile:hover { border-color: var(--vc-gold-2); text-decoration: none; }

/* Cover: art crop of the deck's biggest spell, deck name + pips on a bottom fade */
.vc-deck-cover { position: relative; aspect-ratio: 16 / 9; background: #0f0c08; }
.vc-deck-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-deck-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 8, 0) 40%, rgba(12, 10, 8, .92)); }
.vc-deck-cover-foot {
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: .5rem;
    z-index: 1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}
.vc-deck-name {
    font-family: var(--vc-serif);
    font-weight: 700;
    font-size: 1.02rem;
    text-shadow: 0 1px 3px #000;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vc-deck-cover .vc-card-pips { flex: none; filter: drop-shadow(0 1px 1px #000); }
.vc-deck-draft { position: absolute; top: .5rem; right: .5rem; z-index: 1; background: rgba(12, 10, 8, .75); }

.vc-deck-tile-body { display: flex; flex-direction: column; gap: .3rem; padding: .6rem .8rem .7rem; }
.vc-deck-tile-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.vc-deck-tile-row .vc-player-link { flex: 1; min-width: 0; font-size: .92rem; }
.vc-deck-tile-meta { font-size: .8rem; }
.vc-deck-event { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "3–1" match record + tournament-winner trophy (17lands convention) */
.vc-record {
    flex: none;
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: .08rem .5rem;
    border: 1px solid var(--vc-border);
    border-radius: 999px;
    color: var(--vc-ink);
}
.vc-trophy { flex: none; width: 18px; height: 18px; color: var(--vc-gold); }
.vc-trophy svg { width: 100%; height: 100%; display: block; }

/* --- Admin: users management --- */
.vc-admin-users { display: flex; flex-direction: column; }
.vc-admin-user {
    display: flex;
    align-items: center;
    gap: .9rem 1rem;
    flex-wrap: wrap;
    padding: .75rem 0;
    border-bottom: 1px solid var(--vc-border);
}
.vc-admin-user:last-child { border-bottom: none; }
.vc-admin-user-id { flex: 1 1 230px; min-width: 0; }
.vc-admin-user-names { display: flex; flex-direction: column; min-width: 0; }
.vc-admin-user-name { font-weight: 600; }
.vc-admin-user-mail { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-admin-user-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex-wrap: wrap; }
.vc-admin-role { display: flex; align-items: center; gap: .5rem; }
.vc-admin-role select { max-width: 160px; }

.vc-invite { padding: .75rem 0; border-bottom: 1px solid var(--vc-border); }
.vc-invite:last-child { border-bottom: none; }
.vc-invite-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .45rem; }
.vc-invite .vc-input { font-size: .82rem; }

@media (max-width: 640px) {
    /* Paired form fields stack on phones */
    .vc-row { flex-direction: column; gap: 0; }
    .vc-admin-user-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* --- Tournament page --- */

/* Deck cell states in the results table — only a finished deck earns bold gold */
.vc-deck-cell-name { color: var(--vc-gold); font-weight: 700; }
.vc-deck-cell-action {
    padding: 0;
    border: none;
    border-bottom: 1px dashed var(--vc-faint);
    background: none;
    color: var(--vc-muted);
    font: inherit;
    font-size: .92em;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.vc-deck-cell-action:hover { color: var(--vc-ink); border-bottom-color: var(--vc-muted); text-decoration: none; }
.vc-deck-cell-review { color: #eb8; font-size: .92em; }
.vc-deck-cell-progress { color: var(--vc-faint); font-style: italic; font-size: .92em; animation: vc-pulse 1.8s ease-in-out infinite; }
@keyframes vc-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .vc-deck-cell-progress { animation: none; } }

/* Manage/revert action pinned to the hero's bottom-right.
   Element+two-class specificity (0,2,1) — must beat the hero's
   `.vc-dv-hero > :not(.vc-dv-hero-art) { position: relative }` child rule (0,2,0). */
.vc-dv-hero > form.vc-hero-revert { position: absolute; right: 1.4rem; bottom: 1.2rem; z-index: 1; }
.vc-hero-revert .vc-btn { padding: .45rem .8rem; font-size: .85rem; background: rgba(12, 10, 8, .55); }
@media (max-width: 900px) { .vc-dv-hero > form.vc-hero-revert { position: static; margin-top: .8rem; } }

/* Podium (completed tournaments): 2nd · 1st (raised) · 3rd */
.vc-podium { display: flex; gap: 1.6rem; align-items: flex-end; margin-top: 1.1rem; }
.vc-podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    color: var(--vc-ink);
    text-decoration: none;
}
.vc-podium-place:hover { text-decoration: none; color: var(--vc-gold); }
.vc-podium-place.is-1 { order: 2; padding-bottom: .9rem; }
.vc-podium-place.is-2 { order: 1; }
.vc-podium-place.is-3 { order: 3; }
.vc-podium-place .vc-avatar { box-shadow: 0 0 0 3px var(--vc-surface); }
.vc-podium-place.is-1 .vc-avatar { border: 2px solid var(--vc-gold); box-shadow: 0 0 14px rgba(200, 162, 75, .5); }
.vc-podium-place.is-2 .vc-avatar { border: 2px solid #b8bcc4; }
.vc-podium-place.is-3 .vc-avatar { border: 2px solid #b07c4f; }
.vc-podium-name { font-size: .85rem; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-podium-rank { font-family: var(--vc-serif); font-weight: 700; font-size: .85rem; color: var(--vc-gold); }
.vc-podium-place.is-2 .vc-podium-rank { color: #b8bcc4; }
.vc-podium-place.is-3 .vc-podium-rank { color: #b07c4f; }

/* Match-up cell: avatar + name vs avatar + name */
.vc-vs-row { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.vc-vs { font-family: var(--vc-serif); font-size: .72rem; color: var(--vc-faint); text-transform: uppercase; letter-spacing: .08em; }

/* Standings rank badge — gold/silver/bronze tint for the top 3 */
.vc-rank { display: inline-block; min-width: 1.5em; font-variant-numeric: tabular-nums; font-weight: 600; }
.vc-rank.is-1 { color: var(--vc-gold); }
.vc-rank.is-2 { color: #b8bcc4; }
.vc-rank.is-3 { color: #b07c4f; }

/* Rounds history accordion */
.vc-round + .vc-round { border-top: 1px solid var(--vc-border); }
.vc-round-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .65rem .2rem;
    border: none;
    background: none;
    color: var(--vc-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.vc-round-head:hover { color: var(--vc-gold); }
.vc-round-chev { display: inline-block; color: var(--vc-gold-2); transition: transform .15s; }
.vc-round-chev.is-open { transform: rotate(90deg); }

/* Draft seat number on player tiles */
.vc-seat-no {
    flex: none;
    min-width: 1.5em;
    text-align: center;
    font-family: var(--vc-serif);
    font-weight: 700;
    color: var(--vc-gold);
}

/* Tile like-count chip (thumbs up) */
.vc-likes-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--vc-muted);
}
.vc-likes-chip svg { width: 14px; height: 14px; color: var(--vc-gold-2); }

/* Cover art zooms gently on tile hover */
.vc-deck-cover img { transition: transform .25s; }
.vc-deck-tile:hover .vc-deck-cover img { transform: scale(1.04); }

/* League color-share bar (under the page header) */
.vc-colorbar {
    display: flex;
    max-width: 420px;
    height: 8px;
    margin-top: .2rem;
    border: 1px solid var(--vc-border);
    border-radius: 999px;
    overflow: hidden;
}
.vc-colorbar span { display: block; }
.vc-colorbar .is-w { background: var(--mtg-w); }
.vc-colorbar .is-u { background: var(--mtg-u); }
.vc-colorbar .is-b { background: var(--mtg-b); }
.vc-colorbar .is-r { background: var(--mtg-r); }
.vc-colorbar .is-g { background: var(--mtg-g); }

/* Mana-curve sparkline: 7 bars, MV 0–6+ — the deck's fingerprint */
.vc-curve { display: flex; align-items: flex-end; gap: 2px; width: 56px; height: 18px; flex: none; }
.vc-curve i { flex: 1; min-height: 1px; background: var(--vc-gold-2); opacity: .5; border-radius: 1px 1px 0 0; transition: opacity .15s; }
.vc-deck-tile:hover .vc-curve i { opacity: .85; }

/* "Most played cards" strip above the browser (metagame-page pattern) */
.vc-meta-panel { padding: 1.1rem 1.25rem; }
.vc-meta-panel h3 { font-size: 1rem; margin-bottom: .6rem; }
.vc-top-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; }
.vc-top-card { margin: 0; min-width: 0; }
.vc-top-card-art { position: relative; aspect-ratio: 4 / 3; border-radius: var(--vc-radius-sm); overflow: hidden; border: 1px solid var(--vc-border); background: #0f0c08; }
.vc-top-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-top-card-count {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 0 .35rem;
    background: rgba(12, 10, 8, .8);
    border-radius: 4px;
    color: var(--vc-gold);
    font-size: .72rem;
    font-weight: 600;
}
.vc-top-card-name { font-size: .75rem; margin-top: .25rem; color: var(--vc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
    .vc-top-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vc-deck-browser { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* --- Deck viewer (interactive single-deck page) --- */

/* Card scans carry baked-in white rounded corners; clip every full-card image just
   inside the printed corner (≈4.75%/3.5%) so the corners read as the dark surface. */
.vc-card-img img,
.vc-scard img,
.vc-hcard img, .vc-hcard .vc-scard-ph,
.vc-tilt img,
.vc-hover-preview img,
.vc-rec-img,
.vc-search-row img,
.vc-compare-art img {
    border-radius: 5.5% / 4%;
}

/* Modal header: nav buttons must not wrap under long card names — the title ellipsizes */
.vc-modal .vc-head-row { flex-wrap: nowrap; align-items: center; }
.vc-modal .vc-head-row .vc-modal-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Segmented view/grouping switcher — quieter than chips, gold-on-dark like the rest of the UI */
.vc-seg-group {
    display: inline-flex;
    border: 1px solid var(--vc-border);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(12, 10, 8, .45);
}
.vc-seg-opt {
    padding: .42rem .95rem;
    border: none;
    background: none;
    color: var(--vc-muted);
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.vc-seg-opt + .vc-seg-opt { border-left: 1px solid var(--vc-border); }
.vc-seg-opt:hover { color: var(--vc-ink); }
.vc-seg-opt.is-on {
    background: linear-gradient(180deg, rgba(200, 162, 75, .2), rgba(200, 162, 75, .08));
    color: var(--vc-gold);
    font-weight: 600;
}

/* Thumbs-up + share (hero) — one row, equal heights, never wrapping apart from each other */
.vc-dv-actions { display: inline-flex; align-items: center; gap: .6rem; flex: none; }
.vc-dv-actions .vc-btn { height: 42px; padding: 0 1rem; }
.vc-btn svg { width: 17px; height: 17px; flex: none; }
.vc-like.is-liked {
    color: var(--vc-gold);
    border-color: var(--vc-gold-2);
    background: linear-gradient(180deg, rgba(200, 162, 75, .22), rgba(200, 162, 75, .08));
}

/* Hero: deck identity over the signature card's art, fading toward the text */
.vc-dv-hero { position: relative; overflow: hidden; }
.vc-dv-hero-art { position: absolute; inset: 0 0 0 30%; }
.vc-dv-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.vc-dv-hero-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #201b15 0%, rgba(32, 27, 21, .78) 38%, rgba(32, 27, 21, .25) 100%),
        linear-gradient(0deg, rgba(22, 18, 14, .55), transparent 55%);
}
.vc-dv-hero > :not(.vc-dv-hero-art) { position: relative; z-index: 1; }
.vc-dv-hero h1 { margin-bottom: .15em; text-shadow: 0 1px 4px #000; }
.vc-dv-sub { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; color: var(--vc-muted); }
.vc-dv-stats { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .9rem; }
.vc-stat-chip {
    font-size: .8rem;
    padding: .18rem .6rem;
    border: 1px solid var(--vc-border);
    border-radius: 999px;
    color: var(--vc-muted);
    background: rgba(12, 10, 8, .5);
}
.vc-stat-chip strong { color: var(--vc-ink); font-weight: 600; }

/* Analysis: curve chart + mana demand/supply */
.vc-dv-analysis { display: grid; grid-template-columns: 3fr 2fr; gap: 1rem; margin-top: 1rem; align-items: stretch; }
.vc-dv-panel { padding: 1.05rem 1.2rem; }
.vc-dv-panel h3 { font-size: .95rem; margin-bottom: .65rem; }
.vc-dv-hint { font-size: .72rem; color: var(--vc-faint); margin: .55rem 0 0; }

.vc-curve-chart { display: flex; gap: .5rem; align-items: flex-end; }
.vc-cbar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    color: var(--vc-muted);
    cursor: pointer;
}
.vc-cbar-count { text-align: center; font-size: .78rem; line-height: 1; }
.vc-cbar-track { display: flex; flex-direction: column; justify-content: flex-end; height: 92px; border-bottom: 1px solid var(--vc-border); }
.vc-cbar-seg { display: block; border-radius: 2px 2px 0 0; transition: filter .15s; }
.vc-cbar-seg.is-other { background: #8a7344; }
.vc-cbar-seg.is-creature { background: linear-gradient(180deg, var(--vc-gold), var(--vc-gold-2)); border-radius: 0; }
.vc-cbar-seg.is-other:last-child, .vc-cbar-seg.is-creature:first-child { border-radius: 2px 2px 0 0; }
.vc-cbar-mv { text-align: center; font-size: .85rem; }
.vc-cbar:hover .vc-cbar-seg { filter: brightness(1.2); }
.vc-cbar.is-active .vc-cbar-count { color: var(--vc-gold); font-weight: 700; }
.vc-cbar.is-active .vc-cbar-track { border-bottom-color: var(--vc-gold); }
.vc-curve-legend { display: flex; gap: 1rem; margin-top: .6rem; font-size: .75rem; color: var(--vc-muted); }
.vc-curve-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }

.vc-mana-rows { display: flex; flex-direction: column; gap: .55rem; }
.vc-mana-row { display: grid; grid-template-columns: 22px 1fr 64px; align-items: center; gap: .6rem; }
.vc-mana-bars { display: flex; flex-direction: column; gap: 4px; }
.vc-mbar { display: block; height: 6px; border-radius: 999px; background: rgba(12, 10, 8, .6); overflow: hidden; }
.vc-mbar i { display: block; height: 100%; border-radius: inherit; }
.vc-mbar.is-pips i { background: linear-gradient(90deg, var(--vc-gold), var(--vc-gold-2)); }
.vc-mbar.is-src i { background: #6f8775; }
.vc-mana-nums { display: flex; flex-direction: column; gap: 1px; font-size: .72rem; color: var(--vc-muted); text-align: right; line-height: 1.3; font-variant-numeric: tabular-nums; }

/* View switcher area */
.vc-btn:disabled { opacity: .45; cursor: default; }
.vc-btn:disabled:hover { filter: none; }

/* Dimmed cards while the curve focuses one MV */
.vc-scard, .vc-dv .vc-card, .vc-dv-row { transition: opacity .2s, filter .2s; }
.is-dim { opacity: .22; filter: grayscale(.65); }

/* Visual stacks: overlapped card columns, hovered card pops to front */
.vc-stacks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.1rem .9rem; align-items: start; margin-top: 1rem; }
.vc-stack-title { font-size: .92rem; margin: 0 0 .5rem; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.vc-stack-title .vc-muted { font-size: .8rem; }
.vc-stack-cards { display: flex; flex-direction: column; }
.vc-scard { position: relative; margin: 0; cursor: pointer; border-radius: 5.5% / 4%; }
.vc-scard + .vc-scard { margin-top: -124%; }  /* card is 139.3% of its width tall — leaves the title bar (CubeCobra's exact overlap) */
.vc-scard img, .vc-scard-ph {
    width: 100%;
    aspect-ratio: 488 / 680;
    object-fit: cover;
    display: block;
    border-radius: 5.5% / 4%;  /* just inside the printed corner — hides scans' white corners */
    background: #0f0c08;
    box-shadow: 0 -5px 16px rgba(0, 0, 0, .55);
}
.vc-scard-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8%;
    border: 1px solid var(--vc-border);
    color: var(--vc-muted);
    font-size: .8rem;
}
/* Hover nudges the strip up a touch as a target cue — no z-index pop: the floating
   preview beside the cursor is the reveal, the pile itself must not reshuffle. */
.vc-scard:hover, .vc-scard:focus-visible { transform: translateY(-5px); }
.vc-scard { transition: transform .15s ease-out, opacity .2s, filter .2s; }
.vc-scard-qty {
    position: absolute;
    top: 4%;
    right: 6.5%;
    z-index: 1;
    padding: 0 .4rem;
    background: rgba(12, 10, 8, .85);
    border-radius: 4px;
    color: var(--vc-gold);
    font-size: .75rem;
    font-weight: 600;
}

/* MV grouping: aligned curve columns, CubeCobra-style */
.vc-stack-rowlabel { font-size: .95rem; margin: 1.2rem 0 .45rem; }
.vc-stack-rowlabel .vc-muted { font-size: .8rem; }
.vc-stacks-curve { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .8rem .55rem; margin-top: .2rem; }
.vc-stacks-curve .vc-stack-title { justify-content: center; gap: .35rem; font-size: .85rem; }
@media (max-width: 760px) {
    .vc-stacks-curve { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Grid view: lift on hover */
.vc-dv .vc-card { cursor: pointer; transition: transform .12s ease-out, box-shadow .12s, border-color .15s, opacity .2s, filter .2s; }
.vc-dv .vc-card:hover { transform: translateY(-4px) scale(1.02); border-color: var(--vc-gold-2); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }

/* Text view rows */
.vc-dv-text { columns: 280px; column-gap: 32px; }
.vc-dv-tgroup { break-inside: avoid; margin-bottom: 14px; }
.vc-dv-tgroup h3 { margin: 0 0 4px; font-size: 1rem; }
.vc-dv-row { display: flex; gap: .5rem; align-items: baseline; padding: .1rem .35rem; border-radius: 4px; cursor: pointer; }
.vc-dv-row:hover { background: rgba(200, 162, 75, .09); }
.vc-dv-cost { margin-left: auto; font-size: .72rem; white-space: nowrap; }

/* Staggered entry: each card carries --i (capped server-side) */
@keyframes vc-rise { from { opacity: 0; transform: translateY(10px); } }
.vc-anim .vc-scard, .vc-anim .vc-card, .vc-anim .vc-dv-row { animation: vc-rise .35s ease-out backwards; animation-delay: calc(var(--i, 0) * 28ms); }

/* Card modal with pointer-tracking tilt + glare (one card at a time — never the whole grid) */
.vc-card-modal { max-width: 390px; }
.vc-tilt {
    position: relative;
    margin-top: 1rem;
    border-radius: 5.5% / 4%;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .14s ease-out;
    will-change: transform;
    touch-action: pan-y;
}
.vc-tilt img { width: 100%; display: block; border-radius: inherit; }
.vc-tilt .vc-scard-ph { aspect-ratio: 488 / 680; }
.vc-tilt::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .3), transparent 55%);
    opacity: var(--go, 0);
    mix-blend-mode: overlay;
    transition: opacity .25s;
    pointer-events: none;
}

/* Sample hand */
.vc-hand-modal { max-width: 880px; }
.vc-hand { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.1rem; min-height: 140px; }
.vc-hcard { width: clamp(88px, 10.5vw, 118px); margin: 0; }
.vc-hcard img, .vc-hcard .vc-scard-ph { width: 100%; aspect-ratio: 488 / 680; object-fit: cover; border-radius: 5.5% / 4%; display: block; background: #0f0c08; }
.vc-hcard .vc-scard-ph { font-size: .68rem; box-shadow: none; }
@keyframes vc-deal { from { opacity: 0; transform: translateY(26px) rotate(4deg) scale(.92); } }
.vc-hcard { animation: vc-deal .4s cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.vc-hand-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.1rem; }

@media (max-width: 760px) {
    .vc-dv-analysis { grid-template-columns: 1fr; }
    .vc-dv-hero-art { inset: 0 0 55% 0; }
    .vc-dv-hero-art::after { background: linear-gradient(0deg, #201b15 8%, rgba(32, 27, 21, .55) 60%, rgba(32, 27, 21, .2) 100%); }
}

/* Hover preview pops in instead of blinking on */
@keyframes vc-pop { from { opacity: 0; transform: scale(.96); } }
.vc-hover-preview img { animation: vc-pop .12s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .vc-anim .vc-scard, .vc-anim .vc-card, .vc-anim .vc-dv-row, .vc-hcard, .vc-hover-preview img { animation: none; }
    .vc-tilt { transform: none !important; transition: none; }
    .vc-scard, .vc-dv .vc-card { transition: opacity .2s, filter .2s; }
    .vc-scard:hover, .vc-dv .vc-card:hover { transform: none; }
}