/* opupa.pl custom CSS layer */

:root {
    --bg-deep: #0a0604;
    --bg-panel: rgba(10, 6, 4, 0.85);
    --bg-panel-hl: rgba(38, 25, 10, 0.9);
    --bg-beam: #1a0f06;
    --text-primary: #e8dcc4;
    --text-secondary: #d4c9a8;
    --text-muted: #8a7e5c;
    --gold: #c9a961;
    --gold-deep: #8a6b1f;
    --gold-hi: #f4e8c4;
    --ember: #ea6820;
    --ember-hi: #fcd34d;
    --win: #9dc4a8;
    --win-bg: #1f3a2a;
    --loss: #a8280c;
    --wax: #7a1f0a;
    --wax-hi: #a8280c;
    --border-dk: #3a2f1c;
}

html, body { background: var(--bg-deep); }
body { font-feature-settings: "kern" 1, "liga" 1; }

.stat-num { font-variant-numeric: tabular-nums; }

.card-tavern {
    background: var(--bg-panel);
    border: 1px solid var(--border-dk);
    padding: 1.25rem;
    position: relative;
}
.card-tavern::before,
.card-tavern::after {
    content: ''; position: absolute; width: 11px; height: 11px;
    border: 2px solid var(--gold); opacity: 0.55;
}
.card-tavern::before { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.card-tavern::after  { bottom: 4px; right: 4px; border-left: none; border-top: none; }

.divider-ornament {
    display: flex; align-items: center; gap: 0.75rem;
    color: var(--gold); letter-spacing: 3px; text-transform: uppercase;
    font-family: 'Cinzel', serif; font-size: 0.8rem;
    margin: 1.5rem 0;
}
.divider-ornament::before,
.divider-ornament::after {
    content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.divider-ornament .diamond { transform: rotate(45deg); width: 6px; height: 6px; background: var(--gold); }

.btn-tavern {
    font-family: 'Cinzel', serif; letter-spacing: 2px;
    background: linear-gradient(180deg, var(--gold-deep), #604d15);
    color: var(--bg-deep); padding: 0.6rem 1.5rem; border: 1px solid var(--gold);
    transition: all 0.2s ease; display: inline-block; text-transform: uppercase; font-size: 0.85rem;
}
.btn-tavern:hover { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #000; }

.chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.15rem 0.6rem; border: 1px solid var(--border-dk); border-radius: 999px;
    font-size: 0.8rem; background: rgba(0,0,0,0.3);
}
.chip-winner { border-color: var(--win); color: var(--win); background: rgba(31,58,42,0.5); }
.chip-parallel { border-color: var(--ember); color: var(--ember-hi); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}