/* =========================================================
BGG LOFT — VAULT
Vault Page & Game Presentation
========================================================= */

/* =========================================================
VAULT PAGE
========================================================= */

.vault-page {

width: 100%;

}

.vault-main {

display: flex;
flex-direction: column;

gap: var(--space-2xl);

}


/* =========================================================
LOGO
========================================================= */

.logo {

font-family: var(--font-primary);

}

/* =========================================================
VAULT HEADER
========================================================= */

.vault-header {

backdrop-filter: blur(16px);
background: var(--surface-primary);
border-bottom: 1px solid var(--surface-border);

transition: 0.25s ease;

}

.vault-message {
    max-width: 900px;
    margin-inline: auto;
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    font-weight: 900;
    text-align: center;
}

.vault-message.success {

    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.35);
    background: rgba(0, 255, 136, 0.08);

}
.vault-message.warning {

    color: var(--color-warning);
    border: 1px solid rgba(255, 211, 0, 0.25);
    background: rgba(255, 211, 0, 0.06);

}

/* =========================================================
VAULT DASHBOARD
========================================================= */

.vault-dashboard {

display: flex;
flex-wrap: wrap;

justify-content: center;
align-items: center;

gap: var(--space-md);

padding-top: var(--space-sm);
padding-bottom: var(--space-lg);

}

.dashboard-chip {

display: inline-flex;
align-items: center;

gap: var(--space-sm);

min-height: 42px;

padding-inline: var(--space-lg);

border: 1px solid var(--surface-border-soft);
border-bottom: 1px solid var(--surface-border-active);
border-radius: var(--radius-pill);

background: rgba(255,255,255,0.03);

backdrop-filter: blur(10px);

box-shadow:
    0 0 12px rgba(0,0,0,0.12);

}

.dashboard-chip span {

color: var(--text-secondary);

font-size: 0.78rem;
font-weight: 700;

}

.dashboard-chip strong {

color: var(--text-primary);

font-size: 0.88rem;
font-weight: 800;

}


/* =========================================================
VAULT LIST
========================================================= */

.vault-list {

display: flex;
flex-direction: column;

gap: var(--space-lg);

}

.section-divider {
    width: 75%;
    height: 1px;
    margin: 0 auto 30px;
    background: linear-gradient(90deg, transparent, var(--text-primary), transparent);
    opacity: 0.5;
}

/* =========================================================
GAME RUNETIME LIST
========================================================= */

.runtime-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: 15px 25px 35px 25px;
}

.runtime-title {
    text-align: center;
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--theme-primary);
}

.runtime-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.runtime-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-lg);

    padding: var(--space-md) var(--space-lg);

    border: 1px solid var(--surface-border);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;

    background: rgba(255,255,255,0.035);
    backdrop-filter: blur(12px);
}

.runtime-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.runtime-info h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    text-transform: uppercase;
}

.runtime-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.runtime-continue {
    min-width: 120px;
}
.runtime-meta {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    padding-left: var(--space-md);
}

.runtime-progress-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-sm);
}

.runtime-status {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.runtime-status.active {
    color: var(--theme-primary);
}

.runtime-status.completed {
    color: #00ff88;
}

.runtime-progress {
    width: 100%;
    height: 6px;

    overflow: hidden;

    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.08);
}

.runtime-progress-fill {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        var(--theme-secondary),
        var(--theme-primary)
    );

    box-shadow: 0 0 10px var(--theme-glow);

    transition: width 0.35s ease;
}


/* =========================================================
GAME ROW
========================================================= */

.game-row {

position: relative;

overflow: hidden;

display: grid;
grid-template-columns: 1fr 240px;

border-radius: 0 22px 22px 0;

border: 1px solid rgba(255, 255, 255, 0.08);
border-left: 0px;

background:
    var(--card-bg) padding-box,
    linear-gradient(
        180deg,
        var(--theme-primary) 0%,
        var(--theme-primary) 40%,
        var(--theme-secondary) 100%
    ) border-box;

backdrop-filter: var(--surface-blur);

box-shadow: var(--shadow-medium);

transition:
    transform var(--transition-medium),
    border-color var(--transition-medium),
    box-shadow var(--transition-medium);

}

/* =========================================================
GAME BACKGROUND IMAGE
========================================================= */

.game-row::before {

content: "";

position: absolute;
inset: 0;

background-image: var(--game-cover);

background-size: cover;
background-position: center;

opacity: 0.5;

transition:
    transform 0.6s ease,
    opacity 0.6s ease;

}

.game-row::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    border-radius: 0;
    background: linear-gradient(var(--theme-primary), var(--theme-secondary));
    box-shadow: 0 0 12px var(--theme-glow);
}


/* =========================================================
GAME ROW HOVER
========================================================= */

.game-row:hover {

border-color: var(--theme-primary);

box-shadow:
    0 0 12px var(--theme-glow),
    var(--shadow-medium);

}

.game-row:hover::before {

opacity: 0.55;

}

/* =========================================================
GAME CONTENT LAYERS
========================================================= */

.game-content,
.game-actions {

position: relative;
z-index: var(--z-overlay);

}

/* =========================================================
GAME CONTENT
========================================================= */

.game-content {

display: flex;
flex-direction: column;
justify-content: space-between;

gap: var(--space-sm);

padding-left: var(--space-xl);
padding-right: var(--space-sm);
padding-top: var(--space-md);
padding-bottom: var(--space-md);

}

/* =========================================================
GAME HEADER
========================================================= */

.game-header {

display: flex;
flex-direction: column;

gap: var(--space-xs);

}

.game-header h2 {

margin: 0;

font-family: var(--font-primary);

font-size: 2rem;
font-weight: 800;

letter-spacing: 0.04em;

text-transform: uppercase;

text-shadow:
    0 0 10px rgba(0,0,0,0.4);

}

.game-subtitle {

color: var(--text-secondary);

font-size: 0.92rem;

}


/* =========================================================
GAME STATS
========================================================= */

.game-stats {

display: flex;
flex-wrap: wrap;

gap: var(--space-md);

}

.stat {

display: inline-flex;
align-items: center;

gap: var(--space-xs);

color: var(--text-primary);

font-size: 0.95rem;
font-weight: 700;

padding-top: 6px;
padding-bottom: 6px;
padding-inline: var(--space-sm);
border: 1px solid var(--surface-border);
border-radius: var(--radius-pill);
background: rgba(0, 0, 0, 0.3);

}

/* =========================================================
GAME TAGS
========================================================= */

.game-tags {

display: flex;
flex-wrap: wrap;

gap: var(--space-sm);

}

/* =========================================================
GAME ACTIONS
========================================================= */

.game-actions {

display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;

gap: var(--space-sm);

padding: var(--space-md);
padding-top: var(--space-md);
padding-bottom: var(--space-md);

border-left: 1px solid var(--card-divider);

}

/* =========================================================
EMPTY STATE
========================================================= */

.empty-state {

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

min-height: 320px;

text-align: center;

border: 1px dashed var(--surface-border);
border-radius: var(--radius-lg);

background: rgba(255,255,255,0.02);

}

.empty-state h2 {

font-family: var(--font-primary);

margin-bottom: var(--space-sm);

}


/* =========================================================
VAULT FOOTER
========================================================= */

.vault-footer {

    margin-top: var(--space-2xl);
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--space-lg);

    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);

    border-top: 1px solid var(--surface-border);

}

.footer-meta a {

    color: var(--theme-primary);

    text-decoration: none;

    border-bottom: 1px solid var(--theme-primary);

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast);

}

.footer-meta a:hover {

    color: var(--text-secondary);

    border-color: var(--text-primary);

}


/* =========================================================
COMPACT MODE
========================================================= */

body.compact-mode .vault-list {

gap: var(--space-md);

}

body.compact-mode .game-row {

min-height: 180px;

grid-template-columns: 1fr 180px;

}

body.compact-mode .game-content {

padding:
    var(--space-lg)
    var(--space-xl);

}

body.compact-mode .game-header h2 {

font-size: 1.4rem;

}

body.compact-mode .game-actions {

gap: var(--space-md);

}

/* =========================================================
RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1200px) {

.game-row {

    grid-template-columns: 1fr;

}

.game-actions {

    border-left: none;
    border-top: 1px solid var(--card-divider);

    padding: var(--space-2xl);
    
    flex-direction: row;
    justify-content: space-between;

}

}

/* =========================================================
RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 768px) {

.vault-list {

    gap: var(--space-lg);

}

.runtime-section {
    padding: 15px 0 35px 0;
}
.runtime-card {
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--space-lg);
}

.game-content {

    padding: var(--space-lg);

}

.game-actions {

    flex-wrap: wrap;

    gap: var(--space-md);

    padding: var(--space-lg);

}

.game-header h2 {

    font-size: 1.5rem;

}

}