@charset "UTF-8";
/* Gachaaa — playful gacha shop. Tokens first, then layout, cards, machines, reveal, binder. */
:root {
  --ink: #1B1530; --ink-2: #3A3352; --muted: #7A738C; --line: #ECE8F2; --soft: #F7F5FB; --paper: #FFFDF8;
  --hot: #FF4D6D; --hot-dark: #E23358; --sun: #FFC93C; --mint: #3DD6B5; --sky: #5AA9FF; --grape: #7B5CFF;
  --night: #17112B; --night-2: #2A1F52;
  --gN: #9AA3AE; --gR: #4C8DFF; --gSR: #B04CFF; --gSSR: #F5B700;
  --radius: 22px;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', sans-serif;
  --display: 'Jua', var(--font);
  --logo: 'Lilita One', 'Jua', var(--font);
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; overflow-x: hidden }
button, input, select { font: inherit; color: inherit }
button { cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent }
button:disabled { opacity: .5; cursor: not-allowed }
:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px }
a { color: inherit; text-decoration: none }
img { display: block; max-width: 100%; object-fit: contain }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle }
h1, h2, h3 { line-height: 1.25; margin: 0 }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.container { max-width: 1180px; margin: 0 auto; padding: 36px 24px 72px }
.container.narrow { max-width: 520px }
.eyebrow { font: 700 12px/1 var(--font); letter-spacing: .18em; color: var(--hot); text-transform: uppercase; margin-bottom: 12px }
.page-title { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 5vw, 50px); letter-spacing: -.5px }
.subtitle { color: var(--muted); margin: 10px 0 0; font-size: 16px }
.lead { font-size: 17px; color: var(--ink-2) }
.fine { font-size: 12.5px; color: var(--muted); margin: 12px 0 0 }
.text-link { color: var(--grape); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px }
.loading { padding: 120px 24px; text-align: center; color: var(--muted) }
.loading-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--hot); margin-right: 10px; animation: bob 1s infinite alternate }
@keyframes bob { to { transform: translateY(-8px) } }
.noscript { text-align: center; padding: 12px; background: var(--soft) }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 800; font-size: 15px; transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap }
.btn:active { transform: translateY(2px) }
.btn svg { width: 18px; height: 18px }
.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 4px 0 #000 }
.btn-dark:hover { background: var(--ink-2) }
.btn-hot { background: var(--hot); color: #fff; box-shadow: 0 4px 0 var(--hot-dark), 0 10px 24px -8px rgba(255, 77, 109, .6) }
.btn-hot:hover { background: #ff6380 }
.btn-lime { background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 #D9A51F }
.btn-outline { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink) }
.btn-outline:hover { background: var(--soft) }
.btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); min-height: 40px; font-size: 14px }
.btn-danger { background: var(--hot); color: #fff }
.btn-small { min-height: 38px; padding: 0 16px; font-size: 14px; box-shadow: none }
.btn-wide { width: 100% }
.pill { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--soft); font-weight: 800; font-size: 13px; white-space: nowrap }
.pill-hot { background: #FFE3E9; color: var(--hot-dark) }
.round-btn { width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--ink); font-size: 26px; line-height: 1; font-weight: 700 }

/* ------------------------------------------------------------ header / footer */
#header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; height: 72px; padding: 0 max(24px, calc((100vw - 1180px) / 2 + 24px)); background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line) }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 400 26px/1 var(--logo); letter-spacing: .5px; color: var(--ink) }
.brand-mark { position: relative; width: 22px; height: 32px; border-radius: 11px; flex: none; transform: rotate(28deg); background: linear-gradient(var(--hot) 0 50%, #fff 50%); box-shadow: inset 0 0 0 2.5px var(--ink), 3px 3px 0 var(--sun) }
.brand-mark::after { content: ''; position: absolute; left: 5px; top: 5px; width: 5px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .75) }
.brand-small { font-size: 22px }
.nav { display: flex; gap: 4px; margin-right: auto }
.nav a { padding: 8px 14px; border-radius: 999px; font-weight: 700; color: var(--muted); font-size: 15px }
.nav a:hover { color: var(--ink); background: var(--soft) }
.nav a.active { color: #fff; background: var(--ink) }
.header-tools { display: flex; align-items: center; gap: 10px }
.points-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 16px; border-radius: 999px; background: #FFF4D1; font-weight: 800; font-size: 14px; box-shadow: inset 0 0 0 2px #F5D46B }
.points-pill b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sun); font-size: 16px }
.mini-tank { display: block; width: 58px; height: 38px; border: 2px solid var(--ink); background: linear-gradient(#fff 0 18%, #DDF1FB 18%) }
.mini-tank canvas { width: 100%; height: 100%; display: block }
.sound-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50% }
.sound-btn:hover { background: var(--soft) }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--grape); color: #fff; font-weight: 800 }
footer { border-top: 1px solid var(--line); background: var(--soft); margin-top: 40px }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 32px 24px; display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; font-weight: 700; font-size: 14px }
#demo-label { width: 100%; margin: 0; font-size: 12.5px; color: var(--muted) }
#toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px); opacity: 0; z-index: 100; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 14px; font-weight: 700; font-size: 14px; transition: .25s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center }
#toast.show { opacity: 1; transform: translate(-50%, 0) }

/* ------------------------------------------------------------ landing + static pages */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding: 24px 0 40px }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 6vw, 68px); letter-spacing: -1px }
.hero h1 em { font-style: normal; font-family: var(--logo); color: var(--hot); letter-spacing: 1px }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px }
.hero-cards { position: relative; height: 440px }
.hero-cards .showcase-card { position: absolute; width: 230px; top: 30px; left: 50%; transition: transform .3s }
.hero-cards .showcase-card:nth-child(1) { transform: translateX(-118%) rotate(-12deg) translateY(30px) }
.hero-cards .showcase-card:nth-child(2) { transform: translateX(-50%) rotate(-1deg); z-index: 2 }
.hero-cards .showcase-card:nth-child(3) { transform: translateX(18%) rotate(11deg) translateY(30px) }
.hero-cards:hover .showcase-card:nth-child(1) { transform: translateX(-128%) rotate(-16deg) translateY(20px) }
.hero-cards:hover .showcase-card:nth-child(3) { transform: translateX(28%) rotate(15deg) translateY(20px) }
.band { margin: 44px 0 0 }
.band h2 { font-family: var(--display); font-weight: 400; font-size: 28px; margin-bottom: 16px }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.steps li { background: var(--soft); border-radius: var(--radius); padding: 22px; display: grid; gap: 6px }
.steps b { font-family: var(--display); font-weight: 400; font-size: 22px }
.steps span { color: var(--ink-2) }
.grade-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px }
.grade-chip { border-radius: 18px; padding: 16px; background: var(--soft); display: grid; gap: 4px }
.grade-chip b { font: 400 24px/1 var(--logo) }
.grade-chip small { color: var(--muted) }
.g-N > b, b.g-N, .g-text-N { color: var(--gN) } .g-R > b, b.g-R, .g-text-R { color: var(--gR) } .g-SR > b, b.g-SR, .g-text-SR { color: var(--gSR) } .g-SSR > b, b.g-SSR, .g-text-SSR { color: #D49B00 }
.dex-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px }
.dex-mini { background: var(--soft); border-radius: 18px; padding: 14px; text-align: center; transition: transform .2s }
.dex-mini:hover { transform: translateY(-4px) }
.dex-mini img { aspect-ratio: 1; width: 100%; margin-bottom: 6px }
.dex-mini strong { display: block; font-family: var(--display); font-weight: 400; font-size: 19px }
.dex-mini small { color: var(--muted) }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0 }
.faq summary { font-weight: 800; cursor: pointer; font-size: 16px }
.faq p { color: var(--ink-2); margin: 8px 0 0 }
.static-page .page-title { margin-bottom: 4px }
.table-wrap { overflow-x: auto; margin-top: 24px; border-radius: 18px; border: 1px solid var(--line) }
.odds-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14px }
.odds-table caption { text-align: left; padding: 14px 16px; font-weight: 800; background: var(--soft) }
.odds-table th, .odds-table td { padding: 12px 14px; border-top: 1px solid var(--line); text-align: right }
.odds-table th[scope=row], .odds-table thead th:first-child { text-align: left }
.odds-table thead th { font-size: 13px; background: #fff }
.odds-table small { color: var(--muted); font-weight: 600 }
.odds-table tfoot { font-weight: 800; background: var(--soft) }
.facts { padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2) }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; margin-top: 28px }
.dex-entry h2 { font-family: var(--display); font-weight: 400; font-size: 20px; margin-top: 12px }
.dex-entry p { color: var(--muted); margin: 4px 0 0; font-size: 14px }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 18px }
.crumbs a { font-weight: 700 }
.character-hero { display: grid; grid-template-columns: 320px 1fr; gap: 44px; align-items: start }
.facts-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 18px 0; padding: 16px 18px; background: var(--soft); border-radius: 16px }
.facts-dl dt { color: var(--muted); font-weight: 700 }
.facts-dl dd { margin: 0; font-weight: 700 }
.moves-list { padding-left: 18px; display: grid; gap: 6px }
.moves-list small { display: block; color: var(--muted) }
.quote-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px }
.quote-list li { background: #fff; border: 2px solid var(--ink); border-radius: 18px 18px 18px 4px; padding: 12px 16px; font-weight: 600 }
.variant-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
.variant figcaption { font-size: 13px; color: var(--muted); margin-top: 10px }
.variant figcaption b { display: block; color: var(--ink) }
.variant { margin: 0 }
.tcg-slot > img { aspect-ratio: 63/88; width: 100%; background: var(--soft); border-radius: 14px }
.error-panel { text-align: center; padding: 120px 24px }

/* ------------------------------------------------------------ TCG card */
.tcg { --mx: 50%; --my: 50%; position: relative; container-type: inline-size; width: 100%; aspect-ratio: 63/88; border-radius: 4.6% / 3.3%; padding: 3.1%;
  background: linear-gradient(145deg, #FFE27A, #F2C643 45%, #E8B530); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 24px -10px rgba(27, 21, 48, .45), 0 2px 4px rgba(27, 21, 48, .2);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.2, .8, .3, 1); user-select: none; text-align: left; color: #1D1A16 }
.tcg.tilting { transition: transform .06s linear }
.tcg-inner { position: relative; height: 100%; border-radius: 2.4cqw; overflow: hidden; display: flex; flex-direction: column; gap: 1.1cqw; padding: 2.2cqw 2.8cqw 1.8cqw;
  background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .55), transparent 40%), linear-gradient(165deg, color-mix(in srgb, var(--t) 22%, #FFFBEF), color-mix(in srgb, var(--t) 48%, #F4EEDC)) }
.tcg-inner::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1.2px); background-size: 3.2cqw 3.2cqw; pointer-events: none }
.tcg-inner > * { position: relative }
.tcg-top { display: flex; align-items: center; gap: 1.4cqw; min-height: 8cqw }
.tcg-stage { font-size: 2.6cqw; font-weight: 800; padding: .4cqw 1.4cqw; border-radius: 1cqw; background: linear-gradient(#fff, #DCD6C6); box-shadow: 0 0 0 .3cqw rgba(0, 0, 0, .25) }
.tcg-name { font: 400 6.6cqw/1 var(--display); letter-spacing: -.1cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tcg-hp { margin-left: auto; font: 800 6.2cqw/1 var(--font); color: #C8231F; white-space: nowrap }
.tcg-hp small { font-size: 2.8cqw; margin-right: .4cqw }
.tcg-art { aspect-ratio: 1.42; border-radius: .8cqw; overflow: hidden; border: 1.1cqw solid transparent;
  background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, .9), transparent 60%) padding-box, linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--t) 40%, #fff)) padding-box,
    linear-gradient(135deg, #F4F1E8, #A39E92 30%, #F8F6EF 50%, #8D887C 70%, #E8E4D8) border-box;
  box-shadow: 0 .6cqw 1.2cqw rgba(0, 0, 0, .25) }
.tcg-art img { width: 100%; height: 100%; object-fit: contain; padding: 4% 8% 0; filter: drop-shadow(0 1.2cqw 1cqw rgba(0, 0, 0, .18)) }
.tcg-strip { margin: -.4cqw 4cqw 0; text-align: center; font: italic 700 2.45cqw/1.5 var(--font); padding: .3cqw 1cqw; border-radius: .6cqw; background: linear-gradient(90deg, #C9C3B4, #F7F4EC 30%, #EDE8DA 70%, #B9B3A3); box-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .2) }
.tcg-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw; padding: 0 .6cqw }
.tcg-move { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 1.8cqw }
.tcg-move .cost { display: flex; gap: .5cqw; min-width: 10cqw }
.mv-name { font-size: 4.5cqw; font-weight: 800; letter-spacing: -.1cqw }
.dmg { font: 800 5.6cqw/1 var(--font) }
.tcg-move p, .tcg-ability p { grid-column: 1/-1; margin: .4cqw 0 0; font-size: 2.75cqw; line-height: 1.35; font-weight: 500 }
.tcg-ability { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1.6cqw }
.ab-tag { font: italic 800 2.6cqw/1 var(--font); color: #fff; background: linear-gradient(#E0383A, #A21C1E); padding: .7cqw 1.4cqw; border-radius: .8cqw }
.tcg-ability b { font-size: 4.3cqw; color: #B5231F }
.tcg-stats { display: flex; justify-content: space-between; gap: 1cqw; font-size: 2.5cqw; font-weight: 700; padding: 1cqw .6cqw 0; border-top: .35cqw solid rgba(0, 0, 0, .15) }
.tcg-stats span { display: inline-flex; align-items: center; gap: .6cqw; white-space: nowrap }
.tcg-stats .type-ico { width: 3.6cqw }
.tcg-flavor { margin: 0; font: italic 500 2.4cqw/1.4 var(--font); padding: .9cqw 1.6cqw; border: .3cqw solid rgba(110, 96, 60, .5); border-radius: 1cqw; background: rgba(255, 255, 255, .35); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.tcg-foot { display: flex; justify-content: space-between; align-items: center; font-size: 2.2cqw; font-weight: 700; opacity: .85 }
.set { display: inline-flex; gap: 1cqw; align-items: center }
.set-mark { background: #1D1A16; color: #fff; padding: .2cqw 1cqw; border-radius: .6cqw; font-size: 2cqw }
.rar { font-size: 3cqw }
.type-ico { display: inline-grid; place-items: center; width: 4.4cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--t) 60%, #fff), var(--t)); box-shadow: inset 0 -.4cqw 0 rgba(0, 0, 0, .18), 0 0 0 .3cqw rgba(255, 255, 255, .8); flex: none }
.type-ico.big { width: 7cqw }
.type-ico svg { width: 68%; height: 68%; fill: #fff; stroke: none }
.tcg-foil, .tcg-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s }
.tcg-glare { background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .6), transparent 42%); mix-blend-mode: soft-light }
.tcg.tilting .tcg-glare { opacity: 1 }
.tcg-count { position: absolute; right: -2.5cqw; top: -2.5cqw; z-index: 3; background: var(--ink); color: #fff; font: 800 max(11px, 5cqw)/1 var(--font); padding: 1.4cqw 2.4cqw; border-radius: 999px; box-shadow: 0 0 0 2px #fff }
/* speech bubble: the character talks from its own card */
.tcg-bubble { position: absolute; left: 50%; top: 21%; z-index: 6; width: max-content; max-width: min(250px, 125cqw); padding: 8px 13px; border-radius: 16px; background: #fff; color: var(--ink);
  border: 2.5px solid var(--ink); font: 700 13px/1.4 var(--font); text-align: center; box-shadow: 0 6px 0 rgba(27, 21, 48, .12); pointer-events: none;
  opacity: 0; transform: translate(-50%, -100%) scale(.4); transform-origin: 50% 100%; transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1) }
.tcg-bubble::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; background: #fff; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: translateX(-50%) rotate(45deg) }
.tcg-bubble.show { opacity: 1; transform: translate(-50%, -100%) scale(1) }
.tcg.small .tcg-bubble { font-size: 12px; padding: 6px 10px }

/* grade finishes */
.tcg.g-R { background: linear-gradient(145deg, #FFE27A, #F2C643 45%, #E8B530) }
.tcg.g-R .tcg-art { background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, .9), transparent 60%) padding-box, radial-gradient(rgba(255, 255, 255, .8) 1px, transparent 1.5px) 0 0/6cqw 6cqw padding-box, linear-gradient(180deg, color-mix(in srgb, var(--c) 40%, #fff), color-mix(in srgb, var(--t) 55%, #fff)) padding-box, linear-gradient(135deg, #F4F1E8, #A39E92 30%, #F8F6EF 50%, #8D887C 70%, #E8E4D8) border-box }
.tcg.g-R .tcg-foil { opacity: .35; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .9) 45%, transparent 60%) 0 0/250% 100%; mix-blend-mode: overlay; animation: sheen 5s ease-in-out infinite }
.tcg.g-SR { background: linear-gradient(135deg, #E8ECF2, #A9B3C2 25%, #F7F9FC 45%, #9EA8B8 65%, #E3E8EF) }
.tcg.g-SR .tcg-art::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, #ff7eb3 0 6%, #ffd36e 6% 12%, #7dffb0 12% 18%, #6ecbff 18% 24%, #c48bff 24% 30%) var(--mx) var(--my)/300% 300%; mix-blend-mode: color-dodge; opacity: .45; animation: holo 7s linear infinite }
.tcg.g-SR .tcg-art { position: relative }
.tcg.g-SR .tcg-art img { position: relative; z-index: 1 }
.tcg.g-SR .tcg-foil { opacity: .22; background: repeating-linear-gradient(115deg, #ff7eb3 0 5%, #ffd36e 5% 10%, #7dffb0 10% 15%, #6ecbff 15% 20%, #c48bff 20% 25%) var(--mx) var(--my)/400% 400%; mix-blend-mode: color-dodge; animation: holo 9s linear infinite }
.tcg.g-SSR { background: linear-gradient(135deg, #FFF3B0, #E0A800 22%, #FFF7CF 42%, #C98F00 62%, #FFE9A0 82%, #B88300) }
.tcg.g-SSR .tcg-inner { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--sc) 45%, #fff), color-mix(in srgb, var(--sc) 70%, #2A1F52) 85%) }
.tcg.g-SSR .tcg-inner::before { background-image: radial-gradient(rgba(255, 240, 180, .9) 1px, transparent 1.6px), radial-gradient(rgba(255, 255, 255, .6) .6px, transparent 1px); background-size: 7cqw 7cqw, 3cqw 3cqw; background-position: 0 0, 1.5cqw 2cqw }
.tcg.g-SSR .tcg-art { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; background: radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .7), transparent 45%) }
.tcg.g-SSR .tcg-art img { position: absolute; top: 9%; left: 0; height: 54%; padding: 0 6% }
.tcg.g-SSR .tcg-strip { margin-top: auto }
.tcg.g-SSR .tcg-top { color: #fff; text-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .45) }
.tcg.g-SSR .tcg-hp { color: #FFE27A }
.tcg.g-SSR .tcg-body, .tcg.g-SSR .tcg-flavor, .tcg.g-SSR .tcg-stats { background: rgba(255, 252, 240, .78); border-radius: 1.4cqw; backdrop-filter: blur(1px) }
.tcg.g-SSR .tcg-body { flex: none; padding: 1.4cqw 1.6cqw }
.tcg.g-SSR .tcg-stats { padding: .8cqw 1.4cqw; border: 0 }
.tcg.g-SSR .tcg-foot { color: #fff; opacity: 1 }
.tcg.g-SSR .rar { color: #FFE27A }
.tcg.g-SSR .tcg-foil { opacity: .55; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 230, 140, .6), transparent 50%), repeating-linear-gradient(60deg, rgba(255, 215, 90, .0) 0 4%, rgba(255, 240, 180, .5) 5%, rgba(255, 215, 90, 0) 6% 10%) 0 0/300% 300%; mix-blend-mode: overlay; animation: holo 8s linear infinite }
@keyframes sheen { 0%, 60% { background-position: 120% 0 } 100% { background-position: -120% 0 } }
@keyframes holo { to { background-position: 300% 300% } }
/* card back */
.tcg-back { padding: 3.1%; background: linear-gradient(145deg, #2A1F52, #17112B) }
.back-inner { height: 100%; border-radius: 2.4cqw; display: grid; place-items: center; align-content: center; gap: 2cqw; position: relative; overflow: hidden;
  background: repeating-conic-gradient(from 0deg at 50% 50%, #3B2C7A 0 10deg, #2E2263 10deg 20deg), #2E2263; box-shadow: inset 0 0 0 1.2cqw #FFC93C, inset 0 0 0 2cqw #2A1F52 }
.back-ring { width: 40cqw; aspect-ratio: 1; background: var(--sun); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 6cqw rgba(255, 201, 60, .7)); position: relative }
.back-ring::after { content: ''; position: absolute; inset: 30%; background: var(--hot); clip-path: inherit }
.back-logo { font: 400 11cqw/1 var(--logo); color: #fff; text-shadow: 0 .8cqw 0 var(--hot); letter-spacing: .4cqw }
.back-sub { font: 800 2.6cqw/1 var(--font); letter-spacing: .5cqw; color: var(--sun) }
.tcg-back.locked { filter: grayscale(1) brightness(1.5) opacity(.35) }

/* ------------------------------------------------------------ gacha shop */
.gacha-page { background: linear-gradient(180deg, #FFF6F8, #fff 320px) }
.section-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; flex-wrap: wrap }
.gacha-layout { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start }
.machine-panel { background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 2px var(--ink), 0 8px 0 var(--ink) }
.method-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 2px solid var(--ink) }
.method-tabs button { padding: 14px 8px; display: grid; gap: 2px; text-align: center; border-right: 2px solid var(--ink); background: #fff }
.method-tabs button:last-child { border-right: 0 }
.method-tabs button b { font-family: var(--display); font-weight: 400; font-size: 19px }
.method-tabs button small { color: var(--muted); font-weight: 700; font-size: 12.5px }
.method-tabs button.active { background: var(--sun) }
.method-tabs button.active small { color: var(--ink) }
.stage { position: relative; min-height: 470px; display: grid; place-items: center; overflow: hidden; padding: 30px 20px 54px;
  background: radial-gradient(circle at 50% 40%, #46357F, var(--night) 70%); color: #fff }
.stage::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .25) 1px, transparent 1.5px); background-size: 26px 26px; mask: radial-gradient(circle at 50% 40%, transparent 30%, #000 70%) }
.spot { position: absolute; width: 520px; height: 520px; left: 50%; top: 42%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 220, 140, .3), transparent 62%); pointer-events: none }
.stage-hint { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; margin: 0; font-weight: 700; color: rgba(255, 255, 255, .75); font-size: 14px }
.draw-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-top: 2px solid var(--ink); flex-wrap: wrap }
.draw-bar b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px }
.draw-bar small { color: var(--muted); font-size: 13px }
.machine-panel.busy .stage { cursor: progress }
.side-panel { background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 0 0 2px var(--line) }
.side-panel h2 { font-size: 15px; margin: 4px 0 8px }
.side-panel h2 + .grade-odds { margin-top: 8px }
.points-big { font: 400 44px/1 var(--display); margin: 0 0 14px }
.points-big small { font-size: 18px; margin-left: 4px; color: var(--muted) }
.side-panel .btn { margin-bottom: 22px }
.grade-odds { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px }
.grade-odds li { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--soft); font-size: 14px }
.grade-odds b { font: 400 17px/1 var(--logo) }
.grade-odds em { font-style: normal; font-weight: 800 }

/* booster pack */
.booster { position: relative; z-index: 1; width: 230px; height: 360px; cursor: grab; touch-action: none; transform: rotate(-3deg); filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5)); animation: float 3.2s ease-in-out infinite }
.booster-body { position: absolute; inset: 22px 0; display: grid; justify-items: center; align-content: center; gap: 10px; overflow: hidden;
  background: linear-gradient(160deg, #FF6B8B, #FF4D6D 25%, #7B5CFF 70%, #3E2C9E); border-left: 3px solid rgba(255, 255, 255, .25); border-right: 3px solid rgba(0, 0, 0, .15) }
.booster-body::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 16px, rgba(255, 255, 255, .07) 16px 32px) }
.booster-body::after { content: ''; position: absolute; top: -40%; bottom: -40%; width: 70px; left: -120px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: rotate(18deg); animation: foil-sweep 3.4s ease-in-out infinite }
@keyframes foil-sweep { 0%, 50% { left: -120px } 100% { left: 320px } }
.booster-set { font: 800 10px/1 var(--font); letter-spacing: .2em; color: rgba(255, 255, 255, .85); position: relative }
.booster-logo { font: 400 42px/1 var(--logo); color: #fff; text-shadow: 0 4px 0 var(--ink), 0 0 20px rgba(255, 201, 60, .6); letter-spacing: 1px; position: relative }
.booster-mystery { position: relative; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #FFE58A, var(--sun) 50%, #F59E0B); box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--ink), 0 0 40px rgba(255, 201, 60, .7) }
.booster-mystery b { font: 400 72px/1 var(--logo); color: var(--ink) }
.booster-count { font: 400 22px/1 var(--logo); color: var(--sun); letter-spacing: 1px; position: relative; text-shadow: 0 2px 0 var(--ink) }
.booster-note { font-size: 11px; font-weight: 800; background: var(--ink); color: #fff; padding: 4px 10px; border-radius: 999px; position: relative }
.crimp { position: absolute; left: 0; right: 0; height: 24px; background: linear-gradient(90deg, #C9C3D9, #fff 30%, #DCD7EA 60%, #fff 80%, #BEB7D2) }
.crimp.top { top: 0; clip-path: polygon(0 100%, 0 30%, 2% 0, 4% 30%, 6% 0, 8% 30%, 10% 0, 12% 30%, 14% 0, 16% 30%, 18% 0, 20% 30%, 22% 0, 24% 30%, 26% 0, 28% 30%, 30% 0, 32% 30%, 34% 0, 36% 30%, 38% 0, 40% 30%, 42% 0, 44% 30%, 46% 0, 48% 30%, 50% 0, 52% 30%, 54% 0, 56% 30%, 58% 0, 60% 30%, 62% 0, 64% 30%, 66% 0, 68% 30%, 70% 0, 72% 30%, 74% 0, 76% 30%, 78% 0, 80% 30%, 82% 0, 84% 30%, 86% 0, 88% 30%, 90% 0, 92% 30%, 94% 0, 96% 30%, 98% 0, 100% 30%, 100% 100%) }
.crimp.bottom { bottom: 0; clip-path: polygon(0 0, 100% 0, 100% 70%, 98% 100%, 96% 70%, 94% 100%, 92% 70%, 90% 100%, 88% 70%, 86% 100%, 84% 70%, 82% 100%, 80% 70%, 78% 100%, 76% 70%, 74% 100%, 72% 70%, 70% 100%, 68% 70%, 66% 100%, 64% 70%, 62% 100%, 60% 70%, 58% 100%, 56% 70%, 54% 100%, 52% 70%, 50% 100%, 48% 70%, 46% 100%, 44% 70%, 42% 100%, 40% 70%, 38% 100%, 36% 70%, 34% 100%, 32% 70%, 30% 100%, 28% 70%, 26% 100%, 24% 70%, 22% 100%, 20% 70%, 18% 100%, 16% 70%, 14% 100%, 12% 70%, 10% 100%, 8% 70%, 6% 100%, 4% 70%, 2% 100%, 0 70%) }
.tear-strip { position: absolute; z-index: 2; top: 22px; left: 0; right: 0; height: 30px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-right: 12px; font: 800 12px/1 var(--font); color: #fff;
  background: linear-gradient(90deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .35)); border-bottom: 2px dashed rgba(255, 255, 255, .9); transition: translate .1s }
.tear-strip i { font-style: normal; letter-spacing: .2em; opacity: .9 }
.booster.opening { animation: shake .5s }
.booster.opening .tear-strip, .booster.opening .crimp.top { transition: transform .6s, opacity .6s; transform: translate(160px, -60px) rotate(25deg); opacity: 0 }
@keyframes float { 50% { transform: rotate(-3deg) translateY(-10px) } }
@keyframes shake { 20% { transform: rotate(-6deg) } 40% { transform: rotate(2deg) } 60% { transform: rotate(-5deg) } 80% { transform: rotate(-1deg) } }

/* capsule machine */
.capsule-machine { position: relative; z-index: 1; width: 230px; display: grid; justify-items: center; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .45)) }
.dome { position: relative; width: 210px; height: 190px; border-radius: 50% 50% 10px 10px; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .12) 30%, rgba(200, 230, 255, .18) 70%); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .5), inset 0 -18px 30px rgba(0, 0, 0, .15); overflow: hidden }
.dome .capsule { position: absolute; width: 36px; height: 44px; border-radius: 50%; background: radial-gradient(ellipse at 30% 22%, rgba(255, 255, 255, .8), transparent 25%), linear-gradient(var(--c) 0 50%, #F4F1F8 50%); box-shadow: inset 0 0 0 1.5px rgba(27, 21, 48, .18), inset -4px -6px 0 rgba(0, 0, 0, .07) }
.capsule-machine.opening .capsule { animation: jiggle .5s 2 }
@keyframes jiggle { 50% { transform: translateY(-14px) } }
.machine-body { position: relative; width: 230px; height: 190px; margin-top: -6px; border-radius: 16px 16px 26px 26px; background: linear-gradient(180deg, #FF6B8B, var(--hot) 40%, var(--hot-dark)); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .12), inset 0 8px 0 rgba(255, 255, 255, .25) }
.machine-brand { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font: 400 26px/1 var(--logo); color: #fff; text-shadow: 0 3px 0 var(--ink) }
.coin-slot { position: absolute; top: 52px; left: 22px; padding: 6px 8px; border-radius: 8px; background: var(--ink); color: var(--sun); font: 800 12px/1 var(--font) }
.lever-knob { position: absolute; top: 60px; left: 50%; margin-left: -42px; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #E8E3F0 60%, #BDB5CC); box-shadow: 0 0 0 5px var(--ink), 0 6px 0 5px rgba(0, 0, 0, .25); cursor: grab; touch-action: none; transform: rotate(var(--turn, 0deg)); transition: transform .2s }
.lever-knob span { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 18px; margin-left: -9px; border-radius: 9px; background: var(--ink) }
.capsule-machine.opening .lever-knob { transform: rotate(360deg); transition: transform .7s }
.chute { position: absolute; bottom: 14px; right: 22px; width: 54px; height: 40px; border-radius: 10px 10px 4px 4px; background: #2A1F52; box-shadow: inset 0 6px 0 rgba(0, 0, 0, .4) }

/* string pull */
.string-machine { position: relative; z-index: 1; display: grid; justify-items: center; padding-bottom: 60px }
.prize-board { display: flex; gap: 12px; height: 70px; align-items: flex-start; margin-bottom: 10px }
.prize-string { width: 2px; height: var(--h); background: repeating-linear-gradient(#E8D9B5 0 4px, #B9A57A 4px 8px) }
.string-box { position: relative; width: 210px; height: 190px; border-radius: 20px; display: grid; place-items: center; align-content: center; gap: 8px; background: linear-gradient(160deg, var(--sun), #FFAA2C); box-shadow: inset 0 0 0 4px var(--ink), 0 8px 0 var(--ink) }
.string-box::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 26px; transform: translateY(-50%); background: var(--hot); box-shadow: inset 0 0 0 4px var(--ink) }
.string-box::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 26px; transform: translateX(-50%); background: var(--hot); box-shadow: inset 4px 0 0 var(--ink), inset -4px 0 0 var(--ink) }
.box-mystery { position: relative; z-index: 1; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--ink); font: 400 52px/1 var(--logo); color: var(--hot) }
.box-label { position: absolute; z-index: 1; bottom: 12px; font: 800 10px/1 var(--font); letter-spacing: .15em; color: var(--ink); background: #fff; padding: 4px 8px; border-radius: 6px }
.string-rope { width: 4px; height: calc(46px + var(--pull, 0px)); background: repeating-linear-gradient(#F5E7C4 0 6px, #C7AE76 6px 12px); transition: height .15s }
.string-ring { width: 46px; height: 46px; border-radius: 50%; border: 9px solid var(--sun); box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 3px var(--ink); margin-top: -2px; cursor: grab; touch-action: none }
.string-machine.pulling .string-rope { transition: none }
.string-machine.opening .string-box { animation: shake .5s }

/* ------------------------------------------------------------ modals */
dialog#modal { border: 0; padding: 0; border-radius: 28px; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; color: var(--ink); background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .35) }
dialog#modal::backdrop { background: rgba(23, 17, 43, .72); backdrop-filter: blur(3px) }
.modal-close { position: absolute; right: 14px; top: 12px; z-index: 20; width: 40px; height: 40px; border-radius: 50%; font-size: 26px; line-height: 1; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 2px var(--ink) }
#modal-content { padding: 30px 28px 28px }
.modal-head { text-align: center; margin-bottom: 18px }
.modal-head h2 { font-family: var(--display); font-weight: 400; font-size: 30px }
.modal-head p { color: var(--muted); margin: 6px 0 0 }
/* dark full-screen stages for reveals */
dialog#modal:has(.reveal-stage, .capsule-open, .pack-modal) { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; background: radial-gradient(circle at 50% 38%, #4A3890, var(--night) 72%); color: #fff }
#modal-content.capsule-open, #modal-content.pack-modal { min-height: 100%; display: grid; place-items: center; padding: 64px 16px 32px }
.reveal-hint { text-align: center; color: rgba(255, 255, 255, .78); font-weight: 700; margin: 18px 0 0; min-height: 1.6em }
.reveal-after { text-align: center; opacity: 0; transform: translateY(16px); transition: .4s .2s; pointer-events: none }
.reveal-after h2 { font-family: var(--display); font-weight: 400; font-size: 30px; margin: 10px 0 18px }
.reveal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }
.reveal-after .fine, .pack-summary .fine { color: rgba(255, 255, 255, .7) }
.capsule-open .btn-outline, .pack-modal .btn-outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff }
.grade-banner { display: inline-flex; gap: 8px; align-items: center; padding: 8px 18px; border-radius: 999px; font-weight: 800; background: rgba(255, 255, 255, .14) }
.grade-banner b { font: 400 22px/1 var(--logo) }
.grade-banner.g-SR { background: linear-gradient(90deg, #ff7eb3, #c48bff, #6ecbff); color: #fff }
.grade-banner.g-SR b { color: #fff }
.grade-banner.g-SSR { background: linear-gradient(90deg, #FFE27A, #F5B700, #FFE27A); color: var(--ink) }
.grade-banner.g-SSR b { color: var(--ink) }
.grade-banner em { font-style: normal; color: var(--sun) }
.grade-banner.g-SSR em { color: var(--hot-dark) }
.new-badge { position: absolute; top: -16px; left: 50%; translate: -50% 0; z-index: 7; background: var(--hot); color: #fff; font: 400 15px/1 var(--logo); padding: 6px 10px; border-radius: 10px; transform: rotate(-10deg); box-shadow: 0 3px 0 var(--ink) }
/* flip card */
.flip { position: relative; perspective: 1400px; width: 100%; aspect-ratio: 63/88; cursor: pointer }
.flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3, 1.3, .5, 1) }
.flip.open .flip-inner { transform: rotateY(180deg) }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden }
.flip-front { transform: rotateY(180deg) }
.aura { position: absolute; inset: -14%; z-index: -1; border-radius: 30%; opacity: 0; filter: blur(22px); pointer-events: none }
.flip.g-R .aura { background: radial-gradient(circle, rgba(76, 141, 255, .8), transparent 65%) }
.flip.g-SR .aura { background: conic-gradient(#ff7eb3, #ffd36e, #7dffb0, #6ecbff, #c48bff, #ff7eb3); animation: spin 3s linear infinite }
.flip.g-SSR .aura { background: radial-gradient(circle, #FFF2B0, #F5B700 45%, transparent 70%); animation: pulse 1s ease-in-out infinite alternate }
.flip.suspense .aura, .capsule-card .flip.g-SR .aura, .capsule-card .flip.g-SSR .aura { opacity: .9 }
.flip.suspense { animation: suspense 1.4s ease-in-out infinite }
.flip.open { animation: none }
@keyframes spin { to { rotate: 360deg } }
@keyframes pulse { to { transform: scale(1.12); opacity: 1 } }
@keyframes suspense { 0%, 100% { transform: rotate(0) } 10% { transform: rotate(-2deg) } 20% { transform: rotate(2deg) } 30% { transform: rotate(0) } }
.burst { position: absolute; left: 50%; top: 50%; z-index: 30; pointer-events: none }
.burst i { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 2px; background: var(--sun); transform: rotate(var(--a)) translateY(0); animation: burst 1s ease-out forwards }
.burst.g-SR i:nth-child(3n) { background: #ff7eb3 } .burst.g-SR i:nth-child(3n+1) { background: #6ecbff } .burst.g-SR i:nth-child(3n+2) { background: #c48bff }
.burst.g-SSR i:nth-child(2n) { background: #fff }
@keyframes burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1) } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -2.6)) scale(.4) } }
/* capsule reveal */
.capsule-stage { width: min(340px, 82vw); display: grid; justify-items: center }
.drop-capsule { position: relative; width: 132px; height: 176px; cursor: pointer; animation: drop .8s cubic-bezier(.3, 1.4, .5, 1) both, wobble 1.6s .9s ease-in-out infinite }
.half { position: absolute; left: 0; right: 0; height: 50%; transition: transform .55s cubic-bezier(.3, 1.4, .5, 1), opacity .55s }
.half.top { top: 0; border-radius: 66px 66px 6px 6px / 80px 80px 6px 6px; background: radial-gradient(ellipse at 32% 26%, rgba(255, 255, 255, .85), transparent 22%), linear-gradient(100deg, color-mix(in srgb, var(--cap, #FF8FA3) 70%, #fff), var(--cap, #FF8FA3) 60%, color-mix(in srgb, var(--cap, #FF8FA3) 75%, #000)); opacity: .93; box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .12) }
.half.top::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 8px; height: 44%; border-radius: 30px 30px 4px 4px; background: rgba(255, 255, 255, .35); filter: blur(3px) }
.half.bottom { bottom: 0; border-radius: 6px 6px 66px 66px / 6px 6px 80px 80px; background: radial-gradient(ellipse at 70% 30%, #fff, #EDE9F2 70%, #D4CEDE); box-shadow: inset 0 8px 0 -4px rgba(0, 0, 0, .08) }
.capsule-shine { position: absolute; left: 4px; right: 4px; top: 50%; height: 6px; margin-top: -3px; background: color-mix(in srgb, var(--cap, #FF8FA3) 55%, #fff); border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .15) }
.capsule-stage.g-R { --cap: #7CC6FE } .capsule-stage.g-SR { --cap: #C3A6FF } .capsule-stage.g-SSR { --cap: #FFD166 }
.capsule-stage.g-SSR .drop-capsule { filter: drop-shadow(0 0 24px rgba(255, 209, 102, .9)) }
.capsule-stage.g-SR .drop-capsule { filter: drop-shadow(0 0 20px rgba(196, 139, 255, .9)) }
.capsule-stage.cracked .drop-capsule { animation: none; pointer-events: none }
.capsule-stage.cracked .half.top { transform: translate(-60px, -120px) rotate(-40deg); opacity: 0 }
.capsule-stage.cracked .half.bottom { transform: translate(60px, 120px) rotate(30deg); opacity: 0 }
.capsule-stage.cracked .capsule-shine { opacity: 0 }
.capsule-card { width: min(300px, 74vw); margin-top: -150px; opacity: 0; transform: scale(.2); transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), opacity .3s }
.capsule-stage.cracked .capsule-card { opacity: 1; transform: none }
.capsule-stage.cracked > .reveal-hint { display: none }
.capsule-stage.done .reveal-after { opacity: 1; transform: none; pointer-events: auto; margin-top: 18px }
@keyframes drop { from { transform: translateY(-80vh) } }
@keyframes wobble { 0%, 100% { rotate: 0deg } 25% { rotate: -6deg } 75% { rotate: 6deg } }
/* pack opening */
.pack-open { width: min(420px, 100%); display: grid; justify-items: center }
.pack-open > .reveal-hint { margin-top: 46px }
.pack-top { position: fixed; top: 14px; left: 16px; right: 70px; display: flex; align-items: center; gap: 14px; justify-content: space-between; z-index: 10 }
.pack-counter { font: 400 22px/1 var(--logo); letter-spacing: 1px }
.pack-dots { display: flex; gap: 6px; flex: 1; justify-content: center }
.pack-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .25) }
.pack-dots i.seen { background: #fff } .pack-dots i.g-R { background: var(--gR) } .pack-dots i.g-SR { background: var(--gSR) } .pack-dots i.g-SSR { background: var(--gSSR); box-shadow: 0 0 8px var(--gSSR) }
.pack-stage { position: relative; width: min(310px, 72vw); aspect-ratio: 63/88; margin-top: 20px }
.torn-pack { position: absolute; left: -9%; right: -9%; top: 18%; bottom: -26%; z-index: 20; pointer-events: none; transition: transform .7s .25s cubic-bezier(.5, 0, .7, 1), opacity .5s .3s }
.torn-body { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, #FF6B8B, #FF4D6D 25%, #7B5CFF 70%, #3E2C9E); border-radius: 0 0 10px 10px; clip-path: polygon(0 0, 8% 4%, 16% 0, 26% 5%, 36% 1%, 47% 5%, 58% 0, 69% 4%, 80% 0, 90% 5%, 100% 1%, 100% 100%, 0 100%) }
.torn-body .booster-logo { font-size: 46px }
.pack-stack { position: absolute; inset: 0; transform: translateY(32%) scale(.92); transition: transform .8s cubic-bezier(.3, 1.2, .5, 1); touch-action: none }
.pack-stack.out { transform: none }
.pack-stack.out ~ .torn-pack, .pack-stage:has(.pack-stack.out) .torn-pack { transform: translateY(120%); opacity: 0 }
.stack-card { position: absolute; inset: 0; z-index: calc(100 - var(--i)); transform: translateY(calc(var(--i) * 3px)) rotate(calc((var(--i) - 4) * .4deg)); transition: transform .35s ease-out, opacity .35s, translate .25s, rotate .25s }
.stack-card.dragging { transition: none }
.stack-card.thrown { transform: translateX(var(--fly)) rotate(calc(var(--fly) / 30)) !important; opacity: 0; pointer-events: none }
.stack-card:not(.thrown) .flip:not(.open) .flip-inner { transition-duration: 0s }
.stack-card .flip.open .flip-inner { transition-duration: .6s }
.pack-summary { width: min(980px, 100%); text-align: center }
.pack-summary h2 { font-family: var(--display); font-weight: 400; font-size: 34px; margin: 0 0 6px }
.pack-summary .subtitle { color: rgba(255, 255, 255, .8); margin-bottom: 24px }
.pack-summary .eyebrow { color: var(--sun) }
.summary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 16px; margin: 0 auto 28px; padding-top: 34px }
.summary-card { position: relative }
.summary-card.fly-in { animation: fly-in .6s calc(var(--i) * 70ms) cubic-bezier(.3, 1.3, .5, 1) both }
@keyframes fly-in { from { opacity: 0; transform: translateY(60vh) rotate(-30deg) scale(.4) } }
/* shop + detail + confirm */
.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px }
.package { display: grid; gap: 2px; padding: 14px; border-radius: 16px; text-align: left; background: var(--soft); box-shadow: inset 0 0 0 2px transparent }
.package b { font: 400 22px/1.1 var(--logo) }
.package small { font-weight: 800 }
.package em { font-style: normal; font-size: 12px; color: var(--muted) }
.package.selected { background: #FFF4D1; box-shadow: inset 0 0 0 2.5px var(--ink) }
.pay-title { font-weight: 800; margin: 20px 0 8px }
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.pay-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border-radius: 14px; font-weight: 800; font-size: 16px }
.pay-logo { font: 800 13px/1 var(--font); padding: 5px 8px; border-radius: 8px }
.pay-kakao { background: #FEE500; color: #191919 } .pay-kakao .pay-logo { background: #191919; color: #FEE500 }
.pay-toss { background: #0064FF; color: #fff } .pay-toss .pay-logo { background: #fff; color: #0064FF }
.demo-link { display: block; margin: 14px auto 0; font-size: 13px }
.detail-layout { display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: center; padding-top: 40px }
dialog#modal:has(.detail-layout) { width: min(720px, calc(100vw - 24px)) }
.detail-side h2 { font-family: var(--display); font-weight: 400; font-size: 32px }
.detail-side > p { color: var(--muted); margin: 4px 0 0 }
.pick-title { font-weight: 800; margin: 18px 0 8px }
.instance-list, .grade-chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip { padding: 6px 10px; border-radius: 999px; background: var(--soft); font-weight: 800; font-size: 12.5px }
.chip.active { background: var(--ink); color: #fff }
.chip.g-R { color: var(--gR) } .chip.g-SR { color: var(--gSR) } .chip.g-SSR { color: #B98500; background: #FFF4D1 }
.chip.active.g-R, .chip.active.g-SR, .chip.active.g-SSR { color: #fff; background: var(--ink) }
.detail-actions, .confirm-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap }
.confirm-panel { text-align: center; padding: 30px 6px 6px }
.confirm-panel h3 { font-family: var(--display); font-weight: 400; font-size: 26px }
.confirm-panel p { color: var(--muted) }
.confirm-actions { justify-content: center }
.fly-fish { position: fixed; z-index: 200; width: 14px; height: 10px; background: var(--c); pointer-events: none; transform-origin: center }

/* ------------------------------------------------------------ binder */
.binder-wrap { display: grid; justify-items: center; padding: 10px 0 20px }
.binder-cover { position: relative; width: min(440px, 92vw); aspect-ratio: 3/4; border-radius: 16px 26px 26px 16px; display: grid; place-items: center; align-content: center; gap: 12px; color: #fff;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .08), transparent 40%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 6px), linear-gradient(160deg, #3A2C78, #221A4A 60%, #17112B);
  box-shadow: inset 0 0 0 10px #2A1F52, inset 0 0 0 12px rgba(255, 201, 60, .6), inset 18px 0 0 #120D24, 0 30px 50px -10px rgba(23, 17, 43, .6), 0 10px 0 #0E0A1C; transition: transform .3s }
.binder-cover::before { content: ''; position: absolute; inset: 22px 22px 22px 40px; border: 2px dashed rgba(255, 201, 60, .45); border-radius: 12px }
.binder-cover:hover { transform: translateY(-6px) rotate(-1deg) }
.cover-strap { position: absolute; right: -10px; top: 42%; width: 54px; height: 70px; border-radius: 10px; background: linear-gradient(90deg, #120D24, #2A1F52); box-shadow: 0 0 0 2px rgba(255, 201, 60, .5) }
.cover-strap::after { content: ''; position: absolute; left: 14px; top: 23px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF2B0, #E0A800) }
.cover-title { font: 400 64px/1 var(--logo); background: linear-gradient(180deg, #FFF2B0, #E0A800 60%, #FFE27A); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #0E0A1C) }
.cover-sub { font: 800 12px/1 var(--font); letter-spacing: .25em; color: #E6C25A }
.cover-stat { font: 400 30px/1 var(--logo); color: #fff; margin-top: 18px }
.cover-hint { font-weight: 700; font-size: 13px; color: rgba(255, 255, 255, .7); animation: bob 1.2s infinite alternate }
.binder-book { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: 18px; border-radius: 22px; perspective: 2400px;
  background: linear-gradient(90deg, #2A1F52, #221A4A 49%, #120D24 50%, #221A4A 51%, #2A1F52); box-shadow: 0 30px 50px -14px rgba(23, 17, 43, .55), 0 8px 0 #0E0A1C; animation: open-book .5s ease-out }
.binder-book.narrow { grid-template-columns: 1fr; max-width: 460px }
@keyframes open-book { from { transform: perspective(1600px) rotateY(-24deg) scale(.94); opacity: .3 } }
.binder-page { position: relative; padding: 16px 16px 30px; background: linear-gradient(180deg, #2C2648, #1F1A36); min-height: 100%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) }
.binder-page.left { border-radius: 10px 2px 2px 10px; box-shadow: inset -22px 0 26px -18px rgba(0, 0, 0, .7) }
.binder-page.right { border-radius: 2px 10px 10px 2px; box-shadow: inset 22px 0 26px -18px rgba(0, 0, 0, .7) }
.binder-page.single { border-radius: 10px }
.rings { position: absolute; left: 50%; top: 40px; bottom: 40px; width: 0; z-index: 15; display: flex; flex-direction: column; justify-content: space-around; pointer-events: none }
.rings i { display: block; width: 46px; height: 22px; margin-left: -23px; border-radius: 11px; background: linear-gradient(180deg, #F6F1E1, #A9A091 45%, #E9E2CF 60%, #7F7768); box-shadow: 0 3px 6px rgba(0, 0, 0, .5) }
.page-head { display: flex; align-items: baseline; gap: 10px; color: #fff; margin-bottom: 12px; padding: 0 4px }
.page-head b { font: 400 24px/1 var(--logo) }
.page-head span { font-weight: 800; color: rgba(255, 255, 255, .8) }
.page-head em { margin-left: auto; font-style: normal; font-weight: 800; color: rgba(255, 255, 255, .6); font-size: 13px }
.page-head .g-N { color: #C9CFD6 }
.pockets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.pocket { position: relative; display: block; aspect-ratio: 63/88; border-radius: 7px; padding: 0; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 10px 0 -8px rgba(255, 255, 255, .25); transition: transform .2s }
.pocket::before { content: ''; position: absolute; left: 6%; right: 6%; top: 5px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .22); z-index: 4 }
button.pocket:hover { transform: translateY(-4px) }
.pocket .tcg { position: absolute; inset: 4px; width: auto }
.sleeve { position: absolute; inset: 0; z-index: 5; border-radius: 7px; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .05) 28%, transparent 40%, transparent 70%, rgba(255, 255, 255, .12) 85%, rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35) }
.pocket-count { position: absolute; right: -6px; top: -8px; z-index: 6; background: var(--hot); color: #fff; font: 400 14px/1 var(--logo); padding: 5px 8px; border-radius: 999px; box-shadow: 0 0 0 2px #1F1A36 }
.pocket.empty { display: grid; place-items: center }
.ghost { position: absolute; inset: 18% 12%; background: rgba(255, 255, 255, .1); -webkit-mask: var(--img) center/contain no-repeat; mask: var(--img) center/contain no-repeat }
.pocket-no { position: absolute; bottom: 8px; font: 800 11px/1 var(--font); color: rgba(255, 255, 255, .35); letter-spacing: .1em }
.page-no { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .35); font-size: 12px; font-weight: 800 }
.binder-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; font-weight: 800 }
.leaf { position: absolute; top: 18px; bottom: 18px; z-index: 12; transform-style: preserve-3d; pointer-events: none }
.leaf.fwd { left: 50%; right: 18px; transform-origin: left center; animation: turn-fwd .75s cubic-bezier(.45, .05, .35, 1) forwards }
.leaf.back { left: 18px; right: 50%; transform-origin: right center; animation: turn-back .75s cubic-bezier(.45, .05, .35, 1) forwards }
.leaf.single { left: 18px; right: 18px }
.leaf-face { position: absolute; inset: 0; padding: 16px 16px 30px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(180deg, #2C2648, #1F1A36); border-radius: 6px; box-shadow: 0 0 30px rgba(0, 0, 0, .4) }
.leaf-face.backside { transform: rotateY(180deg) }
@keyframes turn-fwd { to { transform: rotateY(-180deg) } }
@keyframes turn-back { to { transform: rotateY(180deg) } }
.progress { min-width: 220px; display: grid; gap: 4px }
.progress b { font: 400 30px/1 var(--logo) }
.progress small { color: var(--muted); font-weight: 700 }
.progress span { position: relative; height: 10px; border-radius: 5px; background: var(--soft); overflow: hidden }
.progress span::after { content: ''; position: absolute; inset: 0; width: var(--p); background: linear-gradient(90deg, var(--hot), var(--sun)); border-radius: 5px }

/* ------------------------------------------------------------ home / aquarium / profile / login */
.welcome-panel { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: center }
.stat-row { display: flex; gap: 28px; margin-top: 22px }
.stat-row b { display: block; font: 400 28px/1.1 var(--logo) }
.stat-row small { color: var(--muted); font-weight: 700 }
.card-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; padding-top: 34px }
.tank-wrap { background: #fff; border-radius: var(--radius); padding: 18px; box-shadow: 0 0 0 2px var(--line) }
.tank-label { font: 800 11px/1 var(--font); letter-spacing: .2em; color: var(--muted); margin-bottom: 12px }
.tank { position: relative; height: 340px; border: 3px solid var(--ink); border-top-width: 10px; background: linear-gradient(#fff 0 8%, #CFEAF8 8%, #E9F6FC 75%, #DCCFA8 75% 79%, #CDBE92 79%) }
.tank canvas { width: 100%; height: 100%; display: block }
.tank-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 700 }
.tank-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); margin-right: 6px }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 20px; font-weight: 700; font-size: 14px }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px }
.toolbar { display: none }
.profile-box { display: grid; grid-template-columns: 420px 1fr; gap: 28px; align-items: start }
.profile-card { background: var(--soft); border-radius: var(--radius); padding: 28px }
.profile-card h3 { font-size: 15px; margin: 24px 0 8px }
.profile-dot { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--grape); color: #fff; font: 400 30px/1 var(--display); margin-bottom: 12px }
.profile-card h2 { font-family: var(--display); font-weight: 400; font-size: 30px }
.uid { color: var(--muted); margin: 2px 0 0; font-size: 13px }
.linked { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px }
.linked li { display: flex; align-items: center; gap: 10px; font-weight: 700; background: #fff; padding: 10px 14px; border-radius: 12px }
.linked .ok { margin-left: auto; color: #13A07F }
.linked .text-link { margin-left: auto }
.social-dot { width: 14px; height: 14px; border-radius: 50% }
.social-dot.s-kakao { background: #FEE500; box-shadow: inset 0 0 0 1px #0002 } .social-dot.s-naver { background: #03C75A } .social-dot.s-google { background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0) }
.ledger { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px }
.ledger th, .ledger td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line) }
.ledger td:last-child, .ledger th:last-child { text-align: right; font-weight: 800 }
.ledger .plus { color: #13A07F }
.login-card { background: #fff; border-radius: 28px; padding: 34px 28px; box-shadow: 0 0 0 2px var(--ink), 0 8px 0 var(--ink); text-align: center }
.login-brand { justify-content: center; margin-bottom: 18px; font-size: 32px }
.login-card .page-title { font-size: 32px }
.social-list { display: grid; gap: 10px; margin-top: 24px }
.social-btn { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 12px; font-weight: 800; font-size: 15.5px }
.social-btn .logo { position: absolute; left: 16px; width: 24px; height: 24px; stroke: none }
.s-kakao { background: #FEE500; color: rgba(0, 0, 0, .85) }
.s-naver { background: #03C75A; color: #fff }
.s-google { background: #fff; color: #1F1F1F; box-shadow: inset 0 0 0 1.5px #747775 }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 22px 0 }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line) }
.join-form { display: flex; gap: 8px }
.join-form input { flex: 1; min-width: 0; height: 48px; border-radius: 12px; border: 2px solid var(--line); padding: 0 14px; font-weight: 600 }
.join-form input:focus { border-color: var(--ink); outline: none }
.form-error { background: #FFE3E9; color: var(--hot-dark); padding: 10px; border-radius: 10px; font-weight: 700; margin: 16px 0 0 }

/* standalone checkout / mock login */
body.standalone { background: var(--soft); min-height: 100vh }
.standalone-main { max-width: 480px; margin: 0 auto; padding: 40px 16px }
.standalone-brand { margin-bottom: 22px }
.checkout-card { background: #fff; border-radius: 24px; padding: 28px; box-shadow: 0 0 0 2px var(--ink), 0 8px 0 var(--ink) }
.checkout-card h1 { font-family: var(--display); font-weight: 400; font-size: 28px; margin-bottom: 14px }
.order-summary { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; padding: 16px; background: var(--soft); border-radius: 14px; margin: 0 0 16px }
.order-summary dt { color: var(--muted); font-weight: 700 }
.order-summary dd { margin: 0; text-align: right; font-weight: 700 }
.notice { background: #FFF4D1; border-radius: 12px; padding: 12px 14px; font-size: 14px }
.checkout-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 10px }
.checkout-error { color: var(--hot-dark); font-weight: 700 }
.mock-form { display: grid; gap: 12px; margin: 16px 0 }
.mock-form label { display: grid; gap: 6px; font-weight: 700; font-size: 14px }
.mock-form input { height: 46px; border-radius: 12px; border: 2px solid var(--line); padding: 0 12px }

/* ------------------------------------------------------------ responsive */

/* ================================================================ Stardew-ish pixel touch (light) */
:root { --pixel: 'Galmuri11', 'Galmuri9', var(--font); --wood-d: #5B2E10; --wood: #B5652A; --wood-l: #E39A4F; --parch: #FFF1CF; --parch-d: #F3D9A4 }
body { background: #FFFDF7 }
.page-title, .band h2, .hero h1, .modal-head h2, .reveal-after h2, .pack-summary h2, .detail-side h2, .confirm-panel h3, .checkout-card h1, .profile-card h2 { font-family: var(--pixel); font-weight: 700; letter-spacing: -.5px }
.page-title { font-size: clamp(30px, 4.4vw, 44px) }
.hero h1 { font-size: clamp(36px, 5.4vw, 60px); line-height: 1.2 }
.nav a, .btn, .pill, .points-pill, .method-tabs button b, .draw-bar b, .stage-hint, .reveal-hint, .tank-label, .grade-banner, .pack-counter, .page-head span, .progress small, .slot-name, .chip, .points-big, .stat-row small, .side-panel h2, #toast, .grade-odds span, .steps b, .package b, .facts-dl dt { font-family: var(--pixel) }
.points-big, .stat-row b, .progress b { font-family: var(--pixel); font-weight: 700 }
.hero-kicker { font: 700 20px/1.3 var(--pixel); color: var(--hot); margin: 14px 0 0 }
/* wooden signboard eyebrow */
.eyebrow { display: inline-block; font: 700 12px/1 var(--pixel); letter-spacing: .08em; color: var(--wood-d); background: var(--wood-l); padding: 7px 10px 6px; margin-bottom: 14px;
  box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d), inset 0 -3px 0 #C47A35, inset 0 2px 0 #F6C27D }
.pack-summary .eyebrow, .capsule-open .eyebrow { color: var(--wood-d) }
/* pixel buttons: notched outline, bevel */
.btn { border-radius: 0; font-weight: 700; font-size: 15px; letter-spacing: -.2px }
.btn:active { transform: translateY(2px) }
.btn-dark { background: #2D2448; box-shadow: 0 -3px 0 #120D24, 0 3px 0 #120D24, -3px 0 0 #120D24, 3px 0 0 #120D24, inset 0 -4px 0 #17112B, inset 0 3px 0 #4A3E70 }
.btn-dark:hover { background: #3A2F5C }
.btn-hot { background: var(--hot); box-shadow: 0 -3px 0 #8A1631, 0 3px 0 #8A1631, -3px 0 0 #8A1631, 3px 0 0 #8A1631, inset 0 -4px 0 #C9284A, inset 0 3px 0 #FF8FA6 }
.btn-hot:hover { background: #FF6380 }
.btn-lime { background: var(--sun); box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d), inset 0 -4px 0 #D99A1E, inset 0 3px 0 #FFE38F }
.btn-outline { background: var(--parch); color: var(--wood-d); box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d), inset 0 -4px 0 var(--parch-d) }
.btn-outline:hover { background: #FFF7E2 }
.btn-ghost { border-radius: 0; box-shadow: 0 -2px 0 rgba(255,255,255,.5), 0 2px 0 rgba(255,255,255,.5), -2px 0 0 rgba(255,255,255,.5), 2px 0 0 rgba(255,255,255,.5) }
.btn-small { min-height: 36px }
.capsule-open .btn-outline, .pack-modal .btn-outline { background: var(--parch); color: var(--wood-d); box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d), inset 0 -4px 0 var(--parch-d) }
.round-btn { border-radius: 0; background: var(--parch); color: var(--wood-d); box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d), inset 0 -4px 0 var(--parch-d); font-family: var(--pixel) }
.pill { border-radius: 0; box-shadow: 0 -2px 0 currentColor, 0 2px 0 currentColor, -2px 0 0 currentColor, 2px 0 0 currentColor }
.nav a { border-radius: 0 }
.nav a.active { background: var(--wood-l); color: var(--wood-d); box-shadow: 0 -2px 0 var(--wood-d), 0 2px 0 var(--wood-d), -2px 0 0 var(--wood-d), 2px 0 0 var(--wood-d), inset 0 -3px 0 #C47A35 }
.points-pill { border-radius: 0; background: var(--parch); box-shadow: 0 -2px 0 var(--wood-d), 0 2px 0 var(--wood-d), -2px 0 0 var(--wood-d), 2px 0 0 var(--wood-d) }
.points-pill b { border-radius: 0; background: var(--sun); box-shadow: inset 0 -3px 0 #D99A1E }
.avatar, .sound-btn { border-radius: 0 }
.avatar { box-shadow: 0 -2px 0 #3B2A8C, 0 2px 0 #3B2A8C, -2px 0 0 #3B2A8C, 2px 0 0 #3B2A8C }
/* wood + parchment frames */
.side-panel, .tank-wrap, .login-card, .checkout-card, .profile-card, dialog#modal:not(:has(.reveal-stage, .capsule-open, .pack-modal)) {
  border-radius: 0; background: var(--parch);
  box-shadow: 0 -4px 0 var(--wood-d), 0 4px 0 var(--wood-d), -4px 0 0 var(--wood-d), 4px 0 0 var(--wood-d), inset 0 0 0 6px var(--wood-l), inset 0 0 0 9px var(--wood), inset 0 0 0 11px #F7DFA9 }
.side-panel, .tank-wrap, .profile-card { padding: 26px }
.login-card, .checkout-card { padding: 38px 30px }
dialog#modal:not(:has(.reveal-stage, .capsule-open, .pack-modal)) { overflow: auto; margin: auto; outline: 4px solid var(--wood-d); outline-offset: 0 }
.modal-close { border-radius: 0; background: var(--parch); color: var(--wood-d); box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d); font-family: var(--pixel) }
.machine-panel { border-radius: 0; box-shadow: 0 -4px 0 var(--wood-d), 0 4px 0 var(--wood-d), -4px 0 0 var(--wood-d), 4px 0 0 var(--wood-d), 0 12px 0 rgba(91, 46, 16, .25) }
.method-tabs { border-bottom: 4px solid var(--wood-d); background: var(--parch) }
.method-tabs button { background: var(--parch); border-right: 4px solid var(--wood-d) }
.method-tabs button small { font-family: var(--pixel); color: #9A6A3A }
.method-tabs button.active { background: var(--wood-l); box-shadow: inset 0 -4px 0 #C47A35, inset 0 3px 0 #F6C27D }
.method-tabs button.active small { color: var(--wood-d) }
.draw-bar { border-top: 4px solid var(--wood-d); background: var(--parch) }
.draw-bar small { color: #9A6A3A }
.grade-odds li, .package, .steps li, .grade-chip, .dex-mini, .facts-dl, .order-summary { border-radius: 0; background: #FFF8E4; box-shadow: 0 -2px 0 var(--parch-d), 0 2px 0 var(--parch-d), -2px 0 0 var(--parch-d), 2px 0 0 var(--parch-d) }
.side-panel .grade-odds li { background: #FFFBEF }
.package.selected { background: var(--sun); box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d) }
.side-panel h2, .pay-title, .pick-title { color: var(--wood-d) }
.gacha-page { background: linear-gradient(180deg, #FFF3DA, #FFFDF7 340px) }
/* stage: pixel night sky + wooden floor */
.stage { background: linear-gradient(180deg, #1B1640 0%, #2C2463 55%, #3E2F7A 78%, transparent 78%), repeating-linear-gradient(90deg, #8C4B20 0 58px, #6E3815 58px 62px), #8C4B20; padding-bottom: 96px }
.stage::before { inset: 0 0 22% 0; background: none; mask: none; width: 2px; height: 2px; box-shadow: 410px 90px 0 #FFD36E, 500px 30px 0 #FFF6D5, 90px 340px 0 #FFF6D5, 120px 230px 0 #FFD36E, 740px 30px 0 #FFF6D5, 640px 130px 0 #FFF6D5, 40px 50px 0 #FFD36E, 550px 260px 0 #FFF6D5, 80px 150px 0 #FFF6D5, 110px 350px 0 #FFD36E, 540px 30px 0 #FFF6D5, 720px 70px 0 #FFF6D5, 280px 400px 0 #FFD36E, 800px 370px 0 #FFF6D5, 70px 360px 0 #FFF6D5, 740px 250px 0 #FFD36E, 60px 140px 0 #FFF6D5, 50px 350px 0 #FFF6D5, 170px 180px 0 #FFD36E, 530px 90px 0 #FFF6D5, 690px 70px 0 #FFF6D5, 730px 190px 0 #FFD36E, 710px 110px 0 #FFF6D5, 130px 370px 0 #FFF6D5, 730px 400px 0 #FFD36E, 240px 230px 0 #FFF6D5, 120px 350px 0 #FFF6D5, 910px 40px 0 #FFD36E, 720px 30px 0 #FFF6D5, 790px 130px 0 #FFF6D5, 630px 340px 0 #FFD36E, 540px 200px 0 #FFF6D5, 590px 370px 0 #FFF6D5, 580px 230px 0 #FFD36E, 380px 150px 0 #FFF6D5, 230px 150px 0 #FFF6D5, 100px 360px 0 #FFD36E, 380px 330px 0 #FFF6D5, 630px 210px 0 #FFF6D5, 930px 280px 0 #FFD36E, 360px 380px 0 #FFF6D5, 90px 70px 0 #FFF6D5, 650px 260px 0 #FFD36E, 210px 210px 0 #FFF6D5, 190px 310px 0 #FFF6D5, 530px 20px 0 #FFD36E; opacity: .85; animation: twinkle 3s steps(2) infinite }
.stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 22%; height: 8px; background: repeating-linear-gradient(90deg, #A9612A 0 16px, #C47A35 16px 32px); box-shadow: 0 -4px 0 #5B2E10 }
@keyframes twinkle { 50% { opacity: .55 } }
.spot { top: 46%; background: radial-gradient(circle, rgba(255, 214, 140, .22), transparent 60%) }
.stage-hint { bottom: 18px; left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: 92%; padding: 8px 12px 7px; color: var(--wood-d); background: var(--parch); font-size: 13px;
  box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d), inset 0 -3px 0 var(--parch-d) }
/* dark reveal stages get pixel stars too */
dialog#modal:has(.reveal-stage, .capsule-open, .pack-modal)::before { content: ''; position: fixed; left: 0; top: 0; width: 2px; height: 2px; box-shadow: 410px 90px 0 #FFD36E, 500px 30px 0 #FFF6D5, 90px 340px 0 #FFF6D5, 120px 230px 0 #FFD36E, 740px 30px 0 #FFF6D5, 640px 130px 0 #FFF6D5, 40px 50px 0 #FFD36E, 550px 260px 0 #FFF6D5, 80px 150px 0 #FFF6D5, 110px 350px 0 #FFD36E, 540px 30px 0 #FFF6D5, 720px 70px 0 #FFF6D5, 280px 400px 0 #FFD36E, 800px 370px 0 #FFF6D5, 70px 360px 0 #FFF6D5, 740px 250px 0 #FFD36E, 60px 140px 0 #FFF6D5, 50px 350px 0 #FFF6D5, 170px 180px 0 #FFD36E, 530px 90px 0 #FFF6D5, 690px 70px 0 #FFF6D5, 730px 190px 0 #FFD36E, 710px 110px 0 #FFF6D5, 130px 370px 0 #FFF6D5, 730px 400px 0 #FFD36E, 240px 230px 0 #FFF6D5, 120px 350px 0 #FFF6D5, 910px 40px 0 #FFD36E, 720px 30px 0 #FFF6D5, 790px 130px 0 #FFF6D5, 630px 340px 0 #FFD36E, 540px 200px 0 #FFF6D5, 590px 370px 0 #FFF6D5, 580px 230px 0 #FFD36E, 380px 150px 0 #FFF6D5, 230px 150px 0 #FFF6D5, 100px 360px 0 #FFD36E, 380px 330px 0 #FFF6D5, 630px 210px 0 #FFF6D5, 930px 280px 0 #FFD36E, 360px 380px 0 #FFF6D5, 90px 70px 0 #FFF6D5, 650px 260px 0 #FFD36E, 210px 210px 0 #FFF6D5, 190px 310px 0 #FFF6D5, 530px 20px 0 #FFD36E; opacity: .7; transform: scale(1.4); transform-origin: 0 0; pointer-events: none; animation: twinkle 3s steps(2) infinite }
.pack-counter { font-family: var(--pixel); font-weight: 700 }
.pack-dots i { border-radius: 0 }
.grade-banner { border-radius: 0; box-shadow: 0 -3px 0 rgba(0,0,0,.35), 0 3px 0 rgba(0,0,0,.35), -3px 0 0 rgba(0,0,0,.35), 3px 0 0 rgba(0,0,0,.35) }
.new-badge { border-radius: 0; font-family: var(--pixel); font-weight: 700; font-size: 13px; box-shadow: 0 -2px 0 #8A1631, 0 2px 0 #8A1631, -2px 0 0 #8A1631, 2px 0 0 #8A1631 }
/* Stardew dialogue box: toast + speech bubbles */
#toast { border-radius: 0; background: var(--parch); color: var(--wood-d); font-weight: 700;
  box-shadow: 0 -4px 0 var(--wood-d), 0 4px 0 var(--wood-d), -4px 0 0 var(--wood-d), 4px 0 0 var(--wood-d), inset 0 0 0 4px var(--wood-l) ; padding: 14px 20px }
.tcg-bubble { border: 0; border-radius: 0; background: #FFF8E7; color: #3B2210; font: 700 12.5px/1.45 var(--pixel);
  box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d), 0 9px 0 rgba(0, 0, 0, .18) }
.tcg-bubble::after { border: 0; width: 12px; height: 9px; bottom: -11px; transform: translateX(-50%); background: var(--wood-d); clip-path: polygon(0 0, 100% 0, 100% 33%, 67% 33%, 67% 67%, 33% 67%, 33% 100%, 0 100%) }
.quote-list li { border-radius: 0; border: 0; background: #FFF8E7; font-family: var(--pixel); font-size: 14px; box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d) }
/* aquarium: wooden tank frame */
.tank { border: 4px solid var(--wood-d); border-top: 12px solid var(--wood); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5) }
.mini-tank { border-color: var(--wood-d); border-top-width: 4px }
.tank-label { color: var(--wood-d) }
.tank-foot { font-family: var(--pixel); color: #9A6A3A }
.legend { font-family: var(--pixel) }
.legend i { border-radius: 0 }
/* binder page heads + cover a bit more pixel */
.page-head span, .page-head em { font-family: var(--pixel) }
.cover-sub, .cover-hint { font-family: var(--pixel) }
.binder-nav span { font-family: var(--pixel) }
.join-form input, .mock-form input { border-radius: 0; border: 3px solid var(--wood-d); background: #FFFDF5 }
.join-form input:focus { border-color: var(--hot) }
.ledger th { font-family: var(--pixel); color: var(--wood-d) }
.text-link { color: #B5452A }
footer { background: var(--parch); border-top: 4px solid var(--wood-d) }
.footer-links { font-family: var(--pixel) }

@media (max-width: 899px) {
  #header { gap: 10px; height: auto; min-height: 64px; flex-wrap: wrap; padding: 10px 16px 0 }
  .nav { order: 3; width: 100%; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 8px; scrollbar-width: none }
  .nav a { padding: 6px 12px; font-size: 14px; flex: none }
  .header-tools { margin-left: auto; gap: 6px }
  .mini-tank { display: none }
  .container { padding: 24px 16px 56px }
  .hero, .welcome-panel, .character-hero, .profile-box, .gacha-layout, .detail-layout { grid-template-columns: 1fr }
  .hero-cards { height: 340px }
  .hero-cards .showcase-card { width: 170px }
  .steps, .grade-list { grid-template-columns: 1fr 1fr }
  .dex-row { grid-template-columns: repeat(3, 1fr) }
  .variant-grid { grid-template-columns: 1fr 1fr }
  .character-hero > .tcg-slot { max-width: 320px }
  .summary-grid { grid-template-columns: repeat(3, 1fr); gap: 18px 10px }
  .detail-layout { padding-top: 30px }
  .detail-card { max-width: 280px; margin: 0 auto }
  .stage { min-height: 430px }
  .profile-box { gap: 20px }
}
@media (max-width: 520px) {
  .steps, .grade-list { grid-template-columns: 1fr }
  .method-tabs button b { font-size: 16px }
  .method-tabs button small { font-size: 11px }
  .draw-bar .btn { width: 100% }
  .points-pill { padding-left: 12px; font-size: 13px }
  .pockets { gap: 8px }
  .summary-grid { grid-template-columns: repeat(2, 1fr) }
  .pay-methods { grid-template-columns: 1fr }
  .join-form { flex-direction: column }
  #modal-content { padding: 26px 18px 22px }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}
.pocket:has(.tcg-bubble.show), .summary-card:has(.tcg-bubble.show), .tcg-slot:has(.tcg-bubble.show) { z-index: 10 }
.summary-card, .tcg-slot { position: relative }
.method-tabs button b, .package b, .steps b, .draw-bar b, .grade-odds span, .nav a, .page-head span { font-weight: 700 }

/* ================================================================ v3: readable cards, trial landing, odds, phone */
/* cards: bigger, darker text like a printed card */
.tcg { color: #15110C }
.tcg-art { aspect-ratio: 1.62 }
.tcg-name { font-size: 7.6cqw }
.tcg-stage { font-size: 3cqw }
.tcg-hp { font-size: 7cqw }
.tcg-hp small { font-size: 3.2cqw }
.tcg-strip { font-size: 2.9cqw; font-weight: 800 }
.mv-name { font-size: 5.3cqw; font-weight: 900 }
.dmg { font-size: 6.6cqw; font-weight: 900 }
.tcg-move p, .tcg-ability p { font-size: 3.35cqw; line-height: 1.32; font-weight: 600; color: #2A2219 }
.tcg-ability b { font-size: 5cqw }
.ab-tag { font-size: 3cqw }
.tcg-move .cost .type-ico { width: 5.2cqw }
.tcg-stats { font-size: 3cqw; font-weight: 800 }
.tcg-stats .type-ico { width: 4.2cqw }
.tcg-flavor { font-size: 2.95cqw; font-weight: 600; line-height: 1.35; color: #3A3024 }
.tcg-foot { font-size: 2.6cqw; opacity: 1 }
.rar { font-size: 3.6cqw }
.tcg.g-SSR .tcg-body, .tcg.g-SSR .tcg-flavor, .tcg.g-SSR .tcg-stats { background: rgba(255, 252, 242, .9) }
/* small cards (binder, summary, odds): the printed fine text is hidden, the rest gets bigger */
.tcg.small .tcg-move p, .tcg.small .tcg-ability p, .tcg.small .tcg-flavor, .tcg.small .tcg-strip, .odds-card .tcg .tcg-move p, .odds-card .tcg .tcg-ability p, .odds-card .tcg .tcg-flavor, .odds-card .tcg .tcg-strip { display: none }
.tcg.small .tcg-art, .odds-card .tcg .tcg-art { aspect-ratio: 1.25 }
.tcg.small .tcg-name, .odds-card .tcg .tcg-name { font-size: 9cqw }
.tcg.small .tcg-hp, .odds-card .tcg .tcg-hp { font-size: 8cqw }
.tcg.small .mv-name, .odds-card .tcg .mv-name { font-size: 6.4cqw }
.tcg.small .dmg, .odds-card .tcg .dmg { font-size: 7.6cqw }
.tcg.small .tcg-ability b, .odds-card .tcg .tcg-ability b { font-size: 6cqw }
.tcg.small .tcg-body, .odds-card .tcg .tcg-body { gap: 3cqw }
.tcg.small .tcg-stats, .odds-card .tcg .tcg-stats { font-size: 3.6cqw }
.tcg.small .tcg-foot, .odds-card .tcg .tcg-foot { font-size: 3.2cqw }
/* trial-first landing */
.try-hero { background: linear-gradient(180deg, #FFF3DA, #FFFDF7) ; border-bottom: 4px solid var(--wood-d) }
.try-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 36px; align-items: center; padding-top: 28px; padding-bottom: 36px }
.try-hero h1 { font: 700 clamp(34px, 5vw, 56px)/1.15 var(--pixel); margin: 0 }
.try-hero h1 em { font-style: normal; font-family: var(--logo); font-weight: 400; color: var(--hot) }
.try-stage { min-height: 500px; border-radius: 0; box-shadow: 0 -4px 0 var(--wood-d), 0 4px 0 var(--wood-d), -4px 0 0 var(--wood-d), 4px 0 0 var(--wood-d) }
.landing .container { padding-top: 10px }
.demo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px }
.demo { margin: 0; display: grid; justify-items: center; gap: 14px; text-align: center }
.phone { width: min(260px, 100%); aspect-ratio: 300/560; padding: 10px; border-radius: 34px; background: #1A1530; box-shadow: 0 0 0 3px var(--wood-d), 0 18px 30px -12px rgba(23, 17, 43, .55) }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; background: #2C2463 }
.demo figcaption b { display: block; font: 700 18px/1.3 var(--pixel) }
.demo figcaption { color: var(--muted); font-size: 14px }
/* odds page */
.odds-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px }
.stat-card { padding: 18px 20px; background: var(--parch); display: grid; gap: 4px; box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d), inset 0 -4px 0 var(--parch-d) }
.stat-card small { font: 700 13px/1.3 var(--pixel); color: #9A6A3A }
.stat-card b { font: 700 34px/1.1 var(--pixel); color: var(--ink) }
.stat-card span { font-size: 13px; color: var(--muted) }
.stat-card.hot b { color: var(--hot) } .stat-card.gold b { color: #C98F00; font-size: 26px }
.grade-bar { display: flex; height: 54px; box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d) }
.gbar { width: var(--w); min-width: 64px; display: grid; place-content: center; text-align: center; font: 700 13px/1.2 var(--pixel); color: #fff; white-space: nowrap }
.gbar b { font-size: 16px } .gbar.g-N { background: #8C96A3 } .gbar.g-R { background: var(--gR) } .gbar.g-SR { background: linear-gradient(90deg, #ff7eb3, #c48bff, #6ecbff) } .gbar.g-SSR { background: linear-gradient(90deg, #FFE27A, #F5B700); color: var(--ink) }
.gbar.g-N b, .gbar.g-R b, .gbar.g-SR b { color: #fff } .gbar.g-SSR b { color: var(--ink) }
.odds-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
.odds-head h2 { margin: 0 }
.filters { display: flex; gap: 8px }
.filters button { padding: 8px 14px; font: 700 14px/1 var(--pixel); background: var(--parch); color: var(--wood-d); box-shadow: 0 -2px 0 var(--wood-d), 0 2px 0 var(--wood-d), -2px 0 0 var(--wood-d), 2px 0 0 var(--wood-d) }
.filters button.active { background: var(--wood-l) }
.odds-rows { display: grid; gap: 18px }
.odds-row { background: #FFF8E4; padding: 16px; box-shadow: 0 -2px 0 var(--parch-d), 0 2px 0 var(--parch-d), -2px 0 0 var(--parch-d), 2px 0 0 var(--parch-d) }
.odds-row header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px }
.odds-row header a { display: flex; align-items: center; gap: 10px; font: 700 20px/1 var(--pixel) }
.odds-row header img { width: 44px; height: 44px }
.odds-row header span { font-family: var(--pixel); color: #9A6A3A }
.odds-row header span b { color: var(--ink) }
.odds-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px }
.odds-rows.flat .odds-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
.odds-card { display: grid; gap: 6px; justify-items: center; text-align: center }
.odds-card .tcg-slot { width: 100% }
.odds-pct { font: 700 22px/1 var(--pixel); color: var(--ink) }
.odds-card small { font-size: 12.5px; color: var(--muted); font-weight: 700 }
.odds-card.g-SSR .odds-pct { color: #C98F00 } .odds-card.g-SR .odds-pct { color: var(--gSR) } .odds-card.g-R .odds-pct { color: var(--gR) }
.sim-band { background: linear-gradient(180deg, #2A2156, #17112B); color: #fff; padding: 26px; box-shadow: 0 -4px 0 var(--wood-d), 0 4px 0 var(--wood-d), -4px 0 0 var(--wood-d), 4px 0 0 var(--wood-d) }
.sim-band .subtitle { color: rgba(255, 255, 255, .75) }
.sim-controls { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 }
.sim-head { font: 700 16px/1.3 var(--pixel); margin: 16px 0 10px }
.sim-bars { display: grid; gap: 8px }
.sim-bar { display: grid; grid-template-columns: 70px 1fr 60px; align-items: center; gap: 10px; font-family: var(--pixel) }
.sim-bar span { height: 18px; background: rgba(255, 255, 255, .12); position: relative }
.sim-bar span::after { content: ''; position: absolute; inset: 0; width: var(--w); background: #8C96A3; transition: width .6s steps(12) }
.sim-bar.g-R span::after { background: var(--gR) } .sim-bar.g-SR span::after { background: var(--gSR) } .sim-bar.g-SSR span::after { background: var(--gSSR) }
.sim-bar b { color: #fff } .sim-bar em { font-style: normal; text-align: right }
.sim-best { display: grid; grid-template-columns: repeat(5, minmax(0, 150px)); gap: 12px; padding-top: 28px }
.sim-card { display: grid; justify-items: center; gap: 4px; font-family: var(--pixel) }
.sim-band .fine { color: rgba(255, 255, 255, .7) }
/* signup consent, notices */
.join-form.stacked { flex-direction: column; align-items: stretch }
.agree { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 13.5px; font-weight: 600 }
.agree input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--hot); flex: none }
.profile-card .notice { margin-top: 12px }
.unlink { margin-left: 8px; font-size: 13px }
.linked .ok + .unlink { margin-left: 8px }
/* mini tank never blocks the link */
.mini-tank canvas { pointer-events: none }
/* footer vendor */
.vendor { width: 100%; display: grid; gap: 4px; font-size: 13px; color: #7A5A3A; border-top: 2px dashed var(--parch-d); padding-top: 14px }
.vendor p { margin: 0 }
.vendor b { color: var(--wood-d) }
.vendor span { color: var(--muted); margin-left: 4px }
.vendor a { text-decoration: underline; text-underline-offset: 2px }
.vendor .copy { color: var(--muted); font-size: 12px }
.standalone-foot { text-align: center; margin-top: 22px }
.legal .band h2 { font-size: 20px; margin-bottom: 8px }
.legal p { color: var(--ink-2); margin: 6px 0 }
/* phone tab bar */
.tabbar { display: none }
@media (max-width: 899px) {
  .nav { display: none }
  #header { padding: 8px 14px; min-height: 58px; flex-wrap: nowrap }
  .brand { font-size: 22px }
  .header-tools { gap: 6px }
  .mini-tank { display: block; width: 44px; height: 30px }
  .sound-btn { width: 34px; height: 34px }
  .avatar { width: 34px; height: 34px }
  .points-pill { height: 34px; padding: 0 4px 0 10px; font-size: 12.5px }
  .points-pill b { width: 24px; height: 24px }
  .tabbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--parch); border-top: 4px solid var(--wood-d) }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; font: 700 11px/1 var(--pixel); color: #9A6A3A }
  .tabbar a svg { width: 22px; height: 22px }
  .tabbar a.active { color: var(--wood-d); background: var(--wood-l); box-shadow: inset 0 -3px 0 #C47A35 }
  body { padding-bottom: 72px }
  #toast { bottom: 88px }
  footer { margin-bottom: 0 }
  .try-grid { grid-template-columns: 1fr; gap: 18px; padding-top: 16px }
  .try-stage { order: -1; min-height: 430px }
  .try-copy { text-align: left }
  .demo-row { grid-template-columns: repeat(3, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 -16px; padding-left: 16px; gap: 16px }
  .demo { scroll-snap-align: center }
  .odds-stats { grid-template-columns: 1fr }
  .odds-cards { grid-template-columns: repeat(2, 1fr) }
  .sim-best { grid-template-columns: repeat(3, 1fr) }
  .sim-band { padding: 20px 16px }
  .gacha-layout { gap: 18px }
  .stage { min-height: 400px }
  .side-panel { order: 2 }
  .binder-book.narrow { padding: 10px }
  .pockets { grid-template-columns: repeat(2, 1fr) }
  .pack-top { left: 10px; right: 60px; top: 10px }
  .pack-dots { display: none }
  .pack-stage { width: min(300px, 76vw) }
  .summary-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 12px }
  dialog#modal:not(:has(.reveal-stage, .capsule-open, .pack-modal)) { width: calc(100vw - 20px); max-height: calc(100dvh - 30px) }
  .detail-layout { grid-template-columns: 1fr; padding-top: 34px }
  .detail-card { max-width: 260px }
  .tcg-bubble { font-size: 12px; max-width: min(220px, 130cqw) }
}
@media (max-width: 380px) {
  .points-pill { font-size: 11.5px }
  .sound-btn { display: none }
}

/* ================================================================ v4: grade finishes modeled on TCG rarities */
.tcg-ribbon { position: absolute; z-index: 3; left: 0; bottom: 6%; padding: .9cqw 2.6cqw .9cqw 2cqw; font: 900 2.9cqw/1 var(--font); letter-spacing: .2cqw; color: #fff; clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%) }
/* N — common: classic yellow, flat, no foil */
.tcg.g-N { background: linear-gradient(145deg, #F7D35A, #EDBE3B) }
.tcg.g-N .tcg-foil { display: none }
/* R — reverse holo: silver frame, rainbow foil across the body, art stays matte */
.tcg.g-R { background: linear-gradient(135deg, #F4F6FA, #B7BFCC 30%, #FFFFFF 50%, #A9B2C1 72%, #E9EDF3) }
.tcg.g-R .tcg-inner::before { background-image: repeating-linear-gradient(120deg, rgba(255, 110, 170, .38) 0 5%, rgba(255, 214, 110, .38) 5% 10%, rgba(110, 240, 180, .38) 10% 15%, rgba(110, 190, 255, .38) 15% 20%, rgba(190, 130, 255, .38) 20% 25%),
  radial-gradient(rgba(255, 255, 255, .9) .7px, transparent 1.3px); background-size: 320% 320%, 2.2cqw 2.2cqw; animation: holo 9s linear infinite }
.tcg.g-R .tcg-art { position: relative; z-index: 2 }
.tcg.g-R .tcg-foil { display: none }
.tcg.g-R .tcg-ribbon { background: linear-gradient(90deg, #3E7BEA, #6BA6FF) }
/* SR — full art: illustration fills the card, etched lines, rainbow holo frame */
.tcg.g-SR { background: linear-gradient(135deg, #ff9ac8, #ffe08a 20%, #9df5c9 40%, #9ad2ff 60%, #d1a8ff 80%, #ff9ac8) 0 0/200% 200%; animation: holo 8s linear infinite }
.tcg.g-SR .tcg-inner { background: repeating-conic-gradient(from 0deg at 50% 32%, color-mix(in srgb, var(--t) 55%, #fff) 0 8deg, color-mix(in srgb, var(--t) 35%, #fff) 8deg 16deg) }
.tcg.g-SR .tcg-inner::before { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .22) 0 .5cqw, transparent .5cqw 1.4cqw), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .14) 0 .5cqw, transparent .5cqw 1.4cqw); background-size: auto }
.tcg.g-SR .tcg-art { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; background: radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .85), transparent 42%) }
.tcg.g-SR .tcg-art::after { opacity: .35 }
.tcg.g-SR .tcg-art img { position: absolute; top: 8%; left: 0; height: 56%; padding: 0 4%; filter: drop-shadow(0 .8cqw 0 rgba(255, 255, 255, .9)) drop-shadow(0 2cqw 2cqw rgba(0, 0, 0, .25)) }
.tcg.g-SR .tcg-strip { margin-top: auto }
.tcg.g-SR .tcg-top { color: #fff; text-shadow: 0 .4cqw 0 rgba(0, 0, 0, .35), 0 0 1.4cqw rgba(0, 0, 0, .35) }
.tcg.g-SR .tcg-body, .tcg.g-SR .tcg-flavor, .tcg.g-SR .tcg-stats { background: rgba(255, 255, 255, .86); border-radius: 1.4cqw }
.tcg.g-SR .tcg-body { flex: none; padding: 1.4cqw 1.6cqw }
.tcg.g-SR .tcg-stats { padding: .8cqw 1.4cqw; border: 0 }
.tcg.g-SR .tcg-foot { color: #fff; text-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .5) }
.tcg.g-SR .tcg-foil { opacity: .3 }
.tcg.g-SR .tcg-ribbon { background: linear-gradient(90deg, #B04CFF, #FF6FB5); top: 64%; bottom: auto }
/* SSR — gold secret: everything is gold metal, glitter, shiny colors */
.tcg.g-SSR { background: linear-gradient(135deg, #FFF6C4, #E4B020 20%, #FFF1B0 38%, #B9860B 58%, #FFE27A 78%, #A97A07) 0 0/200% 200%; animation: holo 6s linear infinite }
.tcg.g-SSR .tcg-inner { background: linear-gradient(160deg, #FFF3BF, #F0C94A 30%, #FFE896 48%, #D9A622 70%, #FFEFAE) }
.tcg.g-SSR .tcg-inner::before { background-image: radial-gradient(rgba(255, 255, 255, .95) .8px, transparent 1.4px), repeating-linear-gradient(60deg, rgba(160, 110, 0, .16) 0 .4cqw, transparent .4cqw 1.6cqw); background-size: 3.6cqw 3.6cqw, auto; animation: glitter 1.6s steps(3) infinite }
@keyframes glitter { 50% { background-position: 1.8cqw 1.2cqw, 0 0 } }
.tcg.g-SSR .tcg-art { background: radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .9), transparent 40%), repeating-conic-gradient(from 0deg at 50% 32%, rgba(255, 255, 255, .35) 0 6deg, transparent 6deg 14deg) }
.tcg.g-SSR .tcg-art img { top: 7%; height: 57%; filter: drop-shadow(0 .8cqw 0 #FFF6C4) drop-shadow(0 0 3cqw rgba(255, 220, 120, .9)) }
.tcg.g-SSR .tcg-top { color: #4A2E00; text-shadow: 0 .3cqw 0 rgba(255, 255, 255, .6) }
.tcg.g-SSR .tcg-hp { color: #A6250F }
.tcg.g-SSR .tcg-body, .tcg.g-SSR .tcg-flavor, .tcg.g-SSR .tcg-stats { background: rgba(255, 246, 205, .88); color: #3E2700 }
.tcg.g-SSR .tcg-foot { color: #4A2E00; text-shadow: none }
.tcg.g-SSR .rar { color: #A6250F }
.tcg.g-SSR .tcg-ribbon { top: 64%; bottom: auto; background: linear-gradient(90deg, #1B1530, #4A3A00); color: #FFE27A }
.tcg.g-SSR .tcg-strip { background: linear-gradient(90deg, #C99A1A, #FFF1B0 30%, #F5D36B 70%, #B9860B) }
/* bigger cards while drawing */
.pack-stage { width: min(420px, 86vw, calc((100svh - 210px) * .716)) }
.capsule-card { width: min(400px, 84vw, calc((100svh - 260px) * .716)) }
.capsule-stage { width: min(440px, 92vw) }
.pack-open { width: min(480px, 100%) }
.pack-summary { width: min(1180px, 100%) }
.summary-grid { gap: 30px 18px }
@media (max-width: 899px) { .pack-stage { width: min(420px, 88vw, calc((100svh - 190px) * .716)) } }
@media (prefers-reduced-motion: reduce) { .tcg.g-SR, .tcg.g-SSR { animation: none } }
.tcg.small:is(.g-SR, .g-SSR) .tcg-body, .odds-card .tcg:is(.g-SR, .g-SSR) .tcg-body { margin-top: auto }
.tcg.g-SR .tcg-ribbon, .tcg.g-SSR .tcg-ribbon { top: 11%; bottom: auto }
.tcg.g-SR .tcg-top { color: #15110C; text-shadow: 0 0 .5cqw #fff, 0 0 1.2cqw #fff, 0 0 1.2cqw #fff }
.tcg.g-SR .tcg-hp { color: #C8231F }
.tcg.g-SR .tcg-foot { color: #15110C; text-shadow: 0 0 .6cqw #fff, 0 0 1cqw #fff }

/* ================================================================ v5: R calmer, SR premium (jewel night full art) */
/* R — keep it a quiet silver reverse holo */
.tcg.g-R .tcg-inner::before { opacity: .55; background-image: repeating-linear-gradient(120deg, rgba(255, 140, 190, .28) 0 5%, rgba(255, 225, 140, .28) 5% 10%, rgba(140, 240, 200, .28) 10% 15%, rgba(140, 200, 255, .28) 15% 20%, rgba(200, 160, 255, .28) 20% 25%), radial-gradient(rgba(255, 255, 255, .8) .6px, transparent 1.2px) }
/* SR — iridescent prism frame */
.tcg.g-SR { background: conic-gradient(from var(--hue, 0deg), #ff8ac4, #ffd36e, #7dffc4, #6ecbff, #b48bff, #ff8ac4); animation: prism 6s linear infinite; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 12px 28px -8px color-mix(in srgb, var(--t) 70%, #000), 0 0 22px -4px color-mix(in srgb, var(--t) 80%, #fff) }
@property --hue { syntax: '<angle>'; inherits: false; initial-value: 0deg }
@keyframes prism { to { --hue: 360deg } }
/* deep jewel background: type-colored aurora over night, starlight */
.tcg.g-SR .tcg-inner { background:
  radial-gradient(ellipse 70% 45% at 50% 30%, color-mix(in srgb, var(--t) 75%, #fff) 0%, color-mix(in srgb, var(--t) 60%, transparent) 38%, transparent 70%),
  conic-gradient(from 200deg at 50% 30%, transparent 0 20deg, rgba(255, 255, 255, .14) 30deg, transparent 45deg 120deg, rgba(255, 255, 255, .1) 135deg, transparent 150deg 360deg),
  linear-gradient(180deg, color-mix(in srgb, var(--t) 55%, #1B1530) 0%, #18122E 62%, #0F0B20 100%) }
.tcg.g-SR .tcg-inner::before { background-image: radial-gradient(rgba(255, 255, 255, .95) .7px, transparent 1.3px), radial-gradient(rgba(255, 240, 200, .8) .5px, transparent 1px); background-size: 6.4cqw 6.4cqw, 3.1cqw 3.1cqw; background-position: 0 0, 1.6cqw 2.2cqw; opacity: .7; animation: glitter 2.4s steps(3) infinite }
.tcg.g-SR .tcg-art { background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--t) 40%, rgba(255, 255, 255, .55)), transparent 46%) }
.tcg.g-SR .tcg-art::after { opacity: .18 }
.tcg.g-SR .tcg-art img { filter: drop-shadow(0 0 .5cqw #fff) drop-shadow(0 0 .5cqw #fff) drop-shadow(0 0 3.5cqw color-mix(in srgb, var(--t) 70%, #fff)) }
/* white type on dark glass, still readable */
.tcg.g-SR .tcg-top { color: #fff; text-shadow: 0 .3cqw 0 rgba(0, 0, 0, .45), 0 0 2cqw color-mix(in srgb, var(--t) 80%, #000) }
.tcg.g-SR .tcg-hp { color: #FFD1DC }
.tcg.g-SR .tcg-stage { background: linear-gradient(#fff, #D9D2F0) }
.tcg.g-SR .tcg-strip { color: #fff; background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .3), rgba(255, 255, 255, .08)); box-shadow: inset 0 0 0 .25cqw rgba(255, 255, 255, .45) }
.tcg.g-SR .tcg-body, .tcg.g-SR .tcg-stats, .tcg.g-SR .tcg-flavor { background: rgba(14, 10, 32, .62); color: #fff; backdrop-filter: blur(2px); box-shadow: inset 0 0 0 .25cqw rgba(255, 255, 255, .22) }
.tcg.g-SR .tcg-move p, .tcg.g-SR .tcg-ability p, .tcg.g-SR .tcg-flavor { color: #ECE6FF }
.tcg.g-SR .tcg-flavor { border-color: rgba(255, 255, 255, .25) }
.tcg.g-SR .tcg-ability b { color: #FFB3D1 }
.tcg.g-SR .tcg-stats { border-top: 0 }
.tcg.g-SR .tcg-foot { color: #fff; text-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .6) }
.tcg.g-SR .set-mark { background: #fff; color: #18122E }
.tcg.g-SR .rar { color: #FFD36E }
.tcg.g-SR .tcg-ribbon { background: linear-gradient(90deg, #7B3CFF, #FF5FA8); box-shadow: 0 0 2cqw rgba(255, 95, 168, .6) }
/* light sweep across the whole card */
.tcg.g-SR::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 48%, rgba(255, 255, 255, .1) 52%, transparent 60%) 0 0/260% 100% no-repeat; mix-blend-mode: soft-light; animation: sweep 3.6s ease-in-out infinite }
@keyframes sweep { 0% { background-position: 130% 0 } 55%, 100% { background-position: -130% 0 } }
.tcg.g-SR .tcg-foil { opacity: .22; mix-blend-mode: color-dodge }
/* reveal stage: SR glow is violet-pink, distinct from SSR gold */
.flip.g-SR .aura { background: radial-gradient(circle, rgba(255, 120, 200, .9), rgba(123, 60, 255, .7) 45%, transparent 70%); animation: pulse 1.1s ease-in-out infinite alternate }
@media (prefers-reduced-motion: reduce) { .tcg.g-SR::after { animation: none; opacity: 0 } }

/* ================================================================ dex */
.dex-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap }
.dex-progress { margin: 0; padding: 10px 14px; background: var(--parch); font-family: var(--pixel); color: var(--wood-d); box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d) }
.dex-progress b { font-size: 22px; margin-right: 6px }
.dex-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; margin-top: 30px }
.dex-card { position: relative; background: var(--parch); box-shadow: 0 -4px 0 var(--wood-d), 0 4px 0 var(--wood-d), -4px 0 0 var(--wood-d), 4px 0 0 var(--wood-d), 0 12px 0 rgba(91, 46, 16, .18); transition: transform .2s }
.dex-card:hover { transform: translateY(-6px) }
.dex-link { display: block; padding: 14px 16px 6px }
.dex-head { display: flex; justify-content: space-between; align-items: center }
.dex-no { font: 700 22px/1 var(--pixel); color: var(--wood-d) }
.type-pill { font: 700 13px/1 var(--pixel); color: #fff; background: var(--t); padding: 6px 10px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2) }
.dex-portrait { position: relative; margin: 12px 0 10px; aspect-ratio: 1.3; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .9), transparent 55%), repeating-linear-gradient(0deg, transparent 0 6px, rgba(255, 255, 255, .12) 6px 7px), linear-gradient(180deg, color-mix(in srgb, var(--t) 30%, #fff), color-mix(in srgb, var(--t) 55%, #fff) 72%, color-mix(in srgb, var(--t) 40%, #6DBE45) 72%);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--t) 60%, #5B2E10) }
.dex-portrait img { position: relative; z-index: 1; width: 74%; height: 86%; object-fit: contain; transition: transform .3s; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .12)) }
.dex-shadow { position: absolute; bottom: 14%; width: 46%; height: 8%; border-radius: 50%; background: rgba(0, 0, 0, .18) }
.dex-card:hover .dex-portrait img { transform: translateY(-6px) scale(1.04); animation: dexbob .9s steps(2) infinite }
@keyframes dexbob { 50% { translate: 0 -3px } }
.dex-name { font: 700 28px/1.1 var(--pixel) }
.dex-species { margin: 2px 0 0; color: #9A6A3A; font-weight: 700; font-size: 14px }
.dex-persona { margin: 10px 0; padding: 10px 12px; background: #FFF8E7; font: 700 13px/1.45 var(--pixel); color: #3B2210; box-shadow: 0 -2px 0 var(--parch-d), 0 2px 0 var(--parch-d), -2px 0 0 var(--parch-d), 2px 0 0 var(--parch-d) }
.dex-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 }
.dex-stats div { background: #FFFBEF; padding: 6px 4px; text-align: center }
.dex-stats dt { font: 700 11px/1 var(--pixel); color: #9A6A3A }
.dex-stats dd { margin: 4px 0 0; font: 700 14px/1 var(--pixel) }
.dex-grades { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 8px 16px 16px }
.dex-grade { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: #FFFBEF; box-shadow: inset 0 0 0 2px #E8D7AE }
.dex-grade img { width: 82%; height: 82%; object-fit: contain }
.dex-grade b { position: absolute; bottom: -2px; right: 0; font: 700 10px/1 var(--pixel); padding: 2px 3px; color: #fff; background: #8C96A3 }
.dex-grade.g-R { box-shadow: inset 0 0 0 2px #B7BFCC } .dex-grade.g-R b { background: var(--gR) }
.dex-grade.g-SR { background: linear-gradient(160deg, #3A2C78, #18122E); box-shadow: inset 0 0 0 2px #c48bff } .dex-grade.g-SR b { background: var(--gSR) }
.dex-grade.g-SSR { background: linear-gradient(160deg, #FFF3BF, #F0C94A); box-shadow: inset 0 0 0 2px #C99A1A } .dex-grade.g-SSR b { background: #C98F00 }
.dex-page:has(.dex-progress:not([hidden])) .dex-grade:not(.owned) img { filter: brightness(0) opacity(.25) }
.dex-grade.owned::after { content: '✓'; position: absolute; top: 2px; left: 4px; font: 700 12px/1 var(--pixel); color: #13A07F }
.character-hero { padding: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--t) 18%, #FFF8E7), #FFF8E7 60%); box-shadow: 0 -4px 0 var(--wood-d), 0 4px 0 var(--wood-d), -4px 0 0 var(--wood-d), 4px 0 0 var(--wood-d) }
@media (max-width: 899px) { .dex-grid2 { grid-template-columns: 1fr 1fr; gap: 18px } .dex-name { font-size: 22px } .dex-persona { display: none } .dex-stats { grid-template-columns: 1fr 1fr } .character-hero { padding: 16px } }
@media (max-width: 420px) { .dex-link { padding: 10px 10px 4px } .dex-grades { padding: 6px 10px 12px; gap: 4px } }

/* ================================================================ mobile ergonomics */
.booster { touch-action: pan-y }
@media (max-width: 899px) {
  .sound-btn { display: none }
  #toast { top: 70px; bottom: auto; transform: translate(-50%, -20px) }
  #toast.show { transform: translate(-50%, 0) }
  /* shop: pack + button fit on the first screen */
  .gacha-page .container { padding-top: 14px }
  .gacha-page .section-top { margin-bottom: 12px; gap: 8px; align-items: center }
  .gacha-page .section-top .eyebrow { display: none }
  .gacha-page .page-title { font-size: 24px }
  .gacha-page .section-top .subtitle { display: none }
  .gacha-page .pill { font-size: 12px; padding: 6px 10px }
  .method-tabs button { padding: 9px 4px }
  .method-tabs button b { font-size: 15px }
  .stage { min-height: 0; height: min(52vh, 430px); padding: 10px 10px 64px }
  .stage .booster, .stage .capsule-machine, .stage .string-machine { scale: .78 }
  .gacha-page .draw-bar { position: fixed; z-index: 35; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom)); padding: 10px 14px; border-top: 4px solid var(--wood-d); flex-wrap: nowrap; box-shadow: 0 -6px 14px rgba(91, 46, 16, .15) }
  .gacha-page .draw-bar small { display: none }
  .gacha-page .draw-bar b { font-size: 15px }
  .gacha-page .draw-bar .btn { width: auto; flex: none; min-height: 46px; padding: 0 18px }
  .gacha-page { padding-bottom: 76px }
  /* landing: pack first, tap to try */
  .try-stage { height: min(56vh, 460px); min-height: 0 }
  .try-stage .booster { scale: .82 }
  .try-hero h1 { font-size: 30px }
  .try-copy .hero-cta .btn { flex: 1 }
  /* card detail popup: give the card a real width */
  .detail-card { width: min(250px, 66vw); margin: 0 auto }
  .detail-side { text-align: center }
  .instance-list, .detail-actions { justify-content: center }
}
@media (max-width: 380px) { .gacha-page .draw-bar b { display: none } .gacha-page .draw-bar .btn { flex: 1 } }

.trybar { position: fixed; z-index: 34; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 18px; background: var(--parch); box-shadow: 0 -4px 0 var(--wood-d), 0 4px 0 var(--wood-d), -4px 0 0 var(--wood-d), 4px 0 0 var(--wood-d), 0 14px 30px rgba(23, 17, 43, .3) }
.trybar b { display: block; font: 700 15px/1.2 var(--pixel); color: var(--wood-d) } .trybar small { color: #9A6A3A; font-size: 12px }
@media (max-width: 899px) { .trybar { left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom)); transform: none; justify-content: space-between; padding: 8px 12px; box-shadow: 0 -4px 0 var(--wood-d) } body:has(.trybar) footer { padding-bottom: 64px } }
@media (max-width: 899px) { #header > .btn, #header > .header-tools { margin-left: auto } }

/* ================================================================ attack, exchange, ranking */
.tcg-atk { position: absolute; z-index: 3; right: 3%; top: 4%; padding: .8cqw 1.8cqw; font: 900 3.4cqw/1 var(--font); color: #fff; background: rgba(27, 21, 48, .82); border-radius: 1cqw; box-shadow: 0 0 0 .3cqw rgba(255, 255, 255, .7) }
.tcg.g-SR .tcg-atk, .tcg.g-SSR .tcg-atk { top: 11% }
.tcg.g-SSR .tcg-atk { background: #4A2E00; color: #FFE27A }
.tix-big { font: 700 30px/1 var(--pixel); margin: 0 0 6px }
.draw-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end }
.rate-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px }
.rate-list li { display: grid; gap: 4px; text-align: center; padding: 10px 6px; background: #FFF8E4; font-family: var(--pixel); box-shadow: 0 -2px 0 var(--parch-d), 0 2px 0 var(--parch-d), -2px 0 0 var(--parch-d), 2px 0 0 var(--parch-d) }
.rate-list b { font-size: 16px }
.x-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.x-presets .package b { font-size: 16px; font-family: var(--pixel) }
.x-presets .package:disabled { opacity: .45 }
.toggle { margin: 16px 0 0 }
.rank-tabs { align-self: flex-end }
.my-rank { margin: 0 0 18px; padding: 12px 16px; background: var(--parch); font-family: var(--pixel); color: var(--wood-d); box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d) }
.my-rank b { font-size: 22px }
.podium-row { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: end; margin-bottom: 18px }
.podium { order: 2; display: grid; justify-items: center; gap: 6px; padding: 18px 10px 16px; text-align: center; background: var(--parch); box-shadow: 0 -4px 0 var(--wood-d), 0 4px 0 var(--wood-d), -4px 0 0 var(--wood-d), 4px 0 0 var(--wood-d) }
.podium.p1 { order: 2; padding-top: 28px; background: linear-gradient(180deg, #FFF3BF, var(--parch)) } .podium.p2 { order: 1 } .podium.p3 { order: 3 }
.medal { display: grid; place-items: center; width: 40px; height: 40px; font: 700 20px/1 var(--pixel); color: #fff; background: #B5B9C2; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2) }
.p1 .medal { background: #E8B21E } .p3 .medal { background: #C7834A }
.pod-avatar img { width: 92px; height: 92px; object-fit: contain }
.p1 .pod-avatar img { width: 118px; height: 118px }
.podium strong { font: 700 17px/1.2 var(--pixel) }
.pod-score b, .rk-score b { display: block; font: 700 26px/1 var(--pixel) }
.pod-score small, .rk-score small { color: #9A6A3A; font-size: 12px; font-weight: 700 }
.rank-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px }
.rank-list li { display: grid; grid-template-columns: 44px 52px 1fr auto; align-items: center; gap: 10px; padding: 8px 14px; background: #FFF8E4; box-shadow: 0 -2px 0 var(--parch-d), 0 2px 0 var(--parch-d), -2px 0 0 var(--parch-d), 2px 0 0 var(--parch-d) }
.rank-list li.me { background: #FFE9A0; box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d) }
.rk { font: 700 20px/1 var(--pixel); color: var(--wood-d); text-align: center }
.rk-best img { width: 48px; height: 48px; object-fit: contain }
.rk-name { font: 700 16px/1.2 var(--pixel) }
.rk-score { text-align: right }
.rk-score b { font-size: 20px }
.pod-avatar img.g-SSR, .rk-best img.g-SSR { filter: drop-shadow(0 0 6px #F5B700) } .pod-avatar img.g-SR, .rk-best img.g-SR { filter: drop-shadow(0 0 6px #B04CFF) }
.demo-tag, .me-tag { display: inline-block; margin-left: 4px; padding: 2px 5px; font: 700 10px/1.2 var(--pixel); color: #fff; background: #9AA3AE; vertical-align: middle }
.me-tag { background: var(--hot) }
@media (max-width: 899px) {
  .podium-row { gap: 8px } .pod-avatar img { width: 64px; height: 64px } .p1 .pod-avatar img { width: 80px; height: 80px }
  .podium strong { font-size: 13px } .pod-score b { font-size: 20px }
  .rank-list li { grid-template-columns: 30px 40px 1fr auto; padding: 8px 10px } .rk-best img { width: 38px; height: 38px }
  .rate-list { grid-template-columns: 1fr 1fr } .x-presets { grid-template-columns: 1fr }
  .gacha-page .draw-buttons { flex-wrap: nowrap } .gacha-page .draw-buttons .btn { padding: 0 12px; font-size: 13px }
}

.pack-top { justify-content: flex-start; right: 70px }
.pack-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap }
.pack-actions .btn { min-width: 150px }
@media (max-width: 899px) { .pack-actions { width: 100%; flex-wrap: nowrap } .pack-actions .btn { flex: 1; min-width: 0; padding: 0 10px } .pack-open > .reveal-hint { margin-top: 30px } }

/* ================================================================ trial count, live counter, landing ranking, phone breathing room */
.trial-left { align-self: center; font: 700 13px/1 var(--pixel); color: #9A6A3A }
.live-line { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 7px 12px; font: 700 14px/1 var(--pixel); color: var(--wood-d); background: #FFF8E4; box-shadow: 0 -2px 0 var(--parch-d), 0 2px 0 var(--parch-d), -2px 0 0 var(--parch-d), 2px 0 0 var(--parch-d) }
.live-line:empty { display: none }
.live-line b { color: var(--hot); font-size: 17px }
.live-pulse { width: 10px; height: 10px; background: #FF3B5C; box-shadow: 0 0 0 0 rgba(255, 59, 92, .6); animation: live 1.4s infinite }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(255, 59, 92, 0) } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0) } }
.gacha-page .live-line { margin: 0 0 10px }
.landing-rank .rank-list { margin-top: 14px }
@media (max-width: 899px) {
  .container { padding-left: 22px; padding-right: 22px }
  #header { padding: calc(10px + env(safe-area-inset-top)) 20px 10px }
  .footer-inner { padding: 28px 22px }
  .try-stage { margin: 0 2px; border-radius: 0 }
  .tabbar { padding-left: 14px; padding-right: 14px }
  .trybar, .gacha-page .draw-bar { padding-left: 20px; padding-right: 20px }
  #modal-content { padding: 30px 22px 26px }
  #modal-content.capsule-open, #modal-content.pack-modal { padding: calc(78px + env(safe-area-inset-top)) 22px calc(32px + env(safe-area-inset-bottom)) }
  .pack-top { top: calc(22px + env(safe-area-inset-top)); left: 22px; right: 76px }
  .modal-close { top: calc(16px + env(safe-area-inset-top)); right: 18px }
  dialog#modal:not(:has(.reveal-stage, .capsule-open, .pack-modal)) { width: calc(100vw - 36px); max-height: calc(100dvh - 60px) }
  .pack-stage { width: min(380px, 80vw, calc((100svh - 250px) * .716)) }
  .capsule-card { width: min(360px, 78vw, calc((100svh - 300px) * .716)) }
  .summary-grid { padding-left: 4px; padding-right: 4px }
  .gacha-page .container { padding-top: 18px }
}

.grade-jump { justify-content: center; margin-top: 12px }
@media (max-width: 899px) { .pockets { grid-template-columns: repeat(3, 1fr); gap: 8px } .binder-page { padding: 12px 10px 26px } }

/* ================================================================ avatar */
.av { position: relative; display: block; width: 100%; height: 100%; border-radius: inherit; background: radial-gradient(circle at 50% 40%, #fff, color-mix(in srgb, var(--c, #ccc) 35%, #fff)); overflow: visible }
.av-char { position: absolute; inset: 10% 8% 2%; width: 84%; height: 88%; object-fit: contain }
.av-acc { position: absolute; pointer-events: none; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)) }
.av-head { width: 54%; left: 23%; top: -16% }
.av-face { width: 46%; left: 27%; top: 30% }
.av-neck { width: 40%; left: 30%; top: 60% }
.avatar { padding: 0; overflow: visible; background: #FFF8E4 !important }
.profile-dot { width: 110px; height: 110px; background: #FFF8E4; box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d); margin: 10px 0 16px }
.pod-avatar { position: relative; width: 104px; height: 104px }
.p1 .pod-avatar { width: 128px; height: 128px }
.pod-avatar .av { background: #FFF8E4; box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d) }
.pod-best { position: absolute; right: -14px; bottom: -10px; width: 44px; height: 44px; background: #fff; box-shadow: 0 0 0 2px var(--wood-d) }
.pod-best img { width: 100% !important; height: 100% !important }
.rk-best { width: 48px; height: 48px; display: block }
.rk-best .av { background: #FFF8E4; box-shadow: inset 0 0 0 2px var(--parch-d) }
@media (max-width: 899px) { .pod-avatar { width: 72px; height: 72px } .p1 .pod-avatar { width: 88px; height: 88px } .pod-best { width: 32px; height: 32px; right: -8px } .rk-best { width: 40px; height: 40px } }
/* WhatsApp + PayPal */
.s-whatsapp { background: #25D366; color: #fff }
.btn-wa { background: #25D366; color: #fff; box-shadow: 0 -3px 0 #128C4B, 0 3px 0 #128C4B, -3px 0 0 #128C4B, 3px 0 0 #128C4B, inset 0 -4px 0 #1DA851 }
.btn-wa svg, .pay-wa svg { width: 20px; height: 20px }
.pay-paypal { background: #FFC439; color: #003087 } .pay-paypal .pay-logo { background: #003087; color: #fff } .pay-paypal small { font-size: 11px; margin-left: 4px }
.pay-wa { background: #25D366; color: #fff }
.wa-btn { margin-top: 6px }
/* avatar accessories: smaller so they decorate instead of covering */
.av { overflow: hidden }
.av-char { inset: 16% 12% 4%; width: 76%; height: 80% }
.av-head { width: 38%; left: 31%; top: 0 }
.av-face { width: 30%; left: 35%; top: 40% }
.av-neck { width: 26%; left: 37%; top: 70% }
.av-head { width: 30%; left: 35%; top: 3% }
.av-face { width: 26%; left: 37%; top: 43% }
.av-neck { width: 22%; left: 39%; top: 73% }
.rk-best .av-face, .rk-best .av-neck, .avatar .av-face, .avatar .av-neck { display: none }
.rk-best .av-head, .avatar .av-head { width: 44%; left: 28%; top: -2% }
.rk-best .av-char, .avatar .av-char { inset: 20% 6% 0; width: 88%; height: 80% }
.pod-avatar .av img.av-char, .p1 .pod-avatar .av img.av-char { width: 76%; height: 80% }
.pod-avatar .av img.av-head, .p1 .pod-avatar .av img.av-head { width: 30%; height: auto }
.pod-avatar .av img.av-face, .p1 .pod-avatar .av img.av-face { width: 26%; height: auto }
.pod-avatar .av img.av-neck, .p1 .pod-avatar .av img.av-neck { width: 22%; height: auto }
.standalone-main:has(.admin-card) { max-width: 1000px }
.admin-table form { display: inline-block; margin: 2px }
.admin-table .st-paid td, .admin-table .st-canceled td, .admin-table .st-expired td { opacity: .55 }
.depositor { color: var(--hot) }
.share-page { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 40px; align-items: center }
.share-card { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 24px 40px -12px rgba(23, 17, 43, .45) }
@media (max-width: 899px) { .share-page { grid-template-columns: 1fr; justify-items: center; text-align: center } .share-card { max-width: 320px } .share-page .hero-cta { justify-content: center } }

.refund-box { display: grid; gap: 8px; background: #fff; padding: 14px; box-shadow: 0 -2px 0 var(--parch-d), 0 2px 0 var(--parch-d), -2px 0 0 var(--parch-d), 2px 0 0 var(--parch-d) }
.refund-box p { margin: 0 }
.refund-amt { font: 700 22px/1 var(--pixel); color: var(--hot) }
.mock-form select { height: 46px; border: 3px solid var(--wood-d); background: #FFFDF5; padding: 0 10px }
.pay-bank { background: #1B1530; color: #fff } .pay-bank .pay-logo { background: #FFC93C; color: #1B1530 } .pay-bank small { font-size: 11px; margin-left: 4px; color: #FFC93C }
.share-preview { width: min(300px, 70vw); margin: 0 auto 14px; border-radius: 14px; box-shadow: 0 12px 24px -10px rgba(0,0,0,.4) }
.share-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap }
.hunt-arena { position: relative; padding: 22px; background: radial-gradient(circle at 50% 20%, #4A1F3A, #17112B 70%); color: #fff; box-shadow: 0 -4px 0 var(--wood-d), 0 4px 0 var(--wood-d), -4px 0 0 var(--wood-d), 4px 0 0 var(--wood-d) }
.hunt-arena.boss-strike { animation: strike .35s }
@keyframes strike { 30% { background: radial-gradient(circle at 50% 20%, #B0203A, #3A0B18 70%) } }
.boss { display: grid; justify-items: center; gap: 10px }
.boss-hp { position: relative; width: min(640px, 100%); height: 26px; background: #2A0E1C; box-shadow: 0 0 0 3px #000 }
.boss-hp span#boss-hp-bar { position: absolute; inset: 0; width: 100%; background: linear-gradient(90deg, #FF3B5C, #FF8A4C); transition: width .5s steps(10) }
.boss-hp b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 13px/1 var(--pixel); text-shadow: 0 2px 0 #000 }
.boss-body { position: relative; width: min(300px, 70vw); aspect-ratio: 1 }
.boss-body img { width: 100%; height: 100%; object-fit: contain; filter: brightness(.55) saturate(1.6) hue-rotate(-40deg) drop-shadow(0 0 30px #FF3B5C); animation: bossbob 1.6s steps(3) infinite }
@keyframes bossbob { 50% { translate: 0 -8px } }
.boss-body.shake { animation: shake .35s }
.boss-atk { position: absolute; left: 50%; bottom: 0; translate: -50% 0; padding: 6px 12px; font: 700 16px/1 var(--pixel); background: #000; color: #FF5C5C }
#dmg-layer { position: absolute; inset: 0; pointer-events: none }
.dmg-pop { position: absolute; left: 50%; top: 40%; translate: -50% 0; font: 700 34px/1 var(--pixel); color: #FFE27A; text-shadow: 0 3px 0 #000; animation: dmgup 1.2s ease-out forwards }
.dmg-pop.crit { color: #FF8AC4; font-size: 42px }
@keyframes dmgup { to { transform: translateY(-90px); opacity: 0 } }
.hunt-log { margin: 14px 0; min-height: 44px; text-align: center; font: 700 15px/1.5 var(--pixel) }
.party { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px }
.unit { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); transition: transform .2s, filter .3s }
.unit img { width: 86%; height: 86%; object-fit: contain }
.unit b { position: absolute; right: 2px; bottom: 1px; font: 700 10px/1 var(--pixel); color: #FFE27A; text-shadow: 0 1px 0 #000 }
.unit.g-SR { box-shadow: inset 0 0 0 2px #C48BFF } .unit.g-SSR { box-shadow: inset 0 0 0 2px #F5B700 }
.unit.hit { transform: translateY(-6px) scale(1.08) }
.unit.down { filter: grayscale(1) brightness(.4); transform: rotate(-8deg) }
.unit.down::after { content: '✕'; position: absolute; font: 700 22px/1 var(--pixel); color: #FF5C5C }
.unit.more { font: 700 13px/1 var(--pixel); color: #FFE27A }
.hunt-actions { display: flex; justify-content: center; margin-top: 16px }
.brand { white-space: nowrap }
@media (max-width: 899px) { #header .lang-switch { display: none } .brand { font-size: 21px } }

/* card payment + saved cards */
.pay-card { background: #fff; color: #1B1530; border: 2px solid #1B1530 } .pay-card small { font-size: 11px; margin-left: 4px; color: #6b6280 }
.pay-saved { background: linear-gradient(135deg, #2b2346, #4a3b7a); color: #fff; grid-column: 1 / -1 } .pay-saved small { font-size: 11px; margin-left: 4px; color: #FFC93C }
.pay-saved .pay-logo { background: #FFC93C; color: #1B1530 }
.saved-card-link { margin: 10px 0 0; font-size: 14px }
.admin-logout { margin-top: 16px; text-align: right }

/* ---------- fit to one screen: pull machine and binder, no scrolling needed ---------- */
.gacha-mini { display: none }
.gacha-page.fit > .container { display: flex; flex-direction: column; height: calc(var(--vh, 100svh) - var(--hdr, 72px) - var(--tab, 0px) - var(--fixbar, 0px)); min-height: 520px; padding-top: 14px; padding-bottom: 16px }
.gacha-page.fit .section-top { margin-bottom: 12px; align-items: center; flex-wrap: nowrap }
.gacha-page.fit .page-title { font-size: clamp(24px, 4vh, 44px); margin: 0 }
.gacha-page.fit .subtitle { margin: 4px 0 0; font-size: 14px }
.gacha-page.fit .live-line { margin: 0 0 6px }
.gacha-page.fit .gacha-layout { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch }
.gacha-page.fit .machine-panel { display: flex; flex-direction: column; min-height: 0 }
.gacha-page.fit .stage { flex: 1; min-height: 0; height: auto; padding-top: 12px; padding-bottom: 84px }
.gacha-page.fit .stage .booster, .gacha-page.fit .stage .capsule-machine, .gacha-page.fit .stage .string-machine { transform-origin: center center }
.gacha-page.fit .side-panel { min-height: 0; overflow: auto; padding: 18px 20px }
.gacha-page.fit .side-panel .btn { margin-bottom: 14px }
.gacha-page.fit .side-panel .points-big { margin: 0 0 8px }
.gacha-page.fit .side-panel .grade-odds { display: grid; gap: 4px }
.gacha-page.fit .side-panel .grade-odds li { margin: 0; padding-top: 6px; padding-bottom: 6px }

.binder-fit { display: flex; flex-direction: column; height: calc(var(--vh, 100svh) - var(--hdr, 72px) - var(--tab, 0px)); min-height: 560px; padding-top: 14px; padding-bottom: 8px }
.binder-fit .section-top { margin-bottom: 12px; align-items: center; flex-wrap: nowrap }
.binder-fit .page-title { font-size: clamp(24px, 4vh, 44px); margin: 0 }
.binder-fit .subtitle { display: none }
.binder-fit .hero-cta { margin-top: 10px; gap: 8px }
.binder-fit .hero-cta .btn { min-height: 40px; padding: 0 14px; font-size: 14px }
.binder-fit .progress b { font-size: 24px }
.binder-fit .binder-wrap { flex: 1; min-height: 0; padding: 0; align-content: start }
.binder-fit .binder-book { width: fit-content; max-width: 100%; grid-template-columns: auto auto; padding: 14px }
.binder-fit .binder-book.narrow { grid-template-columns: auto; padding: 8px }
.binder-fit .pockets { grid-template-columns: repeat(3, var(--pw, 1fr)); gap: var(--pg, 12px) }
.binder-fit .pocket { width: var(--pw, auto) }
.binder-fit .binder-page { padding: 12px 12px 22px }
.binder-fit .page-head { margin-bottom: 8px }
.binder-fit .page-head b { font-size: 20px }
.binder-fit .binder-nav { margin-top: 10px; gap: 10px }
.binder-fit .grade-jump { margin: 0; flex-wrap: nowrap }
.binder-fit .grade-jump button { padding: 6px 10px; min-height: 34px }
.binder-fit .binder-cover { max-height: calc(100% - 10px) }

@media (max-width: 899px) {
  .gacha-page.fit > .container { padding-top: 10px; padding-bottom: 10px; min-height: 440px }
  .gacha-page.fit .section-top { margin-bottom: 8px; gap: 8px }
  .gacha-page.fit .page-title { font-size: 22px }
  .gacha-page.fit .section-top .pill { display: none }
  .gacha-page.fit .gacha-mini em { font-style: normal; color: var(--hot) }
  .gacha-page.fit .live-line { padding: 4px 8px; font-size: 12px }
  .gacha-page.fit .live-line b { font-size: 14px }
  .gacha-page.fit .side-panel { display: none }
  .gacha-page.fit .gacha-mini { display: flex; gap: 14px; align-items: center; justify-content: flex-end; margin: -2px 2px 8px; font: 700 13px/1 var(--pixel); color: var(--wood-d) }
  .gacha-page.fit .gacha-mini span { margin-right: auto }
  .gacha-page.fit .method-tabs button { padding: 8px 4px }
  .gacha-page.fit .stage { padding-bottom: 64px }
  .binder-fit { padding-top: 10px }
  .binder-fit .section-top { flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px }
  .binder-fit .section-top .eyebrow { display: none }
  .binder-fit .page-title { font-size: 22px }
  .binder-fit .hero-cta { margin-top: 6px; flex-wrap: nowrap }
  .binder-fit .hero-cta .btn { min-height: 34px; padding: 0 9px; font-size: 11px; white-space: nowrap }
  .binder-fit .section-top { flex-wrap: nowrap; align-items: flex-start }
  .binder-fit .progress { min-width: 84px; flex: none; text-align: right; padding-top: 4px }
  .binder-fit .progress b { font-size: 18px; white-space: nowrap }
  .binder-fit .progress small { display: none }
  .binder-fit .grade-jump button { padding: 5px 7px; font-size: 12px; min-height: 32px }
  .binder-fit .binder-nav .round-btn { width: 38px; height: 38px }
}
/* very short windows: fall back to normal scrolling */
@media (max-height: 520px) {
  .gacha-page.fit > .container, .binder-fit { height: auto; min-height: 0 }
}

/* lever / string must really be cranked / pulled */
.lever-knob.turning { transition: none }
.lever-knob, .string-ring { touch-action: none }
.lever-knob.nudge { animation: nudge-turn .9s ease-in-out 2 }
.string-ring.nudge { animation: nudge-pull .8s ease-in-out 2 }
@keyframes nudge-turn { 0%, 100% { transform: rotate(var(--turn, 0deg)) } 40% { transform: rotate(60deg) } }
@keyframes nudge-pull { 0%, 100% { translate: 0 0 } 45% { translate: 0 18px } }
.string-machine .string-rope { height: calc(46px + var(--pull, 0px)) }
.string-machine.ready .string-ring { border-color: var(--hot); box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 3px var(--ink), 0 0 18px var(--hot) }
.gesture-cta { cursor: help }
/* full-art SR/SSR: the art box spans the whole card at every size (small binder/pack/odds cards included) */
.tcg.small:is(.g-SR, .g-SSR) .tcg-art, .odds-card .tcg:is(.g-SR, .g-SSR) .tcg-art { aspect-ratio: auto }

/* spare sleeve page that keeps each grade starting on the left page of a spread */
.pocket.spare { opacity: .55 }

/* ---------- boss hunt: one screen, a front line of 5, real hits and reactions ---------- */
.hunt-fit { display: flex; flex-direction: column; height: calc(var(--vh, 100svh) - var(--hdr, 72px) - var(--tab, 0px)); min-height: 540px; padding-top: 12px; padding-bottom: 12px }
.hunt-fit .section-top { margin-bottom: 10px; align-items: center; flex-wrap: nowrap }
.hunt-fit .page-title { font-size: clamp(24px, 4vh, 40px); margin: 0 }
.hunt-fit .subtitle { margin: 4px 0 0; font-size: 14px }
.hunt-fit .hunt-arena { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; gap: 8px; padding: 14px; overflow: hidden }
.hunt-arena::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none }
.boss-zone { display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; gap: 8px; min-height: 0 }
.hunt-fit .boss-body { height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; min-height: 0; transition: transform .35s, filter .35s }
.boss-hp span#boss-hp-bar { z-index: 1; transition: width .15s }
.boss-hp span#boss-hp-ghost { position: absolute; inset: 0; width: 100%; background: #FFD3A1; transition: width .7s ease-out }
.boss-hp b { z-index: 2 }
.hunt-fit .hunt-log { margin: 0; min-height: 22px; font-size: 14px }
.squad-zone { display: flex; align-items: flex-end; justify-content: center; gap: 10px }
.front { display: flex; gap: 8px; min-height: 110px; align-items: flex-end }
.fighter { position: relative; width: 82px; aspect-ratio: .8; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25) }
.fighter img { width: 92%; height: 80%; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)) }
.fighter b { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 700 11px/1 var(--pixel); color: #FFE27A; text-shadow: 0 1px 0 #000 }
.fighter .g-tag { position: absolute; top: 3px; left: 4px; font: 700 10px/1 var(--pixel); font-style: normal; color: #fff; opacity: .8 }
.fighter.g-R { box-shadow: inset 0 0 0 2px #7CC6FE } .fighter.g-SR { box-shadow: inset 0 0 0 2px #C48BFF, 0 0 12px #C48BFF } .fighter.g-SSR { box-shadow: inset 0 0 0 2px #F5B700, 0 0 16px #F5B700 }
.fighter.enter { animation: f-enter .35s ease-out both }
.fighter.enter:nth-child(2) { animation-delay: .04s } .fighter.enter:nth-child(3) { animation-delay: .08s } .fighter.enter:nth-child(4) { animation-delay: .12s } .fighter.enter:nth-child(5) { animation-delay: .16s }
.fighter.lunge { animation: lunge .3s ease-out; z-index: 2 }
.fighter.ko { animation: ko .85s cubic-bezier(.3, .6, .4, 1) forwards; --kx: -70px }
.fighter.ko:nth-child(even) { --kx: 70px }
.reserve { display: grid; justify-items: center; align-content: center; width: 70px; height: 88px; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15), 4px 4px 0 -1px rgba(255, 255, 255, .08), 8px 8px 0 -2px rgba(255, 255, 255, .05) }
.reserve b { font: 700 20px/1 var(--pixel); color: #FFE27A }
.reserve small { font: 700 11px/1.4 var(--pixel); color: rgba(255, 255, 255, .7) }
.reserve.volley { animation: volley .45s }
.hunt-fit .hunt-actions { margin: 0; gap: 8px }
#hunt-fast.on { background: var(--sun) }
.boss-body.hurt img { animation: hurt .3s }
.boss-body.hurt-big img { animation: hurt-big .42s }
.boss-body.laugh img { animation: laugh .22s 6 alternate }
.hunt-arena.boss-windup .boss-body { transform: scale(1.14) translateY(-4%); filter: drop-shadow(0 0 40px #FF2D55) }
.hunt-arena.boss-slam { animation: slam .55s }
.hunt-arena.boss-slam::after { animation: flash .4s }
.hunt-arena.boss-slam .squad-zone { animation: quake .5s }
.hunt-fit .dmg-pop { top: 40%; white-space: nowrap; pointer-events: none; z-index: 3 }
.hunt-fit .dmg-pop.crit { color: #FF8AC4; font-size: 30px }
.hunt-fit .dmg-pop.mark { font-size: 34px; text-shadow: none; animation: markpop .9s ease-out forwards }
.hunt-fit .dmg-pop.volley-pop { font-size: 18px; color: #9BE7FF }
.hunt-fit .dmg-pop.boss-pop { font-size: 24px; color: #FF4D6D; text-shadow: 0 3px 0 #000, 0 0 12px #FF4D6D }
@keyframes f-enter { from { opacity: 0; transform: translateY(26px) scale(.8) } }
@keyframes lunge { 45% { transform: translateY(-52px) scale(1.18) rotate(-6deg) } }
@keyframes ko { 20% { transform: translateY(-20px) rotate(-40deg) } to { transform: translate(var(--kx), 140px) rotate(-560deg) scale(.35); opacity: 0; filter: grayscale(1) } }
@keyframes volley { 50% { transform: scale(1.18); box-shadow: inset 0 0 0 2px #9BE7FF, 0 0 24px #9BE7FF } }
@keyframes hurt { 0% { filter: brightness(2.4) saturate(0) } 35% { transform: translateX(-7px) scale(1.06, .9) rotate(-3deg); filter: brightness(1) sepia(1) hue-rotate(-50deg) saturate(6) } 70% { transform: translateX(5px) scale(.97, 1.04) } }
@keyframes hurt-big { 0% { filter: brightness(3) saturate(0) } 25% { transform: translateX(-12px) scale(1.12, .84) rotate(-6deg); filter: sepia(1) hue-rotate(-50deg) saturate(8) } 55% { transform: translateX(10px) scale(.94, 1.08) rotate(4deg) } 80% { transform: translateX(-4px) } }
@keyframes laugh { to { transform: translateY(-5%) scale(1.06, .95) } }
@keyframes slam { 15% { transform: translate(-10px, 6px) } 30% { transform: translate(9px, -5px) } 45% { transform: translate(-7px, 4px) } 60% { transform: translate(5px, -3px) } 80% { transform: translate(-2px, 1px) } }
@keyframes flash { 0% { opacity: .75 } to { opacity: 0 } }
@keyframes quake { 30% { transform: translateY(10px) } 60% { transform: translateY(-4px) } }
@keyframes markpop { from { transform: scale(.4); opacity: 0 } 30% { transform: scale(1.2); opacity: 1 } to { transform: translateY(-20px); opacity: 0 } }
@media (max-width: 899px) {
  .hunt-fit { padding-top: 8px; padding-bottom: 8px; min-height: 480px }
  .hunt-fit .section-top .eyebrow, .hunt-fit .subtitle { display: none }
  .hunt-fit .page-title { font-size: 22px }
  .hunt-fit .progress { min-width: 0; text-align: right }
  .hunt-fit .progress b { font-size: 18px }
  .hunt-fit .hunt-arena { padding: 10px 8px; gap: 6px }
  .front { gap: 5px; min-height: 76px }
  .fighter { width: 54px }
  .fighter b { font-size: 9px }
  .reserve { width: 52px; height: 66px }
  .reserve b { font-size: 15px }
  .hunt-fit .hunt-log { font-size: 12px }
  .hunt-fit .hunt-actions .btn { min-height: 42px; padding: 0 14px }
}
@media (max-height: 520px) { .hunt-fit { height: auto; min-height: 0 } }
[hidden] { display: none !important }
.hunt-fit .dmg-pop { text-shadow: 0 3px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000, 0 0 10px rgba(0, 0, 0, .8) }
@keyframes hurt { 0% { filter: brightness(1.9) saturate(.3) } 35% { transform: translateX(-7px) scale(1.06, .9) rotate(-3deg); filter: brightness(1.1) sepia(.8) hue-rotate(-50deg) saturate(4) } 70% { transform: translateX(5px) scale(.97, 1.04) } }
@keyframes hurt-big { 0% { filter: brightness(2.2) saturate(.2) } 25% { transform: translateX(-12px) scale(1.12, .84) rotate(-6deg); filter: brightness(1.1) sepia(.9) hue-rotate(-50deg) saturate(6) } 55% { transform: translateX(10px) scale(.94, 1.08) rotate(4deg) } 80% { transform: translateX(-4px) } }
@media (max-width: 899px) {
  .front { gap: 4px }
  .fighter { width: min(48px, 12.5vw) }
  .squad-zone { gap: 6px }
  .reserve { width: 46px; height: 60px }
  .hunt-fit .hunt-log { font-size: 11px; line-height: 1.35; min-height: 30px }
  .hunt-fit .hunt-actions { flex-wrap: nowrap }
  .hunt-fit .hunt-actions .btn { min-height: 40px; padding: 0 12px; font-size: 13px; white-space: nowrap }
}
.hunt-fit .hunt-arena { grid-template-columns: minmax(0, 1fr) }
.hunt-fit .boss-zone, .hunt-fit .squad-zone { min-width: 0 }
.hunt-fit .boss-body { max-height: 100%; max-width: min(100%, 520px) }
.hunt-fit .boss-zone { grid-template-columns: minmax(0, 1fr) }

/* ---------- review fixes ---------- */
/* "open all" stays clickable while the card stack slides in */
.pack-actions { position: relative; z-index: 6 }
.pack-stack:not(.out) { pointer-events: none }
.pack-summary .reveal-actions { margin: 12px 0 16px }
/* toasts never cover the main buttons: PC bottom-right, phone just above the bottom bars */
#toast { left: auto; right: 24px; bottom: 24px; transform: translateY(30px); max-width: min(420px, calc(100vw - 32px)) }
#toast.show { transform: translateY(0) }
@media (max-width: 899px) {
  #toast { left: 16px; right: 16px; top: auto; bottom: calc(var(--tab, 66px) + var(--fixbar, 0px) + 12px); transform: translateY(20px); max-width: none }
  #toast.show { transform: translateY(0) }
}
.mini-tank { position: relative }
.mini-empty { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px/1 var(--pixel); color: #2E6F8E; opacity: .8 }
.gacha-mini .sound-mini { text-decoration: none; font-size: 16px; line-height: 1 }
.quick-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0 }
.binder-fit .tank-link { display: none }
@media (max-width: 899px) {
  .binder-fit .tank-link { display: inline-flex }
  /* binder header never wider than the phone */
  .binder-fit .section-top > div:first-child { min-width: 0; flex: 1 }
  .binder-fit .hero-cta { flex-wrap: wrap; gap: 6px }
  .binder-fit .hero-cta .btn { flex: 0 1 auto }
}

/* landing: the sign under the pack is the trial button itself (visible without scrolling on phones) */
.stage-hint.try-go { cursor: pointer; border: 0; font: 700 14px/1 var(--pixel); color: #fff; background: var(--hot); box-shadow: 0 -3px 0 #A3123A, 0 3px 0 #A3123A, -3px 0 0 #A3123A, 3px 0 0 #A3123A; padding: 11px 16px 10px; animation: trypulse 1.6s ease-in-out infinite }
.stage-hint.try-go:active { transform: translateX(-50%) translateY(2px) }
@keyframes trypulse { 50% { filter: brightness(1.12) } }

/* turn-based hunt controls */
.turn-bar { display: flex; gap: 8px; justify-content: center }
.turn-bar .btn { min-width: 110px }
.turn-extra { display: flex; gap: 16px; justify-content: center; width: 100%; margin-top: 2px }
.turn-extra .text-link { color: #FFE27A }
.turn-extra .on { text-decoration: none; background: #FFE27A; color: #1B1530; padding: 2px 6px }
.hunt-fit .hunt-actions { flex-wrap: wrap }
.hunt-help { display: block; margin-top: 4px; font-size: 11px; opacity: .75 }
.fighter.charged { box-shadow: inset 0 0 0 2px #FF8A4C, 0 0 18px #FF5C2E }
.fighter.guarding, .fighter.blocked { box-shadow: inset 0 0 0 2px #7CC6FE, 0 0 14px #7CC6FE }
.fighter.blocked::after { content: '🛡'; position: absolute; top: -10px; right: -6px; font-size: 18px }
.hunt-arena.skill-flash { animation: skillflash .6s }
.hunt-arena.boss-slam-calm::after { animation: flash .4s }
.hunt-fit .dmg-pop.skill-pop { font-size: 34px; color: #FF8A4C }
.hunt-fit .dmg-pop.guard-pop { font-size: 22px; color: #9BE7FF }
@keyframes skillflash { 30% { box-shadow: inset 0 0 0 6px #FF8A4C, inset 0 0 60px #FF5C2E } }
@media (max-width: 899px) {
  .turn-bar { gap: 6px; width: 100% }
  .turn-bar .btn { flex: 1; min-width: 0; padding: 0 6px; font-size: 13px }
  .turn-extra { gap: 12px; font-size: 12px }
  .hunt-help { font-size: 10px }
}

/* hunt stages + trophies */
.boss-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px }
.stage-tile { position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 6px 8px; background: #FFF8E4; box-shadow: 0 -3px 0 var(--parch-d), 0 3px 0 var(--parch-d), -3px 0 0 var(--parch-d), 3px 0 0 var(--parch-d); color: var(--wood-d); cursor: pointer }
.stage-tile img { grid-row: 1 / 3; width: 44px; height: 44px; object-fit: contain }
.stage-tile b { font: 700 14px/1.1 var(--pixel) }
.stage-tile small { font: 700 11px/1.2 var(--pixel); opacity: .8 }
.stage-tile .st-no { position: absolute; top: -8px; left: -6px; min-width: 20px; height: 20px; display: grid; place-items: center; font: 700 12px/1 var(--pixel); color: #fff; background: var(--wood-d) }
.stage-tile.active { background: var(--sun); box-shadow: 0 -3px 0 var(--wood-d), 0 3px 0 var(--wood-d), -3px 0 0 var(--wood-d), 3px 0 0 var(--wood-d) }
.stage-tile.locked img { filter: brightness(0) opacity(.35) }
.stage-tile.locked { opacity: .7; cursor: not-allowed }
.stage-tile.cleared small { color: #A6250F }
.stage-tile.trophy { grid-template-columns: 1fr; text-align: center; justify-items: center }
.stage-tile .tro { font-size: 20px; line-height: 1 }
/* each boss its own color */
.hunt-arena.s1 .boss-body img { filter: brightness(.8) saturate(1.4) hue-rotate(-20deg) drop-shadow(0 0 24px #FF8A4C) }
.hunt-arena.s2 .boss-body img { filter: brightness(.7) saturate(1.8) hue-rotate(-35deg) drop-shadow(0 0 30px #FF3B30) }
.hunt-arena.s3 .boss-body img { filter: brightness(.95) saturate(1.5) drop-shadow(0 0 34px #FFD54A) }
.hunt-arena.s1 { background: radial-gradient(circle at 50% 20%, #5A3A1F, #1F1410 70%) }
.hunt-arena.s2 { background: radial-gradient(circle at 50% 20%, #5A1F1F, #1A0E14 70%) }
.hunt-arena.s3 { background: radial-gradient(circle at 50% 20%, #5A4A1F, #1A1630 70%) }
.boss-body.defeated img { animation: bossfall 1.4s ease-in forwards }
.hunt-fit .dmg-pop.ko-pop { font-size: 52px; color: #FFE27A; animation: kopop 1.6s ease-out forwards }
@keyframes bossfall { 0% { filter: brightness(3) saturate(0) } 20% { transform: translateX(-10px) rotate(-6deg) } 35% { transform: translateX(10px) rotate(5deg); filter: brightness(1.6) } 100% { transform: translateY(30%) rotate(18deg) scale(.7); opacity: 0; filter: grayscale(1) brightness(.5) } }
@keyframes kopop { 0% { transform: translate(-50%, 0) scale(.3); opacity: 0 } 25% { transform: translate(-50%, 0) scale(1.25); opacity: 1 } 70% { transform: translate(-50%, 0) scale(1) } 100% { transform: translate(-50%, -30px); opacity: 0 } }
.victory { text-align: center }
.victory img { width: 140px; height: 140px; object-fit: contain; filter: drop-shadow(0 0 20px #FFD54A); animation: f-enter .5s ease-out }
.victory .unlock { font: 700 14px/1.4 var(--pixel); color: #2E7D32 }
.trophy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 12px }
.trophy-card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 8px; text-align: center; background: #FFF8E4; box-shadow: 0 -3px 0 var(--parch-d), 0 3px 0 var(--parch-d), -3px 0 0 var(--parch-d), 3px 0 0 var(--parch-d) }
.trophy-card img { width: 90px; height: 90px; object-fit: contain }
.trophy-card.unknown img { filter: brightness(0) opacity(.3) }
.trophy-card.got { background: linear-gradient(180deg, #FFF3BF, #FFE08A) }
.trophy-card b { font: 700 14px/1.2 var(--pixel) }
.trophy-card small, .trophy-card p { font-size: 11px; margin: 0; color: var(--muted) }
.trophy-card .st-no { position: absolute; top: 6px; left: 6px; font: 700 12px/1 var(--pixel); color: #fff; background: var(--wood-d); padding: 3px 6px }
@media (max-width: 899px) {
  .boss-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-bottom: 6px }
  .stage-tile { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 4px 2px 3px; row-gap: 1px }
  .stage-tile img { grid-row: auto; width: 28px; height: 28px }
  .stage-tile b { font-size: 10px }
  .stage-tile small { font-size: 9px }
  .stage-tile .st-no { top: -6px; left: -3px; min-width: 16px; height: 16px; font-size: 10px }
  .trophy-grid { grid-template-columns: 1fr; gap: 8px }
  .trophy-card { grid-template-columns: 70px 1fr; justify-items: start; text-align: left; column-gap: 10px }
  .trophy-card img { grid-row: 1 / 4; width: 70px; height: 70px }
}
/* keep each stage boss in its own colors; only the glow differs */
.hunt-arena.s1 .boss-body img { filter: brightness(.9) saturate(1.2) drop-shadow(0 0 24px #FF8A4C) }
.hunt-arena.s2 .boss-body img { filter: brightness(.85) saturate(1.4) drop-shadow(0 0 32px #FF3B30) }

/* machine picker (3 per pull type) */
.machine-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px 10px; background: var(--parch); border-bottom: 4px solid var(--wood-d); position: relative }
.machine-chip { display: grid; gap: 3px; text-align: left; padding: 7px 9px; background: #FFFBEF; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mc) 35%, #E9D9B4); cursor: pointer; min-width: 0 }
.machine-chip.active { background: color-mix(in srgb, var(--mc) 22%, #FFF8E4); box-shadow: inset 0 0 0 3px var(--mc), 0 3px 0 color-mix(in srgb, var(--mc) 60%, #000) }
.mc-head { display: flex; gap: 6px; align-items: center; min-width: 0 }
.mc-head i { font-style: normal; font-size: 16px }
.mc-head b { font: 700 14px/1.15 var(--pixel); color: var(--wood-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mc-faces { display: flex; gap: 2px; height: 26px }
.mc-faces img { width: 26px; height: 26px; object-fit: contain }
.machine-chip small { font-size: 11px; color: #8A6A44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.machine-chip small em { font-style: normal; color: var(--hot); font-weight: 800 }
.lineup-link { position: absolute; right: 12px; bottom: -26px; z-index: 2; font-size: 12px; color: #fff; text-shadow: 0 1px 0 #000 }
/* each machine tints its stage and machine */
.stage[style*="--mc"] { box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--mc) 55%, transparent) }
.stage[style*="--mc"] .spot { background: radial-gradient(circle, color-mix(in srgb, var(--mc) 55%, transparent), transparent 65%) }
.stage[style*="--mc"] .booster-body { background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 85%, #fff) 0%, var(--mc) 45%, color-mix(in srgb, var(--mc) 55%, #2A1F52) 100%) }
.stage[style*="--mc"] .machine-body { background: var(--mc) }
.stage[style*="--mc"] .string-box { background: var(--mc) }
.lineup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 12px }
.lineup-card { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto; column-gap: 8px; align-items: center; padding: 8px; background: #FFFBEF; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 40%, #E9D9B4) }
.lineup-card img { grid-row: 1 / 4; width: 56px; height: 56px; object-fit: contain }
.lineup-card b { font: 700 14px/1.2 var(--pixel) }
.lineup-card b em { font-style: normal; font-size: 10px; color: #fff; background: var(--hot); padding: 1px 4px; vertical-align: middle }
.lineup-card small { font-size: 11px; color: var(--muted) }
.lineup-grades { display: flex; flex-wrap: wrap; gap: 3px }
.lineup-grades i { font-style: normal; font-size: 10px; padding: 1px 4px; background: #F3EBD8 }
.machine-odds { margin: 18px 0 }
.machine-odds > h3 { padding: 8px 12px; color: #fff; background: var(--mc); font-size: 18px }
.machine-odds > h3 small { display: block; font-size: 12px; font-weight: 600; opacity: .9 }
.machine-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 }
.odds-table .machine-row th { text-align: left; background: #F3EBD8 }
@media (max-width: 899px) {
  .machine-row { gap: 5px; padding: 6px }
  .machine-chip { padding: 5px 5px; gap: 2px }
  .mc-head i { font-size: 13px }
  .mc-head b { font-size: 11px; white-space: normal; line-height: 1.15 }
  .mc-faces { height: 20px } .mc-faces img { width: 20px; height: 20px }
  .mc-faces img:nth-child(n+5) { display: none }
  .machine-chip small { display: none }
  .lineup-link { bottom: -24px; right: 8px; font-size: 11px }
  .lineup-grid { grid-template-columns: 1fr }
}
@media (max-width: 899px) {
  .gacha-page.fit .gacha-mini { gap: 10px; white-space: nowrap; font-size: 12px }
  .gacha-page.fit .gacha-mini > a[href$="/odds"] { display: none }  /* the machine row has "line-up & odds" */
  .gacha-page.fit .gacha-mini span { overflow: hidden; text-overflow: ellipsis; min-width: 0 }
}

/* bank transfer checkout */
.bank-amount { display: grid; justify-items: center; gap: 6px; margin: 10px 0 14px; padding: 14px; text-align: center; background: #FFF3BF }
.bank-amount small { font: 700 13px/1 var(--pixel); color: #8A6A44 }
.bank-amount > b { font: 700 40px/1 var(--pixel); color: var(--wood-d) }
.bank-to dd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end }
.toss-send { margin-top: 12px; background: #0064FF !important; box-shadow: 0 -3px 0 #003FA3, 0 3px 0 #003FA3, -3px 0 0 #003FA3, 3px 0 0 #003FA3 !important }
.toss-note { margin-top: 4px }
@media (pointer: fine) { .toss-send, .toss-note { display: none } }  /* the Toss app link only works on phones */
.bank-wait { margin: 14px 0; padding: 14px; text-align: center; background: #F3EBD8 }
.bank-wait .wait-on { display: grid; justify-items: center; gap: 6px }
.bank-wait .wait-done { display: none; justify-items: center; gap: 10px }
.bank-wait.done { background: #DFF5D8 }
.bank-wait.done .wait-on { display: none }
.bank-wait.done .wait-done { display: grid }
.bank-wait .wait-done b { font: 700 22px/1.2 var(--pixel) }
.spinner { width: 26px; height: 26px; border: 4px solid #D8C49A; border-top-color: var(--wood-d); border-radius: 50%; animation: spin 1s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

.bank-amount s { color: #A08A6A; font: 700 16px/1 var(--pixel) }

/* ---------- free points: daily gift, earn list, turbine, desktop widget ---------- */
.earn-list { display: grid; gap: 10px; margin: 6px 0 4px }
.earn-item { display: grid; gap: 4px; padding: 12px 14px; background: #FFFBEF; box-shadow: inset 0 0 0 2px #E9D9B4 }
.earn-item b { font: 700 15px/1.3 var(--pixel) }
.earn-item small { color: var(--muted) }
.earn-item .btn { justify-self: start; margin-top: 4px }
.daily-gift { text-align: center }
.daily-gift .gift { font-size: 56px; line-height: 1; animation: giftbob 1.2s ease-in-out infinite }
.daily-gift h2 { font-size: 40px; margin: 6px 0 }
@keyframes giftbob { 50% { transform: translateY(-6px) rotate(-4deg) } }
.turbine-panel { margin: 0 0 12px; padding: 12px 14px; background: #FFF8E4; box-shadow: 0 -4px 0 var(--wood-d), 0 4px 0 var(--wood-d), -4px 0 0 var(--wood-d), 4px 0 0 var(--wood-d); display: grid; gap: 8px }
.tp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.tp-head b { font: 700 17px/1.2 var(--pixel); color: var(--wood-d) }
.tp-head small { color: #8A6A44 }
.tp-bar { position: relative; height: 26px; background: #E9D9B4; overflow: hidden }
.tp-bar span { position: absolute; inset: 0 auto 0 0; width: var(--p); background: repeating-linear-gradient(-45deg, #FFC93C 0 10px, #FFB01F 10px 20px); transition: width .9s linear }
.turbine-panel.running .tp-bar span { animation: tpstripes 1s linear infinite }
@keyframes tpstripes { to { background-position: 28px 0 } }
.tp-bar em { position: absolute; inset: 0; display: grid; place-items: center; font: 700 13px/1 var(--pixel); font-style: normal; color: var(--wood-d) }
.tp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.tp-chain { display: flex; align-items: center; gap: 4px }
.tp-chain i { width: 12px; height: 12px; background: #E9D9B4; box-shadow: inset 0 0 0 2px #C9B48A }
.tp-chain i.on { background: #FFC93C; box-shadow: inset 0 0 0 2px #B8860B }
.tp-chain small { margin-left: 4px; font-size: 11px; color: #8A6A44 }
.tp-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #8A6A44 }
.tp-cap { width: 90px; height: 8px; background: #E9D9B4; position: relative }
.tp-cap i { position: absolute; inset: 0 auto 0 0; width: var(--p); background: #5FB36A }
.tp-foot .text-link { margin-left: auto }
.mini-turbine { position: absolute; right: -6px; bottom: -6px; font-style: normal; font-size: 14px; line-height: 1; filter: grayscale(1) opacity(.7) }
.mini-turbine.on { filter: none; animation: spin 2s linear infinite }
body.widget-mode #header, body.widget-mode footer, body.widget-mode .tabbar, body.widget-mode #trybar { display: none !important }
body.widget-mode { background: #CFE9F5 }
.widget-page { display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; padding: 6px; gap: 6px; box-sizing: border-box }
.widget-page .turbine-panel { margin: 0; padding: 6px 8px; gap: 5px }
.widget-page .tp-head small { display: none }
.widget-page .tp-bar { height: 20px }
.widget-page .tp-go { min-height: 32px; padding: 0 10px; font-size: 12px }
.widget-tank { position: relative; min-height: 0; background: linear-gradient(#D9F0FA, #9FD3EC 70%, #E6D3A3 70%) }
.widget-tank canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.widget-points { margin: 0; text-align: center; font: 700 12px/1 var(--pixel); color: var(--wood-d) }
@media (max-width: 899px) {
  .tp-row { flex-wrap: wrap } .tp-go { flex: 1 }
  .tp-head small { font-size: 11px }
}

.danger-zone { margin-top: 18px; padding-top: 12px; border-top: 2px dashed #E9D9B4 }
.delete-list { margin: 6px 0 10px; padding-left: 18px; line-height: 1.7 }

/* ================================================================ v6: SSR = black-gold crown jewel, clearly above SR */
/* frame: moving gold metal with a living halo */
.tcg.g-SSR { background: conic-gradient(from var(--hue, 0deg), #FFF7D1, #E4A800, #FFFFFF, #B87A00, #FFE27A, #FFB0D0, #FFF7D1); animation: prism 5s linear infinite, ssr-halo 2.2s ease-in-out infinite alternate;
  box-shadow: 0 0 0 .5cqw rgba(255, 255, 255, .7) inset, 0 0 14px 1px rgba(255, 196, 40, .75), 0 12px 28px -8px rgba(70, 35, 0, .65) }
@keyframes ssr-halo { to { box-shadow: 0 0 0 .5cqw rgba(255, 255, 255, .9) inset, 0 0 26px 5px rgba(255, 212, 80, .95), 0 12px 28px -8px rgba(70, 35, 0, .65) } }
/* stage: dark velvet with a golden spotlight */
.tcg.g-SSR .tcg-inner { background: radial-gradient(ellipse 70% 42% at 50% 32%, rgba(255, 244, 200, .95), rgba(255, 196, 60, .6) 34%, rgba(150, 70, 0, .25) 60%, transparent 76%), linear-gradient(180deg, #3B1E00 0%, #1C0E02 58%, #0B0500 100%) }
.tcg.g-SSR .tcg-inner::before { background-image: radial-gradient(rgba(255, 236, 160, .95) .8px, transparent 1.5px), radial-gradient(rgba(255, 255, 255, .8) .5px, transparent 1px); background-size: 5.2cqw 5.2cqw, 2.7cqw 2.7cqw; background-position: 0 0, 1.3cqw 1.9cqw; opacity: .8; animation: glitter 1.4s steps(3) infinite }
/* rotating sun rays behind the character */
.tcg.g-SSR .tcg-art { background: none; overflow: hidden }
.tcg.g-SSR .tcg-art::before { content: ''; position: absolute; left: -50%; top: -68%; width: 200%; height: 200%; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 226, 122, .42) 0 6deg, transparent 6deg 15deg); -webkit-mask: radial-gradient(circle, #000 12%, transparent 48%); mask: radial-gradient(circle, #000 12%, transparent 48%); animation: ssr-rays 26s linear infinite }
@keyframes ssr-rays { to { transform: rotate(360deg) } }
.tcg.g-SSR .tcg-art img { z-index: 1; filter: drop-shadow(0 0 .6cqw #FFF6C4) drop-shadow(0 0 .6cqw #FFE27A) drop-shadow(0 0 4cqw rgba(255, 200, 60, .95)) }
/* twinkling stars */
.tcg.g-SSR .tcg-art::after { content: '✦'; position: absolute; z-index: 2; left: 12%; top: 12%; font-size: 6cqw; line-height: 1; color: #fff; pointer-events: none; opacity: 1; background: none; mix-blend-mode: normal;
  text-shadow: 0 0 2cqw #FFE27A, 62cqw 6cqw 0 #FFF1B0, 56cqw 26cqw 0 #fff, 2cqw 24cqw 0 #FFE27A, 30cqw -4cqw 0 #fff; animation: ssr-twinkle 1.8s ease-in-out infinite }
@keyframes ssr-twinkle { 0%, 100% { opacity: .35; transform: scale(.8) } 50% { opacity: 1; transform: scale(1.15) } }
/* gold lettering on black glass */
.tcg.g-SSR .tcg-name { background: linear-gradient(180deg, #FFFBE6, #FFD34D 55%, #C98A00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .3cqw 0 rgba(0, 0, 0, .7)) }
.tcg.g-SSR .tcg-top { text-shadow: none }
.tcg.g-SSR .tcg-hp { color: #FFB199; text-shadow: 0 .3cqw 0 rgba(0, 0, 0, .7) }
.tcg.g-SSR .tcg-stage, .tcg.g-SSR .set-mark { background: linear-gradient(#FFF1B0, #E0A800); color: #3A1D00 }
.tcg.g-SSR .tcg-strip { color: #3A1D00; background: linear-gradient(90deg, #B87A00, #FFF1B0 30%, #FFD34D 70%, #B87A00); box-shadow: 0 0 1.6cqw rgba(255, 200, 60, .7) }
.tcg.g-SSR .tcg-body, .tcg.g-SSR .tcg-stats, .tcg.g-SSR .tcg-flavor { background: rgba(18, 9, 0, .66); color: #FFF3CF; backdrop-filter: blur(2px); box-shadow: inset 0 0 0 .25cqw rgba(255, 210, 90, .65) }
.tcg.g-SSR .tcg-move p, .tcg.g-SSR .tcg-ability p, .tcg.g-SSR .tcg-flavor { color: #F3E2B0 }
.tcg.g-SSR .tcg-ability b { color: #FFD34D }
.tcg.g-SSR .tcg-foot { color: #F5D98A; text-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .7) }
.tcg.g-SSR .rar { color: #FFE27A; text-shadow: 0 0 1.4cqw #FFC23D }
.tcg.g-SSR .tcg-ribbon { color: #3A1D00; background: linear-gradient(90deg, #FFF6C4, #F5B700 45%, #FFF1B0 70%, #E0A800); box-shadow: 0 0 2.6cqw rgba(255, 210, 80, .95) }
.tcg.g-SSR .tcg-atk { background: linear-gradient(#FFF1B0, #E0A800); color: #3A1D00; box-shadow: 0 0 0 .3cqw #3A1D00, 0 0 2cqw rgba(255, 210, 80, .9) }
/* bright gold light sweeping over the card, more often than SR */
.tcg.g-SSR::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 246, 210, .75) 47%, rgba(255, 255, 255, .95) 50%, rgba(255, 230, 150, .3) 54%, transparent 64%) 0 0/260% 100% no-repeat; mix-blend-mode: overlay; animation: sweep 2.6s ease-in-out infinite }
.tcg.g-SSR .tcg-foil { opacity: .3; background: repeating-linear-gradient(115deg, #ffb3d1 0 5%, #ffe08a 5% 10%, #b5ffd9 10% 15%, #a8dcff 15% 20%, #e0c2ff 20% 25%) var(--mx) var(--my)/400% 400%; mix-blend-mode: soft-light; animation: holo 9s linear infinite }
/* reveal: sunburst instead of a plain glow */
.flip.g-SSR .aura { inset: -30%; border-radius: 50%; filter: blur(6px); background: radial-gradient(circle, #FFF6D0 0 16%, rgba(255, 200, 60, .85) 30%, transparent 62%), repeating-conic-gradient(rgba(255, 220, 110, .9) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); animation: ssr-rays 7s linear infinite }
.pocket:has(.tcg.g-SSR)::after { content: ''; position: absolute; inset: -3px; border-radius: 9px; z-index: 0; pointer-events: none; box-shadow: 0 0 0 2px rgba(255, 214, 90, .9), 0 0 16px rgba(255, 200, 60, .7) }
@media (prefers-reduced-motion: reduce) { .tcg.g-SSR, .tcg.g-SSR::after, .tcg.g-SSR .tcg-art::before, .tcg.g-SSR .tcg-art::after, .tcg.g-SSR .tcg-inner::before, .flip.g-SSR .aura { animation: none } .tcg.g-SSR::after { opacity: 0 } }

/* kin (종족) tags on the odds page and line-up */
.kin-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; font: 800 11px/1.3 var(--font); font-style: normal; vertical-align: middle; white-space: nowrap }
.kin-fantasy { color: #6A3FC9; background: #EFE7FF; box-shadow: inset 0 0 0 1px #CDB8FF }
.kin-legend { color: #7A4B00; background: linear-gradient(90deg, #FFF3C4, #FFE08A); box-shadow: inset 0 0 0 1px #E6B53A }
.kin-table td, .kin-table th { white-space: nowrap }
/* the line-up peeks out of the machines */
.dome .capsule { overflow: hidden; background: radial-gradient(ellipse at 30% 22%, rgba(255, 255, 255, .85), transparent 25%), linear-gradient(color-mix(in srgb, var(--c) 88%, transparent) 0 46%, rgba(255, 255, 255, .5) 46% 50%, rgba(235, 244, 255, .38) 50%) }
.dome .capsule img { position: absolute; left: 50%; bottom: 1px; max-width: none; width: 34px; height: 30px; translate: -50% 0; object-fit: contain; opacity: .82; filter: saturate(.9); z-index: -1; pointer-events: none }
.dome .capsule::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, .45), transparent 30%); pointer-events: none }
.dome .capsule { isolation: isolate }
.prize-board { height: 84px }
.prize-string { position: relative }
.prize-string.has-prize img { position: absolute; top: calc(var(--h) - 4px); left: 50%; max-width: none; width: 38px; height: 38px; margin-left: -19px; object-fit: contain; opacity: .85; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); transform-origin: 50% -8px; animation: prize-sway 3.2s ease-in-out var(--d, 0s) infinite alternate; pointer-events: none }
@keyframes prize-sway { from { rotate: -6deg } to { rotate: 6deg } }
.string-machine.opening .prize-string.has-prize img { animation-duration: .4s }
@media (prefers-reduced-motion: reduce) { .prize-string.has-prize img { animation: none } }

/* binder: pages you can grab and turn */
.binder-book { touch-action: pan-y; user-select: none; -webkit-user-select: none }
.binder-book.dragging { cursor: grabbing }
.leaf { animation: none !important; will-change: transform }
.leaf-face { box-shadow: 0 0 calc(10px + var(--k, 0) * 40px) rgba(0, 0, 0, calc(.25 + var(--k, 0) * .35)) }
.leaf-face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--k, 0) }
.leaf.fwd .front::after, .leaf.back .backside::after { background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12) 35%, rgba(255, 255, 255, .14) 75%, rgba(0, 0, 0, .25)) }
.leaf.fwd .backside::after, .leaf.back .front::after { background: linear-gradient(270deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12) 35%, rgba(255, 255, 255, .14) 75%, rgba(0, 0, 0, .25)) }
/* a dog-eared corner says "grab me" */
.binder-page.right::before, .binder-page.single::before { content: ''; position: absolute; right: 0; bottom: 0; z-index: 3; width: 26px; height: 26px; border-radius: 0 0 10px 0; pointer-events: none;
  background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .08)); box-shadow: -2px -2px 6px rgba(0, 0, 0, .25); transition: width .2s, height .2s }
.binder-page.left::before { content: ''; position: absolute; left: 0; bottom: 0; z-index: 3; width: 22px; height: 22px; border-radius: 0 0 0 10px; pointer-events: none;
  background: linear-gradient(225deg, transparent 50%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .06)); box-shadow: 2px -2px 6px rgba(0, 0, 0, .2) }
.binder-book:hover .binder-page.right::before { width: 34px; height: 34px }
.odds-row header .kin-tag { margin-right: auto }
@media (max-width: 599px) { .kin-table th, .kin-table td { padding: 9px 5px; font-size: 13px } .kin-table { min-width: 0 } }

/* email login */
.social-btn.s-email { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink) }
.mail-logo { display: grid; place-items: center; font-size: 18px; line-height: 1 }
.social-dot.s-email { display: inline-grid; place-items: center; background: #EDE7FF; color: #5B3FC9; font-size: 10px }
.email-form label { display: grid; gap: 4px; font-weight: 800; font-size: 14px }
.email-form input[readonly] { background: var(--soft); color: var(--muted) }
.email-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 0 }
.social-btn.s-email { width: 100%; border: 0; cursor: pointer; font-family: inherit }
.social-btn.s-email .mail-logo { position: absolute; left: 16px; width: 24px; height: 24px; font-size: 20px }
.linked li.email-row { flex-wrap: wrap; row-gap: 4px }
.linked li.email-row .em-label { white-space: nowrap }
.linked li.email-row .em-addr { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; font-size: 13.5px }
.linked li.email-row .em-actions { display: flex; gap: 12px; margin-left: auto; white-space: nowrap }

/* binder v3: calm page turns. The book only swings open when the cover is opened, not after every page. */
.binder-book { animation: none }
.binder-book.just-opened { animation: open-book .5s ease-out }
.leaf .leaf-face.binder-page { position: absolute; inset: 0; min-height: 0; margin: 0; overflow: hidden;
  box-shadow: 0 0 calc(6px + var(--k, 0) * 22px) rgba(0, 0, 0, calc(.18 + var(--k, 0) * .22)) }
.leaf .leaf-face.binder-page.left { border-radius: 10px 2px 2px 10px }
.leaf .leaf-face.binder-page.right { border-radius: 2px 10px 10px 2px }
.leaf .leaf-face::after { opacity: calc(var(--k, 0) * .55) }
.leaf .leaf-face::before { display: none }
/* nothing sparkles or sweeps while a page is in the air */
.leaf *, .leaf *::before, .leaf *::after { animation: none !important; transition: none !important }
.leaf .leaf-face.binder-page { display: block; gap: 0; align-items: normal }  /* .front is also a hunt-screen class: keep page layout */

/* v2 machines: a full dome of capsules, and proper prizes on the string board */
.dome .capsule { width: 34px; height: 40px; box-shadow: inset 0 0 0 1.5px rgba(27, 21, 48, .22), inset -3px -5px 0 rgba(0, 0, 0, .06), 0 2px 3px rgba(0, 0, 0, .12) }
.dome .capsule img { width: 30px; height: 26px; bottom: 2px; opacity: .78 }
.prize-board { height: 104px; gap: 9px; margin-bottom: 4px }
.prize-string.has-prize img { position: static; width: auto; height: auto; margin: 0; animation: none; filter: none; opacity: 1; rotate: 0deg }
.prize { position: absolute; top: calc(var(--h) - 2px); left: 50%; translate: -50% 0; transform-origin: 50% -6px; animation: prize-sway 3.4s ease-in-out var(--d, 0s) infinite alternate; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)) }
.prize .ring { position: absolute; left: 50%; top: -6px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; border: 2px solid #D9D2C0; box-sizing: border-box; z-index: 2 }
/* acrylic keyring: a round clear charm with a colored rim */
.prize.charm .face { display: grid; place-items: center; width: 36px; height: 36px; margin-top: 2px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .6) 30%, color-mix(in srgb, var(--c) 35%, #fff) 70%);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--c) 75%, #fff), inset 0 0 0 4.5px #fff, 0 0 0 1.5px rgba(27, 21, 48, .35) }
.prize.charm img { width: 30px; height: 30px; object-fit: contain; margin-top: 4px }
/* little prize box with a window and a lid, like the ones on a real 줄뽑기 wall */
.prize.pbox { width: 34px; height: 40px; margin-top: 2px }
.prize.pbox .lid { position: absolute; left: -2px; right: -2px; top: 0; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--c) 70%, #2A2440); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2) }
.prize.pbox .window { position: absolute; left: 0; right: 0; top: 7px; bottom: 0; border-radius: 0 0 5px 5px; overflow: hidden; display: grid; place-items: end center;
  background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15) 40%, rgba(255, 255, 255, .35)), color-mix(in srgb, var(--c) 30%, #fff);
  box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--c) 70%, #2A2440) }
.prize.pbox img { width: 28px; height: 26px; object-fit: contain; margin-bottom: 2px }
.prize.pbox .tag { position: absolute; right: -4px; bottom: 3px; padding: 1px 3px; border-radius: 3px; font: 900 7px/1 var(--font); color: #2A2440; background: #FFD166; box-shadow: 0 0 0 1px #2A2440 }
.string-machine.opening .prize { animation-duration: .4s }
@media (prefers-reduced-motion: reduce) { .prize { animation: none } }
.prize-board { gap: 14px; height: 112px }
.lineup-card .kin-tag { font-style: normal; font-size: 10.5px; margin-left: 4px }