.banlist-page {
    padding-top: 10px;
}

/* Intro */
.banlist-intro h1 {
    margin: 0 0 8px;
}

.banlist-intro p {
    max-width: 80ch;
    opacity: 0.9;
    margin: 0 0 18px;
}

/* Banlist Explanation box */
.ban-info {
    padding: 18px;
    border-radius: 16px;
    margin-bottom: 16px;
}

.ban-info h2 {
    margin: 0 0 10px;
}

.ban-bullets {
    margin: 0 0 10px 18px;
}

.ban-item {
    margin: 10px 0;
}

.ban-topic {
    display: block;
}

.ban-desc {
    display: block;
    margin-top: 4px;
    opacity: 0.9;
}

/* How to read + Legend (0–3) box */
.ban-legend {
    padding: 14px 16px;
    border-radius: 16px;
    margin-bottom: 16px;
}

.ban-note {
    margin: 0;
    opacity: 0.9;
}

.ban-note .ban-topic {
    display: block;
    margin-bottom: 6px;
}

/* Legend (0-3) values centered */
.ban-legend-values {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

/* Tabs container */
.ban-tabs {
    padding: 18px;
    border-radius: 16px;
    margin-bottom: 24px;
}

/* Hide Buttons */
.ban-tabs input {
    position: absolute;
    left: -9999px;
}

/* Buttons row */
.tab-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

/* Tab button */
.tab-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #2f2f2f;
    cursor: pointer;
    font-weight: 700;
    user-select: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* CARD COLORS */
/* Hover color for Monster */
label[for="tab-monsters"] {
    color: #BA6336;
    border-color: #BA6336;
}
label[for="tab-monsters"]:hover {
    background-color: #F6D2C2;
    color: #1a1a1a;
}

/* Hover color for Spell */
label[for="tab-spells"] {
    color: #028A76;
    border-color: #028A76;
}
label[for="tab-spells"]:hover {
    background-color: #BFEFE7;
    color: #1a1a1a;
}

/* Hover color for Trap */
label[for="tab-traps"] {
    color: #AE2678;
    border-color: #AE2678;
}
label[for="tab-traps"]:hover {
    background-color: #F1C2DA;
    color: #1a1a1a;
}

/* Tab color */
#tab-monsters:checked ~ .tab-buttons label[for="tab-monsters"] {
    background-color: #BA6336;
    color: #ffffff;
}

#tab-spells:checked ~ .tab-buttons label[for="tab-spells"] {
    background-color: #028A76;
    color: #ffffff;
}

#tab-traps:checked ~ .tab-buttons label[for="tab-traps"] {
    background-color: #AE2678;
    color: #ffffff;
}

/* Tab panels - show & hide */
.tab-panel {
    display: none;
}

#tab-monsters:checked ~ .tab-content .monsters { display: block; }
#tab-spells:checked   ~ .tab-content .spells   { display: block; }
#tab-traps:checked    ~ .tab-content .traps    { display: block; }

/* Tab title */
.tab-title {
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 800;
}

/* Table */
.ban-table {
    width: 100%;
    border-collapse: collapse;
}

.ban-table th,
.ban-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #2f2f2f;
}

.ban-table th {
    text-align: left;
    opacity: 0.9;
}

/* Columns TCG/OCG/MD centered */
.ban-table th:nth-child(n+2),
.ban-table td:nth-child(n+2) {
    text-align: center;
    width: 120px;
}

/* Source link */
.ban-links {
    margin: 12px 0 0;
    opacity: 0.9;
}

.ban-link {
    color: #e87100;
    text-decoration: underline;
    font-weight: 700;
}