/* ═══════════════════════════════════════════════════════════════
   VE TOWER STAGE (vetower.php)
   Builds on css/character.css (cd-* tokens, panels, tabs, buttons, .it-*
   items) and css/events.css (ev-* hero, quests, ranking, opponents);
   everything here is vt-* scoped. Static by design: no loaders.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: banner | text | the stage boss ───────────────────────── */
.ev-hero.vt-hero > .vt-hero-boss {
    position: absolute;
    right: -12px;
    bottom: -18px;
    width: 150px;
    height: auto;
    max-width: none;
    opacity: 0.3;
    pointer-events: none;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}
@media (min-width: 760px) and (max-width: 991.98px) {   /* two columns: the boss stands under the banner */
    .ev-hero.vt-hero { grid-template-rows: auto 1fr; }
    .ev-hero.vt-hero > .ev-hero-banner { grid-column: 1; grid-row: 1; }
    .ev-hero.vt-hero > .ev-hero-text { grid-column: 2; grid-row: 1 / span 2; }
    .ev-hero.vt-hero > .vt-hero-boss {
        position: relative;
        grid-column: 1;
        grid-row: 2;
        right: auto;
        bottom: auto;
        justify-self: center;
        align-self: end;
        width: 170px;
        margin-bottom: -26px;
        opacity: 1;
    }
}
@media (min-width: 992px) {
    .ev-hero.vt-hero { grid-template-columns: minmax(0, 330px) minmax(0, 1fr) 200px; }
    .ev-hero.vt-hero > .vt-hero-boss {
        position: relative;
        grid-column: 3;
        grid-row: 1;
        right: auto;
        bottom: auto;
        align-self: end;
        width: 100%;
        margin: -12px 0 -26px;
        opacity: 1;
    }
}
.vt-hero .ev-dates > div { grid-template-columns: minmax(8.5em, auto) minmax(0, 1fr); }
.vt-hero .ev-dates dd .ev-badge { margin-left: 4px; vertical-align: 1px; }

/* ── Small parts ────────────────────────────────────────────────── */
.vt-diffs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.vt-diffs small { flex-basis: 100%; color: var(--text-3); font-size: 0.76rem; }
.vt-diff {
    display: inline-flex;
    justify-content: center;
    min-width: 2.3em;
    padding: 0 7px;
    border: 1px solid var(--dc);
    border-radius: 6px;
    background: rgba(10, 22, 40, 0.6);   /* browsers without color-mix() */
    background: color-mix(in srgb, var(--dc) 34%, rgba(10, 22, 40, 0.6));
    color: #fff;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1.6;
    white-space: nowrap;
}
.vt-tab-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); vertical-align: 1px; }
.vt-attrs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.vt-attrs > span { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.vt-attrs img { width: 22px; height: 22px; }
.vt-inf {
    display: inline-block;
    padding: 0 6px;
    border: 1px dashed rgba(255, 213, 83, 0.55);
    border-radius: 999px;
    color: var(--gold);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: 1px;
    cursor: help;
}
.vt-gap { margin: 8px 0 0; }
.vt-b-boss { background: rgba(232, 65, 60, 0.85); color: #fff; font-size: 0.64rem; }
.vt-b-shuffle { background: rgba(91, 149, 237, 0.2); color: #a9c8ff; cursor: help; }
.vt-b-ss { background: rgba(235, 74, 65, 0.25); color: #ffb0ad; }

/* ── Rankings (per season) ──────────────────────────────────────── */
.vt-season { display: grid; gap: 10px; }
.vt-season .cd-sub-h { margin: 8px 0 0; }
.vt-season-badges { margin: 0; }
.vt-facts { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); }
.vt-facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 10px; font-size: 0.88rem; }
.vt-facts dt { color: var(--text-3); font-size: 0.78rem; font-weight: 600; }
.vt-facts dd { margin: 0; min-width: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vt-facts small { color: var(--text-3); }
@media (min-width: 576px) {
    .vt-facts > div { grid-template-columns: 9.5em minmax(0, 1fr); align-items: baseline; }
}
.vt-gachas .ev-gacha { max-width: 480px; }
.vt-shop { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vt-shop li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); min-width: 0; }
.vt-shop li > .it { flex: 1 1 220px; }
.vt-shop-p { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.vt-shop-p b { color: #fff; }
.vt-shop-m { color: var(--text-2); font-size: 0.8rem; }
.vt-notices { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.vt-notice {
    display: grid;
    gap: 1px;
    max-width: 100%;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid var(--acc2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    text-decoration: none;
}
.vt-notice:hover { background: rgba(255, 255, 255, 0.07); }
.vt-notice:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.vt-notice span { color: var(--acc2); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.cd-jp .vt-notice span { letter-spacing: 0; }
.vt-notice small { color: var(--text); font-size: 0.84rem; overflow-wrap: anywhere; }

/* ── How it works ───────────────────────────────────────────────── */
.vt-rules { display: grid; gap: 6px; margin: 0 0 14px; padding-left: 1.2em; color: var(--text-2); font-size: 0.88rem; }
.vt-rules li::marker { color: var(--acc2); }
.vt-dtable th[scope="row"] { width: 4.5em; }
.vt-dtable td.ev-num, .vt-dtable td.vt-lv { white-space: nowrap; }
.vt-dtable th.ev-num { text-align: right; }
.vt-dtable .ev-cur .it-tile .it-ic { width: 20px; }
@media (max-width: 575.98px) {   /* five columns fit a phone without scrolling sideways */
    .vt-dtable { font-size: 0.76rem; }
    .vt-dtable th, .vt-dtable td { padding: 6px 3px; }
    .vt-dtable thead th { font-size: 0.66rem; line-height: 1.25; vertical-align: bottom; }
    .vt-dtable th[scope="row"] { width: auto; }
    .vt-dtable .vt-diff { min-width: 2em; padding: 0 5px; }
    .vt-dtable .ev-cur .it-tile .it-ic { width: 16px; }
}
.vt-help { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); align-items: start; gap: 4px 6px; }
.vt-help-t { border-radius: 8px; background: rgba(255, 255, 255, 0.03); }
.vt-help-t > summary { padding: 7px 12px; color: var(--text); font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.vt-help-t > summary:hover { color: var(--acc2); }
.vt-help-t > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-radius: 8px; }
.vt-help-b { padding: 0 12px 10px; color: #d6def0; font-size: 0.84rem; line-height: 1.55; }
.vt-help-b p { margin: 0 0 8px; overflow-wrap: anywhere; }
.vt-help-b p:last-child { margin-bottom: 0; }
.vt-help-b b { display: inline-block; margin-top: 2px; color: var(--gold); font-weight: 700; }

/* ── Boost characters: every card, effective types ringed ───────── */
.vt-filter { margin: 0 0 10px; }
.vt-boost { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vt-boost-c { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); min-width: 0; }
.vt-boost-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.vt-boost-head .ev-boost-name small { color: var(--text-3); font-weight: 600; font-size: 0.74rem; }
.vt-boost-head .ev-boost-fx { margin: 0; }
.vt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.vt-cards .it-tile { display: block; }
.vt-cards .it-tile .it-ic { width: 100%; }
.vt-cards > li { border-radius: 7px; }
.vt-cards > li.is-eff { box-shadow: 0 0 0 2px var(--up); }
.vt-boost.is-eff-only .vt-cards > li:not(.is-eff) { display: none; }

/* ── Floors ─────────────────────────────────────────────────────── */
.vt-dsum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); font-size: 0.84rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vt-dsum > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.vt-dsum b { color: #fff; }
.vt-dsum small { color: var(--text-3); }
.vt-k { color: var(--text-3); font-size: 0.76rem; font-weight: 700; }
.vt-floor { gap: 10px; }
.vt-arena { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vt-arena img { flex: none; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.vt-arena span { font-size: 0.86rem; overflow-wrap: anywhere; }
.vt-foes-h { margin: 2px 0 0; color: var(--text-3); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.4px; }
.vt-foes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vt-foe { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); min-width: 0; }
.vt-foe.is-boss { background: linear-gradient(150deg, rgba(232, 65, 60, 0.14), rgba(0, 0, 0, 0.22) 60%); box-shadow: 0 0 0 1px rgba(232, 65, 60, 0.25) inset; }
.vt-foe .ev-foe-ic { width: 56px; border-radius: 10px; }
.vt-foe-body { display: grid; gap: 6px; min-width: 0; }
.vt-foe-name { margin: 0; font-size: 0.95rem; line-height: 1.3; overflow-wrap: anywhere; }
.vt-foe.is-boss .vt-foe-name b { color: #ffb0ad; }
.vt-foe-attr { color: var(--text-3); font-size: 0.74rem; font-weight: 600; }
.vt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.vt-stats li { display: grid; gap: 0; padding: 3px 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); min-width: 0; }
.vt-stats span { color: var(--text-3); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-stats b { color: #fff; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.vt-res { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.vt-res li { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 4px; border-radius: 999px; background: rgba(91, 149, 237, 0.14); font-size: 0.74rem; font-weight: 600; }
.vt-res li b { color: #a9c8ff; }
.vt-res img { width: 18px; height: 18px; }
.vt-foe .ev-traits { margin-top: 0; }
.vt-ai > summary { cursor: pointer; color: var(--acc2); font-size: 0.8rem; font-weight: 600; list-style: revert; }
.vt-ai > summary:hover { color: #fff; }
.vt-ai-body { display: grid; gap: 6px; margin-top: 6px; padding: 8px 10px; border-left: 3px solid rgba(185, 89, 230, 0.6); border-radius: 0 8px 8px 0; background: rgba(0, 0, 0, 0.2); font-size: 0.8rem; }
.vt-ai-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 10px; margin: 0; }
@media (min-width: 576px) { .vt-ai-row { grid-template-columns: 7.5em minmax(0, 1fr); } }
.vt-ai-k { color: var(--text-3); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; }
.vt-ai-k.vt-dm { color: #ff9f9b; }
.vt-rot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; color: #d6def0; }
.vt-rot i { color: var(--text-3); font-style: normal; font-size: 0.72rem; }
.vt-rot b { color: var(--gold); font-size: 0.72rem; }
.vt-ai-next { display: grid; gap: 6px; padding-left: 10px; border-left: 1px dashed rgba(255, 255, 255, 0.18); }
.vt-ai-when { margin: 0; color: var(--text-2); }
.vt-ai-when b { color: #ffb27a; }

/* ── Score ──────────────────────────────────────────────────────── */
.vt-score { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.vt-score-c { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); min-width: 0; }
.vt-score-c.is-wide { grid-column: 1 / -1; }
.vt-score-c h3 { margin: 0 0 6px; color: var(--gold); font-size: 0.8rem; font-weight: 700; }
.vt-score-c ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.vt-score-c.is-wide ul { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); column-gap: 14px; }
.vt-score-c li { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.vt-score-c li span { color: var(--text-2); white-space: nowrap; }
.vt-score-c li b { color: #fff; white-space: nowrap; }
.vt-formula { margin: 12px 0 6px; padding: 8px 12px; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; background: rgba(255, 213, 83, 0.07); color: var(--text); font-size: 0.86rem; }

/* ── Tower Challenges ───────────────────────────────────────────── */
.vt-ch-g + .vt-ch-g { margin-top: 6px; }
.vt-ch-g .cd-sub-h { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.vt-ch { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vt-ch > li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); min-width: 0; }
.vt-ch-no { color: var(--gold); font-weight: 800; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.vt-ch-b { display: grid; gap: 6px; min-width: 0; }
.vt-ch-t { margin: 0; font-size: 0.88rem; line-height: 1.4; overflow-wrap: anywhere; }
.vt-ch-c { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.vt-ch-c > span { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--text-2); font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.vt-ch-c .vt-ch-reg { background: rgba(185, 89, 230, 0.16); color: #e7c9f7; }
.vt-ch-reg a { color: #fff; }
.vt-ch-tot { margin-top: 12px; }

/* ── Sidebar ────────────────────────────────────────────────────── */
.vt-glance { display: grid; gap: 8px; margin: 0; }
.vt-glance > div { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.vt-glance > div:last-child { padding-bottom: 0; border-bottom: 0; }
.vt-glance dt { color: var(--text-3); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.4px; }
.vt-glance dd { margin: 0; min-width: 0; font-size: 0.88rem; }
.vt-glance dd small { color: var(--text-3); }
.vt-glance-boss dd { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; }
.vt-glance-boss img { width: 96px; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }
.vt-glance-boss a { font-weight: 700; }
.vt-glance-l { display: block; font-variant-numeric: tabular-nums; }
.vt-stage-y { color: var(--text-3); font-size: 0.76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-stage-no { display: inline-block; min-width: 1.6em; color: var(--text-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.vt-stages .is-current .vt-stage-no { color: inherit; }