/* Shared controls keep their behavior; the selected appearance supplies the skin. */
.levels-section-nav { padding: .75rem; }
.level-card-extras { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .65rem 0; font-size: .85rem; }
.level-preview-players { display: inline-flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.level-preview-players img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.level-title-link { color: inherit; text-decoration: none; }
.level-title-link:hover { text-decoration: underline; }
[data-top-player][hidden] { display: none !important; }
.notif-panel-wrap.is-hidden, .notif-page-wrap.is-hidden { display: none !important; }

html:not([data-site-style="v2"]) {
    --av2-bg: var(--body-bg);
    --av2-bg-2: var(--panel-bg);
    --av2-ink: var(--body-text);
    --av2-muted: var(--muted-color);
    --av2-line: var(--border-subtle);
    --av2-card: var(--card-bg);
    --av2-card-2: var(--panel-bg);
    --av2-blue: #2563eb;
    --av2-blue-2: #3b82f6;
    --av2-sky: var(--heading-color);
    --av2-gold: #d97706;
    --av2-shadow: var(--card-shadow);
}
html[data-site-style="new"] { --av2-blue: #c2410c; --av2-blue-2: #f97316; }
html:not([data-site-style="v2"]) .av2-page {
    color: var(--body-text);
    background: var(--body-bg);
    font-family: 'Inter', system-ui, sans-serif;
}
html:not([data-site-style="v2"]) .av2-page::before { display: none; }
html:not([data-site-style="v2"]) .av2-page :is(.av2-gd, .tmx-date, .tmx-tick, .tm-race-rank, .tm-race-name, .tm-race-value) {
    font-family: inherit;
    text-transform: none;
    font-weight: 700;
    text-shadow: none;
    letter-spacing: normal;
}
html:not([data-site-style="v2"]) .av2-page .av2-hero h1 {
    color: var(--heading-color);
    background: none;
    filter: none;
}
html:not([data-site-style="v2"]) .av2-page :is(.av2-panel, .av2-card, .av2-stat, .ylx-card, .tpx-card, .rcx-step) {
    background: var(--card-bg);
    color: var(--body-text);
    border: 1px solid var(--border-subtle);
    border-radius: .5rem;
    box-shadow: var(--card-shadow);
}
html[data-site-style="new"] .av2-page :is(.av2-panel, .av2-card, .av2-stat, .ylx-card, .tpx-card) { border-radius: 1rem; }
html:not([data-site-style="v2"]) .av2-page :is(.av2-stat b, .av2-name a, .tmx-date, .tmx-date-sub #tmx-count, .tmx-feed-list b, .rcx-percent-sub, .ylx-card h3 a, .tpx-name, .tpx-points > b) {
    color: var(--body-text) !important;
    text-shadow: none;
}
html:not([data-site-style="v2"]) :is(.av2-copy, .av2-page .av2-input, .av2-page .av2-select, .av2-page .av2-field input, .av2-page .av2-field select, .av2-page .av2-seg) {
    background-color: var(--card-bg);
    color: var(--body-text);
    border: 1px solid var(--border-subtle);
    border-radius: .4rem;
    box-shadow: none;
}
html:not([data-site-style="v2"]) .av2-copy {
    display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .5rem; cursor: pointer;
}
html:not([data-site-style="v2"]) .av2-copy i { font-style: normal; }
html:not([data-site-style="v2"]) .av2-page :is(.av2-chip, .av2-seg a, .av2-seg button) { color: var(--body-text) !important; }
html:not([data-site-style="v2"]) .av2-page :is(.av2-btn, .av2-seg .is-on) { color: #fff !important; background: var(--av2-blue); box-shadow: none; }
html:not([data-site-style="v2"]) .av2-page .av2-btn.is-ghost { color: var(--body-text) !important; background: var(--panel-bg); border: 1px solid var(--border-subtle); }
html:not([data-site-style="v2"]) .av2-page .av2-btn.is-ok { background: #15803d; }
html:not([data-site-style="v2"]) .av2-page .av2-btn.is-danger { background: #b91c1c; }
html:not([data-site-style="v2"]) .av2-page .tmx-feed { color: var(--body-text); }
html:not([data-site-style="v2"]) .av2-toast {
    position: fixed; left: 50%; bottom: 1.5rem; z-index: 3000; transform: translateX(-50%);
    padding: .6rem 1rem; border-radius: .5rem; background: var(--card-bg); color: var(--body-text);
    border: 1px solid var(--border-subtle); box-shadow: var(--card-shadow); opacity: 0; pointer-events: none;
}
html:not([data-site-style="v2"]) .av2-toast.is-on { opacity: 1; }

/* The constellation controller is shared; its minimap also needs a base skin. */
.cstx-minimap { position: absolute; right: .8rem; bottom: .8rem; z-index: 5; width: 170px; height: 170px; overflow: hidden; border-radius: .8rem; background: rgba(3,4,26,.85); border: 1px solid #8fa0ff; cursor: pointer; }
.cstx-minimap canvas { display: block; width: 100%; height: 100%; }
.cstx-minimap-view { position: absolute; border: 2px solid #ffd84a; pointer-events: none; }
.mp-card.is-picked { outline: 2px solid var(--heading-color); outline-offset: 2px; }

/* The legacy profile exposes the same overview, using its existing plain cards. */
[data-site-style="classic"] .ppv2-overview { display: grid; gap: 1rem; }
[data-site-style="classic"] :is(.ppv2-ov-grid, .ppv2-ov-id ul) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .75rem; }
[data-site-style="classic"] :is(.ppv2-ov-card, .ppv2-ov-id, .ppv2-ov-hello) { padding: 1rem; background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: .5rem; }
[data-site-style="classic"] .ppv2-ov-level { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
[data-site-style="classic"] .ppv2-ov-art { max-width: 100%; width: 160px; height: 90px; object-fit: cover; border-radius: .4rem; }
[data-site-style="classic"] .ppv2-ov-art.sm { width: 64px; height: 40px; }
[data-site-style="classic"] .ppv2-ov-diff { width: 28px; height: 28px; object-fit: contain; }
[data-site-style="classic"] :is(.ppv2-ov-fav, .ppv2-ov-side) { padding: 1rem; display: grid; gap: .75rem; min-width: 0; }
[data-site-style="classic"] .ppv2-ov-results { max-height: 16rem; overflow: auto; }
[data-site-style="classic"] .ppv2-ov-level-copy { display: flex; flex-direction: column; gap: .25rem; }
[data-site-style="classic"] .ppv2-ov-id ul { padding: 0; list-style: none; }
[data-site-style="classic"] .ppv2-ov-id li { display: flex; justify-content: space-between; gap: .5rem; }
.ppv2-ov-id li.is-link { cursor: pointer; }
html:not([data-site-style="v2"]) .vx :is(.vx-card, .vx-step, .vx-stats > div, .vx-chart) { background: var(--card-bg); border-color: var(--border-subtle); color: var(--body-text); box-shadow: var(--card-shadow); }
html:not([data-site-style="v2"]) .vx :is(.av2-gd, .vx-stats b, .vx-num, .vx-nick a) { color: var(--body-text); font-family: inherit; text-shadow: none; }
html:not([data-site-style="v2"]) .vx :is(.av2-seg, .av2-panel) { display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; border: 1px solid var(--border-subtle); border-radius: .5rem; }
html:not([data-site-style="v2"]) .vx .av2-seg button { padding: .3rem .55rem; border: 0; border-radius: .3rem; background: var(--panel-bg); color: var(--body-text); }
html:not([data-site-style="v2"]) .vx .av2-seg button.is-on { background: var(--av2-blue); color: #fff; }
html:not([data-site-style="v2"]) .vx :is(.av2-input, .av2-select) { width: 100%; border: 1px solid var(--border-subtle); background: var(--card-bg); color: var(--body-text); padding: .5rem; border-radius: .4rem; }
html:not([data-site-style="v2"]) .vx .av2-btn { display: inline-flex; padding: .4rem .7rem; background: var(--av2-blue); color: #fff; border-radius: .4rem; text-decoration: none; }
html:not([data-site-style="v2"]) .av2-page :is(.cvx-card, .exd-item, .exd-summary, .rcx-end) { color: var(--body-text); background: var(--card-bg); border-color: var(--border-subtle); }
html[data-site-style="classic"].hq-home, html[data-site-style="classic"].hq-home body, [data-site-style="classic"] .ac-site-main:has(.hq-page) { background: var(--body-bg); }
[data-site-style="classic"] .hq-page { color: var(--body-text); }
[data-site-style="classic"] .hq-canvas { display: none; }
[data-site-style="classic"] :is(.hq-panel, .hq-feed-card, .hq-stat, .hq-orb, .hq-chip) { background: var(--card-bg); color: var(--body-text); border: 1px solid var(--border-subtle); border-radius: .5rem; box-shadow: none; }
[data-site-style="classic"] .hq-hero h1 { color: var(--heading-color); background: none; filter: none; }
html:not([data-site-style="v2"]) :is(.abv2-morph, .abv2-merge) { background: var(--card-bg); border-color: var(--border-subtle); color: var(--body-text); }
html:not([data-site-style="v2"]) .abv2-morph-word { color: var(--body-text); }
@media (max-width: 767.98px) { .cstx-minimap { width: 110px; height: 110px; } }

/* Date-based appearance picker. */
.style-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.style-preset-card { display: grid; gap: .45rem; padding: .8rem; border: 2px solid var(--border-subtle); border-radius: .75rem; background: var(--card-bg); cursor: pointer; min-width: 0; }
.style-preset-card:has(input:checked) { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
.style-preset-card small { color: var(--muted-color); }
.style-preset-mini { display: grid; gap: .5rem; padding: .5rem; border: 1px solid #999; border-radius: .3rem; background: #f8fafc; color: #172554; }
.style-preset-mini i { height: .5rem; background: #1e3a8a; }
.style-preset-mini b { width: 2.5rem; padding: .1rem; background: #2563eb; color: #fff; text-align: center; }
[data-preset-preview="2023-01"] .style-preset-mini { background: #ece9d8; border: 3px outset #1c57dc; border-radius: .5rem .5rem 0 0; }
[data-preset-preview="1995-08"] .style-preset-mini { background: #c0c0c0; color: #000; border: 3px outset #dfdfdf; border-radius: 0; }
[data-preset-preview="1995-08"] .style-preset-mini i { background: #000080; }
[data-preset-preview="1995-08"] .style-preset-mini b { background: #c0c0c0; color: #000; border: 2px outset #fff; border-radius: 0; }
[data-preset-preview="worms-armageddon"] .style-preset-mini { background: radial-gradient(circle at 25% 35%, #90b5ff 1px, transparent 2px) 0 0 / 35px 22px, #060c46; color: #ffdb60; border: 2px solid #6270a8; }
[data-preset-preview="worms-armageddon"] .style-preset-mini i { background: #080b20; border: 1px solid #7585b2; }
[data-preset-preview="worms-armageddon"] .style-preset-mini b { background: #000; color: #21e9f6; border: 2px outset #8290bc; }
[data-preset-preview="heroes-1"] .style-preset-mini { background: url('/static/images/themes/heroes1/stone.png') center / 220px; color: #ffe780; border: 3px ridge #b88d38; font-family: Georgia, serif; }
[data-preset-preview="heroes-1"] .style-preset-mini i { background: #6e153a; border-block: 1px solid #d8ac43; }
[data-preset-preview="heroes-1"] .style-preset-mini b { background: linear-gradient(#f2d372, #9b6918); color: #281800; border: 2px outset #dfba53; }
[data-preset-preview="2023-01"] .style-preset-mini i { background: linear-gradient(#66a3ff,#0753df); }
[data-preset-preview="2023-01"] .style-preset-mini b { background: linear-gradient(#83c460,#318522); border: 2px outset #9ddc83; border-radius: .4rem; }
[data-preset-preview="2026-07"] .style-preset-mini { background: #182335; color: #fff; border-radius: .8rem; }
[data-preset-preview="2026-07"] .style-preset-mini i, [data-preset-preview="2026-07"] .style-preset-mini b { background: #f97316; }
[data-preset-preview="2026-11"] .style-preset-mini { background: #03041a; color: #fff; border-color: #8fa0ff; border-radius: .8rem; }
[data-preset-preview="2026-11"] .style-preset-mini i, [data-preset-preview="2026-11"] .style-preset-mini b { background: #3b49ff; }
@media (max-width: 520px) { .style-preset-grid { grid-template-columns: minmax(0, 1fr); } }