/* ═══════════════════════════════════════════════════════════════
   SEASONS (seasons.php) — everything is se-* scoped.
   Loaded after css/home.css (tokens, shared hm-* bits) and css/gacha.css (the ga-tile item tiles and ga-it rows
   the License rewards reuse). One panel per season: a header with the season's number, dates and counts, then
   its releases, its Season License and the gachas / events that started in it.
   ═══════════════════════════════════════════════════════════════ */

.se-top { display: grid; gap: 4px; margin-top: 6px; }
.se-lead { margin: 16px 0 0 !important; }

/* ── Season strip: sticks to the top of the window while the page scrolls ── */
.se-jump { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; margin: -14px 0; padding: 9px 12px; border: 3px solid var(--ink); background: rgba(23, 25, 31, 0.96); box-shadow: 4px 4px 0 var(--ink); }
.se-jump ol { display: flex; flex: 1; gap: 7px; min-width: 0; padding: 2px 4px !important; overflow-x: auto; scrollbar-width: thin; }
.se-jump li { flex: none; }
.se-jump a { display: grid; place-items: center; min-width: 40px; height: 34px; padding: 0 8px; border: 2px solid var(--ink); background: var(--panel-2); font: 400 1.05rem/1 var(--font-head); font-variant-numeric: tabular-nums; transform: skewX(-9deg); transition: background 0.12s, color 0.12s; }
.se-jump a span { display: inline-block; transform: skewX(9deg); }
.se-jump a:hover { background: #fff; color: var(--ink); }
.se-jump a.is-live { background: var(--yellow); color: var(--ink); }
.se-jump a.is-upcoming { background: var(--blue); color: #fff; }
.se-jump a.is-here { box-shadow: 0 0 0 2px var(--yellow); }
.se-btn { flex: none; padding: 7px 14px; border: 2px solid var(--ink); background: var(--panel-2); color: var(--text); font: 400 0.86rem/1 var(--font-head); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background 0.12s, color 0.12s; }
.se-btn:hover { background: var(--yellow); color: var(--ink); }
.se-btn[hidden] { display: none; }

/* ── Season panel ──────────────────────────────────────────────── */
.se-season { border: 4px solid var(--ink); background: var(--panel); box-shadow: 7px 7px 0 var(--line); scroll-margin-top: 74px; }
.se-live { box-shadow: 7px 7px 0 var(--yellow); }
.se-upcoming { box-shadow: 7px 7px 0 var(--blue); }
.se-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 18px; padding: 16px 18px; border-bottom: 3px solid var(--ink); background: var(--panel-2) radial-gradient(rgba(255, 255, 255, 0.05) 1.2px, transparent 1.3px) 0 0 / 14px 14px; }
.se-no { display: grid; place-items: center; min-width: 76px; height: 76px; padding: 0 12px; background: #fff; color: var(--ink); font: 400 3.1rem/1 var(--font-display); font-variant-numeric: tabular-nums; transform: skewX(-8deg); box-shadow: 4px 4px 0 var(--ink); }
.se-no span { display: inline-block; transform: skewX(8deg); }
.se-live .se-no { background: var(--yellow); }
.se-upcoming .se-no { background: var(--blue); color: #fff; }
.se-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; font: 400 clamp(1.6rem, 4.4vw, 2.3rem)/1 var(--font-head); letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 3px 3px 0 var(--ink); }
.se-state { display: inline-block; padding: 3px 12px; background: var(--panel); color: var(--dim); font: 400 0.78rem/1.3 var(--font-head); letter-spacing: 0.08em; text-shadow: none; transform: skewX(-9deg); box-shadow: 2px 2px 0 var(--ink); }
.se-state span { display: inline-block; transform: skewX(9deg); }
.se-live .se-state { background: var(--green); color: var(--ink); }
.se-upcoming .se-state { background: var(--blue); color: #fff; }
.se-when { margin-top: 7px !important; color: var(--dim); font-size: 0.92rem; }
.se-bar { max-width: 420px; margin-top: 9px; }
.se-left { margin-top: 6px !important; font-size: 0.9rem; }
.se-cd { color: var(--yellow); font-variant-numeric: tabular-nums; white-space: nowrap; }
.se-stats { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.se-stats li { display: grid; align-content: center; justify-items: center; gap: 3px; min-width: 0; padding: 7px 6px 6px; border: 2px solid var(--ink); background: rgba(7, 8, 10, 0.6); }
.se-stats b { color: var(--yellow); font: 400 1.55rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.se-stats small { max-width: 100%; color: var(--dim); font: 400 0.62rem/1.15 var(--font-head); letter-spacing: 0.07em; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; }
.se-stats .is-zero b { color: #5d6270; }
@media (min-width: 620px) { .se-stats { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
    .se-head { grid-template-columns: auto minmax(0, 1fr) auto; }
    .se-stats { grid-column: auto; grid-template-columns: repeat(7, minmax(74px, auto)); }
    .se-stats small { white-space: nowrap; }
}

.se-body { display: grid; gap: 24px; padding: 18px; }
.se-body > * { min-width: 0; }
.se-h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 400 1.1rem/1 var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; }
.se-h3::before { content: ''; flex: none; width: 10px; height: 22px; background: var(--yellow); transform: skewX(-12deg); box-shadow: 2px 2px 0 var(--ink); }

/* ── Releases: the game's style thumbnail on its role tile (same card as the character list) ── */
.se-rels { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px 12px; }
.se-rels li { min-width: 0; }
.se-card { display: grid; grid-template-rows: auto 1fr; height: 100%; border: 3px solid var(--ink); background: var(--panel-2); box-shadow: 4px 4px 0 var(--acc); transition: transform 0.15s, box-shadow 0.15s; }
.se-card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--acc); }
.se-art { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-bottom: 3px solid var(--ink); background: var(--ink) var(--role-bg, none) repeat center / 72px; }
.se-art > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.se-card:hover .se-art > img:first-child { transform: scale(1.06); }
.se-role { position: absolute; right: 5px; bottom: 5px; width: 28px; height: 28px; filter: drop-shadow(2px 2px 0 var(--ink)); }
.se-tag { position: absolute; top: 0; left: 0; padding: 3px 14px 3px 8px; background: var(--red); color: #fff; font: 400 0.7rem/1.2 var(--font-head); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.se-tag-soon { background: var(--blue); }
.se-txt { display: grid; grid-template-rows: minmax(2.3em, auto); align-content: center; gap: 2px; padding: 7px 8px 8px; }
.se-txt b { display: -webkit-box; align-self: center; overflow: hidden; font: 400 0.98rem/1.15 var(--font-head); -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.se-txt small { overflow: hidden; color: var(--dim); font-size: 0.74rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.se-txt .se-of { color: #dfe2e8; }
.se-txt .se-kind { color: var(--yellow); }

/* ── Season License ────────────────────────────────────────────── */
/* Releases and the License sit side by side on wide screens: the releases column is only as wide as its cards
   and the License takes the rest, with its prices stacked beside the art. Below them the License rewards use
   the full width. A season with many releases (the launch season) and narrow screens stack everything. */
.se-pair { display: grid; gap: 24px 30px; align-items: start; }
.se-pair > * { min-width: 0; }
.se-lic-side { display: grid; gap: 12px 14px; align-items: start; }
.se-lic-side > * { min-width: 0; }
@media (min-width: 1000px) {
    .se-pair:not(.se-pair-stack) { grid-template-columns: fit-content(58%) minmax(0, 1fr); }
    .se-pair:not(.se-pair-stack) .se-rels { display: flex; flex-wrap: wrap; }
    .se-pair:not(.se-pair-stack) .se-rels li { flex: 0 0 150px; }
    .se-pair:not(.se-pair-stack) .has-prices { grid-template-columns: minmax(0, 1fr) auto; }
    .se-pair:not(.se-pair-stack) .has-prices .se-prices { flex-direction: column; flex-wrap: nowrap; }
    .se-pair:not(.se-pair-stack) .has-prices .se-lic-note { grid-column: 1 / -1; }
}
.se-lic-art { max-width: 660px; margin: 0; overflow: hidden; border: 3px solid var(--ink); background: #000; box-shadow: 4px 4px 0 var(--ink); }
.se-lic-art img { display: block; width: 100%; height: auto; }
.se-prices { display: flex; flex-wrap: wrap; gap: 8px; }
.se-price { display: grid; gap: 3px; padding: 6px 12px 7px; border: 2px solid var(--ink); background: var(--panel-2); }
.se-price small { color: var(--dim); font: 400 0.68rem/1.2 var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; }
.se-price b { display: flex; align-items: center; gap: 5px; color: var(--yellow); font: 400 1.15rem/1 var(--font-head); font-variant-numeric: tabular-nums; }
.se-price img { width: 22px; height: 22px; object-fit: contain; }
.se-price-pro { border-color: var(--yellow); }
.se-lic-note { color: var(--dim); font-size: 0.84rem; }
.se-tracks { display: grid; gap: 16px; }
.se-track h4, .se-sum h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; font: 400 0.92rem/1 var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; }
.se-track h4::before, .se-legend span::before { content: ''; flex: none; width: 9px; height: 16px; background: #8fbcff; transform: skewX(-12deg); }
.se-track-pro h4::before, .se-legend .se-key-pro::before { background: var(--yellow); }
.se-track h4 small { color: var(--dim); font-size: 0.8em; }
.se-track .ga-items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 216px), 1fr)); }
.se-track .ga-it-txt small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.se-track .ga-pts { font-size: 0.8rem; }
.se-track .ga-bg-plate { width: 92px !important; }   /* name plates are wide strips: keep room for the text */

/* Room parts and My Banner art are pictures, not icons: they fill their tile. */
.ga-tile.se-cover img { padding: 0; object-fit: cover; }
/* Rewards without a thumbnail on the site (boxes) print what they are. */
.se-noimg { display: grid; place-items: center; background: var(--ink); }
.se-noimg em { padding: 2px; color: var(--yellow); font: 400 0.58rem/1.1 var(--font-head); font-style: normal; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; }

/* ── Folded lists (every rank, gachas, events) ─────────────────── */
.se-fold { border: 3px solid var(--ink); background: rgba(7, 8, 10, 0.35); }

.se-fold > summary { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--panel-2); font: 400 1rem/1.2 var(--font-head); letter-spacing: 0.05em; text-transform: uppercase; list-style: none; cursor: pointer; }
.se-fold > summary::-webkit-details-marker { display: none; }
.se-fold > summary::before { content: '+'; flex: none; width: 0.8em; color: var(--yellow); font-size: 1.25rem; line-height: 0.9; text-align: center; }
.se-fold[open] > summary::before { content: '\2212'; }
.se-fold > summary:hover span { color: var(--yellow); }
.se-fold > summary b { margin-left: auto; color: var(--dim); font-weight: 400; font-variant-numeric: tabular-nums; }
.se-fold > :not(summary) { padding: 12px !important; border-top: 3px solid var(--ink); }
.se-fold-in { display: grid; gap: 14px; }
.se-fold-in > * { min-width: 0; }

.se-sums { display: grid; gap: 14px 22px; }
@media (min-width: 860px) { .se-sums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.se-sum h4 { color: var(--dim); }
.se-sum ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 3px 16px; }
.se-sum li { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 2px 0; border-bottom: 1px solid var(--line); font-size: 0.84rem; }
.se-sum .se-cu { width: 26px; background-color: transparent; background-size: contain; box-shadow: none; }
.se-sum span { flex: 1; min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.se-sum b { flex: none; color: var(--yellow); font-weight: 400; font-variant-numeric: tabular-nums; }

.se-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--dim); font: 400 0.78rem/1 var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; }
.se-legend span { display: inline-flex; align-items: center; gap: 7px; }
.se-ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.se-rank { display: grid; grid-template-rows: auto 1fr 1fr; min-width: 0; border: 2px solid var(--ink); background: var(--panel-2); }
.se-rank > b { padding: 4px 0 3px; background: var(--ink); color: var(--dim); font: 400 0.82rem/1 var(--font-head); font-variant-numeric: tabular-nums; text-align: center; }
.se-rank.is-key { border-color: var(--yellow); }
.se-rank.is-key > b { background: var(--yellow); color: var(--ink); }
.se-rank-rep { border-style: dashed; border-color: var(--dim); }
/* A rank holds two rewards: the Hero License (free) one, then the Pro License one. */
.se-rw { display: grid; align-content: start; justify-items: center; gap: 3px; min-height: 70px; padding: 7px 3px 4px; border-left: 3px solid #8fbcff; }
.se-rw + .se-rw { border-top: 1px solid var(--line); border-left-color: var(--yellow); background: rgba(255, 210, 1, 0.08); }
a.se-rw:hover { background: rgba(255, 255, 255, 0.12); }
.se-rw .ga-tile, .se-rw .se-cu { width: 42px; }
/* Currency icon: its image comes from the per-currency rules seasons.php prints in <head>. */
.se-cu { flex: none; display: block; aspect-ratio: 1; border-radius: 9%; background: var(--panel) center / 78% no-repeat; box-shadow: inset 0 0 0 2px rgba(7, 8, 10, 0.55); }
.se-rw .ga-bg-plate { width: 60px !important; }
.se-rw i { color: var(--text); font-size: 0.74rem; font-style: normal; font-variant-numeric: tabular-nums; line-height: 1.1; }

/* Gachas / events of a season: the homepage's mini rows at full strength, names on two lines. */
.se-minis { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.se-mini { height: 100%; opacity: 1; }
.se-mini img { filter: none; }
.se-mini b { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.se-mini small { display: block; margin-top: 2px; }
.se-mini .hm-dot { margin-right: 6px; }

/* Motion hook: hidden until revealed, only while js/seasons.js is animating (class set on <html>). */
.se-anim .se-reveal { opacity: 0; }

@media (max-width: 560px) {
    .se-head { padding: 14px 12px; gap: 12px; }
    .se-no { min-width: 58px; height: 58px; font-size: 2.3rem; }
    .se-body { padding: 14px 10px; }
    .se-jump { gap: 8px; padding: 7px 8px; }
    .se-btn { padding: 7px 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .se-card:hover { transform: none; }
}