/* ═══════════════════════════════════════════════════════════════
   GACHA PAGES (gacha.php + gachas.php) — everything is ga-* scoped.
   Loaded after css/home.css, which supplies the tokens, fonts, page frame (.hm), section heads (.hm-head) and
   the banner cards the list reuses (.hm-cards / .hm-card). Item tiles are layered like the game's own
   thumbnails: type background, art, rarity frame, stars.
   ═══════════════════════════════════════════════════════════════ */

.ga { gap: 30px; }
.ga em { font-style: normal; }
.ga input, .ga button { font: inherit; color: inherit; }
.ga-head-note, .ga-secn { flex: none; max-width: 50%; color: var(--dim); font-size: 0.86rem; text-align: right; font-variant-numeric: tabular-nums; }
.ga-secn b { color: var(--text); font: 400 1.2rem/1 var(--font-head); }
.ga-card { padding: 14px 16px; border: 3px solid var(--ink); background: var(--panel); box-shadow: 5px 5px 0 var(--ink); }
.ga-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ga-none { color: var(--dim); }
.ga-none[hidden], .ga-sec[hidden], .ga-li[hidden], .ga-it[hidden], .ga-group[hidden], .ga-filters[hidden], .ga-search[hidden] { display: none; }
.ga-cd { color: var(--yellow); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ga-legend { margin-top: 10px !important; }

/* ── Single gacha: hero ────────────────────────────────────────── */
.ga-hero { --acc: var(--green); display: grid; overflow: hidden; margin-top: 6px; border: 4px solid var(--ink); background: var(--panel); box-shadow: 8px 8px 0 var(--acc); }
.ga-is-ended { --acc: #7d8492; }
.ga-is-upcoming { --acc: var(--blue); }
.ga-is-permanent { --acc: var(--yellow); }
/* The banner is always shown whole, at its own proportions. Whatever height is left above and below it is
   filled with a blurred, darkened copy of the same banner, so the box is full without cropping anything. */
.ga-hero-art { position: relative; display: flex; align-items: center; overflow: hidden; background: var(--ink); isolation: isolate; }
.ga-hero-art::before { content: ''; position: absolute; inset: -30px; z-index: -1; background: var(--banner, none) center / cover no-repeat; filter: blur(22px) brightness(0.62) saturate(1.25); }
.ga-hero-art img { position: relative; display: block; width: 100%; height: auto; box-shadow: 0 0 0 3px var(--ink), 0 10px 30px rgba(0, 0, 0, 0.55); }
.ga-hero-art.is-empty { min-height: 60px; background: repeating-linear-gradient(-45deg, var(--panel-2) 0 10px, var(--panel) 10px 20px); }
.ga-is-ended .ga-hero-art img { filter: grayscale(0.55); }
.ga-is-ended .ga-hero-art::before { filter: blur(22px) brightness(0.5) grayscale(0.6); }
.ga-hero-text { display: grid; gap: 12px; align-content: center; min-width: 0; padding: 18px 20px 20px; }
.ga-crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--dim); font-size: 0.86rem; }
.ga-crumbs a { color: var(--text); border-bottom: 1px solid var(--line); }
.ga-crumbs a:hover { color: var(--yellow); }
.ga-chip { display: inline-block; padding: 3px 14px; background: var(--acc); color: var(--ink); font: 400 0.82rem/1.3 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; transform: skewX(-9deg); box-shadow: 2px 2px 0 var(--ink); }
.ga-chip span { display: inline-block; transform: skewX(9deg); }
.ga-is-upcoming .ga-chip, .ga-is-ended .ga-chip { color: #fff; }
.ga-name { margin: 0; font: 400 clamp(1.6rem, 4.6vw, 2.6rem)/1.02 var(--font-head); text-transform: uppercase; text-shadow: 3px 3px 0 var(--ink); overflow-wrap: anywhere; }
.ga-when { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ga-when div { display: grid; gap: 2px; padding: 7px 12px 6px; border: 2px solid var(--ink); background: var(--panel-2); }
.ga-when dt { color: var(--yellow); font: 400 0.68rem/1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; }
.ga-when dd { margin: 0; font: 400 1rem/1.15 var(--font-head); }
.ga-when-main dd { font-size: 1.5rem; }
.ga-prices { display: flex; flex-wrap: wrap; gap: 8px; }
.ga-prices li { display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 8px; border: 2px solid var(--ink); background: rgba(7, 8, 10, 0.5); font-variant-numeric: tabular-nums; }
.ga-prices b { color: var(--yellow); font: 400 1.1rem/1 var(--font-head); }
.ga-prices small { color: var(--dim); }
.ga-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--dim); font-size: 0.9rem; }
@media (min-width: 900px) {
    .ga-hero { grid-template-columns: minmax(0, 54%) minmax(0, 1fr); }
    .ga-hero-art { border-right: 4px solid var(--ink); }
}

/* ── Rates summary ─────────────────────────────────────────────── */
.ga-sum { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ga-sum th, .ga-sum td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ga-sum thead th { max-width: 220px; color: var(--yellow); font: 400 0.76rem/1.25 var(--font-head); letter-spacing: 0.04em; white-space: normal; vertical-align: bottom; }
.ga-sum thead small { display: block; color: var(--text); font-size: 0.9em; letter-spacing: 0.1em; }
.ga-sum tbody th { font: 400 1rem/1.2 var(--font-head); text-align: left; }
.ga-sum td b { font: 400 1.05rem/1 var(--font-head); }
.ga-sum td small { margin-left: 6px; color: var(--dim); font-size: 0.74rem; }
.ga-sum tbody tr:last-child th, .ga-sum tbody tr:last-child td { border-bottom: 0; }

/* ── Item lists ────────────────────────────────────────────────── */
.ga-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 12px; }
.ga-search span, .ga-kinds legend { float: none; width: auto; margin: 0; padding: 0; color: var(--yellow); font: 400 0.74rem/1 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; }
.ga-search input { flex: 1 1 220px; max-width: 420px; padding: 8px 12px; border: 3px solid var(--ink); background: var(--bg); color: var(--text); outline: none; }
.ga-search input:focus { border-color: var(--yellow); }
.ga-search em { color: var(--dim); font-size: 0.88rem; }
.ga-groups { display: grid; gap: 12px; }
.ga-group { border: 3px solid var(--ink); background: var(--panel); box-shadow: 4px 4px 0 var(--ink); }
.ga-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; cursor: pointer; background: var(--panel-2); font: 400 1.05rem/1.2 var(--font-head); letter-spacing: 0.03em; }
.ga-group > summary:hover b { color: var(--yellow); }
.ga-group > summary span { color: var(--dim); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.ga-group > .ga-items { padding: 12px; border-top: 3px solid var(--ink); }
.ga-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px 12px; }
.ga-items-big { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px 14px; }
.ga-it { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 8px 5px 5px; border: 2px solid transparent; background: rgba(7, 8, 10, 0.3); transition: border-color 0.12s, background 0.12s; }
.ga-items-big .ga-it { padding: 8px 10px 8px 8px; border-color: var(--ink); background: var(--panel); box-shadow: 3px 3px 0 var(--ink); }
a.ga-it:hover { border-color: var(--yellow); background: var(--panel-2); }
.ga-it-txt { display: grid; gap: 1px; min-width: 0; }
.ga-it-txt b { overflow: hidden; font: 400 0.92rem/1.2 var(--font-head); text-overflow: ellipsis; white-space: nowrap; }
.ga-items-big .ga-it-txt b { font-size: 1.02rem; white-space: normal; }
.ga-it-txt small { overflow: hidden; color: var(--dim); font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; }
.ga-rates { display: flex; flex-wrap: wrap; gap: 3px 6px; margin-top: 2px; }
.ga-rates i { padding: 0 6px; border: 1px solid var(--line); background: rgba(7, 8, 10, 0.45); color: var(--yellow); font-size: 0.74rem; font-style: normal; font-variant-numeric: tabular-nums; line-height: 1.5; }
.ga-rates i + i { color: #cfd3db; }
/* What a voice line says, under its name. */
.ga-line { display: block; color: #dfe2e8; font-size: 0.8rem; line-height: 1.3; quotes: '\201C' '\201D'; }
.ga-pts { color: var(--yellow); font: 400 0.9rem/1.3 var(--font-head); }
/* Tile: type background + art + rarity frame (::after) + stars (::before). */
.ga-tile { position: relative; flex: none; display: block; overflow: hidden; width: 52px; aspect-ratio: 1; border-radius: 9%; background: var(--panel-2) center / cover no-repeat; }
.ga-items-big .ga-tile { width: 78px; }
.ga-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ga-bg-char { background-image: url('/assets/icons/T_ui_GashaThumb_bg05.png'); }
.ga-bg-style { background-image: url('/assets/icons/T_ui_GashaThumb_bg06.png'); }
.ga-bg-cos { background-image: url('/assets/icons/T_ui_GashaThumb_bg03.png'); }
.ga-bg-emo { background-image: url('/assets/icons/T_ui_GashaThumb_bg01.png'); }
.ga-bg-voice { background-image: url('/assets/icons/T_ui_GashaThumb_bg02.png'); }
.ga-bg-voice img { object-position: center top; }
.ga-tile::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: center / 100% 100% no-repeat; box-shadow: inset 0 0 0 2px rgba(7, 8, 10, 0.55); pointer-events: none; }
.ga-tile::before { content: ''; position: absolute; inset: 0; z-index: 2; background: 50% 97% / 130% auto no-repeat; pointer-events: none; }
.ga-r-r::after { background-image: url('/assets/icons/gasha_r_frame.png'); box-shadow: none; }
.ga-r-sr::after { background-image: url('/assets/icons/gasha_sr_frame.png'); box-shadow: none; }
.ga-r-ssr::after, .ga-r-essr::after { background-image: url('/assets/icons/gasha_ssr_frame.png'); box-shadow: none; }
.ga-r-r::before { background-image: url('/assets/icons/rarity_r_1star.png'); }
.ga-r-sr::before { background-image: url('/assets/icons/rarity_sr_2star.png'); }
.ga-r-ssr::before, .ga-r-essr::before { background-image: url('/assets/icons/rarity_pur_3star.png'); }
.ga-bg-char::before, .ga-bg-style::before { background-image: none; }   /* characters and Battle Styles carry no stars */
.ga-help p { color: #dfe2e8; font-size: 0.95rem; }

/* ── Gacha list ────────────────────────────────────────────────── */
.ga-title { margin: 0; font: 400 clamp(2.6rem, 8vw, 4.6rem)/0.9 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; transform: skewX(-6deg); transform-origin: left bottom; text-shadow: 4px 4px 0 var(--red), 7px 7px 0 var(--ink); }
.ga-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; padding: 14px 16px; border: 3px solid var(--ink); background: var(--panel); box-shadow: 6px 6px 0 var(--yellow); }
.ga-filters .ga-search { flex: 1 1 280px; display: grid; gap: 4px; margin: 0; }
.ga-filters .ga-search input { max-width: none; }
.ga-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ga-kinds legend { flex-basis: 100%; margin-bottom: 4px; }
.ga-pick { position: relative; margin: 0; cursor: pointer; }
.ga-pick input { position: absolute; opacity: 0; pointer-events: none; }
.ga-pick span { display: inline-block; padding: 5px 12px; border: 2px solid var(--ink); background: var(--panel-2); font: 400 0.92rem/1.2 var(--font-head); white-space: nowrap; transition: background 0.12s, color 0.12s, transform 0.12s; }
.ga-pick:hover span { transform: translateY(-2px); }
.ga-pick input:checked + span { background: var(--yellow); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.ga-pick input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* Live / Upcoming / Ended toggles carry their match count. */
.ga-pick i { margin-left: 4px; color: var(--dim); font-size: 0.8em; font-style: normal; font-variant-numeric: tabular-nums; }
.ga-pick input:checked + span i { color: rgba(7, 8, 10, 0.7); }
.ga-pick-active input:checked + span { background: var(--green); }
.ga-pick-upcoming input:checked + span { background: var(--blue); color: #fff; }
.ga-pick-upcoming input:checked + span i { color: rgba(255, 255, 255, 0.8); }
.ga-pick-ended input:checked + span { background: #aab0bc; }
.ga-more { margin-left: 10px; padding: 6px 14px; border: 2px solid var(--ink); background: var(--yellow); color: var(--ink) !important; font: 400 0.9rem/1.2 var(--font-head); cursor: pointer; }
.ga-more[hidden] { display: none; }
.ga-count { margin-left: auto !important; color: var(--dim); font-size: 0.9rem; white-space: nowrap; }
.ga-count b { color: var(--yellow); font: 400 1.3rem/1 var(--font-head); font-variant-numeric: tabular-nums; }
/* List cards line up across a row: the name gets two lines' height and sits in the middle of it, the featured
   faces follow, and the date block is pinned to the bottom with the date always on its own second line. */
.ga .hm-card-body { grid-template-rows: minmax(2.5em, auto) 1fr; align-content: stretch; }
.ga .hm-card-name { align-self: center; }
.ga .hm-faces { align-self: center; }
.ga .hm-when { align-self: end; min-height: 2.75em; line-height: 1.38; }
.ga .hm-when em { display: block; }
.ga-card-ended .hm-when { min-height: 0; }
.ga-card-ended .hm-card-art img { filter: grayscale(0.6); }
.ga-card-ended:hover .hm-card-art img { filter: none; }
.ga-card-upcoming { box-shadow: 5px 5px 0 var(--blue); }
.ga-dot-soon { background: var(--blue); box-shadow: 0 0 0 3px rgba(61, 139, 253, 0.2); }
.ga-tag-alternative { background: #fff; }
.ga-tag-costume { background: #6fd3ff; }
.ga-tag-special { background: var(--red); color: #fff; }
.ga-cards-ended { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* ── Event pages (event.php + events.php share this file) ──────── */
.ga-is-claim { --acc: var(--yellow); }
.ga-is-active { --acc: var(--green); }
.ga-bg-other { background-image: none; background-color: var(--panel-2); }
.ga-bg-other img { padding: 12%; object-fit: contain; }
.ga-bg-other::before { background-image: none; }
.ga-bg-plate { width: 136px !important; aspect-ratio: 664 / 112; border-radius: 3px; background: var(--ink); }   /* name plates are wide strips */
.ga-items-big .ga-bg-plate { width: 170px !important; }
.ga-bg-plate img { object-fit: contain; }
.ga-bg-plate::before, .ga-bg-plate::after { content: none; }
.ga-rw img.is-plate { width: 124px; height: auto; }
.ga-fact-pt { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.ga-faces { display: flex; flex-wrap: wrap; gap: 8px; }
.ga-faces a, .ga-faces span { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 2px solid var(--ink); background: var(--panel-2); }
.ga-faces a:hover { border-color: var(--yellow); }
.ga-faces img { width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 50%; background: var(--ink); object-fit: cover; }
.ga-faces b { font: 400 0.95rem/1.2 var(--font-head); }
.ga-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.ga-table th, .ga-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.ga-table thead th { color: var(--yellow); font: 400 0.76rem/1.2 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; }
.ga-table tbody th { min-width: 200px; font-weight: 400; color: var(--text); }
.ga-table tbody tr:last-child th, .ga-table tbody tr:last-child td { border-bottom: 0; }
.ga-table tbody tr:hover th, .ga-table tbody tr:hover td { background: rgba(255, 255, 255, 0.04); }
.ga-rw { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ga-rw img { flex: none; width: 30px; height: 30px; object-fit: contain; }
.ga-rw small { color: var(--dim); }
.ga-rw b { color: var(--yellow); font: 400 0.95rem/1 var(--font-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ga-td-when { color: var(--dim); font-size: 0.84rem; white-space: nowrap; }
.ga-kinds-wide { flex: 1 1 100%; }
.ga-card-claim { box-shadow: 5px 5px 0 var(--yellow); }
/* Motion hook: hidden until revealed, only while js/gacha.js is animating (class set on <html>). */
.ga-anim .ga-reveal { opacity: 0; }

/* ── Notices (notices.php): the same list cards, plus the featured items and the notice text ── */
.nt-lead { margin: 14px 0 0 !important; }
.nt-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.nt-card .hm-card-body { align-content: start; gap: 9px; }
.nt-name { margin: 0; -webkit-line-clamp: 3; }
.nt-name a:hover { color: var(--yellow); }
.nt-items { display: flex; flex-wrap: wrap; gap: 6px 7px; }
.nt-items li { display: grid; justify-items: center; align-content: start; gap: 1px; }
.nt-items .ga-tile { width: 44px; }
.nt-items .ga-bg-plate { width: 96px !important; }
.nt-items i { color: var(--yellow); font-size: 0.7rem; font-style: normal; font-variant-numeric: tabular-nums; line-height: 1.15; }
.nt-more { padding-top: 7px; border-top: 1px solid var(--line); }
.nt-more summary { color: var(--dim); font: 400 0.78rem/1.2 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.nt-more summary:hover, .nt-more[open] summary { color: var(--text); }
.nt-more p { margin-top: 8px !important; color: #d6d9e0; font-size: 0.84rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.nt-go { justify-self: start; padding: 5px 12px; border: 2px solid var(--ink); background: var(--panel-2); font: 400 0.84rem/1.2 var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; }
.nt-go:hover { background: var(--yellow); color: var(--ink) !important; }
.nt-tag-event { background: #fff; }
.nt-tag-birthday { background: #ff9ecb; }
.nt-tag-info { background: #6fd3ff; }
.nt-tag-campaign { background: var(--red); color: #fff; }

@media (max-width: 560px) {
    .ga-head-note { display: none; }
    .ga-count { margin-left: 0 !important; }
    .ga-sum th, .ga-sum td { padding: 6px 7px; }
}