/* ============ RipHouse ============ */
@property --mx { syntax: '<number>'; inherits: true; initial-value: 0.5; }
@property --my { syntax: '<number>'; inherits: true; initial-value: 0.5; }

:root {
  color-scheme: dark;
  --bg: #07080c;
  --bg-2: #0d0f16;
  --panel: #12151e;
  --panel-2: #181c27;
  --line: #242a38;
  --line-2: #323a4d;
  --text: #f2f4f8;
  --muted: #8d97ab;
  --gold: #ffcc4d;
  --pink: #ff3d8b;
  --green: #31d67b;
  --red: #ff4d5e;
  --blue: #3b9dff;
  --grad: linear-gradient(100deg, #ffcc4d 0%, #ff7a3d 45%, #ff3d8b 100%);
  --radius: 16px;
  --shadow: 0 20px 50px rgba(0, 0, 0, .45);
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #07080c; --text: #f2f4f8; }
}
:root[data-theme="dark"] { --bg: #07080c; --text: #f2f4f8; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font);
  min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.1; margin: 0 0 .4em; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 5vw, 56px); letter-spacing: .01em; }
h2 { font-size: 22px; }
h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-top: 22px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .9em; }
.wrap { word-break: break-all; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grow { flex: 1; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.eyebrow svg { width: 16px; height: 16px; }

.bg-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 50% at 80% -10%, rgba(255, 61, 139, .16), transparent 70%), radial-gradient(50% 40% at 0% 0%, rgba(255, 204, 77, .10), transparent 70%), radial-gradient(70% 60% at 50% 120%, rgba(59, 157, 255, .10), transparent 70%); }

/* ============ chrome ============ */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; display: flex; align-items: center; gap: 20px; padding: 12px max(16px, calc((100vw - 1240px) / 2)); background: rgba(7, 8, 12, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--grad); color: #1a0710; font-family: var(--display); font-size: 17px; letter-spacing: .02em; box-shadow: 0 6px 20px rgba(255, 61, 139, .35); }
.logo-word { font-family: var(--display); font-size: 22px; letter-spacing: .06em; }
.logo.big { justify-content: center; margin-bottom: 14px; }
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; padding: 8px 14px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 14px; position: relative; }
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.nav a.on { color: var(--text); background: rgba(255, 255, 255, .08); }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 800; margin-left: 4px; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.icon-btn svg { width: 18px; height: 18px; }
.balance { display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 14px; border-radius: 999px; border: 1px solid rgba(49, 214, 123, .35); background: linear-gradient(180deg, rgba(49, 214, 123, .14), rgba(49, 214, 123, .04)); cursor: pointer; font-weight: 800; font-variant-numeric: tabular-nums; }
.bal-plus { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #04220f; font-weight: 900; font-size: 18px; line-height: 1; }
.avatar { width: 38px; height: 38px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #3b4256, #1d2130); font-weight: 800; cursor: pointer; }
.demo-banner { position: relative; z-index: 1; text-align: center; font-size: 13px; padding: 8px 16px; background: linear-gradient(90deg, rgba(255, 204, 77, .14), rgba(255, 61, 139, .14)); border-bottom: 1px solid rgba(255, 204, 77, .2); color: #ffe3a3; }
main { position: relative; z-index: 1; padding: 0 max(16px, calc((100vw - 1240px) / 2)) 40px; outline: none; }
.foot { position: relative; z-index: 1; padding: 28px max(16px, calc((100vw - 1240px) / 2)) 110px; color: var(--muted); font-size: 12.5px; border-top: 1px solid rgba(255, 255, 255, .05); }
.foot p { margin: 4px 0; }
.tabbar { display: none; }

@media (max-width: 760px) {
  .nav { display: none; }
  .logo-word { font-size: 18px; }
  .top { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  #mute { display: none; }
  .avatar { display: none; }
  .tabbar { display: flex; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(10, 12, 18, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, .07); }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; text-decoration: none; font-size: 11px; font-weight: 600; color: var(--muted); }
  .tabbar a.on { color: var(--text); }
  .tabbar a.on svg { color: var(--gold); }
  .tabbar svg { width: 22px; height: 22px; }
}

/* ============ controls ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1px solid transparent; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none; transition: transform .15s, filter .15s, background .15s, opacity .15s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.sm { min-height: 34px; padding: 6px 14px; font-size: 13px; }
.btn-glow { background: var(--grad); color: #1a0710; box-shadow: 0 10px 30px rgba(255, 61, 139, .35), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn-glow:hover { filter: brightness(1.08); }
.btn-ghost { background: rgba(255, 255, 255, .05); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, .09); }
.btn-sell { background: linear-gradient(180deg, #3ee08a, #1fb866); color: #032412; box-shadow: 0 8px 22px rgba(49, 214, 123, .3); }
.btn-danger { background: rgba(255, 77, 94, .14); border-color: rgba(255, 77, 94, .5); color: #ffb3bb; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.chip svg { width: 16px; height: 16px; color: var(--accent); }
.chip.on { border-color: var(--accent, #fff); background: color-mix(in srgb, var(--accent, #fff) 14%, var(--panel)); box-shadow: 0 0 0 1px var(--accent, #fff) inset; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.seg button { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font-weight: 700; cursor: pointer; color: var(--muted); }
.seg button.on { background: rgba(255, 255, 255, .1); color: var(--text); }
.form { display: grid; gap: 12px; }
.form.inline { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
input, select { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: #0b0d13; color: var(--text); font: inherit; font-size: 16px; }
input:focus, select:focus { outline: 2px solid rgba(255, 204, 77, .5); outline-offset: 1px; }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; line-height: 1.4; }
.form .check input { width: 20px; min-height: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--gold); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 14px; }
.kv { display: grid; gap: 4px; }
.kv span { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.kv code { font-family: var(--mono); font-size: 13px; word-break: break-all; background: #0b0d13; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); }
.warn { color: #ffd28a; }
.fine { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.loading { padding: 60px 0; text-align: center; color: var(--muted); }
.empty { text-align: center; padding: 70px 16px; display: grid; justify-items: center; gap: 8px; }
.empty p { color: var(--muted); max-width: 420px; margin: 0 0 8px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 10px var(--tc); margin-right: 8px; vertical-align: 0; }
.tier-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); }
.tier-pill.sm { font-size: 10px; padding: 2px 8px; }
.toast { position: fixed; z-index: 400; left: 50%; bottom: 90px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 14px; background: #1b2030; border: 1px solid var(--line-2); box-shadow: var(--shadow); font-weight: 600; max-width: min(92vw, 460px); text-align: center; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: rgba(255, 77, 94, .6); background: #2a1219; }
.toast.ok { border-color: rgba(49, 214, 123, .6); background: #0f2219; }
.float-text { position: fixed; z-index: 500; font-family: var(--display); font-size: 30px; pointer-events: none; text-shadow: 0 4px 18px rgba(0, 0, 0, .6), 0 0 18px currentColor; white-space: nowrap; }
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 300; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid rgba(255, 255, 255, .04); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }

/* modal */
.modal-wrap { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; }
.modal-bg { position: absolute; inset: 0; background: rgba(3, 4, 8, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.modal { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: linear-gradient(180deg, #151925, #0e1118); border: 1px solid var(--line-2); border-radius: 22px; padding: 26px; box-shadow: 0 40px 100px rgba(0, 0, 0, .6); transform: translateY(24px) scale(.97); opacity: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
.modal-wrap.wide .modal { width: min(1040px, 100%); }
.modal-wrap.on .modal-bg { opacity: 1; }
.modal-wrap.on .modal { transform: none; opacity: 1; }
.modal-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .3); cursor: pointer; }
@media (max-width: 640px) {
  .modal-wrap { padding: 0; align-items: end; }
  .modal { border-radius: 22px 22px 0 0; max-height: 92vh; padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); }
}

/* ============ lobby ============ */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; padding: 48px 0 30px; min-height: 480px; }
.hero h1 { font-size: clamp(42px, 6.4vw, 80px); line-height: .98; margin: 14px 0 16px; }
.hero p { color: #c3cad8; max-width: 520px; font-size: 16.5px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0; }
.hero-points { list-style: none; padding: 0; margin: 0; display: flex; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; }
.hero-points b { color: var(--text); }
.hero-show { position: relative; height: 420px; }
.hero-show .hero-card { position: absolute; left: 50%; top: 50%; }
.hero-card.hc0 { transform: translate(-115%, -46%) rotate(-11deg); z-index: 1; }
.hero-card.hc1 { transform: translate(-50%, -54%); z-index: 3; }
.hero-card.hc2 { transform: translate(15%, -46%) rotate(11deg); z-index: 2; }
.hero-card .c3d-front { box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 60px rgba(255, 77, 240, .18); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 26px; min-height: 0; gap: 0; }
  .hero-show { height: 330px; order: -1; margin: 0 -16px; overflow: hidden; }
  .hero-card { --w: 170px !important; }
}

.feed { margin: 6px -16px 18px; overflow: hidden; mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.feed-track { display: flex; gap: 12px; width: max-content; animation: marquee 50s linear infinite; padding: 4px 0; }
.feed-item { white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--tc) 40%, var(--line)); font-size: 13px; color: var(--muted); }
.feed-item b { color: var(--text); }
.feed-item span { color: var(--text); font-weight: 600; }
.feed-item em { font-style: normal; font-weight: 800; color: var(--tc); }
@keyframes marquee { to { transform: translateX(-50%); } }

.cat-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: none; position: sticky; top: 62px; z-index: 5; background: linear-gradient(180deg, var(--bg) 75%, transparent); }
.cat-row::-webkit-scrollbar { display: none; }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.pack-tile { position: relative; display: grid; justify-items: center; gap: 12px; padding: 22px 14px 14px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel) 60%); cursor: pointer; text-align: left; transition: transform .25s, border-color .25s, box-shadow .25s; }
.pack-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: 0 20px 50px rgba(0, 0, 0, .4), 0 0 40px color-mix(in srgb, var(--accent) 15%, transparent); }
.pt-meta { width: 100%; display: grid; gap: 3px; }
.pt-name { font-weight: 800; font-size: 15px; }
.pt-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.pt-row > b { color: var(--text); }
.pt-price { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .14); font-weight: 900; font-size: 13px; }
@media (max-width: 520px) {
  .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pack-tile { padding: 16px 8px 10px; }
  .pack-tile .pack3d { --w: 128px !important; }
  .cat-row { top: 58px; }
}

/* ============ 3D pack ============ */
.pack3d { --d: 1.5em; width: var(--w); font-size: calc(var(--w) / 20); position: relative; perspective: 1500px; user-select: none; -webkit-user-select: none; touch-action: none; cursor: grab; }
.pack3d.grabbing { cursor: grabbing; }
.pack-tile .pack3d { touch-action: auto; cursor: pointer; }
.p3-stage, .p3-spin { position: relative; width: 20em; height: 32em; transform-style: preserve-3d; }
.p3-spin { will-change: transform; }
.p3-face { position: absolute; left: 0; width: 20em; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.p3-front, .p3-back { top: 3.4em; height: 28.6em; }
.p3-front {
  transform: translateZ(calc(var(--d) / 2));
  display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 1.6em;
  background:
    radial-gradient(120% 55% at 50% 38%, rgba(255, 255, 255, .18), transparent 62%),
    linear-gradient(90deg, rgba(0, 0, 0, .38), transparent 9%, transparent 91%, rgba(0, 0, 0, .38)),
    linear-gradient(165deg, var(--c2) -20%, var(--c1) 22%, var(--c3) 80%);
}
.p3-back {
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  display: flex; flex-direction: column; align-items: center; gap: 1.1em; padding: 2.2em 1.8em 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .38), transparent 9%, transparent 91%, rgba(0, 0, 0, .38)),
    linear-gradient(195deg, var(--c2) -30%, var(--c1) 25%, var(--c3) 85%);
}
.p3-strip { position: absolute; top: 0; left: 0; width: 20em; height: 3.4em; transform-style: preserve-3d; transform-origin: 100% 100%; transform: rotate(calc(var(--tear, 0) * -7deg)) translateY(calc(var(--tear, 0) * -.5em)); }
.p3-sf, .p3-sb { top: 0; height: 3.4em; background: linear-gradient(90deg, var(--c3), var(--c1) 25%, var(--c2) 50%, var(--c1) 75%, var(--c3)); }
.p3-sf { transform: translateZ(.25em); }
.p3-sb { transform: rotateY(180deg) translateZ(.25em); }
.p3-side { position: absolute; top: 3.4em; height: 28.6em; width: var(--d); left: calc(var(--d) / -2); background: linear-gradient(90deg, var(--c3), color-mix(in srgb, var(--c1) 70%, #fff) 50%, var(--c3)); }
.p3-l { transform: rotateY(-90deg); }
.p3-r { left: calc(20em - var(--d) / 2); transform: rotateY(90deg); }
.p3-cap { position: absolute; left: 0; width: 20em; height: var(--d); }
.p3-t { top: calc(3.4em - var(--d) / 2); transform: rotateX(90deg); background: linear-gradient(180deg, #000, color-mix(in srgb, var(--c3) 60%, #000)); }
.p3-b { top: calc(32em - var(--d) / 2); transform: rotateX(-90deg); background: var(--c3); }
.p3-shadow { position: absolute; left: 12%; right: 12%; bottom: -2.4em; height: 3em; background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); filter: blur(3px); }
.pack-crimp { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 .18em, rgba(0, 0, 0, .28) .18em .42em); opacity: .75; }
.pack-crimp.bottom { inset: auto 0 0 0; height: 1.6em; }
.pack-tear { position: absolute; left: 0; bottom: 0; height: .22em; width: 100%; transform: translateZ(.3em) scaleX(var(--tear, 0)); transform-origin: left; background: #fff; box-shadow: 0 0 .6em .2em rgba(255, 255, 255, .9), 0 0 1.4em .4em var(--c2); }
.pack-foil { position: absolute; inset: 0; background: repeating-linear-gradient(125deg, rgba(255, 255, 255, 0) 0 3em, rgba(255, 255, 255, .14) 4em, rgba(255, 255, 255, 0) 5em 8em); mix-blend-mode: overlay; }
.pack-rays { position: absolute; left: 50%; top: 52%; width: 60em; height: 60em; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .08) 0 4deg, transparent 4deg 12deg); mask: radial-gradient(circle, #000 0 12%, transparent 40%); -webkit-mask: radial-gradient(circle, #000 0 12%, transparent 40%); animation: spin 30s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.pack-logo { position: relative; font-family: var(--display); font-size: 1.5em; letter-spacing: .32em; padding-left: .32em; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .6)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pack-cat { position: relative; display: flex; align-items: center; gap: .4em; margin-top: 1.4em; font-size: 1em; font-weight: 800; letter-spacing: .2em; color: #fff; padding: .35em .9em; border-radius: 999px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .25); }
.pack-cat svg { width: 1.3em; height: 1.3em; color: var(--accent); }
.pack-name { position: relative; margin-top: .45em; font-family: var(--display); font-size: min(4em, calc(36em / var(--pl, 4))); white-space: nowrap; line-height: 1; letter-spacing: .02em; background: linear-gradient(180deg, #fff 20%, var(--c2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .06em .05em rgba(0, 0, 0, .5)); padding: 0 .2em; }
.pack-sub { position: relative; font-size: .78em; letter-spacing: .25em; font-weight: 700; color: rgba(255, 255, 255, .7); margin-top: .5em; }
.pack-price { position: relative; margin-top: 1.6em; font-family: var(--display); font-size: 3em; line-height: 1; color: #fff; text-shadow: 0 .06em .2em rgba(0, 0, 0, .5); }
.pack-hit { position: absolute; bottom: 2.6em; left: 50%; translate: -50% 0; white-space: nowrap; font-size: .85em; font-weight: 800; letter-spacing: .14em; padding: .45em 1em; border-radius: 999px; background: rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .2); }
.pack-hit b { color: #fff; }
.pb-seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.4em; translate: -50% 0; background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .16) 50%, rgba(0, 0, 0, .28)); }
.pb-logo { position: relative; font-family: var(--display); font-size: 5em; line-height: 1; background: linear-gradient(180deg, #fff, var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .05em .1em rgba(0, 0, 0, .4)); }
.pb-rows { position: relative; width: 100%; display: grid; gap: .1em; padding: .8em 1em; border-radius: .6em; background: rgba(0, 0, 0, .42); border: 1px solid rgba(255, 255, 255, .18); }
.pb-rows div { display: flex; justify-content: space-between; gap: .5em; font-size: .85em; color: rgba(255, 255, 255, .75); font-weight: 600; padding: .25em 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pb-rows div:last-child { border-bottom: 0; }
.pb-rows b { color: #fff; font-weight: 800; }
.pb-fine { position: relative; font-size: .62em; line-height: 1.4; color: rgba(255, 255, 255, .7); text-align: center; }
.pb-bar { position: relative; display: flex; gap: .12em; width: 9em; height: 2.6em; padding: .3em .4em; background: #fff; border-radius: .2em; }
.pb-bar i { display: block; background: #111; }
.price-1000 .pack-name { background: linear-gradient(180deg, #fff1c6, #d9b25c 60%, #8a6a22); -webkit-background-clip: text; background-clip: text; }
.price-1000 .p3-front, .price-1000 .p3-back { background: linear-gradient(90deg, rgba(0, 0, 0, .4), transparent 9%, transparent 91%, rgba(0, 0, 0, .4)), radial-gradient(120% 70% at 50% 30%, #2b2414, #0b0b0b 60%), #000; }
.price-1000 .p3-front::after { content: ''; position: absolute; inset: .7em; border: .12em solid rgba(217, 178, 92, .6); border-radius: .3em; pointer-events: none; }
.price-2500 .p3-front, .price-2500 .p3-back { background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 9%, transparent 91%, rgba(0, 0, 0, .35)), linear-gradient(165deg, #ff3df2, #7b2ff7 35%, #00e1ff 70%, #1a0033); }
/* filter on the spinning group would flatten the 3D, so cycle the hue on each face instead */
.price-2500 .p3-face, .price-2500 .p3-side, .price-2500 .p3-cap { animation: hue 8s linear infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.pack3d.idle { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -10px; } }
.pack-tile .p3-stage { animation: sway 7s ease-in-out infinite; }
.pack-tile:nth-child(3n+2) .p3-stage { animation-delay: -2.3s; }
.pack-tile:nth-child(3n) .p3-stage { animation-delay: -4.6s; }
@keyframes sway { 0%, 100% { transform: rotateY(-14deg) rotateX(4deg); } 50% { transform: rotateY(14deg) rotateX(-3deg); } }

/* ============ rainbow holo foil (cards + packs) ============ */
.holo, .glare { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.holo { z-index: 5; mix-blend-mode: color-dodge; opacity: calc(.13 + var(--holo, .3) * .3); transition: opacity .5s; -webkit-mask: radial-gradient(ellipse 78% 68% at 50% 52%, rgba(0, 0, 0, .3) 30%, #000 100%); mask: radial-gradient(ellipse 78% 68% at 50% 52%, rgba(0, 0, 0, .3) 30%, #000 100%); }
.glare { z-index: 6; mix-blend-mode: overlay; }
.holo i, .glare i { position: absolute; display: block; }
.h-rain {
  inset: -50%;
  background: repeating-linear-gradient(115deg, #ff3b7a 0%, #ffb340 3%, #fff04a 6%, #42ff9a 9%, #3ad8ff 12%, #7e6bff 15%, #ff4fd8 18%, #ff3b7a 21%);
  translate: calc((var(--mx, .5) - .5) * -36%) calc((var(--my, .5) - .5) * -36%);
  animation: rain-sweep 5.5s ease-in-out infinite alternate, hue 8s linear infinite;
  animation-play-state: paused;
  will-change: transform, filter;
}
@keyframes rain-sweep { from { transform: translate3d(-9%, -5%, 0); } to { transform: translate3d(9%, 5%, 0); } }
.h-band {
  inset: -10% -70%;
  background: linear-gradient(105deg, transparent 40%, #ff4f8b 44%, #ffd25a 46.5%, #fff 50%, #4fffb0 53.5%, #5aa8ff 56%, transparent 60%);
  transform: translate3d(-55%, 0, 0);
  animation: band 3.4s cubic-bezier(.5, .05, .3, 1) infinite;
  animation-play-state: paused;
  will-change: transform;
}
@keyframes band { 0% { transform: translate3d(-55%, 0, 0); } 60%, 100% { transform: translate3d(55%, 0, 0); } }
.h-spark {
  inset: -4%;
  background: radial-gradient(circle, #fff 0 .07em, transparent .11em) 0 0 / 1.3em 1.5em, radial-gradient(circle, #fff 0 .055em, transparent .09em) .6em .7em / 2.1em 1.9em;
  opacity: calc(var(--holo, .3) * .55);
  translate: calc((var(--mx, .5) - .5) * 8%) calc((var(--my, .5) - .5) * 8%);
  animation: twinkle2 1.4s steps(2) infinite;
  animation-play-state: paused;
}
@keyframes twinkle2 { 50% { opacity: calc(var(--holo, .3) * .3); } }
.inview .holo i, .full .holo i, .tilting .holo i, .grabbing .holo i, .auto-shine .holo i { animation-play-state: running; }
.tilting .holo, .grabbing .holo, .auto-shine .holo { opacity: calc(.18 + var(--holo, .3) * .34); }
.holo-boost .holo { opacity: calc(.28 + var(--holo, .3) * .3); }
.hm-prizm { -webkit-mask: radial-gradient(ellipse 78% 68% at 50% 52%, rgba(0, 0, 0, .3) 30%, #000 100%), repeating-conic-gradient(from 8deg at 50% 42%, #000 0 4deg, rgba(0, 0, 0, .4) 4deg 9deg); -webkit-mask-composite: source-in; mask: radial-gradient(ellipse 78% 68% at 50% 52%, rgba(0, 0, 0, .3) 30%, #000 100%), repeating-conic-gradient(from 8deg at 50% 42%, #000 0 4deg, rgba(0, 0, 0, .4) 4deg 9deg); mask-composite: intersect; }
.hm-cosmos { -webkit-mask: radial-gradient(ellipse 78% 68% at 50% 52%, rgba(0, 0, 0, .3) 30%, #000 100%), radial-gradient(circle at 50% 50%, #000 0 .18em, rgba(0, 0, 0, .62) .34em) 0 0 / .9em .9em; -webkit-mask-composite: source-in; mask: radial-gradient(ellipse 78% 68% at 50% 52%, rgba(0, 0, 0, .3) 30%, #000 100%), radial-gradient(circle at 50% 50%, #000 0 .18em, rgba(0, 0, 0, .62) .34em) 0 0 / .9em .9em; mask-composite: intersect; }
.hm-etched { -webkit-mask: radial-gradient(ellipse 78% 68% at 50% 52%, rgba(0, 0, 0, .3) 30%, #000 100%), repeating-linear-gradient(60deg, #000 0 .12em, rgba(0, 0, 0, .45) .12em .42em); -webkit-mask-composite: source-in; mask: radial-gradient(ellipse 78% 68% at 50% 52%, rgba(0, 0, 0, .3) 30%, #000 100%), repeating-linear-gradient(60deg, #000 0 .12em, rgba(0, 0, 0, .45) .12em .42em); mask-composite: intersect; }
.hm-soft { opacity: calc(.1 + var(--holo, .3) * .26); }
.glare i { left: -50%; top: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .18) 16%, transparent 36%); translate: calc((var(--mx, .5) - .5) * 50%) calc((var(--my, .5) - .5) * 50%); opacity: .5; transition: opacity .3s; }
.tilting .glare i, .grabbing .glare i, .auto-shine .glare i { opacity: 1; }
.auto-shine { animation: autoshine 6s ease-in-out infinite; }
@keyframes autoshine { 0%, 100% { --mx: .15; --my: .2; } 50% { --mx: .85; --my: .8; } }

/* ============ cards ============ */
.c3d { --mx: .5; --my: .5; width: var(--w); font-size: calc(var(--w) / 20); perspective: 1100px; position: relative; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.c3d.grabbing { cursor: grabbing; }
.c3d-tilt { transform-style: preserve-3d; will-change: transform; }
.c3d-flip { position: relative; transform-style: preserve-3d; }
.c3d-front, .c3d-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: .9em; }
.is-raw .c3d-front, .is-raw .c3d-back { border-radius: 1em; }
.c3d-front { position: relative; overflow: hidden; box-shadow: 0 1.2em 2.4em rgba(0, 0, 0, .5); transition: box-shadow .4s; }
.c3d-back { position: absolute; inset: 0; transform: rotateY(180deg); overflow: hidden; }
.face-down .c3d-flip { transform: rotateY(180deg); }
.c3d.glow .c3d-front, .c3d.glow-soft .c3d-front { box-shadow: 0 0 1.6em .2em color-mix(in srgb, var(--tc) 80%, transparent), 0 0 5em 1em color-mix(in srgb, var(--tc) 35%, transparent), 0 1.2em 2.4em rgba(0, 0, 0, .5); }
.c3d.glow-soft.tier-common .c3d-front, .c3d.glow-soft.tier-uncommon .c3d-front { box-shadow: 0 1.2em 2.4em rgba(0, 0, 0, .5); }

/* raw card container */
.raw { container-type: inline-size; aspect-ratio: 5 / 7; border-radius: 1em; overflow: hidden; }
.card { position: relative; width: 100%; height: 100%; font-size: 5cqw; overflow: hidden; border-radius: inherit; background: #111; isolation: isolate; }
.cd-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slab { aspect-ratio: .6; border-radius: .9em; overflow: hidden; background: #0b0d13; }
.photo-slab img { display: block; width: 100%; height: 100%; object-fit: contain; }
.has-photo .holo { opacity: calc(.08 + var(--holo, .3) * .2); }
.has-photo.tilting .holo, .has-photo.grabbing .holo { opacity: calc(.12 + var(--holo, .3) * .24); }
.cback-photo { position: absolute; inset: 0; background: #0b0d13; border-radius: inherit; overflow: hidden; }
.cback-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* slab */
.slab { position: relative; padding: .75em .75em .8em; border-radius: .9em; background: linear-gradient(160deg, rgba(230, 240, 255, .42), rgba(200, 215, 235, .12) 35%, rgba(255, 255, 255, .22) 70%, rgba(190, 205, 225, .3)); box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .55), inset 0 0 0 .4em rgba(255, 255, 255, .1), inset 0 0 1.6em rgba(255, 255, 255, .22); }
.slab::before { content: ''; position: absolute; inset: .3em; border-radius: .7em; border: 1px solid rgba(255, 255, 255, .25); pointer-events: none; }
.slab-label { position: relative; display: flex; justify-content: space-between; gap: .5em; padding: .55em .7em; min-height: 4.6em; border-radius: .35em; background: linear-gradient(180deg, #fbfbf8, #eceee9); color: #15171c; box-shadow: inset 0 -.18em 0 var(--tc, #c22); }
.gr-bgs .slab-label { background: linear-gradient(180deg, #f2f4f7, #c9d0d9); box-shadow: inset 0 -.18em 0 #c9a54a; }
.sl-l { display: grid; align-content: center; gap: .1em; min-width: 0; }
.sl-l b, .sl-l span, .sl-l em { display: block; font-size: .62em; line-height: 1.25; font-weight: 800; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.sl-l span { font-size: .72em; }
.sl-l em { font-weight: 600; color: #4a4f5a; }
.sl-r { display: grid; justify-items: end; align-content: center; text-align: right; flex: none; }
.sl-r em { font-style: normal; font-size: .55em; font-weight: 800; letter-spacing: .06em; }
.sl-r strong { font-family: var(--display); font-weight: 400; font-size: 1.9em; line-height: 1; }
.sl-r span { font-size: .48em; font-weight: 700; color: #4a4f5a; letter-spacing: .04em; }
.slab-well { container-type: inline-size; margin-top: .6em; padding: .4em; border-radius: .45em; background: rgba(8, 10, 16, .35); box-shadow: inset 0 0 .6em rgba(0, 0, 0, .5); }
.slab-well .card { aspect-ratio: 5 / 7; height: auto; border-radius: .25em; }

/* ---- sports card ---- */
.sport .cd-bg { position: absolute; inset: 0; background: linear-gradient(160deg, var(--t1), #0c0e14 85%); z-index: -2; }
.sport .cd-pattern { position: absolute; inset: 0; z-index: -1; opacity: .8; }
.sport::after { content: ''; position: absolute; inset: 0; border: .55em solid var(--frame, rgba(255, 255, 255, .9)); border-radius: inherit; pointer-events: none; z-index: 3; box-shadow: inset 0 0 0 .14em var(--frame-in, var(--t2)); }
.cd-bigname { position: absolute; left: 0; right: 0; top: 2.6em; text-align: center; font-family: var(--display); font-size: min(6em, calc(30em / var(--nl))); line-height: 1; letter-spacing: .02em; color: transparent; -webkit-text-stroke: .025em rgba(255, 255, 255, .5); opacity: .9; white-space: nowrap; }
.cd-fig { position: absolute; left: 50%; bottom: 4.2em; width: 15.5em; translate: -50% 0; filter: drop-shadow(0 .5em .6em rgba(0, 0, 0, .5)); }
.cd-jersey { display: block; width: 100%; height: auto; }
.jy-num { font-family: var(--display); font-size: 74px; paint-order: stroke; }
.jy-num-s { font-family: var(--display); font-size: 30px; }
.jy-team { font-family: var(--display); font-size: 24px; letter-spacing: 2px; }
.jy-script { font-family: 'Mrs Saint Delafield', cursive; font-size: 52px; }
.cd-top { position: absolute; top: 1.1em; left: 1.1em; right: 1.1em; display: flex; justify-content: space-between; align-items: center; z-index: 4; }
.cd-set { font-family: var(--display); font-size: 1.15em; letter-spacing: .12em; color: #fff; text-shadow: 0 .1em .3em rgba(0, 0, 0, .6); max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-year { font-size: .8em; font-weight: 800; color: rgba(255, 255, 255, .85); }
.cd-rc { position: absolute; top: 3em; right: 1.2em; z-index: 4; width: 2.6em; height: 2.9em; display: grid; place-items: center; font-family: var(--display); font-size: 1em; color: #1a1300; background: linear-gradient(160deg, #fff4c4, #e7b53b 60%, #9a7419); clip-path: polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%); }
.cd-serial { position: absolute; right: 1.2em; bottom: 4.6em; z-index: 4; font-family: var(--display); font-size: 1.2em; letter-spacing: .05em; padding: .1em .45em; border-radius: .2em; color: #1a1300; background: linear-gradient(120deg, #fff4c4, #e7b53b 45%, #fff2b0 55%, #b58a22); box-shadow: 0 .1em .4em rgba(0, 0, 0, .4); }
.cd-plate { position: absolute; left: .55em; right: .55em; bottom: .55em; z-index: 2; padding: .7em .8em .6em; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85) 30%); display: grid; gap: .1em; }
.cd-plate b { font-family: var(--display); font-weight: 400; font-size: 1.55em; line-height: 1; letter-spacing: .03em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-plate span { font-size: .78em; font-weight: 800; letter-spacing: .14em; color: var(--t2); }
.cd-auto { position: absolute; left: 1.4em; right: 1.4em; bottom: 4.4em; z-index: 3; height: 3.6em; border-radius: .3em; background: linear-gradient(180deg, #fbf8ef, #ece6d4); box-shadow: 0 .15em .5em rgba(0, 0, 0, .4); display: grid; place-items: center; overflow: hidden; }
.cd-auto span { font-family: 'Mrs Saint Delafield', cursive; font-size: 2.6em; color: #1f3fbf; transform: rotate(-6deg); white-space: nowrap; line-height: 1; }
.has-auto .cd-fig { bottom: 6.5em; width: 13.5em; }
.cd-patch { position: absolute; left: 50%; top: 9em; translate: -50% 0; z-index: 3; width: 7.5em; height: 5.4em; border-radius: .5em; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr 1.4fr; box-shadow: 0 0 0 .25em #d9b25c, 0 0 0 .4em #3a2b08, 0 .3em .8em rgba(0, 0, 0, .6); }
.cd-patch i { background: repeating-linear-gradient(45deg, var(--p1) 0 .25em, color-mix(in srgb, var(--p1) 70%, #000) .25em .5em); }
.cd-patch i:nth-child(2) { background: repeating-linear-gradient(-45deg, var(--p2) 0 .25em, color-mix(in srgb, var(--p2) 70%, #000) .25em .5em); }
.cd-patch i:nth-child(3) { background: repeating-linear-gradient(90deg, #f2f2f2 0 .3em, #d0d0d0 .3em .6em); }
.has-patch .cd-fig { opacity: .35; }

/* product styles */
.st-prizm .cd-bg { background: radial-gradient(120% 80% at 50% 30%, #3a4150, #11141b 70%); }
.st-prizm .cd-pattern { background: repeating-conic-gradient(from 7deg at 50% 38%, rgba(255, 255, 255, .13) 0 3deg, transparent 3deg 9deg, rgba(255, 255, 255, .06) 9deg 11deg, transparent 11deg 17deg); }
.st-prizm { --frame: #c7ced8; --frame-in: rgba(255, 255, 255, .6); }
.st-optic .cd-bg { background: linear-gradient(118deg, var(--t1) 0 38%, #0d0f14 38% 62%, color-mix(in srgb, var(--t2) 60%, #000) 62%); }
.st-optic .cd-pattern { background: linear-gradient(118deg, transparent 35%, rgba(255, 255, 255, .28) 38%, transparent 41%, transparent 59%, rgba(255, 255, 255, .2) 62%, transparent 65%); }
.st-optic { --frame: #f4f6fa; }
.st-chrome .cd-bg { background: linear-gradient(165deg, #eef2f7 0%, #9aa6b4 35%, #f7f9fb 55%, #6e7a8a 100%); }
.st-chrome .cd-pattern { background: radial-gradient(90% 60% at 50% 45%, color-mix(in srgb, var(--t1) 85%, transparent), transparent 70%); opacity: .9; }
.st-chrome { --frame: color-mix(in srgb, var(--t1) 80%, #000); --frame-in: #dfe5ec; }
.st-chrome .cd-bigname { -webkit-text-stroke-color: rgba(255, 255, 255, .7); }
.st-select .cd-bg { background: linear-gradient(180deg, #0a0c12 0 34%, var(--t1) 34% 36%, #1a1e29 36% 70%, var(--t2) 70% 71%, #0a0c12 71%); }
.st-select .cd-pattern { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 .2em, transparent .2em 1.2em); }
.st-select { --frame: #b9c1cc; }
.st-mosaic .cd-bg { background: linear-gradient(160deg, var(--t1), #0e1016 80%); }
.st-mosaic .cd-pattern { background: repeating-conic-gradient(rgba(255, 255, 255, .12) 0 25%, transparent 0 50%) 0 0 / 1.6em 1.6em; mask: radial-gradient(100% 70% at 50% 40%, #000 30%, transparent 75%); -webkit-mask: radial-gradient(100% 70% at 50% 40%, #000 30%, transparent 75%); }
.st-mosaic { --frame: #d6dbe3; }
.st-base .cd-bg { background: linear-gradient(170deg, color-mix(in srgb, var(--t1) 90%, #fff) 0%, var(--t1) 50%, color-mix(in srgb, var(--t1) 60%, #000) 100%); }
.st-base .cd-pattern { background: radial-gradient(70% 50% at 50% 40%, rgba(255, 255, 255, .25), transparent 70%); }
.st-base { --frame: #fafafa; --frame-in: var(--t2); }
.st-vintage { --frame: #efe6cf; --frame-in: var(--t1); filter: sepia(.18) saturate(.9); }
.st-vintage .cd-bg { background: linear-gradient(180deg, color-mix(in srgb, var(--t2) 40%, #d8cfb4), color-mix(in srgb, var(--t1) 35%, #cfc4a5)); }
.st-vintage .cd-pattern { background: radial-gradient(rgba(0, 0, 0, .14) 22%, transparent 24%) 0 0 / .45em .45em; opacity: .55; }
.st-vintage::after { border-width: 1em; }
.st-vintage .cd-bigname { -webkit-text-stroke: 0; color: rgba(0, 0, 0, .12); }
.st-vintage .cd-plate { background: var(--t1); left: 1em; right: 1em; bottom: 1em; border-radius: .2em; }
.st-vintage .cd-top { top: 1.5em; left: 1.5em; right: 1.5em; }
.st-luxury .cd-bg { background: radial-gradient(120% 80% at 50% 25%, #1f2433, #07080c 70%); }
.st-luxury .cd-pattern { background: repeating-linear-gradient(135deg, rgba(217, 178, 92, .07) 0 .15em, transparent .15em .9em); }
.st-luxury { --frame: #0b0b0d; --frame-in: #d9b25c; }

/* parallels */
.pk-refractor .cd-pattern { background: repeating-linear-gradient(115deg, rgba(255, 94, 138, .35) 0, rgba(255, 211, 94, .35) 1.2em, rgba(99, 255, 176, .35) 2.4em, rgba(94, 200, 255, .35) 3.6em, rgba(179, 107, 255, .35) 4.8em, rgba(255, 94, 138, .35) 6em) !important; mix-blend-mode: screen; opacity: 1; }
.pk-color { --frame: var(--pc); }
.pk-color .cd-pattern { background: repeating-conic-gradient(from 7deg at 50% 38%, color-mix(in srgb, var(--pc) 55%, transparent) 0 3deg, transparent 3deg 9deg) !important; opacity: 1; }
.pk-color .cd-bg { background: radial-gradient(120% 80% at 50% 30%, color-mix(in srgb, var(--pc) 45%, #11141b), #090a0f 75%) !important; }
.pk-gold { --frame: #e7b53b; --frame-in: #fff2b0; }
.pk-gold .cd-bg { background: radial-gradient(120% 80% at 50% 30%, #6b5212, #1b1406 75%) !important; }
.pk-gold .cd-pattern { background: repeating-conic-gradient(from 7deg at 50% 38%, rgba(255, 220, 120, .35) 0 3deg, transparent 3deg 9deg) !important; opacity: 1; }
.pk-super { --frame: #e7b53b; --frame-in: #000; }
.pk-super .cd-bg { background: radial-gradient(120% 80% at 50% 30%, #222, #000 70%) !important; }
.pk-super .cd-pattern { background: repeating-conic-gradient(from 0deg at 50% 40%, #ffe38a 0 4deg, #a07a1c 4deg 8deg, #fff3c2 8deg 10deg, #6d5210 10deg 14deg) !important; opacity: .55; mix-blend-mode: screen; }
.pk-tiedye .cd-pattern { background: conic-gradient(from 30deg at 40% 40%, #ff5fd2, #ffd35e, #63ffb0, #5ec8ff, #b36bff, #ff5fd2) !important; opacity: .55; mix-blend-mode: screen; filter: blur(.6em); }
.pk-tiedye { --frame: #ff7ad9; }
.pk-auto { --frame-in: #e7b53b; }

/* ---- Pokémon-style TCG card ---- */
.poke { background: #cfd4dc; }
.poke.pk-vintage { background: linear-gradient(160deg, #f6d65a, #e9b929); }
.poke.tcg-gold { background: linear-gradient(160deg, #fff1b8, #d4a017 40%, #fff2c2 60%, #a87b0e); }
.pk-frame { position: absolute; inset: .85em; border-radius: .55em; overflow: hidden; display: flex; flex-direction: column; padding: .55em .7em .5em; background: linear-gradient(170deg, color-mix(in srgb, var(--y2) 70%, #fff), color-mix(in srgb, var(--y1) 55%, #fff) 60%, color-mix(in srgb, var(--y1) 80%, #000)); color: #15171c; }
.pk-head { display: flex; align-items: center; gap: .35em; min-height: 1.9em; }
.pk-name { font-size: 1.15em; font-weight: 800; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-hp { font-weight: 900; font-size: 1.05em; color: #b3121f; display: flex; align-items: baseline; gap: .1em; }
.pk-hp small { font-size: .55em; }
.pk-orb { width: 1.5em; height: 1.5em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--y1) 55%, color-mix(in srgb, var(--y1) 60%, #000)); display: grid; place-items: center; flex: none; box-shadow: 0 .05em .15em rgba(0, 0, 0, .4); }
.pk-orb .pk-emblem { width: 70%; height: 70%; fill: #fff; position: static; translate: none; filter: none; opacity: 1; }
.pk-art { position: relative; height: 11.4em; margin-top: .2em; border: .3em solid; border-color: #e8e3d2 #b9b29a #a59e86 #ded8c4; overflow: hidden; background: #222; box-shadow: 0 .1em .3em rgba(0, 0, 0, .3); }
.pk-art-bg { position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 60%, var(--y2), var(--y1) 55%, color-mix(in srgb, var(--y1) 50%, #000)); }
.type-fire .pk-art-bg { background: radial-gradient(60% 50% at 50% 78%, #fff2a8, #ffb340 30%, #ff4f1f 58%, #6d1300 100%); }
.type-water .pk-art-bg { background: repeating-radial-gradient(circle at 50% 120%, rgba(255, 255, 255, .18) 0 .3em, transparent .3em 1.4em), linear-gradient(180deg, #9fe3ff, #2b8bff 55%, #0b2f6b); }
.type-grass .pk-art-bg { background: radial-gradient(40% 30% at 25% 30%, rgba(200, 242, 122, .7), transparent), radial-gradient(40% 30% at 75% 70%, rgba(200, 242, 122, .5), transparent), linear-gradient(180deg, #c8f27a, #2fb85a 55%, #0d4a22); }
.type-lightning .pk-art-bg { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .2) 0 .5em, transparent .5em 1.6em), radial-gradient(70% 60% at 50% 50%, #fff7c2, #ffd21f 50%, #b37f00); }
.type-psychic .pk-art-bg { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .12) 0 10deg, transparent 10deg 20deg), radial-gradient(circle at 50% 50%, #ffc2f1, #a14bff 50%, #2b0b5e); }
.type-dark .pk-art-bg { background: radial-gradient(circle, #fff 0 .06em, transparent .09em) 0 0 / 1.3em 1.1em, radial-gradient(circle, rgba(255, 255, 255, .7) 0 .05em, transparent .08em) .6em .5em / 1.9em 1.7em, radial-gradient(80% 70% at 50% 40%, #3b4680, #10132a 70%); }
.type-dragon .pk-art-bg { background: radial-gradient(circle at 50% 0, transparent .9em, rgba(0, 0, 0, .18) .95em 1.1em, transparent 1.15em) 0 0 / 2em 1.2em, linear-gradient(160deg, #5ce0c8, #c49b2b 60%, #4d3a07); }
.type-fairy .pk-art-bg { background: radial-gradient(circle, #fff 0 .07em, transparent .1em) 0 0 / 1.2em 1.4em, radial-gradient(70% 60% at 50% 50%, #ffe3f3, #ff6fb7 60%, #8a1a52); }
.type-fighting .pk-art-bg { background: repeating-conic-gradient(from 0deg at 50% 60%, rgba(255, 255, 255, .14) 0 6deg, transparent 6deg 18deg), radial-gradient(circle at 50% 60%, #ffd2a8, #c0602b 55%, #4d1d05); }
.type-metal .pk-art-bg { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 .1em, transparent .1em .4em), linear-gradient(160deg, #f4f7fb, #8a97a8 50%, #3b4554); }
.type-colorless .pk-art-bg { background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255, 255, 255, .25) 0 8deg, transparent 8deg 20deg), radial-gradient(circle at 50% 55%, #ffffff, #c9ced8 55%, #6b7280); }
.pk-emblem { position: absolute; left: 50%; top: 50%; width: 52%; translate: -50% -50%; fill: rgba(255, 255, 255, .92); filter: drop-shadow(0 0 .6em var(--y2)) drop-shadow(0 .2em .4em rgba(0, 0, 0, .35)); }
.pk-sparkle { position: absolute; inset: 0; opacity: 0; }
.pk-holo .pk-sparkle, .pk-ultra .pk-sparkle, .pk-vintage .pk-sparkle { opacity: 1; background: radial-gradient(circle, rgba(255, 255, 255, .9) 0 .07em, transparent .1em) 0 0 / 1.1em 1.3em, radial-gradient(circle, rgba(255, 255, 255, .7) 0 .05em, transparent .08em) .5em .6em / 1.7em 1.5em, conic-gradient(from 0deg at 50% 50%, rgba(255, 0, 128, .25), rgba(0, 255, 200, .25), rgba(255, 220, 0, .25), rgba(120, 80, 255, .25), rgba(255, 0, 128, .25)); mix-blend-mode: screen; animation: twinkle 3s linear infinite; }
@keyframes twinkle { 50% { filter: hue-rotate(90deg) brightness(1.3); } }
.pk-strip { height: .9em; margin: .35em .3em 0; border-radius: .2em; background: linear-gradient(90deg, #c9b779, #f1e4b0, #c9b779); }
.pk-text { flex: 1; display: grid; align-content: center; gap: .6em; padding: .4em .3em; }
.pk-text i { display: block; height: .55em; border-radius: .3em; background: rgba(0, 0, 0, .18); }
.pk-text i:nth-child(2) { width: 88%; }
.pk-text i.s { width: 60%; }
.pk-foot { display: flex; justify-content: space-between; gap: .4em; font-size: .62em; font-weight: 800; color: rgba(0, 0, 0, .65); white-space: nowrap; }
.pk-foot span:first-child { overflow: hidden; text-overflow: ellipsis; }
.pk-1st { position: absolute; left: .9em; top: 13.2em; width: 2.4em; height: 2.4em; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; text-align: center; font-weight: 900; font-size: .8em; line-height: .9; box-shadow: 0 0 0 .15em #fff; }
.pk-1st small { display: block; font-size: .32em; letter-spacing: .02em; }
.pk-1st sup { font-size: .5em; }
.pk-reverse .pk-frame::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(120deg, rgba(255, 0, 128, .18) 0, rgba(0, 255, 200, .18) 1.4em, rgba(255, 220, 0, .18) 2.8em, rgba(255, 0, 128, .18) 4.2em); mix-blend-mode: overlay; pointer-events: none; }
/* full-art */
.pk-full .pk-frame { inset: .85em; padding: .6em .75em; background: none; color: #fff; }
.pk-full .pk-art { position: absolute; inset: 0; height: auto; margin: 0; border: 0; z-index: -1; }
.pk-full .pk-art-bg { background: radial-gradient(70% 45% at 50% 42%, var(--y2), transparent 70%), conic-gradient(from 200deg at 50% 45%, var(--y1), color-mix(in srgb, var(--y1) 40%, #000), var(--y2), var(--y1), color-mix(in srgb, var(--y2) 50%, #000), var(--y1)); }
.pk-full .pk-art::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(60deg, rgba(255, 255, 255, .08) 0 .12em, transparent .12em .5em), repeating-linear-gradient(-60deg, rgba(255, 255, 255, .06) 0 .12em, transparent .12em .5em); }
.pk-full .pk-emblem { width: 62%; top: 44%; }
.pk-full .pk-name, .pk-full .pk-foot { text-shadow: 0 .1em .3em rgba(0, 0, 0, .6); color: #fff; }
.pk-full .pk-hp { color: #fff; text-shadow: 0 .1em .3em rgba(0, 0, 0, .6); }
.pk-full .pk-text { align-content: end; }
.pk-full .pk-text i { background: rgba(255, 255, 255, .55); box-shadow: 0 .05em .2em rgba(0, 0, 0, .3); }
.tcg-gold .pk-art-bg { background: linear-gradient(160deg, #fff4c4, #d4a017 35%, #fff2c2 55%, #8f6a0c 100%) !important; }
.tcg-gold .pk-emblem { fill: rgba(255, 248, 220, .95); filter: drop-shadow(0 0 .3em #fff) drop-shadow(0 .15em .2em rgba(90, 60, 0, .6)); }
.pk-vintage .pk-frame { background: linear-gradient(170deg, color-mix(in srgb, var(--y2) 55%, #fff), color-mix(in srgb, var(--y1) 45%, #fff)); }
.pk-vintage .pk-art { border-color: #c9c9c9 #9a9a9a #8a8a8a #bdbdbd; }

/* ---- card back ---- */
.cback { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 40%, #1b2134, #07080c 75%); border-radius: inherit; overflow: hidden; display: grid; place-items: center; box-shadow: inset 0 0 0 .55em #0e111a, inset 0 0 0 .7em rgba(255, 204, 77, .55); }
.cb-pattern { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 .15em, transparent .15em 1.2em), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .04) 0 .15em, transparent .15em 1.2em); }
.cb-ring { position: absolute; width: 13em; height: 13em; border-radius: 50%; border: .25em solid rgba(255, 204, 77, .5); box-shadow: 0 0 2em rgba(255, 61, 139, .35), inset 0 0 2em rgba(255, 61, 139, .25); }
.cb-logo { position: relative; font-family: var(--display); font-size: 5.4em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 .2em rgba(255, 61, 139, .5)); }
.cb-word { position: absolute; bottom: 3.2em; font-family: var(--display); letter-spacing: .5em; padding-left: .5em; font-size: 1.1em; color: rgba(255, 255, 255, .55); }

/* ============ rip overlay ============ */
.rip { position: fixed; inset: 0; z-index: 200; overflow: hidden; touch-action: none; }
.rip-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 24%, #0b0d14) 0%, #05060a 62%); transition: filter .5s; }
.rip.dim .rip-bg { filter: brightness(.45) saturate(1.4); }
.rip-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 20; }
.rip-wash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 44%, var(--tc, #fff), transparent 62%); opacity: 0; pointer-events: none; mix-blend-mode: screen; z-index: 2; }
.rip.jackpot .rip-bg { animation: hue 2.4s linear infinite; }
.rip-slam { position: absolute; left: 0; right: 0; top: 9%; z-index: 12; text-align: center; font-family: var(--display); font-size: clamp(52px, 14vw, 128px); line-height: 1; letter-spacing: .02em; color: #fff; -webkit-text-stroke: 2px color-mix(in srgb, var(--tc) 55%, #fff); text-shadow: 0 0 .25em var(--tc), 0 0 .9em var(--tc), 0 .06em 0 rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; }
.rip-mult { font-family: var(--display); font-size: 22px; line-height: 1; padding: 6px 12px; border-radius: 999px; background: linear-gradient(180deg, #4ff09b, #1fb866); color: #032412; box-shadow: 0 0 24px rgba(49, 214, 123, .65); align-self: center; }
.rip-comp { font-size: 12.5px; font-weight: 700; color: var(--green); }
.rip-comp.est { color: var(--muted); font-weight: 600; }
.rip-x { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 30; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .35); cursor: pointer; font-size: 16px; }
.rip-skip { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 14px; z-index: 30; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .35); cursor: pointer; font-weight: 700; }
.rip-stage { position: absolute; inset: 0; }
.rip-packslot { position: absolute; left: 50%; top: 44%; translate: -50% -50%; z-index: 4; }
.rip-pack { cursor: grab; }
.rip-pack:active { cursor: grabbing; }
.rip-stack { position: absolute; inset: 0; z-index: 3; }
.rip-cw { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); opacity: 0; cursor: pointer; will-change: transform; }
.rip-cw.active { z-index: 200 !important; }
.rip-card .c3d-back { box-shadow: 0 1.2em 2.4em rgba(0, 0, 0, .5); transition: box-shadow .4s; }
.rip-card.tease .c3d-back { box-shadow: 0 0 1.4em .1em color-mix(in srgb, var(--tc) 70%, transparent), 0 1.2em 2.4em rgba(0, 0, 0, .5); animation: tease 1.4s ease-in-out infinite; }
@keyframes tease { 50% { box-shadow: 0 0 2.6em .5em color-mix(in srgb, var(--tc) 80%, transparent), 0 1.2em 2.4em rgba(0, 0, 0, .5); } }
.rip-card.climbing .c3d-back { box-shadow: 0 0 2em .4em var(--tc), 0 0 6em 1.6em color-mix(in srgb, var(--tc) 45%, transparent); transition: box-shadow .12s; }
.rip-card.climbing .cb-ring { border-color: var(--tc); box-shadow: 0 0 2em var(--tc), inset 0 0 2em var(--tc); }
.rip-card.charging .c3d-back { box-shadow: 0 0 3em 1em var(--tc), 0 0 8em 3em color-mix(in srgb, var(--tc) 50%, transparent); }
.rip-card.charging .cb-ring { animation: spin .6s linear infinite; border-color: var(--tc); }
.rip-rays { position: absolute; left: 50%; top: 44%; width: 170vmax; height: 170vmax; translate: -50% -50%; opacity: 0; transition: opacity .5s; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 38%, transparent) 0 5deg, transparent 5deg 15deg); mask: radial-gradient(circle, #000 0 8%, transparent 45%); -webkit-mask: radial-gradient(circle, #000 0 8%, transparent 45%); animation: spin 14s linear infinite; z-index: 1; }
.rip-rays.on { opacity: 1; }
.rip-hint { position: absolute; left: 0; right: 0; bottom: calc(40px + env(safe-area-inset-bottom)); z-index: 6; display: grid; justify-items: center; gap: 14px; text-align: center; transition: opacity .3s, transform .3s; }
.rip-hint-t { font-weight: 700; color: rgba(255, 255, 255, .8); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.rip-hint.gone { opacity: 0; transform: translateY(20px); pointer-events: none; }
.rip-info { position: absolute; left: 16px; right: 16px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 10; display: grid; justify-items: center; gap: 8px; text-align: center; }
.rip-prompt { font-weight: 700; color: rgba(255, 255, 255, .75); animation: pulse 1.6s ease-in-out infinite; }
.rip-title { font-weight: 800; font-size: 16px; max-width: 520px; }
.rip-value { display: flex; align-items: center; gap: 10px; }
.rv-n { font-family: var(--display); font-size: 40px; line-height: 1; background: linear-gradient(180deg, #fff, var(--tc)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.rip-value small { color: var(--muted); font-weight: 600; }
.rip-tray { position: absolute; top: calc(22px + env(safe-area-inset-top)); left: 50%; translate: -50% 0; z-index: 10; display: flex; gap: 8px; }
.tray-dot { width: 14px; height: 20px; border-radius: 3px; background: var(--tc); box-shadow: 0 0 12px var(--tc); animation: pop .3s ease-out; }
@keyframes pop { from { transform: scale(0); } }
.rip-summary { position: absolute; inset: 0; z-index: 15; overflow-y: auto; padding: calc(70px + env(safe-area-inset-top)) 16px calc(30px + env(safe-area-inset-bottom)); display: none; flex-direction: column; align-items: center; gap: 18px; }
.rip-summary.on { display: flex; }
.sum-head { text-align: center; display: grid; gap: 4px; }
.sum-total { font-family: var(--display); font-size: 44px; line-height: 1; }
.sum-total small { display: block; font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.sum-net { font-weight: 800; font-size: 14px; }
.sum-net.up { color: var(--green); }
.sum-net.down { color: var(--muted); }
.sum-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 14px; max-width: 1000px; }
.sum-item { display: grid; justify-items: center; gap: 10px; transition: opacity .3s, filter .3s; }
.sum-item.sold { opacity: .45; filter: grayscale(.8); }
.sum-meta { display: grid; justify-items: center; gap: 4px; text-align: center; max-width: 100%; }
.sum-grid:not(.single) .sum-meta { width: 100%; }
.sum-title { font-weight: 700; font-size: 13px; max-width: 320px; }
.single .sum-title { font-size: 16px; }
.sum-fmv { font-family: var(--display); font-size: 22px; }
.single .sum-fmv { font-size: 34px; }
.sum-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sum-note { max-width: 520px; text-align: center; font-size: 12px; color: var(--muted); margin: 0; }

/* ============ pack modal ============ */
.pm { display: grid; grid-template-columns: 290px 1fr; gap: 30px; }
.pm-left { display: grid; justify-items: center; align-content: start; gap: 16px; position: sticky; top: 0; }
.pm-pack { padding: 10px 0; }
.pm-buy { display: grid; gap: 10px; width: 100%; }
.pm-bal { font-size: 13px; color: var(--muted); }
.pm-right { min-width: 0; }
.pm-right h2 { font-family: var(--display); font-weight: 400; font-size: 40px; margin: 6px 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.pm-price { font-size: 26px; color: var(--gold); }
.pm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.pm-stats div { padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 2px; }
.pm-stats small { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.pm-stats b { font-size: 16px; }
.odds { width: 100%; border-collapse: collapse; font-size: 14px; }
.odds th { text-align: left; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; padding: 6px 10px; }
.odds td { padding: 9px 10px; border-top: 1px solid var(--line); }
.odds tr td:first-child { font-weight: 800; color: var(--tc); }
.chase { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 12px; scrollbar-width: thin; }
.chase-item { flex: none; display: grid; justify-items: center; gap: 4px; cursor: pointer; }
.chase-item > b { font-size: 14px; }
.chase-item > small { font-size: 11px; color: var(--muted); }
@media (max-width: 760px) {
  .pm { grid-template-columns: 1fr; gap: 16px; }
  .pm-left { position: static; }
  .pm-pack .pack3d { --w: 170px !important; }
  .pm-buy { grid-template-columns: repeat(3, 1fr); }
  .pm-buy .btn { padding: 8px 6px; font-size: 13px; white-space: normal; line-height: 1.15; }
  .pm-right { min-width: 0; }
.pm-right h2 { font-size: 32px; }
}

/* ============ pages ============ */
.page { padding: 30px 0; }
.page.narrow { max-width: 760px; margin: 0 auto; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 20px; }
.page-head p { margin: 0; max-width: 560px; }
.sub { margin: 30px 0 12px; }
.vault-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.vault-stats div { padding: 10px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); display: grid; }
.vault-stats small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.vault-stats b { font-size: 18px; }
.vault-bar { position: sticky; top: 62px; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 16px; border-radius: 16px; background: rgba(18, 21, 30, .9); backdrop-filter: blur(10px); border: 1px solid var(--line); }
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px 14px; }
.v-item { position: relative; display: grid; justify-items: center; gap: 8px; padding: 12px 8px; border-radius: 16px; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.v-item.sel { background: rgba(49, 214, 123, .07); border-color: rgba(49, 214, 123, .5); }
.v-item .c3d { cursor: pointer; }
.v-check { position: absolute; top: 4px; right: 4px; z-index: 6; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .5); cursor: pointer; }
.v-item.sel .v-check { background: var(--green); border-color: var(--green); }
.v-item.sel .v-check::after { content: '✓'; color: #032412; font-weight: 900; }
.v-meta { width: 100%; display: grid; gap: 3px; }
.v-name { font-size: 12.5px; font-weight: 700; line-height: 1.3; min-height: 2.6em; max-height: 2.6em; }
.v-meta .tier-pill { justify-self: start; }
.v-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12px; }
.v-row b { font-size: 15px; }
.v-timer { font-size: 11px; color: var(--muted); }
@media (max-width: 520px) {
  .vault-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
  .v-item .c3d { --w: 140px !important; }
  .vault-bar { top: 58px; }
}
.acct-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kpi { padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 2px; }
.kpi small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.kpi b { font-size: 22px; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12px; color: var(--muted); }
.verify-out { margin-top: 16px; }
.verify-card { display: flex; gap: 16px; align-items: center; }

/* inspector */
.inspect { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; }
.ins-card { display: grid; place-items: center; padding: 10px; }
.ins-info h2 { font-size: 20px; margin: 10px 0; }
.ins-fmv { font-family: var(--display); font-size: 44px; line-height: 1; display: flex; align-items: baseline; gap: 10px; }
.ins-fmv small { font-family: var(--font); font-size: 13px; color: var(--muted); }
.ins-dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0; }
.ins-dl div { padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.ins-dl dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.ins-dl dd { margin: 0; font-weight: 700; }
.ins-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) { .inspect { grid-template-columns: 1fr; gap: 10px; } }
.auth .seg { display: flex; margin-bottom: 16px; }
.auth .seg button { flex: 1; }
.wallet { display: grid; gap: 16px; }
.wallet .seg { display: flex; }
.wallet .seg button { flex: 1; }
.w-bal { font-family: var(--display); font-size: 40px; line-height: 1; }
.w-bal small { display: block; font-family: var(--font); font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.badge[hidden] { display: none; }
@media (max-width: 520px) {
  .odds th:nth-child(4), .odds td:nth-child(4) { display: none; }
  .odds td, .odds th { padding: 8px 6px; }
}

/* ============ v2 additions ============ */
.balance.up { animation: balUp .9s ease-out; }
.balance.down { animation: balDown .6s ease-out; }
@keyframes balUp { 0% { box-shadow: 0 0 0 0 rgba(49, 214, 123, .7); transform: scale(1); } 30% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(49, 214, 123, 0); } 100% { transform: scale(1); } }
@keyframes balDown { 30% { transform: scale(.96); } }
.pm-pack { position: relative; display: grid; justify-items: center; gap: 22px; padding-bottom: 6px; }
.pm-spin-hint { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: .8; }
.ins-card { display: grid; justify-items: center; gap: 14px; }
.comp-badge { font-style: normal; font-size: 10px; font-weight: 800; color: var(--green); letter-spacing: .04em; }
.comp { display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; background: rgba(49, 214, 123, .08); border: 1px solid rgba(49, 214, 123, .35); margin-bottom: 8px; }
.comp b { color: var(--green); }
.comp span { font-size: 12.5px; color: var(--muted); }
.comp a { font-size: 12.5px; font-weight: 700; color: var(--text); }
.comp.est { background: rgba(255, 255, 255, .04); border-color: var(--line-2); }
.comp.est b { color: var(--muted); }
details.inv { margin-top: 12px; }
details.inv summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.tbl a { color: var(--text); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
.btn { transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), filter .15s, background .15s, opacity .15s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.95); }
.btn-glow:hover { box-shadow: 0 14px 40px rgba(255, 61, 139, .5), inset 0 1px 0 rgba(255, 255, 255, .4); }
.pack-tile { transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), border-color .25s, box-shadow .25s; }
.pack-tile:hover { transform: translateY(-6px) scale(1.015); }
.pack-tile:active { transform: scale(.97); }
.rip-cw .c3d { cursor: grab; }
.pack3d .holo { opacity: .2; }
.pack3d.tilting .holo, .pack3d.grabbing .holo { opacity: .32; }
.pack3d .p3-back .holo { opacity: .14; }
.c3d img, .pack3d img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.ph-list { display: grid; gap: 8px; }
.ph-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.ph-thumb { width: 56px; height: 90px; border-radius: 8px; overflow: hidden; background: #0b0d13; display: grid; place-items: center; font-size: 10px; color: var(--muted); text-align: center; }
.ph-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ph-info { display: grid; gap: 2px; min-width: 0; }
.ph-info b { font-size: 13.5px; }
.ph-info span { font-size: 12px; color: var(--muted); }
.ph-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.ph-psa { display: flex; gap: 6px; }
.ph-psa input { width: 130px; min-height: 34px; padding: 6px 10px; font-size: 14px; }
@media (max-width: 760px) { .ph-row { grid-template-columns: 56px minmax(0, 1fr); } .ph-actions { grid-column: 1 / -1; justify-content: flex-start; } }
.ph-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 4px; color: var(--text); }
.banner-btn { display: inline-block; margin-left: 6px; padding: 4px 12px; border-radius: 999px; background: var(--grad); color: #1a0710; font-weight: 800; text-decoration: none; }

/* ============ card art v3: arena, spotlight, rays, metallic plates ============ */
@property --fa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes fa { to { --fa: 360deg; } }
.cd-field { position: absolute; left: -10%; right: -10%; top: 30%; bottom: -6%; z-index: -1; color: color-mix(in srgb, var(--pc) 70%, #fff); opacity: .28; transform: perspective(26em) rotateX(48deg); transform-origin: 50% 100%; }
.cd-field svg { width: 100%; height: 100%; display: block; }
.st-vintage .cd-field { opacity: .12; color: var(--t1); }
.cd-rays { position: absolute; left: 50%; top: 46%; width: 44em; height: 44em; translate: -50% -50%; z-index: -1; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .16) 0 3deg, transparent 3deg 13deg); mask: radial-gradient(circle, #000 0 10%, transparent 42%); -webkit-mask: radial-gradient(circle, #000 0 10%, transparent 42%); opacity: calc(.25 + var(--holo, .3) * .6); animation: spin 28s linear infinite; animation-play-state: paused; }
.cd-spot { position: absolute; inset: 0; z-index: -1; background: radial-gradient(52% 40% at 50% 50%, color-mix(in srgb, var(--pc) 60%, transparent), transparent 70%); mix-blend-mode: screen; opacity: calc(.45 + var(--holo, .3) * .5); }
.inview .cd-rays, .full .cd-rays, .tilting .cd-rays, .auto-shine .cd-rays { animation-play-state: running; }
.cd-fig { filter: drop-shadow(0 0 .45em color-mix(in srgb, var(--pc) 75%, transparent)) drop-shadow(0 .5em .6em rgba(0, 0, 0, .55)); }
.cd-plate b { background: linear-gradient(180deg, #ffffff 0%, #e6ecf3 42%, #97a3b2 52%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .06em .04em rgba(0, 0, 0, .7)); }
.pk-gold .cd-plate b, .pk-super .cd-plate b, .pk-auto .cd-plate b { background-image: linear-gradient(180deg, #fff7d1 0%, #ffd56a 40%, #a8760f 55%, #fff1b0 100%); }
.pk-tiedye .cd-plate b, .tier-jackpot .cd-plate b { background-image: linear-gradient(90deg, #ff4f8b, #ffd25a, #4fffb0, #5aa8ff, #c16bff); }

/* ---- Pokémon art: living type scenes ---- */
.pk-fx { position: absolute; inset: -20%; opacity: .55; pointer-events: none; animation-play-state: paused; }
.pk-aura { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--y2) 85%, #fff), transparent 65%); filter: blur(.4em); opacity: .7; animation: aura 2.6s ease-in-out infinite; animation-play-state: paused; }
@keyframes aura { 50% { opacity: 1; scale: 1.15; } }
.inview .pk-fx, .full .pk-fx, .inview .pk-aura, .full .pk-aura, .auto-shine .pk-fx, .auto-shine .pk-aura { animation-play-state: running; }
.inview .pk-emblem, .full .pk-emblem { animation: emblem 2.6s ease-in-out infinite; }
@keyframes emblem { 50% { scale: 1.06; filter: drop-shadow(0 0 1em var(--y2)) drop-shadow(0 .2em .4em rgba(0, 0, 0, .35)); } }
.type-fire .pk-fx { background: radial-gradient(18% 30% at 20% 100%, #ffd25a, transparent 70%), radial-gradient(14% 26% at 55% 100%, #ff7a1f, transparent 70%), radial-gradient(16% 34% at 82% 100%, #ffb340, transparent 70%); animation: flames 1.6s ease-in-out infinite alternate; }
@keyframes flames { from { transform: translateY(6%) scaleY(.9); opacity: .45; } to { transform: translateY(-4%) scaleY(1.15); opacity: .8; } }
.type-water .pk-fx { background: repeating-radial-gradient(ellipse at 50% 140%, rgba(255, 255, 255, .25) 0 .25em, transparent .25em 1.1em); animation: tide 4s linear infinite; }
@keyframes tide { to { transform: translateY(-1.1em); } }
.type-lightning .pk-fx { background: linear-gradient(115deg, transparent 45%, #fffbd1 48%, transparent 51%), linear-gradient(65deg, transparent 60%, #fff6a6 62%, transparent 64%); animation: zap 1.8s steps(1) infinite; }
@keyframes zap { 0%, 100% { opacity: 0; } 8% { opacity: .9; } 12% { opacity: .1; } 16% { opacity: .8; } 22% { opacity: 0; } 60% { opacity: 0; } 63% { opacity: .7; } 66% { opacity: 0; } }
.type-psychic .pk-fx, .type-dark .pk-fx, .type-fairy .pk-fx, .type-dragon .pk-fx { background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--y2) 45%, transparent) 0 8deg, transparent 8deg 24deg); mask: radial-gradient(circle, #000 0 20%, transparent 60%); -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 60%); animation: spin 14s linear infinite; }
.type-grass .pk-fx, .type-colorless .pk-fx, .type-fighting .pk-fx, .type-metal .pk-fx { background: radial-gradient(circle, rgba(255, 255, 255, .5) 0 .08em, transparent .12em) 0 0 / 1.6em 1.6em; animation: tide 6s linear infinite; }

/* ---- rarity frames: the frame itself tells you what you pulled ---- */
.c3d[class*="tier-"] .c3d-front::before { content: ''; position: absolute; inset: 0; z-index: 7; border-radius: inherit; padding: .26em; pointer-events: none; background: transparent; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.c3d.tier-uncommon .c3d-front::before { background: linear-gradient(160deg, #b6ffd5, #3ddc84 50%, #1a8f52); padding: .18em; }
.c3d.tier-rare .c3d-front::before { background: linear-gradient(160deg, #d4ecff, #3b9dff 45%, #9fd0ff 60%, #1d5fb8); }
.c3d.tier-epic .c3d-front::before { background: conic-gradient(from var(--fa), #a259ff, #ff7ad9, #e2c7ff, #a259ff); }
.c3d.tier-legendary .c3d-front::before { background: conic-gradient(from var(--fa), #fff6cc, #ffb800, #8a5a00, #ffe17a, #fff6cc, #ffb800, #fff6cc); padding: .34em; }
.c3d.tier-grail .c3d-front::before { background: conic-gradient(from var(--fa), #ff3b5c, #ffd23f, #fff, #ff3b5c, #ff7a3d, #ff3b5c); padding: .38em; }
.c3d.tier-jackpot .c3d-front::before { background: conic-gradient(from var(--fa), #ff4f8b, #ffd25a, #4fffb0, #5aa8ff, #c16bff, #ff4f8b); padding: .42em; }
.c3d.tier-epic .c3d-front::before, .c3d.tier-legendary .c3d-front::before, .c3d.tier-grail .c3d-front::before, .c3d.tier-jackpot .c3d-front::before { animation: fa 3.2s linear infinite; animation-play-state: paused; }
.c3d.inview .c3d-front::before, .c3d.full .c3d-front::before { animation-play-state: running; }
.c3d.tier-legendary .c3d-front, .c3d.tier-grail .c3d-front, .c3d.tier-jackpot .c3d-front { box-shadow: 0 0 1.4em .1em color-mix(in srgb, var(--tc) 70%, transparent), 0 1.2em 2.4em rgba(0, 0, 0, .5); }
.face-down .c3d-front::before { display: none; }

/* ================= casino ================= */
[hidden] { display: none !important; }
@media (max-width: 1120px) and (min-width: 761px) { .nav a { padding: 8px 10px; font-size: 13px; } .logo-word { display: none; } }

/* lobby tiles */
.casino-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 26px; }
.ctile { position: relative; display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 22px; text-decoration: none; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); min-height: 132px; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), box-shadow .25s; isolation: isolate; }
.ctile:hover { transform: translateY(-3px); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.ctile:active { transform: scale(.98); }
.ctile.bj { background: radial-gradient(120% 140% at 15% 0%, #1d7a4b 0%, #0d3f27 55%, #072116 100%); }
.ctile.rl { background: radial-gradient(120% 140% at 15% 0%, #7a1d2c 0%, #3f0d16 55%, #1d060b 100%); }
.ctile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .12) 45%, transparent 60%); transform: translateX(-100%); animation: ct-sheen 4.5s ease-in-out infinite; }
.ctile.rl::after { animation-delay: 2.2s; }
@keyframes ct-sheen { 0%, 60% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.ct-copy h2 { font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: .02em; margin: 2px 0; }
.ct-copy p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 13.5px; }
.ct-copy .eyebrow { color: rgba(255, 255, 255, .6); }
.ct-go { margin-left: auto; padding: 10px 18px; border-radius: 999px; background: var(--grad); color: #1a0710; font-weight: 800; box-shadow: 0 8px 24px rgba(255, 61, 139, .35); }
.ct-art { position: relative; width: 92px; height: 92px; flex: none; }
.ct-card { position: absolute; width: 52px; height: 72px; border-radius: 7px; background: #fbfaf6; color: #15171d; font: 800 20px/1 var(--font); padding: 6px 7px; box-shadow: 0 8px 18px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 2px; }
.ct-card i { font-style: normal; font-size: 18px; }
.ct-card.red { color: #d01f3b; }
.ct-card.c1 { left: 6px; top: 12px; transform: rotate(-12deg); animation: ct-bob 3s ease-in-out infinite; }
.ct-card.c2 { left: 34px; top: 6px; transform: rotate(10deg); animation: ct-bob 3s ease-in-out .4s infinite; }
@keyframes ct-bob { 50% { translate: 0 -5px; } }
.ct-wheel { position: absolute; inset: 4px; border-radius: 50%; background: repeating-conic-gradient(#c8102e 0 9.73deg, #14161c 9.73deg 19.46deg); box-shadow: 0 0 0 4px #c9a13c, 0 0 0 7px #3d1e0e, 0 10px 24px rgba(0, 0, 0, .5); animation: ct-spin 7s linear infinite; }
.ct-wheel::after { content: ''; position: absolute; inset: 26%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6b3a1f, #1e0e06); box-shadow: 0 0 0 2px #c9a13c; }
.ct-ball { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9aa0ad); animation: ct-orbit 2.4s linear infinite; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
@keyframes ct-orbit { from { transform: rotate(0deg) translateY(-36px); } to { transform: rotate(-360deg) translateY(-36px); } }
@media (max-width: 760px) {
  .casino-tiles { grid-template-columns: 1fr; gap: 12px; }
  .ctile { min-height: 108px; padding: 16px; gap: 14px; }
  .ct-art { width: 76px; height: 76px; transform: scale(.85); transform-origin: left center; }
  .ct-copy h2 { font-size: 28px; }
}

/* page frame */
.casino { padding: 24px 0 10px; }
.casino-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.casino-head h1 { margin: 0; }
.casino-limits { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.casino-limits span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: #d8deea; }
.casino-fine { text-align: center; color: var(--muted); font-size: 12px; margin: 14px 0 0; }

/* chips */
.cchip { --cs: 46px; position: relative; display: inline-grid; place-items: center; width: var(--cs); height: var(--cs); border-radius: 50%; flex: none; color: var(--cf);
  background:
    radial-gradient(circle, var(--cc) 0 55%, transparent 56%),
    repeating-conic-gradient(from 7deg, rgba(255, 255, 255, .92) 0 14deg, var(--cc) 14deg 45deg);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 3px 8px rgba(0, 0, 0, .45); user-select: none; -webkit-user-select: none; }
.cchip::before { content: ''; position: absolute; inset: 21%; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--cf) 55%, transparent); }
.cchip b { position: relative; font: 900 calc(var(--cs) * .28)/1 var(--font); letter-spacing: -.02em; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.chip-rack { display: flex; gap: 8px; justify-content: center; padding: 6px 4px 10px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chip-rack::-webkit-scrollbar { display: none; }
.cchip.rack { --cs: 50px; cursor: pointer; transition: transform .22s cubic-bezier(.3, 1.8, .5, 1), box-shadow .2s, filter .2s; }
.cchip.rack:hover { transform: translateY(-4px); }
.cchip.rack:active { transform: scale(.9); }
.cchip.rack.on { transform: translateY(-6px) scale(1.08); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 3px #fff, 0 0 22px 4px rgba(255, 204, 77, .6), 0 10px 18px rgba(0, 0, 0, .5); }
.cchip.rack:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.chip-fly { position: fixed; z-index: 450; pointer-events: none; will-change: transform; }
.chip-fly .cchip { --cs: 40px; box-shadow: 0 10px 20px rgba(0, 0, 0, .5); }
.cstack { position: relative; width: 52px; height: 52px; }
.cstack .cchip.in-stack { --cs: 48px; position: absolute; left: 2px; bottom: calc(var(--i) * 4px); }
.bet-bar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* playing cards */
.pc { position: relative; width: var(--cw); height: calc(var(--cw) * 1.4); flex: none; perspective: 900px; will-change: transform; }
.pc + .pc { margin-left: calc(var(--cw) * -.58); }
.bj-dealer .pc + .pc { margin-left: calc(var(--cw) * -.35); }
.pc.new { opacity: 0; }
.pc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: none; }
.pc.down .pc-in { transform: rotateY(180deg); }
.pc-f, .pc-b { position: absolute; inset: 0; border-radius: calc(var(--cw) * .09); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3); overflow: hidden; }
.pc-f { background: linear-gradient(160deg, #ffffff, #f4f1e8); color: #15171d; border: 1px solid rgba(0, 0, 0, .12); }
.pc.red .pc-f { color: #d01f3b; }
.pc-b { transform: rotateY(180deg); background: radial-gradient(circle at 50% 50%, #ff3d8b22, transparent 60%), repeating-linear-gradient(45deg, #b3123e 0 5px, #8c0d30 5px 10px); border: 3px solid #fbfaf6; display: grid; place-items: center; }
.pc-b span { font: 400 calc(var(--cw) * .3) var(--display); color: #fff; padding: 4px 6px; border-radius: 6px; background: rgba(0, 0, 0, .35); border: 1.5px solid rgba(255, 255, 255, .6); letter-spacing: .04em; }
.pc-corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .95; }
.pc-corner b { font: 800 calc(var(--cw) * .22)/1 var(--font); letter-spacing: -.04em; }
.pc-corner i { font-style: normal; font-size: calc(var(--cw) * .17); }
.pc-corner.tl { left: 6%; top: 4%; }
.pc-corner.br { right: 6%; bottom: 4%; transform: rotate(180deg); }
.pc-pips { position: absolute; left: 22%; right: 22%; top: 15%; bottom: 15%; }
.pc-pips i { position: absolute; transform: translate(-50%, -50%); font-style: normal; font-size: calc(var(--cw) * .2); line-height: 1; }
.pc-pips i.dn { transform: translate(-50%, -50%) rotate(180deg); }
.pc-ace { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .62); line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, .08); }
.pc-court { position: absolute; left: 18%; right: 18%; top: 14%; bottom: 14%; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border: 1.5px solid currentColor;
  background: linear-gradient(160deg, rgba(255, 204, 77, .35), rgba(255, 204, 77, .05) 50%, rgba(255, 61, 139, .12)); }
.pc-court svg { width: 56%; height: auto; color: #c9a13c; margin-bottom: -2px; }
.pc-court b { font: 400 calc(var(--cw) * .44)/1 var(--display); }
.pc-court i { font-style: normal; font-size: calc(var(--cw) * .18); }
.pc.reveal .pc-f { box-shadow: 0 0 0 2px rgba(255, 228, 160, .7), 0 8px 18px rgba(0, 0, 0, .45); }

/* wallet payment methods */
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-m { display: grid; justify-items: start; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--panel); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s cubic-bezier(.3, 1.8, .5, 1); }
.pay-m svg { width: 26px; height: 26px; color: var(--muted); }
.pay-m b { font-size: 14.5px; }
.pay-m small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.pay-m.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 204, 77, .18), 0 10px 26px rgba(255, 204, 77, .14); }
.pay-m.on svg { color: var(--gold); }
.pay-m:active { transform: scale(.97); }
@media (max-width: 420px) { .pay-methods { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ctile::after, .ct-wheel, .ct-ball, .ct-card, .spin-btn, .bj-hand.empty .bj-spot { animation: none !important; } }


/* ================= game screens ================= */
.game-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px 14px 0 0; background: var(--panel); border: 1px solid var(--line); border-bottom: 0; font-size: 15px; }
.game-bar b { font-weight: 800; letter-spacing: .01em; }
.gb-info { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--muted); background: none; color: var(--muted); font: 800 13px/1 var(--font); cursor: pointer; display: grid; place-items: center; }
.gb-info:hover { color: var(--text); border-color: var(--text); }
.gb-fair { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; font-size: 14px; color: #d8deea; }
.gb-fair svg { width: 18px; height: 18px; color: var(--green); }
.gb-fair:hover { color: #fff; }

/* ===== blackjack ===== */
.gbj { --cw: clamp(54px, 6vw, 80px); }
.gbj-stage { position: relative; height: clamp(500px, 44vw, 600px); background: radial-gradient(90% 80% at 50% 45%, #15121f 0%, #0d0e15 60%, #090a0f 100%); border: 1px solid var(--line); border-top: 0; overflow: hidden; isolation: isolate; }
.gbj-oval { position: absolute; inset: 7% 13%; border-radius: 999px; border: 2px solid rgba(255, 204, 77, .2); box-shadow: 0 0 0 10px rgba(255, 204, 77, .025), inset 0 0 80px rgba(255, 61, 139, .06), inset 0 0 0 1px rgba(255, 255, 255, .03); background: radial-gradient(60% 60% at 50% 50%, rgba(255, 61, 139, .05), transparent 70%); pointer-events: none; z-index: -1; }
.gbj-stage .bj-shoe { position: absolute; right: 4%; top: 7%; width: 64px; height: 48px; border-radius: 8px 8px 6px 6px; background: linear-gradient(180deg, #2c2f38, #12141a); box-shadow: 0 6px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .15); transform: rotate(8deg); }
.gbj-stage .bj-shoe span { position: absolute; left: 8px; right: 8px; top: -10px; height: 24px; border-radius: 4px; background: repeating-linear-gradient(90deg, #b3123e 0 2px, #8c0d30 2px 4px); box-shadow: 0 -2px 0 #fff inset; transform: skewX(-12deg); }
.gbj-stage .bj-dealer { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gbj-stage .bj-cards { display: flex; justify-content: center; min-height: calc(var(--cw) * 1.4); }
.gbj-ribbons { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -62%); display: grid; justify-items: center; gap: 6px; pointer-events: none; transition: opacity .3s; }
.rib { font: 800 13px/1 var(--font); letter-spacing: .14em; white-space: nowrap; }
.rib.main { padding: 13px 52px; color: #ffe3a3; background: linear-gradient(90deg, rgba(255, 204, 77, .14), rgba(255, 61, 139, .16)); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); }
.rib.sub { padding: 12px 40px; color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .05); clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%); font-size: 12px; }
.gbj-stage.has-banner .gbj-ribbons { opacity: .06; }
.gbj-stage .bj-hands { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); display: flex; justify-content: center; align-items: flex-end; gap: 22px; }
.bj-hand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 8px 0; border-radius: 18px; transition: background .3s, box-shadow .3s; }
.bj-hand.multi.active { background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 2px rgba(255, 204, 77, .55), 0 0 30px rgba(255, 204, 77, .2); }
.bj-hand.multi:not(.active) .bj-cards { opacity: .8; }
.bj-spot { position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed rgba(255, 228, 160, .35); }
.bj-spot .cstack { transform: scale(.82); }
.bj-hand.empty .bj-spot { width: 76px; height: 76px; animation: spot-glow 2.4s ease-in-out infinite; }
@keyframes spot-glow { 50% { box-shadow: 0 0 26px rgba(255, 228, 160, .25); border-color: rgba(255, 228, 160, .6); } }
.bj-total { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); z-index: 3; min-width: 40px; padding: 3px 10px; border-radius: 999px; background: #1b1f2b; border: 1px solid rgba(255, 255, 255, .18); font: 800 15px/1.2 var(--font); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.bj-dealer .bj-total { position: static; transform: none; }
.bj-total.hot { background: linear-gradient(180deg, #ffd766, #f0a500); color: #2a1a00; border-color: #fff3c4; box-shadow: 0 0 18px rgba(255, 204, 77, .7); }
.bj-total.bust { background: #5c0d18; border-color: #ff4d5e; color: #ffd0d6; }
.bj-tag { position: absolute; z-index: 5; top: calc(var(--cw) * .55 + 26px); left: 50%; transform: translate(-50%, -50%) scale(.3); opacity: 0; padding: 6px 14px; border-radius: 12px; font: 400 22px/1 var(--display); letter-spacing: .06em; white-space: nowrap; pointer-events: none; text-align: center; }
.bj-tag.show { animation: tag-in .55s cubic-bezier(.3, 1.8, .5, 1) forwards; }
.bj-tag small { display: block; font: 800 13px/1.3 var(--font); letter-spacing: 0; }
.bj-tag.win, .bj-tag.blackjack { background: linear-gradient(180deg, #ffe17a, #f0a500); color: #2a1a00; box-shadow: 0 0 30px rgba(255, 204, 77, .75), 0 8px 20px rgba(0, 0, 0, .45); }
.bj-tag.blackjack { background: linear-gradient(100deg, #ffcc4d, #ff7a3d 50%, #ff3d8b); color: #fff; }
.bj-tag.push { background: #2b3242; color: #e6ebf5; }
.bj-tag.lose, .bj-tag.bust { background: rgba(60, 8, 16, .92); color: #ffb3bb; border: 1px solid rgba(255, 77, 94, .6); }
@keyframes tag-in { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.bj-banner { position: absolute; left: 50%; top: 50%; z-index: 20; transform: translate(-50%, -50%); text-align: center; pointer-events: none; opacity: 0; }
.bj-banner b { display: block; font: 400 clamp(34px, 5.4vw, 60px)/1 var(--display); letter-spacing: .03em; white-space: nowrap; }
.bj-banner span { display: inline-block; margin-top: 6px; padding: 5px 14px; border-radius: 999px; background: rgba(0, 0, 0, .6); font-weight: 800; font-size: 14px; }
.bj-banner.win b, .bj-banner.bj b { background: linear-gradient(180deg, #fff6c9, #ffcc4d 45%, #ff9f1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #6b3a00) drop-shadow(0 0 24px rgba(255, 204, 77, .6)); }
.bj-banner.bj b { background: linear-gradient(100deg, #fff1a8, #ffcc4d 30%, #ff7a3d 60%, #ff3d8b); -webkit-background-clip: text; background-clip: text; animation: bj-shimmer 1.2s linear infinite; background-size: 200% 100%; }
@keyframes bj-shimmer { to { background-position: -200% 0; } }
.bj-banner.lose b { color: #fff; opacity: .92; text-shadow: 0 4px 0 rgba(0, 0, 0, .45); }
.bj-banner.push b { color: #e6ebf5; text-shadow: 0 4px 0 rgba(0, 0, 0, .45); }
.gbj-ins { position: absolute; left: 50%; top: 50%; z-index: 25; transform: translate(-50%, -50%); width: min(420px, 88%); padding: 16px 18px; border-radius: 18px; background: rgba(18, 21, 30, .96); border: 1px solid rgba(255, 204, 77, .45); box-shadow: 0 20px 50px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 204, 77, .15); text-align: center; display: grid; gap: 8px; }
.gbj-ins b { font: 400 26px/1 var(--display); letter-spacing: .03em; color: var(--gold); }
.gbj-ins span { color: #c9d2e3; font-size: 13.5px; }
.gbj-ins div { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.gbj-ins kbd { font: 700 10px var(--mono); opacity: .6; margin-left: 4px; }

/* control panel */
.gbj-panel { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr) 150px; grid-template-areas: ". main main ." "pp acts acts t21" "pp chips amt t21"; gap: 12px 14px; padding: 0 18px 18px; background: var(--panel); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 18px 18px; position: relative; }
.gbj-main { grid-area: main; justify-self: center; width: min(320px, 100%); min-height: 54px; margin-top: -27px; border: 0; border-radius: 12px; background: var(--grad); color: #1a0710; font: 800 17px var(--font); cursor: pointer; box-shadow: 0 12px 30px rgba(255, 61, 139, .35), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .2s cubic-bezier(.3, 1.8, .5, 1), filter .2s, opacity .2s; z-index: 2; }
.gbj-main:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.gbj-main:active:not(:disabled) { transform: scale(.96); }
.gbj-main:disabled { opacity: .5; cursor: default; filter: saturate(.5); }
.gbj-acts { grid-area: acts; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gact { min-height: 54px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 16px var(--font); cursor: pointer; transition: transform .18s cubic-bezier(.3, 1.8, .5, 1), background .2s, border-color .2s, opacity .2s; }
.gact svg { width: 22px; height: 22px; }
.gact .ic-x2 { font: 900 17px var(--font); }
.gact.double { --ic: var(--gold); }
.gact.hit { --ic: #4fd1ff; }
.gact.stand { --ic: #ff5fa2; }
.gact.split { --ic: #ff9f43; }
.gact svg, .gact .ic-x2 { color: var(--ic); }
.gact:hover:not(:disabled) { background: #20263a; border-color: var(--ic); transform: translateY(-2px); }
.gact:active:not(:disabled) { transform: scale(.95); }
.gact:disabled { opacity: .38; cursor: not-allowed; }
.gbj-chips { grid-area: chips; display: flex; gap: 8px; align-items: center; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 6px 2px; }
.gbj-chips::-webkit-scrollbar { display: none; }
.cchip.rack { --cs: 50px; cursor: pointer; transition: transform .22s cubic-bezier(.3, 1.8, .5, 1), box-shadow .2s, opacity .2s; }
.cchip.rack:hover { transform: translateY(-4px); }
.cchip.rack:active { transform: scale(.9); }
.cchip.rack.on { transform: translateY(-5px) scale(1.06); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 3px #fff, 0 0 22px 4px rgba(255, 204, 77, .55), 0 10px 18px rgba(0, 0, 0, .5); }
.cchip.rack:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.gbj-amt { grid-area: amt; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); min-height: 56px; }
.gbj-amt .cur, .fld-box .cur { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #ffd766, #f0a500); color: #3a2600; font: 900 12px var(--font); flex: none; }
.gbj-amt input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: 700 17px var(--font); font-variant-numeric: tabular-nums; outline: none; }
.gbj-amt button { min-width: 48px; height: 40px; border-radius: 9px; border: 0; background: var(--panel-2); color: #d8deea; font: 800 14px var(--font); cursor: pointer; }
.gbj-amt button:hover:not(:disabled) { background: #262c3e; color: #fff; }
.gbj-amt:focus-within { border-color: rgba(255, 204, 77, .6); }
.gbj-panel.locked .gbj-chips, .gbj-panel.locked .gbj-amt, .gbj-panel.locked .side-spot { opacity: .55; pointer-events: none; }
.gbj-side { display: grid; justify-items: center; align-content: center; gap: 8px; position: relative; }
.gbj-side[data-area="pp"] { grid-area: pp; }
.gbj-side[data-area="t21"] { grid-area: t21; }
.gbj-side > span { font-size: 13px; font-weight: 700; color: #b9c2d6; }
.side-spot { position: relative; width: 84px; height: 84px; border-radius: 50%; border: 2px dashed rgba(255, 204, 77, .35); background: radial-gradient(circle, rgba(255, 204, 77, .06), transparent 70%); cursor: pointer; display: grid; place-items: center; transition: transform .2s cubic-bezier(.3, 1.8, .5, 1), border-color .2s, box-shadow .2s; }
.side-spot:hover { border-color: var(--gold); transform: scale(1.05); }
.side-spot.has { border-style: solid; border-color: rgba(255, 204, 77, .7); box-shadow: 0 0 20px rgba(255, 204, 77, .2); }
.side-plus { font: 300 34px/1 var(--font); color: rgba(255, 228, 160, .6); font-style: normal; }
.side-spot .cchip.side { --cs: 52px; }
.side-x { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; background: #2b3242; border: 1px solid var(--line-2); color: #fff; font: 700 14px/20px var(--font); font-style: normal; }
.side-res { position: absolute; bottom: -6px; left: 50%; transform: translate(-50%, 100%) scale(.5); opacity: 0; white-space: nowrap; font: 700 12px var(--font); font-style: normal; padding: 4px 10px; border-radius: 999px; background: #2b3242; color: #c9d2e3; pointer-events: none; z-index: 3; }
.side-res b { margin-left: 6px; }
.side-res.show { animation: res-in .5s cubic-bezier(.3, 1.8, .5, 1) forwards; }
.side-res.win { background: linear-gradient(180deg, #ffe17a, #f0a500); color: #2a1a00; box-shadow: 0 0 24px rgba(255, 204, 77, .6); }
@keyframes res-in { to { transform: translate(-50%, 100%) scale(1); opacity: 1; } }

@media (max-width: 760px) {
  .gbj { --cw: clamp(46px, 12.5vw, 56px); }
  .casino { padding-top: 8px; }
  .game-bar { padding: 7px 12px; font-size: 14px; }
  .gbj-stage { height: 318px; }
  .rib.sub { display: none; }
  .gbj-oval { inset: 4% 3%; }
  .gbj-stage .bj-shoe { right: 6%; top: 5%; transform: rotate(8deg) scale(.75); }
  .gbj-stage .bj-dealer { top: 6%; gap: 5px; }
  .gbj-stage .bj-hands { bottom: 4%; gap: 6px; }
  .bj-hand { padding-top: 24px; gap: 6px; }
  .bj-spot { width: 50px; height: 50px; }
  .bj-spot .cstack { transform: scale(.68); }
  .bj-hand.empty .bj-spot { width: 60px; height: 60px; }
  .rib { font-size: 10px; letter-spacing: .1em; }
  .rib.main { padding: 9px 30px; }
  .rib.sub { padding: 8px 24px; font-size: 9.5px; }
  .gbj-ribbons { top: 43%; transform: translate(-50%, -50%); }
  .bj-banner { top: 42%; }
  .bj-banner b { font-size: 34px; }
  .bj-banner span { font-size: 12px; padding: 3px 10px; margin-top: 4px; }
  .gbj-panel { grid-template-columns: 66px minmax(0, 1fr) 66px; grid-template-areas: "pp main t21" "acts acts acts" "chips chips chips" "amt amt amt"; gap: 8px 8px; padding: 0 10px 10px; }
  .gbj-main { margin-top: 8px; align-self: center; min-height: 48px; }
  .gbj-side { padding-top: 6px; gap: 3px; }
  .gbj-side > span { font-size: 10px; white-space: nowrap; }
  .side-spot { width: 48px; height: 48px; }
  .side-res { font-size: 10.5px; padding: 3px 8px; }
  .side-spot .cchip.side { --cs: 38px; }
  .side-plus { font-size: 24px; }
  .gbj-acts { gap: 6px; }
  .gact { min-height: 46px; flex-direction: column; gap: 2px; font-size: 12px; }
  .gact svg { width: 20px; height: 20px; }
  .cchip.rack { --cs: 44px; }
  .gbj-amt { min-height: 46px; padding: 4px 4px 4px 12px; }
  .gbj-amt button { height: 36px; }
  .gbj-chips { padding: 4px 2px; }
}

/* ===== roulette ===== */
.grl { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "side main"; gap: 16px; align-items: start; }
.grl-side { grid-area: side; position: sticky; top: 76px; display: grid; gap: 14px; padding: 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.grl-main { grid-area: main; min-width: 0; }
.grl-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.grl-tabs button { min-height: 42px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 700 15px var(--font); cursor: pointer; transition: background .2s, color .2s; }
.grl-tabs button.on { background: linear-gradient(180deg, #2a3042, #1d2232); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 10px rgba(0, 0, 0, .3); }
.fld { display: grid; gap: 6px; }
.fld-l { font-size: 13px; font-weight: 700; color: #b9c2d6; }
.fld-box { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); }
.fld-box input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: 700 16px var(--font); font-variant-numeric: tabular-nums; outline: none; }
.fld-box input[readonly] { color: #d8deea; }
.fld-box em { font-style: normal; font-weight: 800; color: var(--muted); font-size: 13px; }
.f-pay .fld-box input { color: var(--green); }
#rl-mult { color: var(--green); }
.fld-box:focus-within { border-color: rgba(255, 204, 77, .6); }
.grl-bet { min-height: 54px; border: 0; border-radius: 12px; background: var(--grad); color: #1a0710; font: 800 17px var(--font); cursor: pointer; box-shadow: 0 12px 30px rgba(255, 61, 139, .3), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .2s cubic-bezier(.3, 1.8, .5, 1), filter .2s, opacity .2s; }
.grl-bet:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.grl-bet:active:not(:disabled) { transform: scale(.96); }
.grl-bet:disabled { opacity: .5; cursor: default; filter: saturate(.5); }
.grl-bet.stop { background: linear-gradient(180deg, #ff6b7a, #d6293f); color: #fff; }
.grl-auto { display: grid; gap: 12px; }
.m-only { display: none !important; }

.grl-wheel-area { position: relative; display: grid; place-items: center; padding: 26px 12px 10px; background: radial-gradient(70% 90% at 50% 30%, #17141f 0%, #0c0d13 70%); border: 1px solid var(--line); border-top: 0; }
.rl3d { --W: min(480px, 52vw); position: relative; width: var(--W); height: calc(var(--W) * .63); filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .55)); }
.rl3d-body { position: absolute; inset: 0; border-radius: 50% / calc(var(--W) * .28); background: linear-gradient(180deg, #23262f 0%, #2e3240 46%, #1a1c24 62%, #0d0e12 100%); box-shadow: inset 0 -4px 0 rgba(255, 204, 77, .25); }
.rl3d-face, .rl3d-top { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--W) * .56); overflow: visible; }
.w-red { fill: #c8102e; }
.w-black { fill: #15171d; }
.w-green { fill: #0a8f4a; }
.wp-red { fill: #8a0b20; }
.wp-black { fill: #0b0c10; }
.wp-green { fill: #066233; }
.w-frets line { stroke: #d9b25c; stroke-width: 1.2; opacity: .85; }
.w-num { fill: #fff; font: 800 13px var(--font); text-anchor: middle; dominant-baseline: central; letter-spacing: -.02em; }
.w-dia { fill: url(#rlgold); }
.w-hit { fill: rgba(255, 228, 160, .25); stroke: #ffe17a; stroke-width: 3; animation: hit-pulse .9s ease-in-out infinite alternate; }
@keyframes hit-pulse { from { opacity: .55; } to { opacity: 1; } }
.grl-last { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 78px; height: 78px; border-radius: 18px; border: 2px dashed var(--line-2); display: grid; place-items: center; align-content: center; gap: 2px; background: rgba(255, 255, 255, .02); }
.grl-last b { font: 400 40px/1 var(--display); color: #fff; }
.grl-last span { font: 800 11px var(--font); color: var(--gold); min-height: 0; }
.grl-last.red, .grl-last.black, .grl-last.green { border: 0; }
.grl-last.red { background: linear-gradient(180deg, #ef2347, #a50d26); box-shadow: 0 0 34px rgba(239, 35, 71, .5); }
.grl-last.black { background: linear-gradient(180deg, #2c303b, #0d0e12); box-shadow: 0 0 28px rgba(200, 210, 230, .2); border: 1px solid #3a3f4c; }
.grl-last.green { background: linear-gradient(180deg, #19c46b, #0a7a3f); box-shadow: 0 0 34px rgba(25, 196, 107, .55); }
.grl-last.red span, .grl-last.black span, .grl-last.green span { color: #fff6c9; }
.grl-last.waiting { animation: rl-wait .6s ease-in-out infinite alternate; }
@keyframes rl-wait { to { border-color: var(--gold); box-shadow: 0 0 20px rgba(255, 204, 77, .3); } }
.grl-recent { position: absolute; right: 18px; top: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.rl-pill { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 6px; border-radius: 9px; font-weight: 800; font-size: 13.5px; color: #fff; flex: none; }
.rl-pill.red { background: #c8102e; }
.rl-pill.black { background: #23262f; border: 1px solid #3a3f4c; }
.rl-pill.green { background: #0a8f4a; }
.rl-pill.latest { box-shadow: 0 0 0 2px #fff, 0 0 16px rgba(255, 255, 255, .35); }
.grl-recent .rl-pill:not(.latest) { opacity: .75; }

.grl-board-wrap { padding: 14px 14px 16px; border-radius: 0 0 18px 18px; background: var(--panel); border: 1px solid var(--line); border-top: 0; display: grid; gap: 14px; }
.rl-board { display: grid; grid-template-columns: 54px repeat(12, minmax(0, 1fr)) 58px; grid-template-rows: repeat(3, 50px) 46px 46px; gap: 5px; user-select: none; -webkit-user-select: none; }
.rl-cell, .rl-tool { grid-area: var(--d); position: relative; display: grid; place-items: center; border: 0; border-radius: 8px; color: #fff; font: 800 16px var(--font); cursor: pointer; padding: 0; transition: transform .15s, box-shadow .2s, background .2s, filter .2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.rl-cell span { position: relative; z-index: 1; pointer-events: none; }
.rl-cell.n.red { background: linear-gradient(180deg, #e3253f, #b5122b); }
.rl-cell.n.black { background: linear-gradient(180deg, #2a2e3a, #171a22); }
.rl-cell.n.green { background: linear-gradient(180deg, #1fc46e, #0c8445); }
.rl-cell.zero { font-size: 20px; }
.rl-cell.side, .rl-tool { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); font-size: 13.5px; color: #e6ebf5; }
.rl-tool { color: var(--muted); }
.rl-tool svg { width: 20px; height: 20px; }
.rl-tool:hover { color: #fff; box-shadow: inset 0 0 0 1.5px var(--gold); }
.rl-cell:hover, .rl-cell.hl { filter: brightness(1.22); box-shadow: inset 0 0 0 2px rgba(255, 228, 160, .9), 0 0 16px rgba(255, 228, 160, .3); }
.rl-cell:active, .rl-tool:active { transform: scale(.95); }
.rl-cell .dia { display: block; width: 34px; height: 20px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.rl-cell .dia.red { background: #e3253f; }
.rl-cell .dia.black { background: #3a3f4c; }
.rl-cell.win { animation: cell-win .5s ease-in-out infinite alternate; z-index: 2; }
@keyframes cell-win { from { box-shadow: 0 0 0 2px #fff, 0 0 18px 4px rgba(255, 228, 160, .7); } to { box-shadow: 0 0 0 3px #ffe17a, 0 0 34px 10px rgba(255, 204, 77, .9); transform: scale(1.06); } }
.rl-cell.won { box-shadow: inset 0 0 0 2px #ffe17a, 0 0 22px rgba(255, 204, 77, .7); }
.rl-mark { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; transition: opacity .45s, transform .45s; }
.rl-mark .cchip { --cs: 32px; box-shadow: 0 4px 10px rgba(0, 0, 0, .55), inset 0 -2px 0 rgba(0, 0, 0, .25); }
.rl-mark .cchip.gold { --cs: 38px; box-shadow: 0 0 0 2px #fff, 0 0 24px 6px rgba(255, 204, 77, .8); }
.rl-mark.lost { opacity: 0; transform: translate(-50%, -160%) scale(.5); }
.grl.spinning .rl-board, .grl.auto-on .rl-board { pointer-events: none; }
.grl-chips { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.grl-chips .cchip.rack { opacity: .5; }
.grl-chips .cchip.rack.on, .grl-chips .cchip.rack:hover, .cchip-custom.on .cchip { opacity: 1; }
.cchip-custom { position: relative; display: inline-flex; align-items: center; cursor: pointer; border-radius: 999px; }
.cchip-custom .cchip { opacity: .5; background: radial-gradient(circle, #232838 0 55%, transparent 56%), repeating-conic-gradient(from 7deg, rgba(255, 255, 255, .5) 0 14deg, #232838 14deg 45deg); color: #fff; }
.cchip-custom.on .cchip { transform: translateY(-5px) scale(1.06); box-shadow: 0 0 0 3px #fff, 0 0 22px 4px rgba(255, 204, 77, .55); }
.cc-edit { position: absolute; right: -10px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel-2); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.cc-edit svg { width: 13px; height: 13px; }
.cc-pop { position: fixed; z-index: 460; display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-radius: 14px; background: #1b2030; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.cc-pop label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cc-pop input { width: 120px; min-height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: 700 15px var(--font); }

@media (max-width: 1100px) and (min-width: 861px) { .grl { grid-template-columns: 260px minmax(0, 1fr); } .rl-board { grid-template-columns: 44px repeat(12, minmax(0, 1fr)) 50px; } .rl-cell { font-size: 14px; } .rl-cell.side { font-size: 12px; } }
@media (max-width: 860px) {
  .grl { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side"; gap: 0; }
  .d-only { display: none !important; }
  .m-only { display: flex !important; }
  .grl-side { position: sticky; top: auto; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 30; margin: 12px -16px 0; padding: 8px 12px 10px; gap: 8px; border-radius: 20px 20px 0 0; grid-template-columns: 1fr 1fr; grid-template-areas: "chips chips" "tabs tabs" "amt bet" "auto auto"; background: rgba(15, 17, 25, .97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -12px 30px rgba(0, 0, 0, .45); transition: transform .4s cubic-bezier(.3, .9, .3, 1); }
  .grl.spinning .grl-side:not(:has(.stop)) { transform: translateY(calc(100% + 70px)); }
  .grl-side .grl-chips { grid-area: chips; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 8px 4px 4px; scrollbar-width: none; }
  .grl-side .grl-chips::-webkit-scrollbar { display: none; }
  .grl-side .cchip.rack { --cs: 40px; }
  .grl-tabs { grid-area: tabs; padding: 3px; }
  .grl-tabs button { min-height: 32px; font-size: 13px; }
  .f-amt { grid-area: amt; }
  .f-amt .fld-l, .f-pay { display: none; }
  .fld-box { min-height: 46px; }
  .grl-bet { grid-area: bet; min-height: 46px; }
  .grl-auto { grid-area: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .grl-auto .fld-l { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .grl-auto .fl-lg { display: none; }
  .grl-auto .fl-sm { display: inline; }
  .grl-auto .fld-box { min-height: 40px; padding: 0 8px; }
  .grl-auto .fld-box em { display: none; }
  .grl-wheel-area { padding: 14px 6px 6px; }
  .rl3d { --W: min(340px, 86vw); }
  .grl-last { left: 8px; top: 12px; transform: none; width: 52px; height: 52px; border-radius: 12px; }
  .grl-last b { font-size: 26px; }
  .grl-last span { font-size: 9px; }
  .grl-recent { right: 8px; top: 12px; bottom: auto; flex-direction: column; gap: 4px; }
  .grl-recent .rl-pill:nth-child(n+5) { display: none; }
  .rl-pill { min-width: 28px; height: 24px; font-size: 12px; border-radius: 7px; }
  .grl-board-wrap { padding: 10px; }
  .rl-board { grid-template-columns: 44px 44px repeat(3, minmax(0, 1fr)); grid-template-rows: 46px repeat(12, 40px) 44px; gap: 4px; max-width: 460px; margin: 0 auto; width: 100%; }
  .rl-cell, .rl-tool { grid-area: var(--m); font-size: 15px; }
  .rl-cell.doz span, .rl-cell.out span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; }
  .rl-cell .dia { width: 18px; height: 30px; }
  .rl-cell.out span:has(.dia) { writing-mode: horizontal-tb; transform: none; }
}
.fl-sm { display: none; }

/* ---- light modes for big grids (keeps phones inside their graphics memory) ---- */
.pack3d.flat { perspective: none; }
.pack3d.flat .p3-stage, .pack3d.flat .p3-spin { transform-style: flat; will-change: auto; }
.pack3d.flat .p3-face { transform: none; animation: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
.pack3d.flat .flat-strip { top: 0; height: 3.4em; background: linear-gradient(90deg, var(--c3), var(--c1) 25%, var(--c2) 50%, var(--c1) 75%, var(--c3)); }
.pack3d.flat .pack-foil { mix-blend-mode: normal; opacity: .6; }
.flat-shine { position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .3) 50%, transparent 62%), linear-gradient(135deg, rgba(255, 61, 139, .12), rgba(255, 204, 77, .08) 35%, rgba(61, 252, 255, .12) 70%, rgba(162, 89, 255, .12));
  background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat; transition: background-position .9s ease; }
.pack-tile:hover .flat-shine, .pack-tile:focus-visible .flat-shine { background-position: -30% 0, 0 0; }
.c3d.lite .c3d-tilt { will-change: auto; }
.lite-sheen { position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .16) 45%, rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, rgba(255, 61, 139, .1), rgba(255, 204, 77, .07) 35%, rgba(61, 252, 255, .1) 70%, rgba(162, 89, 255, .1)); }
.c3d.lite .cd-rays, .c3d.lite .pk-fx, .c3d.lite .pk-aura, .c3d.lite .pk-emblem, .c3d.lite .c3d-front::before, .c3d.lite .c3d-front::after { animation: none !important; }
.pack3d.flat .p3-stage { animation: none; }
.pack-tile .pack3d.flat { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.pack-tile:hover .pack3d.flat { transform: translateY(-6px) rotate(-1.5deg); }

.wager-lock { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 204, 77, .08); border: 1px solid rgba(255, 204, 77, .35); }
.wager-lock b { color: var(--gold); font-size: 15px; }
.wager-lock span { color: #c9d2e3; font-size: 13px; }