/*
 * css/legal.css - Rules & Legal page (gamerules.php, tos.php).
 * Everything is scoped under #mcl-legal: styles.css has ID rules like
 * "#content a { color:#000 }" that would otherwise win.
 */

#mcl-legal {
    --lg-bg: #1b1b1d;
    --lg-panel: #232326;
    --lg-panel-2: #2a2a2e;
    --lg-line: #3a3a3f;
    --lg-text: #d8d5ce;
    --lg-muted: #9c988f;
    --lg-amber: #e8952a;
    --lg-amber-hi: #ffb04d;
    --lg-red: #d9503a;
    --lg-green: #7fb35a;
    --lg-head: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;

    margin: 0 0 16px 0;
    background: var(--lg-bg);
    color: var(--lg-text);
    border: 1px solid #000;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
    overflow: hidden;
}
#mcl-legal *, #mcl-legal *::before, #mcl-legal *::after { box-sizing: border-box; }

/* ---------- head ---------- */
#mcl-legal .lg-head {
    padding: 18px 20px 14px 20px;
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%),
        repeating-linear-gradient(135deg, #26262a 0 6px, #222225 6px 12px);
    border-bottom: 3px solid var(--lg-amber);
}
#mcl-legal .lg-head h2 {
    margin: 0;
    font-family: var(--lg-head);
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
}
#mcl-legal .lg-head p { margin: 6px 0 0 0; color: var(--lg-muted); font-size: 13px; text-align: left; width: auto; }

/* ---------- tabs ---------- */
#mcl-legal .lg-tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: #121214;
    border-bottom: 1px solid var(--lg-line);
}
#mcl-legal .lg-tabs a {
    display: block;
    padding: 11px 6px;
    text-align: center;
    color: var(--lg-muted);
    font-family: var(--lg-head);
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.25;
    border-right: 1px solid #1f1f22;
    border-bottom: 3px solid transparent;
}
#mcl-legal .lg-tabs a:last-child { border-right: 0; }
#mcl-legal .lg-tabs a:hover { color: #fff; background: #1d1d20; }
#mcl-legal .lg-tabs a.on { color: var(--lg-amber-hi); background: var(--lg-panel); border-bottom-color: var(--lg-amber); }
#mcl-legal .lg-tabs a:focus-visible { outline: 2px solid var(--lg-amber-hi); outline-offset: -2px; }

#mcl-legal .lg-draft {
    margin: 14px 20px 0 20px;
    padding: 8px 12px;
    border: 1px dashed var(--lg-amber);
    border-radius: 4px;
    color: var(--lg-amber-hi);
    background: rgba(232,149,42,0.08);
    font-size: 12px;
}

/* ---------- body: optional jump list + document ---------- */
#mcl-legal .lg-body { padding: 16px 20px 22px 20px; }
#mcl-legal .lg-body.has-toc { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; align-items: start; }
#mcl-legal .lg-toc {
    position: sticky;
    top: 10px;
    background: var(--lg-panel);
    border: 1px solid var(--lg-line);
    border-radius: 5px;
    padding: 10px 12px;
}
#mcl-legal .lg-toc h4 {
    margin: 0 0 6px 0;
    font-family: var(--lg-head);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lg-muted);
}
#mcl-legal .lg-toc ol { margin: 0; padding: 0 0 0 18px; color: var(--lg-muted); font-size: 12px; }
#mcl-legal .lg-toc li { padding: 2px 0; line-height: 1.35; }
#mcl-legal .lg-toc a { color: var(--lg-text); text-decoration: none; }
#mcl-legal .lg-toc a:hover { color: var(--lg-amber-hi); text-decoration: underline; }

#mcl-legal .lg-dates { margin: 0 0 10px 0; color: var(--lg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; text-align: left; width: auto; }

/* ---------- document text ---------- */
#mcl-legal .lg-doc { min-width: 0; }
#mcl-legal .lg-doc p { margin: 8px 0; text-align: left; width: auto; }
#mcl-legal .lg-doc ul, #mcl-legal .lg-doc ol { margin: 6px 0 10px 0; padding-left: 22px; }
#mcl-legal .lg-doc li { margin: 3px 0; }
#mcl-legal .lg-doc b, #mcl-legal .lg-doc strong { color: #fff; }
#mcl-legal .lg-doc a, #mcl-legal .lg-head a { color: var(--lg-amber-hi); text-decoration: none; font-weight: bold; }
#mcl-legal .lg-doc a:hover { text-decoration: underline; }
#mcl-legal .lg-lead { font-size: 14px; color: #ece9e2; }

#mcl-legal .lg-sec { padding: 14px 0 6px 0; border-top: 1px solid var(--lg-line); scroll-margin-top: 10px; }
#mcl-legal .lg-sec:first-of-type { border-top: 0; }
#mcl-legal .lg-sec h3 {
    margin: 0 0 4px 0;
    font-family: var(--lg-head);
    font-size: 17px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--lg-amber);
}
#mcl-legal .lg-sec h3 .n { color: var(--lg-muted); margin-right: 6px; }
#mcl-legal .lg-sec h5 { margin: 10px 0 2px 0; font-size: 13px; color: #fff; }
#mcl-legal :target { animation: lg-flash 1.6s ease-out 1; }
@keyframes lg-flash { from { background: rgba(232,149,42,0.18); } to { background: transparent; } }

#mcl-legal .lg-callout {
    margin: 12px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--lg-amber);
    background: var(--lg-panel);
    border-radius: 0 4px 4px 0;
}
#mcl-legal .lg-callout.red { border-left-color: var(--lg-red); }
#mcl-legal .lg-caps { text-transform: uppercase; font-size: 12px; letter-spacing: 0.2px; }

/* tables (privacy, odds) */
#mcl-legal .lg-table-wrap { overflow-x: auto; margin: 8px 0 12px 0; }
#mcl-legal table.lg-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--lg-panel); }
#mcl-legal table.lg-table th {
    text-align: left;
    padding: 7px 9px;
    background: #121214;
    color: var(--lg-muted);
    font-family: var(--lg-head);
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--lg-line);
}
#mcl-legal table.lg-table td { padding: 6px 9px; border-bottom: 1px solid #2f2f33; vertical-align: top; color: var(--lg-text); }
#mcl-legal table.lg-table tr:last-child td { border-bottom: 0; }
#mcl-legal table.lg-table td.num, #mcl-legal table.lg-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#mcl-legal table.lg-table tfoot td { color: #fff; font-weight: bold; background: var(--lg-panel-2); }

#mcl-legal .lg-badge { display: inline-block; margin: 0 4px; padding: 0 7px; border-radius: 3px; font-size: 10.5px; font-weight: bold; letter-spacing: 0.3px; text-transform: uppercase; vertical-align: 1px; }
#mcl-legal .lg-badge.open { background: rgba(127,179,90,0.18); color: #b5dd96; }
#mcl-legal .lg-badge.closed { background: rgba(217,80,58,0.16); color: #ffb3a6; }

/* ---------- Game Rules tab: offense cards ---------- */
#mcl-legal .lg-ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 10px 0 4px 0;
    font-size: 12px;
}
#mcl-legal .lg-ladder span {
    padding: 3px 9px;
    border-radius: 3px;
    background: var(--lg-panel-2);
    border: 1px solid var(--lg-line);
    color: #fff;
    white-space: nowrap;
}
#mcl-legal .lg-ladder i { color: var(--lg-muted); font-style: normal; }
#mcl-legal .lg-ladder span.hot { border-color: var(--lg-red); color: #ffb3a6; }

#mcl-legal .lg-cards { margin-top: 14px; display: grid; gap: 10px; }
#mcl-legal .lg-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 16px;
    background: var(--lg-panel);
    border: 1px solid var(--lg-line);
    border-left: 4px solid var(--lg-amber);
    border-radius: 4px;
    scroll-margin-top: 10px;
}
#mcl-legal .lg-card.zero { border-left-color: var(--lg-red); }
#mcl-legal .lg-card .ic { width: 64px; height: 64px; color: var(--lg-amber); }
#mcl-legal .lg-card.zero .ic { color: var(--lg-red); }
#mcl-legal .lg-card .ic svg { width: 64px; height: 64px; display: block; }
#mcl-legal .lg-card h3 {
    margin: 0;
    font-family: var(--lg-head);
    font-size: 17px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #fff;
}
#mcl-legal .lg-card .pen {
    display: inline-block;
    margin: 3px 0 4px 0;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.3px;
    background: rgba(232,149,42,0.14);
    color: var(--lg-amber-hi);
}
#mcl-legal .lg-card.zero .pen { background: rgba(217,80,58,0.16); color: #ffb3a6; }
#mcl-legal .lg-card p { margin: 4px 0; }

#mcl-legal .lg-talk { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
#mcl-legal .lg-talk div { padding: 6px 0 6px 12px; border-left: 2px solid var(--lg-line); scroll-margin-top: 10px; }
#mcl-legal .lg-talk b { display: block; color: var(--lg-amber-hi); font-size: 12.5px; }
#mcl-legal .lg-talk p { margin: 1px 0 0 0; font-size: 12.5px; line-height: 1.5; }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
    #mcl-legal { border-radius: 0; }
    #mcl-legal .lg-head { padding: 14px 16px 12px 16px; }
    #mcl-legal .lg-head h2 { font-size: 23px; }
    #mcl-legal .lg-tabs { grid-template-columns: repeat(3, 1fr); }
    #mcl-legal .lg-tabs a { border-bottom: 1px solid #1f1f22; padding: 10px 4px; }
    #mcl-legal .lg-tabs a.on { border-bottom: 3px solid var(--lg-amber); }
    #mcl-legal .lg-draft { margin: 12px 16px 0 16px; }
    #mcl-legal .lg-body { padding: 14px 16px 18px 16px; }
    #mcl-legal .lg-body.has-toc { display: block; }
    #mcl-legal .lg-toc { position: static; margin-bottom: 14px; }
    #mcl-legal .lg-card { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 12px; }
    #mcl-legal .lg-card .ic, #mcl-legal .lg-card .ic svg { width: 44px; height: 44px; }
    #mcl-legal .lg-talk { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    #mcl-legal .lg-tabs { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    #mcl-legal :target { animation: none; }
}