/* The Witcher display face (wwwroot/fonts). Caps-only and without some symbols:
   used for titles, buttons and labels; glyphs it lacks fall back to Cinzel. */
@font-face {
    font-family: 'TheWitcher';
    src: url('/fonts/Thewitcher.ttf') format('truetype');
    font-display: swap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Gwent Classic — Witcher dark theme
   Inspired by the leather-and-gold UI of The Witcher 3 / original Gwent minigame.
   ──────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root,
::backdrop {
    --witcher-bg:           #14100c;
    --witcher-bg-2:         #1c1612;
    --witcher-surface:      #251c15;
    --witcher-surface-2:    #2e231a;
    --witcher-surface-hi:   #3a2c20;

    --witcher-border:       #4a3825;
    --witcher-border-hi:    #6a5235;

    --witcher-gold:         #c9a557;
    --witcher-gold-hi:      #e3c378;
    --witcher-gold-low:     #8c6f33;
    --witcher-blood:        #a13838;
    --witcher-blood-hi:     #c44e4e;

    --faction-realms:       #2c5b8a;
    --faction-nilfgaard:    #1a1a1a;
    --faction-monsters:     #5b1d1d;
    --faction-scoiatael:    #355d2c;
    --faction-skellige:     #4a2c66;

    --witcher-text:         #e8dfc8;
    --witcher-text-dim:     #b6a988;
    --witcher-text-mute:    #8e8266;

    --neutral-fill-rest:          var(--witcher-surface);
    --neutral-fill-hover:         var(--witcher-surface-2);
    --neutral-fill-active:        var(--witcher-surface-hi);
    --accent-fill-rest:           var(--witcher-gold);
    --accent-fill-hover:          var(--witcher-gold-hi);
    --neutral-foreground-rest:    var(--witcher-text);
    --neutral-foreground-hover:   var(--witcher-text);
    --neutral-stroke-rest:        var(--witcher-border);

    --type-ramp-base-font-family:    'Inter', system-ui, -apple-system, sans-serif;
    --display-font-family:           'Cinzel', 'Inter', serif;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(circle at 20% 0%, #2a1f15 0%, transparent 50%),
        radial-gradient(circle at 80% 100%, #1f1410 0%, transparent 50%),
        var(--witcher-bg);
    color: var(--witcher-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display-font {
    font-family: 'Cinzel', 'Inter', serif;
    color: var(--witcher-gold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

a { color: var(--witcher-gold-hi); text-decoration: none; }
a:hover { color: var(--witcher-gold); }

#blazor-error-ui {
    background: var(--witcher-blood);
    color: var(--witcher-text);
    bottom: 0;
    box-shadow: 0 -2px 4px rgba(0,0,0,.5);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.witcher-form {
    background: linear-gradient(180deg, var(--witcher-surface) 0%, var(--witcher-bg-2) 100%);
    border: 1px solid var(--witcher-border);
    border-radius: 6px;
    padding: 2.5rem;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.witcher-form h1 { text-align: center; margin: 0 0 2rem; font-size: 1.6rem; }
.witcher-form label {
    display: block; margin-bottom: 0.4rem;
    color: var(--witcher-text-dim); font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.witcher-form input[type=text],
.witcher-form input[type=email],
.witcher-form input[type=password] {
    width: 100%;
    background: var(--witcher-bg);
    border: 1px solid var(--witcher-border);
    color: var(--witcher-text);
    padding: 0.7rem 0.9rem;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    margin-bottom: 1.1rem;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.witcher-form input:focus {
    outline: none; border-color: var(--witcher-gold);
    box-shadow: 0 0 0 3px rgba(201, 165, 87, 0.15);
}
.witcher-form .submit {
    width: 100%;
    background: linear-gradient(180deg, var(--witcher-gold) 0%, var(--witcher-gold-low) 100%);
    color: var(--witcher-bg);
    border: none;
    padding: 0.9rem;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.08s ease, filter 0.15s ease;
}
.witcher-form .submit:hover { filter: brightness(1.15); }
.witcher-form .submit:active { transform: translateY(1px); }
.witcher-form .error {
    background: rgba(196, 78, 78, 0.15);
    border: 1px solid var(--witcher-blood);
    color: var(--witcher-blood-hi);
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.witcher-form .secondary-link {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--witcher-text-mute);
    font-size: 0.9rem;
}

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.auth-page .auth-brand { text-align: center; margin-bottom: 2rem; }
.auth-page .auth-brand h1 {
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 2.4rem;
    color: var(--witcher-gold);
    margin: 0;
    letter-spacing: 0.15em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.auth-page .auth-brand p {
    color: var(--witcher-text-mute);
    margin: 0.4rem 0 0;
    font-style: italic;
}

/* ── App shell ──────────────────────────────────────────────────────────── */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-topbar {
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0.8rem 1.5rem;
    background: linear-gradient(180deg, var(--witcher-surface-2) 0%, var(--witcher-bg-2) 100%);
    border-bottom: 1px solid var(--witcher-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.app-topbar .brand {
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 700;
    color: var(--witcher-gold);
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    margin-right: auto;
}
.app-topbar .user-pill {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.25rem 0.85rem 0.25rem 0.3rem;
    background: var(--witcher-surface-hi);
    border: 1px solid var(--witcher-border);
    border-radius: 999px;
    color: var(--witcher-text);
    font-size: 0.92rem;
}
.app-topbar .user-pill .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--witcher-gold-low);
    object-fit: cover;
    background: var(--witcher-bg);
}
.app-topbar .user-pill .elo { color: var(--witcher-gold); font-weight: 600; }
.app-topbar form { display: inline; margin: 0; }
.app-topbar .logout {
    background: transparent;
    border: 1px solid var(--witcher-blood);
    color: var(--witcher-blood-hi);
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.app-topbar .logout:hover { background: rgba(196, 78, 78, 0.15); }

.app-content {
    flex: 1; padding: 2rem;
    max-width: 1400px;
    margin: 0 auto; width: 100%;
    box-sizing: border-box;
}

/* ── Tile dashboard ─────────────────────────────────────────────────────── */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(120px, auto);
    gap: 1.1rem;
}
.tile-grid .row-hero {
    grid-column: span 3;
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 1.1rem;
    margin-bottom: 0.4rem;
}

.tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--witcher-border);
    background: var(--witcher-surface);
    color: var(--witcher-text);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    text-decoration: none;
    isolation: isolate;
}
.tile:hover {
    transform: translateY(-3px);
    border-color: var(--witcher-gold);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--witcher-gold) inset;
}
.tile .tile-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.45;
    z-index: -2;
    transition: opacity 0.25s ease, transform 0.6s ease;
}
.tile:hover .tile-bg {
    opacity: 0.6;
    transform: scale(1.05);
}
.tile .tile-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20, 16, 12, 0.25) 0%, rgba(20, 16, 12, 0.85) 100%);
    z-index: -1;
}
.tile .tile-body {
    position: relative;
    padding: 1.1rem 1.3rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 130px;
    box-sizing: border-box;
}
.tile.hero .tile-body { min-height: 230px; }
.tile .tile-icon {
    position: absolute;
    top: 0.9rem; right: 1rem;
    width: 42px;
    height: 42px;
    object-fit: contain;
    opacity: 0.85;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
    transition: opacity 0.2s ease, transform 0.25s ease;
}
.tile:hover .tile-icon {
    opacity: 1;
    transform: scale(1.08);
}
.tile.hero .tile-icon { width: 56px; height: 56px; }
.tile .tile-icon-emoji {
    /* When using an emoji instead of an <img>, render as text-sized glyph. */
    width: auto;
    height: auto;
    color: var(--witcher-gold);
    font-size: 1.8rem;
    line-height: 1;
    filter: none;
}
.tile.hero .tile-icon-emoji { font-size: 2.4rem; }
.tile .tile-title {
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--witcher-gold);
    margin: 0 0 0.25rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.tile.hero .tile-title { font-size: 1.6rem; }
.tile .tile-subtitle {
    color: var(--witcher-text-dim);
    font-size: 0.88rem;
    margin: 0;
}
.tile .tile-badge {
    position: absolute;
    top: 0.7rem; left: 0.8rem;
    background: var(--witcher-blood);
    color: var(--witcher-text);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tile.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.tile.disabled .tile-badge { background: var(--witcher-surface-hi); color: var(--witcher-text-mute); }

.tile.theme-play     { background: radial-gradient(ellipse at center, #5b3a2c 0%, #2a1d14 80%); }
.tile.theme-decks    { background: radial-gradient(ellipse at top left, #2c5b8a 0%, #14213a 80%); }
.tile.theme-profile  { background: radial-gradient(ellipse at top right, #6b5b2b 0%, #2a221a 80%); }
.tile.theme-tutorial { background: radial-gradient(ellipse at center, #355d2c 0%, #19261a 80%); }
.tile.theme-ranking  { background: radial-gradient(ellipse at center, #5b1d1d 0%, #2a1010 80%); }
.tile.theme-collect  { background: radial-gradient(ellipse at center, #4a2c66 0%, #1f1530 80%); }
.tile.theme-settings { background: radial-gradient(ellipse at center, #3a2c20 0%, #1c1612 80%); }
.tile.theme-multi    { background: radial-gradient(ellipse at center, #2a2a2a 0%, #111 80%); }

/* Placeholder pages */
.coming-soon {
    max-width: 600px;
    margin: 6rem auto;
    text-align: center;
    color: var(--witcher-text-dim);
}
.coming-soon h1 { color: var(--witcher-gold); font-size: 2rem; }

/* ── Decks page ───────────────────────────────────────────────────────────── */
.decks-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--witcher-border);
}
.decks-header h1 { margin: 0; }

.btn-primary {
    background: linear-gradient(180deg, var(--witcher-gold) 0%, var(--witcher-gold-low) 100%);
    color: var(--witcher-bg);
    padding: 0.6rem 1.1rem;
    border: none;
    border-radius: 4px;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.12s ease;
    font-size: 0.9rem;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
    background: transparent;
    border: 1px solid var(--witcher-border);
    color: var(--witcher-text-dim);
    padding: 0.55rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}
.btn-secondary:hover { border-color: var(--witcher-gold); color: var(--witcher-gold); }

.loading-block { padding: 4rem; text-align: center; color: var(--witcher-text-mute); }

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--witcher-text-dim);
}
.empty-state img { width: 96px; opacity: 0.55; margin-bottom: 1.4rem; }
.empty-state h2 { color: var(--witcher-gold); font-size: 1.5rem; margin: 0 0 0.4rem; }
.empty-state p { margin: 0 0 1.8rem; }

.deck-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

/* ─── Per-faction overview (Decks page) ─────────────────────────────────── */
.faction-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.4rem;
    margin-top: 1.5rem;
}

.faction-overview-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.6rem 1rem 1.4rem;
    background: var(--witcher-surface);
    border: 1px solid var(--witcher-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--witcher-fg);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.faction-overview-tile:hover {
    transform: translateY(-2px);
    border-color: var(--witcher-gold);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

.faction-overview-shield {
    width: 96px;
    height: auto;
    margin-bottom: 0.8rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.faction-overview-body h2 {
    margin: 0 0 0.4rem;
    color: var(--witcher-gold);
    font-size: 1.15rem;
}

.faction-overview-meta {
    display: block;
    color: var(--witcher-fg-muted);
    font-size: 0.9rem;
}

.faction-overview-state {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 12px;
}

.faction-overview-state.ok  { background: rgba(46, 125, 50, 0.25);  color: #8fd58c; border: 1px solid #4a7d4a; }
.faction-overview-state.bad { background: rgba(160, 60, 60, 0.25);  color: #ef9a9a; border: 1px solid #8b3a3a; }
.faction-overview-tile.empty .faction-overview-shield { opacity: 0.55; }
.empty-meta { font-style: italic; opacity: 0.7; }

/* Saved-flash indicator in the editor header */
.builder-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.builder-save-flash {
    color: #8fd58c;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0;
    animation: fadeInOut 1.5s ease;
}

@@keyframes fadeInOut {
    0%   { opacity: 0; transform: translateY(-4px); }
    20%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

.deck-tile {
    position: relative;
    background: var(--witcher-surface);
    border: 1px solid var(--witcher-border);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.deck-tile:hover { border-color: var(--witcher-gold); transform: translateY(-2px); }
.deck-tile.invalid { border-color: var(--witcher-blood); }

.deck-tile-link {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.9rem 1rem;
    color: var(--witcher-text);
    text-decoration: none;
}
.deck-tile-shield { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.deck-tile-body { flex: 1; min-width: 0; }
.deck-tile-body h3 {
    font-family: 'TheWitcher', 'Cinzel', serif;
    margin: 0 0 0.2rem; color: var(--witcher-gold);
    font-size: 1.05rem; letter-spacing: 0.04em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.deck-tile-meta { display: flex; gap: 0.7rem; color: var(--witcher-text-dim); font-size: 0.85rem; }
.deck-tile-faction::after { content: ""; margin: 0 0.4rem; border-left: 1px solid var(--witcher-border); }
.deck-tile-cards { }

.deck-tile-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.deck-tile-badge.good { background: rgba(53, 93, 44, 0.6); color: #b9d8a9; border: 1px solid #4a7937; }
.deck-tile-badge.bad { background: rgba(161, 56, 56, 0.25); color: var(--witcher-blood-hi); border: 1px solid var(--witcher-blood); }

.deck-tile-delete {
    position: absolute; top: 0.4rem; right: 0.4rem;
    background: transparent; border: none;
    color: var(--witcher-text-mute);
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer; font-size: 0.95rem;
}
.deck-tile-delete:hover { background: var(--witcher-blood); color: var(--witcher-text); }

/* ── Deck editor ──────────────────────────────────────────────────────────── */
.editor-section {
    background: var(--witcher-surface);
    border: 1px solid var(--witcher-border);
    border-radius: 6px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1rem;
}
.editor-step {
    font-family: 'TheWitcher', 'Cinzel', serif;
    color: var(--witcher-gold);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 1.4rem 0 0.8rem;
}
.editor-step:first-child { margin-top: 0; }

.field-label {
    display: block;
    color: var(--witcher-text-dim);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}
.witcher-input {
    width: 100%;
    background: var(--witcher-bg);
    border: 1px solid var(--witcher-border);
    color: var(--witcher-text);
    padding: 0.6rem 0.85rem;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    box-sizing: border-box;
}
.witcher-input:focus {
    outline: none; border-color: var(--witcher-gold);
    box-shadow: 0 0 0 3px rgba(201, 165, 87, 0.15);
}

/* Faction picker */
.faction-picker { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.faction-chip {
    background: var(--witcher-bg-2);
    border: 1px solid var(--witcher-border);
    color: var(--witcher-text-dim);
    padding: 0.6rem 1rem 0.6rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; gap: 0.6rem;
    font-family: inherit; font-size: 0.95rem;
    transition: border-color 0.15s, background 0.15s;
    min-width: 180px;
}
.faction-chip img { width: 36px; height: 36px; object-fit: contain; }
.faction-chip:hover { border-color: var(--witcher-gold-low); color: var(--witcher-text); }
.faction-chip.selected {
    border-color: var(--witcher-gold);
    background: var(--witcher-surface-hi);
    color: var(--witcher-gold);
    box-shadow: 0 0 0 1px var(--witcher-gold) inset;
}

/* Leader picker */
.leader-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.7rem;
}
.leader-chip {
    background: var(--witcher-bg-2);
    border: 1px solid var(--witcher-border);
    color: var(--witcher-text-dim);
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    font-family: inherit; font-size: 0.78rem;
    text-align: center;
    transition: border-color 0.15s, color 0.15s;
}
.leader-chip img { width: 100%; max-width: 140px; aspect-ratio: 0.7; object-fit: cover; border-radius: 4px; }
.leader-chip:hover { border-color: var(--witcher-gold-low); color: var(--witcher-text); }
.leader-chip.selected {
    border-color: var(--witcher-gold);
    color: var(--witcher-gold);
    box-shadow: 0 0 0 1px var(--witcher-gold) inset;
}

/* Builder layout — NOTE: the real builder card grid lives further down
   (".builder-grid" near the BuilderCardTile rules). The old 2-column list
   builder below (.pool-header/.card-list/.card-row/.btn-add…) is legacy and
   unused by DeckEditor.razor; kept only because .card-name is shared. */
.pool-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0.8rem;
    background: var(--witcher-surface-2);
    border: 1px solid var(--witcher-border);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    color: var(--witcher-gold);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pool-filter { width: 220px; padding: 0.35rem 0.6rem; font-size: 0.85rem; }

.card-list {
    background: var(--witcher-bg-2);
    border: 1px solid var(--witcher-border);
    border-radius: 0 0 4px 4px;
    max-height: 460px;
    overflow-y: auto;
}
.card-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center; gap: 0.6rem;
    padding: 0.45rem 0.8rem;
    border-bottom: 1px solid var(--witcher-bg);
    font-size: 0.88rem;
    color: var(--witcher-text);
}
.card-row:last-child { border-bottom: none; }
.card-row:hover { background: var(--witcher-surface); }
.card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { display: flex; gap: 0.5rem; font-size: 0.82rem; color: var(--witcher-text-dim); }
.card-meta .power {
    background: var(--witcher-surface-hi);
    color: var(--witcher-gold);
    padding: 0.05rem 0.45rem;
    border-radius: 999px; font-weight: 700;
    font-size: 0.78rem;
}
.card-count { color: var(--witcher-text-mute); font-size: 0.82rem; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.card-row.in-deck { background: rgba(201, 165, 87, 0.04); }

.btn-add, .btn-remove {
    background: var(--witcher-surface-hi);
    border: 1px solid var(--witcher-border);
    color: var(--witcher-gold);
    width: 26px; height: 26px;
    border-radius: 4px;
    cursor: pointer; font-size: 1.05rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    font-family: monospace;
}
.btn-add:hover:not(:disabled) { background: var(--witcher-gold); color: var(--witcher-bg); }
.btn-remove { color: var(--witcher-blood-hi); }
.btn-remove:hover { background: var(--witcher-blood); color: var(--witcher-text); }
.btn-add:disabled { opacity: 0.3; cursor: not-allowed; }

/* Deck stats panel */
.deck-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-top: 0.8rem;
    padding: 1rem;
    background: var(--witcher-bg-2);
    border: 1px solid var(--witcher-border);
    border-radius: 4px;
}
@media (max-width: 700px) { .deck-stats { grid-template-columns: repeat(2, 1fr); } }
.deck-stats .stat {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    background: var(--witcher-surface);
}
.deck-stats .stat img { width: 32px; height: 32px; opacity: 0.8; }
.deck-stats .stat strong { font-size: 1.4rem; color: var(--witcher-gold); font-family: 'TheWitcher', 'Cinzel', serif; display: block; line-height: 1; }
.deck-stats .stat .lbl { font-size: 0.78rem; color: var(--witcher-text-dim); text-transform: uppercase; letter-spacing: 0.06em; display: block; }
.deck-stats .stat .hint { font-size: 0.72rem; color: var(--witcher-text-mute); display: block; margin-top: 0.1rem; }
.deck-stats .stat.bad strong { color: var(--witcher-blood-hi); }
.deck-stats .stat.bad { box-shadow: 0 0 0 1px var(--witcher-blood) inset; }

.deck-stats-errors {
    margin: 0.6rem 0 0;
    padding: 0.8rem 1rem 0.8rem 2rem;
    background: rgba(161, 56, 56, 0.1);
    border: 1px solid var(--witcher-blood);
    border-radius: 4px;
    color: var(--witcher-blood-hi);
    font-size: 0.85rem;
}
.deck-stats-errors li { margin-bottom: 0.2rem; }

.editor-actions {
    display: flex; gap: 0.7rem; justify-content: flex-end;
    margin-top: 1rem;
}

/* ── Profile page ─────────────────────────────────────────────────────────── */
.profile-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.8rem 2rem;
    background: linear-gradient(135deg, var(--witcher-surface-2) 0%, var(--witcher-surface) 100%);
    border: 1px solid var(--witcher-border);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}
.profile-avatar {
    width: 88px; height: 88px;
    border-radius: 50%;
    border: 2px solid var(--witcher-gold);
    object-fit: cover;
    background: var(--witcher-bg);
    box-shadow: 0 0 24px rgba(201, 165, 87, 0.25);
}
.profile-headline h1 {
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 1.8rem;
    color: var(--witcher-gold);
    margin: 0 0 0.3rem;
    letter-spacing: 0.06em;
}
.profile-meta {
    color: var(--witcher-text-dim);
    font-size: 0.9rem;
    margin: 0;
}
.profile-meta strong { color: var(--witcher-text); font-weight: 500; }

.profile-rating {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.7rem 1.2rem;
    background: var(--witcher-bg);
    border: 1px solid var(--witcher-gold-low);
    border-radius: 999px;
}
.profile-rating img { width: 38px; height: 38px; }
.profile-rating-value {
    display: block;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--witcher-gold);
    font-weight: 700;
}
.profile-rating-label {
    display: block;
    color: var(--witcher-text-mute);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.15rem;
}

/* Stat grid */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.9rem;
    margin-bottom: 1.8rem;
}
@media (max-width: 900px) { .profile-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .profile-stats { grid-template-columns: repeat(2, 1fr); } }

.stat-block {
    display: flex; align-items: center; gap: 0.7rem;
    background: var(--witcher-surface);
    border: 1px solid var(--witcher-border);
    border-radius: 6px;
    padding: 0.8rem 0.9rem;
}
.stat-block-icon { width: 30px; height: 30px; object-fit: contain; opacity: 0.85; }
.stat-block-body { min-width: 0; }
.stat-block-value {
    display: block;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 1.6rem; line-height: 1;
    font-weight: 700;
    color: var(--witcher-text);
    font-variant-numeric: tabular-nums;
}
.stat-block-label {
    display: block;
    color: var(--witcher-text-mute);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.2rem;
}
.stat-block-sub {
    display: block; font-size: 0.7rem; color: var(--witcher-text-mute); margin-top: 0.1rem;
}
.stat-block.tone-positive .stat-block-value { color: #9ec585; }
.stat-block.tone-negative .stat-block-value { color: var(--witcher-blood-hi); }
.stat-block.tone-gold .stat-block-value { color: var(--witcher-gold); }

/* Section title (history, etc.) */
.section-title {
    font-family: 'TheWitcher', 'Cinzel', serif;
    color: var(--witcher-gold);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.9rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--witcher-border);
}

/* History table */
.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.history-table thead th {
    text-align: left;
    color: var(--witcher-text-mute);
    font-weight: 500;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--witcher-border);
}
.history-table th.num, .history-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.history-table tbody td {
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--witcher-bg-2);
    color: var(--witcher-text);
}
.history-table tbody tr:hover { background: var(--witcher-surface); }
.history-table td.dim { color: var(--witcher-text-dim); font-size: 0.85rem; }

.outcome-pill {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    border: 1px solid transparent;
}
.outcome-pill.outcome-win  { background: rgba(53, 93, 44, 0.35); color: #b9d8a9; border-color: #4a7937; }
.outcome-pill.outcome-lose { background: rgba(161, 56, 56, 0.25); color: var(--witcher-blood-hi); border-color: var(--witcher-blood); }
.outcome-pill.outcome-draw { background: var(--witcher-surface-hi); color: var(--witcher-text-dim); border-color: var(--witcher-border); }

.ai-tag {
    display: inline-block;
    background: var(--witcher-surface-hi);
    color: var(--witcher-gold-low);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-right: 0.4rem;
    letter-spacing: 0.06em;
}

.elo-up   { color: #9ec585; font-weight: 700; }
.elo-down { color: var(--witcher-blood-hi); font-weight: 700; }
.elo-flat { color: var(--witcher-text-mute); }

/* ── Ranking page ─────────────────────────────────────────────────────────── */
.title-icon { width: 32px; height: 32px; vertical-align: middle; margin-right: 0.4rem; }

.ranking-self {
    margin-bottom: 1.2rem;
}
.ranking-self-label {
    display: block;
    font-size: 0.75rem;
    color: var(--witcher-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.ranking-table thead th {
    text-align: left;
    background: var(--witcher-surface-2);
    color: var(--witcher-gold);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--witcher-gold-low);
}
.ranking-table th.num, .ranking-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ranking-table tbody td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--witcher-bg-2);
    color: var(--witcher-text);
}
.ranking-table tbody tr:hover { background: var(--witcher-surface); }
.ranking-table tbody tr.is-me {
    background: linear-gradient(90deg, rgba(201, 165, 87, 0.12) 0%, transparent 100%);
    border-left: 3px solid var(--witcher-gold);
}
.ranking-table tbody tr.is-me td:first-child { padding-left: calc(0.9rem - 3px); }

/* Rank tier styling */
.rank-tier-first td.rating-cell { color: var(--witcher-gold); font-weight: 700; }
.rank-cell { width: 80px; }
.rank-number {
    color: var(--witcher-text-mute);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 600;
}
.medal { font-size: 1.4rem; }

.player-cell {
    display: flex; align-items: center; gap: 0.6rem;
}
.player-cell img {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--witcher-border);
    object-fit: cover;
    background: var(--witcher-bg);
}
.you-tag {
    margin-left: 0.4rem;
    font-size: 0.65rem;
    background: var(--witcher-gold);
    color: var(--witcher-bg);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.rating-cell { color: var(--witcher-gold); font-weight: 700; }

.streak-up { color: #9ec585; font-weight: 700; }
.streak-down { color: var(--witcher-blood-hi); font-weight: 700; }
.streak-flat { color: var(--witcher-text-mute); }

/* ── Collection browser ───────────────────────────────────────────────────── */
.collection-count {
    color: var(--witcher-text-dim);
    font-size: 0.9rem;
}

.collection-filters {
    display: flex; gap: 0.7rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}
.collection-filters .witcher-input { flex: 1; min-width: 240px; max-width: 360px; }

.witcher-select {
    background: var(--witcher-bg);
    border: 1px solid var(--witcher-border);
    color: var(--witcher-text);
    padding: 0.55rem 0.85rem;
    border-radius: 4px;
    font-family: inherit; font-size: 0.92rem;
    cursor: pointer;
    min-width: 180px;
}
.witcher-select:focus {
    outline: none; border-color: var(--witcher-gold);
    box-shadow: 0 0 0 3px rgba(201, 165, 87, 0.15);
}
.witcher-select option { background: var(--witcher-bg-2); color: var(--witcher-text); }

.collection-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.3rem;
}
@media (max-width: 1100px) { .collection-layout { grid-template-columns: 1fr; } }

.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.7rem;
    align-content: start;
}

.card-thumb {
    position: relative;
    aspect-ratio: 0.7;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--witcher-bg-2);
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.card-thumb img:first-child {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.3s ease;
}
.card-thumb:hover {
    transform: translateY(-3px);
    border-color: var(--witcher-gold-low);
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}
.card-thumb:hover img:first-child { transform: scale(1.06); }
.card-thumb.active {
    border-color: var(--witcher-gold);
    box-shadow: 0 0 0 1px var(--witcher-gold), 0 12px 24px rgba(0,0,0,0.55);
}
.card-thumb-power {
    position: absolute; top: 4px; left: 4px;
    background: rgba(20,16,12,0.85);
    color: var(--witcher-gold);
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.78rem;
    border: 1px solid var(--witcher-gold-low);
}
.card-thumb-shield {
    position: absolute; bottom: 4px; right: 4px;
    width: 22px; height: 22px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
    opacity: 0.85;
}
.card-thumb-hero {
    position: absolute; top: 4px; right: 4px;
    background: var(--witcher-gold);
    color: var(--witcher-bg);
    font-size: 0.85rem;
    font-weight: 700;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}

.card-preview-panel {
    position: sticky;
    top: 1rem;
    background: var(--witcher-surface);
    border: 1px solid var(--witcher-border);
    border-radius: 8px;
    padding: 1rem;
    height: fit-content;
}
.card-preview-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--witcher-text-mute);
}
.card-preview-empty img { width: 60px; opacity: 0.4; margin-bottom: 1rem; }

.card-preview-image {
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--witcher-border);
    margin-bottom: 1rem;
    aspect-ratio: 0.7;
    object-fit: cover;
}

.card-preview-body h3 {
    font-family: 'TheWitcher', 'Cinzel', serif;
    color: var(--witcher-gold);
    margin: 0 0 0.9rem;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}

.card-preview-stats {
    margin: 0;
    display: grid; gap: 0.55rem;
}
.card-preview-stats > div {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--witcher-bg-2);
}
.card-preview-stats > div:last-child { border-bottom: none; padding-bottom: 0; }
.card-preview-stats dt {
    margin: 0;
    color: var(--witcher-text-mute);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.card-preview-stats dd {
    margin: 0;
    color: var(--witcher-text);
    font-size: 0.92rem;
    text-align: right;
}
.card-preview-stats dd.big-number {
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 1.5rem;
    color: var(--witcher-gold);
    font-weight: 700;
}
.ability-tag {
    display: inline-block;
    background: var(--witcher-surface-hi);
    color: var(--witcher-gold-hi);
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    margin: 0.05rem;
    border-radius: 3px;
    font-family: monospace;
}

/* ── Settings page ────────────────────────────────────────────────────────── */
.settings-section {
    background: var(--witcher-surface);
    border: 1px solid var(--witcher-border);
    border-radius: 6px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1rem;
}
.settings-hint {
    color: var(--witcher-text-mute);
    font-size: 0.88rem;
    margin: 0 0 1rem;
}

.settings-disabled-block {
    display: flex; flex-direction: column; gap: 0.6rem;
    color: var(--witcher-text-mute);
    pointer-events: none;
}
.settings-disabled-block label {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.88rem;
}
.settings-disabled-block input[type=range] {
    accent-color: var(--witcher-gold-low);
    width: 100%; max-width: 280px;
}

.settings-account-row {
    display: flex; align-items: baseline; gap: 0.8rem;
    margin-bottom: 0.8rem;
}
.settings-account-label {
    color: var(--witcher-text-mute);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    min-width: 80px;
}
.settings-account-value { color: var(--witcher-text); }
.settings-subtitle {
    color: var(--witcher-text-dim);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 1.4rem 0 0.8rem;
}

.settings-password-form {
    display: grid; gap: 0.4rem;
    max-width: 380px;
}
.settings-password-form label {
    color: var(--witcher-text-dim);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.4rem;
}
.settings-password-form input[type=password] {
    background: var(--witcher-bg);
    border: 1px solid var(--witcher-border);
    color: var(--witcher-text);
    padding: 0.6rem 0.85rem;
    border-radius: 4px;
    font-family: inherit;
}
.settings-password-form input:focus {
    outline: none; border-color: var(--witcher-gold);
    box-shadow: 0 0 0 3px rgba(201, 165, 87, 0.15);
}
.settings-password-form button { margin-top: 0.8rem; justify-self: start; }
.settings-success {
    background: rgba(53, 93, 44, 0.2);
    color: #b9d8a9;
    border: 1px solid #4a7937;
    padding: 0.55rem 0.85rem;
    border-radius: 4px;
    margin-bottom: 0.8rem;
    font-size: 0.88rem;
}

.danger-zone { border-color: var(--witcher-blood); }
.danger-zone .section-title { color: var(--witcher-blood-hi); }
.btn-danger {
    background: transparent;
    border: 1px solid var(--witcher-blood);
    color: var(--witcher-blood-hi);
    padding: 0.55rem 1.1rem;
    font-family: 'TheWitcher', 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
}
.btn-danger:hover { background: var(--witcher-blood); color: var(--witcher-text); }

/* ── Tutorial page ────────────────────────────────────────────────────────── */
.tutorial-step-counter {
    color: var(--witcher-text-mute);
    font-size: 0.88rem;
    font-family: 'TheWitcher', 'Cinzel', serif;
    letter-spacing: 0.1em;
}

.tutorial-progress {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.4rem;
    justify-content: center;
}
.tutorial-dot {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--witcher-border);
    background: var(--witcher-bg);
    color: var(--witcher-text-mute);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.tutorial-dot:hover { border-color: var(--witcher-gold-low); color: var(--witcher-text); }
.tutorial-dot.active {
    background: var(--witcher-gold);
    color: var(--witcher-bg);
    border-color: var(--witcher-gold);
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(201, 165, 87, 0.5);
}
.tutorial-dot.done {
    border-color: var(--witcher-gold-low);
    color: var(--witcher-gold-low);
}

.tutorial-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
    background: var(--witcher-surface);
    border: 1px solid var(--witcher-border);
    border-radius: 8px;
    overflow: hidden;
    min-height: 320px;
}
@media (max-width: 800px) {
    .tutorial-card { grid-template-columns: 1fr; }
    .tutorial-illustration { max-height: 220px; }
}

.tutorial-illustration {
    overflow: hidden;
    position: relative;
}
.tutorial-illustration img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.7) saturate(1.1);
}
.tutorial-illustration::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 60%, var(--witcher-surface) 100%);
    pointer-events: none;
}

.tutorial-text {
    padding: 2rem 1.8rem;
    display: flex; flex-direction: column; justify-content: center;
}
.tutorial-text h2 {
    font-family: 'TheWitcher', 'Cinzel', serif;
    color: var(--witcher-gold);
    font-size: 1.7rem;
    letter-spacing: 0.04em;
    margin: 0 0 1rem;
}
.tutorial-text p {
    color: var(--witcher-text);
    line-height: 1.65;
    margin: 0;
}

.tutorial-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
}
.tutorial-nav .btn-secondary[disabled] { opacity: 0.4; pointer-events: none; }

/* ── Play page (deck selector) ────────────────────────────────────────────── */
.play-page .settings-hint { margin: -0.5rem 0 1.5rem; }

.play-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.play-deck-tile {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.2rem;
    background: var(--witcher-surface);
    border: 2px solid var(--witcher-border);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--witcher-text);
    font-family: inherit;
    transition: all 0.15s ease;
    position: relative;
}
.play-deck-tile:hover { border-color: var(--witcher-gold-low); transform: translateY(-2px); }
.play-deck-tile.selected {
    border-color: var(--witcher-gold);
    background: linear-gradient(135deg, var(--witcher-surface-hi) 0%, var(--witcher-surface) 100%);
    box-shadow: 0 0 16px rgba(201, 165, 87, 0.3);
}
.play-deck-shield { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.play-deck-body { flex: 1; min-width: 0; }
.play-deck-body h3 {
    font-family: 'TheWitcher', 'Cinzel', serif;
    color: var(--witcher-gold);
    font-size: 1.05rem;
    margin: 0 0 0.2rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.play-deck-meta { color: var(--witcher-text-dim); font-size: 0.85rem; }
.play-deck-check {
    position: absolute; top: 0.8rem; right: 0.8rem;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--witcher-gold);
    color: var(--witcher-bg);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.play-ai-panel {
    display: flex; align-items: end; gap: 1.2rem;
    padding: 1rem 1.2rem;
    background: var(--witcher-surface);
    border: 1px solid var(--witcher-border);
    border-radius: 6px;
}
.play-ai-field {
    display: flex; flex-direction: column; gap: 0.3rem;
}
.play-ai-field label {
    color: var(--witcher-text-mute);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.play-start-btn {
    margin-left: auto;
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
}
.play-invalid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
    width: 100%;
    max-width: 900px;
}

/* ── Builder page (Gwent-original 3-col layout) ────────────────────────────── */
/* ── Viewport-locked builder ────────────────────────────────────────────────
   The builder behaves like a game screen, not a web page: the chrome (topbar)
   stays anchored, the page never scrolls as a whole, and only the card lists
   inside each column have their own scrollbars. We use :has() to scope the
   locks to pages that actually render .builder-page — other routes keep the
   normal scrolling-document behaviour. */

html:has(.builder-page),
body:has(.builder-page) {
    height: 100vh;
    overflow: hidden;
}
body:has(.builder-page) .app-shell {
    height: 100vh;
    min-height: 0;
}
body:has(.builder-page) .app-content {
    padding: 0;
    max-width: none;
    overflow: hidden;
    min-height: 0;
    display: flex;            /* so the builder fills the remaining space cleanly */
}

.builder-page {
    background: linear-gradient(180deg, var(--witcher-bg) 0%, var(--witcher-bg-2) 100%);
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 1rem 1.5rem 1.2rem;
    box-sizing: border-box;
    display: flex; flex-direction: column;
    overflow: hidden;         /* no page-level scroll; columns scroll instead */
}

/* Header: centered faction switcher (no divider line). The ✕ floats top-right. */
.builder-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0 0.6rem;
    margin-bottom: 0.4rem;
    flex: 0 0 auto;           /* never flex-grow; always intrinsic height */
}
.builder-header-right {
    position: absolute;
    top: 0;
    right: 0;
    display: flex; align-items: center; gap: 0.8rem;
}
.builder-close {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--witcher-border);
    color: var(--witcher-text-mute);
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    font-size: 1rem;
}
.builder-close:hover {
    border-color: var(--witcher-blood);
    color: var(--witcher-blood-hi);
}

/* Centered faction switcher: ‹ prev — shield + name — next › */
.faction-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}
.faction-current {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 16rem;
}
.faction-current-shield {
    width: 46px; height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.faction-current-name {
    margin: 0;
    font-family: 'TheWitcher', 'Cinzel', serif;
    color: var(--witcher-gold);
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.faction-nav {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--witcher-text-mute);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.faction-nav:hover { opacity: 1; color: var(--witcher-text); }
.faction-nav-arrow { font-size: 1.4rem; line-height: 1; color: var(--witcher-gold-low); }
.faction-nav:hover .faction-nav-arrow { color: var(--witcher-gold); }
.faction-perk {
    margin: 0.35rem 0 0;
    text-align: center;
    color: var(--witcher-text-dim);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}
@media (max-width: 1100px) { .faction-nav-name { display: none; } }

/* Filter row — now nested INSIDE each card column (pool + deck), under the
   column header. Sized to fit the column width with the same horizontal padding
   as the grid below so the chips align with the cards. */
.builder-filter-row {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: transparent;      /* float the chips on the dark backdrop — no bar/border */
    border-bottom: none;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}
.builder-filter-row .filter-chip {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}
.builder-filter-row .filter-chip img {
    width: 16px; height: 16px;
}
/* Hide the text label on chips that have an icon (Close/Ranged/Siege/Specials/
   Weather) to keep the row compact — the icons + tooltip convey the row type.
   The "All" chip has no icon, so its label stays visible as a textual fallback. */
.builder-filter-row .filter-chip span { display: none; }
.builder-filter-row .filter-chip:not(:has(img)) span { display: inline; }
.filter-chip {
    background: transparent;
    border: 1px solid var(--witcher-border);
    color: var(--witcher-text-dim);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    display: flex; align-items: center; gap: 0.4rem;
    font-family: inherit;
    font-size: 0.82rem;
    transition: all 0.15s ease;
}
.filter-chip img { width: 18px; height: 18px; opacity: 0.75; }
.filter-chip:hover { border-color: var(--witcher-gold-low); color: var(--witcher-text); }
.filter-chip.active {
    background: var(--witcher-gold);
    color: var(--witcher-bg);
    border-color: var(--witcher-gold);
    font-weight: 600;
}
.filter-chip.active img { filter: brightness(0); opacity: 1; }

/* 3-column body — the central column is fixed-width so the two card panels
   share the remaining viewport equally. The body itself is flex-grown to fill
   whatever is left after the header + filter row, and `min-height: 0` lets
   the children's `overflow-y: auto` actually kick in (Flexbox gotcha). */
.builder-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr);
    gap: 1.2rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
@media (max-width: 1200px) {
    .builder-body { grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr); }
}
@media (max-width: 980px) {
    /* Fallback for very narrow viewports: stack columns and re-enable page scroll. */
    .builder-body { grid-template-columns: 1fr; overflow-y: auto; }
    body:has(.builder-page) { overflow: auto; height: auto; }
}

/* W3 deck-maker parity: columns are NOT framed boxes — the cards float directly
   on the dark backdrop. No border, no surface fill, no rounded panel. */
.builder-column {
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
    min-height: 0;            /* required for inner scroll to engage */
}
.builder-column-header {
    padding: 0.7rem 1rem;
    background: transparent;  /* just centered gold title text — no header bar/border */
    border-bottom: none;
    text-align: center;
}
.builder-column-header h2 {
    margin: 0;
    color: var(--witcher-gold);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.builder-column-sub {
    display: block;
    color: var(--witcher-text-mute);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 0.2rem;
}

.builder-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.7rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Width-driven cards (W3 deck-maker parity): each card fills its column and
       its height follows the art ratio, so the 3 columns are evenly distributed
       with no horizontal gaps. Rows size to the card height; overflow scrolls. */
    grid-auto-rows: max-content;
    gap: 0.7rem;
    align-content: start;
    justify-items: stretch;

    /* Witcher-styled scrollbar (Firefox + Chromium) */
    scrollbar-width: thin;
    scrollbar-color: var(--witcher-gold-low) transparent;
}
.builder-grid::-webkit-scrollbar { width: 8px; }
.builder-grid::-webkit-scrollbar-track { background: transparent; }
.builder-grid::-webkit-scrollbar-thumb {
    background: var(--witcher-gold-low);
    border-radius: 4px;
}
.builder-grid::-webkit-scrollbar-thumb:hover { background: var(--witcher-gold); }
@media (max-width: 700px) { .builder-grid { grid-template-columns: repeat(2, 1fr); } }

/* Builder card tile — W3 Gwent deck-maker parity.
   The OUTER button is a transparent click target that fills the grid column.
   The INNER .bct-frame is the full card image: width-driven (fills the column),
   height from the art ratio. NO frame/border ring — the card sits flush like the
   original, with only rounded corners + a soft drop shadow for depth. */
.builder-card-tile {
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--witcher-text);
    font-family: inherit;
    width: 100%;
    display: block;
}
.builder-card-tile.disabled,
.builder-card-tile:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bct-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 0.667;            /* real /img/lg/ art ratio (200×300) → full card, no crop */
    height: auto;
    border-radius: 0.5vw;           /* JS used border-radius: 1vw — just rounded corners, no frame */
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);   /* depth only — NOT a border */
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    display: block;
}
/* Hover: lift + slight scale only — no gold ring (the original has no frame). */
.builder-card-tile:hover:not(:disabled) .bct-frame {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
}
/* Deck-mode cards carry NO permanent border either — flush, like the original. */

.bct-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;            /* show the COMPLETE card — never crop */
    display: block;
}

/* Count badge — bottom-right corner, mirroring the original Gwent builder's
   preview_count coin (style.css .card-array .card-lg > div at left:76%). */
.bct-count-badge {
    position: absolute;
    right: 7%;
    bottom: 7%;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px 2px 6px;
    background: rgba(20, 16, 12, 0.82);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 3px;
    color: var(--witcher-gold);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.74rem;
    line-height: 1;
    letter-spacing: 0.02em;
    backdrop-filter: blur(1px);
    pointer-events: none;
}
.bct-count-badge img {
    width: 12px;
    height: 12px;
    object-fit: contain;
    opacity: 0.85;
}
.bct-count-max {
    color: var(--witcher-text-mute);
    font-weight: 400;
    margin-left: 1px;
}

/* Center column: faction badge, leader, stats, start button */
.builder-center-col {
    overflow-y: auto;
    padding: 1.2rem 1rem;
    gap: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--witcher-gold-low) transparent;
}
.builder-center-col::-webkit-scrollbar { width: 6px; }
.builder-center-col::-webkit-scrollbar-thumb { background: var(--witcher-gold-low); border-radius: 3px; }
.builder-center-faction {
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--witcher-bg-2);
}
.builder-center-shield {
    width: 64px; height: 64px;
    object-fit: contain;
    margin-bottom: 0.4rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.builder-center-label {
    display: block;
    color: var(--witcher-text-mute);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.builder-center-faction-name {
    font-family: 'TheWitcher', 'Cinzel', serif;
    color: var(--witcher-gold);
    font-size: 1.15rem;
    margin: 0.2rem 0 0;
    letter-spacing: 0.06em;
}

.builder-leader-slot {
    text-align: center;
}
.builder-mini-label {
    color: var(--witcher-text-mute);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 0.4rem;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 500;
}
/* Leader: no box — just the card floating under the gold "Leader" label. */
.leader-card-button {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    width: 130px;
    display: flex; flex-direction: column; align-items: center;
    color: var(--witcher-text);
    font-family: inherit;
    margin: 0 auto;
    transition: border-color 0.15s;
}
.leader-card-button:hover { border-color: var(--witcher-gold); }
.leader-card-button img {
    width: 100%;
    aspect-ratio: 0.7;
    object-fit: cover;
    border-radius: 4px;
}
.leader-card-name {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--witcher-gold);
    font-family: 'TheWitcher', 'Cinzel', serif;
    line-height: 1.2;
    text-align: center;
}
.leader-card-button.placeholder {
    aspect-ratio: 0.7;
    border-style: dashed;
    color: var(--witcher-text-mute);
    font-size: 0.85rem;
    justify-content: center;
}

/* W3 deck-maker stats: no box — vertical, centered stacks (label on top,
   icon + value below). */
.builder-stats-block {
    background: transparent;
    padding: 0.3rem 0;
    text-align: center;
}
.stat-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0;
    color: var(--witcher-text-dim);
}
.stat-row .stat-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.74rem;
}
.stat-figure {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.stat-row img {
    width: 22px; height: 22px;
    object-fit: contain;
    opacity: 0.9;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.stat-row .stat-value {
    color: var(--witcher-gold);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
/* Red when a constraint is violated (units below minimum / specials over max). */
.stat-row.bad .stat-label,
.stat-row.bad .stat-value { color: var(--witcher-blood-hi); }
.stat-row.bad img {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)) hue-rotate(-30deg) saturate(1.4);
}
/* Green when the special-cards count is healthy (5+), like the W3 screen. */
.stat-row.good .stat-value { color: #6ec06e; }
.stat-row.good img {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)) hue-rotate(70deg) saturate(1.3);
}

.builder-error-list {
    list-style: none;
    margin: 0;
    padding: 0.6rem 0.9rem;
    background: rgba(161, 56, 56, 0.12);
    border: 1px solid var(--witcher-blood);
    border-radius: 4px;
    color: var(--witcher-blood-hi);
    font-size: 0.78rem;
}
.builder-error-list li { margin-bottom: 0.2rem; }
.builder-error-list li:last-child { margin-bottom: 0; }

/* "Start game" — the only call-to-action in the hub now that save is automatic.
   Larger and more prominent than a normal primary button to match the original
   "Spiel starten" button in the Witcher 3 Gwent screen. */
.builder-start-btn {
    width: 100%;
    padding: 1rem 1.1rem;
    font-size: 1.1rem;
    font-family: 'TheWitcher', 'Cinzel', serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    margin-top: 0.4rem;
}
.builder-start-btn:not(:disabled):hover {
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35);
}

/* Leader picker modal */
.leader-picker-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
    padding: 2rem;
}
.leader-picker-content {
    background: var(--witcher-surface);
    border: 1px solid var(--witcher-gold-low);
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 900px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.leader-picker-content header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--witcher-border);
}
.leader-picker-content h2 {
    margin: 0;
    color: var(--witcher-gold);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 1.2rem;
}
.leader-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.8rem;
}
.leader-pick-tile {
    background: var(--witcher-bg-2);
    border: 2px solid var(--witcher-border);
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    font-family: inherit;
    color: var(--witcher-text-dim);
    transition: all 0.15s ease;
}
.leader-pick-tile img {
    width: 100%;
    aspect-ratio: 0.7;
    object-fit: cover;
    border-radius: 4px;
}
.leader-pick-tile span {
    font-size: 0.75rem;
    text-align: center;
    color: var(--witcher-gold);
    line-height: 1.2;
}
.leader-pick-tile:hover { border-color: var(--witcher-gold-low); color: var(--witcher-text); }
.leader-pick-tile.selected { border-color: var(--witcher-gold); box-shadow: 0 0 12px rgba(201, 165, 87, 0.4); }

/* ── Leader carousel (Gwent-original "Choose a Leader" overlay) ──────────── */
.leader-carousel-modal {
    position: fixed; inset: 0;
    background: rgba(8, 6, 4, 0.92);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
    padding: 1rem;
}
.leader-carousel-stage {
    width: min(1200px, 100%);
    height: min(85vh, 760px);
    display: flex; flex-direction: column;
    position: relative;
}

.leader-carousel-header {
    text-align: center;
    padding: 0.6rem 0 1rem;
    position: relative;
}
.leader-carousel-header h2 {
    color: var(--witcher-gold);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 1.5rem;
    letter-spacing: 0.18em;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}
.leader-carousel-header .builder-close {
    position: absolute;
    top: 0; right: 0.5rem;
    background: transparent;
}

/* Viewport: cards arranged horizontally, centred via absolute offset by class. */
.leader-carousel-viewport {
    flex: 1;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.leader-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex; align-items: center; justify-content: center;
}

.leader-carousel-card {
    position: absolute;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.3, 1),
                opacity 0.35s ease,
                filter 0.35s ease;
    font-family: inherit;
    display: flex; flex-direction: column; align-items: center;
}
.leader-carousel-card img {
    width: 280px;
    aspect-ratio: 0.7;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.7);
}
.leader-carousel-card-name {
    margin-top: 0.7rem;
    color: var(--witcher-gold);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    max-width: 280px;
    text-align: center;
    line-height: 1.2;
}

/* Centre = active leader: full size, glowing gold border. */
.leader-carousel-card.offset-0 {
    transform: translateX(0) scale(1);
    z-index: 30;
    filter: none;
    opacity: 1;
}
.leader-carousel-card.offset-0 img {
    border: 3px solid var(--witcher-gold);
    box-shadow:
        0 0 0 4px rgba(201, 165, 87, 0.25),
        0 0 60px rgba(201, 165, 87, 0.55),
        0 18px 40px rgba(0,0,0,0.8);
}

/* One-step neighbours: smaller, semi-transparent. */
.leader-carousel-card.offset--1,
.leader-carousel-card.offset-1 {
    z-index: 20;
    opacity: 0.55;
    filter: brightness(0.7) saturate(0.85);
    transform: scale(0.78);
}
.leader-carousel-card.offset--1 { transform: translateX(-330px) scale(0.78); }
.leader-carousel-card.offset-1  { transform: translateX( 330px) scale(0.78); }

/* Two-step neighbours: smaller still, almost cropped at the edge. */
.leader-carousel-card.offset--2,
.leader-carousel-card.offset-2 {
    z-index: 10;
    opacity: 0.25;
    filter: brightness(0.5) saturate(0.6);
    transform: scale(0.6);
}
.leader-carousel-card.offset--2 { transform: translateX(-560px) scale(0.6); }
.leader-carousel-card.offset-2  { transform: translateX( 560px) scale(0.6); }

.leader-carousel-card:hover:not(.offset-0) {
    opacity: 0.85;
    filter: brightness(0.95);
}

/* Arrow buttons */
.leader-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    background: rgba(20, 16, 12, 0.7);
    border: 1px solid var(--witcher-gold-low);
    color: var(--witcher-gold);
    width: 52px; height: 52px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.leader-carousel-arrow:hover:not(:disabled) {
    background: var(--witcher-gold);
    color: var(--witcher-bg);
    transform: translateY(-50%) scale(1.08);
}
.leader-carousel-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.leader-carousel-arrow.left  { left: 1rem; }
.leader-carousel-arrow.right { right: 1rem; }

/* Info bar (ability description + confirm) */
.leader-carousel-info {
    background: linear-gradient(180deg, rgba(20,16,12,0.92) 0%, rgba(8,6,4,1) 100%);
    border-top: 1px solid var(--witcher-gold-low);
    padding: 1.2rem 1.8rem;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    gap: 0.7rem;
}
.leader-info-name {
    color: var(--witcher-gold);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 1.25rem;
    margin: 0;
    letter-spacing: 0.06em;
}
.leader-info-ability { max-width: 600px; }
.leader-info-label {
    display: block;
    color: var(--witcher-text-mute);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 0.3rem;
}
.leader-info-ability p {
    margin: 0;
    color: var(--witcher-text);
    font-size: 0.95rem;
    line-height: 1.45;
    font-style: italic;
}
.leader-info-confirm {
    margin-top: 0.4rem;
    padding: 0.7rem 1.6rem;
}

/* Responsive: scale the carousel down on narrow screens. */
@media (max-width: 900px) {
    .leader-carousel-card img { width: 220px; }
    .leader-carousel-card.offset--1 { transform: translateX(-260px) scale(0.7); }
    .leader-carousel-card.offset-1  { transform: translateX( 260px) scale(0.7); }
    .leader-carousel-card.offset--2 { transform: translateX(-440px) scale(0.5); }
    .leader-carousel-card.offset-2  { transform: translateX( 440px) scale(0.5); }
}
@media (max-width: 600px) {
    .leader-carousel-card img { width: 170px; }
    .leader-carousel-card.offset--1 { transform: translateX(-200px) scale(0.65); }
    .leader-carousel-card.offset-1  { transform: translateX( 200px) scale(0.65); }
    .leader-carousel-card.offset--2,
    .leader-carousel-card.offset-2 { display: none; }
}

@media (max-width: 900px) {
    .tile-grid { grid-template-columns: repeat(2, 1fr); }
    .tile-grid .row-hero { grid-column: span 2; grid-template-columns: 1fr 1fr; }
    .tile-grid .row-hero .tile:nth-child(3) { grid-column: span 2; }
}
@media (max-width: 600px) {
    .tile-grid, .tile-grid .row-hero { grid-template-columns: 1fr; }
    .tile-grid .row-hero .tile:nth-child(3) { grid-column: span 1; }
    .app-topbar { flex-wrap: wrap; }
}


/* ── Deck builder: W3 parity (rules/rules.md A2/A3) ───────────────────────── */

/* Filter icons (A3.2): active = white + glow, inactive = dim brown/grey. No pill chrome. */
.builder-filter-row { gap: 0.9rem; padding: 0.4rem 0.7rem 0.6rem; }
.builder-filter-row .filter-chip,
.builder-filter-row .filter-chip:hover,
.builder-filter-row .filter-chip.active {
    background: transparent;
    border: none;
    padding: 0.15rem;
    border-radius: 0;
}
.builder-filter-row .filter-chip img {
    width: 26px; height: 26px;
    opacity: 0.45;
    filter: sepia(0.6) brightness(0.7);
    transition: opacity 0.15s ease, filter 0.15s ease;
}
.builder-filter-row .filter-chip:hover img { opacity: 0.75; }
.builder-filter-row .filter-chip.active img {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.85));
}

/* Category name under the column title is upper-case (A2.2). */
.builder-column-sub { text-transform: uppercase; }

/* Show exactly 3 columns x 2 rows of the card area; extra rows scroll (A2.2.1). */
.builder-grid { align-content: start; }

/* Golden flickering outline on hover (A3.1 / A3.1.1) — cards and leader. */
@keyframes bct-gold-flicker {
    0%, 100% { box-shadow: 0 0 0 2px rgba(240, 180, 60, 0.95), 0 0 14px 3px rgba(240, 160, 40, 0.75); }
    50%      { box-shadow: 0 0 0 2px rgba(255, 210, 100, 1),   0 0 22px 6px rgba(255, 180, 60, 0.95); }
}
.builder-card-tile:hover:not(:disabled) .bct-frame,
.builder-card-tile:focus-visible .bct-frame,
.leader-card-button:hover img {
    transform: none;
    animation: bct-gold-flicker 0.9s ease-in-out infinite;
}
.leader-card-button img { border-radius: 0.5vw; object-fit: contain; }
.leader-card-button:hover { border-color: transparent; }

/* ── Deck builder: pixel-parity pass against the W3 reference screenshot ──── */
html:has(.builder-page), body:has(.builder-page) { background: #050505; }
.builder-page {
    background: #050505;
    height: 100vh;
    padding: 0.8vw 2vw 0.6vw;
    font-family: 'Inter', system-ui, sans-serif;
    position: relative;
}
.builder-page h2, .builder-page h3 { font-family: inherit; letter-spacing: 0; text-transform: none; }

/* Header: names ◀ [shield NAME gems] ▶ names, perk underneath */
.builder-header { padding: 0; margin: 0; }
.faction-switcher { gap: 1vw; align-items: center; }
.faction-nav-name { color: #9a9488; font-size: 0.85vw; min-width: 9vw; letter-spacing: 0; text-transform: none; font-family: inherit; }
.faction-nav-name.prev { text-align: right; }
.faction-nav-name.next { text-align: left; }
.faction-nav-arrow {
    background: transparent; border: none; cursor: pointer;
    color: #8a8478; font-size: 1vw; padding: 0 0.4vw; line-height: 1;
}
.faction-nav-arrow:hover { color: #e8e2d0; }
.faction-current { display: flex; flex-direction: row; align-items: center; gap: 0.7vw; min-width: 0; }
.faction-current-shield { width: 3vw; height: 3vw; }
.faction-current-text { display: flex; flex-direction: column; align-items: center; }
.faction-current-name { color: #f2eee4; font-size: 1.45vw; font-weight: 400; text-transform: none; letter-spacing: 0; }
.faction-gems { display: flex; gap: 0.25vw; margin-top: 0.15vw; }
.faction-gems img { width: 0.55vw; height: 0.55vw; object-fit: contain; }
.faction-perk { color: #e8e2d0; font-size: 0.95vw; margin: 0.1vw 0 0; }

.builder-header-right { top: 0; right: 0; }
.builder-close {
    width: 2.6vw; height: 2.6vw; border-radius: 0; border: 1px solid #5a554b;
    color: #e8e2d0; font-size: 1.4vw; background: rgba(0,0,0,0.5);
    box-shadow: inset 0 0 0 3px #050505, inset 0 0 0 4px #3a362f;
}

/* Body: fixed proportions so each card ≈ 10vw wide and 3×2 fit on screen */
.builder-body {
    grid-template-columns: 34vw 17vw 34vw;
    justify-content: center;
    gap: 1vw;
    margin-top: 0.6vw;
}
.builder-column-header { padding: 0; text-align: left; }
.builder-column-header.right { text-align: right; }
.builder-column-header h2 { color: #f2eee4; font-size: 1.35vw; font-weight: 400; }
.builder-column-sub { color: #f2eee4; font-size: 1.05vw; letter-spacing: 0; margin-top: 0; }

/* Filters: bare glyphs, active one framed in white */
.builder-filter-row { justify-content: flex-start; gap: 0.5vw; padding: 0.5vw 0 0.6vw; flex-wrap: nowrap; }
.builder-filter-row.right { justify-content: flex-end; }
.builder-filter-row .filter-chip,
.builder-filter-row .filter-chip:hover,
.builder-filter-row .filter-chip.active { padding: 0.25vw; border: 1px solid transparent; }
.builder-filter-row .filter-chip.active { border-color: #f2eee4; box-shadow: 0 0 6px rgba(255,255,255,0.45); }
.builder-filter-row .filter-chip img { width: 2.2vw; height: 2.2vw; }
.builder-filter-row .filter-chip.active img { filter: brightness(1.6) drop-shadow(0 0 4px rgba(255,255,255,0.8)); opacity: 1; }

/* Card grid: collection art ratio (317×598), flush cards, slim rounded scrollbar */
.builder-grid { padding: 0 0.6vw 0 0; gap: 0.9vw; grid-auto-rows: max-content; }
.bct-frame { aspect-ratio: 317 / 598; border-radius: 0; box-shadow: none; }
.bct-art { object-fit: cover; }
.builder-deck-col .builder-grid { border: 1px solid #1c1a17; padding: 0.5vw; }
.builder-grid { scrollbar-width: thin; scrollbar-color: #3b3731 transparent; }
.builder-grid::-webkit-scrollbar { width: 0.7vw; }
.builder-grid::-webkit-scrollbar-track { background: #0c0b0a; border-left: 1px solid #1f1c19; }
.builder-grid::-webkit-scrollbar-thumb { background: #2c2925; border: 1px solid #6b665c; border-radius: 0.3vw; }

/* Deck-mode live count covers the baked "xN" at the bottom-left of the art */
.bct-count-badge { right: auto; left: 5%; bottom: 2.5%; background: #d9cfb6; border: none; border-radius: 0; color: #3a2e1c; padding: 0 0.3vw; }
.bct-count-badge img { filter: sepia(1) brightness(0.45); }

/* Center column: small leader, compact stats, plain start button */
.builder-center-col { padding: 0; align-items: center; text-align: center; overflow: visible; gap: 0; border-left: 1px solid #1a1815; border-right: 1px solid #1a1815; }
.builder-mini-label { color: #d8d2c0; font-size: 1vw; letter-spacing: 0; text-transform: none; font-family: inherit; margin: 0.2vw 0 0.4vw; }
.leader-card-button { width: 7vw; }
.leader-card-button img { aspect-ratio: auto; height: auto; }
.builder-stats-block { padding: 0.8vw 0 0; }
.stat-row { padding: 0.1vw 0; gap: 0; }
.stat-row .stat-label { color: #e8e2d0; text-transform: none; letter-spacing: 0; font-size: 0.85vw; }
.stat-row img { width: 1.5vw; height: 1.5vw; }
.stat-row .stat-value { color: #cfc9b8; font-family: inherit; font-size: 0.9vw; }
.stat-row.bad .stat-value, .stat-row.bad .stat-label { color: #ff3b3b; }
.stat-row.good .stat-value { color: #3be05a; }
.builder-start-btn {
    background: transparent; border: none; box-shadow: none; color: #f2eee4;
    font-family: inherit; font-size: 1.05vw; letter-spacing: 0; text-transform: none;
    margin-top: 2.5vw; padding: 0.3vw 1vw; cursor: pointer; width: auto;
}
.builder-start-btn:disabled { color: #8a8478; cursor: default; }
.builder-start-btn:not(:disabled):hover { box-shadow: none; text-shadow: 0 0 8px rgba(255,255,255,0.7); }

/* Bottom-right key hints */
.builder-key-hints { position: absolute; right: 3vw; bottom: 1vw; display: flex; gap: 1.2vw; color: #e8e2d0; font-size: 0.9vw; }
.builder-key-hints kbd {
    display: inline-block; min-width: 1.4vw; text-align: center; padding: 0.1vw 0.4vw; margin-right: 0.3vw;
    background: #2a2825; border: 1px solid #55514a; border-radius: 0.2vw; font-family: inherit; font-size: 0.8vw; color: #cfc9b8;
}

/* Settings: gameplay checkbox row */
.settings-check {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    color: var(--witcher-text);
}
.settings-check input { width: 18px; height: 18px; accent-color: var(--witcher-gold); cursor: pointer; }

/* Background music — hidden YouTube player + ♫ toggle (JS #youtube / #toggle-music). */
#youtube {
    position: fixed;
    width: 10px;
    height: 10px;
    left: -100px;
    top: -100px;
    opacity: 0;
    pointer-events: none;
    z-index: -100;
}
#toggle-music {
    position: fixed;
    left: 1rem;
    bottom: 0.8rem;
    z-index: 3000;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: none;
    background: transparent;
    color: goldenrod;
    font-size: 2rem;
    line-height: 1;
    text-shadow: 0 0 1rem black;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}
#toggle-music:hover { transform: scale(1.12); }
#toggle-music.fade { opacity: 0.35; }

/* Filter icons now come as white (selected) / brown (idle) pairs — show them
   as-is: no tint filters, no dimming, just a soft glow on the selected one. */
.builder-filter-row .filter-chip img,
.builder-filter-row .filter-chip:hover img,
.builder-filter-row .filter-chip.active img {
    width: 2.2vw;
    height: 2.2vw;
    object-fit: contain;
    opacity: 1;
    filter: none;
}
.builder-filter-row .filter-chip.active img { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7)); }
.builder-filter-row .filter-chip:not(.active):hover img { filter: brightness(1.35); }
/* Every chip has an icon now — keep all text labels hidden (tooltip only). */
.builder-filter-row .filter-chip span,
.builder-filter-row .filter-chip:not(:has(img)) span { display: none; }

/* Copy counter — covers ONLY the printed "x1" on the Form 1 art (measured on
   the collection PNGs: x 18–25 %, y 91–97 %) with a feathered parchment patch,
   and writes the live count in the same dark-brown ink. */
.bct-frame { container-type: inline-size; }
.bct-count-badge {
    position: absolute;
    left: 16.5%;
    right: auto;
    bottom: 1.8%;
    width: 13%;
    height: 7.8%;
    padding: 0;
    gap: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 1.4%;
    border: none;
    border-radius: 0;
    background: radial-gradient(ellipse at 45% 50%, rgb(221, 213, 200) 62%, rgba(221, 213, 200, 0) 100%);
    backdrop-filter: none;
    color: rgb(88, 72, 44);
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-weight: 400;
    font-size: 9.5cqw;
    line-height: 1;
    letter-spacing: 0;
    pointer-events: none;
}
.bct-count-badge img { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Main menu — Witcher 3 journal style.
   Black page with the key art barely visible behind (like the W3 journal);
   a row of tiles (brown icon + tan label); the selected tile turns into a gold
   parchment with a black icon and grows a little; its caption shows below.
   Selection = hover / keyboard focus; with neither, the default tile (Play).
   ═════════════════════════════════════════════════════════════════════════ */
body:has(.journal-page),
body:has(.journal-page) .app-shell { background: #050505; }
body:has(.journal-page) .app-content { max-width: none; padding: 0; display: flex; }
body:has(.journal-page) .app-topbar { background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.4)); border-bottom-color: rgba(255,255,255,.06); }

.journal-page {
    position: relative;
    flex: 1;
    height: calc(100vh - 50px);    /* exactly the viewport under the top bar — no page scroll */
    box-sizing: border-box;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;     /* menu just below centre — logo and Geralt above it */
    align-items: center;
    padding-bottom: 12vh;
    overflow: hidden;
    font-family: 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif;
}

/* Key art, sunk into the black: dim, desaturated, vignetted. */
.journal-backdrop {
    position: fixed;
    /* poster lifted a little: the logo and Geralt's face/torso sit above the menu row */
    inset: -10vh 0 10vh 0;
    z-index: 0;
    pointer-events: none;
    background: url('/img/backgrounds/gwent-classic-poster.jpg') center / cover no-repeat;
    opacity: .34;
    filter: grayscale(.25) contrast(1.05) brightness(.85);
}
.journal-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 45%, transparent 0%, rgba(5,5,5,.35) 60%, rgba(5,5,5,.9) 100%),
        /* darken the lower band behind the menu row so the tiles stay readable */
        linear-gradient(180deg, transparent 0%, transparent 52%, rgba(5,5,5,.75) 72%, #050505 100%);
}

/* Top-right status strip (W3: crowns · weight · level). */
.journal-stats {
    position: absolute;
    top: 1.4rem;
    right: 2.2rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2.2rem;
    color: #d8d2c0;
    font-size: 1.05rem;
}
.journal-stat { display: inline-flex; align-items: center; gap: .45rem; }
.journal-stat img { width: 22px; height: 22px; object-fit: contain; filter: sepia(.4); }
.journal-stat-label { text-transform: uppercase; letter-spacing: .06em; color: #a39c8a; font-size: .9rem; }
.journal-stat strong { color: #f2eee4; font-size: 1.25rem; font-weight: 700; }

/* The tile row. */
.journal-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .7vw;
    padding-bottom: 7rem;   /* room for the caption strip */
}
.journal-tile {
    display: block;
    text-decoration: none;
    outline: none;
}
.journal-tile-face {
    position: relative;
    width: 10.4vw;
    min-width: 108px;
    aspect-ratio: 431 / 276;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55vw;
    border: 1px solid transparent;
    transition: transform .18s ease, background-color .18s ease;
}
.journal-icon {
    height: 42%;
    max-width: 55%;
    object-fit: contain;
    filter: brightness(1.05);
    transition: filter .18s ease;
}
.journal-label {
    color: #b39c78;
    font-weight: 700;
    font-size: clamp(.72rem, .85vw, 1rem);
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    transition: color .18s ease;
}
/* The laurel (Leaderboard) isn't a journal glyph: tint it to match the brown set. */
.journal-tile:nth-child(5) .journal-icon { filter: sepia(1) saturate(.6) brightness(.6); }

/* Selected = gold parchment, black glyph, slightly larger (card-fan centre). */
.journal-tile:hover .journal-tile-face,
.journal-tile:focus-visible .journal-tile-face,
.journal-row:not(:hover):not(:focus-within) .journal-tile.is-default .journal-tile-face {
    background: url('/img/backgrounds/journal_parchment.png') center / 100% 100% no-repeat;
    transform: scale(1.1);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .7));
}
.journal-tile:hover .journal-icon,
.journal-tile:focus-visible .journal-icon,
.journal-row:not(:hover):not(:focus-within) .journal-tile.is-default .journal-icon { filter: brightness(0); }
.journal-tile:hover .journal-label,
.journal-tile:focus-visible .journal-label,
.journal-row:not(:hover):not(:focus-within) .journal-tile.is-default .journal-label { color: #0d0b08; }

/* Caption strip under the row (title + subtitle of the selected tile). */
.journal-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: none;   /* the outgoing caption vanishes at once — no overlap */
}
.journal-caption-title {
    font-family: 'TheWitcher', 'Cinzel', serif;
    color: #f2eee4;
    font-size: 1.7rem;
    letter-spacing: .04em;
}
.journal-caption-sub {
    color: #a39c8a;
    font-size: 1rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.journal-tile:hover .journal-caption,
.journal-tile:focus-visible .journal-caption,
.journal-row:not(:hover):not(:focus-within) .journal-tile.is-default .journal-caption {
    opacity: 1;
    transform: none;
    transition: opacity .2s ease, transform .2s ease;
}

/* Bottom-right key hint (W3 "E Open Menu"). */
.journal-hint {
    position: absolute;
    right: 2.2rem;
    bottom: 1.6rem;
    z-index: 1;
    color: #e3ad4d;
    font-size: 1rem;
}
.journal-hint kbd {
    display: inline-block;
    margin-right: .4rem;
    padding: .1rem .45rem;
    border: 1px solid #55514a;
    border-radius: 3px;
    background: #1d1b18;
    color: #d8d2c0;
    font-family: inherit;
    font-size: .85rem;
}

@media (max-width: 900px) {
    .journal-row { flex-wrap: wrap; justify-content: center; max-width: 94vw; }
    .journal-tile-face { width: 26vw; }
    .journal-stats { position: static; margin: 1rem 0; }
}

/* ── Deck builder hover — W3 parity ─────────────────────────────────────────
   · the grid has room on every side, so the glow is never clipped by the
     scroll container (the left/top edge used to vanish);
   · the frame follows the card's rounded corners (≈4.5 % of its width);
   · a thin GOLD rim (not yellow) plus a soft halo spreading a little beyond
     the card, breathing slowly. */
.builder-grid { padding: 14px 18px 14px 14px; }
.bct-frame { border-radius: 4.5% / 2.4%; }   /* the art's own corner radius (≈13 px on 290×545) */
.builder-card-tile:hover:not(:disabled) .bct-frame,
.builder-card-tile:focus-visible .bct-frame {
    transform: none;
    animation: bct-gold-hover 1.8s ease-in-out infinite;
}
@keyframes bct-gold-hover {
    0%, 100% {
        box-shadow:
            0 0 0 2px #c8933a,                    /* gold rim */
            0 0 0 3px rgba(90, 58, 16, .7),       /* dark outline under the rim */
            0 0 12px 4px rgba(214, 150, 55, .40); /* soft halo beyond the card */
    }
    50% {
        box-shadow:
            0 0 0 2px #dcaa52,
            0 0 0 3px rgba(90, 58, 16, .7),
            0 0 18px 7px rgba(214, 150, 55, .55);
    }
}
/* Leader card: same gold treatment, following its rounded corners. */
.leader-card-button:hover img {
    border-radius: 4.5% / 2.4%;
    animation: bct-gold-hover 1.8s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   My decks — same journal look as the main menu; the five factions sit in a
   thin gold frame with corner ornaments, each one a framed "plate".
   ═════════════════════════════════════════════════════════════════════════ */
.decks-journal { justify-content: center; padding-bottom: 0; gap: 2.2vh; }

.dj-title { position: relative; z-index: 1; text-align: center; }
.dj-kicker {
    display: block;
    color: #cfc6b0;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: .95rem;
    letter-spacing: .45em;
    text-transform: uppercase;
}
.dj-title h1 {
    margin: .2rem 0 .3rem;
    color: #e3b46a;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 2.6vw, 2.7rem);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.dj-hint { margin: 0; color: #9d968a; font-size: .95rem; letter-spacing: .04em; }

/* The gold frame: outer hairline, inner hairline, dark band between. */
.dj-frame {
    position: relative;
    z-index: 1;
    width: min(1180px, 88vw);
    padding: 3.2vh 2.4vw;
    background: linear-gradient(180deg, rgba(14, 11, 8, .78), rgba(8, 6, 4, .86));
    border: 1px solid rgba(200, 147, 58, .55);
    box-shadow:
        inset 0 0 0 6px rgba(8, 6, 4, .9),
        inset 0 0 0 7px rgba(200, 147, 58, .32),
        0 18px 40px rgba(0, 0, 0, .6);
}
/* Corner brackets. */
.dj-corner {
    position: absolute;
    width: 26px;
    height: 26px;
    border-color: #c8933a;
    border-style: solid;
    pointer-events: none;
}
.dj-corner.tl { top: -5px; left: -5px; border-width: 2px 0 0 2px; }
.dj-corner.tr { top: -5px; right: -5px; border-width: 2px 2px 0 0; }
.dj-corner.bl { bottom: -5px; left: -5px; border-width: 0 0 2px 2px; }
.dj-corner.br { bottom: -5px; right: -5px; border-width: 0 2px 2px 0; }

.dj-factions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.6vw;
}
.dj-faction {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: 1.4rem .6rem 1.2rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
/* The shield sits on a framed plate (portrait frame of the reference). */
.dj-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78%;
    aspect-ratio: 4 / 5;
    background: radial-gradient(ellipse at 50% 40%, rgba(60, 46, 28, .55), rgba(10, 8, 6, .9) 75%);
    border: 1px solid rgba(200, 147, 58, .45);
    box-shadow: inset 0 0 0 4px rgba(8, 6, 4, .95), inset 0 0 0 5px rgba(200, 147, 58, .25);
    transition: box-shadow .18s ease, border-color .18s ease;
}
.dj-plate img {
    width: 62%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7));
    transition: transform .18s ease;
}
.dj-name {
    color: #e8dfca;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 1.02rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25;
    min-height: 2.5em;
    display: flex;
    align-items: center;
}
.dj-rule { width: 60%; height: 1px; background: linear-gradient(90deg, transparent, rgba(200, 147, 58, .6), transparent); }
.dj-meta { color: #b9b1a0; font-size: .95rem; letter-spacing: .05em; }
.dj-empty { font-style: italic; color: #8e877a; }
.dj-state {
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: .2rem .7rem;
    border: 1px solid currentColor;
}
.dj-state.ok { color: #8fc27a; }
.dj-state.bad { color: #d7745f; }
.dj-state-new { color: #c8933a; }

/* Hover / focus: the plate lights up in gold, like the selected journal tile. */
.dj-faction:hover,
.dj-faction:focus-visible {
    border-color: rgba(200, 147, 58, .35);
    background: rgba(200, 147, 58, .06);
    transform: translateY(-3px);
    outline: none;
}
.dj-faction:hover .dj-plate,
.dj-faction:focus-visible .dj-plate {
    border-color: #dcaa52;
    box-shadow:
        inset 0 0 0 4px rgba(8, 6, 4, .95),
        inset 0 0 0 5px rgba(220, 170, 82, .55),
        0 0 16px 3px rgba(214, 150, 55, .35);
}
.dj-faction:hover .dj-plate img { transform: scale(1.06); }
.dj-faction:hover .dj-name { color: #f3d79a; }

.dj-hints { display: flex; gap: 1.6rem; }
.dj-back { color: inherit; text-decoration: none; }

@media (max-width: 1000px) {
    .dj-factions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .decks-journal { height: auto; min-height: calc(100vh - 50px); padding: 2rem 0 5rem; }
}
/* On the decks page the frame is the focus: sink the poster a bit further. */
.decks-journal .journal-backdrop { opacity: .2; filter: grayscale(.4) brightness(.75) blur(1.5px); }

/* ── Back-to-menu arrow (journal pages) ───────────────────────────────────── */
.page-back {
    position: absolute;
    top: 1.2rem;
    left: 1.8rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .9rem .4rem .6rem;
    color: #e3b46a;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: .9rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(200, 147, 58, .45);
    background: rgba(8, 6, 4, .6);
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.page-back-arrow { font-size: 1.25rem; line-height: 1; transition: transform .15s ease; }
.page-back:hover { border-color: #dcaa52; background: rgba(200, 147, 58, .12); color: #f3d79a; }
.page-back:hover .page-back-arrow { transform: translateX(-3px); }

/* ═══════════════════════════════════════════════════════════════════════════
   Card collection — journal page: faction plates on top, a gold frame holding
   the filters + grid + preview. Each card is a photo in a square frame with a
   paper name tag pinned under it.
   ═════════════════════════════════════════════════════════════════════════ */
.collection-journal {
    justify-content: flex-start;
    padding: 1.6rem 0 1.4rem;
    gap: 1.4vh;
}
.collection-journal .journal-backdrop { opacity: .16; filter: grayscale(.45) brightness(.7) blur(2px); }
.collection-journal .dj-title h1 { margin-bottom: 0; }

.col-factions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 1.2vw;
}
.col-faction {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    width: 7.2vw;
    min-width: 84px;
    padding: .35rem;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s ease, background-color .15s ease;
}
.col-faction .dj-plate { width: 70%; aspect-ratio: 1; }
.col-faction .dj-plate img { width: 66%; opacity: .65; transition: opacity .15s ease, transform .15s ease; }
.col-faction-name {
    color: #9d968a;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
}
.col-faction:hover .dj-plate img { opacity: 1; }
.col-faction.active { border-color: rgba(200, 147, 58, .4); background: rgba(200, 147, 58, .07); }
.col-faction.active .dj-plate {
    border-color: #dcaa52;
    box-shadow: inset 0 0 0 4px rgba(8, 6, 4, .95), inset 0 0 0 5px rgba(220, 170, 82, .55), 0 0 14px 2px rgba(214, 150, 55, .3);
}
.col-faction.active .dj-plate img { opacity: 1; transform: scale(1.05); }
.col-faction.active .col-faction-name { color: #f3d79a; }

.col-frame {
    width: min(1500px, 94vw);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem 1.6rem;
}
.col-frame .collection-filters { display: flex; gap: .8rem; align-items: center; margin: 0; }
.col-frame .collection-filters .witcher-input { flex: 0 1 360px; }
.col-frame .collection-count { margin-left: auto; color: #b9b1a0; letter-spacing: .06em; }
.col-frame .collection-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.4rem;
    margin: 0;
}
.col-frame .collection-grid {
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1.6rem 1.2rem;
    padding: .6rem .8rem 1rem .4rem;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: #5c4a2c transparent;
}

/* Photo card: square frame, the whole card fitted inside, paper tag below. */
.card-photo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.card-photo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 424 / 789;   /* lg card (410×775) + the 7px mat — the frame hugs the card */
    padding: 7px;
    background: linear-gradient(160deg, #2a241c, #15110d);
    border: 1px solid #6e6352;
    box-shadow: inset 0 0 0 3px #0e0b08, 0 6px 14px rgba(0, 0, 0, .65);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card-photo-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;   /* the whole card, never cropped */
    display: block;
}
/* Paper tag pinned across the bottom edge (ref: "进入章节" strip). */
.card-photo-tag {
    position: relative;
    margin-top: -14px;
    max-width: 92%;
    padding: .32rem .9rem .3rem;
    color: #2b2216;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 40%),
        linear-gradient(90deg, #d9c9a3, #e8dcbc 50%, #d3c19a);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .55);
    clip-path: polygon(1.5% 6%, 99% 0, 100% 92%, 97% 100%, 0 96%);
    transform: rotate(-1deg);
}
.card-photo:nth-child(even) .card-photo-tag { transform: rotate(.8deg); }
.card-photo:hover .card-photo-frame,
.card-photo:focus-visible .card-photo-frame {
    border-color: #dcaa52;
    box-shadow: inset 0 0 0 3px #0e0b08, 0 0 0 1px rgba(220, 170, 82, .5), 0 0 16px 3px rgba(214, 150, 55, .35);
    transform: translateY(-3px);
}
.card-photo.active .card-photo-frame {
    border-color: #e3b46a;
    box-shadow: inset 0 0 0 3px #0e0b08, 0 0 0 2px #c8933a, 0 0 20px 5px rgba(214, 150, 55, .45);
}

.col-frame .card-preview-panel {
    min-height: 0;
    overflow-y: auto;
    background: rgba(8, 6, 4, .7);
    border: 1px solid rgba(200, 147, 58, .35);
}
/* The lg card is 410×775: keep its real ratio (no cropping) and cap its height
   so the whole card fits the panel. */
.col-frame .card-preview-image {
    display: block;
    width: auto;
    max-width: 78%;
    max-height: 52vh;
    aspect-ratio: 410 / 775;
    object-fit: contain;
    margin: 0 auto 1rem;
    border: none;
}

@media (max-width: 1000px) {
    .col-frame .collection-layout { grid-template-columns: 1fr; }
    .col-factions { flex-wrap: wrap; justify-content: center; }
    .collection-journal { height: auto; min-height: calc(100vh - 50px); }
}

/* Deck editor: gold "Start match" call to action (same as the old /play screen). */
.builder-start-match {
    margin-top: 2.2vw;
    padding: .8rem 1.5rem;
    font-size: 1rem;
    letter-spacing: .1em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
}
.builder-start-match:not(:disabled):hover { filter: brightness(1.12); box-shadow: 0 0 16px rgba(214, 150, 55, .45); }

/* ═══════════════════════════════════════════════════════════════════════════
   Play menu — mission-board list: slate/black backdrop, full-width rows with
   an icon box, a highlighted title chip, a subtitle, a value and an action.
   ═════════════════════════════════════════════════════════════════════════ */
body:has(.modes-page),
body:has(.modes-page) .app-shell { background: #0b0d10; }
body:has(.modes-page) .app-content { max-width: none; padding: 0; display: flex; }

.modes-page {
    position: relative;
    flex: 1;
    min-height: calc(100vh - 50px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4.5rem 1.5rem 3rem;
    overflow: hidden;
}
/* Grey-black wash with a faint grid texture, poster barely visible. */
.modes-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(120, 128, 140, .18), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 22px),
        linear-gradient(180deg, #23272d 0%, #121418 55%, #07080a 100%);
}
.modes-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/img/backgrounds/gwent-classic-poster.jpg') center / cover no-repeat;
    opacity: .035;
    filter: grayscale(1) blur(3px);
}

.modes-header { position: relative; z-index: 1; text-align: center; margin-bottom: 2.2rem; }
.modes-header h1 {
    margin: .2rem 0 .4rem;
    color: #e8e6e1;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 2.6vw, 2.6rem);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.modes-list {
    position: relative;
    z-index: 1;
    width: min(980px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.mode-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto 170px;
    align-items: center;
    gap: 1.4rem;
    min-height: 104px;
    padding: .9rem 1.4rem .9rem .9rem;
    background:
        radial-gradient(circle at 82% 50%, rgba(0, 0, 0, .05) 0 1px, transparent 1px) 0 0 / 6px 6px,
        linear-gradient(90deg, #f1f0ec 0%, #e6e4de 70%, #dad8d1 100%);
    border: 1px solid #b9b6ad;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .5);
    transition: transform .15s ease, box-shadow .15s ease;
}
.mode-row:not(.disabled):hover {
    transform: translateX(4px);
    box-shadow: 0 0 0 3px rgba(200, 147, 58, .45), 0 8px 22px rgba(0, 0, 0, .6);
}
.mode-icon {
    width: 86px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3b3c3f;
}
.mode-icon img { width: 58%; height: 70%; object-fit: contain; filter: brightness(0) invert(.92); }
.mode-text { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0; }
.mode-title {
    padding: .1rem .5rem;
    background: #8a6326;
    color: #fff;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .05em;
}
.mode-sub { color: #4a4a4a; font-size: .95rem; }
.mode-reward {
    color: #2e2f33;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: .04em;
    white-space: nowrap;
}
.mode-action {
    justify-self: stretch;
    padding: .7rem 1rem;
    border: none;
    background: linear-gradient(180deg, #b0813a, #8a6326);
    color: #fff;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
    transition: filter .12s ease;
}
.mode-action:hover { filter: brightness(1.12); }
.mode-status {
    justify-self: center;
    color: #6a6a6a;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: .06em;
}
.mode-row.disabled { opacity: .55; filter: grayscale(.6); }

/* AI level chips inside the Bot match row. */
.mode-levels { display: flex; gap: .4rem; margin-top: .3rem; }
.mode-level {
    padding: .2rem .7rem;
    border: 1px solid #a8a59c;
    background: transparent;
    color: #4a4a4a;
    font-family: inherit;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
.mode-level:hover { border-color: #8a6326; color: #8a6326; }
.mode-level.active { background: #2e2f33; border-color: #2e2f33; color: #f1f0ec; }

@media (max-width: 760px) {
    .mode-row { grid-template-columns: 64px minmax(0, 1fr); }
    .mode-icon { width: 64px; height: 56px; }
    .mode-reward { display: none; }
    .mode-action, .mode-status { grid-column: 1 / -1; }
}

/* Deck editor: AI level chips + "Play with bot", on the dark builder backdrop. */
.builder-bot { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin-top: 1.6vw; }
.builder-bot-label { color: #9d968a; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.builder-levels .mode-level { border-color: #5a554b; color: #cfc9b8; }
.builder-levels .mode-level:hover { border-color: #c8933a; color: #f3d79a; }
.builder-levels .mode-level.active { background: #c8933a; border-color: #c8933a; color: #14100c; }
.builder-bot .builder-start-match { margin-top: .3rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   My profile — same mission-board look as the Play menu: slate backdrop,
   off-white rows, brown title chips, gold accents.
   ═════════════════════════════════════════════════════════════════════════ */
.profile-board { padding-bottom: 4rem; }
.profile-board .modes-header { margin-bottom: 1.6rem; }
.profile-avatar-box img { width: 84%; height: 84%; filter: none; border-radius: 50%; }
.profile-row .mode-title { font-size: 1.25rem; text-transform: uppercase; letter-spacing: .1em; }
.profile-row .mode-sub strong { color: #2e2f33; }
.profile-row .mode-reward { font-size: 2.2rem; color: #8a6326; }
.profile-rating-chip {
    justify-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1rem;
    background: #2e2f33;
    color: #e3b46a;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.profile-rating-chip img { width: 22px; height: 22px; object-fit: contain; }

/* Stats: six small off-white tiles. */
.pb-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; }
.pb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .9rem .5rem;
    background: linear-gradient(180deg, #f1f0ec, #e2e0d9);
    border: 1px solid #b9b6ad;
    border-top: 3px solid #8a6326;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}
.pb-stat-value { color: #2e2f33; font-family: 'TheWitcher', 'Cinzel', serif; font-weight: 700; font-size: 1.7rem; line-height: 1; }
.pb-stat-label { color: #5a5a5a; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.pb-stat.good .pb-stat-value, .pb-stat.positive .pb-stat-value { color: #3f7a2e; }
.pb-stat.bad .pb-stat-value, .pb-stat.negative .pb-stat-value { color: #a3392b; }
.pb-stat.gold .pb-stat-value { color: #8a6326; }

.pb-section {
    margin: 1rem 0 0;
    color: #e8e6e1;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 400;
    font-size: 1.15rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(200, 147, 58, .45);
    padding-bottom: .5rem;
}

/* History: one slim off-white row per match, a coloured result band on the left. */
.pb-history { display: flex; flex-direction: column; gap: .55rem; }
.pb-match {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 80px 110px 80px 130px;
    align-items: center;
    gap: 1rem;
    padding: .55rem 1.2rem .55rem 0;
    background: linear-gradient(90deg, #f1f0ec 0%, #e6e4de 70%, #dad8d1 100%);
    border: 1px solid #b9b6ad;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
    transition: transform .15s ease;
}
.pb-match:hover { transform: translateX(4px); }
.pb-result {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.pb-match.outcome-win .pb-result { background: #3f7a2e; }
.pb-match.outcome-lose .pb-result { background: #8f3326; }
.pb-match.outcome-draw .pb-result { background: #6a6a6a; }
.pb-opponent { color: #2e2f33; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.pb-opponent .ai-tag { background: #2e2f33; color: #e3b46a; border: none; }
.pb-cell { display: flex; flex-direction: column; align-items: flex-end; color: #2e2f33; font-family: 'TheWitcher', 'Cinzel', serif; font-weight: 700; }
.pb-cell small { color: #7a776f; font-family: inherit; font-weight: 400; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.pb-elo.elo-up { color: #3f7a2e; }
.pb-elo.elo-down { color: #a3392b; }
.pb-date { justify-self: end; color: #5a5a5a; font-size: .9rem; }

@media (max-width: 900px) {
    .pb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pb-match { grid-template-columns: 90px minmax(0, 1fr) 70px; }
    .pb-match .pb-cell:nth-of-type(4), .pb-match .pb-date { display: none; }
}

/* Deck editor: the four AI levels as a 2×2 grid that fits the centre column. */
.builder-levels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    width: min(100%, 15rem);
}
.builder-levels .mode-level { width: 100%; padding: .3rem .4rem; }
/* No keyboard hints anywhere in the UI. */
.builder-key-hints, .journal-hint { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Tutorial — chapters pinned as photos on a red string over the slate board;
   a chapter opens as a book with page tabs along the bottom.
   ═════════════════════════════════════════════════════════════════════════ */
.tutorial-board .modes-header { margin-bottom: 2.6rem; }

.tb-wall {
    position: relative;
    z-index: 1;
    width: min(1300px, 94vw);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.4rem 2rem;
    padding-top: 1.4rem;
}
/* The red string the photos hang from. */
.tb-string {
    position: absolute;
    left: -2%;
    right: -2%;
    top: 1.55rem;
    height: 2px;
    background: linear-gradient(90deg, transparent, #9b2b22 6%, #b8382c 50%, #9b2b22 94%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    transform: rotate(-.6deg);
}
.tb-chapter {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 210px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transform: rotate(var(--tilt));
    transform-origin: 50% 0;
    transition: transform .2s ease;
}
.tb-chapter:hover, .tb-chapter:focus-visible { transform: rotate(0deg) translateY(-4px); outline: none; }
.tb-pin {
    position: absolute;
    top: -6px;
    z-index: 2;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff7a68, #b3271c 60%, #6d140e);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .6);
}
/* Photo print: off-white border, dark image well, caption strip at the bottom. */
.tb-photo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.08;
    padding: 9px;
    background: linear-gradient(160deg, #e9e6dc, #cfcabd);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .65);
}
.tb-photo { overflow: hidden; }
.tb-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 22%;   /* the illustration only: skip the ribbon, badges and name banner */
    transform: scale(1.45);
    transform-origin: 62% 30%;
    filter: grayscale(.35) contrast(1.05) brightness(.82);
    display: block;
    transition: filter .2s ease;
}
.tb-chapter:hover .tb-photo img { filter: none; }
.tb-caption {
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 9px;
    padding: 1.6rem .6rem .45rem;
    background: linear-gradient(180deg, transparent, rgba(8, 8, 10, .92) 55%);
    color: #ece8dc;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: .9rem;
    text-align: left;
}
.tb-caption b { color: #b9b4a6; font-weight: 400; margin-right: .35rem; letter-spacing: .08em; }
/* Paper tag "Open chapter" taped under the photo. */
.tb-tag {
    margin-top: -6px;
    z-index: 1;
    padding: .38rem 1.1rem;
    color: #3a2f20;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    background: linear-gradient(90deg, #d9c9a3, #e8dcbc 50%, #d3c19a);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .55);
    clip-path: polygon(1% 8%, 99% 0, 100% 94%, 2% 100%);
    transform: rotate(1.4deg);
}

/* ── The book ─────────────────────────────────────────────────────────────── */
.tb-book-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(5, 6, 8, .78);
    backdrop-filter: blur(3px);
    animation: tb-fade .2s ease both;
}
@keyframes tb-fade { from { opacity: 0; } to { opacity: 1; } }
.tb-book {
    position: relative;
    width: min(1100px, 96vw);
    animation: tb-open .28s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes tb-open { from { transform: scale(.94) translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.tb-close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 1px solid #8a6326;
    background: #1d1a16;
    color: #e3b46a;
    font-size: 1rem;
    cursor: pointer;
}
.tb-close:hover { background: #8a6326; color: #fff; }
.tb-spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 460px;
    background: #2a241c;
    padding: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .75);
}
.tb-leaf {
    position: relative;
    padding: 1.8rem 2rem;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .35), transparent 60%),
        linear-gradient(180deg, #ece4cf, #dccfae);
    color: #2c2418;
}
/* Gutter shading between the two pages. */
.tb-leaf-left { box-shadow: inset -26px 0 30px -18px rgba(60, 40, 15, .45); display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.tb-leaf-right { box-shadow: inset 26px 0 30px -18px rgba(60, 40, 15, .45); display: flex; flex-direction: column; }
.tb-chapter-no { font-family: 'TheWitcher', 'Cinzel', serif; font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: #7a6040; }
.tb-art {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.tb-art img {
    max-height: 340px;
    max-width: 100%;
    object-fit: contain;
    padding: 7px;
    background: #f4efe2;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
    transform: rotate(-1.5deg);
}
.tb-chapter-name { font-family: 'TheWitcher', 'Cinzel', serif; font-size: 1rem; color: #4a3a24; }
.tb-leaf-right h2 {
    margin: .4rem 0 1rem;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: #3a2a14;
    border-bottom: 1px solid rgba(122, 96, 64, .5);
    padding-bottom: .6rem;
}
.tb-leaf-right p { margin: 0; font-size: 1.08rem; line-height: 1.7; }
.tb-folio { margin-top: auto; align-self: flex-end; font-family: 'TheWitcher', 'Cinzel', serif; color: #7a6040; font-size: .85rem; }

/* Page tabs along the bottom edge of the book. */
.tb-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .45rem;
    padding: .9rem .5rem 0;
}
.tb-page-tab {
    padding: .4rem .9rem;
    border: none;
    background: linear-gradient(180deg, #cdbf9c, #b9a983);
    color: #3a2f20;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
    transition: transform .12s ease, background .12s ease;
}
.tb-page-tab:hover { transform: translateY(-2px); }
.tb-page-tab.active { background: linear-gradient(180deg, #b0813a, #8a6326); color: #fff; transform: translateY(-3px); }
.tb-turn {
    width: 34px;
    height: 34px;
    border: 1px solid #8a6326;
    background: #1d1a16;
    color: #e3b46a;
    cursor: pointer;
}
.tb-turn:disabled { opacity: .35; cursor: default; }

@media (max-width: 800px) {
    .tb-spread { grid-template-columns: 1fr; }
    .tb-art img { max-height: 220px; }
}
/* Photo border drawn on top, so the zoomed-in art never covers it. */
.tb-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 9px #ddd9cc, inset 0 0 0 10px rgba(0, 0, 0, .25);
}
.tb-caption { z-index: 1; }

/* ── Private rooms (/play/online + waiting screen on /play/start) ──────────── */
.room-wait { margin-top: 18vh; }
.room-code {
    font-size: 3rem;
    letter-spacing: 0.4em;
    color: var(--witcher-gold, #c8a45a);
    margin: 0.4rem 0 0.8rem;
}
.room-code-input {
    max-width: 9rem;
    margin-top: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

/* Online clock + opponent connection notice (room matches on /play/start). */
.turn-clock, .room-notice {
    position: fixed;
    top: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    padding: 0.3rem 0.9rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid var(--witcher-border, #5a4a2a);
    color: var(--witcher-text, #e8dcc0);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    pointer-events: none;
}
.turn-clock.mine { border-color: #4a90d9; }
.turn-clock.low { color: #ff6b5a; border-color: #ff6b5a; }
.room-notice { top: 2.8rem; color: #f0c060; }

/* Guest (no session) affordances. */
.app-topbar .signin-link {
    margin-left: auto;
    padding: .45rem 1.1rem;
    border: 1px solid #c8933a;
    color: #e3b46a;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
}
.app-topbar .signin-link:hover { background: #c8933a; color: #14100c; }
.mode-action-signin { background: linear-gradient(180deg, #4a4b50, #2e2f33); }
.builder-guest-hint {
    color: #c8933a;
    font-size: .85rem;
    letter-spacing: .04em;
    text-decoration: none;
    border-bottom: 1px dashed rgba(200, 147, 58, .5);
}
.builder-guest-hint:hover { color: #f3d79a; }

/* ═══════════════════════════════════════════════════════════════════════════
   Sign in / register — same minimal slate board as the Play menu: a single
   off-white card with a brown title chip, underlined fields, a gold button.
   ═════════════════════════════════════════════════════════════════════════ */
body:has(.auth-board) { background: #0b0d10; margin: 0; }
.auth-board { min-height: 100vh; justify-content: center; padding-top: 2rem; }
.auth-board .modes-header { margin-bottom: 1.8rem; }

.auth-card {
    position: relative;
    z-index: 1;
    width: min(440px, 92vw);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.6rem 1.8rem 1.4rem;
    background:
        radial-gradient(circle at 82% 50%, rgba(0, 0, 0, .05) 0 1px, transparent 1px) 0 0 / 6px 6px,
        linear-gradient(180deg, #f1f0ec 0%, #e3e1da 100%);
    border: 1px solid #b9b6ad;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .06), 0 10px 26px rgba(0, 0, 0, .55);
}
.auth-form { width: 100%; display: flex; flex-direction: column; gap: .35rem; }
.auth-form label {
    margin-top: .55rem;
    color: #5a5a5a;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.auth-form input {
    width: 100%;
    box-sizing: border-box;
    padding: .55rem .1rem .45rem;
    border: none;
    border-bottom: 1px solid #a8a59c;
    background: transparent;
    color: #2e2f33;
    font-family: inherit;
    font-size: 1.02rem;
    outline: none;
    transition: border-color .15s ease;
}
.auth-form input:focus { border-bottom: 2px solid #8a6326; padding-bottom: calc(.45rem - 1px); }
.auth-form .validation-message { color: #a3392b; font-size: .8rem; }
.auth-submit { margin-top: 1.3rem; width: 100%; }
.auth-error {
    padding: .55rem .8rem;
    border-left: 3px solid #a3392b;
    background: rgba(163, 57, 43, .08);
    color: #8f3326;
    font-size: .9rem;
}
.auth-alt { width: 100%; color: #5a5a5a; font-size: .9rem; text-align: center; }
.auth-alt a { color: #8a6326; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(138, 99, 38, .4); }
.auth-alt a:hover { color: #b0813a; }
.auth-dev { margin-top: .2rem; }
.auth-dev-btn {
    width: 100%;
    padding: .5rem;
    border: 1px dashed #a8a59c;
    background: transparent;
    color: #6a6a6a;
    font-family: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.auth-dev-btn:hover { border-color: #8a6326; color: #8a6326; }

/* Subtitles in the Witcher display face too (one line each; glyphs it lacks — "·",
   accents — fall back to Cinzel). Long paragraphs keep the reading font. */
.mode-sub,
.journal-caption-sub,
.journal-stat-label,
.dj-hint,
.dj-meta,
.builder-column-sub,
.faction-perk,
.stat-row .stat-label,
.pb-stat-label,
.pb-cell small,
.auth-form label,
.auth-alt,
.collection-count,
.card-preview-stats dt {
    font-family: 'TheWitcher', 'Cinzel', serif;
    letter-spacing: .06em;
}

/* ── Tutorial book, manual edition: illustrations built from the game icons ── */
.tb-leaf-left { justify-content: flex-start; }
.tb-art { width: 100%; }
.tb-text p { margin: 0 0 .85rem; font-size: 1.05rem; line-height: 1.65; }
.tb-list { margin: .2rem 0 1rem 1.2rem; padding: 0; line-height: 1.8; font-size: 1.05rem; }
.tb-list li::marker { color: #8a6326; }
.tb-tip {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .6rem;
    padding: .7rem .9rem;
    background: #2e2f33;
    color: #e8e3d6;
    font-size: .92rem;
    line-height: 1.5;
}
.tb-tip b {
    color: #e3b46a;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-weight: 400;
    letter-spacing: .1em;
}

.tb-card {
    max-height: 300px;
    max-width: 100%;
    object-fit: contain;
    padding: 6px;
    background: #f4efe2;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
/* Fan of three cards. */
.tb-fan { position: relative; width: 100%; height: 320px; }
.tb-fan .tb-card { position: absolute; top: 10px; left: 50%; max-height: 270px; }
.tb-fan .f1 { transform: translateX(-120%) rotate(-12deg); }
.tb-fan .f2 { transform: translateX(-50%) translateY(-6px); z-index: 1; }
.tb-fan .f3 { transform: translateX(20%) rotate(12deg); }

/* Leader cards: the five faction decks in an overlapping row. */
.tb-leaders { display: flex; justify-content: center; padding: 1.4rem 0; }
.tb-leaders img {
    width: 92px;
    margin: 0 -14px;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
    transition: transform .15s ease;
}
.tb-leaders img:nth-child(odd) { transform: rotate(-6deg); }
.tb-leaders img:nth-child(even) { transform: rotate(6deg) translateY(10px); }
.tb-leaders img:hover { transform: translateY(-8px) scale(1.06); z-index: 1; }

/* Card anatomy with callouts (manual p.2). */
.tb-anatomy { position: relative; width: 100%; display: flex; justify-content: center; padding: .4rem 0; }
.tb-anatomy .tb-card { max-height: 320px; }
.tb-callout {
    position: absolute;
    left: 0;
    color: #4a3a24;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: .78rem;
    letter-spacing: .05em;
    padding-right: .4rem;
    border-bottom: 1px solid #8a6326;
}
.tb-callout.c1 { top: 8%; }
.tb-callout.c2 { top: 26%; }
.tb-callout.c3 { top: 44%; }
.tb-callout.c4 { top: 76%; }
.tb-callout.c5 { top: 88%; }

/* Hero: the spiked strength icon next to the card. */
.tb-hero-art { display: flex; align-items: center; justify-content: center; gap: 1.2rem; }
.tb-hero-badge { position: relative; width: 92px; height: 92px; flex: none; }
.tb-hero-badge img { width: 100%; height: 100%; }
.tb-hero-badge b {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.9rem;
    text-shadow: 0 0 6px #000;
}

/* Gems, deck stats, notification banners. */
.tb-gems { display: flex; justify-content: center; gap: 1.2rem; padding: 3rem 0; }
.tb-gems img { width: 86px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.tb-deckstats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; padding: 2rem 1rem; }
.tb-deckstats span {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: #3a2a14;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 1.8rem;
}
.tb-deckstats img { width: 42px; height: 42px; object-fit: contain; }
.tb-notif { display: flex; justify-content: center; padding: 2rem 0; }
.tb-notif img { max-width: 70%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }

/* Battlefield layout (manual p.3). */
.tb-field { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: .2rem 0; }
.tb-field span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    height: 30px;
    background: #f4efe2;
    border: 1px solid #b9ad8e;
    color: #3a2a14;
    font-size: .9rem;
}
.tb-field span img { width: 22px; height: 22px; }
.tb-field .tb-field-head {
    background: #1d1a16;
    border-color: #1d1a16;
    color: #e3b46a;
    font-family: 'TheWitcher', 'Cinzel', serif;
    letter-spacing: .15em;
}
.tb-field .tb-field-weather { background: transparent; border-style: dashed; color: #6a5a40; margin: 4px 0; }

/* Ability pages: icon medallion + the card that carries it. */
.tb-ability-art { display: flex; align-items: center; justify-content: center; gap: 1.4rem; width: 100%; }
.tb-medal {
    flex: none;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, #f6f0e0, #d8c9a4);
    box-shadow: 0 0 0 3px #8a6326, 0 6px 14px rgba(0, 0, 0, .4);
}
.tb-medal img { width: 76%; height: 76%; object-fit: contain; }
.tb-ability-art .tb-card { max-height: 290px; }
/* Book taller than the window (small screens): scroll the backdrop, never clip. */
.tb-book-backdrop { overflow-y: auto; align-items: safe center; }
.tb-book { margin: auto 0; }

/* Version marker — home screen only, bottom-right corner. */
.journal-version {
    position: fixed;
    right: 1.2rem;
    bottom: .9rem;
    z-index: 2;
    color: rgba(227, 180, 106, .7);
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Settings + Leaderboard — same slate mission board as the Play menu.
   ═════════════════════════════════════════════════════════════════════════ */
.settings-board, .ranking-board { padding-bottom: 4rem; }
.settings-board .mode-sub strong { color: #2e2f33; }
.settings-board .mode-reward { min-width: 3.5rem; text-align: right; }
form.mode-row { margin: 0; }

.settings-account { align-items: start; }
.settings-account .mode-reward, .settings-account .mode-action { align-self: end; }
.settings-pw { margin-top: .6rem; gap: .2rem; }
.settings-pw-title {
    color: #2e2f33;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.settings-pw-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: 100%; }
.settings-pw-fields label { display: flex; flex-direction: column; margin-top: .4rem; }
.settings-msg { margin-top: .4rem; padding: .4rem .7rem; font-size: .88rem; border-left: 3px solid; }
.settings-msg.ok { border-color: #3f7a2e; background: rgba(63, 122, 46, .08); color: #2f5e22; }
.settings-msg.err { border-color: #a3392b; background: rgba(163, 57, 43, .08); color: #8f3326; }
.mode-action-danger { background: linear-gradient(180deg, #a3443a, #7c2c24); color: #f6e9e2; }

/* Leaderboard rows: rank block · player · four numeric cells. */
.rk-head, .rk-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 100px 100px 100px 90px;
    align-items: center;
    gap: 1rem;
}
.rk-head {
    padding: 0 1.2rem 0 0;
    color: #b9b1a0;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.rk-head span:nth-child(n+3) { text-align: right; }
.rk-head span:first-child { text-align: center; }
.rk-row {
    min-height: 54px;
    padding: 0 1.2rem 0 0;
    background: linear-gradient(90deg, #f1f0ec 0%, #e6e4de 70%, #dad8d1 100%);
    border: 1px solid #b9b6ad;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
    transition: transform .15s ease;
}
.rk-row:hover { transform: translateX(4px); }
.rk-row.is-me { box-shadow: 0 0 0 2px #c8933a, 0 4px 12px rgba(0, 0, 0, .4); }
.rk-rank {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3b3c3f;
    color: #f1f0ec;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 1.1rem;
    letter-spacing: .06em;
}
.rk-row.rank-1 .rk-rank { background: linear-gradient(180deg, #d9a54a, #9c6d22); color: #1d1408; }
.rk-row.rank-2 .rk-rank { background: linear-gradient(180deg, #c9c9c9, #8a8a8a); color: #1d1d1d; }
.rk-row.rank-3 .rk-rank { background: linear-gradient(180deg, #c08a5a, #7d5230); color: #1d1408; }
.rk-player { display: flex; align-items: center; gap: .6rem; min-width: 0; color: #2e2f33; font-weight: 600; }
.rk-player > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-player img { width: 34px; height: 34px; border-radius: 50%; }
.rk-player .you-tag { background: #2e2f33; color: #e3b46a; padding: .1rem .5rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.rk-rating { color: #8a6326; font-size: 1.15rem; }
.rk-row .streak-up { color: #3f7a2e; }
.rk-row .streak-down { color: #a3392b; }

@media (max-width: 760px) {
    .settings-pw-fields { grid-template-columns: 1fr; }
    .rk-head { display: none; }
    .rk-row { grid-template-columns: 60px minmax(0, 1fr) 70px 70px; }
    .rk-row > :nth-child(4), .rk-row > :nth-child(6) { display: none; }
}

/* Match history: the end-of-match emblem (end_win / end_lose / end_draw) in the result cell. */
/* The emblem alone tells the result: no colour fill, no label, gold frame. */
.pb-match .pb-result,
.pb-match.outcome-win .pb-result,
.pb-match.outcome-lose .pb-result,
.pb-match.outcome-draw .pb-result {
    padding: 0;
    overflow: hidden;
    background: #1d1a16;
    border: 2px solid #c8933a;
    box-sizing: border-box;
}
.pb-result img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Deck editor: the new faction's columns fade in once (builder-body is keyed by faction). */
.builder-body { animation: builder-faction-in .25s ease-out both; }
@keyframes builder-faction-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Online lobby: loading + "searching for an opponent" overlay ─────────── */
.online-loading {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    color: #b9b1a0;
    letter-spacing: .1em;
}
.online-loading img { width: 64px; height: 64px; }
.online-spin { animation: online-spin 2.4s linear infinite; }
@keyframes online-spin {
    0%   { transform: rotate(0deg) scale(1); opacity: .9; }
    50%  { transform: rotate(180deg) scale(1.08); opacity: 1; }
    100% { transform: rotate(360deg) scale(1); opacity: .9; }
}

.online-search {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 6, 8, .72);
    backdrop-filter: blur(2px);
    animation: builder-faction-in .25s ease-out both;
}
.online-search-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    width: min(380px, 90vw);
    padding: 2rem 1.8rem 1.6rem;
    background:
        radial-gradient(circle at 82% 50%, rgba(0, 0, 0, .05) 0 1px, transparent 1px) 0 0 / 6px 6px,
        linear-gradient(180deg, #f1f0ec 0%, #e3e1da 100%);
    border: 1px solid #b9b6ad;
    box-shadow: 0 0 0 3px rgba(200, 147, 58, .45), 0 12px 30px rgba(0, 0, 0, .6);
    text-align: center;
}
.online-search-emblem {
    width: 104px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3b3c3f;
    box-shadow: inset 0 0 0 2px #c8933a;
    margin-bottom: .4rem;
}
.online-search-emblem img { width: 62%; height: 62%; object-fit: contain; }
.online-search-time {
    color: #2e2f33;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 2rem;
    line-height: 1;
}
.online-search-sub { color: #5a5a5a; font-size: .9rem; }
.online-search-card .mode-action { margin-top: .6rem; width: 100%; }

/* Deck editor: bot opponent faction — the five shields + a random one. */
.builder-opponents { display: flex; gap: .35vw; justify-content: center; flex-wrap: wrap; }
.builder-opponent {
    position: relative;
    width: 2.6vw;
    min-width: 34px;
    aspect-ratio: 1;
    padding: .2vw;
    background: rgba(0, 0, 0, .35);
    border: 1px solid #5a554b;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.builder-opponent img { width: 100%; height: 100%; object-fit: contain; display: block; filter: grayscale(.55) brightness(.8); transition: filter .15s ease; }
.builder-opponent:hover { border-color: #c8933a; transform: translateY(-2px); }
.builder-opponent:hover img { filter: none; }
.builder-opponent.active { border-color: #e3b46a; box-shadow: 0 0 0 1px #c8933a, 0 0 10px rgba(214, 150, 55, .55); }
.builder-opponent.active img { filter: none; }
.builder-opponent-q {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f3d79a;
    font-family: 'TheWitcher', 'Cinzel', serif;
    font-size: 1.1rem;
    text-shadow: 0 0 4px #000, 0 0 2px #000;
}
.builder-opponent-name { color: #e8e2d0; font-size: .8rem; letter-spacing: .06em; min-height: 1em; }

/* Bot block: level is read-only (picked on the Play menu); the six opponent
   shields share one row so the Play button stays in view. */
.builder-bot { margin-top: .8vw; gap: .45rem; }
.builder-bot-level { color: #9d968a; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.builder-bot-level b { color: #e3b46a; font-weight: 600; }
.builder-opponents { flex-wrap: nowrap; gap: .25vw; }
.builder-opponent { width: 2.1vw; min-width: 26px; padding: .15vw; }

/* Sound-effects toggle (gwent-sfx.js), next to the music note. */
#toggle-sfx {
    position: fixed;
    left: 3.7rem;
    bottom: 1rem;
    z-index: 3000;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: none;
    background: transparent;
    color: goldenrod;
    filter: drop-shadow(0 0 .6rem black);
    cursor: pointer;
    transition: opacity .2s ease, transform .15s ease;
}
#toggle-sfx svg { width: 100%; height: 100%; display: block; }
#toggle-sfx:hover { transform: scale(1.12); }
#toggle-sfx.fade { opacity: .35; }

/* Credits page — Settings board; the CDPR logo sits on the paper row. */
.credits-board { padding-bottom: 4rem; }
.credits-row { align-items: center; }
.credits-row .mode-sub { line-height: 1.5; }
.credits-row .mode-sub strong { color: #2e2f33; }
.credits-logo {
    width: 86px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.credits-logo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }