:root {
    --bg-page: #121418;        
    --bg-card: #111111;        
    --bg-elev: #0d0d0d;        
    --bg-hover: #1a1a1a;       
    --text: #ffffff;           
    --text-dim: rgba(255,255,255,.6); 
    --gold: #FDCB32;           
    --gold-hover: #ffd700;     
    --border: rgba(255,255,255,.1);    
    --border-strong: #2a2a2a;  
    --red: #e74c3c;            
    --green: #2ecc71;          
}

body {
    background-color: var(--bg-page);
    color: var(--text);
}

h1.yy,
.yy {
    color: var(--gold);
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--gold) !important;
    font-weight: 600;
}

.card {
    background-color: var(--bg-card);
    color: var(--text);
    border: 1px solid rgba(255,255,255,.1) !important;
}

#hostGame .col-3 .card {
    border: 1px solid rgba(255,255,255,.1) !important;
}
.card:hover {
    box-shadow: 0 0 12px 2px rgba(253,203,50,.55);
}
.card-newest {
    position: relative;
    box-shadow: 0 0 14px 3px rgba(253,203,50,.8) !important;
}

.card-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: url(../images/jingpin.gif) no-repeat center / contain;
    z-index: 20;
    pointer-events: none;
}
.card-newest:hover {
    box-shadow: 0 0 22px 6px rgba(253,203,50,1) !important;
}
@keyframes cardGlow {
    0%, 100% { box-shadow: 0 0 14px 3px rgba(253,203,50,.8); }
    50%      { box-shadow: 0 0 22px 6px rgba(253,203,50,1); }
}

.card-pending .card-img-top {
    background: #161616 !important;
    color: #888 !important;
    border: 2px dashed rgba(255,255,255,.18) !important;
}

.merge-rules-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-top: 3px solid var(--gold);
    box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.merge-rules-panel h3 {
    color: var(--gold);
    border-bottom: 2px solid var(--border-strong);
}
.merge-rules-panel h3::after {
    background: var(--gold);
}
.merge-rule-card {
    background: var(--bg-hover);
    border: 1px solid var(--border);
}
.merge-rule-card:hover {
    border-color: var(--gold);
    background: #222;
    box-shadow: 0 4px 18px rgba(253,203,50,.15);
    transform: translateY(-3px);
}

.merge-rule-card.mrc-active {
    border-color: var(--gold);
    background: #222;
    box-shadow: 0 4px 18px rgba(253,203,50,.15);
    transform: translateY(-3px);
}
.merge-rule-card .mrc-label {
    color: var(--text-dim);
}
.merge-rule-card .mrc-val {
    color: #fff;
}
.merge-rule-card .mrc-desc {
    color: var(--text-dim);
}
.merge-rules-note {
    background: rgba(253,203,50,.08);
    border: 1px solid rgba(253,203,50,.25);
    border-left: 4px solid var(--gold);
    color: #d8c08a;
    line-height: 2;
}
.merge-rules-note b {
    color: var(--gold);
}

.btn-primary {
    background-color: var(--gold);
    border-color: var(--gold);
    color: #0a0a0a;
}
.btn-primary:hover {
    background-color: var(--gold-hover);
    border-color: var(--gold-hover);
    color: #0a0a0a;
}

.footer {
    background: var(--bg-elev);
    border-top: 1px solid var(--border-strong);
    color: rgba(255,255,255,.85);
}