/* One tip, made visible: the race and the gacha (gacha.js). */

/* ---------- 1. the race: your parts stay the same length, the AI's parts shrink ---------- */
@property --rp { syntax: "<number>"; inherits: true; initial-value: 0; }
.rc { --unit-t: .55s; margin: 44px 0 0; padding: 26px 28px 20px; border-radius: var(--r-xl); background: oklch(1 0 0 / .03); box-shadow: inset 0 0 0 1px var(--dark-line); }
.rc-k { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 8px; font-size: 15px; color: var(--on-dark-soft); }
.rc-k span { display: inline-flex; align-items: center; gap: 10px; }
.rc-k span::before { content: ""; width: 26px; height: 14px; border-radius: 4px; }
.rc-you::before { background: var(--signal); }
.rc-ai::before { background: repeating-linear-gradient(135deg, oklch(1 0 0 / .28) 0 4px, oklch(1 0 0 / .08) 4px 8px); }
.rc-lane { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 8px 18px; margin-top: 22px; }
.rc-name { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--on-dark-2); }
.rc-lane[data-lane="opus"] .rc-name { color: var(--signal); }
.rc-track { position: relative; display: flex; gap: 4px; height: 76px; width: calc(var(--tot) / 15 * (100% - 74px)); --rp: 0; }
.rc.is-run .rc-track { animation: rc-go calc(15 * var(--unit-t) + 2.4s) linear infinite; }
@keyframes rc-go { 0% { --rp: 0; } 76% { --rp: 15; } 100% { --rp: 15; } }
.rc-seg { flex: var(--w) 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; }
.rc-h { flex-direction: column; gap: 5px; padding: 6px 4px; background: var(--signal); color: var(--ink); }
.rc-h .ic { width: 20px; height: 20px; flex: none; }
.rc-h b { font-size: 12px; font-weight: 650; line-height: 1.1; text-align: center; text-wrap: balance; }
.rc-a { padding: 0 8px; background: repeating-linear-gradient(135deg, oklch(1 0 0 / .14) 0 6px, oklch(1 0 0 / .05) 6px 12px); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .08); }
.rc-a b { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-dot { position: absolute; z-index: 2; top: -7px; bottom: -7px; left: calc(min(var(--rp), var(--tot)) / var(--tot) * 100%); width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--on-dark); box-shadow: 0 0 12px 2px oklch(1 0 0 / .6); }
.rc-dot::before { content: ""; position: absolute; left: 50%; top: -5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--on-dark); }
.rc-fin { position: absolute; left: calc(100% + 12px); top: 50%; translate: 0 -50%; padding: 6px 10px; border-radius: var(--r-pill); background: var(--signal); color: var(--ink); font: 600 var(--t-label)/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: clamp(0, (var(--rp) - var(--tot) + .02) * 50, 1); }
.rc:not(.is-run) .rc-fin { opacity: 0; }
.rc-foot { margin: 18px 0 0; font-size: 13px; color: var(--on-dark-2); }
@media (max-width: 760px) {
  .rc { padding: 18px 14px 14px; }
  .rc-lane { grid-template-columns: 1fr; margin-top: 16px; }
  .rc-name { font-size: 18px; }
  .rc-track { height: 54px; gap: 2px; width: calc(var(--tot) / 15 * (100% - 50px)); }
  .rc-h { padding: 4px 0; } .rc-h b, .rc-a b { display: none; }
  .rc-h .ic { width: 16px; height: 16px; }
  .rc-seg { border-radius: 6px; }
  .rc-fin { left: calc(100% + 6px); padding: 5px 7px; }
}
@media (prefers-reduced-motion: reduce) { .rc.is-run .rc-track { animation: none; --rp: 15; } .rc-fin { opacity: 1 !important; } }

/* ---------- 2. the gacha ---------- */
.gx { --n: oklch(0.72 0.012 70); --r: oklch(0.74 0.1 235); --sr: oklch(0.72 0.15 350); --ssr: var(--signal); margin: 28px 0 0; }
.gx-banners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
.gx-bn { position: relative; display: grid; gap: 6px; padding: 16px 20px 16px; border: 0; border-radius: var(--r-l); text-align: left; cursor: pointer; background: oklch(1 0 0 / .04); box-shadow: inset 0 0 0 1px var(--dark-line); color: var(--on-dark-2); transition: background-color .25s, box-shadow .25s, scale .15s; overflow: hidden; }
.gx-bn:active { scale: .98; }
.gx-bn b { font-family: var(--display); font-size: 26px; font-weight: 500; line-height: 1.1; color: var(--on-dark); }
.gx-bk { display: flex; align-items: center; gap: 10px; font: 500 var(--t-label)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.gx-bk i { padding: 4px 8px; border-radius: var(--r-pill); background: linear-gradient(90deg, #ffd84a, #ff9f43, #ff5e8a); color: #1b1305; font-style: normal; font-weight: 700; letter-spacing: .1em; animation: gx-pulse 1.6s ease-in-out infinite; }
@keyframes gx-pulse { 50% { filter: brightness(1.25); } }
.gx-rates { font: 500 12px/1.3 var(--mono); color: var(--on-dark-2); }
.gx-bn.is-on { background: linear-gradient(135deg, oklch(0.86 0.165 92 / .16), oklch(1 0 0 / .03) 60%); box-shadow: inset 0 0 0 1.5px var(--signal), 0 18px 40px -26px oklch(0.86 0.165 92 / .9); }
.gx-up.is-on::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, oklch(1 0 0 / .14) 50%, transparent 65%) 0 0 / 260% 100%; animation: gx-sheen 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes gx-sheen { from { background-position: 130% 0; } to { background-position: -40% 0; } }

.gx-stage { --beam: var(--signal); position: relative; height: clamp(440px, 46vw, 640px); border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(60% 70% at 50% 60%, oklch(0.24 0.02 80), oklch(0.15 0.01 70) 70%); box-shadow: inset 0 0 0 1px var(--dark-line); }
.gx-stage[data-beam="N"] { --beam: var(--n); } .gx-stage[data-beam="R"] { --beam: var(--r); } .gx-stage[data-beam="SR"] { --beam: var(--sr); } .gx-stage[data-beam="SSR"] { --beam: var(--ssr); }
.gx-portal { position: absolute; left: 50%; top: 56%; width: 260px; height: 260px; translate: -50% -50%; transition: opacity .5s, scale .5s; }
.gx-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid oklch(0.86 0.165 92 / .5); box-shadow: 0 0 40px oklch(0.86 0.165 92 / .25), inset 0 0 40px oklch(0.86 0.165 92 / .2); transform: rotateX(68deg); animation: gx-spin 9s linear infinite; }
.gx-ring::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 1px dashed oklch(0.86 0.165 92 / .6); }
.gx-ring2 { inset: 36px; animation-duration: 6s; animation-direction: reverse; }
@keyframes gx-spin { to { rotate: 360deg; } }
.gx-beam { position: absolute; left: 50%; bottom: 50%; width: 90px; height: 900px; margin-left: -45px; background: linear-gradient(to top, var(--beam), color-mix(in oklch, var(--beam) 40%, transparent) 40%, transparent); filter: blur(10px); transform-origin: 50% 100%; scale: 1 0; opacity: 0; }
.gx.is-summon .gx-ring { border-color: var(--beam); box-shadow: 0 0 60px var(--beam), inset 0 0 50px var(--beam); animation-duration: 1.2s; }
.gx.is-summon .gx-beam { animation: gx-beam 1.25s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes gx-beam { 0% { scale: 1 0; opacity: 0; } 25% { opacity: 1; } 70% { scale: 1 1; opacity: 1; } 100% { scale: 1.6 1; opacity: 0; } }
.gx-idle { position: absolute; left: 0; right: 0; bottom: 26px; margin: 0; text-align: center; font-family: var(--display); font-size: 22px; font-style: italic; color: var(--on-dark-2); transition: opacity .4s; }
.gx.has-cards .gx-portal, .gx.has-cards .gx-idle { opacity: 0; }
.gx.has-cards .gx-portal { scale: .6; }

.gx-grid { position: absolute; inset: 22px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; perspective: 1200px; pointer-events: none; }
.gx-card { position: relative; display: grid; place-items: center; min-height: 0; opacity: 0; }
.gx-in { position: relative; height: 100%; aspect-ratio: 3 / 4; max-width: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.gx-card.is-in { opacity: 1; animation: gx-fly .55s cubic-bezier(.2, .8, .2, 1) calc(var(--k, 0) * 55ms) both; }
@keyframes gx-fly { from { opacity: 0; translate: 0 60px; scale: .4; } to { opacity: 1; translate: 0 0; scale: 1; } }
.gx-card.is-up .gx-in { transform: rotateY(180deg); }
.gx-back, .gx-front { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gx-back { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, oklch(0.3 0.03 80), oklch(0.18 0.01 70)); box-shadow: inset 0 0 0 1.5px oklch(0.86 0.165 92 / .45); }
.gx-back i { width: 46%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 2px oklch(0.86 0.165 92 / .7), 0 0 0 6px oklch(0.86 0.165 92 / .12); background: radial-gradient(circle, oklch(0.86 0.165 92 / .35), transparent 65%); }
.gx-card[data-r="SR"].is-glow .gx-back { box-shadow: inset 0 0 0 2px var(--sr), 0 0 30px 4px color-mix(in oklch, var(--sr) 70%, transparent); animation: gx-shake .3s ease-in-out; }
.gx-card[data-r="SSR"].is-glow .gx-back { box-shadow: inset 0 0 0 2px var(--ssr), 0 0 44px 8px color-mix(in oklch, var(--ssr) 80%, transparent); animation: gx-shake .5s ease-in-out; }
@keyframes gx-shake { 25% { rotate: -3deg; } 75% { rotate: 3deg; } }
/* a trading card: rarity on top, the real draft whole in the middle, what it is at the bottom */
.gx-front { transform: rotateY(180deg); display: grid; grid-template-rows: 1fr auto 1fr; align-items: center; background: radial-gradient(120% 80% at 50% 0%, color-mix(in oklch, var(--rc, var(--n)) 38%, oklch(0.2 0.01 70)), oklch(0.16 0.01 70) 70%); }
.gx-front img { position: relative; z-index: 1; grid-row: 2; display: block; width: calc(100% - 12px); margin: 0 6px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 1px oklch(1 0 0 / .18), 0 8px 16px -8px oklch(0 0 0 / .8); }
.gx-front::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--rc, var(--n)); pointer-events: none; }
.gx-card[data-r="N"] { --rc: var(--n); } .gx-card[data-r="R"] { --rc: var(--r); } .gx-card[data-r="SR"] { --rc: var(--sr); } .gx-card[data-r="SSR"] { --rc: var(--ssr); }
.gx-card[data-r="N"] .gx-front img { filter: grayscale(.7) brightness(.8); }
.gx-r { position: absolute; z-index: 2; left: 0; right: 0; top: 8px; margin: 0; display: grid; justify-items: center; gap: 2px; }
.gx-r b { font: 800 clamp(18px, 2.3vw, 34px)/1 var(--sans, inherit); font-style: italic; letter-spacing: -0.02em; color: var(--rc); text-shadow: 0 2px 8px oklch(0 0 0 / .6); }
.gx-card[data-r="SSR"] .gx-r b { background: linear-gradient(100deg, #fff3b0, #ffd84a 35%, #ff9f43 65%, #ffe98a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gx-stars { font-size: 12px; letter-spacing: 2px; color: var(--rc); }
.gx-l { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 9px; margin: 0; font: 500 11px/1.25 var(--mono); text-align: center; color: var(--on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-card[data-r="SSR"].is-up .gx-front::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(115deg, transparent 25%, oklch(1 0.05 90 / .6) 45%, oklch(0.9 0.12 20 / .35) 55%, transparent 75%) 0 0 / 260% 100%; mix-blend-mode: screen; animation: gx-sheen 2.2s ease-in-out infinite; }
.gx-card[data-r="SSR"].is-up .gx-front { box-shadow: 0 0 28px 2px oklch(0.86 0.165 92 / .6); }
.gx-card[data-r="SR"].is-up .gx-front { box-shadow: 0 0 18px 0 color-mix(in oklch, var(--sr) 55%, transparent); }

/* an SSR gets its own moment */
.gx-show { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: oklch(0.1 0.01 70 / .72); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .35s; cursor: pointer; }
.gx-show::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; background: repeating-conic-gradient(from 0deg, oklch(0.86 0.165 92 / .22) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 60%); mask: radial-gradient(circle, #000 0, transparent 60%); animation: gx-spin 14s linear infinite; }
.gx.is-show .gx-show { opacity: 1; pointer-events: auto; }
.gx-show-card { position: relative; width: min(46%, 420px); aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 3px var(--ssr), 0 0 80px 10px oklch(0.86 0.165 92 / .55); scale: .6; rotate: -4deg; transition: scale .5s cubic-bezier(.3, 1.5, .5, 1), rotate .5s; }
.gx.is-show .gx-show-card { scale: 1; rotate: 0deg; }
.gx-show-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gx-stamp { position: absolute; right: -8px; top: 14px; margin: 0; padding: 8px 14px; rotate: 6deg; border-radius: 8px; background: linear-gradient(100deg, #fff3b0, #ffd84a 40%, #ff9f43); color: #1b1305; font: 800 18px/1 var(--sans, inherit); font-style: italic; letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 8px 20px -6px oklch(0 0 0 / .7); }
.gx-show-l { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 22px 14px 10px; background: linear-gradient(transparent, oklch(0.12 0.01 70 / .9)); font: 600 14px/1.2 var(--mono); color: var(--on-dark); }

.gx-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin: 14px 0 0; }
.gx-stats { display: flex; gap: 6px; margin: 0; flex-wrap: wrap; }
.gx-stats div { min-width: 84px; padding: 8px 12px; border-radius: 12px; background: oklch(1 0 0 / .04); box-shadow: inset 0 0 0 1px var(--dark-line); }
.gx-stats dt { font: 500 10px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); white-space: nowrap; }
.gx-stats dd { margin: 3px 0 0; font: 500 24px/1.1 var(--display); color: var(--on-dark); font-variant-numeric: tabular-nums; }
.gx-stats div:nth-child(2) dd { color: var(--ssr); } .gx-stats div:nth-child(3) dd { color: var(--sr); }
.gx-act { display: flex; gap: 10px; }
.gx-pull { height: 54px; padding: 0 24px; border: 0; border-radius: var(--r-pill); cursor: pointer; font: 700 16px/1 var(--sans, inherit); background: oklch(1 0 0 / .08); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--dark-line); transition: scale .15s, opacity .2s, filter .2s; }
.gx-pull.gx-ten { padding: 0 32px; background: linear-gradient(100deg, #ffe066, var(--signal) 45%, #ffb347); color: var(--ink); box-shadow: 0 14px 34px -14px oklch(0.86 0.165 92 / .95); }
.gx-pull:hover { filter: brightness(1.08); } .gx-pull:active { scale: .96; } .gx-pull:disabled { opacity: .5; cursor: default; }
.gx-sum { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--on-dark-soft); text-wrap: pretty; }
.gx-sum b { color: var(--on-dark); }
@media (max-width: 760px) {
  .gx-banners { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gx-bn { padding: 12px; } .gx-bn b { font-size: 19px; } .gx-rates { font-size: 10.5px; } .gx-bk i { display: none; } .gx-more { display: none; } .gx-rates { font-size: 11.5px; white-space: nowrap; }
  .gx-stage { height: 470px; }
  .gx-grid { inset: 12px; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .gx-l { font-size: 9px; } .gx-stars { font-size: 8px; }
  .gx-show-card { width: 82%; }
  .gx-act { width: 100%; } .gx-pull { flex: 1; padding: 0 10px; }
  .gx-stats div { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-in, .gx-card.is-in, .gx-ring, .gx-show::before, .gx-bk i, .gx-up.is-on::after, .gx-card[data-r="SSR"].is-up .gx-front::after { animation: none; transition: none; }
}

.rc-lane[data-lane="opus"] .rc-a b { display: none; }

/* ---------- the self-playing version: three big cards, no buttons ---------- */
.gx-bn { cursor: default; }
.gx-bn:active { scale: 1; }
.gx-stage { height: clamp(460px, 40vw, 560px); }
.gx-grid { inset: 28px; grid-template-columns: repeat(3, minmax(0, 300px)); grid-template-rows: minmax(0, 1fr); justify-content: center; gap: 28px; }
.gx-card.is-in { animation-delay: calc(var(--k, 0) * 110ms); }
.gx-l { font-size: 12.5px; }
.gx-r b { font-size: clamp(26px, 3vw, 42px); }
.gx-stars { font-size: 15px; }
.gx-call { position: absolute; left: 0; right: 0; top: 30px; margin: 0; text-align: center; font: 600 15px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-2); opacity: 0; transition: opacity .3s; }
.gx-call b { color: var(--beam); }
.gx.is-summon .gx-call { opacity: 1; }
.gx-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; }
.gx-res p { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 14px; background: oklch(1 0 0 / .04); box-shadow: inset 0 0 0 1px var(--dark-line); }
.gx-rn { font-family: var(--display); font-size: 20px; color: var(--on-dark); }
.gx-res p[data-res="up"] .gx-rn { color: var(--signal); }
.gx-chips { display: flex; gap: 6px; min-height: 34px; }
.gx-chips i { display: grid; place-items: center; min-width: 50px; height: 34px; padding: 0 10px; border-radius: 9px; font: 800 17px/1 var(--sans, inherit); font-style: italic; color: var(--ink); animation: gx-chip .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.gx-chips i:nth-child(2) { animation-delay: .08s; } .gx-chips i:nth-child(3) { animation-delay: .16s; }
.gx-chips i[data-r="N"] { background: var(--n); } .gx-chips i[data-r="R"] { background: var(--r); } .gx-chips i[data-r="SR"] { background: var(--sr); }
.gx-chips i[data-r="SSR"] { background: linear-gradient(100deg, #fff3b0, #ffd84a 40%, #ff9f43); box-shadow: 0 0 18px -2px oklch(0.86 0.165 92 / .8); }
@keyframes gx-chip { from { opacity: 0; scale: .5; } }
.gx-sum { margin-top: 12px; font-size: 14px; color: var(--on-dark-2); }
@media (max-width: 760px) {
  .gx-stage { height: 300px; }
  .gx-grid { inset: 14px; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
  .gx-res { grid-template-columns: 1fr; }
  .gx-rn { font-size: 17px; }
  .gx-chips i { min-width: 42px; height: 30px; font-size: 14px; }
  .gx-l { font-size: 9.5px; } .gx-stars { font-size: 10px; } .gx-r b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .gx-chips i { animation: none; } }
.gx-grid { align-items: center; }
.gx-in { height: auto; width: 100%; max-height: 100%; }
@media (max-width: 760px) { .gx-grid { inset: 16px 12px; } }
@media (max-width: 760px) { .gx-stage { height: 240px; } }
.gx-sum { text-wrap: balance; }

/* the particle layer, over the cards, under the SSR showcase */
.gx-fx { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.gx-show { z-index: 6; }
.gx.is-summon .gx-beam { animation-duration: .8s; }
.gx-card.is-in { animation-duration: .38s; animation-delay: calc(var(--k, 0) * 70ms); }
.gx-in { transition-duration: .4s; }
.gx-show-card { transition-duration: .35s; }
/* the SSR moment: a gold flash across the stage */
.gx.is-show .gx-stage::after { content: ""; position: absolute; inset: 0; z-index: 5; background: radial-gradient(circle at 50% 50%, oklch(0.95 0.12 90 / .9), transparent 60%); animation: gx-flash .6s ease-out both; pointer-events: none; }
@keyframes gx-flash { from { opacity: 1; } to { opacity: 0; } }
.gx-show-card { box-shadow: 0 0 0 3px var(--ssr), 0 0 120px 20px oklch(0.86 0.165 92 / .6); }
.gx.is-show .gx-show-card { animation: gx-float 1.5s ease-in-out both; }
@keyframes gx-float { 0% { rotate: -6deg; scale: .5; } 30% { rotate: 1deg; scale: 1.06; } 100% { rotate: 0deg; scale: 1; } }

/* ---------- the race, cleaner: icons in the lanes, names in one legend ---------- */
.rc-track { height: 64px; gap: 5px; }
.rc-h { padding: 0; justify-content: center; }
.rc-h .ic { width: 24px; height: 24px; }
.rc-a b { font-size: 12px; letter-spacing: .1em; }
.rc-legend { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--dark-line); }
.rc-legend li { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--on-dark); white-space: nowrap; }
.rc-li { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--signal); color: var(--ink); }
.rc-li .ic { width: 18px; height: 18px; }
.rc-name { font-size: 26px; }
@media (max-width: 760px) { .rc-track { height: 48px; } .rc-h .ic { width: 16px; height: 16px; } .rc-legend { gap: 10px 16px; } .rc-legend li { font-size: 14px; } .rc-li { width: 28px; height: 28px; } }

/* ---------- the gacha's title: big, centred, with a real SSR badge ---------- */
.gx-head { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 0; margin: 0 0 28px; text-align: center; }
.gx-kick { margin: 0 0 14px; padding: 7px 14px; border-radius: var(--r-pill); background: linear-gradient(100deg, #ffe066, #ffb347 50%, #ff6fae); color: #1b1305; font: 800 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.gx-head h3 { margin: 0 0 14px; font-family: var(--display); font-size: clamp(40px, 5vw, 72px) !important; font-weight: 500; line-height: 1.02; letter-spacing: -0.025em; color: var(--on-dark); text-wrap: balance; }
.gx-head h3 span { display: block; }
.gx-head h3 span + span { color: var(--signal); }
.gx-ssr { display: inline-block; padding: 0 .12em; margin-right: .06em; font: 800 .92em/1 var(--sans, inherit); font-style: italic; letter-spacing: -0.02em; background: linear-gradient(100deg, #fff3b0, #ffd84a 35%, #ff9f43 65%, #ffe98a) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 18px oklch(0.86 0.165 92 / .55)); animation: opus-shine 4s linear infinite; }
.gx-head .lx-lede { max-width: 58ch; margin: 0; font-size: 18px; line-height: 1.55; color: var(--on-dark-soft); text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .gx-ssr { animation: none; } }
@media (max-width: 760px) { .rc-h .ic { display: none; } }
.gx-head .lx-lede { justify-self: center; text-align: center; }

/* with the particle layer: the meteor replaces the CSS beam and rings; cards burst out of the impact */
.gx.has-fx .gx-portal { opacity: 0 !important; }
.gx-card:nth-child(1) { --fx: 105%; --r0: -18deg; } .gx-card:nth-child(2) { --fx: 0%; --r0: 0deg; } .gx-card:nth-child(3) { --fx: -105%; --r0: 18deg; }
.gx-card.is-in { animation: gx-out .6s cubic-bezier(.2, 1.2, .3, 1) calc(var(--k, 0) * 90ms) both; }
@keyframes gx-out { from { opacity: 0; translate: var(--fx) 30%; scale: .15; rotate: var(--r0); } 60% { opacity: 1; } to { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; } }
.gx-card.is-up .gx-in { transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.gx-call { top: 22px; }
@media (prefers-reduced-motion: reduce) { .gx-card.is-in { animation: none; opacity: 1; } }

/* ---------- pack opening (Hearthstone-style) ---------- */
.gx-portal, .gx.has-fx .gx-portal { display: none; }
.gx-call { opacity: 0; transition: opacity .3s; }
.gx.is-drop .gx-call { opacity: 1; }
.gx-altar { position: absolute; left: 50%; top: 58%; width: min(420px, 60%); aspect-ratio: 3 / 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, oklch(0.3 0.03 80 / .9), oklch(0.18 0.01 70 / .9) 70%, transparent 72%); box-shadow: 0 0 0 2px oklch(0.75 0.12 80 / .45), 0 0 60px -10px oklch(0.8 0.14 80 / .35), inset 0 -10px 30px oklch(0 0 0 / .6); transition: opacity .4s, box-shadow .4s; }
.gx-altar i { position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed oklch(0.8 0.12 80 / .45); animation: gx-spin 16s linear infinite; }
.gx.has-cards .gx-altar { opacity: 0; }
.gx.is-shake .gx-altar { box-shadow: 0 0 0 2px var(--beam), 0 0 90px 0 var(--beam), inset 0 -10px 30px oklch(0 0 0 / .6); }
.gx-pack { position: absolute; z-index: 3; left: 50%; top: 50%; width: clamp(140px, 15vw, 190px); aspect-ratio: 5 / 7; translate: -50% -140%; opacity: 0; pointer-events: none; }
.gx-pack-in { position: relative; width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 6px; border-radius: 14px; overflow: hidden; color: #fff4d2; text-align: center;
  background: linear-gradient(160deg, oklch(0.36 0.06 60), oklch(0.22 0.03 40) 55%, oklch(0.3 0.08 20)); box-shadow: inset 0 0 0 3px oklch(0.8 0.13 80), inset 0 0 0 7px oklch(0.25 0.03 60), inset 0 0 0 8px oklch(0.8 0.13 80 / .6), 0 30px 60px -20px oklch(0 0 0 / .9); }
.gx-pack-in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, oklch(1 0.05 90 / .35) 48%, transparent 62%) 0 0 / 250% 100%; animation: gx-sheen 2.4s ease-in-out infinite; }
.gx-pack-em { font-size: 44px; line-height: 1; color: oklch(0.88 0.15 85); text-shadow: 0 0 18px oklch(0.85 0.16 80 / .8); }
.gx-pack-in b { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: .01em; }
.gx-pack-in small { font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.gx-pack-rays { position: absolute; inset: -60%; z-index: -1; background: repeating-conic-gradient(from 0deg, var(--beam) 0 5deg, transparent 5deg 18deg); opacity: 0; filter: blur(2px); }
.gx.is-drop .gx-pack { animation: gx-drop .6s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes gx-drop { from { opacity: 0; translate: -50% -180%; rotate: -8deg; scale: .9; } to { opacity: 1; translate: -50% -58%; rotate: 0deg; scale: 1; } }
.gx.is-shake .gx-pack { animation: gx-shake2 .12s linear infinite; translate: -50% -58%; opacity: 1; }
.gx.is-shake .gx-pack-in { box-shadow: inset 0 0 0 3px var(--beam), inset 0 0 40px var(--beam), 0 0 50px 8px var(--beam), 0 30px 60px -20px oklch(0 0 0 / .9); }
.gx.is-shake .gx-pack-rays { opacity: .5; animation: gx-spin 3s linear infinite; }
@keyframes gx-shake2 { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
.gx.is-burst .gx-pack { opacity: 1; translate: -50% -58%; animation: gx-pop .25s ease-out both; }
@keyframes gx-pop { to { scale: 1.6; opacity: 0; filter: brightness(3); } }
.gx.is-burst .gx-stage::after { content: ""; position: absolute; inset: 0; z-index: 5; background: radial-gradient(circle at 50% 45%, #fff, var(--beam) 30%, transparent 65%); animation: gx-flash .5s ease-out both; pointer-events: none; }
/* every card glows in its own colour before it turns over */
.gx-card.is-glow .gx-back { box-shadow: inset 0 0 0 2px var(--rc, var(--n)), 0 0 26px 2px color-mix(in oklch, var(--rc, var(--n)) 70%, transparent); animation: gx-shake .3s ease-in-out; }
.gx-card[data-r="SSR"].is-glow .gx-back { box-shadow: inset 0 0 0 3px var(--ssr), 0 0 60px 12px oklch(0.8 0.17 60 / .9); animation: gx-legend 0.5s ease-in-out infinite alternate; }
@keyframes gx-legend { from { scale: 1; } to { scale: 1.05; } }
.gx.is-legend .gx-stage::after { content: ""; position: absolute; inset: 0; z-index: 5; background: radial-gradient(circle at 50% 50%, oklch(0.95 0.12 75 / .95), oklch(0.8 0.17 55 / .5) 35%, transparent 70%); animation: gx-flash .7s ease-out both; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .gx-pack, .gx-altar { display: none; } }

/* ---------- v4: the WebGL pack opening owns the stage ---------- */
.gx.has-fx .gx-stage { height: auto; aspect-ratio: 2 / 1; max-height: 640px; background: oklch(0.12 0.01 70); }
.gx.has-fx .gx-fx { z-index: 1; }
.gx.has-fx .gx-altar, .gx.has-fx .gx-pack, .gx.has-fx .gx-grid, .gx.has-fx .gx-show, .gx.has-fx .gx-portal { display: none !important; }
.gx.has-fx .gx-stage::after { content: none !important; }
.gx.has-fx .gx-call { z-index: 2; text-shadow: 0 2px 12px oklch(0 0 0 / .8); }
@media (max-width: 760px) { .gx.has-fx .gx-stage { aspect-ratio: 4 / 5; height: auto; max-height: none; } }

/* phones: the two result rows sit side by side, name over chips, and the takeaway reads left like the note above it */
@media (max-width: 620px) {
  .gx-res { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  .gx-res p { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; }
  .gx-rn { font-size: 16px; }
  .gx-chips { gap: 4px; min-height: 26px; }
  .gx-chips i { min-width: 0; height: 26px; padding: 0 7px; font-size: 12px; border-radius: 7px; }
  .gx-sum { margin-top: 10px; font-size: 14px; }
  .lx-foot { margin-top: 18px; text-align: left; font-size: 17px; text-wrap: pretty; }
}
/* before the first pull, say what will land here instead of showing an empty frame */
.gx-chips:empty::before { content: "Drawing 3 drafts…"; align-self: center; font: 500 11.5px/1 var(--mono); letter-spacing: .04em; color: var(--on-dark-soft); }