/* /Layout/MainLayout.razor.rz.scp.css */
.deck-app[b-k8orr8kip7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #1a1a2e;
    color: #e0e0e0;
    font-family: 'Courier New', monospace;
    image-rendering: pixelated;
    overflow: hidden;
}

/* Battle page needs to break out of centering */
.deck-app:has(.battle-container)[b-k8orr8kip7],
.deck-app:has(.play-container)[b-k8orr8kip7],
.deck-app:has(.packs-container)[b-k8orr8kip7],
.deck-app:has(.collection-container)[b-k8orr8kip7],
.deck-app:has(.achievements-container)[b-k8orr8kip7],
.deck-app:has(.decksel-container)[b-k8orr8kip7],
.deck-app:has(.cardsel-container)[b-k8orr8kip7],
.deck-app:has(.charsel-container)[b-k8orr8kip7],
.deck-app:has(.characters-container)[b-k8orr8kip7] {
    align-items: stretch;
    justify-content: stretch;
}
/* /Pages/Achievements.razor.rz.scp.css */
/* ===== Container ===== */
.achievements-container[b-l71iowouhg] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}

.achievements-canvas[b-l71iowouhg] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ===== Header ===== */
.achievements-header[b-l71iowouhg] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-bottom: 3px solid #2a2a4a;
}

.back-btn[b-l71iowouhg] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 2px solid #534b6e;
    border-radius: 4px;
    color: #c0b0d0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.back-btn:hover[b-l71iowouhg] {
    border-color: #ffd700;
    color: #ffd700;
}

.back-arrow[b-l71iowouhg] {
    font-size: 0.8rem;
}

.header-title[b-l71iowouhg] {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.4rem;
    color: #e9a560;
    text-shadow: 3px 3px 0 #8a5a20;
    letter-spacing: 4px;
}

.achievements-count[b-l71iowouhg] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    display: flex;
    gap: 4px;
}

.count-done[b-l71iowouhg] { color: #50c878; }
.count-sep[b-l71iowouhg]  { color: #534b6e; }
.count-total[b-l71iowouhg] { color: #808080; }

/* ===== Progress bar ===== */
.progress-bar-container[b-l71iowouhg] {
    position: relative;
    z-index: 5;
    height: 24px;
    margin: 12px 32px;
    border: 2px solid #3a3a5a;
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.progress-bar-fill[b-l71iowouhg] {
    height: 100%;
    background: linear-gradient(90deg, #e9a560, #ffd700);
    transition: width 0.5s ease;
}

.progress-label[b-l71iowouhg] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
    letter-spacing: 2px;
}

/* ===== Achievement list ===== */
.achievement-list[b-l71iowouhg] {
    position: relative;
    z-index: 5;
    flex: 1;
    overflow-y: auto;
    padding: 12px 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.achievement-list[b-l71iowouhg]::-webkit-scrollbar {
    width: 6px;
}

.achievement-list[b-l71iowouhg]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.achievement-list[b-l71iowouhg]::-webkit-scrollbar-thumb {
    background: #3a3a5a;
}

/* ===== Achievement row ===== */
.achievement-row[b-l71iowouhg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border: 2px solid;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.15s;
    image-rendering: pixelated;
}

.achievement-row:hover[b-l71iowouhg] {
    background: rgba(0, 0, 0, 0.45);
}

/* Icon box */
.ach-icon-box[b-l71iowouhg] {
    position: relative;
    width: 48px;
    height: 48px;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.3);
}

.ach-icon[b-l71iowouhg] {
    font-size: 1.4rem;
}

.ach-check[b-l71iowouhg] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: #50c878;
    color: #000;
    font-size: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Info section */
.ach-info[b-l71iowouhg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ach-name[b-l71iowouhg] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    letter-spacing: 1px;
}

.ach-desc[b-l71iowouhg] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    opacity: 0.5;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

/* Mini progress bar */
.ach-progress-bar[b-l71iowouhg] {
    width: 100%;
    max-width: 200px;
    height: 8px;
    border: 1px solid #3a3a5a;
    background: rgba(0, 0, 0, 0.3);
    margin-top: 4px;
}

.ach-progress-fill[b-l71iowouhg] {
    height: 100%;
    background: currentColor;
    opacity: 0.6;
    transition: width 0.3s;
}

.ach-progress-text[b-l71iowouhg] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    opacity: 0.4;
    margin-top: 2px;
}

/* Reward */
.ach-reward[b-l71iowouhg] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-left: 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.06);
}

.reward-coin[b-l71iowouhg] {
    color: #ffd700;
    font-size: 0.8rem;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
}

.reward-amount[b-l71iowouhg] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #ffd700;
}

/* ===== Tier colors ===== */
/* Bronze */
.achievement-row.bronze[b-l71iowouhg]         { border-color: #5a4a30; color: #cd7f32; }
.achievement-row.bronze .ach-icon-box[b-l71iowouhg] { border-color: #cd7f32; }
.achievement-row.bronze.done[b-l71iowouhg]    { border-color: #cd7f32; }

/* Silver */
.achievement-row.silver[b-l71iowouhg]         { border-color: #4a4a5a; color: #c0c0c0; }
.achievement-row.silver .ach-icon-box[b-l71iowouhg] { border-color: #c0c0c0; }
.achievement-row.silver.done[b-l71iowouhg]    { border-color: #c0c0c0; }

/* Gold */
.achievement-row.gold[b-l71iowouhg]           { border-color: #5a5020; color: #ffd700; }
.achievement-row.gold .ach-icon-box[b-l71iowouhg]   { border-color: #ffd700; }
.achievement-row.gold.done[b-l71iowouhg]      { border-color: #ffd700; }

/* Diamond */
.achievement-row.diamond[b-l71iowouhg]        { border-color: #2a4a5a; color: #b9f2ff; }
.achievement-row.diamond .ach-icon-box[b-l71iowouhg] { border-color: #b9f2ff; }
.achievement-row.diamond.done[b-l71iowouhg]   { border-color: #b9f2ff; }

/* Legendary */
.achievement-row.legendary[b-l71iowouhg]      { border-color: #5a2a4a; color: #ff6ec7; }
.achievement-row.legendary .ach-icon-box[b-l71iowouhg] { border-color: #ff6ec7; }
.achievement-row.legendary.done[b-l71iowouhg] { border-color: #ff6ec7; }

/* ===== Done vs locked states ===== */
.achievement-row.done[b-l71iowouhg] {
    background: rgba(0, 0, 0, 0.2);
}

.achievement-row.done .ach-icon[b-l71iowouhg] {
    filter: drop-shadow(0 0 4px currentColor);
}

.achievement-row.locked[b-l71iowouhg] {
    opacity: 0.65;
}

.achievement-row.locked .ach-icon[b-l71iowouhg] {
    filter: saturate(0.5);
}
/* /Pages/Battle.razor.rz.scp.css */
.battle-container[b-svnj93s339]{position:relative;width:100vw;height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#0d1520,#1a1a2e 40%,#16213e 60%,#0d1520);font-family:'Press Start 2P',monospace;overflow:hidden;user-select:none}
.battle-canvas[b-svnj93s339]{position:absolute;inset:0;z-index:0;pointer-events:none}

/* ===== PREP PHASE ===== */

/* ===== Prep bar (bottom horizontal) ===== */
.prep-bar[b-svnj93s339] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-top: 3px solid #ffd700;
    background: rgba(10, 10, 30, 0.95);
    font-family: 'Press Start 2P', monospace;
}

.prep-bar-left[b-svnj93s339] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.prep-bar-title[b-svnj93s339] {
    font-size: 0.6rem;
    color: #ffd700;
    letter-spacing: 3px;
}

.prep-bar-hint[b-svnj93s339] {
    font-size: 0.45rem;
    color: #53d8fb;
    letter-spacing: 1px;
}

.prep-bar-units[b-svnj93s339] {
    display: flex;
    gap: 10px;
    flex: 1;
    justify-content: center;
}

/* Individual unit card in prep bar */
.prep-card[b-svnj93s339] {
    width: 100px;
    height: 110px;
    border: 3px solid #2a5a3a;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    position: relative;
}

.prep-card:hover:not(:disabled)[b-svnj93s339] {
    border-color: #50c878;
    background: rgba(80, 200, 120, 0.1);
    transform: translateY(-4px);
}

.prep-card.selected[b-svnj93s339] {
    border-color: #53d8fb;
    background: rgba(83, 216, 251, 0.12);
    box-shadow: 0 0 14px rgba(83, 216, 251, 0.3);
    transform: translateY(-4px);
}

.prep-card.placed[b-svnj93s339] {
    opacity: 0.3;
    border-color: #1a1a2a;
    cursor: default;
}

.prep-card:disabled[b-svnj93s339] { cursor: not-allowed; }

.pc-icon[b-svnj93s339] { font-size: 1.6rem; }
.pc-name[b-svnj93s339] { font-size: 0.42rem; color: #c0b0d0; text-align: center; letter-spacing: 1px; }
.pc-stats[b-svnj93s339] { display: flex; gap: 8px; font-size: 0.48rem; }
.pc-atk[b-svnj93s339] { color: #e94560; }
.pc-hp[b-svnj93s339] { color: #50c878; }
.pc-hero[b-svnj93s339] {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 0.35rem;
    color: #ffd700;
    border: 1px solid #ffd700;
    padding: 1px 4px;
}
.pc-check[b-svnj93s339] {
    position: absolute;
    top: 3px;
    left: 3px;
    color: #50c878;
    font-size: 0.7rem;
}

/* Ready button */
.prep-go[b-svnj93s339] {
    padding: 14px 28px;
    border: 3px solid #ffd700;
    background: rgba(255, 215, 0, 0.08);
    color: #ffd700;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    flex-shrink: 0;
}

.prep-go:hover:not(:disabled)[b-svnj93s339] {
    background: rgba(255, 215, 0, 0.2);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
    transform: scale(1.04);
}

.prep-go:disabled[b-svnj93s339] { opacity: 0.25; cursor: not-allowed; }

/* Blurred enemy grid during prep */
.enemy-grid.blurred[b-svnj93s339] {
    filter: blur(6px);
    pointer-events: none;
    opacity: 0.4;
}

/* Player grid in prep mode */
.my-grid.prep-active .tile.empty[b-svnj93s339] {
    border-color: #1a3a2a;
    border-style: dashed;
}

.tile.prep-placeable[b-svnj93s339] {
    border-color: #50c878 !important;
    border-style: dashed !important;
    background: rgba(80, 200, 120, 0.06);
    cursor: pointer;
    animation: prep-pulse-b-svnj93s339 1s ease-in-out infinite alternate;
}

/* Drag styling */
.prep-card[draggable="true"][b-svnj93s339] { cursor: grab; }
.prep-card[draggable="true"]:active[b-svnj93s339] { cursor: grabbing; opacity: 0.6; }
.tile.placed[b-svnj93s339] { cursor: grab; }
.tile.placed:active[b-svnj93s339] { cursor: grabbing; }

.tile.prep-placeable:hover[b-svnj93s339] {
    background: rgba(80, 200, 120, 0.15);
    transform: scale(1.05);
}

.tile.placed[b-svnj93s339] {
    border-color: #50c878 !important;
    border-style: solid !important;
    background: rgba(80, 200, 120, 0.1);
    cursor: pointer;
}

@keyframes prep-pulse-b-svnj93s339 {
    from { box-shadow: 0 0 4px rgba(80, 200, 120, 0.1); }
    to   { box-shadow: 0 0 12px rgba(80, 200, 120, 0.25); }
}

/* Prep label in center area */
.prep-label[b-svnj93s339] { color: #ffd700 !important; letter-spacing: 4px; }

/* ===== SIDE BARS ===== */
.side-bar[b-svnj93s339]{position:relative;z-index:5;display:flex;align-items:center;gap:12px;padding:4px 16px}
.enemy-bar[b-svnj93s339]{border-bottom:2px solid #2a1a1a;background:rgba(233,69,96,0.03)}
.my-bar[b-svnj93s339]{border-top:2px solid #1a3a2a;background:rgba(80,200,120,0.03)}
.portrait-icon[b-svnj93s339]{font-size:1.4rem;flex-shrink:0}
.bar-name[b-svnj93s339]{font-size:0.5rem;letter-spacing:2px;min-width:60px}
.enemy-name[b-svnj93s339]{color:#e94560}.my-name[b-svnj93s339]{color:#50c878}
.hp-bar[b-svnj93s339]{position:relative;flex:1;max-width:220px;height:16px;border:2px solid #3a3a4a;background:rgba(0,0,0,0.4)}
.hp-fill[b-svnj93s339]{height:100%;transition:width 0.3s}
.enemy-fill[b-svnj93s339]{background:linear-gradient(90deg,#e94560,#ff5a75)}
.my-fill[b-svnj93s339]{background:linear-gradient(90deg,#50c878,#60e090)}
.hp-txt[b-svnj93s339]{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:0.48rem;color:#fff;text-shadow:1px 1px 0 #000}
.hand-ct[b-svnj93s339]{font-size:0.5rem;color:#5a3a4a;flex-shrink:0}
.energy-box[b-svnj93s339]{display:flex;align-items:baseline;gap:2px;padding:4px 10px;border:2px solid #2a4a6a;background:rgba(83,216,251,0.05);flex-shrink:0}
.e-num[b-svnj93s339]{font-size:0.9rem;color:#53d8fb;text-shadow:0 0 6px rgba(83,216,251,0.4)}
.e-sep[b-svnj93s339]{font-size:0.55rem;color:#3a5a6a}.e-max[b-svnj93s339]{font-size:0.5rem;color:#3a6a7a}
.end-btn[b-svnj93s339]{padding:8px 16px;border:3px solid #ffd700;background:rgba(255,215,0,0.08);color:#ffd700;font-family:'Press Start 2P',monospace;font-size:0.55rem;letter-spacing:2px;cursor:pointer;transition:all 0.15s;flex-shrink:0}
.end-btn:hover:not(.off)[b-svnj93s339]{background:rgba(255,215,0,0.2);box-shadow:0 0 10px rgba(255,215,0,0.3)}
.end-btn.off[b-svnj93s339]{opacity:0.25;cursor:not-allowed;border-color:#3a3a2a;color:#3a3a2a}

/* ===== 5x5 GRID ===== */
.grid-area[b-svnj93s339]{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 16px}
.grid-row[b-svnj93s339]{display:flex;gap:3px}

.tile[b-svnj93s339]{width:min(72px,8vw);height:min(62px,6.2vh);border:2px solid;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px;transition:all 0.15s;position:relative}
.tile.empty[b-svnj93s339]{border-color:#1a1a2a;border-style:dashed;background:rgba(0,0,0,0.12)}
.tile.filled[b-svnj93s339]{background:rgba(0,0,0,0.4)}
.tile.enemy-tile.filled[b-svnj93s339]{border-color:#4a2030}
.tile.my-tile.filled[b-svnj93s339]{border-color:#204a30}

.tile.tgt[b-svnj93s339]{cursor:crosshair;animation:tpulse-b-svnj93s339 0.8s ease-in-out infinite alternate}
.tile.tgt:hover[b-svnj93s339]{transform:scale(1.12);z-index:10}
.tile.tgt:not(.friendly):not(.summon)[b-svnj93s339]{border-color:#e94560!important}
.tile.tgt.friendly[b-svnj93s339]{border-color:#50c878!important}
.tile.tgt.summon[b-svnj93s339]{border-color:#53d8fb!important;border-style:solid;background:rgba(83,216,251,0.08)}
@keyframes tpulse-b-svnj93s339{from{box-shadow:0 0 3px rgba(255,215,0,0.2)}to{box-shadow:0 0 10px rgba(255,215,0,0.5)}}

.t-icon[b-svnj93s339]{font-size:1.3rem}.enemy-tile .t-icon[b-svnj93s339]{color:#e94560}.my-tile .t-icon[b-svnj93s339]{color:#50c878}
.t-stats[b-svnj93s339]{font-size:0.55rem;color:#aaa;display:flex;gap:6px;align-items:center}
.t-atk[b-svnj93s339]{color:#e94560}
.t-hp[b-svnj93s339]{color:#50c878}
.t-shield[b-svnj93s339]{position:absolute;top:1px;right:1px;font-size:0.5rem;color:#53d8fb}

/* ===== CENTER ===== */
.center-area[b-svnj93s339]{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px 16px;flex-shrink:0}
.center-line[b-svnj93s339]{position:absolute;left:15%;right:15%;top:50%;height:2px;background:linear-gradient(90deg,transparent,#3a3a5a,transparent)}
/* ===== Combat log panel (left of board, over divider) ===== */
.combat-log-panel[b-svnj93s339] {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    width: 280px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #2a2a4a;
    border-radius: 4px;
    pointer-events: none;
}
.cl-title[b-svnj93s339] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #53d8fb;
    letter-spacing: 3px;
    margin-bottom: 6px;
}
.cl-entries[b-svnj93s339] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}
.cl-entries[b-svnj93s339]::-webkit-scrollbar { width: 4px; }
.cl-entries[b-svnj93s339]::-webkit-scrollbar-thumb { background: #3a3a5a; }
.cl-entry[b-svnj93s339] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #8a8aaa;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 2px solid #3a3a5a;
    line-height: 1.7;
}
.turn-info[b-svnj93s339]{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:4px}
.t-lbl[b-svnj93s339]{font-size:0.55rem;color:#ffd700;letter-spacing:3px;text-shadow:2px 2px 0 rgba(0,0,0,0.5)}
.t-lbl.w[b-svnj93s339]{color:#ffd700;font-size:0.9rem}.t-lbl.l[b-svnj93s339]{color:#e94560;font-size:0.9rem}
.t-sub[b-svnj93s339]{font-size:0.48rem;color:#4a4a6a;letter-spacing:2px}

/* ===== HAND ROW ===== */
.hand-row[b-svnj93s339]{display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:8px 12px 6px;overflow:visible;z-index:10;position:relative;margin-top:auto}
.pile[b-svnj93s339]{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;width:50px;position:relative;height:65px}
.p-c[b-svnj93s339]{position:absolute;width:40px;height:54px;border:2px solid #53d8fb;background:linear-gradient(135deg,#1a2a4a,#0a1a30)}
.p-c.p2[b-svnj93s339],.p-c.d2[b-svnj93s339]{top:0;left:4px}.p-c.p1[b-svnj93s339],.p-c.d1[b-svnj93s339]{top:3px;left:6px}
.disc-pile .p-c[b-svnj93s339]{border-color:#5a3a3a;background:linear-gradient(135deg,#2a1a1a,#1a0a0a)}
.p-num[b-svnj93s339]{font-size:0.5rem;color:#53d8fb;margin-top:58px;display:flex;align-items:baseline}
.disc-n[b-svnj93s339]{color:#6a4a4a}.p-of[b-svnj93s339]{font-size:0.48rem;opacity:0.5}

.hand-cards[b-svnj93s339]{display:flex;justify-content:center;gap:5px;overflow:visible;flex:1;min-width:0}
.hcard[b-svnj93s339]{width:88px;height:min(115px,12.5vh);border:3px solid;background:rgba(0,0,0,0.5);display:flex;flex-direction:column;align-items:center;padding:4px;gap:2px;cursor:pointer;transition:all 0.2s ease;position:relative;flex-shrink:0}
.hcard.can:hover[b-svnj93s339]{transform:translateY(-14px) scale(1.06);z-index:20}
.hcard.sel[b-svnj93s339]{transform:translateY(-20px) scale(1.08);z-index:25;box-shadow:0 0 16px rgba(255,215,0,0.5);border-color:#ffd700!important}
.hcard.no[b-svnj93s339]{opacity:0.35;cursor:not-allowed;filter:saturate(0.3)}
.hc-cost[b-svnj93s339]{position:absolute;top:3px;left:3px;width:20px;height:20px;border:2px solid #53d8fb;background:rgba(0,0,30,0.7);display:flex;align-items:center;justify-content:center;font-size:0.55rem;color:#53d8fb}
.hc-cost.red[b-svnj93s339]{border-color:#e94560;color:#e94560}
.hc-pixel[b-svnj93s339]{width:36px;height:36px;image-rendering:pixelated;image-rendering:crisp-edges;margin-top:8px}
.hc-name[b-svnj93s339]{font-size:0.55rem;text-align:center;margin-top:auto}
.hc-type[b-svnj93s339]{font-size:0.5rem;opacity:0.4}
.hc-echo[b-svnj93s339]{font-size:0.38rem;color:#53d8fb;opacity:0.9;margin-top:2px;text-align:center}

.hcard.common[b-svnj93s339]{border-color:#606070;color:#b0b0b0}
.hcard.uncommon[b-svnj93s339]{border-color:#3a6a4a;color:#50c878}
.hcard.rare[b-svnj93s339]{border-color:#3a4a7a;color:#4488ff}
.hcard.epic[b-svnj93s339]{border-color:#5a3a7a;color:#b048ff}
.hcard.legendary[b-svnj93s339]{border-color:#6a5a1a;color:#ffd700}
.hcard.cosmic[b-svnj93s339]{border-color:#6633cc;color:#bb88ff;background:linear-gradient(135deg,rgba(30,10,60,0.8),rgba(10,5,30,0.9));animation:cosmic-idle-b-svnj93s339 3s ease-in-out infinite alternate}
@keyframes cosmic-idle-b-svnj93s339{from{border-color:#6633cc}to{border-color:#9955ff}}

/* ===== Rarity animations (Epic / Legendary / Cosmic) ===== */

/* --- Inner content z-index --- */
.hcard.epic > *[b-svnj93s339],
.hcard.legendary > *[b-svnj93s339],
.hcard.cosmic > *[b-svnj93s339] {
    position: relative;
    z-index: 1;
}

/* --- Epic --- */
.hcard.epic[b-svnj93s339] {
    overflow: hidden;
    animation: epic-pulse-b-svnj93s339 2s ease-in-out infinite alternate;
}
.hcard.epic[b-svnj93s339]::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(transparent, rgba(176, 72, 255, 0.07), transparent, rgba(176, 72, 255, 0.05), transparent);
    animation: epic-spin-b-svnj93s339 4s linear infinite;
    pointer-events: none; z-index: 0;
}
.hcard.epic[b-svnj93s339]::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(176, 72, 255, 0.12), transparent);
    animation: epic-sweep-b-svnj93s339 2.5s ease-in-out infinite;
    pointer-events: none; z-index: 0;
}

/* --- Legendary --- */
.hcard.legendary[b-svnj93s339] {
    overflow: hidden;
    animation: legendary-blaze-b-svnj93s339 2s ease-in-out infinite alternate;
}
.hcard.legendary[b-svnj93s339]::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, #ffd700, #ff8c00, #ffd700, #ffec80, #ffd700, #ff8c00);
    background-size: 300% 300%;
    animation: legendary-border-b-svnj93s339 3s ease infinite;
    z-index: -1; border-radius: 4px;
}
.hcard.legendary[b-svnj93s339]::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: legendary-shine-b-svnj93s339 3s ease-in-out infinite;
    pointer-events: none; z-index: 2;
}

/* --- Cosmic --- */
.hcard.cosmic[b-svnj93s339] {
    border-color: transparent;
    overflow: hidden;
    animation: cosmic-breathe-b-svnj93s339 3s ease-in-out infinite alternate;
}
.hcard.cosmic[b-svnj93s339]::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(#ff0080, #ff8c00, #ffd700, #50c878, #4488ff, #b048ff, #ff0080);
    animation: cosmic-rotate-b-svnj93s339 3s linear infinite;
    z-index: -1;
}
.hcard.cosmic[b-svnj93s339]::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 60% 10%, #fff, transparent),
        radial-gradient(1px 1px at 80% 60%, #fff, transparent),
        radial-gradient(1px 1px at 40% 80%, #fff, transparent),
        radial-gradient(1px 1px at 10% 70%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 70% 40%, #bb88ff, transparent),
        radial-gradient(1.5px 1.5px at 30% 50%, #53d8fb, transparent);
    animation: cosmic-sparkle-b-svnj93s339 2s ease-in-out infinite alternate;
    pointer-events: none; z-index: 2;
}

/* --- Keyframes --- */
@keyframes epic-pulse-b-svnj93s339 {
    from { box-shadow: 0 0 8px rgba(176, 72, 255, 0.15), inset 0 0 15px rgba(176, 72, 255, 0.05); }
    to   { box-shadow: 0 0 20px rgba(176, 72, 255, 0.3), inset 0 0 25px rgba(176, 72, 255, 0.05); }
}
@keyframes epic-spin-b-svnj93s339 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes epic-sweep-b-svnj93s339 {
    0%, 100% { left: -100%; }
    50%      { left: 150%; }
}
@keyframes legendary-blaze-b-svnj93s339 {
    from { box-shadow: 0 0 15px rgba(255, 215, 0, 0.25), 0 0 30px rgba(255, 140, 0, 0.1); }
    to   { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4), 0 0 50px rgba(255, 140, 0, 0.2), 0 0 80px rgba(255, 215, 0, 0.08); }
}
@keyframes legendary-border-b-svnj93s339 {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes legendary-shine-b-svnj93s339 {
    0%, 100% { left: -120%; opacity: 0; }
    10%      { opacity: 1; }
    60%      { left: 150%; opacity: 1; }
    70%      { opacity: 0; }
}
@keyframes cosmic-rotate-b-svnj93s339 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes cosmic-breathe-b-svnj93s339 {
    from { box-shadow: 0 0 15px rgba(153, 85, 255, 0.2), 0 0 40px rgba(102, 51, 204, 0.1); }
    to   { box-shadow: 0 0 30px rgba(153, 85, 255, 0.35), 0 0 60px rgba(102, 51, 204, 0.2), 0 0 100px rgba(80, 0, 200, 0.08); }
}
@keyframes cosmic-sparkle-b-svnj93s339 {
    from { opacity: 0.3; }
    to   { opacity: 1; }
}

/* ===== HINT ===== */
/* ===== Turn banner ===== */
.turn-banner[b-svnj93s339] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    animation: tb-anim-b-svnj93s339 2s ease-out forwards;
}
.tb-label[b-svnj93s339] {
    font-family: 'Press Start 2P', monospace;
    font-size: 2rem;
    color: #ffd700;
    letter-spacing: 8px;
    text-shadow: 4px 4px 0 rgba(0,0,0,0.7), 0 0 30px rgba(255,215,0,0.3);
    animation: tb-text-b-svnj93s339 2s ease-out forwards;
}
.tb-sub[b-svnj93s339] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    color: #53d8fb;
    letter-spacing: 3px;
    margin-top: 12px;
    animation: tb-text-b-svnj93s339 2s ease-out forwards;
}
@keyframes tb-anim-b-svnj93s339 {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes tb-text-b-svnj93s339 {
    0%   { transform: scale(0.7); opacity: 0; }
    15%  { transform: scale(1.05); opacity: 1; }
    25%  { transform: scale(1); }
    70%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0; }
}

/* ===== Enemy turn banner ===== */
.enemy-turn-banner[b-svnj93s339] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 38;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    animation: etb-anim-b-svnj93s339 1.6s ease-out forwards;
}
.etb-label[b-svnj93s339] {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.6rem;
    color: #e94560;
    letter-spacing: 6px;
    text-shadow: 4px 4px 0 rgba(0,0,0,0.7), 0 0 20px rgba(233,69,96,0.3);
    animation: etb-text-b-svnj93s339 1.6s ease-out forwards;
}
@keyframes etb-anim-b-svnj93s339 {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes etb-text-b-svnj93s339 {
    0%   { transform: scale(0.7); opacity: 0; }
    20%  { transform: scale(1.05); opacity: 1; }
    30%  { transform: scale(1); }
    80%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0; }
}

.hint[b-svnj93s339]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;font-size:0.5rem;color:#ffd700;background:rgba(0,0,0,0.85);padding:6px 16px;border:2px solid #ffd700;pointer-events:none}

.use-btn-wrap[b-svnj93s339]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:35;display:flex}
.use-btn[b-svnj93s339]{
    padding:14px 40px;border:3px solid #50c878;background:rgba(80,200,120,0.12);
    color:#50c878;font-family:'Press Start 2P',monospace;font-size:0.8rem;letter-spacing:4px;
    cursor:pointer;transition:all 0.15s;animation:use-pulse-b-svnj93s339 1s ease-in-out infinite alternate;
}
.use-btn:hover[b-svnj93s339]{background:rgba(80,200,120,0.25);box-shadow:0 0 20px rgba(80,200,120,0.4);transform:scale(1.06)}
@keyframes use-pulse-b-svnj93s339{
    from{box-shadow:0 0 8px rgba(80,200,120,0.2)}
    to{box-shadow:0 0 18px rgba(80,200,120,0.5)}
}

/* ===== GAME OVER ===== */
.go-overlay[b-svnj93s339]{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0.88);display:flex;align-items:center;justify-content:center}
.go-box[b-svnj93s339]{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 48px;border:4px solid;background:rgba(10,10,30,0.95)}
.go-box.w[b-svnj93s339]{border-color:#ffd700;color:#ffd700}.go-box.l[b-svnj93s339]{border-color:#e94560;color:#e94560}
.go-t[b-svnj93s339]{font-size:1.6rem;letter-spacing:5px;text-shadow:3px 3px 0 rgba(0,0,0,0.5)}
.go-s[b-svnj93s339]{font-size:0.5rem;opacity:0.5}.go-c[b-svnj93s339]{font-size:0.55rem;color:#ffd700}
.go-btn[b-svnj93s339]{padding:10px 40px;border:3px solid;border-color:inherit;background:rgba(255,255,255,0.04);color:inherit;font-family:'Press Start 2P',monospace;font-size:0.55rem;letter-spacing:3px;cursor:pointer;transition:all 0.15s}
.go-btn:hover[b-svnj93s339]{background:rgba(255,255,255,0.1);transform:scale(1.04)}

/* ===== Card hover tooltip ===== */
.card-hover-tip[b-svnj93s339] {
    position: fixed;
    bottom: 180px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    background: rgba(8, 8, 25, 0.96);
    border: 2px solid #53d8fb;
    padding: 12px 18px;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: cht-in-b-svnj93s339 0.15s ease-out;
    pointer-events: none;
}

@keyframes cht-in-b-svnj93s339 {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.cht-name[b-svnj93s339] {
    font-size: 0.5rem;
    color: #ffd700;
    letter-spacing: 2px;
}

.cht-type[b-svnj93s339] {
    font-size: 0.5rem;
    color: #8a8aaa;
    letter-spacing: 1px;
}

.cht-desc[b-svnj93s339] {
    font-size: 0.5rem;
    color: #c0c0d0;
    line-height: 1.8;
    opacity: 0.85;
}
.cht-echo[b-svnj93s339] {
    font-size: 0.48rem;
    color: #53d8fb;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(83,216,251,0.2);
    line-height: 1.7;
}
.cht-echo.none[b-svnj93s339] { color: #5a5a7a; }

/* ===== Projectile layer ===== */
/* ===== Deck view overlay ===== */
.deck-view-overlay[b-svnj93s339] {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.deck-view-panel[b-svnj93s339] {
    width: 90vw;
    max-width: 800px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border: 3px solid #53d8fb;
    background: rgba(10, 10, 30, 0.98);
    padding: 16px;
    overflow: hidden;
}

.dv-header[b-svnj93s339] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #2a2a4a;
    margin-bottom: 12px;
}

.dv-title[b-svnj93s339] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    color: #ffd700;
    letter-spacing: 3px;
}

.dv-counts[b-svnj93s339] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.48rem;
    color: #8a8aaa;
    flex: 1;
}

.dv-close[b-svnj93s339] {
    background: none;
    border: 2px solid #534b6e;
    color: #c0b0d0;
    font-size: 0.7rem;
    padding: 4px 10px;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
}
.dv-close:hover[b-svnj93s339] { border-color: #e94560; color: #e94560; }

.dv-grid[b-svnj93s339] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    padding: 4px;
}
.dv-grid[b-svnj93s339]::-webkit-scrollbar { width: 6px; }
.dv-grid[b-svnj93s339]::-webkit-scrollbar-thumb { background: #3a3a5a; }

.dv-card[b-svnj93s339] {
    border: 2px solid;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    transition: all 0.15s;
}

.dv-card.in-draw[b-svnj93s339] { opacity: 1; }
.dv-card.in-hand[b-svnj93s339] { opacity: 1; box-shadow: 0 0 8px rgba(255, 215, 0, 0.3); }
.dv-card.in-discard[b-svnj93s339] { opacity: 0.3; }

.dv-cost[b-svnj93s339] {
    position: absolute;
    top: 3px; left: 3px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.42rem;
    color: #53d8fb;
}

.dv-art[b-svnj93s339] { font-size: 1.3rem; margin-top: 8px; }

.dv-name[b-svnj93s339] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    text-align: center;
    margin-top: auto;
}

.dv-status-tag[b-svnj93s339] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.32rem;
    letter-spacing: 1px;
    padding: 1px 4px;
    border: 1px solid;
}

.dv-card.in-draw .dv-status-tag[b-svnj93s339] { color: #50c878; border-color: #50c878; }
.dv-card.in-hand .dv-status-tag[b-svnj93s339] { color: #ffd700; border-color: #ffd700; }
.dv-card.in-discard .dv-status-tag[b-svnj93s339] { color: #5a5a7a; border-color: #3a3a4a; }

/* Rarity colors for deck view */
.dv-card.common[b-svnj93s339]    { border-color: #505060; color: #b0b0b0; }
.dv-card.uncommon[b-svnj93s339]  { border-color: #2a5a3a; color: #50c878; }
.dv-card.rare[b-svnj93s339]      { border-color: #2a3a6a; color: #4488ff; }
.dv-card.epic[b-svnj93s339]      { border-color: #4a2a6a; color: #b048ff; }
.dv-card.legendary[b-svnj93s339] { border-color: #5a4a1a; color: #ffd700; }
.dv-card.cosmic[b-svnj93s339]    { border-color: #4a2a6a; color: #bb88ff; }

.projectile-layer[b-svnj93s339] {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    overflow: hidden;
}

.projectile[b-svnj93s339] {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 8px #ffd700, 0 0 16px rgba(255, 215, 0, 0.25);
}

.projectile.proj-up[b-svnj93s339] {
    animation: shoot-up-b-svnj93s339 0.45s ease-in forwards;
}

.projectile.proj-down[b-svnj93s339] {
    animation: shoot-down-b-svnj93s339 0.45s ease-in forwards;
}

@keyframes shoot-up-b-svnj93s339 {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-250px) scale(0.5); opacity: 0; }
}

@keyframes shoot-down-b-svnj93s339 {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(250px) scale(0.5); opacity: 0; }
}

.proj-trail[b-svnj93s339] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ffaa00;
    border-radius: 50%;
    opacity: 0.6;
}

.proj-trail.proj-up[b-svnj93s339] {
    animation: trail-up-b-svnj93s339 0.35s ease-out forwards;
}

.proj-trail.proj-down[b-svnj93s339] {
    animation: trail-down-b-svnj93s339 0.35s ease-out forwards;
}

@keyframes trail-up-b-svnj93s339 {
    0% { transform: translateY(0) scale(1); opacity: 0.6; }
    100% { transform: translateY(-180px) scale(0.2); opacity: 0; }
}

@keyframes trail-down-b-svnj93s339 {
    0% { transform: translateY(0) scale(1); opacity: 0.6; }
    100% { transform: translateY(180px) scale(0.2); opacity: 0; }
}

/* ===== Unit hover tooltip ===== */
.unit-hover-tip[b-svnj93s339] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 40;
    background: rgba(8, 8, 25, 0.97);
    border: 2px solid #50c878;
    padding: 14px 20px;
    max-width: 380px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: uht-in-b-svnj93s339 0.15s ease-out;
    pointer-events: none;
}

@keyframes uht-in-b-svnj93s339 {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.uht-icon[b-svnj93s339] { font-size: 1.6rem; text-align: center; }
.uht-name[b-svnj93s339] { font-size: 0.55rem; color: #ffd700; letter-spacing: 2px; text-align: center; }
.uht-stats-row[b-svnj93s339] { display: flex; justify-content: center; gap: 20px; font-size: 0.55rem; }
.uht-atk[b-svnj93s339] { color: #e9a560; }
.uht-hp[b-svnj93s339] { color: #50c878; }
.uht-buff[b-svnj93s339] { font-size: 0.48rem; color: #53d8fb; padding: 2px 0; }
.uht-buff.perm[b-svnj93s339] { color: #ffd700; }
.uht-buff.temp[b-svnj93s339] { color: #53d8fb; }
.buff-count[b-svnj93s339] { color: #e94560; font-weight: bold; }
.uht-passive[b-svnj93s339] { font-size: 0.5rem; color: #bb88ff; line-height: 1.7; border-top: 1px solid #2a2a4a; padding-top: 6px; }
.uht-ability[b-svnj93s339] { font-size: 0.5rem; color: #c0c0d0; line-height: 1.7; opacity: 0.8; }

.dr-type-sm[b-svnj93s339] { font-size: 0.48rem; opacity: 0.5; }

/* Move card states */
.tile.move-src[b-svnj93s339] { border-color: #ffd700 !important; box-shadow: 0 0 12px rgba(255,215,0,0.4); }
.tile.move-dest[b-svnj93s339] { border-color: #53d8fb !important; border-style: solid; background: rgba(83,216,251,0.1); cursor: pointer; animation: tpulse-b-svnj93s339 0.8s ease-in-out infinite alternate; }

.hc-art-text[b-svnj93s339] { font-size: 1.6rem; margin-top: 10px; text-align: center; }

/* ===== SUMMON PICKER ===== */
.summon-overlay[b-svnj93s339] {
    position: absolute;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}

.summon-panel[b-svnj93s339] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 28px 36px;
    border: 3px solid #53d8fb;
    background: rgba(10, 10, 30, 0.97);
    max-width: 500px;
}

.summon-title[b-svnj93s339] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    color: #53d8fb;
    letter-spacing: 3px;
    text-align: center;
}

.summon-hint[b-svnj93s339] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #5a5a7a;
    text-align: center;
}

.summon-list[b-svnj93s339] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.summon-card[b-svnj93s339] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid #2a5a6a;
    background: rgba(83, 216, 251, 0.04);
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Press Start 2P', monospace;
    position: relative;
}

.summon-card:hover:not(:disabled)[b-svnj93s339] {
    border-color: #53d8fb;
    background: rgba(83, 216, 251, 0.12);
    transform: translateX(4px);
    box-shadow: 0 0 16px rgba(83, 216, 251, 0.2);
}

.summon-card.used[b-svnj93s339] {
    opacity: 0.25;
    cursor: not-allowed;
}

.summon-card:disabled[b-svnj93s339] { cursor: not-allowed; }

.sc-icon[b-svnj93s339] { font-size: 1.4rem; flex-shrink: 0; }
.sc-name[b-svnj93s339] { font-size: 0.55rem; color: #ffd700; flex-shrink: 0; }
.sc-cost[b-svnj93s339] { font-size: 0.55rem; color: #53d8fb; flex-shrink: 0; }
.sc-desc[b-svnj93s339] { font-size: 0.5rem; color: #8a8aaa; flex: 1; }
.sc-used[b-svnj93s339] { font-size: 0.55rem; color: #50c878; border: 1px solid #50c878; padding: 2px 6px; }

.summon-skip[b-svnj93s339] {
    padding: 10px 32px;
    border: 2px solid #534b6e;
    background: rgba(0, 0, 0, 0.3);
    color: #8a8aaa;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.15s;
}

.summon-skip:hover[b-svnj93s339] {
    border-color: #ffd700;
    color: #ffd700;
}
/* /Pages/CardSelect.razor.rz.scp.css */
/* ===== Container ===== */
.cardsel-container[b-9cnx8l6b8z] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}

.cardsel-canvas[b-9cnx8l6b8z] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ===== Header ===== */
.cardsel-header[b-9cnx8l6b8z] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-bottom: 3px solid #2a2a4a;
}

.back-btn[b-9cnx8l6b8z] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 2px solid #534b6e;
    border-radius: 4px;
    color: #c0b0d0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.back-btn:hover[b-9cnx8l6b8z] { border-color: #ffd700; color: #ffd700; }
.back-arrow[b-9cnx8l6b8z] { font-size: 0.8rem; }

.header-title[b-9cnx8l6b8z] {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1rem;
    color: #53d8fb;
    text-shadow: 3px 3px 0 #1a6a8a;
    letter-spacing: 3px;
}

.slot-counter[b-9cnx8l6b8z] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    display: flex;
    gap: 4px;
}

.slots-used[b-9cnx8l6b8z] { color: #50c878; }
.slots-sep[b-9cnx8l6b8z]  { color: #534b6e; }
.slots-max[b-9cnx8l6b8z]  { color: #808080; }

/* ===== Body layout ===== */
.cardsel-body[b-9cnx8l6b8z] {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* ===== Left panel: collection ===== */
.collection-panel[b-9cnx8l6b8z] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    border-right: 3px solid #2a2a4a;
}

.panel-label[b-9cnx8l6b8z] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #8a8aaa;
    letter-spacing: 3px;
    margin-bottom: 12px;
    text-align: center;
}

.collection-scroll[b-9cnx8l6b8z] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.collection-scroll[b-9cnx8l6b8z]::-webkit-scrollbar { width: 6px; }
.collection-scroll[b-9cnx8l6b8z]::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.collection-scroll[b-9cnx8l6b8z]::-webkit-scrollbar-thumb { background: #3a3a5a; }

/* Collection card row */
.coll-card[b-9cnx8l6b8z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 2px solid;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Press Start 2P', monospace;
    position: relative;
}

.coll-card:hover:not(:disabled)[b-9cnx8l6b8z] {
    background: rgba(0, 0, 0, 0.5);
    transform: translateX(4px);
}

.coll-card:disabled[b-9cnx8l6b8z] {
    opacity: 0.35;
    cursor: not-allowed;
}

.coll-card.picked[b-9cnx8l6b8z] {
    background: rgba(80, 200, 120, 0.1);
    border-color: #50c878 !important;
}

.coll-card.in-deck[b-9cnx8l6b8z] {
    opacity: 0.3;
}

.cc-mana[b-9cnx8l6b8z] {
    width: 20px;
    height: 20px;
    border: 2px solid #53d8fb;
    background: rgba(0, 0, 30, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    color: #53d8fb;
    flex-shrink: 0;
}

.cc-art[b-9cnx8l6b8z] {
    font-size: 1rem;
    flex-shrink: 0;
}

.cc-name[b-9cnx8l6b8z] {
    font-size: 0.48rem;
    flex: 1;
    letter-spacing: 1px;
}

.cc-type[b-9cnx8l6b8z] {
    font-size: 0.5rem;
    opacity: 0.4;
}

.cc-tag[b-9cnx8l6b8z] {
    font-size: 0.5rem;
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 6px;
    letter-spacing: 1px;
}

.cc-check[b-9cnx8l6b8z] {
    color: #50c878;
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* Rarity colors */
.coll-card.common[b-9cnx8l6b8z]    { border-color: #505060; color: #b0b0b0; }
.coll-card.uncommon[b-9cnx8l6b8z]  { border-color: #2a5a3a; color: #50c878; }
.coll-card.rare[b-9cnx8l6b8z]      { border-color: #2a3a6a; color: #4488ff; }
.coll-card.epic[b-9cnx8l6b8z]      { border-color: #4a2a6a; color: #b048ff; }
.coll-card.legendary[b-9cnx8l6b8z] { border-color: #5a4a1a; color: #ffd700; }

/* ===== Right panel: deck ===== */
.deck-panel[b-9cnx8l6b8z] {
    width: 320px;
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    gap: 8px;
    overflow-y: auto;
}

.deck-panel[b-9cnx8l6b8z]::-webkit-scrollbar { width: 6px; }
.deck-panel[b-9cnx8l6b8z]::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.deck-panel[b-9cnx8l6b8z]::-webkit-scrollbar-thumb { background: #3a3a5a; }

.deck-section-label[b-9cnx8l6b8z] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #5a5a7a;
    letter-spacing: 2px;
    margin-top: 8px;
}

.deck-section-label.added-label[b-9cnx8l6b8z] {
    color: #50c878;
    border-top: 2px solid #2a2a4a;
    padding-top: 10px;
}

.deck-list[b-9cnx8l6b8z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.deck-row[b-9cnx8l6b8z] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-left: 2px solid;
    background: rgba(0, 0, 0, 0.2);
    font-family: 'Press Start 2P', monospace;
}

.deck-row.added[b-9cnx8l6b8z] {
    background: rgba(80, 200, 120, 0.06);
    border-left-color: #50c878;
}

.deck-row.empty-slot[b-9cnx8l6b8z] {
    border-left-color: #2a2a3a;
    border: 2px dashed #2a2a3a;
    justify-content: center;
}

.dr-mana[b-9cnx8l6b8z] {
    font-size: 0.55rem;
    color: #53d8fb;
    width: 14px;
    text-align: center;
}

.dr-name[b-9cnx8l6b8z] {
    font-size: 0.55rem;
    flex: 1;
    opacity: 0.7;
}

.dr-type[b-9cnx8l6b8z] {
    font-size: 0.5rem;
    opacity: 0.35;
}

.dr-type-sm[b-9cnx8l6b8z] {
    font-size: 0.42rem;
    opacity: 0.5;
}

.dr-remove[b-9cnx8l6b8z] {
    background: none;
    border: 1px solid #e94560;
    color: #e94560;
    font-size: 0.55rem;
    cursor: pointer;
    padding: 2px 6px;
    font-family: 'Press Start 2P', monospace;
    transition: all 0.15s;
}

.dr-remove:hover[b-9cnx8l6b8z] {
    background: rgba(233, 69, 96, 0.2);
}

.empty-text[b-9cnx8l6b8z] {
    font-size: 0.5rem;
    color: #2a2a4a;
    letter-spacing: 2px;
}

/* Row rarity colors */
.deck-row.common[b-9cnx8l6b8z]    { border-left-color: #808080; color: #b0b0b0; }
.deck-row.uncommon[b-9cnx8l6b8z]  { border-left-color: #50c878; color: #50c878; }
.deck-row.rare[b-9cnx8l6b8z]      { border-left-color: #4488ff; color: #4488ff; }
.deck-row.epic[b-9cnx8l6b8z]      { border-left-color: #b048ff; color: #b048ff; }
.deck-row.legendary[b-9cnx8l6b8z] { border-left-color: #ffd700; color: #ffd700; }

/* ===== Continue button ===== */
.continue-btn[b-9cnx8l6b8z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 24px;
    border: 3px solid #ffd700;
    background: rgba(255, 215, 0, 0.08);
    color: #ffd700;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: auto;
}

.continue-btn:hover[b-9cnx8l6b8z] {
    background: rgba(255, 215, 0, 0.18);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    transform: scale(1.03);
}

.continue-btn .btn-arrow[b-9cnx8l6b8z] { font-size: 0.6rem; }

/* ===== Tabs ===== */
.tab-bar[b-9cnx8l6b8z] {
    position: relative; z-index: 5; display: flex; justify-content: center; gap: 0; padding: 0 32px;
}
.tab-btn[b-9cnx8l6b8z] {
    flex: 1; max-width: 200px; padding: 10px 16px; border: 2px solid #2a2a4a; border-bottom: none;
    background: rgba(0,0,0,0.2); color: #5a5a7a; font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem; letter-spacing: 2px; cursor: pointer; transition: all 0.15s;
}
.tab-btn:hover[b-9cnx8l6b8z] { color: #8a8aaa; background: rgba(0,0,0,0.3); }
.tab-btn.active[b-9cnx8l6b8z] { color: #53d8fb; border-color: #53d8fb; background: rgba(83,216,251,0.06); }

/* ===== Pool panel ===== */
.pool-panel[b-9cnx8l6b8z] { flex: 1; display: flex; flex-direction: column; padding: 12px 16px; border-right: 3px solid #2a2a4a; }
.pool-scroll[b-9cnx8l6b8z] { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.pool-scroll[b-9cnx8l6b8z]::-webkit-scrollbar { width: 6px; }
.pool-scroll[b-9cnx8l6b8z]::-webkit-scrollbar-thumb { background: #3a3a5a; }

.pool-row[b-9cnx8l6b8z] {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid;
    background: rgba(0,0,0,0.3); cursor: pointer; transition: all 0.15s;
    font-family: 'Press Start 2P', monospace; position: relative;
}
.pool-row:hover:not(:disabled)[b-9cnx8l6b8z] { background: rgba(0,0,0,0.5); transform: translateX(3px); }
.pool-row:disabled[b-9cnx8l6b8z] { opacity: 0.3; cursor: not-allowed; }
.pool-row.picked[b-9cnx8l6b8z] { background: rgba(80,200,120,0.1); border-color: #50c878 !important; }
.pool-row.in-base[b-9cnx8l6b8z] { opacity: 0.25; }

.pr-cost[b-9cnx8l6b8z] { width: 18px; height: 18px; border: 2px solid #53d8fb; background: rgba(0,0,30,0.5); display: flex; align-items: center; justify-content: center; font-size: 0.5rem; color: #53d8fb; flex-shrink: 0; }
.pr-art[b-9cnx8l6b8z] { font-size: 0.9rem; flex-shrink: 0; }
.pr-name[b-9cnx8l6b8z] { font-size: 0.5rem; flex: 1; }
.pr-type[b-9cnx8l6b8z] { font-size: 0.48rem; opacity: 0.4; }
.pr-hp[b-9cnx8l6b8z] { font-size: 0.48rem; color: #50c878; }
.pr-tag[b-9cnx8l6b8z] { font-size: 0.55rem; opacity: 0.4; background: rgba(0,0,0,0.3); padding: 2px 6px; }
.pr-check[b-9cnx8l6b8z] { color: #50c878; font-size: 0.6rem; flex-shrink: 0; }

.pool-row.common[b-9cnx8l6b8z] { border-color: #505060; color: #b0b0b0; }
.pool-row.uncommon[b-9cnx8l6b8z] { border-color: #2a5a3a; color: #50c878; }
.pool-row.rare[b-9cnx8l6b8z] { border-color: #2a3a6a; color: #4488ff; }
.pool-row.epic[b-9cnx8l6b8z] { border-color: #4a2a6a; color: #b048ff; }
.pool-row.legendary[b-9cnx8l6b8z] { border-color: #5a4a1a; color: #ffd700; }
.pool-row.cosmic[b-9cnx8l6b8z] { border-color: #4a2a6a; color: #bb88ff; }

/* ===== Deck panel updates ===== */
.char-label[b-9cnx8l6b8z] { color: #e94560; border-top: 2px solid #2a2a4a; padding-top: 8px; }
.deck-total[b-9cnx8l6b8z] { font-size: 0.5rem; color: #5a5a7a; text-align: center; margin-top: 8px; letter-spacing: 1px; }

.slots-div[b-9cnx8l6b8z] { color: #3a3a5a; }

/* ===== Card hover tooltip ===== */
.cs-tooltip[b-9cnx8l6b8z] {
    position: fixed;
    bottom: 40px;
    left: 20px;
    z-index: 100;
    width: 280px;
    padding: 14px 16px;
    border: 2px solid;
    background: rgba(8, 8, 24, 0.97);
    font-family: 'Press Start 2P', monospace;
    pointer-events: none;
    animation: cst-in-b-9cnx8l6b8z 0.15s ease-out;
}

@keyframes cst-in-b-9cnx8l6b8z {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cs-tooltip.common[b-9cnx8l6b8z]    { border-color: #808080; }
.cs-tooltip.uncommon[b-9cnx8l6b8z]  { border-color: #50c878; }
.cs-tooltip.rare[b-9cnx8l6b8z]      { border-color: #4488ff; }
.cs-tooltip.epic[b-9cnx8l6b8z]      { border-color: #b048ff; }
.cs-tooltip.legendary[b-9cnx8l6b8z] { border-color: #ffd700; }
.cs-tooltip.cosmic[b-9cnx8l6b8z]    { border-color: #9955ff; }

.cst-header[b-9cnx8l6b8z] { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cst-art[b-9cnx8l6b8z] { font-size: 1.2rem; }
.cst-name[b-9cnx8l6b8z] { font-size: 0.55rem; color: #ffd700; letter-spacing: 1px; }
.cst-meta[b-9cnx8l6b8z] { font-size: 0.48rem; color: #8a8aaa; margin-bottom: 8px; }
.cst-desc[b-9cnx8l6b8z] { font-size: 0.48rem; color: #c0b0d0; line-height: 1.8; }
/* /Pages/Characters.razor.rz.scp.css */
/* ===== Container ===== */
.characters-container[b-j1wwqty588] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}

.chars-canvas[b-j1wwqty588] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ===== Header ===== */
.chars-header[b-j1wwqty588] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-bottom: 3px solid #2a2a4a;
}

.back-btn[b-j1wwqty588] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 2px solid #534b6e;
    border-radius: 4px;
    color: #c0b0d0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.back-btn:hover[b-j1wwqty588] {
    border-color: #ffd700;
    color: #ffd700;
}

.back-arrow[b-j1wwqty588] {
    font-size: 0.8rem;
}

.header-title[b-j1wwqty588] {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.4rem;
    color: #e94560;
    text-shadow: 3px 3px 0 #8a1530;
    letter-spacing: 4px;
}

.chars-count[b-j1wwqty588] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    display: flex;
    gap: 4px;
}

.count-owned[b-j1wwqty588] { color: #50c878; }
.count-sep[b-j1wwqty588]   { color: #534b6e; }
.count-total[b-j1wwqty588] { color: #808080; }

/* ===== Body layout ===== */
.chars-body[b-j1wwqty588] {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* ===== Character grid (left side) ===== */
.chars-grid[b-j1wwqty588] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    padding: 20px 24px;
    overflow-y: auto;
    align-content: start;
}

.chars-grid[b-j1wwqty588]::-webkit-scrollbar {
    width: 6px;
}

.chars-grid[b-j1wwqty588]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.chars-grid[b-j1wwqty588]::-webkit-scrollbar-thumb {
    background: #3a3a5a;
}

/* ===== Character card ===== */
.char-card[b-j1wwqty588] {
    position: relative;
    aspect-ratio: 3 / 4;
    border: 3px solid;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
    image-rendering: pixelated;
    font-family: 'Press Start 2P', monospace;
    padding: 0;
}

.char-card:hover[b-j1wwqty588] {
    transform: translateY(-4px);
}

.char-card.selected[b-j1wwqty588] {
    transform: translateY(-4px) scale(1.05);
}

.char-card-inner[b-j1wwqty588] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    position: relative;
    overflow: hidden;
}

.char-glow[b-j1wwqty588] {
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.char-card:hover .char-glow[b-j1wwqty588],
.char-card.selected .char-glow[b-j1wwqty588] {
    opacity: 0.12;
}

.char-icon[b-j1wwqty588] {
    font-size: 2.4rem;
    filter: drop-shadow(0 0 4px currentColor);
    transition: transform 0.2s;
}

.char-card:hover .char-icon[b-j1wwqty588] {
    transform: scale(1.1);
}

.char-name[b-j1wwqty588] {
    font-size: 0.5rem;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.4;
}

.char-role[b-j1wwqty588] {
    font-size: 0.5rem;
    opacity: 0.45;
    letter-spacing: 1px;
}

/* Lock overlay */
.char-lock[b-j1wwqty588] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.char-lock .lock-icon[b-j1wwqty588] {
    font-size: 1.4rem;
    opacity: 0.35;
    filter: grayscale(1);
}

/* Locked state */
.char-card.locked[b-j1wwqty588] {
    border-color: #2a2a3a !important;
    color: #3a3a4a !important;
}

.char-card.locked .char-card-inner[b-j1wwqty588] {
    filter: brightness(0.35) saturate(0);
}

.char-card.locked:hover[b-j1wwqty588] {
    transform: translateY(-2px);
}

/* ===== Rarity colors ===== */
.char-card.common.owned[b-j1wwqty588]    { border-color: #808080; color: #b0b0b0; }
.char-card.common .char-glow[b-j1wwqty588] { background: radial-gradient(circle, #808080, transparent 70%); }
.char-card.common.owned:hover[b-j1wwqty588],
.char-card.common.selected[b-j1wwqty588] { box-shadow: 0 4px 16px rgba(128,128,128,0.3); }

.char-card.uncommon.owned[b-j1wwqty588]    { border-color: #50c878; color: #50c878; }
.char-card.uncommon .char-glow[b-j1wwqty588] { background: radial-gradient(circle, #50c878, transparent 70%); }
.char-card.uncommon.owned:hover[b-j1wwqty588],
.char-card.uncommon.selected[b-j1wwqty588] { box-shadow: 0 4px 16px rgba(80,200,120,0.3); }

.char-card.rare.owned[b-j1wwqty588]    { border-color: #4488ff; color: #4488ff; }
.char-card.rare .char-glow[b-j1wwqty588] { background: radial-gradient(circle, #4488ff, transparent 70%); }
.char-card.rare.owned:hover[b-j1wwqty588],
.char-card.rare.selected[b-j1wwqty588] { box-shadow: 0 4px 16px rgba(68,136,255,0.3); }

.char-card.epic.owned[b-j1wwqty588]    { border-color: #b048ff; color: #b048ff; }
.char-card.epic .char-glow[b-j1wwqty588] { background: radial-gradient(circle, #b048ff, transparent 70%); }
.char-card.epic.owned:hover[b-j1wwqty588],
.char-card.epic.selected[b-j1wwqty588] { box-shadow: 0 4px 16px rgba(176,72,255,0.3); }

.char-card.legendary.owned[b-j1wwqty588]    { border-color: #ffd700; color: #ffd700; }
.char-card.legendary .char-glow[b-j1wwqty588] { background: radial-gradient(circle, #ffd700, transparent 70%); }
.char-card.legendary.owned:hover[b-j1wwqty588],
.char-card.legendary.selected[b-j1wwqty588] { box-shadow: 0 6px 24px rgba(255,215,0,0.4); }
.char-card.legendary.owned[b-j1wwqty588] { animation: legend-shimmer-b-j1wwqty588 2s ease-in-out infinite alternate; }

@keyframes legend-shimmer-b-j1wwqty588 {
    from { border-color: #ffd700; }
    to { border-color: #ffaa00; }
}

/* ===== Detail panel (right side) ===== */
.char-detail[b-j1wwqty588] {
    width: 320px;
    border-left: 3px solid #2a2a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

.detail-empty[b-j1wwqty588] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0.3;
}

.empty-icon[b-j1wwqty588] {
    font-size: 2rem;
    color: #534b6e;
}

.empty-text[b-j1wwqty588] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #534b6e;
    letter-spacing: 2px;
}

.detail-inner[b-j1wwqty588] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    animation: detail-fade-in-b-j1wwqty588 0.25s ease-out;
}

@keyframes detail-fade-in-b-j1wwqty588 {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

.detail-inner.detail-locked[b-j1wwqty588] {
    opacity: 0.55;
    filter: saturate(0.4);
}

/* Big icon */
.detail-icon-wrap[b-j1wwqty588] {
    width: 80px;
    height: 80px;
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    transform: rotate(45deg);
}

.detail-icon[b-j1wwqty588] {
    font-size: 2.4rem;
    transform: rotate(-45deg);
    filter: drop-shadow(0 0 8px currentColor);
}

.detail-name[b-j1wwqty588] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 4px;
}

.detail-rarity[b-j1wwqty588] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    opacity: 0.5;
    letter-spacing: 2px;
}

/* Stats */
.detail-stats[b-j1wwqty588] {
    display: flex;
    gap: 24px;
    padding: 10px 0;
    border-top: 2px solid rgba(255, 255, 255, 0.06);
    border-bottom: 2px solid rgba(255, 255, 255, 0.06);
    width: 100%;
    justify-content: center;
}

.stat[b-j1wwqty588] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-label[b-j1wwqty588] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    opacity: 0.4;
    letter-spacing: 2px;
}

.stat-value[b-j1wwqty588] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
}

/* Ability & lore sections */
.detail-section[b-j1wwqty588] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.section-label[b-j1wwqty588] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    opacity: 0.35;
    letter-spacing: 3px;
}

.ability-name[b-j1wwqty588] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    letter-spacing: 1px;
}

.ability-desc[b-j1wwqty588] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.48rem;
    opacity: 0.7;
    line-height: 1.8;
}

.ability-desc.hidden-desc[b-j1wwqty588],
.lore-text.hidden-desc[b-j1wwqty588] {
    opacity: 0.3;
    font-style: italic;
}

.lore-text[b-j1wwqty588] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    opacity: 0.5;
    line-height: 1.8;
    font-style: italic;
}

/* Select button */
.select-btn[b-j1wwqty588] {
    margin-top: 8px;
    width: 100%;
    padding: 12px;
    border: 3px solid #50c878;
    background: rgba(80, 200, 120, 0.1);
    color: #50c878;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.select-btn:hover[b-j1wwqty588] {
    background: rgba(80, 200, 120, 0.2);
    box-shadow: 0 0 12px rgba(80, 200, 120, 0.3);
}

.unlock-hint[b-j1wwqty588] {
    margin-top: 8px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.48rem;
    opacity: 0.35;
    letter-spacing: 1px;
    text-align: center;
}

/* Detail panel rarity colors */
.detail-inner.common[b-j1wwqty588]    { color: #b0b0b0; }
.detail-inner.common .detail-icon-wrap[b-j1wwqty588] { border-color: #808080; }
.detail-inner.uncommon[b-j1wwqty588]  { color: #50c878; }
.detail-inner.uncommon .detail-icon-wrap[b-j1wwqty588] { border-color: #50c878; }
.detail-inner.rare[b-j1wwqty588]      { color: #4488ff; }
.detail-inner.rare .detail-icon-wrap[b-j1wwqty588] { border-color: #4488ff; }
.detail-inner.epic[b-j1wwqty588]      { color: #b048ff; }
.detail-inner.epic .detail-icon-wrap[b-j1wwqty588] { border-color: #b048ff; }
.detail-inner.legendary[b-j1wwqty588] { color: #ffd700; }
.detail-inner.legendary .detail-icon-wrap[b-j1wwqty588] { border-color: #ffd700; }

/* Cosmic rarity */
.char-card.cosmic.owned[b-j1wwqty588] {
    border-color: #6633cc;
    color: #bb88ff;
    background: linear-gradient(135deg, rgba(30,10,60,0.4), rgba(0,0,0,0.4));
    animation: cosmic-char-b-j1wwqty588 3s ease-in-out infinite alternate;
}
.char-card.cosmic .char-glow[b-j1wwqty588] { background: radial-gradient(circle, #9955ff, transparent 70%); }
.char-card.cosmic.owned:hover[b-j1wwqty588], .char-card.cosmic.selected[b-j1wwqty588] { box-shadow: 0 6px 24px rgba(102,51,204,0.5); }

.detail-inner.cosmic[b-j1wwqty588] { color: #bb88ff; }
.detail-inner.cosmic .detail-icon-wrap[b-j1wwqty588] { border-color: #6633cc; }

@keyframes cosmic-char-b-j1wwqty588 {
    from { border-color: #6633cc; }
    to { border-color: #9955ff; }
}
/* /Pages/CharacterSelect.razor.rz.scp.css */
/* ===== Container ===== */
.charsel-container[b-t96hrj0gkk] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}

.charsel-canvas[b-t96hrj0gkk] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ===== Header ===== */
.charsel-header[b-t96hrj0gkk] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-bottom: 3px solid #2a2a4a;
}

.back-btn[b-t96hrj0gkk] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 2px solid #534b6e;
    border-radius: 4px;
    color: #c0b0d0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.back-btn:hover[b-t96hrj0gkk] { border-color: #ffd700; color: #ffd700; }
.back-arrow[b-t96hrj0gkk] { font-size: 0.8rem; }

.header-title[b-t96hrj0gkk] {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1rem;
    color: #e94560;
    text-shadow: 3px 3px 0 #8a1530;
    letter-spacing: 3px;
}

.header-spacer[b-t96hrj0gkk] { width: 90px; }

/* ===== Body ===== */
.charsel-body[b-t96hrj0gkk] {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* ===== Character grid ===== */
.charsel-grid[b-t96hrj0gkk] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    padding: 24px;
    overflow-y: auto;
    align-content: start;
}

.charsel-grid[b-t96hrj0gkk]::-webkit-scrollbar { width: 6px; }
.charsel-grid[b-t96hrj0gkk]::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.charsel-grid[b-t96hrj0gkk]::-webkit-scrollbar-thumb { background: #3a3a5a; }

/* Character card */
.charsel-card[b-t96hrj0gkk] {
    position: relative;
    aspect-ratio: 3 / 4;
    border: 3px solid;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    font-family: 'Press Start 2P', monospace;
    image-rendering: pixelated;
    overflow: hidden;
}

.charsel-card:hover[b-t96hrj0gkk] {
    transform: translateY(-6px) scale(1.05);
}

.charsel-card.selected[b-t96hrj0gkk] {
    transform: translateY(-6px) scale(1.08);
}

.csc-glow[b-t96hrj0gkk] {
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.charsel-card:hover .csc-glow[b-t96hrj0gkk],
.charsel-card.selected .csc-glow[b-t96hrj0gkk] {
    opacity: 0.15;
}

.csc-icon[b-t96hrj0gkk] {
    font-size: 2.8rem;
    filter: drop-shadow(0 0 6px currentColor);
    transition: transform 0.2s;
}

.charsel-card:hover .csc-icon[b-t96hrj0gkk] { transform: scale(1.1); }

.csc-name[b-t96hrj0gkk] {
    font-size: 0.55rem;
    text-align: center;
    letter-spacing: 1px;
}

.csc-role[b-t96hrj0gkk] {
    font-size: 0.55rem;
    opacity: 0.4;
    letter-spacing: 2px;
}

/* Rarity colors */
.charsel-card.common[b-t96hrj0gkk]    { border-color: #808080; color: #b0b0b0; }
.charsel-card.common .csc-glow[b-t96hrj0gkk] { background: radial-gradient(circle, #808080, transparent 70%); }
.charsel-card.common:hover[b-t96hrj0gkk], .charsel-card.common.selected[b-t96hrj0gkk] { box-shadow: 0 6px 20px rgba(128,128,128,0.3); }
.charsel-card.common.selected[b-t96hrj0gkk] { background: rgba(128,128,128,0.08); }

.charsel-card.uncommon[b-t96hrj0gkk]  { border-color: #50c878; color: #50c878; }
.charsel-card.uncommon .csc-glow[b-t96hrj0gkk] { background: radial-gradient(circle, #50c878, transparent 70%); }
.charsel-card.uncommon:hover[b-t96hrj0gkk], .charsel-card.uncommon.selected[b-t96hrj0gkk] { box-shadow: 0 6px 20px rgba(80,200,120,0.3); }
.charsel-card.uncommon.selected[b-t96hrj0gkk] { background: rgba(80,200,120,0.08); }

.charsel-card.rare[b-t96hrj0gkk]      { border-color: #4488ff; color: #4488ff; }
.charsel-card.rare .csc-glow[b-t96hrj0gkk] { background: radial-gradient(circle, #4488ff, transparent 70%); }
.charsel-card.rare:hover[b-t96hrj0gkk], .charsel-card.rare.selected[b-t96hrj0gkk] { box-shadow: 0 6px 20px rgba(68,136,255,0.3); }
.charsel-card.rare.selected[b-t96hrj0gkk] { background: rgba(68,136,255,0.08); }

.charsel-card.epic[b-t96hrj0gkk]      { border-color: #b048ff; color: #b048ff; }
.charsel-card.epic .csc-glow[b-t96hrj0gkk] { background: radial-gradient(circle, #b048ff, transparent 70%); }
.charsel-card.epic:hover[b-t96hrj0gkk], .charsel-card.epic.selected[b-t96hrj0gkk] { box-shadow: 0 6px 20px rgba(176,72,255,0.3); }
.charsel-card.epic.selected[b-t96hrj0gkk] { background: rgba(176,72,255,0.08); }

.charsel-card.legendary[b-t96hrj0gkk] { border-color: #ffd700; color: #ffd700; }
.charsel-card.legendary .csc-glow[b-t96hrj0gkk] { background: radial-gradient(circle, #ffd700, transparent 70%); }
.charsel-card.legendary:hover[b-t96hrj0gkk], .charsel-card.legendary.selected[b-t96hrj0gkk] { box-shadow: 0 6px 24px rgba(255,215,0,0.4); }
.charsel-card.legendary.selected[b-t96hrj0gkk] { background: rgba(255,215,0,0.08); }

/* ===== Detail panel ===== */
.charsel-detail[b-t96hrj0gkk] {
    width: 340px;
    border-left: 3px solid #2a2a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.detail-empty[b-t96hrj0gkk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0.3;
}

.empty-icon[b-t96hrj0gkk] { font-size: 2rem; color: #534b6e; }

.empty-text[b-t96hrj0gkk] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #534b6e;
    letter-spacing: 2px;
}

.detail-inner[b-t96hrj0gkk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    animation: det-fade-b-t96hrj0gkk 0.25s ease-out;
}

@keyframes det-fade-b-t96hrj0gkk {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

.det-icon-wrap[b-t96hrj0gkk] {
    width: 88px;
    height: 88px;
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    transform: rotate(45deg);
}

.det-icon[b-t96hrj0gkk] {
    font-size: 2.6rem;
    transform: rotate(-45deg);
    filter: drop-shadow(0 0 10px currentColor);
}

.det-name[b-t96hrj0gkk] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.85rem;
    letter-spacing: 2px;
}

.det-rarity[b-t96hrj0gkk] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.48rem;
    opacity: 0.45;
    letter-spacing: 2px;
}

.det-stats[b-t96hrj0gkk] {
    display: flex;
    gap: 28px;
    padding: 12px 0;
    border-top: 2px solid rgba(255,255,255,0.06);
    border-bottom: 2px solid rgba(255,255,255,0.06);
    width: 100%;
    justify-content: center;
}

.det-stat[b-t96hrj0gkk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ds-label[b-t96hrj0gkk] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    opacity: 0.4;
    letter-spacing: 2px;
}

.ds-value[b-t96hrj0gkk] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
}

.det-ability[b-t96hrj0gkk] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.da-label[b-t96hrj0gkk] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    opacity: 0.35;
    letter-spacing: 3px;
}

.da-name[b-t96hrj0gkk] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    letter-spacing: 1px;
}

.da-desc[b-t96hrj0gkk] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    opacity: 0.65;
    line-height: 1.8;
}

.det-lore[b-t96hrj0gkk] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    opacity: 0.4;
    line-height: 1.8;
    font-style: italic;
    text-align: center;
    padding: 8px 0;
    border-top: 2px solid rgba(255,255,255,0.04);
    width: 100%;
}

/* Rarity colors for detail */
.detail-inner.common[b-t96hrj0gkk]    { color: #b0b0b0; }
.detail-inner.common .det-icon-wrap[b-t96hrj0gkk] { border-color: #808080; }
.detail-inner.uncommon[b-t96hrj0gkk]  { color: #50c878; }
.detail-inner.uncommon .det-icon-wrap[b-t96hrj0gkk] { border-color: #50c878; }
.detail-inner.rare[b-t96hrj0gkk]      { color: #4488ff; }
.detail-inner.rare .det-icon-wrap[b-t96hrj0gkk] { border-color: #4488ff; }
.detail-inner.epic[b-t96hrj0gkk]      { color: #b048ff; }
.detail-inner.epic .det-icon-wrap[b-t96hrj0gkk] { border-color: #b048ff; }
.detail-inner.legendary[b-t96hrj0gkk] { color: #ffd700; }
.detail-inner.legendary .det-icon-wrap[b-t96hrj0gkk] { border-color: #ffd700; }

/* ===== Fight button ===== */
.fight-btn[b-t96hrj0gkk] {
    width: 100%;
    padding: 16px;
    border: 3px solid #e94560;
    background: rgba(233, 69, 96, 0.1);
    color: #e94560;
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    letter-spacing: 5px;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 8px;
}

.fight-btn:hover[b-t96hrj0gkk] {
    background: rgba(233, 69, 96, 0.25);
    box-shadow: 0 0 24px rgba(233, 69, 96, 0.4);
    transform: scale(1.04);
}

/* Cosmic rarity */
.charsel-card.cosmic[b-t96hrj0gkk] { border-color: #6633cc; color: #bb88ff; }
.charsel-card.cosmic .csc-glow[b-t96hrj0gkk] { background: radial-gradient(circle, #9955ff, transparent 70%); }
.charsel-card.cosmic:hover[b-t96hrj0gkk], .charsel-card.cosmic.selected[b-t96hrj0gkk] { box-shadow: 0 6px 24px rgba(102,51,204,0.5); }
.charsel-card.cosmic.selected[b-t96hrj0gkk] { background: rgba(102,51,204,0.1); }
.detail-inner.cosmic[b-t96hrj0gkk] { color: #bb88ff; }
.detail-inner.cosmic .det-icon-wrap[b-t96hrj0gkk] { border-color: #6633cc; }

/* ===== Rarity animations (Epic / Legendary / Cosmic) ===== */

/* --- Inner content z-index --- */
.charsel-card.epic > *[b-t96hrj0gkk],
.charsel-card.legendary > *[b-t96hrj0gkk],
.charsel-card.cosmic > *[b-t96hrj0gkk] {
    position: relative;
    z-index: 1;
}

/* --- Epic --- */
.charsel-card.epic[b-t96hrj0gkk] {
    overflow: hidden;
    animation: epic-pulse-b-t96hrj0gkk 2s ease-in-out infinite alternate;
}
.charsel-card.epic[b-t96hrj0gkk]::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(transparent, rgba(176, 72, 255, 0.07), transparent, rgba(176, 72, 255, 0.05), transparent);
    animation: epic-spin-b-t96hrj0gkk 4s linear infinite;
    pointer-events: none; z-index: 0;
}
.charsel-card.epic[b-t96hrj0gkk]::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(176, 72, 255, 0.12), transparent);
    animation: epic-sweep-b-t96hrj0gkk 2.5s ease-in-out infinite;
    pointer-events: none; z-index: 0;
}

/* --- Legendary --- */
.charsel-card.legendary[b-t96hrj0gkk] {
    overflow: hidden;
    animation: legendary-blaze-b-t96hrj0gkk 2s ease-in-out infinite alternate;
}
.charsel-card.legendary[b-t96hrj0gkk]::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, #ffd700, #ff8c00, #ffd700, #ffec80, #ffd700, #ff8c00);
    background-size: 300% 300%;
    animation: legendary-border-b-t96hrj0gkk 3s ease infinite;
    z-index: -1; border-radius: 4px;
}
.charsel-card.legendary[b-t96hrj0gkk]::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: legendary-shine-b-t96hrj0gkk 3s ease-in-out infinite;
    pointer-events: none; z-index: 2;
}

/* --- Cosmic --- */
.charsel-card.cosmic[b-t96hrj0gkk] {
    border-color: transparent;
    overflow: hidden;
    animation: cosmic-breathe-b-t96hrj0gkk 3s ease-in-out infinite alternate;
}
.charsel-card.cosmic[b-t96hrj0gkk]::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(#ff0080, #ff8c00, #ffd700, #50c878, #4488ff, #b048ff, #ff0080);
    animation: cosmic-rotate-b-t96hrj0gkk 3s linear infinite;
    z-index: -1;
}
.charsel-card.cosmic[b-t96hrj0gkk]::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 60% 10%, #fff, transparent),
        radial-gradient(1px 1px at 80% 60%, #fff, transparent),
        radial-gradient(1px 1px at 40% 80%, #fff, transparent),
        radial-gradient(1px 1px at 10% 70%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 70% 40%, #bb88ff, transparent),
        radial-gradient(1.5px 1.5px at 30% 50%, #53d8fb, transparent);
    animation: cosmic-sparkle-b-t96hrj0gkk 2s ease-in-out infinite alternate;
    pointer-events: none; z-index: 2;
}

/* --- Keyframes --- */
@keyframes epic-pulse-b-t96hrj0gkk {
    from { box-shadow: 0 0 8px rgba(176, 72, 255, 0.15), inset 0 0 15px rgba(176, 72, 255, 0.05); }
    to   { box-shadow: 0 0 20px rgba(176, 72, 255, 0.3), inset 0 0 25px rgba(176, 72, 255, 0.05); }
}
@keyframes epic-spin-b-t96hrj0gkk {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes epic-sweep-b-t96hrj0gkk {
    0%, 100% { left: -100%; }
    50%      { left: 150%; }
}
@keyframes legendary-blaze-b-t96hrj0gkk {
    from { box-shadow: 0 0 15px rgba(255, 215, 0, 0.25), 0 0 30px rgba(255, 140, 0, 0.1); }
    to   { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4), 0 0 50px rgba(255, 140, 0, 0.2), 0 0 80px rgba(255, 215, 0, 0.08); }
}
@keyframes legendary-border-b-t96hrj0gkk {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes legendary-shine-b-t96hrj0gkk {
    0%, 100% { left: -120%; opacity: 0; }
    10%      { opacity: 1; }
    60%      { left: 150%; opacity: 1; }
    70%      { opacity: 0; }
}
@keyframes cosmic-rotate-b-t96hrj0gkk {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes cosmic-breathe-b-t96hrj0gkk {
    from { box-shadow: 0 0 15px rgba(153, 85, 255, 0.2), 0 0 40px rgba(102, 51, 204, 0.1); }
    to   { box-shadow: 0 0 30px rgba(153, 85, 255, 0.35), 0 0 60px rgba(102, 51, 204, 0.2), 0 0 100px rgba(80, 0, 200, 0.08); }
}
@keyframes cosmic-sparkle-b-t96hrj0gkk {
    from { opacity: 0.3; }
    to   { opacity: 1; }
}
/* /Pages/Collection.razor.rz.scp.css */
/* ===== Container ===== */
.collection-container[b-itg3qo175g] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}

.collection-canvas[b-itg3qo175g] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ===== Header ===== */
.collection-header[b-itg3qo175g] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-bottom: 3px solid #2a2a4a;
}

.back-btn[b-itg3qo175g] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 2px solid #534b6e;
    border-radius: 4px;
    color: #c0b0d0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.back-btn:hover[b-itg3qo175g] {
    border-color: #ffd700;
    color: #ffd700;
}

.back-arrow[b-itg3qo175g] {
    font-size: 0.8rem;
}

.header-title[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.4rem;
    color: #53d8fb;
    text-shadow: 3px 3px 0 #1a6a8a;
    letter-spacing: 4px;
}

.collection-count[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    display: flex;
    gap: 4px;
}

.count-owned[b-itg3qo175g] {
    color: #50c878;
}

.count-sep[b-itg3qo175g] {
    color: #534b6e;
}

.count-total[b-itg3qo175g] {
    color: #808080;
}

/* ===== View mode tabs ===== */
.view-tabs[b-itg3qo175g] {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 0 32px;
}

.view-tab[b-itg3qo175g] {
    flex: 1;
    max-width: 240px;
    padding: 12px 20px;
    border: 2px solid #2a2a4a;
    border-bottom: none;
    background: rgba(0, 0, 0, 0.2);
    color: #5a5a7a;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.view-tab:hover[b-itg3qo175g] {
    color: #8a8aaa;
    background: rgba(0, 0, 0, 0.3);
}

.view-tab.active[b-itg3qo175g] {
    color: #53d8fb;
    border-color: #53d8fb;
    background: rgba(83, 216, 251, 0.06);
    border-bottom: 2px solid transparent;
}

.view-tab-icon[b-itg3qo175g] {
    font-size: 0.8rem;
}

/* ===== Filter bar ===== */
.filter-bar[b-itg3qo175g] {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    border-bottom: 2px solid #1e1e3a;
    flex-wrap: wrap;
}

.filter-tab[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    padding: 6px 14px;
    border: 2px solid #3a3a5a;
    background: rgba(0, 0, 0, 0.3);
    color: #6a6a8a;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 1px;
}

.filter-tab:hover[b-itg3qo175g] {
    border-color: #8a8aaa;
    color: #c0c0d0;
}

.filter-tab.active[b-itg3qo175g] {
    border-color: #ffd700;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
}

.filter-tab.common.active[b-itg3qo175g]   { border-color: #808080; color: #b0b0b0; background: rgba(128,128,128,0.08); }
.filter-tab.uncommon.active[b-itg3qo175g] { border-color: #50c878; color: #50c878; background: rgba(80,200,120,0.08); }
.filter-tab.rare.active[b-itg3qo175g]     { border-color: #4488ff; color: #4488ff; background: rgba(68,136,255,0.08); }
.filter-tab.epic.active[b-itg3qo175g]     { border-color: #b048ff; color: #b048ff; background: rgba(176,72,255,0.08); }
.filter-tab.legendary.active[b-itg3qo175g] { border-color: #ffd700; color: #ffd700; background: rgba(255,215,0,0.08); }

/* ===== Card grid ===== */
.card-grid[b-itg3qo175g] {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    padding: 20px 32px;
    flex: 1;
    overflow-y: auto;
    align-content: start;
}

/* Scrollbar styling */
.card-grid[b-itg3qo175g]::-webkit-scrollbar {
    width: 6px;
}

.card-grid[b-itg3qo175g]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.card-grid[b-itg3qo175g]::-webkit-scrollbar-thumb {
    background: #3a3a5a;
    border-radius: 0;
}

/* ===== Individual card ===== */
.col-card[b-itg3qo175g] {
    position: relative;
    width: 100%;
    aspect-ratio: 2.5 / 3.5;
    border: 3px solid;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    image-rendering: pixelated;
    overflow: visible;
    margin-bottom: 16px;
}

.col-card.owned:hover[b-itg3qo175g] {
    transform: translateY(-6px) scale(1.06);
    z-index: 10;
}

.col-card-inner[b-itg3qo175g] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    position: relative;
}

/* Mana cost badge */
.col-mana[b-itg3qo175g] {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 22px;
    height: 22px;
    border: 2px solid #53d8fb;
    background: rgba(0, 0, 30, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #53d8fb;
}

/* Card art symbol */
.col-art[b-itg3qo175g] {
    font-size: 2.2rem;
    filter: drop-shadow(0 0 4px currentColor);
    margin-top: 8px;
}

/* Card name */
.col-name[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    text-align: center;
    letter-spacing: 1px;
    margin-top: auto;
    line-height: 1.4;
}

/* Type badge */
.col-type[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    opacity: 0.5;
    letter-spacing: 1px;
    margin-top: 2px;
}

/* Rarity gem */
.col-gem[b-itg3qo175g] {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    position: absolute;
    bottom: 5px;
    right: 5px;
}

/* ===== Locked card overlay ===== */
.col-card.locked[b-itg3qo175g] {
    border-color: #2a2a3a !important;
    color: #3a3a4a !important;
}

.col-card.locked .col-card-inner[b-itg3qo175g] {
    filter: brightness(0.3) saturate(0);
}

.col-card.locked:hover[b-itg3qo175g] {
    transform: none;
    cursor: default;
}

.lock-overlay[b-itg3qo175g] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
}

.lock-icon[b-itg3qo175g] {
    font-size: 1.6rem;
    opacity: 0.4;
    filter: grayscale(1);
}

/* ===== Rarity colors (owned) ===== */
.col-card.common.owned[b-itg3qo175g] {
    border-color: #808080;
    color: #b0b0b0;
}
.col-card.common .col-gem[b-itg3qo175g] { background: #808080; }
.col-card.common.owned:hover[b-itg3qo175g] { box-shadow: 0 6px 18px rgba(128,128,128,0.3); }

.col-card.uncommon.owned[b-itg3qo175g] {
    border-color: #50c878;
    color: #50c878;
}
.col-card.uncommon .col-gem[b-itg3qo175g] { background: #50c878; }
.col-card.uncommon.owned:hover[b-itg3qo175g] { box-shadow: 0 6px 18px rgba(80,200,120,0.3); }

.col-card.rare.owned[b-itg3qo175g] {
    border-color: #4488ff;
    color: #4488ff;
}
.col-card.rare .col-gem[b-itg3qo175g] { background: #4488ff; }
.col-card.rare.owned:hover[b-itg3qo175g] { box-shadow: 0 6px 18px rgba(68,136,255,0.3); }

.col-card.epic.owned[b-itg3qo175g] {
    border-color: #b048ff;
    color: #b048ff;
}
.col-card.epic .col-gem[b-itg3qo175g] { background: #b048ff; }
.col-card.epic.owned:hover[b-itg3qo175g] { box-shadow: 0 6px 18px rgba(176,72,255,0.3); }

.col-card.legendary.owned[b-itg3qo175g] {
    border-color: #ffd700;
    color: #ffd700;
}
.col-card.legendary .col-gem[b-itg3qo175g] { background: #ffd700; }
.col-card.legendary.owned:hover[b-itg3qo175g] { box-shadow: 0 6px 24px rgba(255,215,0,0.4); }

@keyframes legendary-card-shimmer-b-itg3qo175g {
    from { border-color: #ffd700; }
    to { border-color: #ffaa00; }
}

/* ===== Tooltip ===== */
.card-tooltip[b-itg3qo175g] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 420px;
    border: 3px solid;
    background: rgba(10, 10, 30, 0.95);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: tooltip-slide-up-b-itg3qo175g 0.2s ease-out;
    image-rendering: pixelated;
}

@keyframes tooltip-slide-up-b-itg3qo175g {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.tooltip-header[b-itg3qo175g] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tooltip-mana[b-itg3qo175g] {
    width: 28px;
    height: 28px;
    border: 2px solid #53d8fb;
    background: rgba(0, 0, 30, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: #53d8fb;
    flex-shrink: 0;
}

.tooltip-name[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    letter-spacing: 2px;
    flex: 1;
}

.tooltip-rarity[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    opacity: 0.6;
    letter-spacing: 1px;
}

.tooltip-art[b-itg3qo175g] {
    font-size: 2.4rem;
    text-align: center;
    filter: drop-shadow(0 0 6px currentColor);
    padding: 4px 0;
}

.tooltip-type[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    text-align: center;
    opacity: 0.5;
    letter-spacing: 2px;
}

.tooltip-divider[b-itg3qo175g] {
    height: 2px;
    background: currentColor;
    opacity: 0.2;
}

.tooltip-desc[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    line-height: 1.8;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

.tooltip-desc.locked-desc[b-itg3qo175g] {
    opacity: 0.4;
    font-style: italic;
}

/* Tooltip rarity colors */
.card-tooltip.common[b-itg3qo175g]   { border-color: #808080; color: #b0b0b0; }
.card-tooltip.uncommon[b-itg3qo175g] { border-color: #50c878; color: #50c878; }
.card-tooltip.rare[b-itg3qo175g]     { border-color: #4488ff; color: #4488ff; }
.card-tooltip.epic[b-itg3qo175g]     { border-color: #b048ff; color: #b048ff; }
.card-tooltip.legendary[b-itg3qo175g] { border-color: #ffd700; color: #ffd700; }

.card-tooltip.locked-tooltip[b-itg3qo175g] {
    border-color: #3a3a5a;
    color: #5a5a7a;
}

/* ===== Character grid ===== */
.char-grid[b-itg3qo175g] {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    padding: 20px 32px;
    flex: 1;
    overflow-y: auto;
    align-content: start;
}

.char-grid[b-itg3qo175g]::-webkit-scrollbar {
    width: 6px;
}

.char-grid[b-itg3qo175g]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.char-grid[b-itg3qo175g]::-webkit-scrollbar-thumb {
    background: #3a3a5a;
}

.col-char[b-itg3qo175g] {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border: 3px solid;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    image-rendering: pixelated;
    overflow: visible;
    margin-bottom: 16px;
}

.col-char.owned:hover[b-itg3qo175g] {
    transform: translateY(-6px) scale(1.06);
    z-index: 10;
}

.col-char-inner[b-itg3qo175g] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    position: relative;
}

.col-char-icon[b-itg3qo175g] {
    font-size: 2.4rem;
    filter: drop-shadow(0 0 4px currentColor);
}

.col-char-name[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.48rem;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.4;
}

.col-char-role[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    opacity: 0.45;
    letter-spacing: 1px;
}

/* Locked character */
.col-char.locked[b-itg3qo175g] {
    border-color: #2a2a3a !important;
    color: #3a3a4a !important;
}

.col-char.locked .col-char-inner[b-itg3qo175g] {
    filter: brightness(0.3) saturate(0);
}

.col-char.locked:hover[b-itg3qo175g] {
    transform: none;
    cursor: default;
}

/* Character rarity colors */
.col-char.common.owned[b-itg3qo175g]    { border-color: #808080; color: #b0b0b0; }
.col-char.common.owned:hover[b-itg3qo175g] { box-shadow: 0 6px 18px rgba(128,128,128,0.3); }

.col-char.uncommon.owned[b-itg3qo175g]  { border-color: #50c878; color: #50c878; }
.col-char.uncommon.owned:hover[b-itg3qo175g] { box-shadow: 0 6px 18px rgba(80,200,120,0.3); }

.col-char.rare.owned[b-itg3qo175g]      { border-color: #4488ff; color: #4488ff; }
.col-char.rare.owned:hover[b-itg3qo175g] { box-shadow: 0 6px 18px rgba(68,136,255,0.3); }

.col-char.epic.owned[b-itg3qo175g]      { border-color: #b048ff; color: #b048ff; }
.col-char.epic.owned:hover[b-itg3qo175g] { box-shadow: 0 6px 18px rgba(176,72,255,0.3); }

.col-char.legendary.owned[b-itg3qo175g] { border-color: #ffd700; color: #ffd700; }
.col-char.legendary.owned:hover[b-itg3qo175g] { box-shadow: 0 6px 24px rgba(255,215,0,0.4); }

/* Character tooltip extras */
.tooltip-mana-hp[b-itg3qo175g] {
    padding: 4px 10px;
    border: 2px solid #e94560;
    background: rgba(233, 69, 96, 0.15);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #e94560;
    flex-shrink: 0;
}

.tooltip-ability-name[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    letter-spacing: 1px;
    opacity: 0.9;
}

/* Cosmic rarity */
.col-card.cosmic.owned[b-itg3qo175g] {
    border-color: #6633cc;
    color: #bb88ff;
    background: linear-gradient(135deg, rgba(30,10,60,0.5), rgba(0,0,0,0.5));
}
.col-card.cosmic .col-gem[b-itg3qo175g] { background: #9955ff; }
.col-card.cosmic.owned:hover[b-itg3qo175g] { box-shadow: 0 6px 24px rgba(102,51,204,0.5); }

.col-char.cosmic.owned[b-itg3qo175g] {
    border-color: #6633cc;
    color: #bb88ff;
    background: linear-gradient(135deg, rgba(30,10,60,0.5), rgba(0,0,0,0.5));
}
.col-char.cosmic.owned:hover[b-itg3qo175g] { box-shadow: 0 6px 24px rgba(102,51,204,0.5); }

.card-tooltip.cosmic[b-itg3qo175g] { border-color: #6633cc; color: #bb88ff; }

@keyframes cosmic-shimmer-b-itg3qo175g {
    from { border-color: #6633cc; box-shadow: inset 0 0 10px rgba(102,51,204,0.1); }
    to { border-color: #9955ff; box-shadow: inset 0 0 20px rgba(153,85,255,0.15); }
}
.filter-tab.cosmic.active[b-itg3qo175g] { border-color: #6633cc; color: #bb88ff; background: rgba(102,51,204,0.08); }

/* ===== Rarity animations (Epic / Legendary / Cosmic) ===== */

/* --- Inner content z-index --- */
.col-card.epic.owned .col-card-inner[b-itg3qo175g],
.col-card.legendary.owned .col-card-inner[b-itg3qo175g],
.col-card.cosmic.owned .col-card-inner[b-itg3qo175g],
.col-char.epic.owned .col-char-inner[b-itg3qo175g],
.col-char.legendary.owned .col-char-inner[b-itg3qo175g],
.col-char.cosmic.owned .col-char-inner[b-itg3qo175g] {
    position: relative;
    z-index: 1;
}

/* --- Epic card --- */
.col-card.epic.owned[b-itg3qo175g] {
    overflow: hidden;
    animation: epic-pulse-b-itg3qo175g 2s ease-in-out infinite alternate;
}
.col-card.epic.owned[b-itg3qo175g]::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(transparent, rgba(176, 72, 255, 0.07), transparent, rgba(176, 72, 255, 0.05), transparent);
    animation: epic-spin-b-itg3qo175g 4s linear infinite;
    pointer-events: none; z-index: 0;
}
.col-card.epic.owned[b-itg3qo175g]::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(176, 72, 255, 0.12), transparent);
    animation: epic-sweep-b-itg3qo175g 2.5s ease-in-out infinite;
    pointer-events: none; z-index: 0;
}

/* --- Epic character --- */
.col-char.epic.owned[b-itg3qo175g] {
    overflow: hidden;
    animation: epic-pulse-b-itg3qo175g 2s ease-in-out infinite alternate;
}
.col-char.epic.owned[b-itg3qo175g]::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(transparent, rgba(176, 72, 255, 0.07), transparent, rgba(176, 72, 255, 0.05), transparent);
    animation: epic-spin-b-itg3qo175g 4s linear infinite;
    pointer-events: none; z-index: 0;
}
.col-char.epic.owned[b-itg3qo175g]::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(176, 72, 255, 0.12), transparent);
    animation: epic-sweep-b-itg3qo175g 2.5s ease-in-out infinite;
    pointer-events: none; z-index: 0;
}

/* --- Legendary card --- */
.col-card.legendary.owned[b-itg3qo175g] {
    overflow: hidden;
    animation: legendary-blaze-b-itg3qo175g 2s ease-in-out infinite alternate;
}
.col-card.legendary.owned[b-itg3qo175g]::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, #ffd700, #ff8c00, #ffd700, #ffec80, #ffd700, #ff8c00);
    background-size: 300% 300%;
    animation: legendary-border-b-itg3qo175g 3s ease infinite;
    z-index: -1; border-radius: 4px;
}
.col-card.legendary.owned[b-itg3qo175g]::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: legendary-shine-b-itg3qo175g 3s ease-in-out infinite;
    pointer-events: none; z-index: 2;
}

/* --- Legendary character --- */
.col-char.legendary.owned[b-itg3qo175g] {
    overflow: hidden;
    animation: legendary-blaze-b-itg3qo175g 2s ease-in-out infinite alternate;
}
.col-char.legendary.owned[b-itg3qo175g]::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, #ffd700, #ff8c00, #ffd700, #ffec80, #ffd700, #ff8c00);
    background-size: 300% 300%;
    animation: legendary-border-b-itg3qo175g 3s ease infinite;
    z-index: -1; border-radius: 4px;
}
.col-char.legendary.owned[b-itg3qo175g]::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: legendary-shine-b-itg3qo175g 3s ease-in-out infinite;
    pointer-events: none; z-index: 2;
}

/* --- Cosmic card --- */
.col-card.cosmic.owned[b-itg3qo175g] {
    border-color: transparent;
    overflow: hidden;
    animation: cosmic-breathe-b-itg3qo175g 3s ease-in-out infinite alternate;
}
.col-card.cosmic.owned[b-itg3qo175g]::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(#ff0080, #ff8c00, #ffd700, #50c878, #4488ff, #b048ff, #ff0080);
    animation: cosmic-rotate-b-itg3qo175g 3s linear infinite;
    z-index: -1;
}
.col-card.cosmic.owned[b-itg3qo175g]::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 60% 10%, #fff, transparent),
        radial-gradient(1px 1px at 80% 60%, #fff, transparent),
        radial-gradient(1px 1px at 40% 80%, #fff, transparent),
        radial-gradient(1px 1px at 10% 70%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 70% 40%, #bb88ff, transparent),
        radial-gradient(1.5px 1.5px at 30% 50%, #53d8fb, transparent);
    animation: cosmic-sparkle-b-itg3qo175g 2s ease-in-out infinite alternate;
    pointer-events: none; z-index: 2;
}

/* --- Cosmic character --- */
.col-char.cosmic.owned[b-itg3qo175g] {
    border-color: transparent;
    overflow: hidden;
    animation: cosmic-breathe-b-itg3qo175g 3s ease-in-out infinite alternate;
}
.col-char.cosmic.owned[b-itg3qo175g]::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(#ff0080, #ff8c00, #ffd700, #50c878, #4488ff, #b048ff, #ff0080);
    animation: cosmic-rotate-b-itg3qo175g 3s linear infinite;
    z-index: -1;
}
.col-char.cosmic.owned[b-itg3qo175g]::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 60% 10%, #fff, transparent),
        radial-gradient(1px 1px at 80% 60%, #fff, transparent),
        radial-gradient(1px 1px at 40% 80%, #fff, transparent),
        radial-gradient(1px 1px at 10% 70%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 70% 40%, #bb88ff, transparent),
        radial-gradient(1.5px 1.5px at 30% 50%, #53d8fb, transparent);
    animation: cosmic-sparkle-b-itg3qo175g 2s ease-in-out infinite alternate;
    pointer-events: none; z-index: 2;
}

/* --- Keyframes --- */
@keyframes epic-pulse-b-itg3qo175g {
    from { box-shadow: 0 0 8px rgba(176, 72, 255, 0.15), inset 0 0 15px rgba(176, 72, 255, 0.05); }
    to   { box-shadow: 0 0 20px rgba(176, 72, 255, 0.3), inset 0 0 25px rgba(176, 72, 255, 0.05); }
}
@keyframes epic-spin-b-itg3qo175g {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes epic-sweep-b-itg3qo175g {
    0%, 100% { left: -100%; }
    50%      { left: 150%; }
}
@keyframes legendary-blaze-b-itg3qo175g {
    from { box-shadow: 0 0 15px rgba(255, 215, 0, 0.25), 0 0 30px rgba(255, 140, 0, 0.1); }
    to   { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4), 0 0 50px rgba(255, 140, 0, 0.2), 0 0 80px rgba(255, 215, 0, 0.08); }
}
@keyframes legendary-border-b-itg3qo175g {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes legendary-shine-b-itg3qo175g {
    0%, 100% { left: -120%; opacity: 0; }
    10%      { opacity: 1; }
    60%      { left: 150%; opacity: 1; }
    70%      { opacity: 0; }
}
@keyframes cosmic-rotate-b-itg3qo175g {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes cosmic-breathe-b-itg3qo175g {
    from { box-shadow: 0 0 15px rgba(153, 85, 255, 0.2), 0 0 40px rgba(102, 51, 204, 0.1); }
    to   { box-shadow: 0 0 30px rgba(153, 85, 255, 0.35), 0 0 60px rgba(102, 51, 204, 0.2), 0 0 100px rgba(80, 0, 200, 0.08); }
}
@keyframes cosmic-sparkle-b-itg3qo175g {
    from { opacity: 0.3; }
    to   { opacity: 1; }
}

/* ===== Level & Duplicate badges ===== */
.col-level[b-itg3qo175g] {
    position: absolute;
    top: 4px;
    right: 4px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.48rem;
    color: #ffd700;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 5px;
    border: 1px solid #ffd700;
}

.col-dupes[b-itg3qo175g] {
    position: absolute;
    bottom: 4px;
    left: 4px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #53d8fb;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 5px;
    border: 1px solid #53d8fb;
}

/* ===== Tooltip upgrade section ===== */
.tooltip-level[b-itg3qo175g] {
    display: flex;
    justify-content: space-between;
    font-size: 0.5rem;
    opacity: 0.7;
}

.tooltip-upgrade[b-itg3qo175g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.upgrade-cost[b-itg3qo175g] {
    font-size: 0.5rem;
    opacity: 0.5;
}

.upgrade-btn[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    padding: 6px 16px;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 2px;
}

.upgrade-btn.can-upgrade[b-itg3qo175g] {
    border-color: #50c878;
    color: #50c878;
    background: rgba(80, 200, 120, 0.1);
}

.upgrade-btn.can-upgrade:hover[b-itg3qo175g] {
    background: rgba(80, 200, 120, 0.25);
    box-shadow: 0 0 10px rgba(80, 200, 120, 0.3);
}

.upgrade-btn.no-upgrade[b-itg3qo175g] {
    border-color: #3a3a5a;
    color: #3a3a5a;
    background: rgba(0, 0, 0, 0.2);
    cursor: not-allowed;
}

.tooltip-maxed[b-itg3qo175g] {
    font-size: 0.55rem;
    color: #ffd700;
    text-align: center;
    letter-spacing: 3px;
    padding: 4px 0;
}

/* ===== Progress on card (e.g. 1/10) ===== */
.col-progress[b-itg3qo175g] {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.48rem;
    color: #53d8fb;
    background: rgba(0, 0, 0, 0.85);
    padding: 2px 6px;
    border: 1px solid #2a4a6a;
    z-index: 2;
    white-space: nowrap;
}

/* ===== Upgrade badge ===== */
.upgrade-badge[b-itg3qo175g] {
    position: absolute;
    top: -10px;
    right: -6px;
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #50c878;
    background: rgba(0, 0, 0, 0.9);
    padding: 3px 6px;
    border: 2px solid #50c878;
    border-radius: 2px;
    z-index: 5;
    animation: upgrade-pulse-b-itg3qo175g 1.2s ease-in-out infinite alternate;
    white-space: nowrap;
}

@keyframes upgrade-pulse-b-itg3qo175g {
    from { box-shadow: 0 0 4px rgba(80, 200, 120, 0.3); opacity: 0.8; }
    to   { box-shadow: 0 0 12px rgba(80, 200, 120, 0.6); opacity: 1; }
}

.col-card.can-upgrade[b-itg3qo175g],
.col-char.can-upgrade[b-itg3qo175g] {
    box-shadow: 0 0 10px rgba(80, 200, 120, 0.2);
}

/* ===== Detail overlay ===== */
.detail-overlay[b-itg3qo175g] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modal-in-b-itg3qo175g 0.25s ease-out;
}

@keyframes modal-in-b-itg3qo175g {
    from { opacity: 0; }
    to { opacity: 1; }
}

.detail-modal[b-itg3qo175g] {
    display: flex;
    gap: 24px;
    padding: 28px 32px;
    border: 3px solid;
    background: rgba(10, 10, 30, 0.97);
    max-width: 650px;
    width: 90%;
    position: relative;
    animation: modal-pop-b-itg3qo175g 0.2s ease-out;
}

@keyframes modal-pop-b-itg3qo175g {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.detail-modal.common[b-itg3qo175g]    { border-color: #808080; color: #b0b0b0; }
.detail-modal.uncommon[b-itg3qo175g]  { border-color: #50c878; color: #50c878; }
.detail-modal.rare[b-itg3qo175g]      { border-color: #4488ff; color: #4488ff; }
.detail-modal.epic[b-itg3qo175g]      { border-color: #b048ff; color: #b048ff; }
.detail-modal.legendary[b-itg3qo175g] { border-color: #ffd700; color: #ffd700; }
.detail-modal.cosmic[b-itg3qo175g]    { border-color: #6633cc; color: #bb88ff; }

.detail-close[b-itg3qo175g] {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: #5a5a7a;
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.15s;
}

.detail-close:hover[b-itg3qo175g] { color: #e94560; }

/* Card preview (left side of modal) */
.detail-card-preview[b-itg3qo175g] {
    width: 150px;
    min-height: 200px;
    border: 3px solid;
    border-color: inherit;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    flex-shrink: 0;
}

.dcp-cost[b-itg3qo175g] {
    width: 28px;
    height: 28px;
    border: 2px solid #53d8fb;
    background: rgba(0, 0, 30, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: #53d8fb;
}

.dcp-art[b-itg3qo175g] { font-size: 2.5rem; filter: drop-shadow(0 0 6px currentColor); }
.dcp-name[b-itg3qo175g] { font-family: 'Press Start 2P', monospace; font-size: 0.5rem; text-align: center; letter-spacing: 1px; }
.dcp-rarity[b-itg3qo175g] { font-family: 'Press Start 2P', monospace; font-size: 0.48rem; opacity: 0.5; letter-spacing: 1px; }
.dcp-hp[b-itg3qo175g] { font-family: 'Press Start 2P', monospace; font-size: 0.55rem; color: #50c878; }

/* Info (right side of modal) */
.detail-info[b-itg3qo175g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.di-section-title[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #ffd700;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.08);
    padding-bottom: 4px;
}

.di-desc[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    opacity: 0.75;
    line-height: 1.8;
}

.di-level-row[b-itg3qo175g] {
    display: flex;
    justify-content: space-between;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
}

.di-lvl[b-itg3qo175g] { color: #ffd700; }
.di-dupes[b-itg3qo175g] { color: #53d8fb; }

.di-progress-bar[b-itg3qo175g] {
    height: 10px;
    border: 2px solid #3a3a5a;
    background: rgba(0, 0, 0, 0.4);
}

.di-progress-fill[b-itg3qo175g] {
    height: 100%;
    background: linear-gradient(90deg, #53d8fb, #50c878);
    transition: width 0.3s;
}

/* Upgrade preview */
.di-upgrade-preview[b-itg3qo175g] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.di-preview-row[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.48rem;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-left: 2px solid #5a5a7a;
}

.di-preview-row.next[b-itg3qo175g] {
    border-left-color: #50c878;
    color: #50c878;
}

.di-current[b-itg3qo175g] { opacity: 0.5; }
.di-next[b-itg3qo175g] { opacity: 0.9; }

/* Upgrade button */
.di-upgrade-btn[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    padding: 10px 20px;
    border: 3px solid;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 2px;
    text-align: center;
    width: 100%;
    margin-top: 4px;
}

.di-upgrade-btn.can[b-itg3qo175g] {
    border-color: #50c878;
    color: #50c878;
    background: rgba(80, 200, 120, 0.1);
}

.di-upgrade-btn.can:hover[b-itg3qo175g] {
    background: rgba(80, 200, 120, 0.25);
    box-shadow: 0 0 14px rgba(80, 200, 120, 0.3);
    transform: scale(1.02);
}

.di-upgrade-btn.cant[b-itg3qo175g] {
    border-color: #3a3a5a;
    color: #5a5a7a;
    background: rgba(0, 0, 0, 0.2);
    cursor: not-allowed;
}

.di-maxed[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #ffd700;
    text-align: center;
    letter-spacing: 3px;
    padding: 10px 0;
    border: 2px solid rgba(255, 215, 0, 0.2);
    background: rgba(255, 215, 0, 0.05);
}

.di-locked[b-itg3qo175g] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    opacity: 0.4;
    text-align: center;
    padding: 20px 0;
}
/* /Pages/DeckChars.razor.rz.scp.css */
.deckchars-container[b-gm7nd8r5fm] { position:relative; width:100vw; height:100vh; overflow:hidden; display:flex; flex-direction:column; background:linear-gradient(170deg,#1a1a2e 0%,#16213e 40%,#0f3460 100%); }
.deckchars-canvas[b-gm7nd8r5fm] { position:absolute; inset:0; z-index:0; pointer-events:none; }

.deckchars-header[b-gm7nd8r5fm] { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:16px 32px; border-bottom:3px solid #2a2a4a; }
.back-btn[b-gm7nd8r5fm] { display:flex; align-items:center; gap:8px; background:none; border:2px solid #534b6e; border-radius:4px; color:#c0b0d0; font-family:'Press Start 2P',monospace; font-size:0.65rem; padding:8px 16px; cursor:pointer; transition:all 0.15s; }
.back-btn:hover[b-gm7nd8r5fm] { border-color:#ffd700; color:#ffd700; }
.back-arrow[b-gm7nd8r5fm] { font-size:0.8rem; }
.header-title[b-gm7nd8r5fm] { font-family:'Press Start 2P',monospace; font-size:1.1rem; color:#e94560; text-shadow:3px 3px 0 #8a1530; letter-spacing:3px; }
.slot-counter[b-gm7nd8r5fm] { font-family:'Press Start 2P',monospace; font-size:0.8rem; display:flex; gap:2px; }
.slots-used[b-gm7nd8r5fm] { color:#50c878; }
.slots-sep[b-gm7nd8r5fm] { color:#534b6e; }

.deckchars-sub[b-gm7nd8r5fm] { position:relative; z-index:5; text-align:center; padding:10px 32px; font-family:'Press Start 2P',monospace; font-size:0.5rem; color:#8a8aaa; letter-spacing:1px; line-height:1.8; }

.deckchars-body[b-gm7nd8r5fm] { position:relative; z-index:5; flex:1; display:flex; overflow:hidden; }

/* Character grid */
.dc-grid[b-gm7nd8r5fm] { flex:1; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; padding:16px 20px; overflow-y:auto; align-content:start; }
.dc-grid[b-gm7nd8r5fm]::-webkit-scrollbar { width:6px; }
.dc-grid[b-gm7nd8r5fm]::-webkit-scrollbar-thumb { background:#3a3a5a; }

.dc-card[b-gm7nd8r5fm] { position:relative; aspect-ratio:3/4; border:3px solid; background:rgba(0,0,0,0.4); cursor:pointer; transition:all 0.2s; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:10px; font-family:'Press Start 2P',monospace; }
.dc-card:hover:not(:disabled)[b-gm7nd8r5fm] { transform:translateY(-4px) scale(1.04); }
.dc-card:disabled[b-gm7nd8r5fm] { opacity:0.3; cursor:not-allowed; }
.dc-card.picked[b-gm7nd8r5fm] { border-color:#50c878 !important; background:rgba(80,200,120,0.1); }

.dc-icon[b-gm7nd8r5fm] { font-size:2rem; }
.dc-name[b-gm7nd8r5fm] { font-size:0.5rem; text-align:center; letter-spacing:1px; }
.dc-role[b-gm7nd8r5fm] { font-size:0.48rem; opacity:0.4; }
.dc-stats[b-gm7nd8r5fm] { font-size:0.48rem; opacity:0.5; }
.dc-check[b-gm7nd8r5fm] { position:absolute; top:6px; right:6px; color:#50c878; font-size:0.8rem; }

.dc-card.common[b-gm7nd8r5fm] { border-color:#808080; color:#b0b0b0; }
.dc-card.uncommon[b-gm7nd8r5fm] { border-color:#50c878; color:#50c878; }
.dc-card.rare[b-gm7nd8r5fm] { border-color:#4488ff; color:#4488ff; }
.dc-card.epic[b-gm7nd8r5fm] { border-color:#b048ff; color:#b048ff; }
.dc-card.legendary[b-gm7nd8r5fm] { border-color:#ffd700; color:#ffd700; }
.dc-card.cosmic[b-gm7nd8r5fm] { border-color:#6633cc; color:#bb88ff; }

/* ===== Rarity animations (Epic / Legendary / Cosmic) ===== */

/* --- Inner content z-index --- */
.dc-card.epic > *[b-gm7nd8r5fm],
.dc-card.legendary > *[b-gm7nd8r5fm],
.dc-card.cosmic > *[b-gm7nd8r5fm] {
    position: relative;
    z-index: 1;
}

/* --- Epic --- */
.dc-card.epic[b-gm7nd8r5fm] {
    overflow: hidden;
    animation: epic-pulse-b-gm7nd8r5fm 2s ease-in-out infinite alternate;
}
.dc-card.epic[b-gm7nd8r5fm]::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(transparent, rgba(176, 72, 255, 0.07), transparent, rgba(176, 72, 255, 0.05), transparent);
    animation: epic-spin-b-gm7nd8r5fm 4s linear infinite;
    pointer-events: none; z-index: 0;
}
.dc-card.epic[b-gm7nd8r5fm]::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(176, 72, 255, 0.12), transparent);
    animation: epic-sweep-b-gm7nd8r5fm 2.5s ease-in-out infinite;
    pointer-events: none; z-index: 0;
}

/* --- Legendary --- */
.dc-card.legendary[b-gm7nd8r5fm] {
    overflow: hidden;
    animation: legendary-blaze-b-gm7nd8r5fm 2s ease-in-out infinite alternate;
}
.dc-card.legendary[b-gm7nd8r5fm]::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, #ffd700, #ff8c00, #ffd700, #ffec80, #ffd700, #ff8c00);
    background-size: 300% 300%;
    animation: legendary-border-b-gm7nd8r5fm 3s ease infinite;
    z-index: -1; border-radius: 4px;
}
.dc-card.legendary[b-gm7nd8r5fm]::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: legendary-shine-b-gm7nd8r5fm 3s ease-in-out infinite;
    pointer-events: none; z-index: 2;
}

/* --- Cosmic --- */
.dc-card.cosmic[b-gm7nd8r5fm] {
    border-color: transparent;
    overflow: hidden;
    animation: cosmic-breathe-b-gm7nd8r5fm 3s ease-in-out infinite alternate;
}
.dc-card.cosmic[b-gm7nd8r5fm]::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(#ff0080, #ff8c00, #ffd700, #50c878, #4488ff, #b048ff, #ff0080);
    animation: cosmic-rotate-b-gm7nd8r5fm 3s linear infinite;
    z-index: -1;
}
.dc-card.cosmic[b-gm7nd8r5fm]::after {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 60% 10%, #fff, transparent),
        radial-gradient(1px 1px at 80% 60%, #fff, transparent),
        radial-gradient(1px 1px at 40% 80%, #fff, transparent),
        radial-gradient(1px 1px at 10% 70%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 70% 40%, #bb88ff, transparent),
        radial-gradient(1.5px 1.5px at 30% 50%, #53d8fb, transparent);
    animation: cosmic-sparkle-b-gm7nd8r5fm 2s ease-in-out infinite alternate;
    pointer-events: none; z-index: 2;
}

/* --- Keyframes --- */
@keyframes epic-pulse-b-gm7nd8r5fm {
    from { box-shadow: 0 0 8px rgba(176, 72, 255, 0.15), inset 0 0 15px rgba(176, 72, 255, 0.05); }
    to   { box-shadow: 0 0 20px rgba(176, 72, 255, 0.3), inset 0 0 25px rgba(176, 72, 255, 0.05); }
}
@keyframes epic-spin-b-gm7nd8r5fm {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes epic-sweep-b-gm7nd8r5fm {
    0%, 100% { left: -100%; }
    50%      { left: 150%; }
}
@keyframes legendary-blaze-b-gm7nd8r5fm {
    from { box-shadow: 0 0 15px rgba(255, 215, 0, 0.25), 0 0 30px rgba(255, 140, 0, 0.1); }
    to   { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4), 0 0 50px rgba(255, 140, 0, 0.2), 0 0 80px rgba(255, 215, 0, 0.08); }
}
@keyframes legendary-border-b-gm7nd8r5fm {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes legendary-shine-b-gm7nd8r5fm {
    0%, 100% { left: -120%; opacity: 0; }
    10%      { opacity: 1; }
    60%      { left: 150%; opacity: 1; }
    70%      { opacity: 0; }
}
@keyframes cosmic-rotate-b-gm7nd8r5fm {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes cosmic-breathe-b-gm7nd8r5fm {
    from { box-shadow: 0 0 15px rgba(153, 85, 255, 0.2), 0 0 40px rgba(102, 51, 204, 0.1); }
    to   { box-shadow: 0 0 30px rgba(153, 85, 255, 0.35), 0 0 60px rgba(102, 51, 204, 0.2), 0 0 100px rgba(80, 0, 200, 0.08); }
}
@keyframes cosmic-sparkle-b-gm7nd8r5fm {
    from { opacity: 0.3; }
    to   { opacity: 1; }
}

/* Right panel */
.dc-panel[b-gm7nd8r5fm] { width:300px; border-left:3px solid #2a2a4a; padding:16px 20px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
.dc-panel[b-gm7nd8r5fm]::-webkit-scrollbar { width:6px; }
.dc-panel[b-gm7nd8r5fm]::-webkit-scrollbar-thumb { background:#3a3a5a; }

.dc-panel-title[b-gm7nd8r5fm] { font-family:'Press Start 2P',monospace; font-size:0.5rem; color:#e94560; letter-spacing:2px; }

.dc-selected-list[b-gm7nd8r5fm] { display:flex; flex-direction:column; gap:6px; }

.dc-selected-row[b-gm7nd8r5fm] { display:flex; align-items:center; gap:8px; padding:8px 10px; border:2px solid; background:rgba(0,0,0,0.3); font-family:'Press Start 2P',monospace; }
.dc-selected-row.empty[b-gm7nd8r5fm] { border:2px dashed #2a2a3a; justify-content:center; }
.dc-empty-text[b-gm7nd8r5fm] { font-size:0.48rem; color:#2a2a4a; }

.dc-sel-icon[b-gm7nd8r5fm] { font-size:1rem; }
.dc-sel-name[b-gm7nd8r5fm] { font-size:0.5rem; flex:1; }
.dc-sel-stats[b-gm7nd8r5fm] { font-size:0.48rem; opacity:0.5; }
.dc-sel-remove[b-gm7nd8r5fm] { background:none; border:1px solid #e94560; color:#e94560; font-size:0.5rem; cursor:pointer; padding:2px 6px; font-family:'Press Start 2P',monospace; transition:all 0.15s; }
.dc-sel-remove:hover[b-gm7nd8r5fm] { background:rgba(233,69,96,0.2); }

.dc-selected-row.common[b-gm7nd8r5fm] { border-color:#606070; color:#b0b0b0; }
.dc-selected-row.uncommon[b-gm7nd8r5fm] { border-color:#3a6a4a; color:#50c878; }
.dc-selected-row.rare[b-gm7nd8r5fm] { border-color:#3a4a7a; color:#4488ff; }
.dc-selected-row.epic[b-gm7nd8r5fm] { border-color:#5a3a7a; color:#b048ff; }
.dc-selected-row.legendary[b-gm7nd8r5fm] { border-color:#6a5a1a; color:#ffd700; }
.dc-selected-row.cosmic[b-gm7nd8r5fm] { border-color:#4a2a6a; color:#bb88ff; }

.dc-info[b-gm7nd8r5fm] { font-family:'Press Start 2P',monospace; font-size:0.48rem; color:#5a5a7a; line-height:1.8; padding:8px 0; border-top:2px solid #1e1e3a; }

/* Detail on click */
.dc-detail[b-gm7nd8r5fm] { display:flex; flex-direction:column; gap:4px; padding:10px; border:2px solid #3a3a5a; background:rgba(0,0,0,0.3); }
.dc-detail-name[b-gm7nd8r5fm] { font-family:'Press Start 2P',monospace; font-size:0.5rem; color:#ffd700; }
.dc-detail-rarity[b-gm7nd8r5fm] { font-family:'Press Start 2P',monospace; font-size:0.48rem; opacity:0.5; }
.dc-detail-stats[b-gm7nd8r5fm] { font-family:'Press Start 2P',monospace; font-size:0.5rem; color:#50c878; }
.dc-detail-passive[b-gm7nd8r5fm] { font-family:'Press Start 2P',monospace; font-size:0.48rem; color:#bb88ff; line-height:1.7; }
.dc-detail-ability[b-gm7nd8r5fm] { font-family:'Press Start 2P',monospace; font-size:0.48rem; color:#c0c0d0; line-height:1.7; opacity:0.8; }

.continue-btn[b-gm7nd8r5fm] { display:flex; align-items:center; justify-content:center; gap:14px; padding:14px 24px; border:3px solid #ffd700; background:rgba(255,215,0,0.08); color:#ffd700; font-family:'Press Start 2P',monospace; font-size:0.6rem; letter-spacing:2px; cursor:pointer; transition:all 0.15s; margin-top:auto; }
.continue-btn:hover[b-gm7nd8r5fm] { background:rgba(255,215,0,0.18); box-shadow:0 0 20px rgba(255,215,0,0.3); transform:scale(1.03); }
.continue-btn .btn-arrow[b-gm7nd8r5fm] { font-size:0.6rem; }
/* /Pages/DeckSelect.razor.rz.scp.css */
/* ===== Container ===== */
.decksel-container[b-5wuk4b2xvx] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}

.decksel-canvas[b-5wuk4b2xvx] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ===== Header ===== */
.decksel-header[b-5wuk4b2xvx] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-bottom: 3px solid #2a2a4a;
}

.back-btn[b-5wuk4b2xvx] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 2px solid #534b6e;
    border-radius: 4px;
    color: #c0b0d0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.back-btn:hover[b-5wuk4b2xvx] { border-color: #ffd700; color: #ffd700; }
.back-arrow[b-5wuk4b2xvx] { font-size: 0.8rem; }

.header-title[b-5wuk4b2xvx] {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1rem;
    color: #ffd700;
    text-shadow: 3px 3px 0 #b8860b;
    letter-spacing: 3px;
}

.header-spacer[b-5wuk4b2xvx] { width: 90px; }

/* ===== Deck grid ===== */
.deck-grid[b-5wuk4b2xvx] {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    padding: 32px;
}

.deck-slot[b-5wuk4b2xvx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* ===== Deck stack (button) ===== */
.deck-stack[b-5wuk4b2xvx] {
    position: relative;
    width: 180px;
    height: 250px;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.25s ease;
    padding: 0;
    font-family: 'Press Start 2P', monospace;
}

.deck-stack:hover[b-5wuk4b2xvx] {
    transform: translateY(-12px);
}

.deck-stack.selected[b-5wuk4b2xvx] {
    transform: translateY(-12px) scale(1.06);
}

/* ===== Stacked card backs ===== */
.stack-card[b-5wuk4b2xvx] {
    position: absolute;
    width: 180px;
    height: 250px;
    border: 3px solid;
    background: linear-gradient(135deg, rgba(20,20,40,0.9), rgba(10,10,25,0.95));
}

/* Card back crosshatch pattern */
.stack-card[b-5wuk4b2xvx]::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 2px solid;
    opacity: 0.12;
    background: repeating-linear-gradient(
        45deg, transparent, transparent 5px,
        currentColor 5px, currentColor 6px
    );
}

.stack-card.s5[b-5wuk4b2xvx] { top: 0; left: 0; }
.stack-card.s4[b-5wuk4b2xvx] { top: 4px; left: 3px; }
.stack-card.s3[b-5wuk4b2xvx] { top: 8px; left: 6px; }
.stack-card.s2[b-5wuk4b2xvx] { top: 12px; left: 9px; }

/* ===== Top card face ===== */
.stack-face[b-5wuk4b2xvx] {
    position: absolute;
    top: 16px;
    left: 12px;
    width: 180px;
    height: 250px;
    border: 3px solid;
    background: linear-gradient(180deg, rgba(10,10,30,0.95) 0%, rgba(5,5,20,0.98) 100%);
    z-index: 4;
    transition: box-shadow 0.25s;
}

.deck-stack:hover .stack-face[b-5wuk4b2xvx] {
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

.deck-stack.selected .stack-face[b-5wuk4b2xvx] {
    box-shadow: 0 0 24px rgba(255,215,0,0.3);
    border-color: #ffd700 !important;
}

.face-border[b-5wuk4b2xvx] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 12px;
    position: relative;
}

/* Corner accents */
.face-corner[b-5wuk4b2xvx] {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 3px solid;
    opacity: 0.5;
}

.face-corner.tl[b-5wuk4b2xvx] { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.face-corner.tr[b-5wuk4b2xvx] { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.face-corner.bl[b-5wuk4b2xvx] { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.face-corner.br[b-5wuk4b2xvx] { bottom: 8px; right: 8px; border-left: none; border-top: none; }

/* Center emblem */
.face-emblem[b-5wuk4b2xvx] {
    font-size: 3.5rem;
    filter: drop-shadow(0 0 10px currentColor);
    margin-bottom: 4px;
}

/* Name plate */
.face-nameplate[b-5wuk4b2xvx] {
    position: relative;
    width: 90%;
    padding: 8px 4px;
    text-align: center;
}

.nameplate-bg[b-5wuk4b2xvx] {
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0.08;
    border-top: 2px solid;
    border-bottom: 2px solid;
}

.face-name[b-5wuk4b2xvx] {
    position: relative;
    z-index: 2;
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
}

/* Archetype */
.face-archetype[b-5wuk4b2xvx] {
    font-size: 0.5rem;
    opacity: 0.4;
    letter-spacing: 3px;
}

/* Card count */
.face-count[b-5wuk4b2xvx] {
    font-size: 0.5rem;
    opacity: 0.3;
    letter-spacing: 2px;
    margin-top: auto;
}

/* ===== Deck description ===== */
.deck-label[b-5wuk4b2xvx] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #6a6a8a;
    text-align: center;
    max-width: 200px;
    line-height: 1.8;
    letter-spacing: 0.5px;
    margin-top: 12px;
}

/* ===== Archetype colors ===== */
.deck-stack.aggro[b-5wuk4b2xvx] { color: #e94560; }
.deck-stack.aggro .stack-card[b-5wuk4b2xvx] { border-color: #5a2232; }
.deck-stack.aggro .stack-card[b-5wuk4b2xvx]::after { border-color: #e94560; }
.deck-stack.aggro .stack-face[b-5wuk4b2xvx] { border-color: #e94560; }
.deck-stack.aggro .face-corner[b-5wuk4b2xvx] { border-color: #e94560; }
.deck-stack.aggro:hover .stack-face[b-5wuk4b2xvx] { box-shadow: 0 8px 30px rgba(233,69,96,0.25); }

.deck-stack.control[b-5wuk4b2xvx] { color: #53d8fb; }
.deck-stack.control .stack-card[b-5wuk4b2xvx] { border-color: #1a3a5a; }
.deck-stack.control .stack-card[b-5wuk4b2xvx]::after { border-color: #53d8fb; }
.deck-stack.control .stack-face[b-5wuk4b2xvx] { border-color: #53d8fb; }
.deck-stack.control .face-corner[b-5wuk4b2xvx] { border-color: #53d8fb; }
.deck-stack.control:hover .stack-face[b-5wuk4b2xvx] { box-shadow: 0 8px 30px rgba(83,216,251,0.25); }

.deck-stack.tank[b-5wuk4b2xvx] { color: #c0c0c0; }
.deck-stack.tank .stack-card[b-5wuk4b2xvx] { border-color: #3a3a4a; }
.deck-stack.tank .stack-card[b-5wuk4b2xvx]::after { border-color: #c0c0c0; }
.deck-stack.tank .stack-face[b-5wuk4b2xvx] { border-color: #c0c0c0; }
.deck-stack.tank .face-corner[b-5wuk4b2xvx] { border-color: #c0c0c0; }
.deck-stack.tank:hover .stack-face[b-5wuk4b2xvx] { box-shadow: 0 8px 30px rgba(192,192,192,0.25); }

.deck-stack.support[b-5wuk4b2xvx] { color: #50c878; }
.deck-stack.support .stack-card[b-5wuk4b2xvx] { border-color: #1a3a2a; }
.deck-stack.support .stack-card[b-5wuk4b2xvx]::after { border-color: #50c878; }
.deck-stack.support .stack-face[b-5wuk4b2xvx] { border-color: #50c878; }
.deck-stack.support .face-corner[b-5wuk4b2xvx] { border-color: #50c878; }
.deck-stack.support:hover .stack-face[b-5wuk4b2xvx] { box-shadow: 0 8px 30px rgba(80,200,120,0.25); }

/* ===== Hover tooltip (card list) ===== */
.deck-tooltip[b-5wuk4b2xvx] {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 440px;
    border: 3px solid #53d8fb;
    background: rgba(8, 8, 25, 0.96);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: tt-in-b-5wuk4b2xvx 0.2s ease-out;
    font-family: 'Press Start 2P', monospace;
    pointer-events: none;
}
.deck-tooltip.aggro[b-5wuk4b2xvx]   { border-color: #e94560; }
.deck-tooltip.control[b-5wuk4b2xvx] { border-color: #53d8fb; }
.deck-tooltip.tank[b-5wuk4b2xvx]    { border-color: #c0c0c0; }
.deck-tooltip.support[b-5wuk4b2xvx] { border-color: #50c878; }

@keyframes tt-in-b-5wuk4b2xvx {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.tt-header[b-5wuk4b2xvx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tt-icon[b-5wuk4b2xvx] { font-size: 1.4rem; }

.tt-name[b-5wuk4b2xvx] {
    font-size: 0.7rem;
    color: inherit;
    letter-spacing: 2px;
}

.tt-divider[b-5wuk4b2xvx] {
    height: 2px;
    background: linear-gradient(90deg, currentColor, transparent);
    opacity: 0.3;
}
.deck-tooltip.aggro[b-5wuk4b2xvx]   { color: #e94560; }
.deck-tooltip.control[b-5wuk4b2xvx] { color: #53d8fb; }
.deck-tooltip.tank[b-5wuk4b2xvx]    { color: #c0c0c0; }
.deck-tooltip.support[b-5wuk4b2xvx] { color: #50c878; }

.tt-list[b-5wuk4b2xvx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tt-row[b-5wuk4b2xvx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border-left: 3px solid;
    background: rgba(0,0,0,0.25);
}

.tt-mana[b-5wuk4b2xvx] {
    width: 20px;
    height: 20px;
    border: 2px solid #53d8fb;
    background: rgba(0,0,30,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    color: #53d8fb;
    flex-shrink: 0;
}

.tt-card-name[b-5wuk4b2xvx] {
    font-size: 0.55rem;
    flex: 1;
    opacity: 0.8;
}

.tt-card-type[b-5wuk4b2xvx] {
    font-size: 0.5rem;
    opacity: 0.4;
}

/* Row rarity */
.tt-row.common[b-5wuk4b2xvx]    { border-color: #808080; color: #b0b0b0; }
.tt-row.uncommon[b-5wuk4b2xvx]  { border-color: #50c878; color: #50c878; }
.tt-row.rare[b-5wuk4b2xvx]      { border-color: #4488ff; color: #4488ff; }
.tt-row.epic[b-5wuk4b2xvx]      { border-color: #b048ff; color: #b048ff; }
.tt-row.legendary[b-5wuk4b2xvx] { border-color: #ffd700; color: #ffd700; }

/* ===== Bottom bar ===== */
.bottom-bar[b-5wuk4b2xvx] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-top: 3px solid #2a2a4a;
    background: rgba(0, 0, 0, 0.3);
    animation: bar-slide-up-b-5wuk4b2xvx 0.25s ease-out;
}

@keyframes bar-slide-up-b-5wuk4b2xvx {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.selected-label[b-5wuk4b2xvx] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: #8a8aaa;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.selected-dot[b-5wuk4b2xvx] {
    width: 8px;
    height: 8px;
    background: #ffd700;
    animation: dot-pulse-b-5wuk4b2xvx 1s ease-in-out infinite alternate;
}

@keyframes dot-pulse-b-5wuk4b2xvx {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

.continue-btn[b-5wuk4b2xvx] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 36px;
    border: 3px solid #ffd700;
    background: rgba(255, 215, 0, 0.08);
    color: #ffd700;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.continue-btn:hover[b-5wuk4b2xvx] {
    background: rgba(255, 215, 0, 0.18);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    transform: scale(1.04);
}

.continue-btn .btn-arrow[b-5wuk4b2xvx] { font-size: 0.7rem; }
/* /Pages/FreeBuild.razor.rz.scp.css */
/* ===== Container ===== */
.fb-container[b-ltmqpezjlq] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}

.fb-canvas[b-ltmqpezjlq] {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ===== Header ===== */
.fb-header[b-ltmqpezjlq] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-bottom: 3px solid #2a2a4a;
}

.back-btn[b-ltmqpezjlq] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 2px solid #534b6e;
    border-radius: 4px;
    color: #c0b0d0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.back-btn:hover[b-ltmqpezjlq] { border-color: #ffd700; color: #ffd700; }
.back-arrow[b-ltmqpezjlq] { font-size: 0.8rem; }

.header-title[b-ltmqpezjlq] {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1rem;
    color: #53d8fb;
    text-shadow: 3px 3px 0 #1a6a8a;
    letter-spacing: 3px;
}

.header-spacer[b-ltmqpezjlq] { width: 100px; }

/* ===== Tabs ===== */
.tab-bar[b-ltmqpezjlq] {
    position: relative; z-index: 5; display: flex; justify-content: center; gap: 0; padding: 0 32px;
}
.tab-btn[b-ltmqpezjlq] {
    flex: 1; max-width: 220px; padding: 10px 16px; border: 2px solid #2a2a4a; border-bottom: none;
    background: rgba(0,0,0,0.2); color: #5a5a7a; font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem; letter-spacing: 2px; cursor: pointer; transition: all 0.15s;
}
.tab-btn:hover[b-ltmqpezjlq] { color: #8a8aaa; background: rgba(0,0,0,0.3); }
.tab-btn.active[b-ltmqpezjlq] { color: #53d8fb; border-color: #53d8fb; background: rgba(83,216,251,0.06); }

/* ===== Body layout ===== */
.fb-body[b-ltmqpezjlq] {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* ===== Pool panel (left) ===== */
.pool-panel[b-ltmqpezjlq] { flex: 1; display: flex; flex-direction: column; padding: 12px 16px; border-right: 3px solid #2a2a4a; }
.panel-label[b-ltmqpezjlq] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem; color: #8a8aaa; letter-spacing: 3px; margin-bottom: 12px; text-align: center;
}
.pool-scroll[b-ltmqpezjlq] { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.pool-scroll[b-ltmqpezjlq]::-webkit-scrollbar { width: 6px; }
.pool-scroll[b-ltmqpezjlq]::-webkit-scrollbar-thumb { background: #3a3a5a; }

.pool-row[b-ltmqpezjlq] {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid;
    background: rgba(0,0,0,0.3); cursor: pointer; transition: all 0.15s;
    font-family: 'Press Start 2P', monospace; position: relative;
}
.pool-row:hover:not(:disabled)[b-ltmqpezjlq] { background: rgba(0,0,0,0.5); transform: translateX(3px); }
.pool-row:disabled[b-ltmqpezjlq] { opacity: 0.3; cursor: not-allowed; }
.pool-row.picked[b-ltmqpezjlq] { background: rgba(80,200,120,0.1); border-color: #50c878 !important; }

.pr-cost[b-ltmqpezjlq] { width: 18px; height: 18px; border: 2px solid #53d8fb; background: rgba(0,0,30,0.5); display: flex; align-items: center; justify-content: center; font-size: 0.5rem; color: #53d8fb; flex-shrink: 0; }
.pr-art[b-ltmqpezjlq] { font-size: 0.9rem; flex-shrink: 0; }
.pr-name[b-ltmqpezjlq] { font-size: 0.5rem; flex: 1; }
.pr-type[b-ltmqpezjlq] { font-size: 0.48rem; opacity: 0.4; }
.pr-hp[b-ltmqpezjlq] { font-size: 0.48rem; color: #50c878; }
.pr-tag[b-ltmqpezjlq] { font-size: 0.55rem; opacity: 0.5; background: rgba(0,0,0,0.3); padding: 2px 6px; }
.pr-check[b-ltmqpezjlq] { color: #50c878; font-size: 0.6rem; flex-shrink: 0; }

.pool-row.common[b-ltmqpezjlq] { border-color: #505060; color: #b0b0b0; }
.pool-row.uncommon[b-ltmqpezjlq] { border-color: #2a5a3a; color: #50c878; }
.pool-row.rare[b-ltmqpezjlq] { border-color: #2a3a6a; color: #4488ff; }
.pool-row.epic[b-ltmqpezjlq] { border-color: #4a2a6a; color: #b048ff; }
.pool-row.legendary[b-ltmqpezjlq] { border-color: #5a4a1a; color: #ffd700; }
.pool-row.cosmic[b-ltmqpezjlq] { border-color: #4a2a6a; color: #bb88ff; }

/* ===== Deck panel (right) ===== */
.deck-panel[b-ltmqpezjlq] {
    width: 320px; display: flex; flex-direction: column; padding: 16px 20px; gap: 8px; overflow-y: auto;
}
.deck-panel[b-ltmqpezjlq]::-webkit-scrollbar { width: 6px; }
.deck-panel[b-ltmqpezjlq]::-webkit-scrollbar-thumb { background: #3a3a5a; }

.deck-list[b-ltmqpezjlq] { display: flex; flex-direction: column; gap: 4px; }

.deck-row[b-ltmqpezjlq] {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-left: 2px solid;
    background: rgba(0,0,0,0.2); font-family: 'Press Start 2P', monospace;
}
.deck-row.added[b-ltmqpezjlq] { background: rgba(80,200,120,0.06); border-left-color: #50c878; }
.deck-row.empty-slot[b-ltmqpezjlq] { border-left-color: #2a2a3a; border: 2px dashed #2a2a3a; justify-content: center; }

.dr-mana[b-ltmqpezjlq] { font-size: 0.55rem; color: #53d8fb; width: 14px; text-align: center; }
.dr-name[b-ltmqpezjlq] { font-size: 0.55rem; flex: 1; opacity: 0.7; }
.dr-remove[b-ltmqpezjlq] {
    background: none; border: 1px solid #e94560; color: #e94560; font-size: 0.55rem;
    cursor: pointer; padding: 2px 6px; font-family: 'Press Start 2P', monospace; transition: all 0.15s;
}
.dr-remove:hover[b-ltmqpezjlq] { background: rgba(233,69,96,0.2); }

.empty-text[b-ltmqpezjlq] { font-size: 0.5rem; color: #2a2a4a; letter-spacing: 2px; }

.deck-row.common[b-ltmqpezjlq] { border-left-color: #808080; color: #b0b0b0; }
.deck-row.uncommon[b-ltmqpezjlq] { border-left-color: #50c878; color: #50c878; }
.deck-row.rare[b-ltmqpezjlq] { border-left-color: #4488ff; color: #4488ff; }
.deck-row.epic[b-ltmqpezjlq] { border-left-color: #b048ff; color: #b048ff; }
.deck-row.legendary[b-ltmqpezjlq] { border-left-color: #ffd700; color: #ffd700; }
.deck-row.cosmic[b-ltmqpezjlq] { border-left-color: #bb88ff; color: #bb88ff; }

.deck-total[b-ltmqpezjlq] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem; color: #5a5a7a; text-align: center; margin-top: 8px; letter-spacing: 1px;
}

/* ===== Hero detail ===== */
.fb-hero-detail[b-ltmqpezjlq] {
    display: flex; flex-direction: column; gap: 8px; padding: 16px 0;
    font-family: 'Press Start 2P', monospace;
}
.fb-hero-icon[b-ltmqpezjlq] { font-size: 2.5rem; text-align: center; }
.fb-hero-name[b-ltmqpezjlq] { font-size: 0.7rem; color: #ffd700; text-align: center; letter-spacing: 2px; }
.fb-hero-rarity[b-ltmqpezjlq] { font-size: 0.55rem; text-align: center; opacity: 0.6; }
.fb-hero-stats[b-ltmqpezjlq] { font-size: 0.55rem; color: #50c878; text-align: center; }
.fb-hero-passive[b-ltmqpezjlq], .fb-hero-ability[b-ltmqpezjlq] {
    font-size: 0.5rem; color: #c0b0d0; line-height: 1.6; padding: 4px 0;
}
.da-label[b-ltmqpezjlq] {
    font-size: 0.55rem; color: #53d8fb; letter-spacing: 2px; margin-right: 6px;
}

.fb-hero-rarity.common[b-ltmqpezjlq] { color: #b0b0b0; }
.fb-hero-rarity.uncommon[b-ltmqpezjlq] { color: #50c878; }
.fb-hero-rarity.rare[b-ltmqpezjlq] { color: #4488ff; }
.fb-hero-rarity.epic[b-ltmqpezjlq] { color: #b048ff; }
.fb-hero-rarity.legendary[b-ltmqpezjlq] { color: #ffd700; }
.fb-hero-rarity.cosmic[b-ltmqpezjlq] { color: #bb88ff; }

/* ===== Detail empty state ===== */
.detail-empty[b-ltmqpezjlq] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; flex: 1; opacity: 0.3;
    font-family: 'Press Start 2P', monospace;
}
.empty-icon[b-ltmqpezjlq] { font-size: 2rem; }

/* ===== Info text ===== */
.dc-info[b-ltmqpezjlq] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem; color: #5a5a7a; line-height: 1.8; padding: 8px 0;
}

/* ===== Continue button ===== */
.continue-btn[b-ltmqpezjlq] {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 14px 24px; border: 3px solid #ffd700; background: rgba(255,215,0,0.08);
    color: #ffd700; font-family: 'Press Start 2P', monospace; font-size: 0.6rem;
    letter-spacing: 2px; cursor: pointer; transition: all 0.15s; margin-top: auto;
}
.continue-btn:hover:not(:disabled)[b-ltmqpezjlq] {
    background: rgba(255,215,0,0.18); box-shadow: 0 0 20px rgba(255,215,0,0.3); transform: scale(1.03);
}
.continue-btn:disabled[b-ltmqpezjlq] { opacity: 0.3; cursor: not-allowed; }
.continue-btn .btn-arrow[b-ltmqpezjlq] { font-size: 0.6rem; }
/* /Pages/Home.razor.rz.scp.css */
/* ===== Container ===== */
.splash-container[b-33qmejavmh] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(170deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}

.splash-canvas[b-33qmejavmh] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ===== Settings gear (top-right) ===== */
.settings-btn[b-33qmejavmh] {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10;
    background: none;
    border: 3px solid #534b6e;
    border-radius: 4px;
    width: 52px;
    height: 52px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, transform 0.2s;
    padding: 0;
}

.settings-btn:hover[b-33qmejavmh] {
    border-color: #ffd700;
    transform: scale(1.1);
}

.gear-svg[b-33qmejavmh] {
    width: 28px;
    height: 28px;
    color: #c0b0d0;
    transition: color 0.2s, transform 0.3s;
}

.settings-btn:hover .gear-svg[b-33qmejavmh] {
    color: #ffd700;
    animation: gear-spin-b-33qmejavmh 3s linear infinite;
}

@keyframes gear-spin-b-33qmejavmh {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Main content ===== */
.splash-content[b-33qmejavmh] {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

/* ===== Title ===== */
.title-block[b-33qmejavmh] {
    text-align: center;
    animation: title-drop-b-33qmejavmh 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes title-drop-b-33qmejavmh {
    from {
        opacity: 0;
        transform: translateY(-40px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.game-title[b-33qmejavmh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1;
}

.title-deck[b-33qmejavmh] {
    font-family: 'Press Start 2P', monospace;
    font-size: 4.5rem;
    color: #ffd700;
    text-shadow:
        4px 4px 0 #b8860b,
        8px 8px 0 rgba(0, 0, 0, 0.4);
    letter-spacing: 12px;
    animation: title-shimmer-b-33qmejavmh 3s ease-in-out infinite alternate;
}

.title-fight[b-33qmejavmh] {
    font-family: 'Press Start 2P', monospace;
    font-size: 4.5rem;
    color: #e94560;
    text-shadow:
        4px 4px 0 #a31545,
        8px 8px 0 rgba(0, 0, 0, 0.4);
    letter-spacing: 12px;
    animation: title-shimmer-b-33qmejavmh 3s ease-in-out infinite alternate 0.3s;
}

@keyframes title-shimmer-b-33qmejavmh {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
    100% { filter: brightness(1); }
}

.title-underline[b-33qmejavmh] {
    margin: 16px auto 0;
    width: 280px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #ffd700, #e94560, transparent);
    border-radius: 0;
    image-rendering: pixelated;
    animation: underline-glow-b-33qmejavmh 2s ease-in-out infinite alternate;
}

@keyframes underline-glow-b-33qmejavmh {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

.subtitle[b-33qmejavmh] {
    margin-top: 16px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    color: #8a8aaa;
    letter-spacing: 4px;
    animation: subtitle-fade-b-33qmejavmh 1s ease-out 0.4s both;
}

@keyframes subtitle-fade-b-33qmejavmh {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== Menu buttons ===== */
.menu-buttons[b-33qmejavmh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: buttons-rise-b-33qmejavmh 0.5s ease-out 0.3s both;
}

@keyframes buttons-rise-b-33qmejavmh {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-btn[b-33qmejavmh] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 40px;
    min-width: 320px;
    border: 3px solid;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    image-rendering: pixelated;
    text-align: left;
}

.menu-btn[b-33qmejavmh]::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: -3px;
    bottom: -3px;
    border-radius: 4px;
    z-index: -1;
    transition: all 0.15s ease;
}

.menu-btn:active[b-33qmejavmh] {
    transform: translate(2px, 2px);
}

.menu-btn:active[b-33qmejavmh]::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Play button */
.play-btn[b-33qmejavmh] {
    border-color: #ffd700;
    color: #ffd700;
}

.play-btn[b-33qmejavmh]::before {
    background: rgba(255, 215, 0, 0.15);
}

.play-btn:hover[b-33qmejavmh] {
    background: rgba(255, 215, 0, 0.2);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    transform: scale(1.03);
}

.play-btn .btn-icon[b-33qmejavmh] {
    font-size: 1.4rem;
}

/* Packs button */
.packs-btn[b-33qmejavmh] {
    border-color: #50c878;
    color: #50c878;
}

.packs-btn[b-33qmejavmh]::before {
    background: rgba(80, 200, 120, 0.1);
}

.packs-btn:hover[b-33qmejavmh] {
    background: rgba(80, 200, 120, 0.15);
    box-shadow: 0 0 16px rgba(80, 200, 120, 0.25);
    transform: scale(1.03);
}

/* Pixel pack icon */
.btn-icon-pack[b-33qmejavmh] {
    position: relative;
    width: 24px;
    height: 28px;
    flex-shrink: 0;
}

.pack-box[b-33qmejavmh] {
    position: absolute;
    bottom: 0;
    left: 2px;
    width: 20px;
    height: 18px;
    border: 2px solid #50c878;
    background: rgba(80, 200, 120, 0.15);
}

.pack-flap[b-33qmejavmh] {
    position: absolute;
    top: 2px;
    left: 4px;
    width: 16px;
    height: 8px;
    border: 2px solid #50c878;
    border-bottom: none;
    background: rgba(80, 200, 120, 0.25);
    transform: perspective(20px) rotateX(-15deg);
}

/* Collection button */
.collection-btn[b-33qmejavmh] {
    border-color: #53d8fb;
    color: #53d8fb;
}

.collection-btn[b-33qmejavmh]::before {
    background: rgba(83, 216, 251, 0.1);
}

.collection-btn:hover[b-33qmejavmh] {
    background: rgba(83, 216, 251, 0.15);
    box-shadow: 0 0 16px rgba(83, 216, 251, 0.25);
    transform: scale(1.03);
}

/* Mini card stack icon */
.btn-icon-cards[b-33qmejavmh] {
    position: relative;
    width: 24px;
    height: 28px;
    flex-shrink: 0;
}

.mini-card[b-33qmejavmh] {
    position: absolute;
    width: 16px;
    height: 22px;
    border: 2px solid #53d8fb;
    border-radius: 2px;
    background: rgba(83, 216, 251, 0.15);
}

.mini-card.c1[b-33qmejavmh] {
    top: 0; left: 0;
    transform: rotate(-8deg);
}

.mini-card.c2[b-33qmejavmh] {
    top: 1px; left: 4px;
    transform: rotate(0deg);
}

.mini-card.c3[b-33qmejavmh] {
    top: 0; left: 8px;
    transform: rotate(8deg);
}

/* Characters button */
.characters-btn[b-33qmejavmh] {
    border-color: #e94560;
    color: #e94560;
}

.characters-btn[b-33qmejavmh]::before {
    background: rgba(233, 69, 96, 0.1);
}

.characters-btn:hover[b-33qmejavmh] {
    background: rgba(233, 69, 96, 0.15);
    box-shadow: 0 0 16px rgba(233, 69, 96, 0.25);
    transform: scale(1.03);
}

.characters-btn .btn-icon[b-33qmejavmh] {
    font-size: 1.4rem;
}

/* Achievements button */
.achievements-btn[b-33qmejavmh] {
    border-color: #e9a560;
    color: #e9a560;
}

.achievements-btn[b-33qmejavmh]::before {
    background: rgba(233, 165, 96, 0.1);
}

.achievements-btn:hover[b-33qmejavmh] {
    background: rgba(233, 165, 96, 0.15);
    box-shadow: 0 0 16px rgba(233, 165, 96, 0.25);
    transform: scale(1.03);
}

.achievements-btn .btn-icon[b-33qmejavmh] {
    font-size: 1.4rem;
}

.btn-icon[b-33qmejavmh] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
}

.btn-text[b-33qmejavmh] {
    letter-spacing: 3px;
}

/* ===== Version tag ===== */
.version-tag[b-33qmejavmh] {
    position: absolute;
    bottom: 16px;
    right: 20px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #4a4a6a;
    z-index: 10;
}
/* /Pages/MirrorReveal.razor.rz.scp.css */
/* ===== Container ===== */
.mr-container[b-e1x7pldo94] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(170deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}

.mr-canvas[b-e1x7pldo94] {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ===== Header ===== */
.mr-header[b-e1x7pldo94] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 3px solid #2a2a4a;
}

.back-btn[b-e1x7pldo94] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 2px solid #534b6e;
    border-radius: 4px;
    color: #c0b0d0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.back-btn:hover[b-e1x7pldo94] { border-color: #ffd700; color: #ffd700; }
.back-arrow[b-e1x7pldo94] { font-size: 0.8rem; }

.header-title[b-e1x7pldo94] {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1rem;
    color: #53d8fb;
    text-shadow: 3px 3px 0 #1a6a8a;
    letter-spacing: 3px;
}

.header-spacer[b-e1x7pldo94] { width: 100px; }

.mr-subtitle[b-e1x7pldo94] {
    position: relative;
    z-index: 5;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #5a5a7a;
    letter-spacing: 2px;
    margin-top: 16px;
}

/* ===== Slots area ===== */
.mr-slots[b-e1x7pldo94] {
    position: relative;
    z-index: 5;
    display: flex;
    gap: 32px;
    margin-top: 40px;
    flex: 1;
    align-items: flex-start;
}

.mr-slot[b-e1x7pldo94] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 240px;
    position: relative;
}

.mr-slot-label[b-e1x7pldo94] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #8a8aaa;
    letter-spacing: 3px;
    margin-bottom: 16px;
}

/* ===== Reel ===== */
.mr-reel[b-e1x7pldo94] {
    width: 220px;
    min-height: 160px;
    border: 3px solid #2a2a4a;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.mr-reel.waiting[b-e1x7pldo94] {
    border-color: #2a2a4a;
    opacity: 0.3;
}

.mr-reel.rolling[b-e1x7pldo94] {
    border-color: #53d8fb;
    background: rgba(83, 216, 251, 0.04);
    animation: reel-pulse-b-e1x7pldo94 0.3s infinite alternate;
}

.mr-reel.locked[b-e1x7pldo94] {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.06);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.15);
}

@keyframes reel-pulse-b-e1x7pldo94 {
    from { box-shadow: 0 0 10px rgba(83, 216, 251, 0.1); }
    to   { box-shadow: 0 0 25px rgba(83, 216, 251, 0.25); }
}

.mr-reel-icon[b-e1x7pldo94] {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.mr-reel-icon.hero-icon[b-e1x7pldo94] {
    font-size: 3rem;
}

.mr-reel-name[b-e1x7pldo94] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: #ffd700;
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.mr-reel-sub[b-e1x7pldo94] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #8a8aaa;
    text-align: center;
}

/* ===== Lock flash ===== */
.mr-lock-flash[b-e1x7pldo94] {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    animation: lock-flash-b-e1x7pldo94 0.5s ease-out forwards;
}

@keyframes lock-flash-b-e1x7pldo94 {
    0%   { background: rgba(255, 215, 0, 0.3); }
    100% { background: transparent; }
}

/* ===== Characters row ===== */
.mr-chars-row[b-e1x7pldo94] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.mr-char-mini[b-e1x7pldo94] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-left: 2px solid #534b6e;
    background: rgba(0, 0, 0, 0.2);
}

.mr-char-icon[b-e1x7pldo94] {
    font-size: 1.2rem;
}

.mr-char-name[b-e1x7pldo94] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #c0b0d0;
}

/* ===== Bottom ===== */
.mr-bottom[b-e1x7pldo94] {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
}

.mr-status[b-e1x7pldo94] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #53d8fb;
    letter-spacing: 3px;
    animation: status-blink-b-e1x7pldo94 0.6s infinite alternate;
}

@keyframes status-blink-b-e1x7pldo94 {
    from { opacity: 0.4; }
    to   { opacity: 1.0; }
}

.mr-fight-btn[b-e1x7pldo94] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 48px;
    border: 3px solid #ffd700;
    background: rgba(255, 215, 0, 0.08);
    color: #ffd700;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.mr-fight-btn.waiting[b-e1x7pldo94] {
    opacity: 0.2;
    cursor: not-allowed;
}

.mr-fight-btn.ready[b-e1x7pldo94] {
    animation: fight-glow-b-e1x7pldo94 1s infinite alternate;
}

.mr-fight-btn.ready:hover[b-e1x7pldo94] {
    background: rgba(255, 215, 0, 0.2);
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}

@keyframes fight-glow-b-e1x7pldo94 {
    from { box-shadow: 0 0 10px rgba(255, 215, 0, 0.1); }
    to   { box-shadow: 0 0 25px rgba(255, 215, 0, 0.3); }
}

.mr-fight-btn .btn-arrow[b-e1x7pldo94] { font-size: 0.7rem; }
/* /Pages/Packs.razor.rz.scp.css */
/* ===== Container ===== */
.packs-container[b-bl6egt6ooz] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}

.packs-canvas[b-bl6egt6ooz] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ===== Header ===== */
.packs-header[b-bl6egt6ooz] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-bottom: 3px solid #2a2a4a;
}

.back-btn[b-bl6egt6ooz] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 2px solid #534b6e;
    border-radius: 4px;
    color: #c0b0d0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.back-btn:hover[b-bl6egt6ooz] {
    border-color: #ffd700;
    color: #ffd700;
}

.back-arrow[b-bl6egt6ooz] {
    font-size: 0.8rem;
}

.header-title[b-bl6egt6ooz] {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.4rem;
    color: #ffd700;
    text-shadow: 3px 3px 0 #b8860b;
    letter-spacing: 4px;
}

.coin-display[b-bl6egt6ooz] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #ffd700;
    border-radius: 4px;
    padding: 8px 16px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    color: #ffd700;
}

.coin-icon[b-bl6egt6ooz] {
    color: #ffd700;
    font-size: 1rem;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.25);
}

.coin-icon.small[b-bl6egt6ooz] {
    font-size: 0.75rem;
}

/* ===== Pack grid ===== */
.packs-grid[b-bl6egt6ooz] {
    position: relative;
    z-index: 5;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 24px;
    padding: 24px 20px;
    flex: 1;
    align-items: center;
}

.pack-slot[b-bl6egt6ooz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* ===== Pack card button ===== */
.pack-card[b-bl6egt6ooz] {
    position: relative;
    width: 220px;
    height: 380px;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    font-family: 'Press Start 2P', monospace;
    padding: 0;
    image-rendering: pixelated;
}

.pack-card:hover:not(:disabled)[b-bl6egt6ooz] {
    transform: translateY(-12px) scale(1.05);
}

.pack-card:active:not(:disabled)[b-bl6egt6ooz] {
    transform: translateY(-4px) scale(1.02);
}

.pack-card:disabled[b-bl6egt6ooz] {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

/* Pack glow effect */
.pack-glow[b-bl6egt6ooz] {
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    border-radius: 50%;
    opacity: 0.06;
    pointer-events: none;
    transition: opacity 0.3s;
}

.pack-card:hover:not(:disabled) .pack-glow[b-bl6egt6ooz] {
    opacity: 0.18;
}

/* ===== Pack wrapper (pixel pack shape) ===== */
.pack-wrapper[b-bl6egt6ooz] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Tear strip at top */
.pack-tear[b-bl6egt6ooz] {
    width: 190px;
    height: 16px;
    position: relative;
    overflow: hidden;
}

.tear-zigzag[b-bl6egt6ooz] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background:
        linear-gradient(135deg, transparent 33.33%, currentColor 33.33%, currentColor 66.66%, transparent 66.66%),
        linear-gradient(225deg, transparent 33.33%, currentColor 33.33%, currentColor 66.66%, transparent 66.66%);
    background-size: 12px 8px;
    opacity: 0.4;
}

/* Main pack body */
.pack-body[b-bl6egt6ooz] {
    position: relative;
    width: 190px;
    height: 290px;
    border: 4px solid;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    image-rendering: pixelated;
}

/* Corner pixel accents */
.pack-corner[b-bl6egt6ooz] {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 3px solid;
    opacity: 0.6;
}

.pack-corner.tl[b-bl6egt6ooz] { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.pack-corner.tr[b-bl6egt6ooz] { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.pack-corner.bl[b-bl6egt6ooz] { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.pack-corner.br[b-bl6egt6ooz] { bottom: 6px; right: 6px; border-left: none; border-top: none; }

/* Side stripes */
.pack-stripe[b-bl6egt6ooz] {
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    opacity: 0.2;
}

.pack-stripe.left[b-bl6egt6ooz] { left: 20px; }
.pack-stripe.right[b-bl6egt6ooz] { right: 20px; }

/* Center emblem */
.pack-emblem[b-bl6egt6ooz] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.emblem-border[b-bl6egt6ooz] {
    width: 72px;
    height: 72px;
    border: 3px solid;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0.9;
}

.emblem-icon[b-bl6egt6ooz] {
    transform: rotate(-45deg);
    font-size: 1.8rem;
    filter: drop-shadow(0 0 6px currentColor);
}

/* Pack name banner */
.pack-banner[b-bl6egt6ooz] {
    position: relative;
    width: 160px;
    padding: 8px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-bg[b-bl6egt6ooz] {
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0.1;
    border-top: 2px solid;
    border-bottom: 2px solid;
}

.pack-name[b-bl6egt6ooz] {
    position: relative;
    z-index: 2;
    font-size: 0.55rem;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

/* Card count */
.pack-meta[b-bl6egt6ooz] {
    margin-top: 4px;
}

.pack-cards-count[b-bl6egt6ooz] {
    font-size: 0.55rem;
    opacity: 0.6;
    letter-spacing: 2px;
}

/* Bottom dots decoration */
.pack-dots[b-bl6egt6ooz] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.pack-dots .dot[b-bl6egt6ooz] {
    width: 6px;
    height: 6px;
    background: currentColor;
    opacity: 0.3;
}

/* Guarantee text (below pack) */
.pack-guarantee[b-bl6egt6ooz] {
    font-size: 0.5rem;
    opacity: 0.5;
    margin-top: 8px;
    letter-spacing: 1px;
}

/* ===== Pack tiers ===== */
.pack-card.bronze[b-bl6egt6ooz] { color: #cd7f32; }
.pack-card.bronze .pack-body[b-bl6egt6ooz] { border-color: #cd7f32; background: linear-gradient(180deg, rgba(205, 127, 50, 0.12) 0%, rgba(0,0,0,0.5) 100%); }
.pack-card.bronze .pack-glow[b-bl6egt6ooz] { background: radial-gradient(circle, #cd7f32, transparent 70%); }
.pack-card.bronze .pack-stripe[b-bl6egt6ooz] { background: #cd7f32; }
.pack-card.bronze .pack-corner[b-bl6egt6ooz] { border-color: #cd7f32; }
.pack-card.bronze .emblem-border[b-bl6egt6ooz] { border-color: #cd7f32; }
.pack-card.bronze:hover:not(:disabled)[b-bl6egt6ooz] { box-shadow: 0 12px 32px rgba(205, 127, 50, 0.35); }

.pack-card.silver[b-bl6egt6ooz] { color: #c0c0c0; }
.pack-card.silver .pack-body[b-bl6egt6ooz] { border-color: #c0c0c0; background: linear-gradient(180deg, rgba(192, 192, 192, 0.12) 0%, rgba(0,0,0,0.5) 100%); }
.pack-card.silver .pack-glow[b-bl6egt6ooz] { background: radial-gradient(circle, #c0c0c0, transparent 70%); }
.pack-card.silver .pack-stripe[b-bl6egt6ooz] { background: #c0c0c0; }
.pack-card.silver .pack-corner[b-bl6egt6ooz] { border-color: #c0c0c0; }
.pack-card.silver .emblem-border[b-bl6egt6ooz] { border-color: #c0c0c0; }
.pack-card.silver:hover:not(:disabled)[b-bl6egt6ooz] { box-shadow: 0 12px 32px rgba(192, 192, 192, 0.35); }

.pack-card.gold[b-bl6egt6ooz] { color: #ffd700; }
.pack-card.gold .pack-body[b-bl6egt6ooz] { border-color: #ffd700; background: linear-gradient(180deg, rgba(255, 215, 0, 0.12) 0%, rgba(0,0,0,0.5) 100%); }
.pack-card.gold .pack-glow[b-bl6egt6ooz] { background: radial-gradient(circle, #ffd700, transparent 70%); }
.pack-card.gold .pack-stripe[b-bl6egt6ooz] { background: #ffd700; }
.pack-card.gold .pack-corner[b-bl6egt6ooz] { border-color: #ffd700; }
.pack-card.gold .emblem-border[b-bl6egt6ooz] { border-color: #ffd700; }
.pack-card.gold:hover:not(:disabled)[b-bl6egt6ooz] { box-shadow: 0 12px 32px rgba(255, 215, 0, 0.35); }

.pack-card.diamond[b-bl6egt6ooz] { color: #b9f2ff; }
.pack-card.diamond .pack-body[b-bl6egt6ooz] { border-color: #b9f2ff; background: linear-gradient(180deg, rgba(185, 242, 255, 0.12) 0%, rgba(0,0,0,0.5) 100%); }
.pack-card.diamond .pack-glow[b-bl6egt6ooz] { background: radial-gradient(circle, #b9f2ff, transparent 70%); }
.pack-card.diamond .pack-stripe[b-bl6egt6ooz] { background: #b9f2ff; }
.pack-card.diamond .pack-corner[b-bl6egt6ooz] { border-color: #b9f2ff; }
.pack-card.diamond .emblem-border[b-bl6egt6ooz] { border-color: #b9f2ff; }
.pack-card.diamond:hover:not(:disabled)[b-bl6egt6ooz] { box-shadow: 0 12px 32px rgba(185, 242, 255, 0.35); }

.pack-card.legendary[b-bl6egt6ooz] { color: #ff6ec7; }
.pack-card.legendary .pack-body[b-bl6egt6ooz] { border-color: #ff6ec7; background: linear-gradient(180deg, rgba(255, 110, 199, 0.15) 0%, rgba(0,0,0,0.5) 100%); }
.pack-card.legendary .pack-glow[b-bl6egt6ooz] { background: radial-gradient(circle, #ff6ec7, transparent 70%); }
.pack-card.legendary .pack-stripe[b-bl6egt6ooz] { background: #ff6ec7; }
.pack-card.legendary .pack-corner[b-bl6egt6ooz] { border-color: #ff6ec7; }
.pack-card.legendary .emblem-border[b-bl6egt6ooz] { border-color: #ff6ec7; }
.pack-card.legendary:hover:not(:disabled)[b-bl6egt6ooz] { box-shadow: 0 12px 32px rgba(255, 110, 199, 0.4); }
.pack-card.legendary .pack-body[b-bl6egt6ooz] { animation: legendary-border-pulse-b-bl6egt6ooz 2s ease-in-out infinite alternate; }
.pack-card.legendary .emblem-icon[b-bl6egt6ooz] { animation: legendary-icon-glow-b-bl6egt6ooz 1.5s ease-in-out infinite alternate; }

@keyframes legendary-border-pulse-b-bl6egt6ooz {
    from { border-color: #ff6ec7; box-shadow: inset 0 0 20px rgba(255, 110, 199, 0.1); }
    to { border-color: #c850c0; box-shadow: inset 0 0 30px rgba(200, 80, 192, 0.2); }
}

@keyframes legendary-icon-glow-b-bl6egt6ooz {
    from { filter: drop-shadow(0 0 6px #ff6ec7); }
    to { filter: drop-shadow(0 0 14px #ff6ec7) drop-shadow(0 0 24px rgba(255, 110, 199, 0.4)); }
}

/* ===== Pack price ===== */
.pack-price[b-bl6egt6ooz] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.75rem;
    color: #ffd700;
}

.pack-price.cant-afford[b-bl6egt6ooz] {
    color: #e94560;
}

/* ===== Opening overlay ===== */
.opening-overlay[b-bl6egt6ooz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: overlay-fade-in-b-bl6egt6ooz 0.3s ease-out;
    cursor: pointer;
}

.opening-overlay.reveal[b-bl6egt6ooz] {
    cursor: default;
}

@keyframes overlay-fade-in-b-bl6egt6ooz {
    from { opacity: 0; }
    to { opacity: 1; }
}

.opening-pack[b-bl6egt6ooz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.opening-pack.shaking[b-bl6egt6ooz] {
    animation: pack-shake-b-bl6egt6ooz 0.1s ease-in-out infinite alternate;
}

@keyframes pack-shake-b-bl6egt6ooz {
    0% { transform: rotate(-2deg) scale(1.6); }
    100% { transform: rotate(2deg) scale(1.6); }
}

/* Reuse pack-visual for the opening overlay pack */
.pack-visual.large[b-bl6egt6ooz] {
    transform: scale(2);
}

.pack-visual .pack-body[b-bl6egt6ooz] {
    position: relative;
    width: 140px;
    height: 190px;
    border: 4px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.6);
}

.pack-visual .pack-stripe[b-bl6egt6ooz] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 100%;
    opacity: 0.12;
    background: currentColor;
}

.pack-visual .pack-label[b-bl6egt6ooz] {
    position: relative;
    z-index: 2;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    letter-spacing: 3px;
    text-align: center;
    padding: 0 12px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

.pack-visual .pack-glow[b-bl6egt6ooz] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    opacity: 0.2;
    animation: glow-pulse-b-bl6egt6ooz 1s ease-in-out infinite alternate;
}

@keyframes glow-pulse-b-bl6egt6ooz {
    from { opacity: 0.1; transform: scale(0.9); }
    to { opacity: 0.3; transform: scale(1.1); }
}

/* Pack visual tier colors */
.pack-visual.bronze[b-bl6egt6ooz] { color: #cd7f32; }
.pack-visual.bronze .pack-body[b-bl6egt6ooz] { border-color: #cd7f32; background: rgba(205, 127, 50, 0.15); }
.pack-visual.bronze .pack-glow[b-bl6egt6ooz] { background: radial-gradient(circle, #cd7f32, transparent 70%); }

.pack-visual.silver[b-bl6egt6ooz] { color: #c0c0c0; }
.pack-visual.silver .pack-body[b-bl6egt6ooz] { border-color: #c0c0c0; background: rgba(192, 192, 192, 0.15); }
.pack-visual.silver .pack-glow[b-bl6egt6ooz] { background: radial-gradient(circle, #c0c0c0, transparent 70%); }

.pack-visual.gold[b-bl6egt6ooz] { color: #ffd700; }
.pack-visual.gold .pack-body[b-bl6egt6ooz] { border-color: #ffd700; background: rgba(255, 215, 0, 0.08); }
.pack-visual.gold .pack-glow[b-bl6egt6ooz] { background: radial-gradient(circle, #ffd700, transparent 70%); }

.pack-visual.diamond[b-bl6egt6ooz] { color: #b9f2ff; }
.pack-visual.diamond .pack-body[b-bl6egt6ooz] { border-color: #b9f2ff; background: rgba(185, 242, 255, 0.15); }
.pack-visual.diamond .pack-glow[b-bl6egt6ooz] { background: radial-gradient(circle, #b9f2ff, transparent 70%); }

.pack-visual.legendary[b-bl6egt6ooz] { color: #ff6ec7; }
.pack-visual.legendary .pack-body[b-bl6egt6ooz] { border-color: #ff6ec7; background: rgba(255, 110, 199, 0.15); }
.pack-visual.legendary .pack-glow[b-bl6egt6ooz] { background: radial-gradient(circle, #ff6ec7, transparent 70%); }

.tap-hint[b-bl6egt6ooz] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    color: #ffd700;
    animation: hint-blink-b-bl6egt6ooz 1s ease-in-out infinite;
    margin-top: 40px;
}

@keyframes hint-blink-b-bl6egt6ooz {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ===== Revealed cards ===== */
.revealed-cards[b-bl6egt6ooz] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 750px;
    animation: cards-fan-in-b-bl6egt6ooz 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cards-fan-in-b-bl6egt6ooz {
    from {
        opacity: 0;
        transform: scale(0.5) rotateX(30deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotateX(0deg);
    }
}

.revealed-card-wrap[b-bl6egt6ooz] {
    position: relative;
    overflow: visible;
}

.revealed-card[b-bl6egt6ooz] {
    width: 110px;
    height: 155px;
    border: 3px solid;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    animation: card-pop-b-bl6egt6ooz 0.3s ease-out both;
}

.revealed-card-wrap:nth-child(1) .revealed-card[b-bl6egt6ooz] { animation-delay: 0.1s; }
.revealed-card-wrap:nth-child(2) .revealed-card[b-bl6egt6ooz] { animation-delay: 0.25s; }
.revealed-card-wrap:nth-child(3) .revealed-card[b-bl6egt6ooz] { animation-delay: 0.4s; }
.revealed-card-wrap:nth-child(4) .revealed-card[b-bl6egt6ooz] { animation-delay: 0.55s; }
.revealed-card-wrap:nth-child(5) .revealed-card[b-bl6egt6ooz] { animation-delay: 0.7s; }
.revealed-card-wrap:nth-child(6) .revealed-card[b-bl6egt6ooz] { animation-delay: 0.85s; }

@keyframes card-pop-b-bl6egt6ooz {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.card-inner[b-bl6egt6ooz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    width: 100%;
    height: 100%;
    position: relative;
}

.card-cost-badge[b-bl6egt6ooz] {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 50, 0.7);
    border: 2px solid #53d8fb;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #53d8fb;
}

.card-art[b-bl6egt6ooz] {
    font-size: 2rem;
    margin-top: 20px;
    filter: drop-shadow(0 0 4px currentColor);
}

.card-name[b-bl6egt6ooz] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    text-align: center;
    letter-spacing: 1px;
    margin-top: auto;
    padding-bottom: 4px;
}

.card-rarity-gem[b-bl6egt6ooz] {
    width: 8px;
    height: 8px;
    border-radius: 1px;
    transform: rotate(45deg);
    position: absolute;
    bottom: 6px;
    right: 6px;
}

.new-badge[b-bl6egt6ooz] {
    position: absolute;
    top: 4px;
    right: 4px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #ffd700;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 4px;
    border: 1px solid #ffd700;
    border-radius: 2px;
    animation: new-flash-b-bl6egt6ooz 1s ease-in-out infinite alternate;
}

@keyframes new-flash-b-bl6egt6ooz {
    from { opacity: 0.7; }
    to { opacity: 1; }
}

.new-card[b-bl6egt6ooz] {
    box-shadow: 0 0 12px currentColor;
}

/* Rarity colors for revealed cards */
.revealed-card.common[b-bl6egt6ooz] {
    border-color: #808080;
    color: #b0b0b0;
}
.revealed-card.common .card-rarity-gem[b-bl6egt6ooz] { background: #808080; }

.revealed-card.uncommon[b-bl6egt6ooz] {
    border-color: #50c878;
    color: #50c878;
}
.revealed-card.uncommon .card-rarity-gem[b-bl6egt6ooz] { background: #50c878; }

.revealed-card.rare[b-bl6egt6ooz] {
    border-color: #4488ff;
    color: #4488ff;
}
.revealed-card.rare .card-rarity-gem[b-bl6egt6ooz] { background: #4488ff; }

/* ===== EPIC: Purple shimmer with scanning light ===== */
.revealed-card.epic[b-bl6egt6ooz] {
    border-color: #b048ff;
    color: #b048ff;
    animation: card-pop-b-bl6egt6ooz 0.3s ease-out both, epic-pulse-b-bl6egt6ooz 2s ease-in-out infinite alternate;
    overflow: hidden;
}
.revealed-card.epic[b-bl6egt6ooz]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, rgba(176, 72, 255, 0.07), transparent, rgba(176, 72, 255, 0.05), transparent);
    animation: epic-spin-b-bl6egt6ooz 4s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.revealed-card.epic[b-bl6egt6ooz]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(176, 72, 255, 0.12), transparent);
    animation: epic-sweep-b-bl6egt6ooz 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.revealed-card.epic .card-inner[b-bl6egt6ooz] { position: relative; z-index: 1; }
.revealed-card.epic .card-rarity-gem[b-bl6egt6ooz] { background: #b048ff; }

@keyframes epic-pulse-b-bl6egt6ooz {
    from { box-shadow: 0 0 8px rgba(176, 72, 255, 0.15), inset 0 0 15px rgba(176, 72, 255, 0.05); }
    to   { box-shadow: 0 0 20px rgba(176, 72, 255, 0.3), inset 0 0 25px rgba(176, 72, 255, 0.05); }
}
@keyframes epic-spin-b-bl6egt6ooz {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes epic-sweep-b-bl6egt6ooz {
    0%, 100% { left: -100%; }
    50%      { left: 150%; }
}

/* ===== LEGENDARY: Golden blaze with shine beam and breathing glow ===== */
.revealed-card.legendary[b-bl6egt6ooz] {
    border-color: #ffd700;
    color: #ffd700;
    animation: card-pop-b-bl6egt6ooz 0.3s ease-out both, legendary-blaze-b-bl6egt6ooz 2s ease-in-out infinite alternate;
    overflow: hidden;
}
.revealed-card.legendary[b-bl6egt6ooz]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ffd700, #ff8c00, #ffd700, #ffec80, #ffd700, #ff8c00);
    background-size: 300% 300%;
    animation: legendary-border-b-bl6egt6ooz 3s ease infinite;
    z-index: -1;
    border-radius: 4px;
}
.revealed-card.legendary[b-bl6egt6ooz]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: legendary-shine-b-bl6egt6ooz 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}
.revealed-card.legendary .card-inner[b-bl6egt6ooz] {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    border-radius: 2px;
}
.revealed-card.legendary .card-rarity-gem[b-bl6egt6ooz] { background: #ffd700; }

@keyframes legendary-blaze-b-bl6egt6ooz {
    from { box-shadow: 0 0 15px rgba(255, 215, 0, 0.25), 0 0 30px rgba(255, 140, 0, 0.1); }
    to   { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4), 0 0 50px rgba(255, 140, 0, 0.2), 0 0 80px rgba(255, 215, 0, 0.08); }
}
@keyframes legendary-border-b-bl6egt6ooz {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes legendary-shine-b-bl6egt6ooz {
    0%, 100% { left: -120%; opacity: 0; }
    10%      { opacity: 1; }
    60%      { left: 150%; opacity: 1; }
    70%      { opacity: 0; }
}

/* ===== Collect button ===== */
.collect-btn[b-bl6egt6ooz] {
    border-color: #50c878;
    color: #50c878;
    padding: 14px 48px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.3);
    border: 3px solid #50c878;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.collect-btn:hover[b-bl6egt6ooz] {
    background: rgba(80, 200, 120, 0.2);
    box-shadow: 0 0 16px rgba(80, 200, 120, 0.3);
    transform: scale(1.05);
}

/* ===== Character card in reveal ===== */
.revealed-card.is-character[b-bl6egt6ooz] {
    border-width: 4px;
    background: rgba(233, 69, 96, 0.1);
}

.revealed-card.is-character .card-cost-badge[b-bl6egt6ooz] {
    border-color: #e94560;
    color: #e94560;
    width: auto;
    padding: 0 4px;
    font-size: 0.55rem;
}

.char-badge[b-bl6egt6ooz] {
    position: absolute;
    bottom: 4px;
    left: 4px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #e94560;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 4px;
    border: 1px solid #e94560;
    letter-spacing: 1px;
}

/* ===== COSMIC: Prismatic rainbow border rotation with starfield ===== */
.revealed-card.cosmic[b-bl6egt6ooz] {
    border-color: transparent;
    color: #bb88ff;
    background: rgba(0, 0, 0, 0.7);
    animation: card-pop-b-bl6egt6ooz 0.3s ease-out both, cosmic-breathe-b-bl6egt6ooz 3s ease-in-out infinite alternate;
    overflow: hidden;
}
.revealed-card.cosmic[b-bl6egt6ooz]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        #ff0080, #ff8c00, #ffd700, #50c878, #4488ff, #b048ff, #ff0080);
    animation: cosmic-rotate-b-bl6egt6ooz 3s linear infinite;
    z-index: -1;
}
.revealed-card.cosmic[b-bl6egt6ooz]::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 60% 10%, #fff, transparent),
        radial-gradient(1px 1px at 80% 60%, #fff, transparent),
        radial-gradient(1px 1px at 40% 80%, #fff, transparent),
        radial-gradient(1px 1px at 10% 70%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 70% 40%, #bb88ff, transparent),
        radial-gradient(1.5px 1.5px at 30% 50%, #53d8fb, transparent);
    animation: cosmic-sparkle-b-bl6egt6ooz 2s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 2;
}
.revealed-card.cosmic .card-inner[b-bl6egt6ooz] {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgba(15, 5, 30, 0.9), rgba(0, 0, 0, 0.85));
    width: 100%;
    height: 100%;
    border-radius: 2px;
}
.revealed-card.cosmic .card-rarity-gem[b-bl6egt6ooz] { background: #9955ff; }

@keyframes cosmic-rotate-b-bl6egt6ooz {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes cosmic-breathe-b-bl6egt6ooz {
    from { box-shadow: 0 0 15px rgba(153, 85, 255, 0.2), 0 0 40px rgba(102, 51, 204, 0.1); }
    to   { box-shadow: 0 0 30px rgba(153, 85, 255, 0.35), 0 0 60px rgba(102, 51, 204, 0.2), 0 0 100px rgba(80, 0, 200, 0.08); }
}
@keyframes cosmic-sparkle-b-bl6egt6ooz {
    from { opacity: 0.3; }
    to   { opacity: 1; }
}

.pack-card.cosmic[b-bl6egt6ooz] {
    border-color: #6633cc;
    color: #bb88ff;
}
.pack-card.cosmic .pack-body[b-bl6egt6ooz] {
    border-color: #6633cc;
    background: linear-gradient(180deg, rgba(30,10,60,0.3), rgba(0,0,0,0.5));
    animation: cosmic-pack-b-bl6egt6ooz 2.5s ease-in-out infinite alternate;
}
.pack-card.cosmic .pack-glow[b-bl6egt6ooz] { background: radial-gradient(circle, #9955ff, transparent 70%); }
.pack-card.cosmic .pack-stripe[b-bl6egt6ooz] { background: #6633cc; }
.pack-card.cosmic .pack-corner[b-bl6egt6ooz] { border-color: #6633cc; }
.pack-card.cosmic .emblem-border[b-bl6egt6ooz] { border-color: #6633cc; }
.pack-card.cosmic:hover:not(:disabled)[b-bl6egt6ooz] { box-shadow: 0 12px 32px rgba(102,51,204,0.5); }

@keyframes cosmic-pack-b-bl6egt6ooz {
    from { border-color: #6633cc; box-shadow: inset 0 0 20px rgba(102,51,204,0.1); }
    to { border-color: #9955ff; box-shadow: inset 0 0 30px rgba(153,85,255,0.2); }
}

/* ===== Odds tooltip ===== */
.odds-tooltip[b-bl6egt6ooz] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 480px;
    border: 3px solid #534b6e;
    background: rgba(8, 8, 25, 0.96);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: odds-in-b-bl6egt6ooz 0.2s ease-out;
    font-family: 'Press Start 2P', monospace;
}

@keyframes odds-in-b-bl6egt6ooz {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.odds-title[b-bl6egt6ooz] {
    font-size: 0.5rem;
    color: #ffd700;
    letter-spacing: 2px;
    text-align: center;
}

.odds-grid[b-bl6egt6ooz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.odds-row[b-bl6egt6ooz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.odds-label[b-bl6egt6ooz] {
    font-size: 0.5rem;
    width: 90px;
    text-align: right;
    flex-shrink: 0;
}

.odds-bar-bg[b-bl6egt6ooz] {
    flex: 1;
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #2a2a4a;
}

.odds-bar-fill[b-bl6egt6ooz] {
    height: 100%;
    transition: width 0.3s;
}

.odds-pct[b-bl6egt6ooz] {
    font-size: 0.5rem;
    width: 50px;
    text-align: right;
    opacity: 0.7;
}

/* Odds row rarity colors */
.odds-row.common[b-bl6egt6ooz]   { color: #b0b0b0; }
.odds-row.common .odds-bar-fill[b-bl6egt6ooz] { background: #808080; }
.odds-row.uncommon[b-bl6egt6ooz]  { color: #50c878; }
.odds-row.uncommon .odds-bar-fill[b-bl6egt6ooz] { background: #50c878; }
.odds-row.rare[b-bl6egt6ooz]      { color: #4488ff; }
.odds-row.rare .odds-bar-fill[b-bl6egt6ooz] { background: #4488ff; }
.odds-row.epic[b-bl6egt6ooz]      { color: #b048ff; }
.odds-row.epic .odds-bar-fill[b-bl6egt6ooz] { background: #b048ff; }
.odds-row.legendary[b-bl6egt6ooz] { color: #ffd700; }
.odds-row.legendary .odds-bar-fill[b-bl6egt6ooz] { background: #ffd700; }
.odds-row.cosmic[b-bl6egt6ooz]    { color: #bb88ff; }
.odds-row.cosmic .odds-bar-fill[b-bl6egt6ooz] { background: linear-gradient(90deg, #6633cc, #9955ff); }

.odds-footer[b-bl6egt6ooz] {
    font-size: 0.5rem;
    color: #5a5a7a;
    text-align: center;
    letter-spacing: 1px;
}

/* ===== Reveal tooltip ===== */
.reveal-tooltip[b-bl6egt6ooz] {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    width: 260px;
    padding: 14px 16px;
    border: 2px solid;
    background: rgba(8, 8, 24, 0.97);
    font-family: 'Press Start 2P', monospace;
    pointer-events: none;
    animation: tip-in-b-bl6egt6ooz 0.15s ease-out;
}

@keyframes tip-in-b-bl6egt6ooz {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.reveal-tooltip.common[b-bl6egt6ooz]    { border-color: #808080; }
.reveal-tooltip.uncommon[b-bl6egt6ooz]  { border-color: #50c878; }
.reveal-tooltip.rare[b-bl6egt6ooz]      { border-color: #4488ff; }
.reveal-tooltip.epic[b-bl6egt6ooz]      { border-color: #b048ff; }
.reveal-tooltip.legendary[b-bl6egt6ooz] { border-color: #ffd700; }
.reveal-tooltip.cosmic[b-bl6egt6ooz]    { border-color: #9955ff; }

.rt-header[b-bl6egt6ooz] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.rt-icon[b-bl6egt6ooz] { font-size: 1.4rem; }
.rt-name[b-bl6egt6ooz] { font-size: 0.55rem; color: #ffd700; letter-spacing: 1px; }

.rt-rarity[b-bl6egt6ooz] {
    font-size: 0.48rem;
    color: #8a8aaa;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.rt-new[b-bl6egt6ooz] {
    font-size: 0.48rem;
    color: #ffd700;
    letter-spacing: 2px;
    margin-bottom: 6px;
    animation: new-flash-b-bl6egt6ooz 1s ease-in-out infinite alternate;
}

.rt-stat[b-bl6egt6ooz] {
    font-size: 0.5rem;
    color: #53d8fb;
    padding: 2px 0;
}

.rt-desc[b-bl6egt6ooz] {
    font-size: 0.55rem;
    color: #c0b0d0;
    line-height: 1.8;
    padding: 3px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 4px;
}
/* /Pages/Play.razor.rz.scp.css */
/* ===== Container ===== */
.play-container[b-5sntzhg2nb] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}

.play-canvas[b-5sntzhg2nb] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ===== Header ===== */
.play-header[b-5sntzhg2nb] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-bottom: 3px solid #2a2a4a;
}

.back-btn[b-5sntzhg2nb] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 2px solid #534b6e;
    border-radius: 4px;
    color: #c0b0d0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.back-btn:hover[b-5sntzhg2nb] {
    border-color: #ffd700;
    color: #ffd700;
}

.back-arrow[b-5sntzhg2nb] {
    font-size: 0.8rem;
}

.header-title[b-5sntzhg2nb] {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.4rem;
    color: #ffd700;
    text-shadow: 3px 3px 0 #b8860b;
    letter-spacing: 4px;
}

.header-spacer[b-5sntzhg2nb] {
    width: 90px;
}

/* ===== Mode grid ===== */
.mode-grid[b-5sntzhg2nb] {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    padding: 32px;
}

/* ===== Mode card ===== */
.mode-card[b-5sntzhg2nb] {
    position: relative;
    width: 280px;
    height: 420px;
    border: 3px solid;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px;
    gap: 14px;
    font-family: 'Press Start 2P', monospace;
    image-rendering: pixelated;
    overflow: hidden;
}

.mode-card:hover[b-5sntzhg2nb] {
    transform: translateY(-10px) scale(1.03);
}

.mode-card.selected[b-5sntzhg2nb] {
    transform: translateY(-10px) scale(1.05);
}

.mode-card:active[b-5sntzhg2nb] {
    transform: translateY(-4px) scale(1.01);
}

/* Glow */
.mode-glow[b-5sntzhg2nb] {
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.mode-card:hover .mode-glow[b-5sntzhg2nb],
.mode-card.selected .mode-glow[b-5sntzhg2nb] {
    opacity: 0.12;
}

/* Icon */
.mode-icon[b-5sntzhg2nb] {
    font-size: 3rem;
    filter: drop-shadow(0 0 8px currentColor);
    transition: transform 0.2s;
    margin-top: 8px;
}

.mode-card:hover .mode-icon[b-5sntzhg2nb] {
    transform: scale(1.15);
}

/* Name */
.mode-name[b-5sntzhg2nb] {
    font-size: 1rem;
    letter-spacing: 4px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

/* Divider */
.mode-divider[b-5sntzhg2nb] {
    width: 80%;
    height: 2px;
    background: currentColor;
    opacity: 0.2;
}

/* Description */
.mode-desc[b-5sntzhg2nb] {
    font-size: 0.48rem;
    line-height: 1.9;
    text-align: center;
    opacity: 0.6;
    letter-spacing: 0.5px;
    padding: 0 4px;
}

/* Details */
.mode-details[b-5sntzhg2nb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding-top: 8px;
    border-top: 2px solid rgba(255, 255, 255, 0.04);
}

.mode-detail[b-5sntzhg2nb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-label[b-5sntzhg2nb] {
    font-size: 0.55rem;
    opacity: 0.35;
    letter-spacing: 2px;
}

.detail-value[b-5sntzhg2nb] {
    font-size: 0.55rem;
    opacity: 0.7;
}

/* Tag */
.mode-tag[b-5sntzhg2nb] {
    position: absolute;
    top: 16px;
    right: -36px;
    font-size: 0.5rem;
    letter-spacing: 2px;
    padding: 4px 48px;
    transform: rotate(45deg);
}

.mode-tag.ranked[b-5sntzhg2nb] {
    background: #e94560;
    color: #fff;
}

.mode-tag.casual[b-5sntzhg2nb] {
    background: #50c878;
    color: #fff;
}

.mode-tag.mirror-tag[b-5sntzhg2nb] {
    background: #53d8fb;
    color: #0a0a1a;
}

/* ===== Classic ===== */
.mode-card.classic[b-5sntzhg2nb] {
    border-color: #e94560;
    color: #e94560;
}

.mode-card.classic .mode-glow[b-5sntzhg2nb] {
    background: radial-gradient(circle, #e94560, transparent 70%);
}

.mode-card.classic:hover[b-5sntzhg2nb],
.mode-card.classic.selected[b-5sntzhg2nb] {
    box-shadow: 0 12px 36px rgba(233, 69, 96, 0.3);
    border-color: #ff5a75;
}

.mode-card.classic.selected[b-5sntzhg2nb] {
    background: rgba(233, 69, 96, 0.08);
}

/* ===== Free ===== */
.mode-card.free[b-5sntzhg2nb] {
    border-color: #50c878;
    color: #50c878;
}

.mode-card.free .mode-glow[b-5sntzhg2nb] {
    background: radial-gradient(circle, #50c878, transparent 70%);
}

.mode-card.free:hover[b-5sntzhg2nb],
.mode-card.free.selected[b-5sntzhg2nb] {
    box-shadow: 0 12px 36px rgba(80, 200, 120, 0.3);
    border-color: #60e090;
}

.mode-card.free.selected[b-5sntzhg2nb] {
    background: rgba(80, 200, 120, 0.08);
}

/* ===== Mirror ===== */
.mode-card.mirror[b-5sntzhg2nb] {
    border-color: #53d8fb;
    color: #53d8fb;
}

.mode-card.mirror .mode-glow[b-5sntzhg2nb] {
    background: radial-gradient(circle, #53d8fb, transparent 70%);
}

.mode-card.mirror:hover[b-5sntzhg2nb],
.mode-card.mirror.selected[b-5sntzhg2nb] {
    box-shadow: 0 12px 36px rgba(83, 216, 251, 0.3);
    border-color: #70e4ff;
}

.mode-card.mirror.selected[b-5sntzhg2nb] {
    background: rgba(83, 216, 251, 0.08);
}

/* ===== Bottom bar ===== */
.bottom-bar[b-5sntzhg2nb] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-top: 3px solid #2a2a4a;
    background: rgba(0, 0, 0, 0.3);
    animation: bar-slide-up-b-5sntzhg2nb 0.25s ease-out;
}

@keyframes bar-slide-up-b-5sntzhg2nb {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.selected-label[b-5sntzhg2nb] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: #8a8aaa;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.selected-dot[b-5sntzhg2nb] {
    width: 8px;
    height: 8px;
    background: #ffd700;
    animation: dot-pulse-b-5sntzhg2nb 1s ease-in-out infinite alternate;
}

@keyframes dot-pulse-b-5sntzhg2nb {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

.continue-btn[b-5sntzhg2nb] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 36px;
    border: 3px solid #ffd700;
    background: rgba(255, 215, 0, 0.08);
    color: #ffd700;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.continue-btn:hover[b-5sntzhg2nb] {
    background: rgba(255, 215, 0, 0.18);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    transform: scale(1.04);
}

.continue-btn .btn-arrow[b-5sntzhg2nb] {
    font-size: 0.7rem;
}
/* /Pages/Settings.razor.rz.scp.css */
/* ===== Container ===== */
.settings-container[b-kqe2yag3ty] {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}

.settings-canvas[b-kqe2yag3ty] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ===== Header ===== */
.settings-header[b-kqe2yag3ty] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-bottom: 3px solid #2a2a4a;
}

.back-btn[b-kqe2yag3ty] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 2px solid #534b6e;
    border-radius: 4px;
    color: #c0b0d0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.back-btn:hover[b-kqe2yag3ty] { border-color: #ffd700; color: #ffd700; }
.back-arrow[b-kqe2yag3ty] { font-size: 0.8rem; }

.header-title[b-kqe2yag3ty] {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.4rem;
    color: #c0b0d0;
    text-shadow: 3px 3px 0 #3a2a5a;
    letter-spacing: 4px;
}

.header-spacer[b-kqe2yag3ty] { width: 90px; }

/* ===== Body ===== */
.settings-body[b-kqe2yag3ty] {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    padding: 24px;
}

.settings-body[b-kqe2yag3ty]::-webkit-scrollbar { width: 6px; }
.settings-body[b-kqe2yag3ty]::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.settings-body[b-kqe2yag3ty]::-webkit-scrollbar-thumb { background: #3a3a5a; }

/* ===== Settings panel ===== */
.settings-panel[b-kqe2yag3ty] {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ===== Section ===== */
.settings-section[b-kqe2yag3ty] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 2px solid #1e1e3a;
}

.section-title[b-kqe2yag3ty] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #ffd700;
    letter-spacing: 4px;
    margin-bottom: 4px;
}

/* ===== Setting row ===== */
.setting-row[b-kqe2yag3ty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
}

.setting-label[b-kqe2yag3ty] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #8a8aaa;
    letter-spacing: 1px;
}

/* ===== Slider ===== */
.slider-wrap[b-kqe2yag3ty] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pixel-slider[b-kqe2yag3ty] {
    -webkit-appearance: none;
    appearance: none;
    width: 160px;
    height: 8px;
    background: #2a2a4a;
    border: 2px solid #3a3a5a;
    outline: none;
    cursor: pointer;
}

.pixel-slider[b-kqe2yag3ty]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #53d8fb;
    border: 2px solid #3a8aaa;
    cursor: pointer;
}

.pixel-slider[b-kqe2yag3ty]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #53d8fb;
    border: 2px solid #3a8aaa;
    border-radius: 0;
    cursor: pointer;
}

.slider-val[b-kqe2yag3ty] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.48rem;
    color: #53d8fb;
    min-width: 40px;
    text-align: right;
}

/* ===== Toggle button ===== */
.toggle-btn[b-kqe2yag3ty] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    padding: 6px 18px;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 2px;
    min-width: 70px;
}

.toggle-btn.on[b-kqe2yag3ty] {
    border-color: #50c878;
    color: #50c878;
    background: rgba(80, 200, 120, 0.1);
}

.toggle-btn.on:hover[b-kqe2yag3ty] {
    background: rgba(80, 200, 120, 0.2);
}

.toggle-btn.off[b-kqe2yag3ty] {
    border-color: #5a5a6a;
    color: #5a5a6a;
    background: rgba(0, 0, 0, 0.2);
}

.toggle-btn.off:hover[b-kqe2yag3ty] {
    border-color: #8a8a9a;
    color: #8a8a9a;
}

/* ===== Text input ===== */
.pixel-input[b-kqe2yag3ty] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    padding: 6px 12px;
    border: 2px solid #3a3a5a;
    background: rgba(0, 0, 0, 0.3);
    color: #c0c0d0;
    outline: none;
    width: 180px;
    letter-spacing: 1px;
}

.pixel-input:focus[b-kqe2yag3ty] {
    border-color: #53d8fb;
}

/* ===== Danger button ===== */
.danger-btn[b-kqe2yag3ty] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.48rem;
    padding: 6px 16px;
    border: 2px solid #e94560;
    color: #e94560;
    background: rgba(233, 69, 96, 0.08);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 1px;
}

.danger-btn:hover[b-kqe2yag3ty] {
    background: rgba(233, 69, 96, 0.2);
    box-shadow: 0 0 10px rgba(233, 69, 96, 0.3);
}

/* ===== Footer ===== */
.settings-footer[b-kqe2yag3ty] {
    margin-top: auto;
    padding-top: 24px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #3a3a5a;
    letter-spacing: 2px;
}

/* ===== Confirm overlay ===== */
.confirm-overlay[b-kqe2yag3ty] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: overlay-in-b-kqe2yag3ty 0.2s ease-out;
}

@keyframes overlay-in-b-kqe2yag3ty {
    from { opacity: 0; }
    to { opacity: 1; }
}

.confirm-box[b-kqe2yag3ty] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 40px;
    border: 3px solid #e94560;
    background: rgba(10, 10, 30, 0.95);
    max-width: 420px;
}

.confirm-title[b-kqe2yag3ty] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    color: #e94560;
    letter-spacing: 3px;
}

.confirm-desc[b-kqe2yag3ty] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #8a8aaa;
    text-align: center;
    line-height: 1.8;
}

.confirm-buttons[b-kqe2yag3ty] {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.confirm-cancel[b-kqe2yag3ty] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    padding: 10px 24px;
    border: 2px solid #534b6e;
    color: #c0b0d0;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 2px;
}

.confirm-cancel:hover[b-kqe2yag3ty] {
    border-color: #8a8aaa;
}

.confirm-danger[b-kqe2yag3ty] {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    padding: 10px 24px;
    border: 2px solid #e94560;
    color: #e94560;
    background: rgba(233, 69, 96, 0.1);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 2px;
}

.confirm-danger:hover[b-kqe2yag3ty] {
    background: rgba(233, 69, 96, 0.25);
    box-shadow: 0 0 12px rgba(233, 69, 96, 0.4);
}
/* /Pages/Tester.razor.rz.scp.css */
.tester-container[b-r6d952xpb5] {
    position: relative; width: 100vw; height: 100vh; overflow: hidden;
    display: flex; flex-direction: column;
    background: linear-gradient(170deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}
.tester-canvas[b-r6d952xpb5] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.tester-header[b-r6d952xpb5] {
    position: relative; z-index: 5; display: flex; align-items: center;
    justify-content: space-between; padding: 16px 32px; border-bottom: 3px solid #2a2a4a;
}
.back-btn[b-r6d952xpb5] { display: flex; align-items: center; gap: 8px; background: none; border: 2px solid #534b6e; border-radius: 4px; color: #c0b0d0; font-family: 'Press Start 2P', monospace; font-size: 0.65rem; padding: 8px 16px; cursor: pointer; transition: all 0.15s; }
.back-btn:hover[b-r6d952xpb5] { border-color: #ffd700; color: #ffd700; }
.back-arrow[b-r6d952xpb5] { font-size: 0.8rem; }
.header-title[b-r6d952xpb5] { font-family: 'Press Start 2P', monospace; font-size: 1rem; color: #53d8fb; text-shadow: 3px 3px 0 #1a6a8a; letter-spacing: 3px; }
.header-spacer[b-r6d952xpb5] { width: 100px; }

.tab-bar[b-r6d952xpb5] { position: relative; z-index: 5; display: flex; justify-content: center; gap: 0; padding: 0 32px; }
.tab-btn[b-r6d952xpb5] { flex: 1; max-width: 200px; padding: 10px 16px; border: 2px solid #2a2a4a; border-bottom: none; background: rgba(0,0,0,0.2); color: #5a5a7a; font-family: 'Press Start 2P', monospace; font-size: 0.5rem; letter-spacing: 2px; cursor: pointer; transition: all 0.15s; }
.tab-btn:hover[b-r6d952xpb5] { color: #8a8aaa; background: rgba(0,0,0,0.3); }
.tab-btn.active[b-r6d952xpb5] { color: #53d8fb; border-color: #53d8fb; background: rgba(83,216,251,0.06); }

.tester-body[b-r6d952xpb5] { position: relative; z-index: 5; flex: 1; display: flex; overflow: hidden; }

.pool-panel[b-r6d952xpb5] { flex: 1; display: flex; flex-direction: column; padding: 12px 16px; border-right: 3px solid #2a2a4a; }
.panel-label[b-r6d952xpb5] { font-family: 'Press Start 2P', monospace; font-size: 0.5rem; color: #8a8aaa; letter-spacing: 3px; margin-bottom: 12px; text-align: center; }
.pool-scroll[b-r6d952xpb5] { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.pool-scroll[b-r6d952xpb5]::-webkit-scrollbar { width: 6px; }
.pool-scroll[b-r6d952xpb5]::-webkit-scrollbar-thumb { background: #3a3a5a; }

.pool-row[b-r6d952xpb5] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid; background: rgba(0,0,0,0.3); cursor: pointer; transition: all 0.15s; font-family: 'Press Start 2P', monospace; }
.pool-row:hover:not(:disabled)[b-r6d952xpb5] { background: rgba(0,0,0,0.5); transform: translateX(3px); }
.pool-row.picked[b-r6d952xpb5] { background: rgba(80,200,120,0.1); border-color: #50c878 !important; }
.pool-row.common[b-r6d952xpb5] { border-color: #505060; color: #b0b0b0; }
.pool-row.uncommon[b-r6d952xpb5] { border-color: #2a5a3a; color: #50c878; }
.pool-row.rare[b-r6d952xpb5] { border-color: #2a3a6a; color: #4488ff; }
.pool-row.epic[b-r6d952xpb5] { border-color: #4a2a6a; color: #b048ff; }
.pool-row.legendary[b-r6d952xpb5] { border-color: #5a4a1a; color: #ffd700; }
.pool-row.cosmic[b-r6d952xpb5] { border-color: #4a2a6a; color: #bb88ff; }

.pr-cost[b-r6d952xpb5] { width: 18px; height: 18px; border: 2px solid #53d8fb; background: rgba(0,0,30,0.5); display: flex; align-items: center; justify-content: center; font-size: 0.5rem; color: #53d8fb; flex-shrink: 0; }
.pr-art[b-r6d952xpb5] { font-size: 0.9rem; flex-shrink: 0; }
.pr-name[b-r6d952xpb5] { font-size: 0.5rem; flex: 1; }
.pr-type[b-r6d952xpb5] { font-size: 0.48rem; opacity: 0.4; }
.pr-hp[b-r6d952xpb5] { font-size: 0.48rem; color: #50c878; }
.pr-check[b-r6d952xpb5] { color: #50c878; font-size: 0.6rem; flex-shrink: 0; }

.deck-panel[b-r6d952xpb5] { width: 320px; display: flex; flex-direction: column; padding: 16px 20px; gap: 8px; overflow-y: auto; }
.deck-list[b-r6d952xpb5] { display: flex; flex-direction: column; gap: 4px; }
.deck-row[b-r6d952xpb5] { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-left: 2px solid; background: rgba(0,0,0,0.2); font-family: 'Press Start 2P', monospace; }
.deck-row.added[b-r6d952xpb5] { background: rgba(80,200,120,0.06); border-left-color: #50c878; }
.dr-mana[b-r6d952xpb5] { font-size: 0.55rem; color: #53d8fb; width: 14px; text-align: center; }
.dr-name[b-r6d952xpb5] { font-size: 0.55rem; flex: 1; opacity: 0.7; }
.dr-remove[b-r6d952xpb5] { background: none; border: 1px solid #e94560; color: #e94560; font-size: 0.55rem; cursor: pointer; padding: 2px 6px; font-family: 'Press Start 2P', monospace; }
.deck-total[b-r6d952xpb5] { font-family: 'Press Start 2P', monospace; font-size: 0.48rem; color: #5a5a7a; text-align: center; margin-top: 8px; }

.deck-row.common[b-r6d952xpb5] { border-left-color: #808080; color: #b0b0b0; }
.deck-row.uncommon[b-r6d952xpb5] { border-left-color: #50c878; color: #50c878; }
.deck-row.rare[b-r6d952xpb5] { border-left-color: #4488ff; color: #4488ff; }
.deck-row.epic[b-r6d952xpb5] { border-left-color: #b048ff; color: #b048ff; }
.deck-row.legendary[b-r6d952xpb5] { border-left-color: #ffd700; color: #ffd700; }
.deck-row.cosmic[b-r6d952xpb5] { border-left-color: #bb88ff; color: #bb88ff; }

/* Hero detail */
.tester-hero-detail[b-r6d952xpb5] { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; font-family: 'Press Start 2P', monospace; }
.th-icon[b-r6d952xpb5] { font-size: 2.5rem; text-align: center; }
.th-name[b-r6d952xpb5] { font-size: 0.7rem; color: #ffd700; text-align: center; }
.th-rarity[b-r6d952xpb5] { font-size: 0.48rem; text-align: center; color: #8a8aaa; }
.th-stats[b-r6d952xpb5] { font-size: 0.48rem; color: #50c878; text-align: center; }
.th-desc[b-r6d952xpb5] { font-size: 0.48rem; color: #c0b0d0; line-height: 1.7; padding: 4px 0; }
.detail-empty[b-r6d952xpb5] { display: flex; align-items: center; justify-content: center; flex: 1; opacity: 0.3; font-family: 'Press Start 2P', monospace; }
.empty-text[b-r6d952xpb5] { font-size: 0.5rem; }

/* Options */
.tester-option[b-r6d952xpb5] { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #2a2a4a; font-family: 'Press Start 2P', monospace; }
.to-label[b-r6d952xpb5] { font-size: 0.5rem; color: #c0b0d0; }
.to-control[b-r6d952xpb5] { display: flex; align-items: center; gap: 12px; }
.to-btn[b-r6d952xpb5] { width: 30px; height: 30px; border: 2px solid #53d8fb; background: rgba(0,0,0,0.3); color: #53d8fb; font-family: 'Press Start 2P', monospace; font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.to-btn:hover[b-r6d952xpb5] { background: rgba(83,216,251,0.15); }
.to-val[b-r6d952xpb5] { font-size: 0.7rem; color: #ffd700; min-width: 40px; text-align: center; }

.toggle-btn[b-r6d952xpb5] { padding: 6px 16px; border: 2px solid; font-family: 'Press Start 2P', monospace; font-size: 0.5rem; cursor: pointer; transition: all 0.15s; }
.toggle-btn.on[b-r6d952xpb5] { border-color: #50c878; color: #50c878; background: rgba(80,200,120,0.08); }
.toggle-btn.off[b-r6d952xpb5] { border-color: #534b6e; color: #5a5a7a; background: rgba(0,0,0,0.2); }

/* Bottom bar */
.tester-bottom[b-r6d952xpb5] { position: relative; z-index: 5; display: flex; justify-content: center; padding: 12px; }
.continue-btn[b-r6d952xpb5] { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 40px; border: 3px solid #ffd700; background: rgba(255,215,0,0.08); color: #ffd700; font-family: 'Press Start 2P', monospace; font-size: 0.6rem; letter-spacing: 2px; cursor: pointer; transition: all 0.15s; }
.continue-btn:hover:not(:disabled)[b-r6d952xpb5] { background: rgba(255,215,0,0.18); box-shadow: 0 0 20px rgba(255,215,0,0.3); transform: scale(1.03); }
.continue-btn:disabled[b-r6d952xpb5] { opacity: 0.3; cursor: not-allowed; }