:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }

@property --theme { syntax: '<color>'; inherits: true; initial-value: #fb7299; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  color-scheme: dark;
  --bg: #09090f;
  --bg2: #15131f;
  --panel: #1b1926;
  --fg: #f4f2fa;
  --mut: #9b97ad;
  --line: rgba(255, 255, 255, .09);
  --pink: #fb7299;
  --blue: #00aeec;
  --green: #22c27a;
  --theme: #fb7299;
  --font-d: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-b: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-n: 'Barlow Condensed', 'DIN Alternate', 'Arial Narrow', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--fg); overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--font-b); font-size: 14px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
img { -webkit-user-drag: none; user-select: none; }

#app {
  position: fixed; inset: 0; margin: 0 auto; max-width: 480px; overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line);
}
.screen {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.screen.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s ease; }
.screen.tabbed { bottom: calc(60px + var(--sab)); }
.screen.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }

.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + var(--sat)) 16px 0;
}
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 900; font-size: 19px; letter-spacing: .08em; }
.logo b { font-weight: 900; background: linear-gradient(90deg, #fff, var(--theme)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-tv {
  width: 28px; height: 22px; border-radius: 6px; border: 2.5px solid var(--theme); position: relative;
  box-shadow: 0 0 10px color-mix(in srgb, var(--theme) 60%, transparent);
}
.logo-tv::before, .logo-tv::after { content: ''; position: absolute; top: 6px; width: 5px; height: 2.5px; background: var(--theme); border-radius: 2px; }
.logo-tv::before { left: 5px; transform: rotate(20deg); }
.logo-tv::after { right: 5px; transform: rotate(-20deg); }
.top-r { display: flex; align-items: center; gap: 10px; }
.ibtn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.07); display: grid; place-items: center; }
.ibtn::before { content: ''; width: 16px; height: 16px; background: var(--fg); -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; }
#btn-mute { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 8a5 5 0 010 8M19 5a9 9 0 010 14' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
#btn-mute.off { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.coins {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 0 0 10px; border-radius: 17px;
  background: rgba(0,0,0,.45); border: 1px solid var(--line);
  font: 700 17px var(--font-n); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.coins #btn-add { width: 34px; height: 34px; border-radius: 0 17px 17px 0; background: var(--green); font: 700 22px var(--font-n); line-height: 1; margin-left: 4px; }
.coin {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -2px;
  background: radial-gradient(circle at 35% 30%, #fff6c4, #ffcc33 45%, #c98a00);
  box-shadow: inset 0 0 0 1.5px rgba(120,70,0,.5);
}

.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  height: calc(60px + var(--sab)); padding-bottom: var(--sab);
  display: flex; background: rgba(12,11,18,.92); border-top: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .35s ease;
}
.tabbar.hide { transform: translateY(110%); }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--mut); }
.tabbar button.on { color: var(--fg); }
.tabbar button.on .ti { background: var(--theme); }
.ti { width: 22px; height: 22px; background: var(--mut); -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; }
.ti-pack { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12l1 3v14l-1 3H6l-1-3V5z'/%3E%3C/svg%3E"); }
.ti-col { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='2'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2'/%3E%3C/svg%3E"); }
.ti-play { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 4h12a4 4 0 014 4v8a4 4 0 01-4 4H6a4 4 0 01-4-4V8a4 4 0 014-4zm4 4.5v7l6-3.5z'/%3E%3C/svg%3E"); }
.ti-me { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M2 22c1-6 5-8 10-8s9 2 10 8z'/%3E%3C/svg%3E"); }

.home-bg {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(125deg, transparent 0 46px, rgba(255,255,255,.025) 46px 47px),
    linear-gradient(118deg, transparent 0 62%, rgba(255,255,255,.035) 62.3%, transparent 63% 70%, rgba(255,255,255,.03) 70.3%, transparent 71%),
    radial-gradient(110% 55% at 50% 30%, color-mix(in srgb, var(--theme) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #16202a 0%, #0c1016 50%, color-mix(in srgb, var(--theme) 14%, #0a0a10) 100%);
  transition: --theme .6s ease;
}
#s-home { transition: opacity .35s ease; }

#s-home > .topbar, #s-home > .home-info { transition: --theme .6s ease; }
.home-car {
  position: absolute; left: 0; right: 0; top: calc(64px + var(--sat)); height: 46%;
  touch-action: pan-y; perspective: 1000px;
}
.home-car .slot { position: absolute; left: 50%; top: 50%; will-change: transform; }
.home-car .slot .pack { transform: translate(-50%, -50%); }
.home-info {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 16px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.dots { display: flex; gap: 7px; height: 8px; align-items: center; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.25); transition: all .3s; }
.dots i.on { width: 18px; background: var(--fg); }
#pk-name { margin: 2px 0 0; font: 900 30px var(--font-d); letter-spacing: .06em; text-wrap: balance; }
.peek { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mut); padding: 4px 10px; border-radius: 12px; }
.peek:active { background: rgba(255,255,255,.06); }
.eye { width: 16px; height: 16px; background: var(--mut); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6 5 2 12 2 12s4 7 10 7 10-7 10-7-4-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6 5 2 12 2 12s4 7 10 7 10-7 10-7-4-7-10-7zm0 11a4 4 0 110-8 4 4 0 010 8z'/%3E%3C/svg%3E") center/contain no-repeat; }
.pk-stats { display: grid; grid-template-columns: 1fr 1.3fr 1fr; width: 100%; text-align: center; align-items: end; padding-top: 4px; }
.pk-stats div { display: flex; flex-direction: column; gap: 2px; }
.pk-stats small { font-size: 11px; color: var(--mut); }
.pk-stats b { font: 700 19px var(--font-n); }
.pk-stats .mid b { font-family: var(--font-d); font-weight: 900; font-size: 24px; }
.pk-stats .mid { border-top: 1px solid var(--line); padding-top: 6px; }
.rb-text { background: linear-gradient(90deg, #ff5ec4, #ffd23f, #4dffb8, #4dc3ff, #b06bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.buy {
  width: 100%; height: 52px; border-radius: 26px; font-size: 17px; font-weight: 700; letter-spacing: .04em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme) 100%, #fff 12%), color-mix(in srgb, var(--theme) 70%, #000));
  box-shadow: 0 6px 24px color-mix(in srgb, var(--theme) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff;
  transition: transform .12s ease, filter .2s;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.buy:active, .buy2:active { transform: scale(.96); }
.price { display: inline-flex; align-items: center; gap: 4px; font: 700 18px var(--font-n); padding: 2px 10px; border-radius: 12px; background: rgba(0,0,0,.25); }
.bulk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.buy2 {
  height: 44px; border-radius: 22px; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,.07); border: 1px solid color-mix(in srgb, var(--theme) 45%, transparent);
  transition: transform .12s ease;
}
.buy2 .price { font-size: 15px; padding: 1px 7px; }

@property --gx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.pack {
  --c1: #fb7299; --c2: #3b0d27; --c3: #00aeec;
  position: relative; width: var(--pw, 200px); aspect-ratio: 1 / 1.62; container-type: inline-size; color: #fff;
}
.pack > .pk {
  position: absolute; inset: 0; border-radius: 1.2cqw; overflow: hidden;
  background:
    linear-gradient(118deg, transparent 0 46%, color-mix(in srgb, var(--c1) 55%, transparent) 50%, transparent 57%),
    linear-gradient(118deg, transparent 0 63%, color-mix(in srgb, var(--c1) 40%, transparent) 64.5%, transparent 66%),
    linear-gradient(118deg, transparent 0 22%, color-mix(in srgb, var(--c1) 70%, #fff) 22.4%, transparent 22.9%),
    linear-gradient(118deg, transparent 0 74%, color-mix(in srgb, var(--c1) 60%, #fff) 74.3%, transparent 74.7%),
    linear-gradient(118deg, transparent 0 81%, color-mix(in srgb, var(--c3) 50%, transparent) 81.3%, transparent 81.8%),
    radial-gradient(90% 55% at 25% 18%, color-mix(in srgb, var(--c1) 85%, #000), transparent 70%),
    radial-gradient(80% 50% at 85% 85%, color-mix(in srgb, var(--c1) 45%, #000), transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--c1) 55%, var(--c2)) 0%, var(--c2) 45%, color-mix(in srgb, var(--c2) 60%, #000) 100%);
  box-shadow: inset 0 0 0 .35cqw rgba(255,255,255,.14), 0 4cqw 9cqw rgba(0,0,0,.55);
}
.pack.glow > .pk { box-shadow: inset 0 0 0 .35cqw rgba(255,255,255,.18), 0 0 10cqw color-mix(in srgb, var(--c1) 55%, transparent), 0 4cqw 10cqw rgba(0,0,0,.6); }
.pk-grain { position: absolute; inset: 0; background: var(--grain); background-size: 60cqw; opacity: .22; mix-blend-mode: overlay; pointer-events: none; }
.pk-pillow { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.6) 0, rgba(0,0,0,0) 8%, rgba(255,255,255,.07) 26%, rgba(255,255,255,0) 50%, rgba(0,0,0,0) 86%, rgba(0,0,0,.65) 100%),
    linear-gradient(180deg, rgba(0,0,0,.55) 5%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,.55) 95%);
}
.pk-wrinkle { position: absolute; left: 0; right: 0; top: 7cqw; height: 7cqw; pointer-events: none; opacity: .7;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 .35cqw, transparent .35cqw 2.6cqw, rgba(0,0,0,.25) 2.6cqw 3cqw, transparent 3cqw 4.4cqw);
  -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent); }
.pk-wrinkle.b { top: auto; bottom: 7cqw; transform: scaleY(-1); }
.pk-spec { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    linear-gradient(108deg, transparent calc(var(--gx) - 26%), rgba(255,255,255,.05) calc(var(--gx) - 12%), rgba(255,255,255,.24) calc(var(--gx) - 2%), rgba(255,255,255,.07) calc(var(--gx) + 5%), transparent calc(var(--gx) + 18%)),
    linear-gradient(108deg, transparent calc(var(--gx) + 6%), rgba(255,80,200,.14) calc(var(--gx) + 10%), rgba(80,220,255,.14) calc(var(--gx) + 14%), rgba(255,240,120,.1) calc(var(--gx) + 18%), transparent calc(var(--gx) + 23%));
}
.pk-crimp {
  position: absolute; left: 0; right: 0; height: 7.5cqw; z-index: 2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 35%, rgba(0,0,0,0) 60%, rgba(0,0,0,.55)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 .45cqw, rgba(255,255,255,0) .45cqw .7cqw, rgba(0,0,0,.4) .7cqw 1.15cqw),
    linear-gradient(90deg, color-mix(in srgb, var(--c1) 55%, #000), var(--c1) 30%, color-mix(in srgb, var(--c1) 70%, #fff) 50%, var(--c1) 70%, color-mix(in srgb, var(--c1) 55%, #000));
  -webkit-mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) top / 2.2cqw 1.1cqw repeat-x, linear-gradient(#000 0 0) bottom / 100% calc(100% - 1.05cqw) no-repeat;
  mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) top / 2.2cqw 1.1cqw repeat-x, linear-gradient(#000 0 0) bottom / 100% calc(100% - 1.05cqw) no-repeat;
}
.pk-crimp::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: .4cqw; background: rgba(0,0,0,.6); }
.pk-crimp.t { top: 0; }
.pk-crimp.b { bottom: 0; transform: scaleY(-1); }
.pk-notch { position: absolute; top: calc(8.5% - 1.6cqw); width: 0; height: 0; border-top: 1.6cqw solid transparent; border-bottom: 1.6cqw solid transparent; z-index: 3; }
.pk-notch.l { left: 0; border-left: 2cqw solid #000; }
.pk-notch.r { right: 0; border-right: 2cqw solid #000; }
.pk-badge { position: absolute; top: 15cqw; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.pk-badge .tvi { width: 9cqw; height: 6.6cqw; border: .9cqw solid #fff; border-radius: 1.8cqw; position: relative; filter: drop-shadow(0 0 2cqw rgba(255,255,255,.5)); }
.pk-badge .tvi::before, .pk-badge .tvi::after { content: ''; position: absolute; top: 1.8cqw; width: 1.8cqw; height: .8cqw; background: #fff; border-radius: 1cqw; }
.pk-badge .tvi::before { left: 1.2cqw; transform: rotate(20deg); }
.pk-badge .tvi::after { right: 1.2cqw; transform: rotate(-20deg); }
.pk-badge span { font: 800 3.4cqw var(--font-n); letter-spacing: .32em; padding: .5cqw 2.4cqw .5cqw 2.8cqw; border-radius: .8cqw; background: color-mix(in srgb, var(--c1) 85%, #000); box-shadow: 0 0 3cqw color-mix(in srgb, var(--c1) 60%, transparent); }
.pk-title { position: absolute; top: 43%; left: 0; right: 0; text-align: center; font: 900 11.5cqw/1 var(--font-d); letter-spacing: .12em; padding-left: .12em; white-space: nowrap;
  background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--c1) 25%, #fff) 70%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .5cqw 0 rgba(0,0,0,.45)) drop-shadow(0 0 3cqw color-mix(in srgb, var(--c1) 60%, transparent)); }
.pk-en { position: absolute; top: calc(43% + 15cqw); left: 0; right: 0; text-align: center; font: 700 4cqw var(--font-n); letter-spacing: .5em; padding-left: .5em; color: rgba(255,255,255,.75); }
.pk-emblem {
  position: absolute; top: 67%; left: 50%; width: 27cqw; height: 27cqw; transform: translateX(-50%);
  border-radius: 50%; border: 1.3cqw solid #fff; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--c1) 40%, #222), #07060a 70%);
  box-shadow: 0 0 5cqw color-mix(in srgb, var(--c1) 70%, transparent), inset 0 0 3cqw rgba(0,0,0,.7), inset 0 .6cqw 1cqw rgba(255,255,255,.25);
}
.pk-emblem svg { width: 58%; height: 58%; filter: drop-shadow(0 0 1.5cqw color-mix(in srgb, var(--c1) 80%, #fff)); }
.pk-foot { position: absolute; bottom: 10cqw; left: 0; right: 0; text-align: center; font: 800 3.2cqw var(--font-n); letter-spacing: .3em; color: rgba(255,255,255,.85); }
.pk-foot b { color: var(--c1); font-weight: 800; }
.pk-sheen {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .7;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.75) 45%, transparent 60%);
  background-size: 250% 100%; background-position: 120% 0;
}
.pack.live .pk-sheen { animation: sheen 4.5s ease-in-out infinite; }
@keyframes sheen { 0% { background-position: 120% 0; } 45%, 100% { background-position: -40% 0; } }
.pk-floor { position: absolute; left: 6%; right: 6%; top: 100%; height: 14%; margin-top: 2%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 45%, transparent), transparent); filter: blur(3cqw); opacity: .8; }

.space { background: radial-gradient(130% 80% at 50% 45%, #121020 0%, #050508 70%); }
.space-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 40% at 50% 48%, color-mix(in srgb, var(--theme) 26%, transparent), transparent 70%);
  transition: opacity .5s;
}
.hint {
  position: absolute; left: 16px; right: 16px; bottom: calc(26px + var(--sab)); margin: 0;
  text-align: center; font-size: 13px; color: rgba(255,255,255,.62); letter-spacing: .06em; pointer-events: none;
  transition: opacity .3s;
}
.hint b { color: #fff; font-weight: 600; }
.hint.pulse { animation: hintp 1.6s ease-in-out infinite; }
@keyframes hintp { 50% { opacity: .35; } }
.back-x {
  position: absolute; top: calc(14px + var(--sat)); left: 14px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08); z-index: 5;
}
.back-x::before { content: ''; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateX(2px) rotate(45deg); }
.ghost-btn {
  position: absolute; right: 16px; bottom: calc(64px + var(--sab)); padding: 8px 14px; border-radius: 16px;
  font-size: 12px; color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); border: 1px solid var(--line);
}
.ghost-btn.sm { position: static; padding: 6px 12px; }

.pick-row { position: absolute; inset: 0; perspective: 900px; touch-action: none; }
.pick-row .slot { position: absolute; left: 50%; top: 46%; will-change: transform; transform-style: preserve-3d; }
.pick-row .slot .pack { transform: translate(-50%, -50%); }
.pick-row .refl {
  position: absolute; left: 50%; top: 100%; width: 100%; height: 30%; transform: translate(-50%, -50%) scaleY(-1);
  opacity: .18; filter: blur(2px); -webkit-mask: linear-gradient(to top, #000, transparent 70%); mask: linear-gradient(to top, #000, transparent 70%);
  pointer-events: none;
}

.tear-stage { position: absolute; inset: 0; touch-action: none; }
.tear-pack { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); }
.tear-pack .piece { position: absolute; inset: 0; }
.tear-pack .piece .pack { position: absolute; inset: 0; width: 100%; }
.tear-pack .piece.top { z-index: 3; will-change: transform; }
.tear-pack .piece.body { z-index: 2; }
.tear-guide {
  position: absolute; left: -4%; right: -4%; height: 0; z-index: 4; pointer-events: none;
  border-top: 2px dashed rgba(255,255,255,.85);
  filter: drop-shadow(0 0 4px #fff);
  animation: guide 1.2s linear infinite;
}
@keyframes guide { 50% { opacity: .35; } }
.tear-finger {
  position: absolute; z-index: 6; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0 18%, rgba(255,255,255,.25) 19% 55%, transparent 56%);
  animation: finger 2s ease-in-out infinite;
}
@keyframes finger { 0% { transform: translateX(-70px); opacity: 0; } 15% { opacity: 1; } 75% { transform: translateX(70px); opacity: 1; } 100% { transform: translateX(70px); opacity: 0; } }
.tear-cut {
  position: absolute; height: 4px; margin-top: -2px; z-index: 5; pointer-events: none; border-radius: 2px;
  background: #fff; box-shadow: 0 0 8px #fff, 0 0 18px var(--theme), 0 0 36px var(--theme);
}
.tear-leak {
  position: absolute; left: 0; right: 0; height: 40%; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 60% at 50% 0%, #fff, color-mix(in srgb, var(--theme) 80%, #fff) 25%, transparent 70%);
  mix-blend-mode: screen;
}
.emerge { position: absolute; inset: 0; z-index: 1; }
.emerge .cback { position: absolute; }

.card {
  --cw: 240px; --fr: linear-gradient(160deg, #f2f6fc, #aebbd0); --pn: #142036; --tx: #fff; --acc: #8fc7ff;
  position: relative; width: var(--cw); aspect-ratio: 5 / 7; container-type: inline-size; border-radius: 5cqw;
  flex: none;
}
.card .face {
  position: absolute; inset: 0; border-radius: 5cqw; overflow: hidden; padding: 3.4cqw;
  background: var(--fr); box-shadow: 0 3cqw 9cqw rgba(0,0,0,.5);
}
.c-panel {
  position: relative; height: 100%; border-radius: 3cqw; padding: 3.2cqw; overflow: hidden;
  display: flex; flex-direction: column; gap: 2.2cqw; background: var(--pn); color: var(--tx);
}
.c-top { display: flex; justify-content: space-between; align-items: center; font-size: 3.6cqw; }
.c-rar { padding: .6cqw 2.4cqw; border-radius: 3cqw; background: var(--acc); color: #111; font-weight: 700; letter-spacing: .08em; }
.c-zone { opacity: .7; letter-spacing: .1em; }
.c-name { font: 900 8.6cqw/1.05 var(--font-d); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-art {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 2.4cqw; overflow: hidden; flex: none;
  background: #000; box-shadow: 0 0 0 .5cqw rgba(255,255,255,.18); color: #fff; text-decoration: none;
}
.c-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-art img.px { image-rendering: pixelated; image-rendering: crisp-edges; }
.c-play {
  position: absolute; right: 2cqw; bottom: 2cqw; display: flex; align-items: center; gap: 1.2cqw;
  padding: 1cqw 2.6cqw 1cqw 2cqw; border-radius: 4cqw; background: rgba(251,114,153,.92); font-size: 3.6cqw; font-weight: 700;
  box-shadow: 0 0 3cqw rgba(0,0,0,.4);
}
.c-play::before { content: ''; border-left: 2.6cqw solid #fff; border-top: 1.6cqw solid transparent; border-bottom: 1.6cqw solid transparent; }
.c-bv { position: absolute; left: 2cqw; bottom: 2cqw; font: 600 3.2cqw var(--font-n); letter-spacing: .04em; padding: .4cqw 1.6cqw; border-radius: 1.4cqw; background: rgba(0,0,0,.55); }
.c-dm { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.c-dm span {
  position: absolute; left: 100%; white-space: nowrap; font-size: 4.2cqw; font-weight: 700; color: #fff;
  text-shadow: 0 0 .6cqw #000, 0 0 .6cqw #000; animation: dm linear infinite;
}
@keyframes dm { to { transform: translateX(calc(-100cqw - 100%)); } }
.card:not(.dm-on) .c-dm { display: none; }
.c-quote {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 4.6cqw; line-height: 1.35; padding: 1.6cqw 2.4cqw; border-radius: 2.4cqw;
  background: rgba(255,255,255,.07); font-weight: 600; min-height: 0;
}
.c-foot { display: flex; justify-content: space-between; align-items: center; font: 600 3.4cqw var(--font-n); letter-spacing: .1em; opacity: .7; }
.c-foot b { color: var(--pink); font-family: var(--font-b); letter-spacing: .02em; }
.c-new {
  position: absolute; top: -2.5cqw; left: -2.5cqw; z-index: 4; padding: 1cqw 3cqw; border-radius: 3cqw;
  background: #ff3b6b; color: #fff; font: 800 4.6cqw var(--font-n); letter-spacing: .1em; box-shadow: 0 0 4cqw #ff3b6b;
  transform: rotate(-8deg);
}
.c-cnt { position: absolute; right: 3cqw; bottom: 3cqw; z-index: 4; padding: .5cqw 2.6cqw; border-radius: 3cqw; background: rgba(0,0,0,.75); font: 800 7cqw var(--font-n); color: #fff; }

@container (max-width: 150px) {
  .c-quote, .c-foot, .c-play, .c-bv { display: none; }
  .c-panel { gap: 3cqw; }
  .c-name { font-size: 11cqw; }
  .c-top { font-size: 6cqw; }
  .c-zone { display: none; }
  .c-cnt { font-size: 13cqw; padding: .5cqw 4cqw; border-radius: 6cqw; }
  .c-new { font-size: 9cqw; padding: 1cqw 4cqw; top: -4cqw; left: -4cqw; }
}

.card.r-common { --fr: linear-gradient(160deg, #f4f8ff, #b4c3db 55%, #e6edf8); --pn: linear-gradient(180deg, #1a2742, #111a2d); --acc: #8fc7ff; }

.card.r-pixel {
  --fr: repeating-conic-gradient(#3dff8f 0 25%, #16b45d 0 50%) 0 0 / 5cqw 5cqw;
  --pn: #0b1a12; --acc: #4dff9a; --tx: #d8ffe8;
}
.card.r-pixel .face { border-radius: 2cqw; }
.card.r-pixel .c-panel { border-radius: 0; box-shadow: 0 0 0 1cqw #0b1a12, 0 0 0 2cqw #3dff8f; margin: 1.5cqw; height: calc(100% - 3cqw); }
.card.r-pixel .c-name { font-family: 'Courier New', var(--font-b); font-weight: 800; font-size: 7.8cqw; letter-spacing: 0; }
.card.r-pixel .c-art { border-radius: 0; }
.card.r-pixel .c-art::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); pointer-events: none; }
.card.r-pixel .c-quote { border-radius: 0; font-family: 'Courier New', var(--font-b); }

.card.r-gold {
  --fr: linear-gradient(135deg, #fff3b0 0%, #e0a400 22%, #fff0a8 42%, #a86d00 64%, #ffe48a 82%, #c78f00 100%);
  --pn: radial-gradient(120% 80% at 50% 0%, #3a2606, #160d02 70%); --acc: #ffd34d; --tx: #fff2cc;
}
.card.r-gold .c-name { background: linear-gradient(180deg, #fff7d1, #ffc22e 60%, #c98a00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .4cqw 0 rgba(0,0,0,.6)); }
.card.r-gold .c-quote { background: rgba(255,200,60,.1); box-shadow: inset 0 0 0 .4cqw rgba(255,210,80,.35); }

.card.r-rainbow {
  --fr: conic-gradient(from var(--ang), #ff5ec4, #ffd23f, #4dffb8, #4dc3ff, #b06bff, #ff5ec4);
  --pn: radial-gradient(120% 80% at 50% 0%, #2a1050, #0c0618 70%); --acc: #fff; --tx: #fff;
}
.card.r-rainbow .face { animation: spinang 4s linear infinite; }
@keyframes spinang { to { --ang: 360deg; } }
.card.r-rainbow .c-rar { background: linear-gradient(90deg, #ff5ec4, #ffd23f, #4dffb8, #4dc3ff); }
.card.r-rainbow .c-name { background: linear-gradient(90deg, #ff9ce0, #fff1a6, #9dffd9, #9ddcff, #d8b0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-holo, .c-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; }
.card.r-gold .c-shine {
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,230,.6) 48%, transparent 60%) no-repeat;
  background-size: 300% 100%; mix-blend-mode: overlay; animation: shine 5s ease-in-out infinite;
}
@keyframes shine { 0% { background-position: 130% 0; } 18%, 100% { background-position: -30% 0; } }
.card.r-rainbow .c-holo {
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.55), transparent 40%),
    repeating-linear-gradient(125deg, #ff5ec4 0%, #ffd23f 6%, #4dffb8 12%, #4dc3ff 18%, #b06bff 24%, #ff5ec4 30%);
  background-size: 100% 100%, 300% 300%;
  background-position: 0 0, var(--mx, 50%) var(--my, 50%);
  mix-blend-mode: color-dodge; opacity: .32;
}
.card.r-gold .c-holo {
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,240,180,.5), transparent 45%);
  mix-blend-mode: overlay;
}
.card .c-spark { position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit;
  background-image: radial-gradient(circle, #fff 0 .5cqw, transparent .6cqw), radial-gradient(circle, #fff 0 .35cqw, transparent .45cqw);
  background-size: 23cqw 29cqw, 17cqw 13cqw; background-position: 3cqw 5cqw, 11cqw 2cqw; mix-blend-mode: overlay; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .2; } }

.cback {
  --bc: #3da5ff; position: absolute; inset: 0; border-radius: 5cqw; container-type: inline-size;
  background-color: var(--bc);
  background-image: var(--maze), linear-gradient(160deg, rgba(255,255,255,.35), transparent 45%, rgba(0,0,0,.2));
  background-size: 100% 100%, 100% 100%;
  box-shadow: 0 0 6cqw var(--bc), 0 0 18cqw color-mix(in srgb, var(--bc) 50%, transparent), inset 0 0 0 1.2cqw rgba(255,255,255,.45);
  transition: background-color .35s ease, box-shadow .35s ease;
}
.cback.rb { background-image: var(--maze), conic-gradient(from var(--ang), #ff5ec4, #ffd23f, #4dffb8, #4dc3ff, #b06bff, #ff5ec4); animation: spinang 1.6s linear infinite; --bc: #ff7ad9; }
.cback .bk-logo { position: absolute; left: 50%; top: 50%; width: 30cqw; height: 22cqw; transform: translate(-50%, -50%); border: 2.4cqw solid #fff; border-radius: 5cqw; box-shadow: 0 0 4cqw #fff; background: var(--bc); }
.cback.rb .bk-logo { background: #fff3; }
.cback .bk-logo::before, .cback .bk-logo::after { content: ''; position: absolute; top: 6cqw; width: 6cqw; height: 2.4cqw; background: #fff; border-radius: 2cqw; }
.cback .bk-logo::before { left: 4cqw; transform: rotate(20deg); }
.cback .bk-logo::after { right: 4cqw; transform: rotate(-20deg); }

.rv-top {
  position: absolute; top: calc(14px + var(--sat)); left: 16px; right: 16px; z-index: 5;
  display: flex; align-items: center; gap: 12px; font: 700 16px var(--font-n); letter-spacing: .06em;
}
#rv-label { padding: 4px 12px; border-radius: 12px; background: rgba(255,255,255,.1); font-family: var(--font-b); font-size: 13px; }
#rv-count { flex: 1; color: var(--mut); font-variant-numeric: tabular-nums; }
.rv-stack { position: absolute; inset: 0; touch-action: none; }
.rv-stack .slot { position: absolute; left: 50%; top: 48%; transition: transform .35s cubic-bezier(.2,.9,.3,1.15), filter .35s; will-change: transform; }
.rv-stack .slot > .card, .rv-stack .slot > .cardwrap { transform: translate(-50%, -50%); }
.cardwrap { position: relative; container-type: inline-size; }
.cback.mystery { animation: mys 1.4s ease-in-out infinite; background-image: var(--maze), linear-gradient(135deg, #fff, #d9ccff 40%, #ffe9a8 70%, #fff); }
@keyframes mys { 50% { box-shadow: 0 0 10cqw #fff, 0 0 26cqw #c9a7ff, inset 0 0 0 1.2cqw #fff; } }
.rv-stack .slot .cback { position: absolute; }

.chase { position: absolute; top: calc(18px + var(--sat)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 3; transition: opacity .4s, transform .4s; }
.chase-t { font-size: 12px; letter-spacing: .2em; padding: 3px 12px; border-radius: 10px; background: rgba(255,255,255,.1); }
.chase-cards { display: flex; gap: 6px; }
.chase-cards .card:nth-child(1) { transform: rotate(-7deg) translateY(4px); }
.chase-cards .card:nth-child(3) { transform: rotate(7deg) translateY(4px); }
.bulk-stage { position: absolute; inset: 0; touch-action: none; perspective: 900px; }
.bulk-stack { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); }
.bulk-stack .layer { position: absolute; left: 0; top: 0; }
.bulk-stack .piece { position: absolute; inset: 0; }
.bulk-stack .piece .pack { position: absolute; inset: 0; width: 100%; }
.bulk-count {
  position: absolute; z-index: 40; right: -10px; top: -30px; padding: 4px 12px; border-radius: 14px;
  background: #ff3b6b; font: 800 22px var(--font-n); letter-spacing: .04em; box-shadow: 0 0 20px #ff3b6b; transform: rotate(6deg);
}
.slash-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
.float-num { position: absolute; z-index: 45; font: 800 34px var(--font-n); color: #ff4d7a; text-shadow: 0 0 12px #ff4d7a, 0 2px 0 #fff; pointer-events: none; }

.page-h { display: flex; align-items: baseline; justify-content: space-between; padding: calc(18px + var(--sat)) 16px 8px; }
.page-h h2 { margin: 0; font: 900 28px var(--font-d); letter-spacing: .06em; }
.page-h span { color: var(--mut); font: 600 15px var(--font-n); letter-spacing: .05em; }
#s-sum { background: radial-gradient(100% 50% at 50% 0%, color-mix(in srgb, var(--theme) 22%, transparent), transparent 70%), var(--bg); }
.sum-rar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 16px 12px; }
.sum-rar div { border-radius: 12px; padding: 8px 4px; text-align: center; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.sum-rar small { display: block; font-size: 11px; color: var(--mut); }
.sum-rar b { font: 800 22px var(--font-n); font-variant-numeric: tabular-nums; }
.col-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; padding: 6px 16px 24px; }
.col-grid .cell { position: relative; container-type: inline-size; cursor: pointer; }
.col-grid .cell .card { --cw: 100cqw; }
.col-grid .cell .lock {
  aspect-ratio: 5 / 7; border-radius: 5cqw; display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(135deg, #15141d 0 6px, #191822 6px 12px); border: 1px dashed rgba(255,255,255,.12);
  color: rgba(255,255,255,.3); font-size: 11px;
}
.col-grid .cell .lock b { display: block; font: 800 34px var(--font-n); color: rgba(255,255,255,.18); }
.col-grid .cell .lock.rr { border-color: color-mix(in srgb, var(--rc) 50%, transparent); }
.sum-grid .cell { animation: pop .45s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes pop { from { transform: scale(.6) translateY(20px); opacity: 0; } }
.sum-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; padding: 12px 16px calc(14px + var(--sab)); background: linear-gradient(transparent, var(--bg) 30%); }
.sum-actions .buy { height: 44px; font-size: 15px; }
.chips { display: flex; gap: 8px; padding: 4px 16px 10px; overflow-x: auto; }
.chips button { flex: none; padding: 6px 14px; border-radius: 16px; background: rgba(255,255,255,.06); font-size: 13px; color: var(--mut); }
.chips button.on { background: var(--fg); color: #111; font-weight: 600; }
.me-box { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 24px; }
.me-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.me-stats div { padding: 14px; border-radius: 14px; background: var(--panel); }
.me-stats small { color: var(--mut); font-size: 12px; }
.me-stats b { display: block; font: 800 28px var(--font-n); margin-top: 2px; font-variant-numeric: tabular-nums; }
.me-row { display: flex; align-items: center; justify-content: space-between; padding: 14px; border-radius: 14px; background: var(--panel); }
.me-row button { padding: 6px 14px; border-radius: 14px; background: rgba(255,255,255,.08); font-size: 13px; }
.me-row button.danger { color: #ff7a8a; }
.me-note { color: var(--mut); font-size: 12px; line-height: 1.6; padding: 0 2px; }

.cine { position: absolute; inset: 0; z-index: 30; display: none; background: radial-gradient(70% 50% at 50% 46%, color-mix(in srgb, var(--cg, #3da5ff) 30%, #000), #000 75%); transition: background .4s; touch-action: none; }
.cine.on { display: block; }
.cine-stage { position: absolute; left: 50%; top: 45%; perspective: 1100px; }
.cine-flip { position: relative; transform-style: preserve-3d; will-change: transform; }
.cine-flip > .cback, .cine-flip > .card, .cine-flip > .face2 { position: absolute; left: 0; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cine-flip > .b2 { transform: rotateY(180deg); }
.cine-glow { position: absolute; inset: -1.5%; border-radius: 6.5%/5%; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 5px #fff, 0 0 0 2px #fff, 0 0 34px 10px #fff, 0 0 100px 24px color-mix(in srgb, var(--cg) 70%, #fff); transition: opacity .3s; }
.cine-quote {
  position: absolute; left: 16px; right: 16px; top: 74%; text-align: center; pointer-events: none;
  font: 900 30px/1.2 var(--font-d); letter-spacing: .04em; color: #fff; text-wrap: balance;
  text-shadow: 0 0 18px var(--cg), 0 3px 0 rgba(0,0,0,.5);
}
.cine-quote span { display: inline-block; opacity: 0; transform: translateY(18px) scale(.6); animation: qin .5s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes qin { to { opacity: 1; transform: none; } }
.cine-rar { position: absolute; left: 0; right: 0; top: calc(16px + var(--sat)); text-align: center; font: 900 24px var(--font-d); letter-spacing: .3em; opacity: 0; transition: opacity .4s; }
.cine-tip { position: absolute; left: 0; right: 0; bottom: calc(26px + var(--sab)); text-align: center; font-size: 13px; color: rgba(255,255,255,.6); letter-spacing: .1em; animation: hintp 1.6s ease-in-out infinite; }
.cine-skipall { position: absolute; right: 16px; top: calc(14px + var(--sat)); padding: 6px 12px; border-radius: 14px; font-size: 12px; background: rgba(255,255,255,.1); z-index: 2; }

.modal { position: absolute; inset: 0; z-index: 45; display: none; }
.modal.on { display: block; }
.modal-bg { position: absolute; inset: 0; background: rgba(4,4,8,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 100%; overflow-y: auto; padding: 16px 16px calc(18px + var(--sab)); animation: up .35s cubic-bezier(.2,.9,.3,1); touch-action: pan-y; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet.panel { background: var(--bg2); border-radius: 20px 20px 0 0; border-top: 1px solid var(--line); }
.sheet h3 { margin: 0 0 4px; font: 900 24px var(--font-d); letter-spacing: .05em; }
.sheet p { margin: 0; color: var(--mut); font-size: 13px; line-height: 1.6; }
.detail { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 30px; }
.tilt { perspective: 900px; touch-action: none; }
.tilt .card { transition: transform .15s ease-out; }
.detail-meta { text-align: center; }
.detail-meta b { font: 900 26px var(--font-d); letter-spacing: .04em; }
.detail-meta small { display: block; color: var(--mut); margin-top: 2px; }
.row-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 360px; }
a.buy { text-decoration: none; }
.watch { --theme: #fb7299; }
.share-opts { display: grid; gap: 10px; margin-top: 14px; }
.share-opts button, .share-opts a { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--panel); text-align: left; text-decoration: none; color: var(--fg); }
.share-opts i { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 16px; }
.share-opts span { display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.share-opts small { font-weight: 400; color: var(--mut); font-size: 12px; }
.copybox { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #0e0d14; border: 1px solid var(--line); font-size: 12px; line-height: 1.6; word-break: break-all; user-select: text; -webkit-user-select: text; color: #d9d6e6; }
.share-img { display: block; width: 100%; max-width: 340px; margin: 12px auto 0; border-radius: 14px; user-select: auto; -webkit-user-select: auto; -webkit-touch-callout: default; }
.odds { display: grid; gap: 8px; margin: 12px 0; }
.odds div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel); }
.odds i { width: 12px; height: 12px; border-radius: 4px; }
.odds span { flex: 1; }
.odds b { font: 700 17px var(--font-n); font-variant-numeric: tabular-nums; }
.close-x { position: absolute; top: calc(12px + var(--sat)); right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); z-index: 3; }
.close-x::before, .close-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: #fff; }
.close-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.shared-tag { font-size: 13px; padding: 4px 12px; border-radius: 12px; background: rgba(251,114,153,.18); color: #ffb3c9; }

.loading { position: absolute; inset: 0; z-index: 35; display: none; place-items: center; backdrop-filter: blur(16px) brightness(.6); -webkit-backdrop-filter: blur(16px) brightness(.6); }
.loading.on { display: grid; }
.spin { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: #fff; animation: rot .8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.toast { position: absolute; left: 50%; top: 18%; z-index: 80; transform: translate(-50%, -10px); padding: 10px 18px; border-radius: 20px; background: rgba(20,20,28,.94); border: 1px solid var(--line); font-size: 14px; opacity: 0; pointer-events: none; transition: all .25s; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .pack.live .pk-sheen, .card.r-gold .c-shine, .card .c-spark, .c-dm span { animation: none; }
}

#app::after { content: ''; position: absolute; inset: 0; z-index: 90; pointer-events: none; background: var(--grain); background-size: 220px; opacity: .07; mix-blend-mode: overlay; }
.space::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.7)); z-index: 1; }
.tear-pack { perspective: 900px; }
.tear-pack .piece.slice { position: absolute; inset: 0; z-index: 3; will-change: transform; transform-style: preserve-3d; }
.tear-edge { position: absolute; z-index: 4; height: 1.6%; margin-top: -.5%; pointer-events: none; background: #fff;
  -webkit-mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) top / 7px 4px repeat-x, linear-gradient(#000 0 0) bottom / 100% calc(100% - 3px) no-repeat;
  mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) top / 7px 4px repeat-x, linear-gradient(#000 0 0) bottom / 100% calc(100% - 3px) no-repeat;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px var(--theme)); }
.rv-stack .slot.grab { transition: none; }
.rv-stack .slot.grab .face { box-shadow: 0 6cqw 16cqw rgba(0,0,0,.7); }

#gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.gl .ghost .pk, .gl .ghost.pack > .pk { opacity: 0 !important; box-shadow: none !important; }
.gl .ghost .tear-edge, .gl .refl { display: none; }
.gl .home-car .ghost .pk { visibility: hidden; }
.tear-ovl { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; }
.gl .bulk-stage { z-index: 5; }

:root {
  --glass: rgba(255, 255, 255, .055);
  --glass2: rgba(255, 255, 255, .09);
  --gb: rgba(255, 255, 255, .1);
  --gb2: rgba(255, 255, 255, .18);
  --tabh: 64px;
}
.glass, .pk-stats, .tabbar, .ghost-btn, .back-x, .chips, .toast, .rv-top > *, .coins, .ibtn {
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

.home-bg {
  background:
    radial-gradient(60% 30% at 50% 66%, color-mix(in srgb, var(--theme) 22%, transparent), transparent 70%),
    radial-gradient(85% 45% at 50% 28%, color-mix(in srgb, var(--theme) 30%, transparent), transparent 72%),
    linear-gradient(112deg, transparent 0 30%, rgba(255,255,255,.035) 30.2% 34%, transparent 34.2% 58%, rgba(255,255,255,.03) 58.2% 60%, transparent 60.2%),
    repeating-linear-gradient(112deg, transparent 0 58px, rgba(255,255,255,.018) 58px 59px),
    linear-gradient(180deg, color-mix(in srgb, var(--theme) 16%, #0c1820) 0%, #0a0d13 48%, #07070b 100%);
}
.home-bg::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 120px;
  background: linear-gradient(#000a, transparent);
}

.topbar { padding-top: calc(10px + var(--sat)); }
.logo { font-size: 18px; }
.logo b { background: linear-gradient(90deg, #fff 30%, color-mix(in srgb, var(--theme) 70%, #fff)); -webkit-background-clip: text; background-clip: text; }
.ibtn { background: var(--glass); border: 1px solid var(--gb); }
.coins {
  height: 36px; border-radius: 18px; padding-left: 6px; gap: 7px;
  background: rgba(10, 10, 16, .55); border: 1px solid var(--gb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.coins .coin { width: 22px; height: 22px; vertical-align: 0; }
.coins #btn-add {
  width: 30px; height: 30px; margin: 0 3px 0 4px; border-radius: 50%;
  background: linear-gradient(180deg, #3ee08f, #12a865); box-shadow: 0 0 12px rgba(34,194,122,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.coin { background: radial-gradient(circle at 35% 30%, #fffbe0, #ffd54a 40%, #e09a00 75%, #a86800); box-shadow: inset 0 0 0 1.5px rgba(255,240,180,.6), 0 0 6px rgba(255,190,40,.45); }

.home-info { gap: 12px; padding-bottom: 16px; }
.dots i { background: rgba(255,255,255,.22); }
.dots i.on { width: 20px; background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--theme) 60%, #fff)); box-shadow: 0 0 8px color-mix(in srgb, var(--theme) 70%, transparent); }
#pk-name { font-size: 28px; letter-spacing: .1em; text-shadow: 0 0 24px color-mix(in srgb, var(--theme) 55%, transparent); }
.peek { margin-top: -6px; color: rgba(255,255,255,.7); background: var(--glass); border: 1px solid var(--gb); padding: 5px 12px; border-radius: 14px; font-size: 12px; }
.peek .eye { background: rgba(255,255,255,.75); width: 14px; height: 14px; }
.pk-stats {
  align-items: center; padding: 11px 4px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid var(--gb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pk-stats div + div { border-left: 1px solid var(--gb); }
.pk-stats .mid { border-top: 0; padding-top: 0; }
.pk-stats small { font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.5); }
.pk-stats b { font-size: 20px; }
.pk-stats .mid b { font-size: 20px; letter-spacing: .06em; }

.buy {
  position: relative; overflow: hidden; height: 54px; border-radius: 27px; font: 900 18px var(--font-d); letter-spacing: .12em;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 50%, rgba(0,0,0,.18)),
    linear-gradient(90deg, color-mix(in srgb, var(--theme) 80%, #000), var(--theme) 30%, color-mix(in srgb, var(--theme) 75%, #fff) 50%, var(--theme) 70%, color-mix(in srgb, var(--theme) 80%, #000));
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--theme) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--theme) 14%, transparent), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.2);
}
.buy::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); animation: buyshine 3.2s ease-in-out infinite; pointer-events: none;
}
@keyframes buyshine { 0%, 55% { left: -40%; } 85%, 100% { left: 120%; } }
.buy .price { background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.18); font-size: 18px; letter-spacing: .02em; padding: 3px 11px; }
.buy2 {
  height: 46px; border-radius: 23px; font: 700 14px var(--font-d); letter-spacing: .06em;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid color-mix(in srgb, var(--theme) 40%, rgba(255,255,255,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.buy2 .price { background: rgba(0,0,0,.3); }

.screen.tabbed { bottom: calc(var(--tabh) + 14px + var(--sab)); }
.tabbar {
  left: 16px; right: 16px; bottom: calc(10px + var(--sab)); height: var(--tabh); padding: 6px; gap: 4px;
  border-radius: 24px; border: 1px solid var(--gb); background: rgba(16, 15, 24, .72);
  box-shadow: 0 12px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.tabbar.hide { transform: translateY(160%); }
.tabbar button { position: relative; border-radius: 18px; font-size: 11px; letter-spacing: .08em; gap: 4px; transition: color .25s; }
.tabbar button::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--theme) 16%, transparent); border: 1px solid color-mix(in srgb, var(--theme) 30%, transparent); opacity: 0; transform: scale(.8); transition: all .3s cubic-bezier(.2,.9,.3,1.2); }
.tabbar button.on::before { opacity: 1; transform: none; }
.tabbar button.on .ti { background: var(--theme); filter: drop-shadow(0 0 6px var(--theme)); }
.tabbar .ti { position: relative; }

.space { background: radial-gradient(120% 70% at 50% 45%, color-mix(in srgb, var(--theme) 10%, #0b0a14), #050509 70%); }
.space-glow { background: radial-gradient(55% 34% at 50% 47%, color-mix(in srgb, var(--theme) 28%, transparent), transparent 72%), radial-gradient(40% 8% at 50% 80%, color-mix(in srgb, var(--theme) 25%, transparent), transparent 70%); }

.hint {
  left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px);
  padding: 9px 16px 9px 14px; border-radius: 20px; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.06); border: 1px solid var(--gb); color: rgba(255,255,255,.72); font-size: 13px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.hint::before {
  content: ''; flex: none; width: 16px; height: 16px; background: var(--theme);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V4.5a1.5 1.5 0 013 0V10h.5V8.5a1.5 1.5 0 013 0V10h.5V9.5a1.5 1.5 0 013 0V15a7 7 0 01-7 7h-1a6 6 0 01-5-2.7L3.3 15a1.6 1.6 0 012.6-1.9L9 16z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V4.5a1.5 1.5 0 013 0V10h.5V8.5a1.5 1.5 0 013 0V15a7 7 0 01-7 7h-1a6 6 0 01-5-2.7L3.3 15a1.6 1.6 0 012.6-1.9L9 16z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: hfinger 1.6s ease-in-out infinite;
}
@keyframes hfinger { 50% { transform: translateX(4px); } }
.hint.pulse { animation: none; }
.back-x { background: var(--glass); border: 1px solid var(--gb); }
.ghost-btn { padding: 9px 16px; border-radius: 18px; background: var(--glass); border: 1px solid var(--gb); color: rgba(255,255,255,.85); font-weight: 600; letter-spacing: .06em; }
#btn-autotear { bottom: calc(82px + var(--sab)); right: 50%; transform: translateX(50%); }

.rv-top { gap: 10px; }
#rv-label { padding: 6px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--gb); font: 700 13px var(--font-d); letter-spacing: .06em; white-space: nowrap; }
#rv-count { flex: none; color: #fff; font-size: 15px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.rv-bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; backdrop-filter: none !important; }
.rv-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--theme) 70%, #fff), #fff); box-shadow: 0 0 8px var(--theme); transition: width .35s cubic-bezier(.2,.9,.3,1); }
#btn-skip { border-radius: 14px; }

.page-h { position: sticky; top: 0; z-index: 3; padding-bottom: 12px; align-items: flex-end;
  background: linear-gradient(180deg, rgba(9,9,15,.92) 60%, rgba(9,9,15,0)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.page-h h2 { font-size: 30px; letter-spacing: .1em; }
.col-sum { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.col-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; border: 1px solid var(--gb); }
.col-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4dc3ff, #b06bff, #ff5ec4, #ffd23f); box-shadow: 0 0 10px rgba(255,94,196,.5); transition: width .6s ease; }
.col-rar { display: flex; gap: 6px; flex-wrap: wrap; }
.col-rar span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 10px; background: var(--glass); border: 1px solid var(--gb); font-size: 11px; color: rgba(255,255,255,.75); }
.col-rar span i { width: 7px; height: 7px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 6px var(--rc); }
.col-rar b { font: 700 13px var(--font-n); color: #fff; }

.chips { margin: 0 16px 12px; padding: 4px; gap: 4px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--gb); }
.chips button { flex: 1; padding: 7px 0; border-radius: 12px; background: none; font-weight: 600; transition: all .25s; }
.chips button.on { background: linear-gradient(180deg, #fff, #dcd8ea); color: #15131f; box-shadow: 0 2px 10px rgba(0,0,0,.4); }

.col-grid { gap: 14px 10px; }
.col-grid .cell { transition: transform .15s ease; }
.col-grid .cell:active { transform: scale(.95); }
.col-grid .cell .lock {
  position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rc, #fff) 30%, transparent);
  background: radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--rc, #fff) 14%, transparent), transparent 70%), linear-gradient(160deg, #191826, #0e0d15);
  box-shadow: inset 0 0 0 3cqw rgba(255,255,255,.02);
}
.col-grid .cell .lock::before { content: ''; position: absolute; inset: 6cqw; border-radius: 3cqw; border: 1px dashed color-mix(in srgb, var(--rc, #fff) 30%, transparent); }
.col-grid .cell .lock b { font-size: 40cqw; color: color-mix(in srgb, var(--rc, #fff) 40%, transparent); text-shadow: 0 0 12cqw color-mix(in srgb, var(--rc, #fff) 60%, transparent); line-height: 1; }
.col-grid .cell .lock span { font-size: 9cqw; letter-spacing: .1em; }

#s-sum { background: radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--theme) 28%, transparent), transparent 70%), linear-gradient(180deg, #0c0b14, #07070b); }
#s-sum .page-h { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; position: relative; }
.sum-rar { gap: 8px; }
.sum-rar div { position: relative; overflow: hidden; border-radius: 14px; padding: 10px 4px 8px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid var(--gb); }
.sum-rar b { font-size: 26px; text-shadow: 0 0 14px currentColor; }
.sum-actions {
  margin: 0 12px calc(10px + var(--sab)); padding: 8px; border-radius: 26px; bottom: 10px;
  background: rgba(16,15,24,.75); border: 1px solid var(--gb); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.sum-actions .buy, .sum-actions .buy2 { height: 46px; font-size: 14px; letter-spacing: .06em; }

.me-card {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 22px;
  background: radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--theme) 35%, transparent), transparent 60%), linear-gradient(160deg, #1d1b2b, #121019);
  border: 1px solid var(--gb); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.me-card::after { content: ''; position: absolute; right: -30px; top: -40px; width: 160px; height: 160px; border-radius: 50%; border: 22px solid rgba(255,255,255,.035); }
.me-ava { flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--theme), #00aeec); box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 0 20px color-mix(in srgb, var(--theme) 60%, transparent); }
.me-ava i { width: 30px; height: 23px; border: 3px solid #fff; border-radius: 7px; position: relative; }
.me-ava i::before, .me-ava i::after { content: ''; position: absolute; top: 6px; width: 5px; height: 3px; background: #fff; border-radius: 2px; }
.me-ava i::before { left: 4px; } .me-ava i::after { right: 4px; }
.me-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.me-id b { font: 900 19px var(--font-d); letter-spacing: .06em; }
.me-id b em { font: 800 13px var(--font-n); font-style: normal; margin-left: 8px; padding: 1px 7px; border-radius: 8px; background: linear-gradient(90deg, #ffd23f, #ff9d3f); color: #2a1600; vertical-align: 2px; }
.me-xp { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.me-xp i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--theme), #fff); }
.me-id small { color: rgba(255,255,255,.5); font-size: 11px; }
.me-stats div { position: relative; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid var(--gb); }
.me-stats b { font-size: 30px; }
.me-list { border-radius: 18px; overflow: hidden; border: 1px solid var(--gb); background: rgba(255,255,255,.035); }
.me-row { border-radius: 0; background: none; padding: 14px 16px; }
.me-row + .me-row { border-top: 1px solid var(--gb); }
.me-row button { background: var(--glass2); border: 1px solid var(--gb); font-weight: 600; }

.sheet.panel {
  background: linear-gradient(180deg, rgba(30,28,44,.92), rgba(16,15,24,.96)); border: 1px solid var(--gb); border-bottom: 0; border-radius: 28px 28px 0 0;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding-top: 26px; box-shadow: 0 -20px 50px rgba(0,0,0,.5);
}
.sheet.panel::before { content: ''; position: absolute; left: 50%; top: 9px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255,255,255,.22); }
.share-opts button, .share-opts a, .odds div { background: rgba(255,255,255,.045); border: 1px solid var(--gb); border-radius: 16px; position: relative; }
.share-opts button::after, .share-opts a::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-top: 2px solid rgba(255,255,255,.4); border-right: 2px solid rgba(255,255,255,.4); transform: translateY(-50%) rotate(45deg); }
.share-opts i { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px rgba(0,0,0,.3); }
.odds div { overflow: hidden; }
.odds .bar { position: absolute; left: 0; top: 0; bottom: 0; opacity: .14; pointer-events: none; }
.close-x { background: var(--glass); border: 1px solid var(--gb); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.detail-meta b { font-size: 24px; letter-spacing: .08em; }

.loading { background: rgba(5,5,9,.4); }
.loading.on { display: grid; }
.spin { width: 64px; height: 64px; border: 0; background: conic-gradient(from 0deg, transparent, var(--theme), #fff); -webkit-mask: radial-gradient(circle, transparent 26px, #000 27px); mask: radial-gradient(circle, transparent 26px, #000 27px); filter: drop-shadow(0 0 10px var(--theme)); animation: rot .7s linear infinite; }
.loading::after { content: '正在出包…'; position: absolute; left: 0; right: 0; top: calc(50% + 50px); text-align: center; font: 700 13px var(--font-d); letter-spacing: .3em; color: rgba(255,255,255,.75); }
.toast { background: rgba(24,22,34,.82); border-color: var(--gb2); box-shadow: 0 10px 30px rgba(0,0,0,.5); font-weight: 600; }

.chase-t { background: var(--glass); border: 1px solid var(--gb); letter-spacing: .3em; font-weight: 700; }
.bulk-count { background: linear-gradient(180deg, #ff6b8f, #e8204f); border: 2px solid rgba(255,255,255,.8); }

#s-sum.on { display: flex; flex-direction: column; }
#s-sum .sum-grid { flex: 1 0 auto; align-content: start; }
.sum-actions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.sum-actions .buy { grid-column: auto; }

:root {
  --gloss: linear-gradient(180deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.12) 45%, rgba(255,255,255,0) 50%, rgba(0,0,0,.14) 100%);
  --gloss-p: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03) 42%, rgba(255,255,255,0) 58%, rgba(255,255,255,.035));
  --plastic: #17171e;
}
.home-bg {
  background:
    radial-gradient(70% 34% at 50% 34%, color-mix(in srgb, var(--theme) 16%, transparent), transparent 70%),
    linear-gradient(180deg, #13323a 0%, #0c1a1f 34%, #08090c 62%, #060608 100%);
}
.home-bg::after { display: none; }
.home-car { height: 48%; }

.logo { font-size: 15px; opacity: .9; }
.logo b { background: none; color: #fff; -webkit-text-fill-color: #fff; }
.logo-tv { width: 22px; height: 17px; border-width: 2px; }
.ibtn, .coins, .back-x, .close-x, .ghost-btn, .hint, #rv-label, .chase-t, .peek, .toast {
  background: var(--gloss-p), rgba(14,14,19,.82); border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.35);
}
.coins #btn-add { background: var(--gloss), #22c27a; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }

.home-info { gap: 9px; padding-bottom: 14px; }
#pk-name { font-size: 26px; letter-spacing: .08em; text-shadow: none; }
.peek { background: none; border: 0; box-shadow: none; color: rgba(255,255,255,.62); margin-top: -4px; }
.pk-stats { grid-template-columns: 1fr 1fr; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 10px 0 2px; border-top: 1px solid rgba(255,255,255,.1); width: 78%; }
.pk-stats > div:last-child { display: none; }
.pk-stats div + div { border-left: 0; }
.pk-stats small { font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.55); }
.pk-stats b { font-size: 24px; }
.pk-stats .mid b { font-size: 22px; }

.buy {
  border-radius: 999px; height: 54px; font: 800 17px var(--font-d); letter-spacing: .1em;
  background: var(--gloss), var(--theme);
  border: 1px solid color-mix(in srgb, var(--theme) 55%, #fff);
  box-shadow: 0 10px 28px -8px var(--theme), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.18);
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.buy::after { opacity: .55; }
.buy .price { background: rgba(0,0,0,.24); border: 0; }
.buy2 {
  border-radius: 999px; background: var(--gloss-p), var(--plastic); border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.4); font-weight: 700;
}

.screen.tabbed { bottom: calc(58px + var(--sab)); }
.tabbar {
  left: 0; right: 0; bottom: 0; height: calc(58px + var(--sab)); padding: 0 0 var(--sab); gap: 0;
  border-radius: 0; border: 0; border-top: 1px solid rgba(255,255,255,.08); background: rgba(6,6,9,.94); box-shadow: none;
}
.tabbar button::before { display: none; }
.tabbar button { font-size: 10px; letter-spacing: .04em; }
.tabbar button.on { color: #fff; }
.tabbar button.on .ti { background: var(--theme); filter: none; }

.space { background: radial-gradient(110% 60% at 50% 45%, #121218, #040406 70%); }

.page-h { background: linear-gradient(180deg, rgba(8,8,11,.96) 60%, rgba(8,8,11,0)); }
.page-h h2 { font-size: 28px; }
#s-col, #s-me { background: linear-gradient(180deg, #101318, #07070a 40%); }
#s-sum { background: radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--theme) 18%, transparent), transparent 70%), linear-gradient(180deg, #0d0d12, #060608); }
.sum-rar div, .me-stats div, .me-list, .me-card, .odds div, .share-opts button, .share-opts a, .chips, .sum-actions {
  background: var(--gloss-p), var(--plastic); border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.35);
}
.me-card { background: var(--gloss-p), radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--theme) 26%, transparent), transparent 60%), var(--plastic); }
.me-card::after { display: none; }
.chips button.on { background: var(--gloss), #ecebf2; color: #121118; box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(0,0,0,.4); }
.col-bar i { background: var(--theme); box-shadow: none; }
.sheet.panel { background: var(--gloss-p), #111116; border: 1px solid rgba(255,255,255,.09); border-bottom: 0; }

.detail { padding-top: 44px; gap: 18px; }
.slab {
  position: relative; padding: 9px 9px 11px; border-radius: 14px; transition: transform .15s ease-out;
  background: linear-gradient(155deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 38%, rgba(255,255,255,.03) 62%, rgba(255,255,255,.16));
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 30px 50px -10px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 4px rgba(255,255,255,.05);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.slab::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 42%, transparent 52%); }
.slab-lbl {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; padding: 5px 8px; border-radius: 5px;
  background: linear-gradient(#fff, #e7e4ee); border: 2px solid var(--rc); color: #26232f; font-size: 10px; line-height: 1.35;
}
.slab-lbl b { font-weight: 900; }
.slab-lbl em { font: 800 17px var(--font-n); font-style: normal; color: color-mix(in srgb, var(--rc) 70%, #000); }
.slab-card .card { margin: 0 auto; }
.tilt .card { transition: none; }
.detail-meta b { font: 800 30px var(--font-d); letter-spacing: .04em; color: #fff; background: none; -webkit-text-fill-color: #fff; filter: none; }
.detail-meta small { font-size: 12px; }
.seg-btns { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 360px; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.seg-btns > * { height: 50px; display: grid; place-items: center; font: 700 15px var(--font-d); letter-spacing: .06em; color: #fff; text-decoration: none; background: var(--gloss-p), var(--plastic); }
.seg-btns .seg-on { background: var(--gloss), #1fae6b; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }

:root {
  --lacq: linear-gradient(180deg, #3a3a45 0%, #1b1b22 44%, #08080b 50%, #0e0e13 82%, #1a1a21 100%);
  --streak: linear-gradient(104deg, transparent 14%, rgba(255,255,255,.2) 19%, rgba(255,255,255,.04) 24%, transparent 26%, transparent 64%, rgba(255,255,255,.07) 67%, transparent 71%);
  --chrome: linear-gradient(180deg,
    color-mix(in srgb, var(--theme) 30%, #fff) 0%, color-mix(in srgb, var(--theme) 80%, #fff) 22%,
    var(--theme) 46%, color-mix(in srgb, var(--theme) 55%, #000) 50%,
    var(--theme) 70%, color-mix(in srgb, var(--theme) 60%, #fff) 100%);
  --rim: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06);
}

.home-bg {
  background:
    radial-gradient(60% 22% at 50% 62%, color-mix(in srgb, var(--theme) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #123038 0%, #0b1a20 30%, #07090c 50%, #050507 70%, #000 100%);
}
.logo b { background: linear-gradient(180deg, #fff 0%, #dfe3ee 46%, #8c90a0 52%, #f2f3f8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.buy {
  background: var(--streak), var(--chrome);
  border: 1px solid color-mix(in srgb, var(--theme) 40%, #fff);
  box-shadow: 0 14px 30px -10px var(--theme), 0 2px 0 color-mix(in srgb, var(--theme) 40%, #000), var(--rim);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.buy2, .ibtn, .coins, .back-x, .close-x, .ghost-btn, .hint, #rv-label, .chase-t, .toast,
.sum-rar div, .me-stats div, .me-list, .odds div, .share-opts button, .share-opts a, .chips, .sum-actions, .seg-btns > * {
  background: var(--streak), var(--lacq);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: var(--rim), 0 10px 22px rgba(0,0,0,.5);
}
.peek { background: none; border: 0; box-shadow: none; }
.me-card { background: var(--streak), radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--theme) 30%, transparent), transparent 60%), var(--lacq); box-shadow: var(--rim), 0 12px 26px rgba(0,0,0,.5); }
.seg-btns > .seg-on, .chips button.on { background: var(--streak), var(--chrome); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.coins #btn-add { background: linear-gradient(180deg, #b6ffd9 0%, #3fe196 30%, #1db56c 50%, #128a50 52%, #23c27a 100%); }

.tabbar { background: linear-gradient(180deg, #1c1c23 0%, #0d0d11 48%, #030304 52%, #08080b 100%); border-top: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 -10px 24px rgba(0,0,0,.5); }
.tabbar button.on .ti { background: var(--chrome); }
.sheet.panel { background: var(--streak), linear-gradient(180deg, #24242c 0%, #121217 8%, #0a0a0d 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }

.space::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0, rgba(255,255,255,0) 1px, rgba(0,0,0,.25) 40%, rgba(0,0,0,.6));
}

.cslab-back, .cslab-front { position: absolute; border-radius: 5.5% / 3.6%; pointer-events: none; }
.cslab-back {
  background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.05) 38%, rgba(255,255,255,.03) 64%, rgba(255,255,255,.14));
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 40px 70px -16px rgba(0,0,0,.85), inset 0 0 0 4px rgba(255,255,255,.05), inset 0 0 30px rgba(255,255,255,.06);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.cslab-front {
  overflow: hidden; border: 1.5px solid rgba(255,255,255,.6);
  background: linear-gradient(118deg, rgba(255,255,255,.16), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 72%, rgba(255,255,255,.1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.4), inset 0 0 0 4px rgba(255,255,255,.07);
  transition: box-shadow .5s;
}
.cslab-front.lit { box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.5), inset 0 0 0 4px rgba(255,255,255,.1), 0 0 34px -4px var(--rc), 0 0 90px -20px var(--rc); }
.cslab-lbl {
  display: flex; justify-content: space-between; align-items: center; gap: 3cqw; padding: 0 3.6cqw; border-radius: 1.6cqw;
  background: linear-gradient(180deg, #fff 0%, #f1eff6 48%, #dcd8e6 52%, #f4f2f8 100%); border: .9cqw solid var(--rc); color: #24212c;
  box-shadow: 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.1);
}
.cslab-front.rb .cslab-lbl { border-color: transparent; background: linear-gradient(180deg, #fff 0%, #f1eff6 48%, #dcd8e6 52%, #f4f2f8 100%) padding-box, linear-gradient(90deg, #ff3fd0, #ffb000, #1fe07a, #3da5ff, #a35cff) border-box; }
.cslab-lbl > div { clip-path: inset(0 100% 0 0); transition: clip-path .55s steps(12); }
.cslab-front.lit .cslab-lbl > div { clip-path: inset(0 0 0 0); }
.cslab-front.lit .cl-r { transition-delay: .3s; }
.cl-l { min-width: 0; line-height: 1.25; }
.cl-l span { display: block; font-size: 3.3cqw; color: #6c6878; white-space: nowrap; }
.cl-l b { display: block; font: 900 6cqw/1.15 var(--font-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-r { text-align: center; line-height: 1; flex: none; }
.cl-r span { display: block; font-size: 2.9cqw; font-weight: 800; color: #6c6878; letter-spacing: .08em; }
.cl-r em { display: block; font: 900 12cqw/1 var(--font-n); font-style: normal; color: color-mix(in srgb, var(--rc) 65%, #000); }
.cslab-shine { position: absolute; inset: -10% -40%; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.08) 44%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.08) 56%, transparent 62%); transform: translateX(-80%); }
.cslab-front.shine .cslab-shine { animation: slabShine 1.2s cubic-bezier(.3,.1,.3,1) forwards; }
@keyframes slabShine { to { transform: translateX(80%); } }

.bulk-row { gap: 12px; }
.bx {
  --ac: var(--theme);
  position: relative; overflow: hidden; height: 66px; border-radius: 20px; padding: 0 12px 0 10px;
  display: flex; align-items: center; gap: 10px; color: #fff; text-align: left;
  background: var(--streak), linear-gradient(180deg, #3a3a45 0%, #1d1d24 44%, #08080b 50%, #101015 82%, #1d1d25 100%);
  border: 1.5px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ac) 75%, #fff), 0 12px 26px -8px color-mix(in srgb, var(--ac) 70%, transparent), 0 4px 0 #000, var(--rim);
  transition: transform .12s, box-shadow .12s;
}
.bx:active { transform: translateY(3px) scale(.98); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ac) 75%, #fff), 0 6px 14px -6px color-mix(in srgb, var(--ac) 70%, transparent), 0 1px 0 #000, var(--rim); }
.bx-gold { --ac: #ffc23d; }
.bx-stack { position: relative; flex: none; width: 34px; height: 44px; }
.bx-stack i {
  position: absolute; left: 50%; top: 50%; width: 24px; height: 36px; margin: -18px 0 0 -12px; border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0 3px, transparent 3px calc(100% - 3px), rgba(255,255,255,.4) calc(100% - 3px)),
    linear-gradient(115deg, rgba(255,255,255,.45), rgba(255,255,255,0) 40%, rgba(255,255,255,.2) 60%, rgba(255,255,255,0) 75%),
    linear-gradient(160deg, color-mix(in srgb, var(--ac) 70%, #fff), var(--ac) 45%, color-mix(in srgb, var(--ac) 45%, #000));
  box-shadow: 0 2px 5px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.25);
}
.bx-stack i:nth-child(1) { transform: translate(-7px, 2px) rotate(-14deg); filter: brightness(.6); }
.bx-stack i:nth-child(2) { transform: translate(6px, 2px) rotate(12deg); filter: brightness(.75); }
.bx-stack i:nth-child(3) { transform: rotate(-2deg); }
.bx-gold .bx-stack i:nth-child(3) { transform: translate(-3px, 0) rotate(-6deg); filter: brightness(.88); }
.bx-gold .bx-stack i:nth-child(4) { transform: translate(3px, -1px) rotate(4deg); }
.bx-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.bx-t b { font: 900 17px/1 var(--font-d); letter-spacing: .08em; white-space: nowrap; }
.bx-gold .bx-t b { background: linear-gradient(180deg, #fff6d6 0%, #ffd35a 46%, #c98a00 52%, #ffe28a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bx .price { align-self: flex-start; font-size: 13px; padding: 1px 7px 1px 3px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; }
.bx-n {
  position: absolute; right: 9px; top: 7px; font: 900 12px/1 var(--font-n); font-style: normal; letter-spacing: .02em;
  padding: 3px 6px; border-radius: 7px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 40%, #fff) 0%, var(--ac) 48%, color-mix(in srgb, var(--ac) 60%, #000) 52%, var(--ac) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.4);
}
.bx-gold .bx-n { color: #3a2400; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.bx-sheen { position: absolute; inset: -20% -60%; pointer-events: none; background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%); transform: translateX(-70%); animation: bxSheen 3.6s ease-in-out infinite; }
.bx-gold .bx-sheen { animation-delay: 1.2s; background: linear-gradient(100deg, transparent 42%, rgba(255,230,160,.4) 50%, transparent 58%); }
@keyframes bxSheen { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }

.spin-box { display: grid; place-items: center; }
.spin3d { perspective: 1200px; touch-action: none; padding: 6px 0; }
.spin-obj { position: relative; transform-style: preserve-3d; cursor: grab; will-change: transform; }
.spin-obj:active { cursor: grabbing; }
.sp-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--sr); }
.sp-face > .card, .sp-face > .cback, .sp-face > .slab { position: absolute; left: 0; top: 0; }
.sp-shade { position: absolute; inset: 0; border-radius: var(--sr); pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.5)); opacity: 0; }
.sp-slab { backdrop-filter: none; -webkit-backdrop-filter: none; padding: 9px; box-sizing: border-box; background: linear-gradient(155deg, rgba(255,255,255,.28), rgba(255,255,255,.08) 38%, rgba(255,255,255,.05) 62%, rgba(255,255,255,.18)), rgba(20,20,26,.55); }
.sp-slab .slab-card { display: flex; justify-content: center; margin-top: 8px; }
.sp-lbl-back { background: linear-gradient(#f4f2f8, #dcd8e6); }
.sp-lbl-back b { font-family: var(--font-n); letter-spacing: .06em; }
.sp-edge { position: absolute; inset: 0; border-radius: var(--sr); pointer-events: none; background: #cfd8e6; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.sp-edge.e-pixel { background: #25c873; }
.sp-edge.e-gold { background: linear-gradient(180deg, #ffe79a, #d99a12 50%, #ffd45c); }
.sp-edge.e-rainbow { background: linear-gradient(180deg, #ff5ec4, #ffd23f, #4dffb8, #4dc3ff, #b06bff); }
.sp-edge.acr { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.spin-tip { margin-top: -6px; font-size: 12px; color: rgba(255,255,255,.45); letter-spacing: .1em; }
.cback.img { overflow: hidden; border-radius: 5cqw; background: #111; }
.cback.img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card.ic .face { padding: 0; background: #0a0a10; box-shadow: 0 3cqw 9cqw rgba(0,0,0,.55); }
.card.ic.r-rainbow .face { animation: none; box-shadow: 0 3cqw 9cqw rgba(0,0,0,.55), 0 0 7cqw rgba(255,106,213,.55); }
.card.ic.r-gold .face { box-shadow: 0 3cqw 9cqw rgba(0,0,0,.55), 0 0 6cqw rgba(255,176,0,.45); }
.c-img { position: absolute; inset: 0; background-repeat: no-repeat; border-radius: inherit; background-color: #15131c; }
.card.ic .fx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; }
.card.ic .c-dm { z-index: 2; }
.card.ic .c-dm span { font-size: 4.6cqw; opacity: .92; }

.fx-gloss {
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.42) 46%, rgba(190,225,255,.26) 52%, transparent 64%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: soft-light; animation: gloss 5s ease-in-out infinite; opacity: .6;
}
@keyframes gloss { 0%, 55% { background-position: 130% 0; } 73%, 100% { background-position: -30% 0; } }
.fx-edge {
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.3), transparent 45%);
  box-shadow: inset 0 0 0 .5cqw rgba(255,255,255,.3); mix-blend-mode: soft-light;
}

.fx-scan { background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 2px); mix-blend-mode: multiply; }
.fx-pix {
  overflow: hidden; mix-blend-mode: screen;
  background: linear-gradient(180deg, transparent 40%, rgba(150,110,255,.28) 49%, rgba(90,240,255,.18) 51%, transparent 60%) no-repeat 0 100% / 100% 250%;
  animation: band 3.8s linear infinite;
}
@keyframes band { from { background-position: 0 100%; } to { background-position: 0 0; } }
.fx-pix::before, .fx-pix::after {
  content: ''; position: absolute; left: 0; top: 0; width: 1.8cqw; height: 1.8cqw;
  box-shadow: 10cqw 22cqw #6ff, 84cqw 12cqw #c9f, 72cqw 58cqw #fff, 16cqw 74cqw #f8c, 48cqw 6cqw #fff, 90cqw 90cqw #6ff, 6cqw 48cqw #c9f, 60cqw 84cqw #fff;
  animation: pixblink 1.3s steps(2, jump-none) infinite;
}
.fx-pix::after {
  box-shadow: 30cqw 14cqw #fff, 92cqw 40cqw #6ff, 54cqw 70cqw #c9f, 4cqw 92cqw #6ff, 80cqw 76cqw #f8c, 36cqw 96cqw #fff, 94cqw 4cqw #fff;
  animation-delay: -.65s;
}
@keyframes pixblink { 0% { opacity: 1; } 100% { opacity: 0; } }
.card.ic .fx-rim {
  padding: 1.1cqw; z-index: 3;
  -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);
}
.card.ic.r-pixel .fx-rim { background: conic-gradient(from var(--ang), #39e6ff, #8a5cff, #ff5ec4, #ffe46b, #39e6ff); animation: spinang 2.4s steps(24) infinite; opacity: .9; }

.card.ic.r-gold .fx-rim { padding: .9cqw; background: conic-gradient(from var(--ang), #8a5a00, #fff3b0 8%, #e0a400 20%, #6b4300 45%, #ffe48a 58%, #b07a00 80%, #8a5a00); animation: spinang 5s linear infinite; }
.card.ic.r-gold .c-shine { mix-blend-mode: screen; opacity: .4; }

.card.ic.r-rainbow .c-holo { opacity: .16; }
.fx-foil {
  background:
    repeating-linear-gradient(115deg, rgba(255,215,120,0) 0 1.2cqw, rgba(255,226,150,.32) 1.5cqw, rgba(255,215,120,0) 1.8cqw),
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,236,170,.4), transparent 50%);
  mix-blend-mode: overlay;
}
.card.ic.r-rainbow .fx-rim { padding: 1.5cqw; background: conic-gradient(from var(--ang), #ffe7a0, #ff5ec4, #ffd23f, #4dffb8, #4dc3ff, #b06bff, #ffe7a0); animation: spinang 3s linear infinite; }
.fx-tag { overflow: hidden; z-index: 4 !important; }
.fx-tag b {
  position: absolute; left: -10cqw; top: 6cqw; width: 36cqw; transform: rotate(-45deg); text-align: center;
  font: 900 4.2cqw/1.75 var(--font-d); letter-spacing: .4em; text-indent: .4em; color: #3a2400;
  background: linear-gradient(90deg, #a86d00, #fff1b0 50%, #a86d00); box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.55);
}

@container (max-width: 150px) {
  .card.ic .c-dm, .fx-pix::before, .fx-pix::after { display: none; }
  .fx-gloss, .fx-pix { animation: none; }
  .fx-tag b { font-size: 6.5cqw; left: -14cqw; top: 8cqw; width: 50cqw; }
}
@media (prefers-reduced-motion: reduce) { .fx-gloss, .fx-pix, .card.ic .fx-rim, .fx-pix::before, .fx-pix::after { animation: none; } }

.sp-edge.e-pixel { background: linear-gradient(180deg, #3d2d78, #24184d); }
.sp-edge.e-common { background: linear-gradient(180deg, #f4f2ee, #cfcac2); }

.col-grid .cell { content-visibility: auto; contain-intrinsic-size: auto 100px auto 160px; }
#col-rfilter { margin-top: -4px; }

.card { --mx: 50%; --my: 50%; --pfc: 0; }

.c-sweep { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%) no-repeat; background-size: 300% 100%; background-position: 150% 0; }
.c-sweep.hi { background-image: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); }
.c-sweep.go { animation: csweep var(--sd, 420ms) cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes csweep { 0% { opacity: 0; background-position: 150% 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -150% 0; } }

.c-trace { position: absolute; left: -1.2%; top: -1.2%; width: 102.4%; height: 102.4%; pointer-events: none; z-index: 7; overflow: visible; }
.c-trace rect { fill: none; stroke: var(--tc, #ffd34d); stroke-width: 3; stroke-dasharray: 480 480; stroke-dashoffset: 480; filter: drop-shadow(0 0 4px var(--tc, #ffd34d)); }
.c-trace.done rect { stroke-width: 1.2; stroke-dasharray: none; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px var(--tc, #ffd34d)); opacity: .9; transition: stroke-width .3s; }

.c-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; mix-blend-mode: overlay; opacity: .8;
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.75) 0%, rgba(255,255,255,.12) 25%, rgba(255,255,255,0) 60%); }

.card.r-rainbow .c-holo, .card.ic.r-rainbow .c-holo {
  background-image: repeating-linear-gradient(90deg, #000 0 1px, #666 1px 2px), repeating-linear-gradient(110deg, #c57bff 0%, #5ec8ff 8%, #6dffb0 16%, #ffe36b 24%, #ff6d8d 32%, #c57bff 40%);
  background-size: 2px 2px, 400% 400%;
  background-position: 0 0, calc((50% - var(--mx)) * 2.6 + 50%) calc((50% - var(--my)) * 3.5 + 50%);
  background-blend-mode: overlay; mix-blend-mode: color-dodge;
  filter: brightness(calc(.55 + var(--pfc) * .45)) contrast(1.2) saturate(1.3);
  opacity: .42; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(0,0,0,.35), #000 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(0,0,0,.35), #000 100%);
  will-change: background-position, opacity;
}
.card.ic.r-rainbow .c-holo { opacity: .3; }
.card.r-rainbow .c-shine { background: linear-gradient(105deg, transparent 35%, rgba(255,120,220,.4) 46%, rgba(255,255,255,.6) 50%, rgba(120,220,255,.4) 54%, transparent 65%) no-repeat; background-size: 300% 100%; mix-blend-mode: screen; opacity: .6; animation: shine 5s ease-in-out infinite; }

.card.r-gold .c-holo, .card.ic.r-gold .c-holo {
  background-image: repeating-linear-gradient(49deg, rgba(255,220,120,0) 0 7%, rgba(255,236,170,.6) 10%, rgba(255,220,120,0) 13%), radial-gradient(circle at var(--mx) var(--my), rgba(255,240,180,.55), transparent 45%);
  background-size: 300% 300%, 100% 100%;
  background-position: calc((50% - var(--mx)) * 1.8 + 50%) calc((50% - var(--my)) * 1.8 + 50%), 0 0;
  mix-blend-mode: overlay; opacity: calc(.45 + var(--pfc) * .5);
}

.card.ic.r-gold .c-img, .card.ic.r-rainbow .c-img { transform: translate(calc((var(--mx) - 50%) * -.04), calc((var(--my) - 50%) * -.04)) scale(1.05); will-change: transform; }

.card.idle { animation: idlef 3.5s ease-in-out infinite; }
@keyframes idlef { 50% { translate: 0 -4px; } }

.cine-glow.bright { opacity: 1 !important; transition: opacity .12s, box-shadow .12s; box-shadow: inset 0 0 0 6px #fff, 0 0 0 3px #fff, 0 0 50px 16px #fff, 0 0 140px 40px color-mix(in srgb, var(--cg) 80%, #fff); }

.cine-plate { position: absolute; left: 50%; bottom: calc(9% + var(--sab)); transform: translate(-50%, 24px); opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 3; }
.cine-plate.on { animation: platein 260ms cubic-bezier(0,0,.2,1) forwards; }
@keyframes platein { to { opacity: 1; transform: translate(-50%, 0); } }
.cine-rib { padding: 4px 22px; font: 800 13px var(--font-n); letter-spacing: .3em; text-indent: .3em; color: #2a1a00; background: linear-gradient(90deg, #a86d00, #ffe9a8 50%, #a86d00);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.cine-rib.rb { background: linear-gradient(90deg, #ffe7a0, #ff5ec4, #ffd23f, #4dffb8, #4dc3ff, #b06bff, #ffe7a0); color: #1a0a2a; }
.cine-pname { font: 900 26px/1.1 var(--font-d); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 16px var(--cg); }
.cine-pno { font: 700 13px var(--font-n); letter-spacing: .2em; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .card.idle, .card.r-rainbow .c-shine, .card.r-gold .c-shine { animation: none; } .card.ic.r-gold .c-img, .card.ic.r-rainbow .c-img { transform: none; } }

#sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 0%, #10303a 0%, rgba(16,48,58,0) 70%),
    linear-gradient(180deg, #0b1d24 0%, #08131a 28%, #05080c 52%, #030305 74%, #000 100%); }
#sky > * { position: absolute; pointer-events: none; }
#sky .sky-far, #sky .sky-near { left: -18px; top: -18px; width: calc(100% + 36px); height: calc(100% + 36px); will-change: transform; }
#sky .sky-tw { inset: 0; width: 100%; height: 100%; }

#sky[data-mode="home"] > * { -webkit-mask: linear-gradient(180deg, #000 0, #000 30%, rgba(0,0,0,.55) 46%, rgba(0,0,0,.18) 60%, transparent 74%); mask: linear-gradient(180deg, #000 0, #000 30%, rgba(0,0,0,.55) 46%, rgba(0,0,0,.18) 60%, transparent 74%); }
#sky[data-mode="space"] > * { -webkit-mask: linear-gradient(180deg, #000 0, #000 42%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.15) 72%, transparent 84%); mask: linear-gradient(180deg, #000 0, #000 42%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.15) 72%, transparent 84%); }
#sky[data-mode="page"] > * { opacity: .55; }
#app { background: #000; }
.home-bg {
  background:
    radial-gradient(60% 22% at 50% 62%, color-mix(in srgb, var(--theme) 22%, transparent), transparent 70%),
    radial-gradient(80% 36% at 50% 30%, color-mix(in srgb, var(--theme) 14%, transparent), transparent 72%),
    linear-gradient(180deg, transparent 0, transparent 44%, rgba(5,5,7,.55) 54%, rgba(4,4,6,.92) 68%, #000 100%);
}
.space { background: radial-gradient(110% 60% at 50% 45%, rgba(30,30,44,.12), rgba(4,4,6,.3) 72%, rgba(0,0,0,.7)); }
#s-col, #s-me { background: linear-gradient(180deg, rgba(16,19,24,.5), rgba(7,7,10,.82) 40%, rgba(5,5,7,.9)); }

#app::after { background-size: 160px; opacity: .085; animation: grainjit 1s steps(6) infinite; inset: -40px; }
@keyframes grainjit { 0% { transform: translate(0,0); } 17% { transform: translate(-13px, 9px); } 33% { transform: translate(11px, -15px); } 50% { transform: translate(-7px, -6px); } 67% { transform: translate(15px, 12px); } 83% { transform: translate(-16px, 4px); } }
@media (prefers-reduced-motion: reduce) { #app::after { animation: none; } }

.cine { background: radial-gradient(70% 50% at 50% 46%, color-mix(in srgb, var(--cg, #3da5ff) 26%, #02030a), #010104 78%); }
.cine-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .85; }
.cine-sky canvas { position: absolute; left: -18px; top: -18px; width: calc(100% + 36px); height: calc(100% + 36px); animation: cskydrift 28s linear forwards; }
.cine-sky canvas + canvas { animation-duration: 18s; }
.cine-sky.go canvas { animation-duration: 9s; }
.cine-sky.go canvas + canvas { animation-duration: 6s; }
@keyframes cskydrift { from { transform: scale(1); } to { transform: scale(1.18); } }
.cine-aura { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .6s ease-out, transform 1.2s cubic-bezier(.2,.8,.2,1);
  -webkit-mask: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.55) 52%, transparent 100%); mask: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.55) 52%, transparent 100%); mix-blend-mode: screen; }
.cine-aura.on { opacity: .75; transform: none; }
.cine-aura i { position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 8deg, color-mix(in srgb, var(--cg) 55%, transparent) 10.5deg, transparent 13deg 22.5deg);
  animation: aurarot 40s linear infinite; }
.cine-aura i + i { background: repeating-conic-gradient(from 7deg, transparent 0deg 12deg, rgba(255,255,255,.22) 13.5deg, transparent 15deg 30deg); animation-duration: 64s; animation-direction: reverse; }
.cine-aura b { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cg) 60%, #fff), transparent); opacity: .5; animation: aurabreath 3.2s ease-in-out infinite; }
.cine-aura.rb i { background: repeating-conic-gradient(from 0deg, transparent 0deg 8deg, rgba(255,120,220,.5) 10deg, transparent 12deg 18deg, rgba(120,220,255,.5) 20deg, transparent 22deg 28deg, rgba(255,230,140,.55) 30deg, transparent 32deg 40deg); }
@keyframes aurarot { to { transform: rotate(360deg); } }
@keyframes aurabreath { 50% { opacity: .28; transform: scale(.92); } }
.cine-pool { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cg) 55%, #fff) 0%, color-mix(in srgb, var(--cg) 30%, transparent) 40%, transparent 100%); filter: blur(6px); mix-blend-mode: screen; }
.cine-pool.on { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .cine-aura i, .cine-aura b, .cine-sky canvas { animation: none; } }

.rv-halo, .rv-pool { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; transition: background .5s; mix-blend-mode: screen; }
.rv-halo { background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 70%, transparent), color-mix(in srgb, var(--rc) 18%, transparent) 55%, transparent); opacity: var(--ra, .45); filter: blur(10px); }
.rv-pool { transform: translate(-50%, 0); background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 60%, #fff), color-mix(in srgb, var(--rc) 25%, transparent) 45%, transparent); opacity: .5; filter: blur(5px); }
.rv-halo.pulse { animation: rvhalo .7s cubic-bezier(.2,.8,.2,1); }
.rv-pool.pulse { animation: rvpool .7s cubic-bezier(.2,.8,.2,1); }
@keyframes rvhalo { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 30% { opacity: calc(var(--ra, .45) + .25); } to { opacity: var(--ra, .45); transform: translate(-50%, -50%) scale(1); } }
@keyframes rvpool { from { opacity: 0; transform: translate(-50%, 0) scaleX(.5); } 30% { opacity: .85; } to { opacity: .5; transform: translate(-50%, 0) scaleX(1); } }
#s-reveal:not(.on) .rv-halo, #s-reveal:not(.on) .rv-pool { opacity: 0; }

.sum-grid .cell { position: relative; isolation: isolate; }
.sum-grid .cell:has(.r-gold)::before, .sum-grid .cell:has(.r-gold2)::before, .sum-grid .cell:has(.r-rainbow)::before {
  content: ''; position: absolute; inset: -10% -12%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,200,61,.5), rgba(255,176,0,.12) 60%, transparent); filter: blur(4px); animation: sumglow 2.6s ease-in-out infinite; }
.sum-grid .cell:has(.r-rainbow)::before { background: radial-gradient(closest-side, rgba(255,106,213,.5), rgba(120,200,255,.14) 60%, transparent); }
@keyframes sumglow { 50% { opacity: .55; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .sum-grid .cell::before { animation: none; } }

.card.ic.soft-gilded .face { background: #090909; box-shadow: 0 3cqw 9cqw #0009, 0 0 3cqw #b7924933; }
.card.ic.soft-gilded .c-img { transform: none; will-change: auto; background-color:#090909; }
.soft-foil-mount { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.soft-foil-canvas { width:100%; height:auto; aspect-ratio:var(--art-ratio); max-height:100%; display:block; background-size:contain; background-position:center; background-repeat:no-repeat; touch-action:pan-y; visibility:hidden; transform:none !important; }
.soft-foil-canvas:focus-visible { outline:2px solid #cbb075; outline-offset:-3px; }
.gilded-toggle { display:block; margin:8px auto; padding:7px 14px; border:1px solid #9c814b; border-radius:16px; background:#17150f; color:#e1cf9e; cursor:pointer; }

.slab::after, .cslab-shine { display: none; }
:root {
  --gold-bevel: linear-gradient(135deg, #4f360b 0%, #b8892c 12%, #fff0bf 22%, #c9a24a 32%, #6e4c14 48%, #d7b25a 62%, #fff3c8 72%, #a87a24 84%, #3f2b08 100%);
  --gold-text: linear-gradient(180deg, #fff6d6 0%, #f3d27c 40%, #b8862a 54%, #e9c26a 72%, #fff0c0 100%);
  --gold-brush: repeating-linear-gradient(90deg, rgba(255,240,200,.028) 0 1px, rgba(0,0,0,.05) 1px 2px, rgba(255,255,255,0) 2px 3px);
  --gold-shell: radial-gradient(120% 45% at 50% 0%, rgba(255,214,130,.09), transparent 62%), radial-gradient(90% 40% at 50% 100%, rgba(150,100,30,.08), transparent 70%), linear-gradient(180deg, #17130d 0%, #0b0907 52%, #050403 100%);
}
.slab.gild, .cslab-back.gild {
  border: 2px solid transparent;
  background: var(--gold-brush) padding-box, var(--gold-shell) padding-box, var(--gold-bevel) border-box;
  box-shadow: 0 34px 60px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,236,180,.35), inset 0 0 0 5px rgba(0,0,0,.4), inset 0 0 0 6px rgba(214,172,82,.32);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.sp-slab.gild { padding: 8px; }
.gild .slab-lbl, .cslab-front.gild .cslab-lbl {
  position: relative; border: 1.5px solid transparent; color: #a8946a;
  background: repeating-radial-gradient(circle at 108% 50%, rgba(214,172,82,.08) 0 1px, transparent 1px 4px) padding-box, linear-gradient(180deg, #1f1a11 0%, #0f0c08 55%, #0a0806 100%) padding-box, var(--gold-bevel) border-box;
  box-shadow: inset 0 1px 0 rgba(255,236,180,.16), 0 3px 8px rgba(0,0,0,.65);
}
.gild .slab-lbl span, .cslab-front.gild .cl-l span, .cslab-front.gild .cl-r span { color: #a8946a; }
.gild .slab-lbl b, .gild .slab-lbl em, .cslab-front.gild .cl-l b, .cslab-front.gild .cl-r em {
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.8));
}
.gild .slab-lbl em { letter-spacing: .02em; }
.gild .sp-lbl-back.slab-lbl { background: repeating-radial-gradient(circle at -8% 50%, rgba(214,172,82,.08) 0 1px, transparent 1px 4px) padding-box, linear-gradient(180deg, #1f1a11 0%, #0f0c08 55%, #0a0806 100%) padding-box, var(--gold-bevel) border-box; }

.cslab-front.gild { border: 0; background: none; box-shadow: inset 0 0 0 4px rgba(0,0,0,.35), inset 0 0 0 5px rgba(214,172,82,.3); }
.cslab-front.gild::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: var(--gold-bevel);
  -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);
}
.cslab-front.gild.lit { box-shadow: inset 0 0 0 4px rgba(0,0,0,.35), inset 0 0 0 5px rgba(214,172,82,.38), 0 0 30px -6px rgba(232,180,80,.55), 0 0 90px -24px rgba(232,180,80,.5); }

.cslab-front.gild.shine::before { animation: gildIgnite 1.1s ease-out; }
@keyframes gildIgnite { 0% { filter: brightness(1); } 30% { filter: brightness(1.7) saturate(1.15); } 100% { filter: brightness(1); } }
.sp-edge.gild { background: linear-gradient(180deg, #2a1d08, #8a6420 18%, #e9c66e 40%, #fff0bf 50%, #b8892c 64%, #3f2b08 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }

#app::after { animation: none; opacity: .05; }

.cine-flip:has(.cslab-front) > .cine-glow { opacity: 0 !important; transition: opacity .4s; }

.card.ic.soft-gilded .face { overflow: hidden; }
.card.ic.soft-gilded .c-img, .card.ic.soft-gilded .soft-foil-mount { inset: auto; left: 50%; top: 50%; width: 108%; height: auto; aspect-ratio: var(--art-ratio); transform: translate(-50%, -50%); }

.rv-stack .slot.inspect { transform-style: preserve-3d; transform-origin: 0 0; }
.rv-stack .slot.inspect > .card { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rv-stack .slot > .rv-back { left: 0; top: 0; transform: translate(-50%, -50%) rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rv-stack .slot:not(.inspect) > .rv-back { visibility: hidden; }

#sky { background:
    radial-gradient(110% 55% at 50% 0%, #0a1826 0%, rgba(10,24,38,0) 72%),
    linear-gradient(180deg, #060d16 0%, #03070c 30%, #020305 55%, #010102 76%, #000 100%); }
#sky .sky-far { opacity: .82; }
#sky .sky-neb, #sky .sky-shade { left: -25%; top: -15%; width: 150%; height: 130%; }
#sky .sky-neb { mix-blend-mode: screen; }
#sky .sky-neb i, #sky .sky-shade i { position: absolute; border-radius: 50%; will-change: transform, opacity; }
#sky .sky-neb i:nth-child(1) { left: 6%; top: 4%; width: 62%; height: 40%; background: radial-gradient(closest-side, rgba(70,100,220,.2), rgba(70,100,220,.07) 55%, transparent); animation: nebA 64s ease-in-out infinite alternate; }
#sky .sky-neb i:nth-child(2) { left: 44%; top: 18%; width: 56%; height: 36%; background: radial-gradient(closest-side, rgba(140,80,220,.16), rgba(140,80,220,.05) 55%, transparent); animation: nebB 82s ease-in-out infinite alternate; }
#sky .sky-neb i:nth-child(3) { left: 22%; top: 30%; width: 50%; height: 30%; background: radial-gradient(closest-side, rgba(40,170,190,.1), rgba(40,170,190,.03) 55%, transparent); animation: nebC 100s ease-in-out infinite alternate; }
#sky .sky-shade i:nth-child(1) { left: 10%; top: 8%; width: 44%; height: 30%; background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,.25) 55%, transparent); animation: shadeA 90s ease-in-out infinite alternate; }
#sky .sky-shade i:nth-child(2) { left: 52%; top: 26%; width: 40%; height: 26%; background: radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,.2) 55%, transparent); animation: shadeB 120s ease-in-out infinite alternate; }
#sky .sky-shade i:nth-child(3) { left: 28%; top: 40%; width: 52%; height: 22%; background: radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,.18) 55%, transparent); animation: shadeA 140s ease-in-out infinite alternate-reverse; }
@keyframes nebA { 0% { transform: translate(0,0) scale(1); opacity: .55; } 50% { opacity: 1; } 100% { transform: translate(14%, 6%) scale(1.18); opacity: .7; } }
@keyframes nebB { 0% { transform: translate(0,0) scale(1.1); opacity: .9; } 50% { opacity: .45; } 100% { transform: translate(-16%, 8%) scale(.92); opacity: 1; } }
@keyframes nebC { 0% { transform: translate(0,0) scale(.9); opacity: .4; } 100% { transform: translate(10%, -10%) scale(1.15); opacity: 1; } }
@keyframes shadeA { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(30%, 10%) scale(1.25); } }
@keyframes shadeB { 0% { transform: translate(0,0) scale(1.1); } 100% { transform: translate(-34%, -6%) scale(.9); } }
@media (prefers-reduced-motion: reduce) { #sky .sky-neb i, #sky .sky-shade i { animation: none; } }

.cine-ghalo { position: absolute; left: 0; top: 0; pointer-events: none; border-radius: 50%; opacity: 0; transform: scale(.7);
  background: radial-gradient(closest-side, rgba(255,214,140,.34), rgba(214,160,70,.14) 42%, rgba(120,80,20,.05) 66%, transparent 80%);
  transition: opacity 1.4s ease-out, transform 2.4s cubic-bezier(.2,.8,.2,1); }
.cine-ghalo.on { opacity: 1; transform: none; animation: ghaloBreath 4.5s ease-in-out 1.4s infinite; }
.cine-ghalo.gold { background: radial-gradient(closest-side, rgba(255,226,120,.45), rgba(255,176,0,.16) 45%, transparent 78%); }
@keyframes ghaloBreath { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .72; transform: scale(1.05); } }
.cine-dm { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dm-b { position: absolute; left: 0; white-space: nowrap; font-weight: 800; letter-spacing: .02em; line-height: 1; will-change: transform, opacity;
  text-shadow: 0 0 2px #000, 1px 1px 0 rgba(0,0,0,.85), -1px -1px 0 rgba(0,0,0,.6); opacity: .92; }
.gold-rim { position: absolute; inset: -1.2%; border-radius: inherit; pointer-events: none; z-index: 6; padding: 1.6cqw;
  background: conic-gradient(from var(--ga, 0deg), transparent 0 55%, rgba(255,214,90,.0) 60%, #fff3c4 70%, #ffc23d 76%, transparent 86%);
  -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, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: goldRim 2.6s linear infinite; filter: drop-shadow(0 0 6px rgba(255,200,80,.7)); }
@property --ga { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes goldRim { to { --ga: 360deg; } }

.px-resolve { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; border-radius: inherit; image-rendering: pixelated; pointer-events: none; }
.px-scan { position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; animation: pxScan .9s steps(6) forwards; }
@keyframes pxScan { 0% { opacity: 1; } 30% { opacity: .3; } 45% { opacity: .9; } 100% { opacity: 0; } }

.rv-stack .slot > .rv-cover { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.rv-stack .slot.covered .mys-tag, .rv-stack .slot.covered .c-new, .rv-stack .slot.covered .new-tag { opacity: 0; }

.sheet.detail-sheet { top: 0; }

.spin-obj .cback, .sp-face .cback, .rv-stack .slot > .rv-back, .slab-card .cback, .slv-card .cback { box-shadow: none; }
.spin3d { position: relative; }
.spin3d > .spin-obj { z-index: 1; }
.spin-glow { position: absolute; left: 50%; top: 50%; width: 118%; height: 104%; transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 26%, transparent), color-mix(in srgb, var(--glow) 9%, transparent) 55%, transparent 100%); filter: blur(22px); opacity: .9; }

.slab-card .cback { position: relative; inset: auto; margin: 0 auto; }
.sp-face > .sleeve { position: absolute; left: 0; top: 0; }

.spin-obj.k-card .sp-edge.e-common, .rv-thick .sp-edge.e-common { background: #e9e5de; box-shadow: none; }
.spin-obj.k-card .sp-edge.e-pixel, .rv-thick .sp-edge.e-pixel { background: #3a2c70; box-shadow: none; }
.rv-thick .sp-edge.e-gold { background: #d9a43a; box-shadow: none; }
.rv-thick .sp-edge.e-rainbow { background: #6e5426; box-shadow: none; }
.rv-thick { position: absolute; left: 0; top: 0; transform-style: preserve-3d; pointer-events: none; }
.rv-thick > i { position: absolute; left: 0; top: 0; }
.rv-stack .slot:not(.inspect) > .rv-thick { display: none; }
.rv-stack .slot.inspect > .card { transition: none; }

.sp-slab-back .slab-lbl { justify-content: space-between; }
.sp-slab-back .seal { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 900 15px var(--font-d); font-style: normal;
  color: #2a1d08; background: radial-gradient(circle at 35% 30%, #fff3c8, #e2bd68 38%, #a37624 70%, #5c3f0e); box-shadow: inset 0 0 0 1.5px rgba(60,40,10,.6), inset 0 0 0 3px rgba(255,236,180,.35), 0 2px 6px rgba(0,0,0,.6); }

.slab.gild.au { background: var(--gold-brush) padding-box, radial-gradient(120% 45% at 50% 0%, rgba(255,214,130,.16), transparent 62%), linear-gradient(180deg, #221a0c 0%, #120d06 52%, #080603 100%) padding-box,
  linear-gradient(135deg, #6a4a10 0%, #e0b24a 12%, #fff6d0 22%, #f0c75e 32%, #8e6418 48%, #f2cd6c 62%, #fffbe0 72%, #c9952c 84%, #5a3e0c 100%) border-box; }
.sp-edge.gild.au { background: linear-gradient(180deg, #4a3410, #c99a3a 20%, #ffe7a2 45%, #fff6d6 52%, #d9a845 66%, #5a3e0c 100%); }

.sleeve { position: relative; box-sizing: border-box; border-radius: 8px; filter: drop-shadow(0 22px 26px rgba(0,0,0,.55)); }
.sleeve::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035) 28%, rgba(255,255,255,.025) 70%, rgba(255,255,255,.07));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), inset 0 0 0 2.5px rgba(255,255,255,.035), inset 0 1px 0 rgba(255,255,255,.45); }
.slv-card { position: absolute; left: var(--p); top: calc(var(--lh) + var(--p)); }
.slv-head { position: absolute; left: 0; right: 0; top: 0; height: var(--lh); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 11px 4px; box-sizing: border-box; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)); color: #fff; }
.slv-hole { position: absolute; left: 50%; top: 5px; width: 30px; height: 7px; margin-left: -15px; border-radius: 4px; background: rgba(0,0,0,.55); box-shadow: inset 0 1px 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.25); }
.slv-lbl { min-width: 0; line-height: 1.2; }
.slv-lbl span, .slv-r span { display: block; font-size: 9px; color: rgba(255,255,255,.62); letter-spacing: .06em; white-space: nowrap; }
.slv-lbl b { display: block; font: 900 14px var(--font-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.slv-r { text-align: right; line-height: 1.2; flex: none; }
.slv-r em { display: block; font: 800 12px var(--font-n); font-style: normal; color: #ffd46a; letter-spacing: .03em; }
.slv-lbl b::before { content: ''; display: inline-block; width: 3px; height: 11px; margin-right: 5px; vertical-align: -1px; border-radius: 2px; background: #fb7299; }

.slv-seal { position: absolute; left: 0; right: 0; top: calc(var(--lh) - 4px); height: 4px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, rgba(255,255,255,.05) 1px 3px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }

.slv-film { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--lh) - 4px); border-radius: 0 0 8px 8px; pointer-events: none; mix-blend-mode: screen;
  background:
    linear-gradient(112deg, transparent calc(var(--sx, 50%) - 30%), rgba(255,255,255,.13) calc(var(--sx, 50%) - 20%), rgba(255,255,255,.03) calc(var(--sx, 50%) - 11%), transparent calc(var(--sx, 50%) - 5%)),
    linear-gradient(112deg, transparent calc(var(--sx, 50%) + 6%), rgba(255,255,255,.08) calc(var(--sx, 50%) + 11%), transparent calc(var(--sx, 50%) + 18%)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.008 .03' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2.4 -1.3'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.14'/></svg>") center / 100% 100%;
  box-shadow: inset 2px 0 0 rgba(255,255,255,.06), inset -2px 0 0 rgba(255,255,255,.06); }
.sleeve-back .slv-film { transform: scaleX(-1); }
.sp-edge.film { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }

.rv-stack.side .slot { transform-origin: 0 0; }
.rv-side { position: absolute; left: 50%; top: 48%; width: 0; height: 0; transform-style: preserve-3d; transform-origin: 0 0; pointer-events: none; z-index: 1; }
.rv-side > .se { position: absolute; left: 0; top: 0; }
.rv-side > .se > .card { position: absolute; left: 0; top: 0; }

.rv-side > .se > .card { filter: brightness(.82); }

.se-glow, .se-dust { position: absolute; inset: 0; border-radius: 5%/3.6%; pointer-events: none; }
.rv-side:not(.open) .se-glow, .rv-side:not(.open) .se-dust { visibility: hidden; }
.se-dust::after { content: ''; position: absolute; inset: 0; background: inherit; transform: scaleX(-1); }
.se-glow { mix-blend-mode: screen; filter: blur(3px); animation: seBreath 2.8s ease-in-out infinite; }
.se-rainbow .se-glow { box-shadow: 0 0 10px 1px rgba(255,214,140,.45), inset 0 0 12px rgba(255,220,150,.35);
  background: linear-gradient(90deg, rgba(255,226,160,.42), rgba(255,226,160,0) 7%), linear-gradient(270deg, rgba(255,226,160,.42), rgba(255,226,160,0) 7%); }
.se-gold .se-glow { box-shadow: 0 0 9px 1px rgba(200,170,255,.35), inset 0 0 10px rgba(255,190,240,.28);
  background: linear-gradient(90deg, rgba(160,220,255,.32), rgba(255,170,230,.24) 3%, rgba(255,255,255,0) 7%), linear-gradient(270deg, rgba(160,220,255,.32), rgba(255,170,230,.24) 3%, rgba(255,255,255,0) 7%); background-size: 100% 300%; animation: seBreath 2.8s ease-in-out infinite, seIri 4.6s linear infinite; }
.se-gold2 .se-glow { box-shadow: 0 0 12px 2px rgba(255,214,120,.5), inset 0 0 12px rgba(255,236,170,.4); }

.se-dust { mix-blend-mode: screen; background-repeat: repeat-y; background-size: 12px 64px; animation: seDust 5s linear infinite; }
.se-rainbow .se-dust { background-image: radial-gradient(circle at 3px 10px, rgba(255,236,190,.9) 0 .9px, transparent 1.6px), radial-gradient(circle at 7px 38px, rgba(255,214,140,.75) 0 .7px, transparent 1.4px), radial-gradient(circle at 2px 54px, rgba(255,246,220,.8) 0 .6px, transparent 1.3px); }
.se-gold .se-dust { background-image: radial-gradient(circle at 3px 14px, rgba(255,190,240,.85) 0 .8px, transparent 1.5px), radial-gradient(circle at 6px 40px, rgba(160,220,255,.8) 0 .7px, transparent 1.4px), radial-gradient(circle at 2px 56px, rgba(255,255,255,.8) 0 .6px, transparent 1.3px); }
@keyframes seBreath { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes seIri { to { background-position: 0 300%; } }
@keyframes seDust { to { background-position: 0 -64px; } }
.rv-side:not(.open) .se-glow, .rv-side:not(.open) .se-dust { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .se-glow, .se-dust { animation: none; } }

.card.ic.soft-gilded .gf-lit, .card.ic.soft-gilded .gf-dust {
  position: absolute; left: 50%; top: 50%; width: 108%; height: auto; aspect-ratio: var(--art-ratio); transform: translate(-50%, -50%);
  pointer-events: none; z-index: 2; background-repeat: no-repeat; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(115deg, transparent 32%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.75) 47%, #000 50%, rgba(0,0,0,.75) 53%, rgba(0,0,0,.18) 60%, transparent 68%);
  mask-image: linear-gradient(115deg, transparent 32%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.75) 47%, #000 50%, rgba(0,0,0,.75) 53%, rgba(0,0,0,.18) 60%, transparent 68%);
  -webkit-mask-size: 320% 100%; mask-size: 320% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 130% 0; mask-position: 130% 0;
  animation: gfSweep 9s var(--gd, 0s) cubic-bezier(.45,.05,.35,1) infinite;
}

.card.ic.soft-gilded .gf-lit { filter: sepia(.6) saturate(1.5) contrast(2.4) brightness(.95); }

.card.ic.soft-gilded { --gf-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 14 -9.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23000'/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.card.ic.soft-gilded .gf-dust {
  background-repeat: repeat, no-repeat; background-blend-mode: multiply;
  filter: contrast(2) sepia(.5) saturate(1.8) brightness(2.4);
  animation-delay: calc(var(--gd, 0s) + .25s);
}
@keyframes gfSweep {
  0% { -webkit-mask-position: 130% 0; mask-position: 130% 0; }
  42%, 100% { -webkit-mask-position: -30% 0; mask-position: -30% 0; }
}
.card.ic.soft-gilded .gf-rim {
  z-index: 3; padding: .55cqw; mix-blend-mode: screen; opacity: .9;
  background: conic-gradient(from var(--ang), rgba(214,170,90,.22) 0 76%, rgba(255,226,160,.55) 80%, #fff3cf 82%, rgba(255,226,160,.55) 84%, rgba(214,170,90,.22) 88% 100%);
  -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);
  animation: spinang 12s var(--gd, 0s) linear infinite;
}

.card.ic.soft-gilded:has(.gf-lit) .face { animation: gfGlow 6s ease-in-out infinite; }
@keyframes gfGlow {
  0%, 100% { box-shadow: 0 3cqw 9cqw #0009, 0 0 3cqw #b7924933; }
  50% { box-shadow: 0 3cqw 9cqw #0009, 0 0 6cqw #d4a85566; }
}
@media (prefers-reduced-motion: reduce) {
  .card.ic.soft-gilded .gf-lit, .card.ic.soft-gilded .gf-dust, .card.ic.soft-gilded .gf-rim, .card.ic.soft-gilded .face { animation: none; }
}

.detail-sheet .detail { gap: 12px; }
.detail-sheet .detail-meta { margin-top: 2px; }
.detail-sheet .detail-meta b { display: block; max-width: 86vw; font-size: 28px; line-height: 1.2; overflow-wrap: anywhere; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.detail-sheet .seg-btns { margin-top: 2px; }

#col-filter.years { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }
#col-filter.years::-webkit-scrollbar { display: none; }
#col-filter.years button { flex: none; padding: 7px 13px; font-variant-numeric: tabular-nums; }

.sheet .sheet-top { position: sticky; top: 0; height: 0; z-index: 6; }
.sheet .sheet-top .close-x { top: 2px; right: -6px; width: 34px; height: 34px; }
.sheet .sheet-top + h3 { padding-right: 40px; }

#col-filter.years { cursor: grab; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
#col-filter.years.dragging { cursor: grabbing; }
#col-filter.years.dragging button { pointer-events: none; }
.col-grid.preview-only .cell { cursor: default; }
.col-grid.preview-only .cell:active { transform: none; }

.sell-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 16px 12px; padding: 8px 8px 8px 14px; border-radius: 14px; background: rgba(255,214,120,.06); border: 1px solid rgba(255,214,120,.18); font-size: 13px; color: var(--mut); }
.sell-bar b { color: #ffe3a3; margin: 0 2px; }
.sell-bar .coin, .sell-one .coin, .sell-total .coin, .sell-list .coin { width: 14px; height: 14px; vertical-align: -2px; margin: 0 2px 0 4px; }
.sell-bar button { flex: none; padding: 7px 14px; border-radius: 10px; font: 700 13px var(--font-d); color: #2a1a00; background: linear-gradient(180deg, #ffe7a8, #e8b85a); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.own-acts { display: flex; gap: 10px; width: 100%; max-width: 360px; margin-top: -2px; }
.own-acts > * { flex: 1; white-space: nowrap; }
.gift-one { padding: 9px 14px; border-radius: 999px; font: 700 14px var(--font-d); color: #ffc2d4; background: rgba(251,114,153,.1); border: 1px solid rgba(251,114,153,.32); }
.gift-one::before { content: '🎁'; margin-right: 6px; }
.seg-btns .claim { background: var(--gloss), #fb7299; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.gift-left { margin: 14px 0; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 14px; text-align: center; }
.gift-left.warn { color: #ffb3a0; background: rgba(255,120,90,.1); }
.gift-url { margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.3); font: 12px/1.4 ui-monospace, monospace; color: var(--mut); word-break: break-all; }
.sent-list { margin-top: 12px; max-height: 50vh; overflow-y: auto; }
.sent-list .me-row small { display: block; font-size: 12px; color: var(--mut); }
.sell-one { padding: 9px 14px; border-radius: 999px; font: 700 14px var(--font-d); color: #ffe3a3; background: rgba(255,214,120,.08); border: 1px solid rgba(255,214,120,.28); }
.sell-one small { margin-left: 8px; font-size: 12px; color: var(--mut); font-weight: 600; }
.sell-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.sell-list div { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.05); }
.sell-list b { font-variant-numeric: tabular-nums; }
.sell-total { text-align: center; margin: 8px 0 14px; font-size: 15px; }
.sell-total b { font: 800 22px var(--font-n); color: #ffe3a3; }
.sell-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.col-grid .cell .mini-slab, .mg-card > .mini-slab { width: 100%; aspect-ratio: 1 / 1.4; box-sizing: border-box; padding: 3.6cqw 3.6cqw 0; border-radius: 6cqw; display: flex; flex-direction: column; align-items: center; overflow: hidden;
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,236,180,.35), inset 0 0 0 2.4cqw rgba(0,0,0,.4), inset 0 0 0 2.9cqw rgba(214,172,82,.3); }
.mini-slab .slab-lbl { flex: none; width: 100%; height: 15cqw; box-sizing: border-box; margin: 0 0 3cqw; padding: 0 3cqw; border-radius: 2.4cqw; border-width: 1px; gap: 2cqw; font-size: 6.6cqw; line-height: 1; }
.mini-slab .slab-lbl b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7.2cqw; }
.mini-slab .slab-lbl em { flex: none; font-size: 6.6cqw; }
.mini-slab .slab-card { display: flex; justify-content: center; }
.col-grid .cell .mini-slab .card, .mg-card .mini-slab .card { --cw: 80cqw; }
.mini-slab .card .face { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.6); }
.mini-slab > .c-cnt { right: 4cqw; bottom: 4cqw; z-index: 5; }

.mini-slab .ms-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  background: linear-gradient(118deg, transparent 38%, rgba(255,240,200,.16) 46%, rgba(255,255,255,.28) 50%, rgba(255,240,200,.16) 54%, transparent 62%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0; mix-blend-mode: screen; animation: msGlare 9s ease-in-out var(--gd, 0s) infinite; }
@keyframes msGlare { 0% { background-position: 130% 0; } 42%, 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .mini-slab .ms-glare { animation: none; opacity: 0; } }

@property --sx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.col-grid .cell .mini-sleeve, .mg-card > .mini-sleeve { --lh: 16cqw; --p: 3cqw; width: 90cqw; height: 140cqw; margin: 0 auto; border-radius: 4cqw; filter: drop-shadow(0 8px 12px rgba(0,0,0,.55)); animation: slvSweep 9s ease-in-out var(--gd, 0s) infinite; }
@keyframes slvSweep { 0% { --sx: 125%; } 45%, 100% { --sx: -25%; } }
.mini-sleeve .slv-head { padding: 2.6cqw 3.4cqw 0; gap: 2cqw; border-radius: 4cqw 4cqw 0 0; align-items: center; }
.mini-sleeve .slv-hole { top: 1.6cqw; width: 12cqw; height: 2.6cqw; margin-left: -6cqw; border-radius: 2cqw; }
.mini-sleeve .slv-lbl b { font-size: 7.4cqw; }
.mini-sleeve .slv-lbl b::before { width: 1.2cqw; height: 6cqw; margin-right: 1.6cqw; }
.mini-sleeve .slv-head > em { flex: none; font: 800 6.2cqw var(--font-n); font-style: normal; color: #ffd46a; }
.mini-sleeve .slv-seal { height: 1.6cqw; top: calc(var(--lh) - 1.6cqw); }
.mini-sleeve .slv-film { top: calc(var(--lh) - 1.6cqw); border-radius: 0 0 4cqw 4cqw; z-index: 3; }
.col-grid .cell .mini-sleeve .card, .mg-card .mini-sleeve .card { --cw: 84cqw; }
.mini-sleeve > .c-cnt { right: 5cqw; bottom: 5cqw; z-index: 5; }
@media (prefers-reduced-motion: reduce) { .col-grid .cell .mini-sleeve, .mg-card > .mini-sleeve { animation: none; } }

.mini-slab .ms-glare { opacity: .22; background-image: linear-gradient(118deg, transparent 45%, rgba(255,240,200,.14) 48.5%, rgba(255,255,255,.22) 50%, rgba(255,240,200,.14) 51.5%, transparent 55%); }
.mini-sleeve .slv-film { opacity: .4; }
.card.ic.soft-gilded .gf-lit { opacity: .32; }
.card.ic.soft-gilded .gf-dust { opacity: .5; }
.card.r-gold .c-shine, .card.ic.r-gold .c-shine { opacity: .12; }
.card.r-rainbow .c-shine { opacity: .15; }
.fx-gloss { opacity: .18; }

:root {
  --font-s: 'Noto Serif SC', 'Songti SC', 'STSong', 'Source Han Serif SC', 'Noto Serif CJK SC', serif;
  --font-lux: 'Cinzel', 'Noto Serif SC', 'Songti SC', serif;
  --gold-label: linear-gradient(180deg, #fffaf0 0%, #f7e2a8 45%, #e2bd6c 75%, #f3d58e 100%);
}
.gild .slab-lbl b, .gild .slab-lbl em, .cslab-front.gild .cl-l b, .cslab-front.gild .cl-r em { background: var(--gold-label); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 0 3px rgba(0,0,0,.6)); }
.gild .slab-lbl b, .cslab-front.gild .cl-l b { font-family: var(--font-s); font-weight: 900; letter-spacing: .06em; }
.gild .slab-lbl em, .cslab-front.gild .cl-r em { font-family: var(--font-lux); font-weight: 700; letter-spacing: .04em; }
.gild .slab-lbl small, .gild .slab-lbl span, .cslab-front.gild .cl-l span, .cslab-front.gild .cl-r span { font-family: var(--font-s); font-weight: 600; color: #c9b48a; letter-spacing: .18em; }

.sp-slab .sl-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-slab .sl-name b { font-size: 15px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-slab .sl-name small { font-size: 9.5px; line-height: 1; }
.sp-slab .slab-lbl em { font-size: 14px; }

.cslab-front.gild .cl-l b { font-size: 7cqw; line-height: 1.2; }
.cslab-front.gild .cl-l span { font-size: 3.4cqw; margin-top: .6cqw; }

.mini-slab .slab-lbl { height: 17cqw; padding: 0 3.4cqw; }
.mini-slab .slab-lbl b { font-size: 8.4cqw; letter-spacing: .04em; }
.mini-slab .slab-lbl em { font-size: 6.4cqw; letter-spacing: .02em; }
.sp-slab .sl-name small { font-size: 10.5px; color: #d8c49a; }

.detail.lux .seg-btns { border: 1px solid rgba(226,189,108,.6); box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.6), 0 0 18px -6px rgba(232,180,80,.45); }
.detail.lux .seg-btns > * { position: relative; overflow: hidden; font-family: var(--font-s); font-weight: 900; letter-spacing: .12em; }
.detail.lux .seg-btns > .seg-on {
  color: #2b1b02; text-shadow: 0 1px 0 rgba(255,246,214,.6);
  background: linear-gradient(180deg, #fff4cc 0%, #f1d283 30%, #d2a447 52%, #b8862a 56%, #e2bb63 82%, #f7dd96 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 4px rgba(120,80,10,.35);
}
.detail.lux .seg-btns > .seg-on::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 160% 0;
  animation: luxSweep 4.5s ease-in-out 1s infinite; }
@keyframes luxSweep { 0% { background-position: 160% 0; } 30%, 100% { background-position: -60% 0; } }
.detail.lux .seg-btns > button {
  background: radial-gradient(120% 140% at 50% 0%, rgba(255,214,130,.14), transparent 60%), linear-gradient(180deg, #1d1810 0%, #0d0b07 100%);
  box-shadow: inset 1px 0 0 rgba(226,189,108,.45), inset 0 1px 0 rgba(255,236,180,.18);
  animation: luxBreath 3.2s ease-in-out infinite;
}
.detail.lux .seg-btns > button { color: #f3d891; text-shadow: 0 0 8px rgba(243,216,145,.35), 0 1px 0 #000; }
@keyframes luxBreath { 0%, 100% { box-shadow: inset 1px 0 0 rgba(226,189,108,.45), inset 0 1px 0 rgba(255,236,180,.18), inset 0 0 0 rgba(232,180,80,0); } 50% { box-shadow: inset 1px 0 0 rgba(226,189,108,.7), inset 0 1px 0 rgba(255,236,180,.3), inset 0 0 14px rgba(232,180,80,.28); } }
.detail.lux .own-acts > * { height: 44px; font-family: var(--font-s); font-weight: 900; letter-spacing: .14em; }
.detail.lux .gift-one {
  position: relative; overflow: hidden; color: #f8d9c2;
  background: linear-gradient(180deg, rgba(255,214,190,.16), rgba(170,110,90,.08)), rgba(30,20,18,.6);
  border: 1px solid rgba(240,190,160,.5); box-shadow: inset 0 1px 0 rgba(255,235,220,.35), 0 6px 16px rgba(0,0,0,.45);
}
.detail.lux .gift-one::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 9px; vertical-align: -1px; background: #fff0e2; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 3px #ffc9a8) drop-shadow(0 0 6px rgba(255,170,130,.9)); animation: luxTwinkle 2.4s ease-in-out infinite; }
@keyframes luxTwinkle { 0%, 100% { transform: scale(.7) rotate(0deg); opacity: .55; } 45% { transform: scale(1.15) rotate(45deg); opacity: 1; } 60% { transform: scale(.9) rotate(60deg); opacity: .85; } }
.detail.lux .sell-one { color: #e6cf9a; background: rgba(214,172,82,.06); border-color: rgba(214,172,82,.3); }
@media (prefers-reduced-motion: reduce) { .detail.lux .seg-btns > .seg-on::after, .detail.lux .seg-btns > button, .detail.lux .gift-one::before { animation: none; } }

.card.ic.r-gold2 .face { box-shadow: 0 3cqw 9cqw rgba(0,0,0,.55), 0 0 6cqw rgba(255,190,80,.45); }
.card.ic.r-gold2 .c-shine { background: linear-gradient(105deg, transparent 38%, rgba(255,226,150,.35) 47%, rgba(255,250,225,.55) 50%, rgba(255,226,150,.35) 53%, transparent 62%) no-repeat; background-size: 300% 100%; mix-blend-mode: screen; opacity: .14; animation: shine 6s ease-in-out infinite; }
.card.ic.r-gold2 .c-img { transform: translate(calc((var(--mx) - 50%) * -.03), calc((var(--my) - 50%) * -.03)) scale(1.03); will-change: transform; }

.cslab-front.gild.au::before { background: linear-gradient(135deg, #6a4a10 0%, #e0b24a 12%, #fff6d0 22%, #f0c75e 32%, #8e6418 48%, #f2cd6c 62%, #fffbe0 72%, #c9952c 84%, #5a3e0c 100%); }
.cslab-back.gild.au { background: var(--gold-brush) padding-box, radial-gradient(120% 45% at 50% 0%, rgba(255,214,130,.16), transparent 62%), linear-gradient(180deg, #221a0c 0%, #120d06 52%, #080603 100%) padding-box,
  linear-gradient(135deg, #6a4a10 0%, #e0b24a 12%, #fff6d0 22%, #f0c75e 32%, #8e6418 48%, #f2cd6c 62%, #fffbe0 72%, #c9952c 84%, #5a3e0c 100%) border-box; }
@media (prefers-reduced-motion: reduce) { .card.ic.r-gold2 .c-shine { animation: none; } .card.ic.r-gold2 .c-img { transform: none; } }

.slab-lbl em { flex: none; white-space: nowrap; }
.slab-lbl .sl-name { min-width: 0; overflow: hidden; }
.slab-lbl .sl-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.thumb { display: inline-block; width: 18px; height: 18px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21h4V9H2v12zm20-11a2 2 0 00-2-2h-6.3l1-4.6v-.3c0-.4-.2-.8-.4-1.1L13.2 1 6.6 7.6C6.2 7.9 6 8.4 6 9v10a2 2 0 002 2h9c.8 0 1.5-.5 1.8-1.2l3-7.1c.1-.2.2-.5.2-.7v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21h4V9H2v12zm20-11a2 2 0 00-2-2h-6.3l1-4.6v-.3c0-.4-.2-.8-.4-1.1L13.2 1 6.6 7.6C6.2 7.9 6 8.4 6 9v10a2 2 0 002 2h9c.8 0 1.5-.5 1.8-1.2l3-7.1c.1-.2.2-.5.2-.7v-2z'/%3E%3C/svg%3E") center/contain no-repeat; }
.like-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; color: #e9e6f5; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font: 700 15px var(--font-n); letter-spacing: .02em; font-variant-numeric: tabular-nums; transition: color .15s, background .15s, border-color .15s; }
.like-btn.on { color: #fff; background: linear-gradient(180deg, #ff8db0, #fb7299); border-color: rgba(255,200,220,.6); box-shadow: 0 4px 14px rgba(251,114,153,.45); }
.mk-price { display: inline-flex; align-items: center; gap: 3px; font: 700 17px var(--font-n); color: #ffe3a3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-price .coin { width: 15px; height: 15px; margin-right: 2px; }
.mk-price em { font-style: normal; font-size: 12px; margin-left: 4px; padding: 1px 5px; border-radius: 6px; }
.mk-price em.up { color: #ff8a9a; background: rgba(255,90,110,.14); }
.mk-price em.dn { color: #7fe0b0; background: rgba(60,200,140,.14); }
.mk-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.mk-q { width: 24px; height: 24px; border-radius: 50%; font: 700 13px var(--font-n); color: var(--mut); border: 1px solid rgba(255,255,255,.2); }
.detail-sheet .mk-row { margin-top: -2px; }
.own-acts .sell-one { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.rv-like { position: absolute; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: auto; }
.rv-like[hidden] { display: none; }
.rv-like .like-btn { flex-direction: column; gap: 2px; width: 44px; padding: 9px 0 6px; border-radius: 22px; font-size: 14px; background: rgba(20,18,32,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rv-like .like-btn .thumb { width: 20px; height: 20px; }
.rv-like .like-btn.on { background: linear-gradient(180deg, #ff8db0, #fb7299); }
.rv-like .mk-price { flex-direction: column; gap: 0; font-size: 14px; padding: 4px 6px; border-radius: 10px; background: rgba(20,18,32,.55); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.rv-like .mk-price em { margin: 2px 0 0; font-size: 10px; }

.col-grid .cell .cell-price { position: absolute; left: 3cqw; bottom: 3cqw; z-index: 6; display: inline-flex; align-items: center; gap: 1.5cqw; padding: .6cqw 3cqw .6cqw 2cqw; border-radius: 4cqw; background: rgba(0,0,0,.72); font: 700 8cqw var(--font-n); color: #ffe3a3; pointer-events: none; }
.col-grid .cell .cell-price .coin { width: 8cqw; height: 8cqw; }
.col-grid .cell .cell-price.liked::after { content: ''; width: 4cqw; height: 4cqw; border-radius: 50%; background: #fb7299; margin-left: 1cqw; }
.col-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 12px; }
.col-acts button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; font: 700 14px var(--font-d); letter-spacing: .04em; color: #fff; background: rgba(255,255,255,.06); border: 1px solid var(--gb, rgba(255,255,255,.12)); }
.col-acts #btn-rand { background: linear-gradient(180deg, rgba(0,174,236,.28), rgba(0,174,236,.12)); border-color: rgba(0,174,236,.45); }
.ca-dice::before { content: '🎲'; font-style: normal; }
.ca-chart::before { content: '📈'; font-style: normal; }
.me-row span small { display: block; margin-top: 2px; font-size: 12px; color: var(--mut); }
.me-row button { flex: none; margin-left: 10px; }

.mk-tabs { margin: 10px 0 8px; padding: 0; }
.mk-list { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; border-radius: 12px; background: rgba(255,255,255,.03); }
.mk-li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 14px; cursor: pointer; }
.mk-li + .mk-li { border-top: 1px solid rgba(255,255,255,.06); }
.mk-li > em { width: 20px; text-align: right; font: 700 14px var(--font-n); font-style: normal; color: var(--mut); }
.mk-li > span { flex: 1; min-width: 0; }
.mk-li > span b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-li > span small { font-size: 12px; }
.mk-li:not(.own) > span b { color: #b9b5c9; }
.mk-li .mk-lk { display: inline-flex; align-items: center; gap: 3px; font: 600 13px var(--font-n); font-style: normal; color: var(--mut); }
.mk-li .mk-lk .thumb { width: 13px; height: 13px; }
.mk-li .mk-lk.on { color: #fb7299; }
.mk-li .mk-price { font-size: 15px; min-width: 64px; justify-content: flex-end; }

.rnd { text-align: center; }
.rnd-reel { display: flex; justify-content: center; align-items: center; min-height: 250px; margin: 14px 0 10px; cursor: pointer; }
.rnd-reel .card { position: relative; }
.rnd.rolling .rnd-reel, .rolling .rnd-reel { filter: blur(.4px) brightness(.92); }
.rnd-info { min-height: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 12px; }
.rnd-info b { font: 900 20px var(--font-d); letter-spacing: .04em; }
.rnd-info p { margin: 2px 0 4px; }
.rnd-info .mk-row { margin-top: 4px; }
.rnd .sell-acts a.buy { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.rolling .rnd-go { opacity: .45; pointer-events: none; }

.home-info [hidden] { display: none !important; }
.bx-mega { --ac: #ff2a3d; width: 100%; height: 70px; }
.bx-mega.locked { --ac: #ff8a3d; }
.bx-mega .bx-t b { font-size: 19px; background: linear-gradient(180deg, #fff7d8 0%, #ffd35a 46%, #ff6a3d 52%, #ffe28a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bx-mega .bx-stack { width: 40px; }
.bx-mega .bx-stack i { width: 27px; height: 40px; margin: -20px 0 0 -13.5px; border-radius: 6px / 4px; }
.bx-mega .bx-stack i:nth-child(1) { transform: translate(-9px, 3px) rotate(-18deg); }
.bx-mega .bx-stack i:nth-child(2) { transform: translate(9px, 3px) rotate(16deg); }
.bx-mega .bx-stack i:nth-child(4) { transform: translate(-4px, -1px) rotate(-7deg); filter: brightness(.88); }
.bx-mega .bx-stack i:nth-child(5) { transform: translate(4px, -2px) rotate(6deg); }
.bx-mega.locked .bx-n { background: linear-gradient(180deg, #8a8a94 0%, #4a4a52 48%, #2a2a30 52%, #45454c 100%); }
.bx-mega .bx-sheen { animation-delay: .6s; background: linear-gradient(100deg, transparent 42%, rgba(255,210,150,.45) 50%, transparent 58%); }

.pack.mega > .pk { border-radius: 4.5cqw / 3cqw; }
.pack.mega .pk-pillow {
  background:
    radial-gradient(62% 48% at 42% 44%, rgba(255,255,255,.2), rgba(255,255,255,0) 62%),
    linear-gradient(90deg, rgba(0,0,0,.85) 0, rgba(0,0,0,0) 16%, rgba(255,255,255,.08) 30%, rgba(255,255,255,0) 52%, rgba(0,0,0,0) 80%, rgba(0,0,0,.9) 100%),
    linear-gradient(180deg, rgba(0,0,0,.7) 5%, rgba(0,0,0,0) 17%, rgba(0,0,0,0) 83%, rgba(0,0,0,.7) 95%);
}

.tri-row { display: flex; justify-content: center; gap: 18px; margin: 14px 0 6px; }
.tri-row span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.6); }
.tri-row i { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 900 18px var(--font-d); font-style: normal; color: rgba(255,255,255,.5); background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.18); transition: all .3s; }
.tri-row span.ok { color: #fff; }
.tri-row span.ok i { color: #fff; background: linear-gradient(180deg, #ff6b7a, #e8102e); border-color: #ffd1d6; box-shadow: 0 0 18px rgba(255,42,61,.6); }
.tri-msg { min-height: 1.4em; text-align: center; color: #ffd36b; font-size: 13px; }
.tri-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.tri-acts .buy, .tri-acts .buy2 { height: 46px; }
.tri-acts [disabled] { opacity: .45; }

.mg-fling { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mg-fly { position: absolute; left: 50%; top: 48%; will-change: transform, opacity; }
.mg-fly > .card, .mg-fly > .cardwrap { position: absolute; left: 0; top: 0; }
.mg-fly.prem::after { content: '✦ 精品卡 ✦'; position: absolute; left: -20px; right: -20px; bottom: -30px; text-align: center; color: #ffe2a0; font: 800 14px var(--font-d); letter-spacing: .2em; text-shadow: 0 0 12px #ffb000; }

.mg-list { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; z-index: 2; }
.mg-list::-webkit-scrollbar { display: none; }
.mg-cell { position: relative; height: var(--mh); display: flex; flex-direction: column; align-items: center; }
.mg-card { position: relative; width: var(--mw); height: calc(var(--mw) * 1.4); flex: none; transition: filter .5s; container-type: inline-size; }
.mg-card > .card, .mg-card > .cardwrap, .mg-card > .mini-slab { position: absolute; left: 0; top: 0; }
.mg-card > .mini-sleeve { position: absolute; left: 5cqw; top: 0; margin: 0; }
.mg-no { position: absolute; left: calc(50% - var(--mw) / 2 - 36px); top: 4px; width: 28px; text-align: right; font: 700 12px var(--font-n); color: rgba(255,255,255,.35); }
.mg-cell.prem:not(.lit) .mg-card::after { content: '✦ 精品卡 · 点击翻开 ✦'; position: absolute; left: -20px; right: -20px; bottom: -26px; text-align: center; color: #ffe2a0; font: 700 13px var(--font-d); letter-spacing: .12em; text-shadow: 0 0 10px #ffb000; }
.mg-cell.r-gold { --rc: #ffc83d; } .mg-cell.r-gold2 { --rc: #ffcf6a; } .mg-cell.r-rainbow { --rc: #ffcf7a; }
.mg-cell.lit .mg-card { filter: drop-shadow(0 0 22px var(--rc)); }
.mg-acts { display: flex; gap: 10px; margin-top: 14px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .35s .55s, transform .35s .55s; }
.mg-cell.lit .mg-acts { opacity: 1; transform: none; pointer-events: auto; }
.mg-acts .buy, .mg-acts .buy2 { width: auto; height: 42px; min-width: 104px; padding: 0 20px; border-radius: 21px; font-size: 15px; }
.mg-end { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 24px 40px; text-align: center; }
.mg-end b { font: 900 22px var(--font-d); letter-spacing: .06em; }
.mg-end small { color: var(--mut); font-size: 13px; }
.mg-end .buy { max-width: 260px; margin-top: 8px; }
#s-mega .mg-top { z-index: 6; }
#s-mega .mg-dm { z-index: 1; }
#s-mega .hint { z-index: 6; pointer-events: none; }
#mg-label { padding: 6px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--gb); font: 700 13px var(--font-d); letter-spacing: .06em; white-space: nowrap; }
#mg-count { flex: none; color: #fff; font: 700 15px var(--font-n); font-variant-numeric: tabular-nums; }

.sheet.qz-sheet { top: 0; display: flex; }
.qz { position: relative; flex: 1; min-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: calc(8px + var(--sat)) 2px 6px; box-sizing: border-box; }
.qz-top { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.qz-top b { font: 900 22px var(--font-d); letter-spacing: .12em; background: linear-gradient(180deg, #fff6d6, #f2c562 55%, #b8862b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qz-top span { font-size: 12px; color: var(--mut); letter-spacing: .04em; }
.qz-stage { position: relative; perspective: 1100px; margin-top: 2px; }
.qz-flip { position: relative; transform-style: preserve-3d; transition: transform .62s cubic-bezier(.45,.05,.25,1); }
.qz-flip.back { transform: rotateY(180deg); }
.qz-flip > .slab { backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.qz-flip > .slab + .slab { position: absolute; left: 0; top: 0; transform: rotateY(180deg); }
.qz .sl-name small { display: none; }
.qz .slab-lbl .sl-name { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.qz .slab-lbl .sl-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.qz .slab-lbl em { flex: 0 0 auto; white-space: nowrap; font-size: 11px; letter-spacing: 0; }
.qz-stage { transition: margin .55s cubic-bezier(.3,1.2,.5,1), transform .55s cubic-bezier(.3,1.2,.5,1); }
.qz.done .qz-stage { margin-top: 4vh; transform: scale(1.04); }
.qz.done .qz-val { margin-top: 3vh; }
.qz-q { position: absolute; inset: 0; display: grid; place-items: center; padding: 10cqw 9cqw; box-sizing: border-box; border-radius: inherit;
  background: radial-gradient(120% 80% at 50% 50%, rgba(10,8,4,.78), rgba(10,8,4,.9)); box-shadow: inset 0 0 0 1px rgba(242,197,98,.45), inset 0 0 0 4cqw rgba(0,0,0,.25); }
.qz-q p { margin: 0; font: 900 8.4cqw/1.5 var(--font-d); color: #fff1cc; text-align: center; text-wrap: balance; text-shadow: 0 1px 0 #000, 0 0 12px rgba(242,197,98,.35); }
.qz-val { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 22px 7px; border-radius: 16px; background: rgba(0,0,0,.42); border: 1px solid rgba(242,197,98,.3); transition: box-shadow .4s, border-color .4s; }
.qz-val small { font-size: 11px; color: var(--mut); letter-spacing: .08em; }
.qz-num { display: flex; align-items: center; gap: 6px; }
.qz-num .coin { width: 22px; height: 22px; }
.qz-num b { font: 800 30px/1.05 var(--font-n); letter-spacing: .02em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fffbe8, #ffd66b 55%, #d99a20); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qz-val.gain { border-color: rgba(255,214,107,.85); box-shadow: 0 0 0 1px rgba(255,214,107,.35), 0 0 34px rgba(255,190,60,.45); }
.qz-val.flat { opacity: .7; }
.qz-track { display: flex; align-items: center; }
.qz-track i { font: 800 15px var(--font-n); font-style: normal; min-width: 40px; padding: 3px 0; text-align: center; border-radius: 13px; color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: color .3s, background .3s, box-shadow .3s; }
.qz-track i.on { color: #2a1a02; background: linear-gradient(180deg, #fff1c2, #f2c562 60%, #c8902e); border-color: #ffe39a; box-shadow: 0 0 14px rgba(255,200,80,.55); }
.qz-track i:last-child.on { background: linear-gradient(100deg, #ffe39a, #fff6d6 30%, #ff9ad5 55%, #9ad8ff 75%, #ffe39a); }
.qz-track s { width: 14px; height: 2px; background: rgba(255,255,255,.14); }
.qz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.qz-opts button { min-height: 52px; padding: 6px 10px; border-radius: 14px; font: 700 15px/1.3 var(--font-d); color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14); transition: background .2s, border-color .2s, transform .12s; }
.qz-opts button:active { transform: scale(.96); }
.qz-opts button:disabled { opacity: .55; }
.qz-opts button.ok { opacity: 1; background: linear-gradient(180deg, rgba(70,220,140,.42), rgba(30,150,90,.32)); border-color: #63e6a0; }
.qz-opts button.bad { opacity: 1; background: linear-gradient(180deg, rgba(255,90,100,.4), rgba(170,30,50,.3)); border-color: #ff7b86; }
.qz-why { margin: 0; min-height: 38px; padding: 0 8px; font-size: 13px; line-height: 1.5; color: var(--mut); text-align: center; }
.qz-why.ok { color: #9af0c2; }
.qz-why.bad { color: #ffb0b6; }
.qz.done .qz-opts, .qz.done .qz-why, .qz.done .qz-track { display: none; }
.qz-end { width: 100%; display: flex; flex-direction: column; gap: 14px; opacity: 0; }
.qz-end:empty { display: none; }
.qz-res { margin: 0; text-align: center; font: 900 20px var(--font-d); letter-spacing: .06em; color: #fff; }
.qz-res b { font: 800 26px var(--font-n); color: #ffd66b; margin-left: 2px; }
.qz-res small { display: block; margin-top: 2px; font: 600 13px var(--font-n); letter-spacing: .04em; color: var(--mut); }
.qz-stamps { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.qz-stamp { position: absolute; left: 50%; top: 50%; white-space: nowrap; }
.qz-stamp b { display: block; font: 800 96px/1 var(--font-n); letter-spacing: -.02em; padding: 0 .08em;
  background: linear-gradient(180deg, #fffdf2 0%, #ffe08a 40%, #e8a52c 70%, #8a5a10 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2px rgba(60,35,5,.55); filter: drop-shadow(0 4px 0 rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,190,60,.75)); }
.qz-stamp.top b { font-size: 120px; background: linear-gradient(100deg, #fff6d6 0%, #ffd66b 25%, #ff9ad5 48%, #9ad8ff 68%, #ffe08a 90%); -webkit-background-clip: text; background-clip: text; }
.qz-stamp.seal b { filter: drop-shadow(0 3px 0 rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,190,60,.6)); }
.qz-fly { position: absolute; z-index: 50; width: 22px; height: 22px; pointer-events: none; }

.mini-slab .qz-badge { position: absolute; left: 50%; bottom: 4cqw; transform: translateX(-50%); z-index: 5; white-space: nowrap; padding: 1.2cqw 3.6cqw; border-radius: 5cqw; font: 900 6.4cqw var(--font-d); font-style: normal; letter-spacing: .06em; color: #2a1a02;
  background: linear-gradient(180deg, #fff1c2, #f2c562 60%, #c8902e); box-shadow: 0 0 0 1px #ffe39a, 0 0 4cqw rgba(255,200,80,.7); animation: qzPulse 1.8s ease-in-out infinite; }
@keyframes qzPulse { 50% { box-shadow: 0 0 0 1px #ffe39a, 0 0 9cqw rgba(255,200,80,.95); } }
.mini-slab .qz-grade { position: absolute; right: 3cqw; top: 20cqw; z-index: 5; padding: .8cqw 2.4cqw; border-radius: 2cqw; transform: rotate(-8deg); font: 800 6.6cqw var(--font-n); font-style: normal; color: #ffe08a; background: rgba(40,20,0,.82); border: 1px solid rgba(255,214,107,.7); box-shadow: 0 0 4cqw rgba(255,190,60,.45); }
@media (prefers-reduced-motion: reduce) { .mini-slab .qz-badge { animation: none; } }

.qz-go { display: block; margin: 0 auto 10px; padding: 9px 18px; border-radius: 20px; font: 800 14px var(--font-d); letter-spacing: .06em; color: #2a1a02; background: linear-gradient(180deg, #fff1c2, #f2c562 60%, #c8902e); box-shadow: 0 0 0 1px #ffe39a, 0 0 18px rgba(255,200,80,.5); }
.qz-chip { width: fit-content; margin: 0 auto 10px; padding: 5px 14px; border-radius: 14px; font: 700 13px var(--font-d); color: #ffe08a; background: rgba(40,20,0,.7); border: 1px solid rgba(255,214,107,.55); display: flex; align-items: center; gap: 4px; }

.qz { overflow: hidden; --qa: #ffcf6a; --qa2: #fff1c2; --qb: #c8902e; --qt: #2a1a02; }
.qz-rainbow { --qa: #f6d27e; --qa2: #fff6dc; --qb: #b88a3a; }
.qz-stage > .qz-flip { z-index: 1; }
.qz-aura { position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; opacity: .22; transition: opacity .6s ease;
  -webkit-mask: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.5) 48%, transparent 72%); mask: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.5) 48%, transparent 72%); }
.qz-aura i { position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--qa) 70%, transparent) 0deg 4deg, transparent 4deg 15deg); animation: qzSpin 28s linear infinite; }
.qz-aura i + i { background: repeating-conic-gradient(from 7deg, color-mix(in srgb, var(--qa2) 45%, transparent) 0deg 2deg, transparent 2deg 11deg); animation-duration: 40s; animation-direction: reverse; }
.qz-rainbow .qz-aura i + i { background: repeating-conic-gradient(from 7deg, rgba(255,140,220,.32) 0deg 2deg, transparent 2deg 9deg, rgba(140,220,255,.32) 9deg 11deg, transparent 11deg 18deg); }
.qz-aura::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--qa) 60%, transparent), transparent); }
@keyframes qzSpin { to { transform: rotate(360deg); } }
.qz[data-lv="1"] .qz-aura { opacity: .45; } .qz[data-lv="2"] .qz-aura { opacity: .6; } .qz[data-lv="3"] .qz-aura { opacity: .78; } .qz[data-lv="4"] .qz-aura { opacity: .95; }
.qz.glow .qz-aura { opacity: .7; }
.qz.glow[data-lv="3"] .qz-aura, .qz.glow[data-lv="4"] .qz-aura { opacity: .9; }
.qz-glint { position: absolute; inset: 0; z-index: 2; border-radius: 14px; overflow: hidden; pointer-events: none; }
.qz-glint::before { content: ''; position: absolute; top: -20%; bottom: -20%; width: 38%; left: -60%; transform: skewX(-18deg); opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,246,220,.42) 45%, rgba(255,255,255,.6) 50%, rgba(255,246,220,.42) 55%, transparent); mix-blend-mode: screen; }
.qz.glow .qz-glint::before { animation: qzGlint 3.6s ease-in-out .4s infinite; }
@keyframes qzGlint { 0% { left: -60%; opacity: 0; } 8% { opacity: 1; } 38% { left: 125%; opacity: 1; } 39%, 100% { left: 125%; opacity: 0; } }
.qz-flare { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,250,230,.95), color-mix(in srgb, var(--qa) 75%, transparent) 35%, transparent 70%); mix-blend-mode: screen; }
.qz-flare.top { background: radial-gradient(closest-side, #fff, rgba(255,230,160,.9) 25%, rgba(255,140,220,.45) 45%, rgba(140,220,255,.3) 58%, transparent 72%); }
.qz-val { position: relative; z-index: 3; }
.qz[data-lv="2"] .qz-val { box-shadow: 0 0 22px color-mix(in srgb, var(--qa) 35%, transparent); border-color: color-mix(in srgb, var(--qa) 60%, transparent); }
.qz[data-lv="3"] .qz-val, .qz[data-lv="4"] .qz-val { box-shadow: 0 0 34px color-mix(in srgb, var(--qa) 55%, transparent); border-color: var(--qa); }
.qz-val.max .qz-num b { background: linear-gradient(100deg, #fff6d6 0%, #ffd66b 30%, #ff9ad5 52%, #9ad8ff 70%, #ffe08a 92%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: qzIri 3s linear infinite; }
@keyframes qzIri { to { background-position: -200% 0; } }
.qz-plus { position: absolute; left: 50%; bottom: 100%; white-space: nowrap; pointer-events: none; font: 800 24px var(--font-n); color: #ffe08a; text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 14px rgba(255,190,60,.8); }
.qz-dust { position: absolute; z-index: 2; width: 4px; height: 4px; border-radius: 50%; pointer-events: none; background: #fff3c4; box-shadow: 0 0 6px 1px var(--qa); opacity: 0; animation: qzDust 4s linear infinite; }
.qz-rainbow .qz-dust:nth-child(3n) { background: #ffd1f0; box-shadow: 0 0 6px 1px #ff9ad5; }
.qz-rainbow .qz-dust:nth-child(3n+1) { background: #d6f2ff; box-shadow: 0 0 6px 1px #9ad8ff; }
@keyframes qzDust { 0% { opacity: 0; transform: translateY(0) scale(var(--s)); } 15% { opacity: .95; } 80% { opacity: .6; } 100% { opacity: 0; transform: translateY(-150px) scale(calc(var(--s) * .5)); } }
.qz-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.qz-btns button { height: 52px; border-radius: 26px; font: 800 16px var(--font-d); letter-spacing: .08em; transition: transform .12s ease; }
.qz-btns button:active { transform: scale(.96); }
.qz-b1 { color: var(--qt); background: linear-gradient(180deg, var(--qa2), var(--qa) 55%, var(--qb)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px color-mix(in srgb, var(--qa2) 70%, transparent), 0 8px 26px -6px color-mix(in srgb, var(--qa) 70%, transparent); position: relative; overflow: hidden; }
.qz-b2 { color: var(--qa2); background: linear-gradient(180deg, #2b2416, #120f09); border: 1px solid color-mix(in srgb, var(--qa) 65%, transparent); box-shadow: inset 0 1px 0 rgba(255,240,200,.18); }
.qz-rainbow .qz-b1::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,150,220,.35) 40%, rgba(150,220,255,.35) 55%, transparent 75%); background-size: 250% 100%; mix-blend-mode: overlay; animation: qzIri 3.2s linear infinite; }
.qz-rainbow .qz-b2 { border-image: none; box-shadow: inset 0 1px 0 rgba(255,240,200,.18), 0 0 0 1px rgba(255,160,220,.18); }
@media (prefers-reduced-motion: reduce) { .qz-aura i, .qz.glow .qz-glint::before, .qz-dust, .qz-val.max .qz-num b, .qz-rainbow .qz-b1::after { animation: none; } }

.sell-list .sell-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.05); cursor: pointer; transition: opacity .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.sell-list .sell-row span { flex: 1; }
.sell-list .sell-row:not(.on) { opacity: .45; background: rgba(255,255,255,.025); }
.sell-ck { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.4); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.sell-row.on .sell-ck { background: #fb7299; border-color: #fb7299; }
.sell-row.on .sell-ck::after { content: ''; width: 9px; height: 5px; margin-top: -3px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.sell-acts .buy:disabled { opacity: .45; }

.coins #btn-add { position: relative; }
.coins #btn-add.dot::after { content: ''; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 0 2px #0b0b10, 0 0 8px #ff3b5c; animation: earnDot 1.6s ease-in-out infinite; }
@keyframes earnDot { 50% { transform: scale(1.25); } }
.earn-sub { margin: 2px 0 12px; color: rgba(255,255,255,.6); font-size: 13px; }
.earn-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.earn-row { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.earn-ic { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 900 14px var(--font-d); font-style: normal; color: #2a1800; background: linear-gradient(180deg, #fff1b8, #f2b53a 55%, #c98712); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 14px rgba(242,181,58,.35); }
.earn-row[data-k=triple] .earn-ic { font-size: 12px; color: #fff; background: linear-gradient(180deg, #ff8a96, #e8102e); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 14px rgba(255,42,61,.45); }
.earn-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.earn-row span b { font-size: 14px; color: #fff; }
.earn-row span small { font-size: 11px; color: rgba(255,255,255,.5); }
.earn-row em { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 5px; font: 800 16px var(--font-n); font-style: normal; color: #ffd27a; }
.earn-row em .coin { width: 16px; height: 16px; }
.earn-row button { grid-column: 3; grid-row: 1 / 3; height: 38px; min-width: 76px; padding: 0 14px; font-size: 13px; border-radius: 19px; }
.earn-row button[disabled] { opacity: .45; }
.earn-row.done { opacity: .4; filter: grayscale(1); pointer-events: none; }
.earn-row.done .earn-ic { filter: grayscale(.7); }

.qz-q .qz-hc { display: block; width: max-content; margin: 0 auto 8px; padding: 2px 8px; border-radius: 8px; font: 700 11px/16px var(--font-n); font-style: normal; letter-spacing: .04em; color: #fff; -webkit-text-fill-color: #fff; background: linear-gradient(180deg, #ff8ab0, #fb7299); box-shadow: 0 0 10px rgba(251,114,153,.5); }
.qz-q .qz-hc[hidden] { display: none; }
.qz-q { align-content: center; }

.qz-flip > .slab { transition: box-shadow .5s ease; }
.qz[data-lv="2"] .qz-flip > .slab { box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 10px 1px color-mix(in srgb, var(--qa) 45%, transparent); }
.qz[data-lv="3"] .qz-flip > .slab { box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 14px 2px color-mix(in srgb, var(--qa) 60%, transparent); }
.qz[data-lv="4"] .qz-flip > .slab { box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 18px 3px color-mix(in srgb, var(--qa) 75%, transparent); }

#s-feed { background: radial-gradient(120% 70% at 50% 30%, #1d1726 0%, #0a0a0f 60%, #050507 100%); }
.fd-top { position: absolute; top: calc(14px + var(--sat)); left: 0; right: 0; z-index: 4; height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.fd-top b { font: 900 17px var(--font-d); letter-spacing: .12em; color: #fff; }
.fd-top small { font-size: 10px; color: rgba(255,255,255,.5); }
.fd-list { position: absolute; inset: 0; z-index: 1; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.fd-list::-webkit-scrollbar { display: none; }
.fd-item { position: relative; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0 18px; box-sizing: border-box; contain: layout paint; }
.fd-card { width: var(--fd-w); aspect-ratio: 5 / 7; flex: none; display: grid; place-items: center; margin: 0 0 12px; border-radius: 14px; background: rgba(255,255,255,.035); cursor: pointer; }
.fd-card:empty { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.fd-item .card { transition: transform .45s cubic-bezier(.2,.8,.3,1), filter .45s; transform: scale(.94); filter: brightness(.75); }
.fd-item.on .card { transform: none; filter: none; }
.fd-info { width: var(--fd-w); max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.fd-txt { display: flex; flex-direction: column; gap: 2px; }
.fd-txt b { font: 900 22px var(--font-d); color: #fff; letter-spacing: .04em; }
.fd-txt small { font-size: 12px; }
.fd-txt p { margin: 4px 0 0; font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-acts { display: flex; align-items: center; gap: 10px; }
.fd-acts .fd-go { margin-left: auto; width: auto; height: 44px; padding: 0 22px; border-radius: 22px; font-size: 15px; }
#s-feed::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--fd-pad, 76px); z-index: 3; pointer-events: none; background: linear-gradient(180deg, #0b0a10 0%, #0b0a10 94%, transparent); }

.fd-list { cursor: grab; }
.fd-list:active { cursor: grabbing; }
.fd-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: #fb7299; transition: color .7s ease;
  background: radial-gradient(70% 42% at 50% 42%, color-mix(in srgb, currentColor 26%, transparent), transparent 72%); }
.fd-item.on .card { box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.fd-hint { position: absolute; left: 50%; bottom: calc(18px + var(--sab)); z-index: 4; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 14px 7px; border-radius: 14px; font-size: 12px; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); pointer-events: none; transition: opacity .4s; animation: fdHint 1.6s ease-in-out infinite; }
.fd-hint i { width: 10px; height: 10px; border-left: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); margin-top: 4px; }
.fd-hint.gone { opacity: 0; animation: none; }
@keyframes fdHint { 50% { transform: translate(-50%, -6px); } }
@media (prefers-reduced-motion: reduce) { .fd-hint { animation: none; } }

html.lite .col-grid .cell * { animation-play-state: paused !important; }

.fd-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .46s cubic-bezier(.45,.05,.25,1); }
.fd-item.flipped .fd-flip { transform: rotateY(180deg); }
.fd-face, .fd-backface { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fd-backface { transform: rotateY(180deg); }

.fd-backface { overflow: hidden; background: #000; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bc, #fff) 55%, transparent); display: block; }
.fd-bk-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: brightness(.5) saturate(1.2); }
.fd-scr { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 10px 34px rgba(0,0,0,.65); }
.fd-backface.vert .fd-scr { inset: 0; transform: none; aspect-ratio: auto; }
.fd-scr iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.fd-ph { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255,255,255,.6); font-size: 12px; text-align: center; padding: 0 12px; }
.fd-ph[hidden] { display: none; }
.fd-ph i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: #fb7299; animation: fdSpin .9s linear infinite; }
@keyframes fdSpin { to { transform: rotate(360deg); } }
.fd-bk-t { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 12px 0; pointer-events: none; }
.fd-bk-t b { font: 900 19px var(--font-d); color: #fff; letter-spacing: .04em; text-shadow: 0 2px 10px rgba(0,0,0,.8); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-bk-t small { font-size: 11px; color: rgba(255,255,255,.55); }
.fd-bk-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 14px 16px; }
.fd-bk-bar small { font-size: 11px; color: rgba(255,255,255,.5); }
.fd-land, .fd-flipb { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.45); backdrop-filter: blur(6px); color: #fff; font: 700 13px var(--font-n); cursor: pointer; }
.fd-land i { width: 15px; height: 10px; border: 2px solid currentColor; border-radius: 2px; box-sizing: border-box; }
.fd-backface.vert .fd-bk-t, .fd-backface.vert .fd-bk-bar small { display: none; }
.fd-backface.vert .fd-bk-bar { top: 10px; bottom: auto; justify-content: flex-end; }
.fd-backface.vert .fd-land i { width: 10px; height: 15px; }

.fd-shade { display: none; }
#s-feed.landing .fd-shade { display: block; position: fixed; inset: 0; z-index: 9; background: #000; }
#s-feed.landing .fd-list { z-index: 10; pointer-events: none; }
#s-feed.landing .fd-hint, #s-feed.landing::before { visibility: hidden; }
.fd-item.land { contain: none; z-index: 2; }
.fd-item.land .fd-flip { transform: none; transition: none; }
.fd-x::before, .fd-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 1px; background: #fff; transform: translate(-50%,-50%) rotate(45deg); }
.fd-x::after { transform: translate(-50%,-50%) rotate(-45deg); }
.fd-sil { filter: grayscale(1) brightness(.22) contrast(1.2) !important; }
.fd-miss { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none; }
.fd-miss b { font: 900 26px var(--font-d); letter-spacing: .12em; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.fd-miss small { font-size: 12px; color: rgba(255,255,255,.7); }
.fd-acts .fd-draw { width: auto; height: 44px; padding: 0 18px; border-radius: 22px; font-size: 14px; }

.fd-face { transition: visibility 0s linear .23s; }
.fd-item.flipped .fd-face { visibility: hidden; }
.fd-backface { visibility: hidden; transition: visibility 0s linear .23s; }
.fd-item.flipped .fd-backface { visibility: visible; }
.fd-item.land .fd-flip { transform-style: flat; }
#s-feed.landing .fd-item:not(.land), .fd-item.land .fd-info { visibility: hidden; }
.fd-face .soft-foil-canvas { transition: visibility 0s linear .23s; }
.fd-item.flipped .fd-face .soft-foil-canvas, .fd-item.land .fd-face .soft-foil-canvas { visibility: hidden !important; }
#s-feed.landing .soft-foil-canvas { visibility: hidden !important; }

#s-feed .mk-price em { display: none; }
.fd-item .fd-info { opacity: 0; transition: opacity .25s ease; }
.fd-item.on .fd-info { opacity: 1; }

.fd-scr { aspect-ratio: 6 / 5; overflow: hidden; }
.fd-scr iframe { left: 50%; right: auto; width: 148.15%; transform: translateX(-50%); }
.fd-backface.vert .fd-scr iframe { left: 0; width: 100%; transform: none; }

@property --fd-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.fd-backface { box-shadow: none; }
.fd-backface::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1.5px;
  background: color-mix(in srgb, var(--bc, #fff) 38%, 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); }
.fd-backface[data-r="common"]::after { padding: 1px; background: rgba(255,255,255,.16); }
.fd-backface[data-r="pixel"]::after { background: color-mix(in srgb, var(--bc) 45%, transparent); }
.fd-backface[data-r="gold"]::after { background: color-mix(in srgb, var(--bc) 60%, transparent); }
.fd-backface[data-r="gold2"]::after, .fd-backface[data-r="rainbow"]::after { padding: 2px; animation: fdEdge 6s linear infinite; }
.fd-backface[data-r="gold2"]::after { background: conic-gradient(from var(--fd-ang), rgba(232,184,90,.45), rgba(255,236,180,.95) 8%, rgba(232,184,90,.45) 18%, rgba(232,184,90,.45)); }
.fd-backface[data-r="rainbow"]::after { background: conic-gradient(from var(--fd-ang), rgba(255,120,170,.55), rgba(255,220,120,.55), rgba(120,240,200,.55), rgba(120,170,255,.55), rgba(220,140,255,.55), rgba(255,120,170,.55)); }
@keyframes fdEdge { to { --fd-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .fd-backface::after { animation: none !important; } }
.fd-bk-bar { justify-content: flex-end; }

.fd-item.land .fd-face, .fd-item.land .fd-bk-bar { visibility: hidden; }
@keyframes fdShade { from { opacity: 0; } }
.fd-card { touch-action: pan-y; }

.fd-ph { z-index: 2; background: #0b0a10; transition: opacity .45s ease, visibility 0s linear 0s; }
.fd-ph.off { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.fd-tap { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.fd-scr.pass .fd-tap { pointer-events: none; }

.fd-backface:not(.vert) .fd-scr { left: 50%; right: auto; top: 50%; width: var(--fd-w); height: calc(var(--fd-w) * 5 / 6); aspect-ratio: auto; transform: translate(-50%, -50%);
  transition: width .5s cubic-bezier(.3,.8,.2,1), height .5s cubic-bezier(.3,.8,.2,1), transform .5s cubic-bezier(.3,.8,.2,1); }
.fd-scr iframe { transition: width .5s cubic-bezier(.3,.8,.2,1); }

.fd-item.rot .fd-backface:not(.vert) .fd-scr { width: calc(var(--fd-w) * 1.4 - 4px); height: calc((var(--fd-w) * 1.4 - 4px) * 9 / 16); transform: translate(-50%, -50%) rotate(90deg); box-shadow: 0 0 30px rgba(0,0,0,.6); }
.fd-item.rot .fd-scr iframe { width: 100%; }
.fd-item.rot .fd-bk-bar { padding: 0 6px 6px; }
.fd-item.rot .fd-land { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 50%; }
.fd-item.rot .fd-land span { display: none; }
.fd-item.rot .fd-land i { width: 10px; height: 15px; }

#s-feed.landing .fd-shade { background: rgba(6,6,10,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fdShade .3s ease; }
#s-feed.unlanding .fd-shade { animation: fdShadeOut .26s ease forwards; }
@keyframes fdShadeOut { to { opacity: 0; } }
.fd-item.land .fd-backface { z-index: 11; pointer-events: auto; box-shadow: 0 30px 90px rgba(0,0,0,.75); transition: none; }
.fd-item.land .fd-backface .fd-scr, .fd-item.land .fd-backface.vert .fd-scr { left: var(--fd-p); top: var(--fd-p); right: var(--fd-p); bottom: var(--fd-p); width: auto; height: auto; aspect-ratio: auto; transform: none; border-radius: 8px; overflow: hidden; box-shadow: none; transition: none; }
.fd-item.land .fd-scr iframe { left: 0; width: 100%; transform: none; transition: none; }
.fd-x { display: none; position: fixed; z-index: 12; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); cursor: pointer; }
.fd-x.on { display: block; animation: fdShade .3s ease .15s both; }
#s-feed.unlanding .fd-x { display: none; }
.fd-x:hover { background: rgba(255,255,255,.2); }
.fd-x::before, .fd-x::after { width: 15px; }

.fd-item.rot .fd-backface:not(.vert) .fd-scr { border-radius: calc(var(--fd-w) * 0.05 - 2px); }
.fd-item.rot .fd-bk-bar { padding: 0 4px 8px; }

.ti-arena { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3l7 7-2 2-7-7V3zM20 3h2v2l-9.5 9.5 2 2-1.5 1.5-2-2-3 3 1 1-1.5 1.5L4 18l-2-2 1.5-1.5 1 1 3-3-2-2L7 9l2 2z'/%3E%3C/svg%3E"); }
#s-arena { background: radial-gradient(120% 50% at 50% 0%, rgba(251,114,153,.14), transparent 60%), linear-gradient(180deg, rgba(16,13,22,.6), rgba(7,7,10,.9)); padding-bottom: 24px; }
#s-arena .page-h span { font: 700 13px var(--font-n); color: var(--mut); letter-spacing: .06em; }

.bt-at { position: absolute; left: 4px; top: 4px; z-index: 3; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 92%, #fff), color-mix(in srgb, var(--ac) 70%, #000)); box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35); }
.bt-at svg { width: 15px; height: 15px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.bt-taunt { position: absolute; right: 4px; top: 4px; z-index: 3; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font: 900 11px var(--font-d); color: #1b1926;
  background: linear-gradient(160deg, #fff, #cfcbdd); box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.bt-rules .bt-at, .bt-info .bt-at { position: static; display: inline-grid; width: 18px; height: 18px; border-radius: 5px; vertical-align: -4px; margin-right: 3px; }
.bt-rules .bt-at svg, .bt-info .bt-at svg { width: 12px; height: 12px; }

.bt { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: #fff; font-family: var(--font-b);
  --mw: 86px; --hw: calc(var(--mw) * 1.22); --e: #fb7299; --m: #00aeec;
  --metal: linear-gradient(180deg, #4a4858 0%, #2a2834 45%, #1a1822 55%, #2e2c3a 100%);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  padding: calc(6px + var(--sat)) 8px calc(6px + var(--sab)); gap: 2px; }
.bt-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(70% 36% at 50% 0%, rgba(251,114,153,.26), transparent 70%), radial-gradient(70% 36% at 50% 100%, rgba(0,174,236,.26), transparent 70%),
    radial-gradient(120% 80% at 50% 50%, #17141f 0%, #0d0b14 60%, #06060a 100%); }
.bt-bg::before { content: ''; position: absolute; inset: 0; background: var(--noise); opacity: .5; mix-blend-mode: overlay; }
.bt-bg::after { content: ''; position: absolute; inset: 0; background:
  repeating-linear-gradient(125deg, transparent 0 46px, rgba(255,255,255,.025) 46px 47px),
  linear-gradient(118deg, transparent 0 62%, rgba(255,255,255,.035) 62.3%, transparent 63% 70%, rgba(255,255,255,.03) 70.3%, transparent 71%); }

.bt-ring { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 2.3; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.07), rgba(255,255,255,.03) 50%, transparent 70%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.3), inset 0 0 0 9px rgba(255,255,255,.05), inset 0 0 0 10px rgba(255,255,255,.22), 0 0 50px rgba(255,255,255,.12); }
.bt-ring::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; border: 2px dashed rgba(255,255,255,.4); animation: bt-ringspin 60s linear infinite; }
.bt-ring::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(255,255,255,.06);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.035) 0 5deg, transparent 5deg 15deg); }
@keyframes bt-ringspin { to { transform: rotate(360deg); } }
.bt-spot { position: absolute; top: -8%; width: 70%; height: 90%; pointer-events: none; opacity: 1; filter: blur(10px); transform-origin: 50% 0;
  background: conic-gradient(from 0deg at 50% 0%, transparent 0 43%, rgba(255,255,255,.14) 47%, rgba(255,255,255,.26) 50%, rgba(255,255,255,.14) 53%, transparent 57%); }
.bt-spot.l { left: -22%; animation: bt-spot 9s ease-in-out infinite alternate; }
.bt-spot.r { right: -22%; animation: bt-spot 9s ease-in-out -4.5s infinite alternate-reverse; }
@keyframes bt-spot { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.bt-crowd { position: absolute; left: 0; right: 0; height: 6.5%; pointer-events: none; opacity: 1; transition: transform .3s cubic-bezier(.2,.9,.3,1.3); background-color: rgba(0,0,0,.35);
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.5) 0 1px, transparent 1.6px) 7px 0 / 61px 100% repeat-x,
    radial-gradient(circle at 50% 55%, rgba(0,174,236,.6) 0 1px, transparent 1.6px) 33px 0 / 97px 100% repeat-x,
    radial-gradient(circle at 50% 100%, #56516e 0 9px, transparent 10px) 0 0 / 22px 100% repeat-x,
    radial-gradient(circle at 50% 100%, #3b3750 0 10px, transparent 11px) 11px 0 / 26px 100% repeat-x; }
.bt.ulting .bt-crowd.b { transform: translateY(-8px) scaleY(1.2); } .bt.ulting .bt-crowd.t { transform: scaleY(-1) translateY(-8px) scaleY(1.2); }
.bt.ulting .bt-crowd::after { animation-duration: .3s; }
.bt-crowd.t { top: 8%; transform: scaleY(-1); } .bt-crowd.b { bottom: 8%; }

.bt-stage { position: absolute; left: 50%; width: 118%; height: 26%; transform: translateX(-50%); pointer-events: none; border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.6), 0 10px 24px rgba(0,0,0,.35); }
.bt-stage.t { top: 26%; transform: translateX(-50%) perspective(500px) rotateX(18deg); background-image: linear-gradient(180deg, rgba(251,114,153,.09), rgba(255,255,255,.01)); }
.bt-stage.b { bottom: 26%; transform: translateX(-50%) perspective(500px) rotateX(-18deg); background-image: linear-gradient(0deg, rgba(0,174,236,.09), rgba(255,255,255,.01)); }
.bt-stage::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.16) 45%, rgba(255,255,255,.05) 50%, transparent 70%); background-size: 240% 100%; animation: bt-sheen 6s ease-in-out infinite; }
@keyframes bt-sheen { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.bt-ropes { position: absolute; left: 3px; right: 3px; top: 15%; bottom: 15%; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, transparent 2px 6px) left / 16px 100% no-repeat, repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, transparent 2px 6px) right / 16px 100% no-repeat; }
.bt-ropes::before, .bt-ropes::after { content: ''; position: absolute; top: -10px; bottom: -10px; width: 8px; border-radius: 3px; background: linear-gradient(90deg, #6d5a2c, #e9c46a 40%, #8a6d2b); box-shadow: 0 0 10px rgba(233,196,106,.5); }
.bt-ropes::before { left: -2px; } .bt-ropes::after { right: -2px; }
.bt-crowd::after { content: ''; position: absolute; inset: 0; background: inherit; background-size: 61px 100%, 97px 100%, 0 0, 0 0; background-color: transparent; animation: bt-twinkle 1.3s steps(2) infinite; mix-blend-mode: screen; }
@keyframes bt-twinkle { from { opacity: .2; } to { opacity: 1; } }
.bt-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0,0,0,.75) 100%); }
.bt-beam { position: absolute; left: 50%; width: 90%; height: 50%; transform: translateX(-50%); filter: blur(26px); opacity: .55; pointer-events: none; }
.bt-beam.t { top: -22%; background: conic-gradient(from 160deg at 50% 0%, transparent 0 8%, rgba(251,114,153,.5) 14%, transparent 22%, transparent 28%, rgba(251,114,153,.35) 33%, transparent 40%); }
.bt-beam.b { bottom: -22%; background: conic-gradient(from -20deg at 50% 100%, transparent 0 8%, rgba(0,174,236,.5) 14%, transparent 22%, transparent 28%, rgba(0,174,236,.35) 33%, transparent 40%); }

.bt-floor { position: absolute; left: 4%; width: 92%; height: 7%; border-radius: 50%; opacity: .9;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.14), rgba(255,255,255,.04) 45%, transparent 72%); filter: blur(2px); }
.bt-floor::before { content: ''; position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); }
.bt-floor.t { top: 36.5%; } .bt-floor.b { top: 63.5%; }
.bt-dm { position: absolute; inset: 14% 0 14%; z-index: 4; pointer-events: none; overflow: hidden; opacity: .85; }
.bt-dm .dm-b { position: absolute; left: 0; white-space: nowrap; font-weight: 800; font-size: 16px !important; color: #fff; -webkit-text-stroke: .8px rgba(0,0,0,.8); text-shadow: 0 0 4px #000, 0 1px 2px #000; }
.bt-lines { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: .45; transition: opacity .5s; }
.bt-lines.show { opacity: 1; }
.bt-lines path { fill: none; stroke-linecap: round; }
.bt-lines .glow { stroke-width: 9; opacity: .5; filter: url(#bt-blur); }
.bt-lines .core { stroke-width: 2; opacity: .75; }
.bt-lines .flow { stroke-width: 2.4; stroke-dasharray: 3 11; animation: bt-dash .9s linear infinite; }
.bt-lines g:not(.me) { opacity: .4; } .bt-lines g:not(.me) .flow { animation-duration: 1.4s; }
.bt-lines .beat path { stroke: #3ddc84; } .bt-lines .weak path { stroke: #ff5c5c; } .bt-lines .even path { stroke: #e9e6f5; }
@keyframes bt-dash { to { stroke-dashoffset: -28; } }
.bt > .bt-hud, .bt > .bt-hslot, .bt > .bt-row, .bt > .bt-mid, .bt > .bt-btns { position: relative; z-index: 3; }

.bt-hud { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 3px; align-items: center; padding: 4px 8px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bt-ava { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--ac) 70%, #fff), var(--ac) 40%, color-mix(in srgb, var(--ac) 55%, #000) 100%);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.5), 0 0 0 2px #2a2834, 0 0 0 3px rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.5); }
.bt-ava svg { width: 20px; height: 20px; fill: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.bt-np { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bt-np b { font: 800 14px var(--font-d); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; }
.bt-np small { font: 700 11px var(--font-n); color: var(--mut); letter-spacing: .08em; white-space: nowrap; }
.bt-hhp { position: relative; height: 13px; border-radius: 7px; overflow: hidden; background: linear-gradient(180deg, #0a0a10, #1c1a26); box-shadow: inset 0 2px 4px rgba(0,0,0,.8), inset 0 -1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(255,255,255,.08); }
.bt-hhp i { display: block; height: 100%; border-radius: 7px; transition: width .35s cubic-bezier(.2,.8,.3,1); position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--m) 55%, #fff) 0%, var(--m) 45%, color-mix(in srgb, var(--m) 70%, #000) 100%); box-shadow: 0 0 10px var(--m); }
.bt-hhp i::after { content: ''; position: absolute; left: 2px; right: 2px; top: 1px; height: 4px; border-radius: 3px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); }
.bt-hhp::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0,0,0,.35) calc(10% - 1px) 10%); pointer-events: none; }
.bt-hud.e .bt-hhp i { background: linear-gradient(180deg, color-mix(in srgb, var(--e) 55%, #fff) 0%, var(--e) 45%, color-mix(in srgb, var(--e) 70%, #000) 100%); box-shadow: 0 0 10px var(--e); }
.bt-hhp b { position: absolute; right: 8px; top: 0; z-index: 2; font: 800 10px/13px var(--font-n); letter-spacing: .06em; text-shadow: 0 1px 2px #000; }

.bt-hslot { position: relative; display: flex; justify-content: center; padding: 4px 0; }
.bt-hslot::before { content: ''; position: absolute; left: 50%; bottom: 0; width: calc(var(--hw) * 2.1); height: 30px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--m) 60%, transparent), transparent 70%); filter: blur(5px); }
.bt-hslot.e::before { background: radial-gradient(ellipse, color-mix(in srgb, var(--e) 60%, transparent), transparent 70%); }
.bt-tags { position: absolute; top: 4px; display: flex; flex-wrap: wrap; gap: 3px; max-width: calc(50% - var(--hw) / 2 - 6px); }
.bt-tags.m { justify-content: flex-end; }

.bt-hslot.m { cursor: pointer; }
.bt-ulthint { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font: 800 11px var(--font-d); color: #1b1926; background: linear-gradient(180deg, #fff6c8, #ffc233); box-shadow: 0 0 14px #ffd27a; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .3s; }
.bt-hslot.m.go .bt-ulthint { opacity: 1; animation: bt-blink .6s ease-in-out infinite alternate; }
.bt-hslot.m.go .bt-u::after { animation: bt-ultgo .6s ease-in-out infinite alternate; }
.bt-hslot.m.go .bt-u { animation: bt-ultpulse .6s ease-in-out infinite alternate; }
@keyframes bt-ultpulse { to { transform: scale(1.05); } }
.bt-ulthint i { font-style: normal; font-size: 13px; animation: bt-tap .8s ease-in-out infinite; }
@keyframes bt-tap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px) scale(.9); } }

.bt-hslot.e.tele .bt-u::after { animation: bt-tele .25s ease-in-out infinite alternate; }
@keyframes bt-tele { from { box-shadow: inset 0 0 0 2px #ff5c5c, 0 0 12px #ff5c5c, 0 14px 34px rgba(0,0,0,.7); } to { box-shadow: inset 0 0 0 3px #fff, 0 0 34px #ff5c5c, 0 0 60px #ff5c5c, 0 14px 34px rgba(0,0,0,.7); } }
@keyframes bt-ultgo { from { box-shadow: inset 0 0 0 2px #ffd27a, 0 0 10px #ffd27a, 0 14px 34px rgba(0,0,0,.7); } to { box-shadow: inset 0 0 0 3px #fff6c8, 0 0 30px #ffc233, 0 0 50px #ffc233, 0 14px 34px rgba(0,0,0,.7); } }

.bt-guide { position: absolute; z-index: 27; transform: translate(-50%, -50%); pointer-events: none; animation: fade .3s; }
.bt-guide svg { display: block; filter: drop-shadow(0 6px 12px rgba(0,0,0,.9)); animation: bt-guidetap .7s ease-in-out infinite; }
.bt-guide b { position: absolute; left: 50%; transform: translateX(-50%); padding: 7px 16px; border-radius: 999px; font: 800 15px var(--font-d); color: #1b1926; background: linear-gradient(180deg, #fff6c8, #ffc233); box-shadow: 0 0 22px #ffd27a, 0 4px 12px rgba(0,0,0,.6); white-space: nowrap; }
.bt.guide .bt-hud, .bt.guide .bt-hslot.e, .bt.guide .bt-row, .bt.guide .bt-mid, .bt.guide .bt-btns, .bt.guide .bt-lines, .bt.guide .bt-bg { filter: brightness(.3) saturate(.5); }
.bt.guide .bt-hslot.m { filter: none; z-index: 26; }
.bt.guide .bt-dm { visibility: hidden; }
@keyframes bt-guidetap { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(10px) scale(.85); } }

.bt-spotf { position: absolute; z-index: 2; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; transition: left .35s cubic-bezier(.2,.8,.3,1), top .35s cubic-bezier(.2,.8,.3,1), opacity .4s; background: radial-gradient(circle, color-mix(in srgb, var(--ac, #fff) 28%, transparent), transparent 65%); mix-blend-mode: screen; }
.bt-spotf.on { opacity: 1; }
.bt-tags.e { left: 0; align-items: flex-start; } .bt-tags.m { right: 0; align-items: flex-start; }
.bt-tags span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 4px; border-radius: 999px; font: 700 10px var(--font-d); white-space: nowrap; letter-spacing: .02em; color: #f4f2fa;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid color-mix(in srgb, var(--ac) 55%, rgba(255,255,255,.2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 8px rgba(0,0,0,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bt-tags span svg { width: 13px; height: 13px; fill: var(--ac); filter: drop-shadow(0 0 3px var(--ac)); }
.bt-deck .bt-tags { position: static; flex-direction: row; flex-wrap: wrap; max-width: none; margin-top: 8px; }

.bt-row { display: flex; justify-content: center; gap: 6px; padding-bottom: 6px; }
.bt-u { position: relative; width: var(--mw); flex: none; transition: filter .3s; }
.bt-u.hero { width: var(--hw); }
.bt-pic { position: relative; border-radius: 6px; overflow: hidden; isolation: isolate;
  }
.bt-u .card { --cw: 100% !important; width: 100%; }
.bt-u .card .face { box-shadow: none; }
.bt-u::after { content: ''; position: absolute; inset: 0 0 auto; height: calc(var(--mw) * 1.4); border-radius: 6px; pointer-events: none; z-index: 2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.6); }
.bt-u.hero::after { height: calc(var(--hw) * 1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 14px 34px rgba(0,0,0,.7), 0 0 0 3px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.1); }

.bt-cd { position: absolute; left: 0; right: 0; top: 0; bottom: var(--st); z-index: 2; pointer-events: none; overflow: hidden; }
.bt-cd i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; transition: height .1s linear;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 22%, transparent), color-mix(in srgb, var(--ac) 10%, transparent) 40%, color-mix(in srgb, var(--ac) 6%, transparent)); mix-blend-mode: screen; }
.bt-cd i::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 40%, #fff), #fff, color-mix(in srgb, var(--ac) 40%, #fff)); box-shadow: 0 0 6px #fff, 0 0 14px var(--ac), 0 0 28px var(--ac); }
.bt-cd i::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 70%, #fff), transparent); opacity: .7; }
.bt-cd::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.22); }
.bt-cd::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--cdp, 0%); background: var(--ac); box-shadow: 0 0 6px var(--ac); }
.bt-u.ready .bt-cd i { height: 100% !important; background: color-mix(in srgb, var(--ac) 14%, transparent); animation: bt-cdflash .4s ease-out; } .bt-u.ready .bt-cd i::before, .bt-u.ready .bt-cd i::after { opacity: 0; }
.bt-u.ready .bt-cd::before { background: transparent; }
@keyframes bt-cdflash { from { background: color-mix(in srgb, var(--ac) 75%, #fff); } }
@keyframes bt-ready { from { filter: drop-shadow(0 0 3px var(--ac)); } to { filter: drop-shadow(0 0 12px var(--ac)) brightness(1.12); } }

.bt-u { --st: 15px; } .bt-u.hero { --st: 17px; }
.bt-st { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 0 4px; height: var(--st);
  background: linear-gradient(180deg, rgba(8,8,14,.6), rgba(8,8,14,.9)); border-top: 1px solid rgba(255,255,255,.12); }
.bt-atk { flex: none; display: inline-flex; align-items: center; gap: 1px; font: 800 10px var(--font-n); color: #ffd27a; letter-spacing: .02em; text-shadow: 0 1px 2px #000; }
.bt-atk::before { content: ''; width: 8px; height: 8px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3l5 1 10 10 2-2 3 3-3 3-1-1-3 3-3-3 2-2L4 8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3l5 1 10 10 2-2 3 3-3 3-1-1-3 3-3-3 2-2L4 8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.bt-hp { position: relative; flex: 1; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(0,0,0,.7); box-shadow: inset 0 1px 1px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
.bt-hp i { display: block; height: 100%; width: 100%; border-radius: inherit; transition: width .25s ease-out; background: linear-gradient(90deg, #22c27a, #9af5c4); box-shadow: 0 0 6px rgba(34,194,122,.7); }
.bt-hp.low i { background: linear-gradient(90deg, #ff3d5a, #ffb3c0); box-shadow: 0 0 6px rgba(255,61,90,.8); }
.bt-hpn { flex: none; min-width: 22px; text-align: right; font: 800 10px var(--font-n); letter-spacing: .02em; text-shadow: 0 1px 2px #000; }
.bt-u.hero .bt-atk, .bt-u.hero .bt-hpn { font-size: 11px; }
.bt-ko { display: none; }
.bt-u.ko .bt-pic { filter: grayscale(1) brightness(.4); animation: none; }
.bt-u.ko .bt-cd, .bt-u.ko .bt-at, .bt-u.ko .bt-taunt { display: none; }
.bt-u.ko .bt-ko { display: grid; place-items: center; position: absolute; inset: 0; z-index: 4; font: 900 24px var(--font-n); letter-spacing: .12em; color: rgba(255,255,255,.85); text-shadow: 0 2px 10px #000;
  background: linear-gradient(115deg, transparent 48%, rgba(255,255,255,.3) 49%, transparent 50.5%), linear-gradient(35deg, transparent 58%, rgba(255,255,255,.25) 59%, transparent 60.5%), linear-gradient(160deg, transparent 30%, rgba(255,255,255,.2) 31%, transparent 32.5%); }
.bt-u.ko .bt-st { opacity: .35; }
.bt-u.hit .bt-pic::after { content: ''; position: absolute; inset: 0; z-index: 5; background: #fff; mix-blend-mode: screen; opacity: .65; animation: bt-hitflash .09s ease-out both; }
@keyframes bt-hitflash { to { opacity: 0; } }

.bt-u .bt-pic { animation: bt-idle 3.6s ease-in-out calc(var(--i, 0) * -0.45s) infinite; }
@keyframes bt-idle { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
.bt-u.ko .bt-pic { animation: none; }
.bt-u.ready::after { animation: bt-readyf .7s ease-in-out infinite alternate; }
@keyframes bt-readyf { from { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 60%, #fff), 0 0 6px var(--ac), 0 10px 24px rgba(0,0,0,.6); } to { box-shadow: inset 0 0 0 2px #fff, 0 0 18px var(--ac), 0 0 34px var(--ac), 0 10px 24px rgba(0,0,0,.6); } }
.bt-u.buffed .bt-pic { box-shadow: 0 0 0 2px #ffd27a, 0 0 18px #ffd27a; }
.bt-u.act .bt-pic { box-shadow: 0 0 22px var(--ac); }
.bt-u.ulted .bt-pic { animation: bt-ulted 1.2s ease-in-out infinite alternate; }
@keyframes bt-ulted { from { box-shadow: 0 0 10px var(--ac); } to { box-shadow: 0 0 26px var(--ac), 0 0 0 2px color-mix(in srgb, var(--ac) 70%, #fff); } }
.bt-u.guard .bt-pic::before { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: 6px; border: 2px solid #ff8ad8; box-shadow: 0 0 14px #ff8ad8, inset 0 0 14px rgba(255,138,216,.5); animation: bt-blink .6s ease-in-out infinite alternate; pointer-events: none; }
.bt-u.spot .bt-pic { animation: bt-spot 1.2s ease both; }
@keyframes bt-spot { 0% { transform: scale(1); filter: brightness(1); } 30% { transform: scale(1.18); filter: brightness(1.8) drop-shadow(0 0 20px #3ddc84); } 100% { transform: scale(1); filter: brightness(1); } }

.bt-orb { position: absolute; z-index: 9; width: 18px; height: 18px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 40%, #fff, var(--ac) 45%, transparent 72%); box-shadow: 0 0 14px var(--ac), 0 0 30px color-mix(in srgb, var(--ac) 60%, transparent); }
.bt-orb.bz { border-radius: 40% 60% 40% 60%; } .bt-orb.gc { box-shadow: 0 0 14px var(--ac), -14px 0 10px rgba(0,174,236,.4), -28px 0 10px rgba(0,174,236,.2); } .bt-orb.ka { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z'/%3E%3C/svg%3E") center / 160% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z'/%3E%3C/svg%3E") center / 160% no-repeat; }
.bt-ghost { position: absolute; z-index: 7; transform: translate(-50%, -50%); border-radius: 6px; pointer-events: none; background: rgba(0,174,236,.35); box-shadow: 0 0 16px rgba(0,174,236,.6); animation: bt-ghost .5s ease-out both; }
@keyframes bt-ghost { from { opacity: .9; transform: translate(-50%, -50%) scale(1.05); } to { opacity: 0; transform: translate(-70%, -50%) scale(1.15) skewX(-8deg); } }
.bt-fx { position: absolute; z-index: 10; width: var(--w); height: var(--h); transform: translate(-50%, -50%); pointer-events: none; display: grid; place-items: center; }
.bt-fx.slash::before, .bt-fx.slash::after { content: ''; position: absolute; left: -20%; right: -20%; top: 50%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, #fff 30%, var(--ac) 50%, #fff 70%, transparent); box-shadow: 0 0 12px var(--ac); transform: rotate(-28deg); animation: bt-slash .45s ease-out both; }
.bt-fx.slash::after { transform: rotate(32deg); animation-delay: .08s; }
@keyframes bt-slash { from { opacity: 0; scale: .2 1; } 30% { opacity: 1; scale: 1.1 1; } to { opacity: 0; scale: 1.3 .3; } }
.bt-fx.glitch::before { content: ''; position: absolute; left: 0; right: 0; top: 30%; height: 38%; background: repeating-linear-gradient(0deg, rgba(0,174,236,.5) 0 2px, transparent 2px 6px), linear-gradient(90deg, rgba(255,0,80,.35), transparent 30%, transparent 70%, rgba(0,255,255,.35)); mix-blend-mode: screen; opacity: .5; animation: bt-glitchfx .22s steps(4) both; }
@keyframes bt-glitchfx { 0% { transform: translateX(-6px); opacity: 1; } 50% { transform: translateX(5px); } 100% { transform: translateX(0); opacity: 0; } }
.bt-fx.stars i, .bt-fx.hearts i { position: absolute; width: 16px; height: 16px; background: var(--ac); filter: drop-shadow(0 0 6px var(--ac)); animation: bt-rise .85s ease-out both; }
.bt-fx.stars i { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.8L22 9.3l-5.6 4.6 1.8 7.1L12 17l-6.2 4 1.8-7.1L2 9.3l7.4-.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.8L22 9.3l-5.6 4.6 1.8 7.1L12 17l-6.2 4 1.8-7.1L2 9.3l7.4-.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.bt-fx.hearts i { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z'/%3E%3C/svg%3E") center / contain no-repeat; }
.bt-fx i:nth-child(1) { --dx: -22px; animation-delay: 0s; } .bt-fx i:nth-child(2) { --dx: 0px; animation-delay: .08s; } .bt-fx i:nth-child(3) { --dx: 22px; animation-delay: .16s; } .bt-fx i:nth-child(4) { --dx: -8px; animation-delay: .24s; width: 11px; height: 11px; }
@keyframes bt-rise { from { transform: translate(var(--dx), 10px) scale(.3) rotate(-20deg); opacity: 0; } 30% { opacity: 1; transform: translate(var(--dx), -6px) scale(1.2) rotate(0); } to { transform: translate(calc(var(--dx) * 1.6), -46px) scale(.9) rotate(20deg); opacity: 0; } }
.bt-fx.haha i { position: absolute; font: 900 18px var(--font-d); color: var(--ac); text-shadow: 0 0 8px var(--ac), 0 2px 0 #000; animation: bt-rise .85s ease-out both; font-style: normal; }
.bt-fx.haha i:nth-child(2) { font-size: 24px; }

.bt-mid { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 2px; }
.bt-en { flex: 1; display: flex; gap: 2px; height: 12px; padding: 2px; border-radius: 7px; background: linear-gradient(180deg, #0a0a10, #1c1a26); box-shadow: inset 0 2px 4px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08); position: relative; }
.bt-en.e { flex-direction: row-reverse; }
.bt-en i { flex: 1; border-radius: 2px; background: rgba(255,255,255,.07); transition: background .2s, box-shadow .2s; }
.bt-en i.on { background: linear-gradient(180deg, #fff6c8 0%, #ffc233 45%, #b97500 100%); box-shadow: 0 0 6px #ffd27a, inset 0 1px 0 rgba(255,255,255,.6); }
.bt-en.full i.on { animation: bt-blink .5s ease-in-out infinite alternate; }
.bt-en.used i { background: rgba(255,255,255,.04); box-shadow: none; }
.bt-en.used::after { content: '名场面已放'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px var(--font-d); color: var(--mut); letter-spacing: .1em; }
@keyframes bt-blink { from { box-shadow: 0 0 4px #ffd27a; } to { box-shadow: 0 0 12px #fff; } }
.bt-clock { flex: none; min-width: 62px; text-align: center; font: 800 15px var(--font-n); letter-spacing: .1em; padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums;
  background: var(--metal); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 3px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.5); text-shadow: 0 1px 0 #000; }
.bt-clock.storm { color: #ff8a9a; border-color: rgba(255,92,92,.6); animation: bt-blink .6s ease-in-out infinite alternate; }

.bt-btns { display: flex; justify-content: flex-end; gap: 8px; }
.bt-btn { height: 36px; padding: 0 16px; border-radius: 18px; font: 700 13px var(--font-d); letter-spacing: .04em; color: #f4f2fa; text-shadow: 0 1px 0 #000;
  background: var(--metal); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.5); transition: transform .12s; }
.bt-btn:active { transform: scale(.96); }
.bt-btn.on { background: linear-gradient(180deg, #fff, #dcd8ea); color: #15131f; text-shadow: none; }
.bt-btn.pri { background: linear-gradient(180deg, #ff9ab5, #fb7299 50%, #c94a73); border-color: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.3), 0 6px 18px rgba(251,114,153,.45); }

.bt-count { position: absolute; inset: 0; display: grid; place-items: center; z-index: 20; pointer-events: none; font: 900 76px var(--font-n); letter-spacing: .08em; text-shadow: 0 0 30px rgba(251,114,153,.8), 0 4px 0 rgba(0,0,0,.5); }
.bt-count.small { font: 700 14px var(--font-d); color: var(--mut); letter-spacing: .2em; text-shadow: none; animation: bt-blink 1s infinite alternate; }
.bt-count.pop { animation: bt-pop .65s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes bt-pop { from { transform: scale(2.2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } to { transform: scale(.9); opacity: 0; } }
.bt-f { position: absolute; z-index: 25; transform: translate(-50%, -50%); pointer-events: none; text-align: center; font: 900 24px var(--font-n); color: #fff; -webkit-text-stroke: 1px rgba(0,0,0,.6); text-shadow: 0 0 10px rgba(0,0,0,.9), 0 2px 0 #7a1030; letter-spacing: .02em; animation: bt-float 1.05s cubic-bezier(.2,.8,.3,1) both; }
.bt-f small { display: block; font: 800 10px var(--font-d); color: #ffd27a; letter-spacing: .06em; text-shadow: 0 1px 0 #000; white-space: nowrap; }
.bt-f.beat { color: #8ef0b7; font-size: 30px; } .bt-f.crit { color: #ffb000; font-size: 36px; text-shadow: 0 0 14px #ff5c5c, 0 2px 0 #7a1030; }
.bt-f small { font-size: 11px; }
.bt-f.heal { color: #8ef0b7; font-size: 19px; } .bt-f.miss { color: #c9c4dd; font-size: 15px; font-family: var(--font-d); } .bt-f.kof { font-size: 32px; color: #ff5c5c; }
@keyframes bt-float { from { transform: translate(-50%, -30%) scale(.5); opacity: 0; } 18% { transform: translate(-50%, -55%) scale(1.3); opacity: 1; } 32% { transform: translate(-50%, -60%) scale(1); opacity: 1; } 75% { opacity: 1; } to { transform: translate(-50%, -150%) scale(.95); opacity: 0; } }
.bt-banner { position: absolute; left: 50%; top: 46%; z-index: 23; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; max-width: 96%; pointer-events: none; padding: 10px 26px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(40,38,52,.9), rgba(14,12,22,.92)); border: 1px solid color-mix(in srgb, var(--ac) 60%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 30px color-mix(in srgb, var(--ac) 40%, transparent); animation: bt-banner 1.5s ease both; }
.bt-banner b { display: block; font: 900 22px var(--font-d); letter-spacing: .1em; color: var(--ac); } .bt-banner small { display: block; font: 600 12px var(--font-d); color: var(--mut); margin-top: 2px; }
@keyframes bt-banner { from { transform: translate(-50%, -50%) scale(.7); opacity: 0; } 15%, 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(-50%, -60%) scale(1); opacity: 0; } }
.bt-sum { position: absolute; left: 10px; right: 10px; top: 50%; z-index: 24; transform: translateY(-50%); padding: 6px 12px; border-radius: 12px; font: 600 12px/1.35 var(--font-d); text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, rgba(40,38,52,.95), rgba(14,12,22,.95)); border: 1px solid color-mix(in srgb, var(--ac) 60%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 30px rgba(0,0,0,.6); animation: bt-up .3s cubic-bezier(.2,1,.4,1) both; }
.bt-sum b { display: inline-block; font: 900 14px var(--font-d); color: var(--ac); letter-spacing: .1em; white-space: nowrap; }
.bt-sum.out { animation: bt-fadeout .4s forwards; }
.bt-info { position: absolute; left: 50%; top: 46%; z-index: 24; transform: translate(-50%, -50%); width: 250px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(40,38,52,.96), rgba(14,12,22,.96)); border: 1px solid color-mix(in srgb, var(--ac) 60%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 30px rgba(0,0,0,.6); animation: fade .2s; }
.bt-info b { display: block; font: 900 16px var(--font-d); } .bt-info span { display: block; font: 700 12px var(--font-d); color: var(--ac); margin: 2px 0; } .bt-info em { display: block; font: 700 12px var(--font-n); font-style: normal; letter-spacing: .06em; color: #ffd27a; } .bt-info small { display: block; margin-top: 6px; color: var(--mut); font-size: 12px; line-height: 1.5; }

.bt.dim .bt-hud, .bt.dim .bt-hslot, .bt.dim .bt-row, .bt.dim .bt-mid, .bt.dim .bt-btns, .bt.dim .bt-lines { filter: brightness(.4) saturate(.6); transition: filter .4s; }
.bt-hud, .bt-hslot, .bt-row, .bt-mid, .bt-btns, .bt-lines { transition: filter .4s; }

.bt-ult { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; background: radial-gradient(80% 60% at 50% 50%, color-mix(in srgb, var(--ac) 28%, transparent), rgba(0,0,0,.55)); animation: fade .25s; }
.bt-ult.out { animation: bt-fadeout .3s forwards; }
.bt-ult-card { animation: bt-ultcard .9s cubic-bezier(.2,1.3,.4,1) both; filter: drop-shadow(0 0 30px var(--ac)); }
.bt-ult-card .card { --cw: 160px; }
@keyframes bt-ultcard { from { transform: scale(.3) rotate(-8deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.bt-ult-t { text-align: center; animation: bt-ulttext .6s .25s cubic-bezier(.2,1.2,.4,1) both; }
.bt-ult-t small { display: block; font: 700 12px var(--font-d); color: var(--mut); letter-spacing: .1em; }
.bt-ult-t b { display: block; font: 900 40px var(--font-d); letter-spacing: .14em; color: #fff; text-shadow: 0 0 24px var(--ac), 0 4px 0 rgba(0,0,0,.5); margin: 2px 0 4px; }
.bt-ult-t span { display: inline-block; padding: 4px 12px; border-radius: 999px; font: 700 12px var(--font-d); background: rgba(10,10,18,.7); border: 1px solid color-mix(in srgb, var(--ac) 60%, transparent); }
@keyframes bt-ulttext { from { transform: translateY(20px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bt-fadeout { to { opacity: 0; } }
.bt-ult.k-bz { background: radial-gradient(80% 60% at 50% 50%, rgba(255,92,92,.35), rgba(60,0,0,.7)); animation: fade .25s, bt-ragequake .08s .2s linear 8; }
.bt-ult.k-bz::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; animation: bt-crack .5s .15s ease-out both;
  background: linear-gradient(112deg, transparent 49.6%, #fff 49.8%, #fff 50.2%, transparent 50.4%), linear-gradient(28deg, transparent 49.7%, #ffd0d0 49.9%, #ffd0d0 50.1%, transparent 50.3%), linear-gradient(160deg, transparent 29.7%, #fff 29.9%, #fff 30.1%, transparent 30.3%), linear-gradient(75deg, transparent 69.7%, #ffb0b0 69.9%, #ffb0b0 70.1%, transparent 70.3%); }
@keyframes bt-crack { 0% { opacity: 0; transform: scale(1.1); } 20% { opacity: 1; transform: scale(1); } 100% { opacity: .5; } }
@keyframes bt-ragequake { 0% { transform: translate(3px, -2px); } 50% { transform: translate(-3px, 2px); } 100% { transform: translate(2px, 1px); } }
.bt-ult.k-bz .bt-ult-t b { animation: bt-shout .5s .25s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes bt-shout { from { transform: scale(2.4); opacity: 0; letter-spacing: .6em; } to { transform: scale(1); opacity: 1; } }
.bt-ult.k-gc { background: repeating-linear-gradient(0deg, rgba(0,174,236,.08) 0 3px, transparent 3px 7px), radial-gradient(80% 60% at 50% 50%, rgba(0,174,236,.3), rgba(0,10,30,.75)); }
.bt-ult.k-gc .bt-ult-card { animation: bt-ultcard .9s cubic-bezier(.2,1.3,.4,1) both, bt-glitch .18s .6s steps(2) 5; }
.bt-ult.k-gc { animation: fade .25s, bt-flicker .12s .3s steps(2) 10; }
.bt-ult.k-gc::after { content: '复读 复读 复读 复读 复读 复读 复读 复读'; position: absolute; left: -10%; right: -10%; top: 12%; font: 900 44px var(--font-d); color: rgba(0,174,236,.35); letter-spacing: .3em; white-space: nowrap; animation: bt-dupe .9s .5s linear infinite; pointer-events: none; }
.bt-ult.k-gc::before { content: '复读 复读 复读 复读 复读 复读 复读 复读'; position: absolute; left: -10%; right: -10%; bottom: 12%; font: 900 44px var(--font-d); color: rgba(0,174,236,.35); letter-spacing: .3em; white-space: nowrap; animation: bt-dupe .9s .5s linear infinite reverse; pointer-events: none; }
@keyframes bt-flicker { from { filter: brightness(1.6) hue-rotate(20deg); } to { filter: none; } }
@keyframes bt-dupe { from { transform: translateX(0); } to { transform: translateX(-120px); } }
@keyframes bt-glitch { from { transform: translate(-6px, 0) skewX(6deg); filter: hue-rotate(40deg) drop-shadow(0 0 30px var(--ac)); } to { transform: translate(6px, 0) skewX(-6deg); filter: hue-rotate(-40deg) drop-shadow(0 0 30px var(--ac)); } }
.bt-ult.k-cs { background: radial-gradient(80% 60% at 50% 50%, rgba(255,200,61,.3), rgba(40,30,0,.7)); animation: fade .25s, bt-dizzy 1.4s .3s ease-in-out infinite; }
.bt-ult.k-cs::before { content: '★ ✦ ★ ✦ ★'; position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font: 900 30px var(--font-d); color: #ffe27a; letter-spacing: .4em; text-shadow: 0 0 16px #ffc83d; animation: bt-stars 1.6s .3s linear infinite; pointer-events: none; }
@keyframes bt-dizzy { 0%, 100% { transform: rotate(-2.2deg) scale(1.02); } 50% { transform: rotate(2.2deg) scale(1.02); } }
@keyframes bt-stars { from { transform: translateX(-50%) rotate(0); } to { transform: translateX(-50%) rotate(360deg); } }
.bt-ult.k-cs .bt-ult-card { animation: bt-ultcard .9s cubic-bezier(.2,1.3,.4,1) both, bt-wobble 1.2s .4s ease-in-out infinite; }
@keyframes bt-wobble { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
.bt-ult.k-ka { background: radial-gradient(80% 60% at 50% 50%, rgba(255,138,216,.35), rgba(60,0,40,.7)); }
.bt-ult.k-ka .bt-ult-t b { color: #ffd3ef; }
.bt-ult.k-ka::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .9; animation: bt-bubbles 3.2s linear infinite;
  background: radial-gradient(circle at 50% 50%, transparent 0 15px, rgba(255,138,216,.75) 16px 17.5px, transparent 18.5px) 20px 0 / 150px 260px repeat, radial-gradient(circle at 36% 32%, rgba(255,255,255,.85) 0 3px, transparent 4.5px) 20px 0 / 150px 260px repeat, radial-gradient(circle at 50% 50%, transparent 0 7px, rgba(255,138,216,.7) 8px 9px, transparent 10px) 95px 120px / 190px 300px repeat, radial-gradient(circle at 38% 34%, rgba(255,255,255,.8) 0 1.6px, transparent 2.6px) 95px 120px / 190px 300px repeat, radial-gradient(circle at 50% 50%, transparent 0 11px, rgba(255,170,228,.6) 12px 13px, transparent 14px) 60px 200px / 230px 340px repeat; }
@keyframes bt-bubbles { to { background-position: 20px -260px, 20px -260px, 95px -180px, 95px -180px, 60px -140px; } }
.bt-ult.k-db { background: radial-gradient(40% 30% at 50% 45%, rgba(61,220,132,.4), rgba(0,0,0,.85) 70%); }
.bt-ult.k-db::before { content: ''; position: absolute; inset: 14px; border: 6px solid #3ddc84; border-radius: 6px; box-shadow: 0 0 0 4px #0b2a18, 0 0 30px rgba(61,220,132,.6), inset 0 0 0 2px rgba(255,255,255,.4); pointer-events: none; animation: bt-panel .35s .1s cubic-bezier(.2,1.4,.4,1) both;
  background: radial-gradient(circle, rgba(61,220,132,.22) 0 1.5px, transparent 2px) 0 0 / 9px 9px; }
.bt-ult.k-db::after { content: '哈哈哈哈哈'; position: absolute; right: 8%; top: 14%; font: 900 36px var(--font-d); color: #b9ffd6; -webkit-text-stroke: 2px #0b2a18; letter-spacing: .1em; transform: rotate(-12deg); animation: bt-haha .5s .4s cubic-bezier(.2,1.5,.4,1) both; pointer-events: none; }
@keyframes bt-panel { from { transform: scale(1.15); opacity: 0; } }
@keyframes bt-haha { from { transform: rotate(-12deg) scale(0); } }
.bt-ult.k-db .bt-ult-card { animation: bt-ultcard .9s cubic-bezier(.2,1.3,.4,1) both, bt-bounce .5s .9s ease-out 2; }
@keyframes bt-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

.bt-quiz { position: absolute; left: 10px; right: 10px; bottom: calc(14px + var(--sab)); z-index: 31; display: flex; gap: 12px; padding: 12px; border-radius: 18px; background: linear-gradient(180deg, #22202e, #0e0c16); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 20px 50px rgba(0,0,0,.7); animation: bt-up .35s cubic-bezier(.2,1,.4,1) both; }
.bt-quiz.out { animation: bt-fadeout .25s forwards; }
@keyframes bt-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.bt-qcard { flex: none; align-self: flex-start; } .bt-qcard .card { --cw: 96px; }
.bt-qbox { flex: 1; min-width: 0; }
.bt-qbox small { display: block; font: 700 11px var(--font-d); color: #ffd27a; letter-spacing: .08em; }
.bt-qbox p { margin: 4px 0 8px; font: 700 14px/1.4 var(--font-d); }
.bt-qopts { display: flex; flex-direction: column; gap: 6px; }
.bt-qopts button { text-align: left; padding: 8px 12px; border-radius: 10px; font: 600 13px var(--font-d); color: #f4f2fa; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.bt-qopts button:active { background: rgba(255,255,255,.18); }
.bt-qopts button.ok { background: rgba(34,194,122,.3); border-color: #22c27a; } .bt-qopts button.bad { background: rgba(255,92,92,.3); border-color: #ff5c5c; }
.bt-qtime { height: 4px; margin-top: 8px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; } .bt-qtime i { display: block; height: 100%; background: linear-gradient(90deg, #ffd27a, #fb7299); }
.bt-qwhy { margin: 6px 0 0 !important; font: 500 12px/1.45 var(--font-d) !important; color: var(--mut); }
.bt-qwhy:empty { display: none; }

.bt-over { position: absolute; inset: 0; z-index: 35; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; background: rgba(6,6,12,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fade .35s; }
.bt-over-card { margin-bottom: 6px; animation: bt-ultcard .8s cubic-bezier(.2,1.3,.4,1) both; perspective: 800px; }
.bt-over-card > .card { animation: bt-spin 1.1s cubic-bezier(.3,.8,.3,1) .5s both; }
@keyframes bt-spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }

.bt.intro .bt-hslot:not(.e) .bt-u { animation: bt-inL .7s cubic-bezier(.2,.9,.3,1.2) both; } .bt.intro .bt-hslot.e .bt-u { animation: bt-inR .7s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes bt-inL { from { transform: translateX(-120vw); } } @keyframes bt-inR { from { transform: translateX(120vw); } }

.bt-shout { position: absolute; left: 50%; z-index: 22; transform: translateX(-50%); max-width: 92%; padding: 8px 16px; border-radius: 14px; font: 900 20px/1.3 var(--font-d) !important; color: #fff; text-align: center; background: rgba(10,8,16,.82); border: 2px solid var(--ac); box-shadow: 0 0 20px color-mix(in srgb, var(--ac) 60%, transparent), 0 8px 24px rgba(0,0,0,.6); -webkit-text-stroke: .3px rgba(0,0,0,.4); animation: bt-shout .35s cubic-bezier(.2,1.4,.4,1) both; pointer-events: none; }
.bt-shout.out { animation: bt-fadeout .3s forwards; }
.bt-shout small { display: block; font: 700 11px var(--font-d); color: var(--ac); letter-spacing: .1em; margin-bottom: 2px; }

.bt-en.crack { animation: bt-encrack .5s cubic-bezier(.2,.8,.3,1) both; box-shadow: inset 0 2px 4px rgba(0,0,0,.8), 0 0 18px #ff3d5a, 0 0 0 2px #ff3d5a; }
.bt-en.crack i { transition: background .35s .1s, box-shadow .35s .1s; }
@keyframes bt-encrack { 0% { transform: translateX(0); filter: brightness(2.5); } 20% { transform: translateX(-5px) rotate(-1deg); } 40% { transform: translateX(5px) rotate(1deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } 100% { transform: none; filter: none; } }

.bt-stamp { position: absolute; z-index: 26; transform: translate(-50%, -50%) rotate(-14deg) scale(2.4); pointer-events: none; padding: 2px 10px; border: 4px solid #ff3d5a; border-radius: 10px; font: 900 calc(var(--hw) * 0.34) var(--font-n); color: #ff3d5a; -webkit-text-stroke: 1.5px #fff; paint-order: stroke fill; letter-spacing: .08em; background: rgba(20,6,10,.55); box-shadow: 0 0 24px rgba(255,61,90,.7), inset 0 0 12px rgba(255,61,90,.4); opacity: 0; animation: bt-stamp .9s cubic-bezier(.2,.9,.3,1) both; }
@keyframes bt-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(2.4); } 18% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(.96); } 30% { transform: translate(-50%, -50%) rotate(-14deg) scale(1.04); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }
.bt-vs { position: absolute; inset: 0; z-index: 21; display: grid; place-items: center; pointer-events: none; }
.bt-vs b { font: 900 min(34vw, 150px) var(--font-n); letter-spacing: .06em; color: #fff; -webkit-text-stroke: 2px #fb7299; text-shadow: 0 0 30px #fb7299, 0 0 60px #00aeec, 0 6px 0 #1b1926; transform: scale(3); opacity: 0; transition: transform .25s cubic-bezier(.2,.9,.3,1.4), opacity .2s; }
.bt-vs.hit b { transform: scale(1); opacity: 1; }
.bt-over.win .bt-over-card { filter: drop-shadow(0 0 30px #ffd27a); } .bt-over.lose .bt-over-card { filter: grayscale(.6) drop-shadow(0 0 20px rgba(0,0,0,.8)); }
.bt-over > b { font: 900 34px var(--font-d); letter-spacing: .16em; }
.bt-over.win > b { background: linear-gradient(180deg, #fff, #ffd27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bt-over > p { margin: 0; font: 600 14px var(--font-d); } .bt-over > p strong { color: #ffd27a; font-size: 18px; }
.bt-over > small { color: var(--mut); font-size: 12px; }
.bt-over-btns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.bt-over .bt-btn { height: 42px; padding: 0 18px; }

.bt-deck { margin: 0 16px 12px; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.bt-deck-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .bt-deck-h b { font: 800 15px var(--font-d); } .bt-deck-h small { color: var(--mut); font-size: 11px; }
.bt-slots { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 6px; align-items: end; }
.bt-slot { text-align: center; }
.bt-slot > span { display: block; margin-top: 4px; font: 700 10px var(--font-n); color: var(--mut); letter-spacing: .1em; }
.bt-slot-in { position: relative; aspect-ratio: 5 / 7; border-radius: 8px; border: 1px dashed rgba(255,255,255,.22); background: rgba(255,255,255,.03); display: grid; place-items: center; }
.bt-slot-in:empty::after { content: '+'; font: 300 28px var(--font-n); color: var(--mut); }
.bt-slot-in .card { --cw: 100% !important; width: 100%; } .bt-slot-in .card .face { box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.bt-slot .bt-at, .bt-slot .bt-taunt { width: 18px; height: 18px; border-radius: 5px; } .bt-slot .bt-at svg { width: 12px; height: 12px; } .bt-slot .bt-taunt { font-size: 9px; }
.bt-slot-st { position: absolute; left: 3px; right: 3px; bottom: 3px; z-index: 3; font: 700 9px var(--font-n); font-style: normal; letter-spacing: .04em; padding: 2px 0; border-radius: 4px; background: rgba(10,10,18,.78); color: #ffd27a; }
.bt-hint { margin: 8px 2px 0; font-size: 12px; line-height: 1.5; color: var(--mut); }
.bt-acts { margin: 0 16px 14px; }
.bt-go { width: 100%; height: 56px; flex-direction: row; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: .08em; background: linear-gradient(135deg, #fb7299, #ff9ab5); border: 0; box-shadow: 0 8px 22px rgba(251,114,153,.4); color: #fff; }
.bt-go:disabled { opacity: .45; } .bt-go small { font: 600 11px var(--font-d); opacity: .85; letter-spacing: .02em; } .bt-go .bt-ico { font-style: normal; font-size: 20px; }
.bt-acts2 { display: flex; gap: 8px; margin-top: 8px; } .bt-acts2 .ghost-btn { flex: 1; text-align: center; font-size: 12px; padding: 9px 6px; }
.bt-sec { margin: 0 16px 14px; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.bt-sec > b { display: block; font: 800 14px var(--font-d); } .bt-sec > small { display: block; color: var(--mut); font-size: 11px; margin: 2px 0 8px; }
.bt-rank div, .bt-hist div { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-top: 1px solid var(--line); font-size: 13px; }
.bt-rank div:first-child, .bt-hist div:first-child { border-top: 0; }
.bt-rank i { width: 22px; font: 800 13px var(--font-n); font-style: normal; color: var(--mut); text-align: center; } .bt-rank div:nth-child(1) i { color: #ffd27a; } .bt-rank div:nth-child(2) i { color: #dcd8ea; } .bt-rank div:nth-child(3) i { color: #d9a066; }
.bt-rank span, .bt-hist span { flex: 1; } .bt-rank em, .bt-hist em { font: 800 13px var(--font-n); font-style: normal; letter-spacing: .04em; }
.bt-rank .me { background: rgba(0,174,236,.12); border-radius: 8px; margin: 0 -4px; padding: 7px 8px; } .bt-rank .gap { justify-content: center; color: var(--mut); }
.bt-hist i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 800 11px var(--font-d); font-style: normal; } .bt-hist .w i { background: rgba(34,194,122,.25); color: #8ef0b7; } .bt-hist .l i { background: rgba(255,92,92,.2); color: #ff8a9a; }
.bt-hist .w em { color: #8ef0b7; } .bt-hist .l em { color: #ff8a9a; }
.bt-rules p { margin: 0 0 8px; font-size: 12px; line-height: 1.6; color: #c9c4dd; } .bt-rules p b { color: #fff; }
.bt-pick { position: absolute; inset: 0; z-index: 46; display: flex; flex-direction: column; background: rgba(6,6,12,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s; }
.bt-pick.on { opacity: 1; }
.bt-pick-h { position: relative; padding: calc(18px + var(--sat)) 16px 10px; } .bt-pick-h b { display: block; font: 800 17px var(--font-d); } .bt-pick-h small { color: var(--mut); font-size: 12px; } .bt-pick-h .close-x { position: absolute; right: 12px; top: calc(14px + var(--sat)); }
.bt-pick-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 12px calc(20px + var(--sab)); align-content: start; }
.bt-pc { position: relative; } .bt-pc-in { position: relative; } .bt-pc .card { --cw: 100% !important; width: 100%; }
.bt-pc > span { display: block; margin-top: 3px; text-align: center; font: 700 10px var(--font-n); color: var(--mut); letter-spacing: .04em; }
.bt-pc.on .bt-pc-in { box-shadow: 0 0 0 2px #00aeec, 0 0 14px #00aeec; border-radius: 6px; }
.bt-pc .bt-at, .bt-pc .bt-taunt { width: 18px; height: 18px; border-radius: 5px; } .bt-pc .bt-at svg { width: 12px; height: 12px; } .bt-pc .bt-taunt { font-size: 9px; }

.mg-list.snap { scroll-snap-type: y mandatory; }
.mg-list.snap .mg-cell { scroll-snap-align: center; }
.mg-list .mg-end { scroll-snap-align: end; }
.mg-cell.wait .mg-card { opacity: 0; }
.mg-cell .mg-card { transition: filter .5s, opacity .3s; }
.mg-list.snap .mg-cell:not(.cur) .mg-card { opacity: .55; filter: brightness(.7); }
.mg-shock { position: absolute; left: 50%; top: calc(var(--mw) * .7); width: var(--mw); height: calc(var(--mw) * 1.4); transform: translate(-50%, -50%); border-radius: 14px; border: 3px solid var(--rc, #ffe2a0); box-shadow: 0 0 24px var(--rc, #ffe2a0); pointer-events: none; animation: mgShock .6s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes mgShock { from { opacity: .9; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.35); border-width: 1px; } }

.mg-cell { perspective: 900px; }
.mg-card > .card { transform-style: preserve-3d; transition: transform .18s linear; }
.mg-cell.cur .mg-card > .card { transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); }
.mg-cell.cur .mg-card > .card .c-shine { opacity: .32; }
.mg-cell.cur .mg-card > .card .c-glare { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .mg-cell.cur .mg-card > .card { transform: none; } }
#s-mega .hint:empty { opacity: 0; }

.qz .qz-x { position: absolute; top: calc(10px + var(--sat)); right: 12px; z-index: 5; }
.qz-val .qz-bt { margin-top: 2px; font-size: 11px; color: #f2d48a; letter-spacing: .04em; }
.detail .qz-buff { margin: 6px 0 0; font-size: 12px; color: #f2d48a; text-align: center; letter-spacing: .04em; }

.bt-f { font-size: 30px; -webkit-text-stroke: 2px rgba(0,0,0,.75); paint-order: stroke fill; animation-duration: .9s; }
.bt-f.beat { font-size: 36px; } .bt-f.crit { font-size: 42px; } .bt-f.kof { font-size: 40px; }
.bt-f small { font-size: 12px; -webkit-text-stroke: 0; }
.bt-f.heal { font-size: 24px; } .bt-f.miss { font-size: 18px; }
.bt-f.pop { animation: bt-fpop .35s cubic-bezier(.2,1.4,.4,1), bt-float .9s cubic-bezier(.2,.8,.3,1) .35s both; }
@keyframes bt-fpop { 0% { transform: translate(-50%, -60%) scale(1); } 40% { transform: translate(-50%, -60%) scale(1.5); } 100% { transform: translate(-50%, -60%) scale(1.05); } }

.bt-u { --st: 22px; } .bt-u.hero { --st: 24px; }
.bt-st { gap: 3px; padding: 0 3px; }
.bt-atk, .bt-hpn { flex: none; min-width: calc(var(--mw) * .27); height: 17px; padding: 0 4px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; font: 900 14px/1 var(--font-n); color: #fff; letter-spacing: .01em; text-shadow: 0 1px 0 rgba(0,0,0,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 3px rgba(0,0,0,.7); }
.bt-atk { background: linear-gradient(180deg, #ff5c6c, #c8122b); }
.bt-atk::before { width: 9px; height: 9px; }
.bt-hpn { background: linear-gradient(180deg, #2fd889, #138a4f); text-align: center; }
.bt-hp.low ~ .bt-hpn { background: linear-gradient(180deg, #ff5c6c, #a1001c); }
.bt-u.hero .bt-atk, .bt-u.hero .bt-hpn { font-size: 15px; height: 19px; min-width: calc(var(--hw) * .27); }
.bt-hp { height: 5px; }
.bt-hpn.pop { animation: bt-hpnpop .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes bt-hpnpop { 0% { transform: scale(1); } 35% { transform: scale(1.8); } 100% { transform: scale(1); } }

.bt-u.hit .bt-pic::after { animation-duration: .05s; }
.bt-imp { position: absolute; z-index: 11; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0 18%, color-mix(in srgb, var(--ac) 80%, #fff) 30%, color-mix(in srgb, var(--ac) 50%, transparent) 55%, transparent 72%); mix-blend-mode: screen; animation: bt-imp .25s ease-out both; }
@keyframes bt-imp { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }

.bt-orb { width: calc(var(--mw) * .4); height: calc(var(--mw) * .4); }
.bt-orb::after { content: ''; position: absolute; inset: 15% -70% 15% 15%; border-radius: 50%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ac) 55%, transparent) 45%, transparent); filter: blur(4px); z-index: -1; }

.bt-u .bt-pic { transition: transform .45s cubic-bezier(.4,0,.6,1), opacity .45s; }
.bt-u.ko .bt-pic { transform: scale(.72) translateY(16%); opacity: .5; }
.bt-u.ko .bt-ko { font-size: 30px; }

.bt-dm { inset: 0; opacity: .7; }
.bt-shout.side { left: auto; transform: translateY(-50%); font-size: 16px !important; line-height: 1.3; padding: 7px 10px; max-width: 46%; text-align: left; }
.bt-shout.side small { font-size: 10px; }

.bt .bt-tags span em { display: none; } .bt .bt-tags span:not(:has(svg)) em { display: inline; font-style: normal; } .bt .bt-tags span u { text-decoration: none; font-size: 11px; }
.bt .bt-tags span { padding: 2px 5px 2px 4px; }

.bt-vig { background: radial-gradient(ellipse 58% 52% at 50% 50%, transparent 0, rgba(0,0,0,.12) 45%, rgba(0,0,0,.62) 75%, rgba(0,0,0,.92) 100%); }
.bt-u::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.6), 0 14px 10px -8px rgba(0,0,0,.9); }

.bt-stamp { font-size: max(48px, calc(var(--hw) * .45)); }

.bt-stamp.fin { font-size: max(64px, calc(var(--hw) * .6)); border-color: #fff; color: #fff; text-shadow: 0 0 30px #ff3d5a, 0 4px 0 #7a1030; animation-duration: 1.7s; z-index: 30; }
.bt.finale .bt-bg { filter: brightness(.55); transition: filter .3s; }
.bt-win { position: absolute; left: 50%; top: 50%; z-index: 31; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; pointer-events: none; animation: bt-winin .8s cubic-bezier(.2,1.2,.3,1) both; }
.bt-win b { display: block; font: 900 min(26vw, 110px)/1 var(--font-n); letter-spacing: .12em; color: #fff; -webkit-text-stroke: 3px #1b1926; paint-order: stroke fill; text-shadow: 0 0 40px #ffd27a, 0 8px 0 #1b1926; }
.bt-win.lose b { text-shadow: 0 0 30px #00aeec, 0 8px 0 #1b1926; }
.bt-win small { display: block; margin-top: 6px; font: 800 18px var(--font-d); letter-spacing: .4em; color: #ffd27a; text-shadow: 0 2px 0 #000; }
.bt-win.lose small { color: #9b97ad; }
@keyframes bt-winin { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } 55% { opacity: 1; transform: translate(-50%, -50%) scale(.95); } 70% { transform: translate(-50%, -50%) scale(1.03); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.bt-over > b { font-size: 44px; }
.bt-over-card > .card { animation: none; }
.bt-over-card .ov-flip { position: relative; transform-style: preserve-3d; animation: bt-spin 1.1s cubic-bezier(.3,.8,.3,1) .5s both; }
.bt-over-card .ov-flip > .card { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bt-over-card .ov-flip > .ov-back { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }

.bt.intro .bt-row.e .bt-u { animation: bt-inDown .5s cubic-bezier(.2,.9,.3,1.2) calc(.15s + var(--i, 0) * 70ms) both; }
.bt.intro .bt-row.m .bt-u { animation: bt-inUp .5s cubic-bezier(.2,.9,.3,1.2) calc(.15s + (var(--i, 0) - 4) * 70ms) both; }
@keyframes bt-inDown { from { transform: translateY(-60px) scale(.8); opacity: 0; } } @keyframes bt-inUp { from { transform: translateY(60px) scale(.8); opacity: 0; } }

.bt-hslot.e { margin-top: 26px; } .bt-hslot.m { margin-bottom: 26px; }
.bt-dm .dm-b { font-size: 15px !important; line-height: 20px; }

.bt-ult.bt-ultbg { z-index: 2; }
.bt-ult.nobg { background: none !important; }
.bt-ult.nobg::before, .bt-ult.nobg::after { display: none; }
.bt.dim .bt-hslot, .bt.dim .bt-row { filter: none; }
.bt.dim .bt-bg { filter: brightness(.45); transition: filter .3s; }

.bt-u.ko .bt-pic { transform: none; opacity: 1; }
.bt-u { transition: filter .3s, transform .45s cubic-bezier(.4,0,.6,1), opacity .45s; }
.bt-u.ko { transform: scale(.6) translateY(22%); opacity: .45; }
.bt-hslot.m .bt-u.ko { transform: scale(.6) translateY(-22%); }

@keyframes bt-inDown { from { transform: translateY(-36px) scale(.8); opacity: 0; } } @keyframes bt-inUp { from { transform: translateY(36px) scale(.8); opacity: 0; } }

.bt-u .bt-cd { --ac: #ffd58a; }

.bt-stage { background-color: rgba(255,255,255,.035); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 36px), repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 20px), linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.7), 0 14px 30px rgba(0,0,0,.45); }
.bt-stage.t { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 36px), repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 20px), linear-gradient(180deg, rgba(251,114,153,.16), rgba(255,255,255,.02)); }
.bt-stage.b { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 36px), repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 20px), linear-gradient(0deg, rgba(0,174,236,.16), rgba(255,255,255,.02)); }

.bt-win::before { content: ''; position: absolute; left: -60vw; right: -60vw; top: 50%; height: 118px; transform: translateY(-50%) rotate(-3deg); z-index: -1; background: linear-gradient(90deg, transparent, rgba(255,210,122,.32) 25%, rgba(255,210,122,.55) 50%, rgba(255,210,122,.32) 75%, transparent); box-shadow: 0 0 40px rgba(255,210,122,.35); }
.bt-win.lose::before { background: linear-gradient(90deg, transparent, rgba(0,174,236,.25) 25%, rgba(0,174,236,.45) 50%, rgba(0,174,236,.25) 75%, transparent); box-shadow: 0 0 40px rgba(0,174,236,.3); }

.bt-u.ko .bt-ko { animation: bt-kofade .4s ease 1.3s both; }
@keyframes bt-kofade { to { opacity: 0; } }

.bt-hudrow, .bt-hslot, .bt-row { --theme: var(--m); }
.bt-hudrow.e, .bt-hslot.e, .bt-row.e { --theme: var(--e); }

.bt-hudrow, .bt-hslot { --chrome: linear-gradient(180deg, color-mix(in srgb, var(--theme) 30%, #fff) 0%, color-mix(in srgb, var(--theme) 80%, #fff) 22%, var(--theme) 46%, color-mix(in srgb, var(--theme) 55%, #000) 50%, var(--theme) 70%, color-mix(in srgb, var(--theme) 60%, #fff) 100%); }

.bt-bg { background:
  radial-gradient(70% 20% at 50% 31%, rgba(251,114,153,.20), transparent 70%),
  radial-gradient(70% 20% at 50% 69%, rgba(0,174,236,.20), transparent 70%),
  radial-gradient(60% 28% at 50% 50%, rgba(255,255,255,.07), transparent 70%),
  radial-gradient(110% 60% at 50% 50%, #17161f, #050507 72%); }
.bt-bg::before { opacity: 1; mix-blend-mode: normal; background:
  radial-gradient(circle, rgba(255,255,255,.75) 0 .8px, transparent 1.3px) 13px 17px / 83px 71px,
  radial-gradient(circle, rgba(255,255,255,.45) 0 .7px, transparent 1.2px) 41px 5px / 127px 109px,
  radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.6px) 70px 90px / 211px 173px; }
.bt-bg::after { display: none; content: none; background: none; }
.bt-lines { opacity: 0; } .bt-lines.show { opacity: 1; }

.bt-hslot { isolation: isolate; }
.bt-hslot::before { display: none; }
.bt-hslot::after { content: ''; position: absolute; z-index: -1; left: calc(50% - var(--hw) * .5 - 14px); right: calc(50% - var(--hw) * .5 - 14px); bottom: -5px; height: 12px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0, rgba(255,255,255,.12) 1px, #2a2a33 2px, #121217 45%, #050506 50%, #0b0b0f 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.8), 0 14px 26px 6px color-mix(in srgb, var(--theme) 26%, transparent); }
.bt-hslot.e { margin-top: 30px; } .bt-hslot.m { margin-bottom: 30px; }

.bt > .bt-hudrow { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; }
.bt.dim .bt-hudrow, .bt.guide .bt-hudrow { filter: brightness(.4) saturate(.6); }
.bt-hudrow { transition: filter .4s; }
.bt-hud { flex: 1 1 auto; min-width: 0; grid-template-columns: 44px 1fr; column-gap: 10px; row-gap: 5px; padding: 6px 14px 7px 6px; border-radius: 999px;
  background: var(--streak), var(--lacq); border: 1px solid rgba(255,255,255,.13); box-shadow: var(--rim), 0 10px 22px rgba(0,0,0,.5); backdrop-filter: none; -webkit-backdrop-filter: none; }
.bt-ava { width: 44px; height: 44px;
  background: radial-gradient(circle at 34% 28%, #fff 0, color-mix(in srgb, var(--ac) 45%, #fff) 16%, var(--ac) 46%, color-mix(in srgb, var(--ac) 50%, #000) 88%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), inset 0 -5px 9px rgba(0,0,0,.35), 0 0 12px color-mix(in srgb, var(--ac) 45%, transparent), 0 0 0 3px #08080b, 0 0 0 4px rgba(255,255,255,.2); }
.bt-ava svg { width: 22px; height: 22px; }
.bt-np { gap: 8px; }
.bt-np b { font-size: 15px; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.bt-np small { font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.45); }
.bt-np .bt-hpv { margin-left: auto; flex: none; font: 800 17px/18px var(--font-n); letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0,0,0,.6); }

.bt-hhp { height: 10px; border-radius: 5px; overflow: hidden; background: #030304; box-shadow: inset 0 1px 3px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.14); }
.bt-hhp::after { display: none; }
.bt-hhp s { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: rgba(255,255,255,.75); transition: width .3s ease .4s; }
.bt-hhp i { position: relative; border-radius: 5px; background: var(--chrome); box-shadow: 0 0 10px color-mix(in srgb, var(--theme) 70%, transparent); }
.bt-hud.e .bt-hhp i { background: var(--chrome); box-shadow: 0 0 10px color-mix(in srgb, var(--theme) 70%, transparent); }
.bt-hhp i::after { top: 1px; height: 3px; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); }
.bt-hhp b { display: none; }

.bt .bt-tags { position: absolute; top: 0; display: flex; flex-wrap: wrap; gap: 0; max-width: calc(50% - var(--hw) / 2 - 10px); padding: 3px 4px; border-radius: 14px; background: var(--streak), var(--lacq); border: 1px solid rgba(255,255,255,.13); box-shadow: var(--rim), 0 8px 18px rgba(0,0,0,.5); overflow: hidden; }
.bt .bt-tags:empty { display: none; }
.bt-tags.e { left: 0; } .bt-tags.m { right: 0; }
.bt-np b { flex: 1 1 auto; min-width: 2.5em; } .bt-np small { flex: none; }
.bt .bt-tags span { background: none; border: 0; box-shadow: none; padding: 3px 6px; border-radius: 0; gap: 3px; }
.bt .bt-tags span + span { box-shadow: inset 1px 0 0 rgba(255,255,255,.1); }
.bt .bt-tags span u { font: 800 13px var(--font-n); color: #fff; }
.bt .bt-tags span em { font: 700 11px var(--font-d); color: rgba(255,255,255,.8); }
.bt .bt-tags span svg { width: 14px; height: 14px; }

.bt-btn.bt-fast { flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%; font: 900 17px var(--font-n); letter-spacing: .02em; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.6);
  background: var(--streak), var(--lacq); border: 1px solid rgba(255,255,255,.13); box-shadow: var(--rim), 0 10px 22px rgba(0,0,0,.5); }
.bt-btn.bt-fast.on { background: var(--streak), var(--chrome); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.bt-btn.bt-skip { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 6; height: 34px; padding: 0 14px; border-radius: 17px; font-size: 12px;
  background: var(--streak), var(--lacq); border: 1px solid rgba(255,255,255,.13); box-shadow: var(--rim), 0 8px 18px rgba(0,0,0,.5); }

.bt-clock { background: var(--streak), var(--lacq); border: 1px solid rgba(255,255,255,.13); box-shadow: var(--rim), 0 8px 18px rgba(0,0,0,.5); }

.bt-row { gap: 12px; }

.bt-u::before { content: ''; position: absolute; z-index: 3; pointer-events: none; inset: -4px -4px auto; height: calc(var(--mw) * 1.4 + 8px); border-radius: 8px; padding: 4px;
  -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, linear-gradient(#000 0 0); mask-composite: exclude;
  --f0: #c9c9d3; --f1: #6a6a75; --f2: #2b2b33; --f3: #101014;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7) 0 1px, transparent 1px calc(100% - 1px), rgba(0,0,0,.8) calc(100% - 1px)),
    linear-gradient(135deg, var(--f1) 0%, var(--f0) 9%, var(--f2) 22%, var(--f1) 36%, var(--f0) 44%, var(--f3) 56%, var(--f2) 70%, var(--f0) 82%, var(--f1) 92%, var(--f3) 100%); }
.bt-u.hero::before { height: calc(var(--hw) * 1.4 + 10px); inset: -5px -5px auto; padding: 5px; border-radius: 9px; }
.bt-u.r-pixel::before { --f0: #f1eaff; --f1: #9a7cff; --f2: #4a2fb0; --f3: #170c3c; }
.bt-u.r-gold::before { --f0: #fff6cf; --f1: #e6ac2c; --f2: #8a5a00; --f3: #3d2600; filter: drop-shadow(0 0 5px rgba(255,190,60,.5)); }
.bt-u.r-rainbow::before { filter: drop-shadow(0 0 6px rgba(255,120,220,.5)); background: linear-gradient(180deg, rgba(255,255,255,.8) 0 1px, transparent 1px), linear-gradient(135deg, transparent 0 30%, rgba(255,255,255,.7) 40%, transparent 50%), conic-gradient(from 200deg, #ffe7a0, #ff5ec4, #ffd23f, #4dffb8, #4dc3ff, #b06bff, #ffe7a0); }

.bt-u.r-gold2::before { padding: 1px; inset: -1px -1px auto; height: calc(var(--mw) * 1.4 + 2px); border-radius: 7px; background: rgba(0,0,0,.85); filter: none; }
.bt-u.hero.r-gold2::before { inset: -1px -1px auto; height: calc(var(--hw) * 1.4 + 2px); padding: 1px; }
.bt-u::after, .bt-u.hero::after { box-shadow: inset 0 0 0 1px rgba(0,0,0,.75), 0 12px 24px rgba(0,0,0,.65); }
.bt-u.r-gold2::after { box-shadow: 0 0 10px rgba(255,190,60,.45), 0 12px 24px rgba(0,0,0,.65); }

.bt-btn.bt-skip { position: static; flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%; display: grid; place-items: center; align-content: center; row-gap: 1px; font: 800 10px/1.1 var(--font-d); letter-spacing: .04em; }
.bt-btn.bt-skip i { display: block; font-style: normal; }
.bt-btn.bt-skip[hidden] { display: none; }

.bt .bt-tags { display: grid; grid-template-columns: repeat(2, auto); width: max-content; }
.bt .bt-tags span { justify-content: center; }
.bt .bt-tags span + span { box-shadow: none; }
.bt .bt-tags span:nth-child(even) { box-shadow: inset 1px 0 0 rgba(255,255,255,.1); }
.bt .bt-tags span:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
.bt .bt-tags span:last-child:nth-child(odd) { grid-column: 1 / -1; box-shadow: none; }

.bt-hslot { padding: 4px 0 20px; }
.bt-hslot::after { left: calc(50% - var(--hw) * .5 - 24px); right: calc(50% - var(--hw) * .5 - 24px); bottom: 2px;
  box-shadow: 0 1px 0 rgba(0,0,0,.8), 0 16px 36px 12px color-mix(in srgb, var(--theme) 40%, transparent); }
.bt-bg { background:
  radial-gradient(70% 20% at 50% 31%, rgba(251,114,153,.30), transparent 70%),
  radial-gradient(70% 20% at 50% 69%, rgba(0,174,236,.30), transparent 70%),
  radial-gradient(60% 28% at 50% 50%, rgba(255,255,255,.07), transparent 70%),
  radial-gradient(110% 60% at 50% 50%, #17161f, #050507 72%); }

.bt-cd i::before { height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--ac) 55%, #fff), color-mix(in srgb, var(--ac) 35%, #fff), color-mix(in srgb, var(--ac) 55%, #fff)); opacity: .85;
  box-shadow: 0 0 4px color-mix(in srgb, var(--ac) 60%, transparent), 0 0 10px color-mix(in srgb, var(--ac) 35%, transparent); }
.bt-cd i::after { opacity: .4; }

.bt-hud { grid-template-columns: 44px 1fr auto; }
.bt-np { grid-column: 2 / 4; }
.bt-hhp { grid-column: 2; }
.bt-rk { grid-column: 3; align-self: center; font: 700 10px/1 var(--font-n); letter-spacing: .12em; color: rgba(255,255,255,.45); white-space: nowrap; }

.bt-hslot.g2::after { bottom: 6px; }

.ti-deck { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7a2 2 0 012-2h7a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3Cpath d='M15.5 4.2l4.6 1.2a2 2 0 011.4 2.5l-2.9 10.8-1.6-.4V7a3 3 0 00-1.5-2.8z' opacity='.75'/%3E%3C/svg%3E"); }
.tabbar button { padding: 0 2px; letter-spacing: 0; }
#s-deck { --theme: #00aeec; background: radial-gradient(120% 50% at 50% 0%, rgba(0,174,236,.14), transparent 60%), linear-gradient(180deg, #11131a, #07070a 45%); padding-bottom: 24px; }
#s-arena { --theme: #fb7299; background: radial-gradient(120% 50% at 50% 0%, rgba(251,114,153,.16), transparent 60%), linear-gradient(180deg, #16111a, #07070a 45%); }
#s-deck .page-h span { font: 700 13px var(--font-n); color: var(--mut); letter-spacing: .06em; }

.dk-panel { margin: 0 16px 12px; padding: 14px; border-radius: 18px; background: var(--streak), var(--lacq); border: 1px solid rgba(255,255,255,.13); box-shadow: var(--rim), 0 10px 22px rgba(0,0,0,.5); }
.dk-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.dk-h b { font: 800 16px var(--font-d); color: #fff; } .dk-h small { font-size: 11px; color: var(--mut); text-align: right; line-height: 1.3; }

.dk-slots { display: grid; grid-template-columns: 168px 1fr; gap: 10px; align-items: start; }
.dk-slot { text-align: center; } .dk-slot > span { display: block; margin-top: 4px; font: 700 10px var(--font-n); color: var(--mut); letter-spacing: .1em; }
.dk-slot-in { position: relative; aspect-ratio: 5 / 7; border-radius: 9px; border: 1px dashed rgba(255,255,255,.26); background: rgba(255,255,255,.04); box-shadow: inset 0 2px 6px rgba(0,0,0,.5); display: grid; place-items: center; overflow: hidden; }
.dk-slot-in:empty::after { content: '+'; font: 300 30px var(--font-n); color: var(--mut); }
.dk-slot-in:not(:empty) { border-style: solid; border-color: rgba(255,255,255,.18); box-shadow: 0 6px 14px rgba(0,0,0,.55); }
.dk-slot-in .card { --cw: 100% !important; width: 100%; } .dk-slot-in .card .face { box-shadow: none; }
.dk-slot.hero .dk-slot-in { border-color: color-mix(in srgb, #ffd27a 60%, transparent); }
.dk-slot.hero .dk-slot-in:not(:empty) { box-shadow: 0 0 0 1px rgba(255,210,122,.5), 0 8px 18px rgba(0,0,0,.6); }
.dk-slot.hero > span { color: #ffd27a; }
.dk-mins { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.dk-mins .dk-slot > span { margin-top: 2px; font-size: 9px; }
.dk-slot .bt-at, .dk-slot .bt-taunt { width: 18px; height: 18px; border-radius: 5px; } .dk-slot .bt-at svg { width: 12px; height: 12px; } .dk-slot .bt-taunt { font-size: 9px; }
.dk-slot .bt-slot-st { position: absolute; left: 3px; right: 3px; bottom: 3px; z-index: 3; font: 700 9px var(--font-n); font-style: normal; letter-spacing: .04em; padding: 2px 0; border-radius: 4px; background: rgba(6,6,12,.78); color: #fff; }
.dk-slot.hero .bt-slot-st { font-size: 11px; padding: 3px 0; }
.dk-panel .bt-tags { position: static; flex-direction: row; flex-wrap: wrap; max-width: none; margin-top: 10px; }
.dk-hero { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: #d8d3e8; display: flex; align-items: flex-start; gap: 6px; }
.dk-hero .bt-at { flex: none; position: static; width: 18px; height: 18px; border-radius: 5px; margin-top: 1px; } .dk-hero .bt-at svg { width: 12px; height: 12px; }
.dk-hero b { color: #fff; } .dk-hero.mut { color: var(--mut); display: block; }

.dk-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.dk-btn { height: 56px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 800 15px var(--font-d); letter-spacing: .06em; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.45);
  background: var(--streak), var(--chrome); border: 1px solid rgba(255,255,255,.25); box-shadow: var(--rim), 0 8px 16px rgba(0,0,0,.5), 0 0 18px color-mix(in srgb, var(--theme) 40%, transparent); }
.dk-btn small { font: 600 10px var(--font-d); letter-spacing: .02em; opacity: .88; }
.dk-btn.alt { background: var(--streak), var(--lacq); border-color: rgba(255,255,255,.16); box-shadow: var(--rim), 0 8px 16px rgba(0,0,0,.5); color: #eee; }
.dk-btn:disabled { opacity: .45; filter: saturate(.3); }
.dk-btn:active { transform: translateY(1px); }

.dk-rules { padding: 0; } .dk-rules summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; padding: 14px; }
.dk-rules summary::-webkit-details-marker { display: none; }
.dk-rules summary b { font: 800 15px var(--font-d); color: #fff; } .dk-rules summary small { font-size: 11px; color: var(--mut); }
.dk-rules summary small::after { content: ' ›'; display: inline-block; transition: transform .25s; } .dk-rules[open] summary small::after { transform: rotate(90deg); }
.dk-rules > p, .dk-rules .dk-attrs { margin: 0 14px 12px; font-size: 12px; line-height: 1.6; color: #c9c4dd; }
.dk-cycle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .dk-cycle .bt-at { position: static; width: 16px; height: 16px; border-radius: 4px; } .dk-cycle .bt-at svg { width: 11px; height: 11px; }
.dk-cycle i { font-style: normal; color: var(--mut); font-size: 10px; margin: 0 1px; } .dk-cycle em { flex-basis: 100%; font-style: normal; color: var(--mut); font-size: 11px; }
.dk-attrs { display: grid; gap: 6px; } .dk-attrs > div { display: grid; grid-template-columns: 18px 1fr; gap: 2px 6px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.dk-attrs .bt-at { position: static; width: 18px; height: 18px; border-radius: 5px; grid-row: 1 / 4; } .dk-attrs .bt-at svg { width: 12px; height: 12px; }
.dk-attrs b { color: #fff; font-size: 13px; } .dk-attrs span { grid-column: 2; font-size: 11px; line-height: 1.5; }

.ar-plaque { margin: 0 16px 12px; padding: 16px 18px; border-radius: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--streak), var(--lacq); border: 1px solid rgba(255,255,255,.14); box-shadow: var(--rim), 0 12px 26px rgba(0,0,0,.55), inset 0 0 40px rgba(251,114,153,.08); }
.ar-rk small { display: block; font: 700 11px var(--font-n); letter-spacing: .2em; color: var(--mut); }
.ar-rk b { display: block; font: 900 44px/1 var(--font-n); letter-spacing: .02em; margin-top: 4px; background: linear-gradient(180deg, #fff3cf 0%, #ffd27a 45%, #c98a2a 52%, #ffe9b0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.ar-wl { display: flex; gap: 14px; } .ar-wl span { text-align: center; font: 700 11px var(--font-n); color: var(--mut); letter-spacing: .1em; }
.ar-wl span b { display: block; font: 800 22px/1.1 var(--font-n); color: #fff; letter-spacing: 0; } .ar-wl .hot b { color: #ff9a3c; }

.ar-acts { margin: 0 16px 12px; display: grid; gap: 10px; }
.ar-go { height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 14px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.65);
  background: var(--streak), var(--chrome); border: 1px solid rgba(255,255,255,.3); box-shadow: var(--rim), 0 12px 24px rgba(0,0,0,.55), 0 0 28px rgba(251,114,153,.45); }
.ar-go i { font-style: normal; font-size: 28px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.ar-go span { display: flex; flex-direction: column; align-items: flex-start; font: 900 20px var(--font-d); letter-spacing: .1em; }
.ar-go small, .ar-btn small { font: 600 11px var(--font-d); letter-spacing: .02em; opacity: .9; }
.ar-go:disabled { opacity: .5; filter: saturate(.3); }
.ar-go:active, .ar-btn:active { transform: translateY(1px); }
.ar-btn { height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #eee; background: var(--streak), var(--lacq); border: 1px solid rgba(255,255,255,.16); box-shadow: var(--rim), 0 8px 16px rgba(0,0,0,.5); }
.ar-btn span { display: flex; flex-direction: column; align-items: center; font: 800 15px var(--font-d); letter-spacing: .06em; }

.ar-deck { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); cursor: pointer; }
.ar-deck-c { flex: none; width: 40px; } .ar-deck-c .card { --cw: 100% !important; width: 100%; } .ar-deck-c .card .face { box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.ar-deck-c:empty { height: 56px; border-radius: 6px; border: 1px dashed rgba(255,255,255,.3); }
.ar-deck > div:nth-child(2) { flex: 1; min-width: 0; } .ar-deck b { display: block; font: 800 14px var(--font-d); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-deck small { display: block; font-size: 11px; color: var(--mut); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-deck em { flex: none; font: 700 12px var(--font-d); font-style: normal; color: var(--theme); }
.ar-deck.warn { border-color: rgba(255,154,60,.4); background: rgba(255,154,60,.08); } .ar-deck.warn b { color: #ffc27a; }

.ar-rank .bt-rank div { padding: 8px 4px; font-size: 13px; }
.ar-rank .bt-rank .me { background: rgba(251,114,153,.14); }
.ghost-btn.sm { padding: 5px 10px; font-size: 11px; border-radius: 10px; }

.bt-pc.out .bt-pc-in { opacity: .35; filter: grayscale(.8); } .bt-pc.out > span { color: #ff9a3c; }
.bt-pc-n { position: absolute; left: 4px; top: 4px; z-index: 3; text-decoration: none; padding: 1px 6px; border-radius: 6px; font: 800 10px var(--font-n); color: #1b1926; background: #ffd27a; box-shadow: 0 1px 3px rgba(0,0,0,.5); }

#s-deck { display: flex; flex-direction: column; }
#s-deck .page-h { flex: none; }
.dk-top { display: grid; grid-template-columns: 190px 1fr; gap: 12px; align-items: start; }
.dk-slot > span { display: none; }
.dk-info { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.dk-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dk-name b { font: 800 15px var(--font-d); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-name .bt-at { position: static; flex: none; width: 20px; height: 20px; border-radius: 5px; } .dk-name .bt-at svg { width: 13px; height: 13px; }
.dk-hst { display: flex; gap: 12px; } .dk-hst span { font: 800 22px/1 var(--font-n); color: #fff; letter-spacing: .02em; } .dk-hst small { font: 700 11px var(--font-n); color: var(--mut); margin-right: 3px; vertical-align: 3px; }
.dk-pas { margin: 0; display: block; font-size: 12px; line-height: 1.5; color: #d8d3e8; text-align: left; } .dk-pas b { color: #fff; font-weight: 800; } .dk-pas.mut { color: var(--mut); }
.dk-bonds { display: flex; flex-direction: column; margin-top: 1px; border-radius: 8px; background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); overflow: hidden; }
.dk-bonds span { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font: 700 11px var(--font-d); color: rgba(255,255,255,.88); border-radius: 0; }
.dk-bonds span + span { border-top: 1px solid rgba(255,255,255,.08); }
.dk-bonds svg { flex: none; width: 14px; height: 14px; fill: var(--ac); filter: drop-shadow(0 0 3px var(--ac)); } .dk-bonds em { flex: 1; font-style: normal; } .dk-bonds u { text-decoration: none; font: 800 12px var(--font-n); color: #fff; }
.dk-mins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.dk-st { display: block; margin-top: 5px; text-align: center; font: 800 12px var(--font-n); font-style: normal; color: #fff; letter-spacing: .02em; white-space: nowrap; } .dk-st:empty { display: none; }
.dk-slot .bt-taunt { font-size: 11px; }
.dk-btn small { font-size: 11px; }
.dk-acts { margin: 0 16px 12px; }
.dk-rules { flex: none; margin-top: auto; margin-bottom: 12px; }
.dk-cycle i { font-size: 11px; }
.bt-pc-n { font-size: 11px; }
.ar-go i { display: grid; place-items: center; width: 32px; height: 32px; } .ar-go i svg { width: 30px; height: 30px; fill: #fff; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }

.dk-top { grid-template-columns: 184px 1fr; }
.dk-rules { margin-top: 0; }
.dk-btn { height: 64px; }
.dk-panel.dk-deck { padding: 14px; }
.dk-mins { margin-top: 16px; }
.dk-bonds { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; min-height: 57px; gap: 5px; margin-top: 16px; border: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.dk-bonds > b { font: 800 12px var(--font-d); color: var(--mut); letter-spacing: .1em; margin-right: 2px; }
.dk-bonds > i { font: 600 11px var(--font-d); font-style: normal; color: var(--mut); }
.dk-bonds span { gap: 5px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.dk-bonds span + span { border-top: 1px solid rgba(255,255,255,.1); }
.dk-bonds em { flex: none; }

.dk-pas b { display: block; margin-bottom: 1px; }
.dk-pas .nw { white-space: nowrap; }

.dk-lib { padding: 0; } .dk-lib summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; padding: 14px; }
.dk-lib summary::-webkit-details-marker { display: none; }
.dk-lib summary b { font: 800 15px var(--font-d); color: #fff; } .dk-lib summary small { font-size: 11px; color: var(--mut); }
.dk-lib summary small::after { content: ' ›'; display: inline-block; transition: transform .25s; } .dk-lib[open] summary small::after { transform: rotate(90deg); }
.dk-lib-list { margin: 0 14px; } .dk-lib-list .bt-hint { margin: 0 0 12px; }
.dk-lib-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.08); }
.dk-lib-row:first-child { border-top: 0; }
.dk-lib-c { flex: none; width: 36px; } .dk-lib-c .card { --cw: 100% !important; width: 100%; } .dk-lib-c .card .face { box-shadow: 0 2px 6px rgba(0,0,0,.5); } .dk-lib-c:empty { height: 50px; border-radius: 4px; border: 1px dashed rgba(255,255,255,.25); }
.dk-lib-t { flex: 1; min-width: 0; } .dk-lib-t b { display: block; font: 800 14px var(--font-d); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-lib-t small { display: flex; gap: 3px; margin-top: 3px; } .dk-lib-t .bt-at { position: static; width: 16px; height: 16px; border-radius: 4px; } .dk-lib-t .bt-at svg { width: 11px; height: 11px; }
.dk-lib-row .ghost-btn.sm { padding: 6px 9px; flex: none; } .dk-lib-row .ghost-btn.del { color: #ff8a9a; }
.dk-lib-save { width: calc(100% - 28px); margin: 10px 14px 14px; height: 56px; }
.dk-lib-save:disabled { opacity: .45; }

#s-home.short .home-info { gap: 5px; padding-bottom: 8px; }
#s-home.short #pk-name { font-size: 22px; margin: 0; }
#s-home.short .peek { padding: 1px 10px; font-size: 12px; margin-top: -2px; }
#s-home.short .pk-stats { padding: 4px 0 0; } #s-home.short .pk-stats small { font-size: 10px; } #s-home.short .pk-stats b { font-size: 14px; }
#s-home.short .home-info .buy { height: 48px; font-size: 16px; }
#s-home.short .bulk-row .bx { height: 50px; }
#s-home.short .dots { height: 6px; }

#s-feed.phone .fd-txt p { display: none; }
#s-feed.phone .fd-txt b { font-size: 17px; } #s-feed.phone .fd-txt small { font-size: 11px; }
#s-feed.phone .fd-info { gap: 6px; } #s-feed.phone .fd-card { margin-bottom: 8px; }
#s-feed.phone .fd-acts .fd-go, #s-feed.phone .fd-acts .fd-draw { white-space: nowrap; flex: none; height: 40px; padding: 0 14px; font-size: 14px; border-radius: 20px; }
#s-feed.phone .fd-acts { gap: 8px; } #s-feed.phone .fd-acts .like-btn { flex: none; }
#s-feed.phone .fd-top { top: calc(8px + var(--sat)); height: 34px; }

#s-feed.phone .fd-tap { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 22% 22%, 22% 78%, 78% 78%, 78% 22%, 22% 22%); }

.fd-backface:not(.vert) .fd-scr { left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; transform: none; aspect-ratio: auto; box-shadow: none; }
.fd-item.rot .fd-backface:not(.vert) .fd-scr { left: 50%; top: 50%; right: auto; bottom: auto; width: calc(var(--fd-w) * 1.4 - 4px); height: calc((var(--fd-w) * 1.4 - 4px) * 9 / 16); transform: translate(-50%, -50%) rotate(90deg); }
.fd-backface { box-shadow: none; }
#s-feed .card.ic.r-pixel .fx-rim { display: none; }
.fd-bk-bar { justify-content: space-between; }
.fd-flipb { padding: 0 12px; }

.bt.short .bt-hud { padding: 3px 10px 4px 4px; row-gap: 3px; }
.bt.short .bt-hslot { padding: 2px 0 8px; } .bt.short .bt-hslot.e { margin-top: 6px; } .bt.short .bt-hslot.m { margin-bottom: 6px; }
.bt.short .bt-mid { height: 26px; }
.bt.short .bt-row { padding-bottom: 3px; }
.bt.short .bt-ulthint { display: none; }

.bt-hud { grid-template-columns: 52px 1fr auto; grid-template-rows: auto auto auto; row-gap: 2px; }
.bt-hud.e { grid-template-columns: 44px 1fr auto; }
.bt-hporb { grid-row: 1 / 4; grid-column: 1; position: relative; width: 52px; height: 52px; color: #2fd889; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.10), rgba(6,6,12,.75) 72%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.16), inset 0 -4px 8px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.5); }
.bt-hud.e .bt-hporb { width: 44px; height: 44px; }
.bt-hporb svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bt-hporb .bt-oliq { transition: transform .6s cubic-bezier(.2,.8,.3,1); }
.bt-hporb .bt-ow { fill: currentColor; }
.bt-hporb .bt-ow1 { animation: bt-wave 1.8s linear infinite; opacity: .95; }
.bt-hporb .bt-ow2 { animation: bt-wave 2.6s linear infinite reverse; opacity: .55; filter: brightness(1.4); }
@keyframes bt-wave { from { transform: translateX(-64px); } to { transform: translateX(0); } }
.bt-hporb .bt-oring { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1.5; }
.bt-hporb::after { content: ''; position: absolute; left: 22%; top: 9%; width: 38%; height: 22%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); pointer-events: none; }
.bt-ohp { position: absolute; inset: 0; display: grid; place-items: center; font: 900 15px/1 var(--font-n); color: #fff; letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.9); }
.bt-hud.e .bt-ohp { font-size: 13px; }
.bt-hporb.lv-mid { color: #ffb347; }
.bt-hporb.lv-low { color: #ff3d5a; animation: bt-orbwarn 1s ease-in-out infinite alternate; }
.bt-hporb.lv-crit { animation-duration: .5s; }
@keyframes bt-orbwarn { from { box-shadow: inset 0 0 0 2px rgba(255,255,255,.16), inset 0 -4px 8px rgba(0,0,0,.5), 0 0 0 0 rgba(255,61,90,0); } to { box-shadow: inset 0 0 0 2px rgba(255,120,140,.7), inset 0 -4px 8px rgba(0,0,0,.5), 0 0 16px 2px rgba(255,61,90,.65); } }
.bt-np .bt-at.mini { position: static; width: 18px; height: 18px; border-radius: 5px; margin-left: auto; flex: none; }
.bt-np .bt-at.mini svg { width: 12px; height: 12px; }
.bt-hud .bt-en { grid-column: 2 / 4; grid-row: 3; position: relative; height: 8px; padding: 1px; gap: 1px; border-radius: 5px; flex-direction: row; }
.bt-hud .bt-en i { border-radius: 1px; }
.bt-en.used::after { font-size: 8px; letter-spacing: .04em; line-height: 1; }

.bt-mid { height: 32px; gap: 6px; }
.bt-orbs { flex: 1; display: flex; gap: 3px; justify-content: center; align-items: center; min-width: 0; transition: opacity .3s, filter .3s; }
.bt-orbs.e { flex-direction: row-reverse; }
.bt-orbs i { flex: none; width: 13px; height: 13px; border-radius: 50%; position: relative; transition: box-shadow .25s, background .25s;
  background: radial-gradient(circle at 42% 36%, rgba(255,255,255,.14), rgba(120,170,255,.08) 45%, rgba(10,18,40,.55) 100%);
  box-shadow: inset 0 0 0 1px rgba(150,200,255,.22), inset 0 -2px 3px rgba(0,0,0,.5); }
.bt-orbs.e i { width: 9px; height: 9px; }
.bt-orbs i.on { background: radial-gradient(circle at 42% 36%, #f2fdff 0, #9beaff 22%, #35c3ff 55%, #1c6cff 85%, #0b2d7a 100%);
  box-shadow: 0 0 6px rgba(80,210,255,.9), 0 0 14px rgba(40,150,255,.55), inset 0 1px 1px rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,40,120,.6); }
.bt-orbs i.on::after { content: ''; position: absolute; left: 24%; top: 12%; width: 40%; height: 26%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)); }
.bt-orbs i.next::before { content: ''; position: absolute; inset: 1px; border-radius: 50%; opacity: var(--p, 0);
  background: radial-gradient(circle at 50% 50%, #c9f3ff 0, #4fd0ff 45%, rgba(28,108,255,.6) 80%, transparent 100%); box-shadow: 0 0 8px rgba(80,210,255,.6); }
.bt-orbs.dry { opacity: .55; filter: saturate(.5); animation: bt-orbdry 1s ease-in-out infinite alternate; }
@keyframes bt-orbdry { from { opacity: .45; } to { opacity: .8; } }

.bt-cost { position: absolute; left: 4px; bottom: calc(var(--st) + 4px); z-index: 3; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; font: 900 11px/1 var(--font-n); color: #fff; letter-spacing: 0; text-shadow: 0 1px 2px rgba(0,30,90,.8);
  background: radial-gradient(circle at 42% 36%, #c9f3ff 0, #35c3ff 40%, #1c6cff 80%, #0b2d7a 100%); box-shadow: 0 0 6px rgba(80,210,255,.7), 0 1px 3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.6); }
.bt-u.hero .bt-cost { min-width: 20px; height: 20px; font-size: 12px; }
.bt-u.wait .bt-cost { animation: bt-blink .35s ease-in-out infinite alternate; box-shadow: 0 0 10px #4fd0ff, 0 1px 3px rgba(0,0,0,.6); }
.bt-u.wait .bt-pic { filter: saturate(.8) brightness(.92); }
.bt-u.ko .bt-cost { display: none; }

.bt-hp { height: 7px; border-radius: 4px; }
.bt-hp::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(0,0,0,.45) calc(25% - 1px) 25%); pointer-events: none; }
.bt-hp.crit i { animation: bt-blink .6s ease-in-out infinite alternate; }

.bt-hud { grid-template-columns: 44px 1fr 52px; grid-template-rows: auto auto auto; row-gap: 2px; }
.bt-hud.e { grid-template-columns: 40px 1fr 44px; }
.bt-ava { grid-row: 1 / 4; grid-column: 1; width: 44px; height: 44px; }
.bt-hud.e .bt-ava { width: 40px; height: 40px; } .bt-hud.e .bt-ava svg { width: 20px; height: 20px; }
.bt-hporb { grid-column: 3; grid-row: 1 / 4; justify-self: end; }
.bt-np { grid-column: 2; grid-row: 1; } .bt-hhp { grid-column: 2; grid-row: 2; } .bt-hud .bt-en { grid-column: 2; grid-row: 3; }
.bt-rkpill { position: absolute; left: 0; z-index: 5; padding: 3px 9px; border-radius: 999px; font: 800 10px/1 var(--font-n); letter-spacing: .1em; color: rgba(255,255,255,.75); white-space: nowrap;
  background: rgba(10,10,16,.72); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.bt-rkpill.e { top: -26px; } .bt-rkpill.m { bottom: -26px; }
.bt.short .bt-rkpill.e { top: 2px; } .bt.short .bt-rkpill.m { bottom: 2px; } .bt.short .bt-tags.e { top: 24px; }

.bt-u::before, .bt-u.hero::before { display: none !important; }
.bt-u::after, .bt-u.hero::after, .bt-u.r-gold2::after { box-shadow: 0 12px 24px rgba(0,0,0,.65); background: none; }
.bt-row { gap: 8px; }

.qz-skip { align-self: center; margin: 0; padding: 4px 12px; border: 0; background: none; color: var(--mut); font: 600 13px var(--font-d); letter-spacing: .04em; text-decoration: underline dotted; text-underline-offset: 4px; opacity: .85; }
.qz-skip:active { opacity: .6; }
.qz.done .qz-skip { display: none; }

.bt-u::after, .bt-u.hero::after, .bt-u.r-gold2::after { display: none; }
.bt-pic.wg-frame { --p: 5.5px; --r: 8px; --angle: 135deg; box-sizing: border-box; width: 100%; padding: var(--p); border-radius: var(--r); overflow: visible; isolation: isolate; background: #151c28; box-shadow: 0 2px #03060a, 0 10px 18px -6px #000c;
  --gold: linear-gradient(var(--angle), #684017, #ffe8ad 17%, #b9842d 33%, #4b2d10 49%, #dfb75c 64%, #fff0b4 81%, #8f601f); }
.bt-pic.wg-frame.small { --p: 3px; --r: 5px; }
.wg-face { position: relative; z-index: 2; border-radius: 4px; overflow: hidden; background: #12161c; box-shadow: 0 0 0 1px #0009; }
.small .wg-face { border-radius: 2px; }
.wg-lining, .wg-corner, .wg-rail, .wg-top, .wg-stripes, .wg-refraction { position: absolute; pointer-events: none; }
.wg-lining { z-index: 1; inset: calc(var(--p) - 1px); border: 1px solid #fff5; border-radius: calc(var(--r) - 3px); }
.wg-corner { display: none; z-index: 1; } .wg-tl { left: 0; top: 0; } .wg-tr { right: 0; top: 0; transform: scaleX(-1); } .wg-bl { left: 0; bottom: 0; transform: scaleY(-1); } .wg-br { right: 0; bottom: 0; transform: scale(-1); }

.wg-frame.common { --p: 4.5px; background: linear-gradient(var(--angle), #7a91a8, #c8daeb 19%, #577086 33%, #263c51 49%, #8aa8bd 76%, #c2d3e5); box-shadow: inset 0 1px #e9f3ff9c, inset -1px -1px #182a3e, 0 2px #0c1521, 0 10px 16px -6px #000b; }
.wg-frame.common .wg-lining { border-color: #172536; } .wg-frame.common.small { --p: 2.5px; }

.wg-frame.gold { --p: 6px; background: repeating-linear-gradient(0deg, #fff3 0 .5px, transparent .5px 2px), var(--gold); box-shadow: inset 1px 1px #ffeab5, inset -2px -2px #5b3815, 0 2px #37230e, 0 10px 16px -6px #000c; }
.wg-frame.gold .wg-lining { border-color: #5c3915; box-shadow: 0 0 0 1px #f2c36a99; } .wg-frame.gold.small { --p: 3.5px; }

.wg-frame.pixel { --p: 7px; background: #7050b0; border-radius: 0; box-shadow: 3px 0 #25163e, -3px 0 #25163e, 0 3px #25163e, 0 -3px #25163e, inset 3px 3px #c9afff, inset -3px -3px #3e2866; }
.wg-frame.pixel .wg-lining { inset: 4px; border: 2px solid #211831; border-radius: 0; box-shadow: 0 0 0 1px #ac85ee; }
.wg-frame.pixel .wg-corner { display: block; width: 9px; height: 9px; background: #e7ceff; box-shadow: 3px 3px #9970da, -3px -3px #211831; border-radius: 0; }
.wg-frame.pixel .wg-top { z-index: 4; width: 24px; height: 15px; left: calc(50% - 12px); top: -6px; background: url(img/frames/pixel-invader.svg) center/100% 100%; image-rendering: pixelated; filter: drop-shadow(0 2px #211831); }
.wg-frame.pixel .wg-stripes { z-index: 0; inset: 22px 0; background: repeating-linear-gradient(0deg, transparent 0 18px, #d2b2ff 18px 23px, transparent 23px 30px, #31204b 30px 35px); }
.wg-frame.pixel .wg-face { border-radius: 0; }
.wg-frame.pixel.small { --p: 4px; box-shadow: 2px 0 #25163e, -2px 0 #25163e, 0 2px #25163e, 0 -2px #25163e, inset 2px 2px #c9afff, inset -2px -2px #3e2866; }
.wg-frame.pixel.small .wg-lining { inset: 2px; border-width: 1px; } .wg-frame.pixel.small .wg-corner { width: 5px; height: 5px; box-shadow: 2px 2px #9970da, -2px -2px #211831; }
.wg-frame.pixel.small .wg-top { width: 16px; height: 10px; left: calc(50% - 8px); top: -4px; } .wg-frame.pixel.small .wg-stripes { inset: 14px 0; background-size: 100% 24px; }

.wg-frame.gilded, .wg-frame.diamond { --p: 9px; --r: 5px; background: transparent; box-shadow: 0 4px 8px #0008; }
.wg-frame.gilded .wg-lining, .wg-frame.gilded .wg-corner, .wg-frame.diamond .wg-lining { display: none; }
.wg-rail { z-index: 3; inset: -1px; border: 11px solid transparent; border-image-source: var(--frame-art); border-image-slice: 85 75; border-image-repeat: stretch; border-image-width: 11px; }
.wg-frame.gilded { --frame-art: url(img/frames/gilded-relief.webp); } .wg-frame.gilded .wg-rail { border-image-slice: 75 70; }
.wg-frame.pave { --frame-art: url(img/frames/diamond-clear.webp); --p: 9px; } .wg-frame.diamond .wg-rail { opacity: .93; }
.wg-frame.gilded.small, .wg-frame.diamond.small, .wg-frame.pave.small { --p: 4.5px; }
.wg-frame.gilded.small .wg-rail, .wg-frame.diamond.small .wg-rail { border-width: 6px; border-image-width: 6px; inset: -.5px; }
.wg-frame.gilded .wg-face, .wg-frame.diamond .wg-face { border-radius: 3px; box-shadow: none; }
.wg-frame.diamond .wg-refraction { inset: 0; z-index: 0; border-radius: 6px; filter: blur(1px) saturate(.35); opacity: .48; background-repeat: no-repeat; }
.bt-u.ko .wg-rail, .bt-u.ko .wg-top { opacity: .5; }

.bt-cd::before, .bt-cd::after { display: none; content: none; }
.bt-cd i { top: 0; bottom: auto; height: calc(100% - var(--cdp, 0%)); transition: height .1s linear; mix-blend-mode: normal; background: linear-gradient(180deg, rgba(26,28,34,.78), rgba(30,32,38,.7)); }
.bt-cd i::before { top: auto; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ac) 35%, #fff) 30%, #fff 50%, color-mix(in srgb, var(--ac) 35%, #fff) 70%, transparent); box-shadow: 0 0 5px #fff, 0 0 10px var(--ac); opacity: .95; }
.bt-cd i::after { top: auto; bottom: 0; height: 10px; background: linear-gradient(0deg, color-mix(in srgb, var(--ac) 50%, #fff), transparent); opacity: .45; }
.bt-u.ready .bt-cd i { height: 0 !important; animation: none; }
.bt-u.ready .bt-cd { animation: bt-cdflash .45s ease-out; }
@keyframes bt-cdflash { from { background: color-mix(in srgb, var(--ac) 70%, #fff); } to { background: transparent; } }
.bt-u.ready .wg-face { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 60%, #fff), 0 0 10px var(--ac), 0 0 22px color-mix(in srgb, var(--ac) 55%, transparent); animation: bt-readyglow .7s ease-in-out infinite alternate; }
@keyframes bt-readyglow { from { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 40%, #fff), 0 0 6px var(--ac), 0 0 14px transparent; } to { box-shadow: 0 0 0 1.5px #fff, 0 0 12px var(--ac), 0 0 26px color-mix(in srgb, var(--ac) 60%, transparent); } }
.bt-u.ready::after { animation: none; }

.bt-orbs.e i { background: radial-gradient(circle at 42% 36%, rgba(255,255,255,.14), rgba(255,130,120,.08) 45%, rgba(44,10,16,.55) 100%); box-shadow: inset 0 0 0 1px rgba(255,150,140,.22), inset 0 -2px 3px rgba(0,0,0,.5); }
.bt-orbs.e i.on { background: radial-gradient(circle at 42% 36%, #fff3ef 0, #ffb9a6 22%, #ff5e48 55%, #d61f1c 85%, #6a0b12 100%); box-shadow: 0 0 6px rgba(255,110,90,.9), 0 0 14px rgba(255,60,40,.55), inset 0 1px 1px rgba(255,255,255,.7), inset 0 -2px 3px rgba(120,0,10,.6); }
.bt-orbs.e i.next::before { background: radial-gradient(circle at 50% 50%, #ffe2da 0, #ff7c62 45%, rgba(214,31,28,.6) 80%, transparent 100%); box-shadow: 0 0 8px rgba(255,110,90,.6); }

.bt.finale .bt-bg { filter: none; opacity: .5; transition: opacity .3s; }
.bt-over { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6,6,12,.94); }

.card.ic .c-spark { display: none; }
.tbox { display: block; width: 100%; margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.35); color: #fff; font: 14px/1.5 var(--font-d); resize: none; word-break: break-all; }
.tbox:focus { outline: 2px solid var(--theme); }
.tbox-btns { display: flex; gap: 8px; margin-top: 12px; } .tbox-btns button { flex: 1; }

:root {
  --ice-bevel: linear-gradient(135deg, #2b4f6e 0%, #9fdcff 12%, #ffffff 22%, #b9e6ff 32%, #4f86b3 46%, #d7c8ff 58%, #ffffff 70%, #8fd0ff 84%, #24435f 100%);
  --ice-text: linear-gradient(180deg, #ffffff 0%, #e2f6ff 40%, #9fd8ff 70%, #dff2ff 100%);
  --ice-shell: radial-gradient(120% 45% at 50% 0%, rgba(170,230,255,.16), transparent 62%), radial-gradient(90% 40% at 50% 100%, rgba(150,120,255,.10), transparent 70%), linear-gradient(180deg, #0f1c2a 0%, #08111b 52%, #04080d 100%);
}
.card.r-diamond .face { box-shadow: 0 0 0 1px rgba(190,236,255,.55), 0 0 18px -4px rgba(120,210,255,.55); }
.card.ic .c-prism { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; mix-blend-mode: screen; opacity: .34;
  background: linear-gradient(115deg, transparent 30%, rgba(255,120,160,.35) 40%, rgba(255,230,120,.35) 44%, rgba(120,255,200,.35) 48%, rgba(110,190,255,.4) 52%, rgba(190,140,255,.35) 56%, transparent 66%) no-repeat;
  background-size: 260% 100%; background-position: 140% 0; animation: iceSweep 6.5s ease-in-out infinite; }
@keyframes iceSweep { 0% { background-position: 140% 0; } 50%, 100% { background-position: -40% 0; } }
.card.ic .c-glints { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.card.ic .c-glints i { position: absolute; width: calc(var(--cw, 200px) * .09); aspect-ratio: 1; margin: calc(var(--cw, 200px) * -.045) 0 0 calc(var(--cw, 200px) * -.045); opacity: 0;
  background: radial-gradient(circle, #fff 0 8%, transparent 9%), linear-gradient(90deg, transparent 0 46%, rgba(255,255,255,.95) 50%, transparent 54%), linear-gradient(0deg, transparent 0 46%, rgba(255,255,255,.95) 50%, transparent 54%);
  -webkit-mask: radial-gradient(circle, #000 0 25%, transparent 70%); mask: radial-gradient(circle, #000 0 25%, transparent 70%);
  filter: drop-shadow(0 0 3px rgba(150,220,255,.9)); animation: iceGlint 4.2s ease-in-out infinite; }
.card.ic .c-glints i:nth-child(1) { left: 18%; top: 14%; animation-delay: 0s; }
.card.ic .c-glints i:nth-child(2) { left: 82%; top: 26%; animation-delay: .7s; }
.card.ic .c-glints i:nth-child(3) { left: 30%; top: 58%; animation-delay: 1.5s; transform: scale(.7); }
.card.ic .c-glints i:nth-child(4) { left: 74%; top: 72%; animation-delay: 2.2s; }
.card.ic .c-glints i:nth-child(5) { left: 52%; top: 36%; animation-delay: 2.9s; }
.card.ic .c-glints i:nth-child(6) { left: 12%; top: 86%; animation-delay: 3.5s; }
@keyframes iceGlint { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 78% { opacity: .9; transform: scale(1) rotate(20deg); } 88% { opacity: .35; transform: scale(.6) rotate(45deg); } }
.card.ic .fx-ice { box-shadow: inset 0 0 0 1.5px rgba(220,246,255,.55), inset 0 0 calc(var(--cw, 200px) * .08) rgba(130,210,255,.35); }
@media (prefers-reduced-motion: reduce) { .card.ic .c-prism, .card.ic .c-glints i { animation: none; } }

.slab.ice { border: 2px solid transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  background: linear-gradient(155deg, rgba(220,245,255,.10), rgba(255,255,255,0) 40%, rgba(200,180,255,.06)) padding-box, var(--ice-shell) padding-box, var(--ice-bevel) border-box;
  box-shadow: 0 34px 60px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.6), 0 0 28px -8px rgba(110,200,255,.45), inset 0 1px 0 rgba(230,248,255,.5), inset 0 0 0 5px rgba(0,0,0,.3), inset 0 0 0 6px rgba(160,220,255,.32); }
.sp-slab.ice { padding: 8px; }
.ice .slab-lbl { position: relative; border: 1.5px solid transparent; color: #9fc6dc;
  background: repeating-linear-gradient(120deg, rgba(180,230,255,.05) 0 2px, transparent 2px 7px) padding-box, linear-gradient(180deg, #16283a 0%, #0c1824 55%, #08111a 100%) padding-box, var(--ice-bevel) border-box;
  box-shadow: inset 0 1px 0 rgba(220,246,255,.2), 0 3px 8px rgba(0,0,0,.6); }
.ice .slab-lbl b, .ice .slab-lbl em { background: var(--ice-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 0 4px rgba(110,200,255,.35)); }
.ice .slab-lbl b { font-family: var(--font-s); font-weight: 900; letter-spacing: .06em; }
.ice .slab-lbl em { font-family: var(--font-lux); font-weight: 700; letter-spacing: .04em; }
.ice .slab-lbl small, .ice .slab-lbl span { font-family: var(--font-s); font-weight: 600; color: #a9cde2; letter-spacing: .18em; }
.sp-slab-back.ice .seal { color: #0c2236; background: radial-gradient(circle at 35% 30%, #ffffff, #c9efff 38%, #6fbfe9 70%, #2a5c84); box-shadow: inset 0 0 0 1.5px rgba(20,50,80,.6), inset 0 0 0 3px rgba(230,248,255,.4), 0 0 10px rgba(120,210,255,.6); }
.sp-edge.acr.ice { background: linear-gradient(180deg, #1f3d58, #79b9e4 20%, #e6f7ff 45%, #ffffff 52%, #a9c7ff 66%, #22405a 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.mini-slab.ice { box-shadow: 0 10px 22px -8px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.6), 0 0 14px -4px rgba(110,200,255,.5), inset 0 1px 0 rgba(230,248,255,.5), inset 0 0 0 2.4cqw rgba(0,0,0,.3), inset 0 0 0 2.9cqw rgba(160,220,255,.3); }
.mini-slab.ice .ms-glare { opacity: .3; background-image: linear-gradient(118deg, transparent 44%, rgba(255,150,200,.16) 47%, rgba(180,240,255,.3) 50%, rgba(190,160,255,.16) 53%, transparent 56%); }

.col-grid .cell .lock.ice { border-color: rgba(160,225,255,.55); background: radial-gradient(90% 60% at 50% 30%, rgba(120,210,255,.14), transparent 70%), rgba(8,18,28,.6); }
.col-grid .cell .lock small { display: block; margin-top: 2cqw; font-size: 7.4cqw; letter-spacing: .04em; color: #bfe9ff; opacity: .85; }

.detail.lux.ice .seg-btns { border-color: rgba(160,220,255,.6); box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.6), 0 0 18px -6px rgba(110,200,255,.5); }
.detail.lux.ice .seg-btns > .seg-on { color: #0c2236; text-shadow: 0 1px 0 rgba(255,255,255,.6); background: linear-gradient(180deg, #ffffff 0%, #d4f1ff 30%, #8fd0f4 52%, #6fb6e0 56%, #b6e4ff 82%, #e8f8ff 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 4px rgba(20,70,110,.35); }
.detail.lux.ice .seg-btns > button { color: #cdeeff; text-shadow: 0 0 8px rgba(160,220,255,.4), 0 1px 0 #000; background: radial-gradient(120% 140% at 50% 0%, rgba(150,220,255,.16), transparent 60%), linear-gradient(180deg, #101c28 0%, #070d14 100%); box-shadow: inset 1px 0 0 rgba(160,220,255,.45), inset 0 1px 0 rgba(220,246,255,.18); animation: none; }
.detail.lux.ice .sell-one { color: #bfe3f5; background: rgba(120,200,255,.06); border-color: rgba(140,210,255,.3); }

.ar-dia { border-color: rgba(150,215,255,.35); background: radial-gradient(120% 70% at 50% 0%, rgba(110,200,255,.12), transparent 70%), rgba(10,20,30,.55); }
.ar-dia .dk-h b { background: var(--ice-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ar-dia-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; justify-items: center; margin: 8px 0 6px; }
.ar-dia-c { position: relative; }
.ar-dia-c:not(.got) .card { filter: grayscale(.85) brightness(.35) blur(1.5px); }
.ar-dia-lock { position: absolute; inset: 0; display: grid; place-items: center; font: 900 24px var(--font-n); font-style: normal; color: rgba(190,235,255,.7); text-shadow: 0 0 10px rgba(110,200,255,.8); }
.ar-dia-note { margin: 0; font-size: 12px; line-height: 1.5; color: #a9cde2; text-align: center; }
.bt-over.under { visibility: hidden; }
.sell-bar[hidden] { display: none !important; }

.fd-scr iframe.fd-swap { opacity: 0; z-index: 2; transition: opacity .4s ease; }
.fd-scr iframe.fd-swap.in { opacity: 1; }

.slab.ice, .sp-slab-back.ice {
  border: 2px solid rgba(255,255,255,.9);
  background: linear-gradient(160deg, rgba(255,255,255,.26), rgba(255,255,255,0) 40%, rgba(255,255,255,.08) 70%, rgba(170,215,255,.22)) padding-box, url(img/slab/crystal.webp?v=1) center / cover padding-box;
  box-shadow: 0 34px 60px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(110,170,220,.7), 0 0 40px -6px rgba(150,220,255,.75), inset 0 0 28px rgba(255,255,255,.35), inset 0 1px 0 #fff;
}
.slab.ice::before { content: ''; position: absolute; inset: -8px; z-index: 3; pointer-events: none; border: 16px solid transparent;
  border-image: url(img/frames/diamond-clear.webp?v=1) 85 75 / 16px stretch; filter: drop-shadow(0 2px 4px rgba(0,30,60,.35)); }
.mini-slab.ice::before { inset: 0; border-width: 4.4cqw; border-image-width: 4.4cqw; filter: none; }
.ice .slab-lbl { border: 1px solid rgba(255,255,255,.95); color: #3d6b8c;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(228,244,255,.62)) padding-box;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.4), 0 2px 8px rgba(30,80,120,.28); }
.ice .slab-lbl b, .ice .slab-lbl em { background: linear-gradient(180deg, #17466f 0%, #2a76ad 48%, #3f93cf 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.85)); }
.ice .slab-lbl small, .ice .slab-lbl span { color: #4a7fa3; }
.ice .sp-lbl-back.slab-lbl { background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(228,244,255,.62)) padding-box; }
.sp-slab-back.ice .seal { color: #fff; background: radial-gradient(circle at 35% 30%, #e9f8ff, #7cc6f0 40%, #2d78b0 72%, #184b74); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7), 0 0 10px rgba(120,210,255,.8); }
.sp-edge.acr.ice { background: linear-gradient(180deg, #bfe3ff, #ffffff 28%, #9ed2fb 52%, #ffffff 76%, #a9d8ff 100%); box-shadow: inset 0 0 0 1px rgba(60,120,170,.35); }
.mini-slab.ice { box-shadow: 0 10px 22px -8px rgba(0,0,0,.8), 0 0 0 1px rgba(110,170,220,.7), 0 0 14px -3px rgba(150,220,255,.7), inset 0 0 6cqw rgba(255,255,255,.45), inset 0 1px 0 #fff; }
.mini-slab.ice .ms-glare { opacity: .5; background-image: linear-gradient(118deg, transparent 42%, rgba(255,170,215,.3) 46%, rgba(255,255,255,.75) 50%, rgba(170,200,255,.3) 54%, transparent 58%); }
.mini-slab.ice .card .face, .sp-slab.ice .card .face { box-shadow: 0 0 0 1px rgba(40,90,130,.5), 0 4px 12px rgba(20,60,100,.45); }

.slab.ice::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; display: block; mix-blend-mode: soft-light; opacity: .9;
  background: linear-gradient(118deg, transparent 30%, rgba(255,120,170,.5) 40%, rgba(255,235,120,.5) 44%, rgba(120,255,210,.5) 48%, rgba(110,190,255,.55) 52%, rgba(200,150,255,.5) 56%, transparent 66%) no-repeat;
  background-size: 260% 100%; background-position: 140% 0; animation: iceSweep 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .slab.ice::after { animation: none; } }

.slab.ice, .sp-slab-back.ice {
  border: 2px solid rgba(225,242,255,.92);
  background: radial-gradient(120% 60% at 50% 0%, rgba(140,200,255,.18), transparent 60%) padding-box, url(img/slab/crystal.webp?v=2) center / cover padding-box;
  box-shadow: 0 34px 60px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(40,90,170,.8), 0 0 40px -6px rgba(90,160,255,.7), inset 0 0 26px rgba(120,190,255,.35), inset 0 1px 0 rgba(255,255,255,.9);
}
.slab.ice::before { filter: drop-shadow(0 0 6px rgba(160,210,255,.55)); }
.ice .slab-lbl, .ice .sp-lbl-back.slab-lbl { border: 1px solid rgba(200,230,255,.75); color: #bfe3ff;
  background: linear-gradient(180deg, rgba(14,36,96,.72), rgba(6,20,64,.82)) padding-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 14px rgba(90,150,255,.25), 0 2px 8px rgba(0,10,40,.5); }
.ice .slab-lbl b, .ice .slab-lbl em { background: linear-gradient(180deg, #ffffff 0%, #e8f7ff 38%, #9fd6ff 62%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 4px rgba(140,210,255,.85)) drop-shadow(0 1px 0 rgba(0,20,60,.8)); }
.ice .slab-lbl small, .ice .slab-lbl span { color: #a9d4ff; }
.sp-slab-back.ice .seal { color: #0b2a5a; background: radial-gradient(circle at 35% 30%, #ffffff, #d8f0ff 40%, #8cc6ff 72%, #3f7fd6); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8), 0 0 12px rgba(140,200,255,.9); }
.sp-edge.acr.ice { background: linear-gradient(180deg, #0f2a6e, #3f7fd6 22%, #dff1ff 48%, #ffffff 52%, #4d8de0 72%, #0e2560 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.mini-slab.ice { box-shadow: 0 10px 22px -8px rgba(0,0,0,.85), 0 0 0 1px rgba(40,90,170,.8), 0 0 14px -3px rgba(90,160,255,.7), inset 0 0 6cqw rgba(120,190,255,.35), inset 0 1px 0 rgba(255,255,255,.9); }
.mini-slab.ice .card .face, .sp-slab.ice .card .face { box-shadow: 0 0 0 1px rgba(220,240,255,.6), 0 4px 14px rgba(0,10,40,.6); }
.slab.ice::after { opacity: .55; mix-blend-mode: screen; }

.dia-rw { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px 16px;
  background: radial-gradient(70% 50% at 50% 44%, rgba(40,90,130,.55), rgba(3,8,14,.97) 72%), #03080e; opacity: 0; transition: opacity .6s; overflow: hidden; }
.dia-rw.on { opacity: 1; } .dia-rw.out { opacity: 0; transition: opacity .3s; }
.dia-haze { position: absolute; left: 50%; top: 44%; width: 120vmin; height: 120vmin; margin: -60vmin 0 0 -60vmin; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(170,230,255,.42), rgba(120,190,255,.14) 35%, transparent 62%); transition: opacity 1.2s; }
.dia-rw.drop .dia-haze { opacity: .55; animation: diaBreath 3.2s ease-in-out 1.6s infinite; }
.dia-rw.charge .dia-haze { opacity: 1; transition: opacity .6s; }
@keyframes diaBreath { 50% { transform: scale(1.08); opacity: .85; } }
.dia-rays { position: absolute; left: 50%; top: 44%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; pointer-events: none; opacity: 0; transition: opacity 1.4s .8s;
  background: repeating-conic-gradient(from 0deg, rgba(180,235,255,.2) 0deg 3deg, transparent 3deg 17deg, rgba(210,190,255,.12) 17deg 19deg, transparent 19deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 46%); mask: radial-gradient(circle, #000 0, transparent 46%); animation: diaSpin 40s linear infinite; }
.dia-rw.drop .dia-rays { opacity: .35; } .dia-rw.flip .dia-rays { opacity: .7; animation-duration: 18s; }
@keyframes diaSpin { to { transform: rotate(360deg); } }
.dia-dust { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dia-dust i { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: #dff6ff; box-shadow: 0 0 6px 2px rgba(160,225,255,.7); opacity: 0;
  animation: diaDust var(--t) linear var(--d) infinite; }
@keyframes diaDust { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .6; } 100% { transform: translate(14px, -105vh) scale(1.1); opacity: 0; } }
.dia-stage { position: relative; perspective: 1100px; perspective-origin: 50% 40%; }
.dia-flip { position: relative; transform-style: preserve-3d; transform: translateY(-70vh) rotateX(-28deg) rotateZ(-9deg) scale(.6); opacity: 0; }
.dia-rw.drop .dia-flip { opacity: 1; }

.dia-face > * { filter: drop-shadow(0 0 22px rgba(120,210,255,.45)); }
.dia-rw.charge .dia-face > * { animation: diaGlow .75s ease-in forwards; }
@keyframes diaGlow { to { filter: drop-shadow(0 0 44px rgba(170,230,255,.95)) brightness(1.6); } }
.dia-rw.flip .dia-face > * { animation: diaGlowOff 1s ease-out forwards; }
@keyframes diaGlowOff { 0% { filter: drop-shadow(0 0 44px rgba(170,230,255,.95)) brightness(1.6); } 40% { filter: drop-shadow(0 0 60px rgba(220,245,255,1)) brightness(2.1); } 100% { filter: drop-shadow(0 0 26px rgba(120,210,255,.6)) brightness(1); } }
.dia-face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; }
.dia-face.front { transform: rotateY(180deg); }
.dia-face.back { transform: rotateY(0deg); }
.dia-face.back > * { box-shadow: 0 0 0 1px rgba(225,242,255,.6), 0 14px 34px rgba(0,0,0,.6); }
.dia-sheen { position: absolute; inset: -2px; border-radius: 10px; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 46%, rgba(190,235,255,.7) 50%, rgba(255,255,255,.55) 54%, transparent 70%); background-size: 260% 100%; background-position: 120% 0; }
.dia-rw.drop .dia-flip { animation: diaDrop 1.45s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes diaDrop { 0% { transform: translateY(-70vh) rotateX(-28deg) rotateZ(-9deg) scale(.6); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(10px) rotateX(5deg) rotateZ(1.5deg) scale(1.01); } 100% { transform: translateY(0) rotateX(0) rotateZ(0) scale(1); opacity: 1; } }
.dia-rw.charge .dia-flip { animation: diaCharge .75s ease-in forwards; }
@keyframes diaCharge { 0% { transform: none; } 100% { transform: scale(1.04) translateY(-4px); } }
.dia-rw.flip .dia-flip { animation: diaFlip 1s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes diaFlip { 0% { transform: scale(1.04) translateY(-4px) rotateY(0); } 45% { transform: scale(1.14) translateY(-10px) rotateY(88deg); } 100% { transform: scale(1) translateY(0) rotateY(180deg); } }
.dia-rw.idle .dia-flip { animation: diaFloat 4.6s ease-in-out infinite; }
@keyframes diaFloat { 0%, 100% { transform: rotateY(180deg) rotateX(0) translateY(0); } 25% { transform: rotateY(186deg) rotateX(2.5deg) translateY(-7px); } 50% { transform: rotateY(180deg) rotateX(0) translateY(-2px); } 75% { transform: rotateY(174deg) rotateX(-2.5deg) translateY(-8px); } }
.dia-rw.idle .dia-sheen { animation: diaSheen 3.4s ease-in-out .4s infinite; transform: rotateY(180deg) translateZ(1px); }
@keyframes diaSheen { 0% { opacity: 0; background-position: 120% 0; } 10% { opacity: .9; } 45% { opacity: 0; background-position: -20% 0; } 100% { opacity: 0; background-position: -20% 0; } }
.dia-txt { position: relative; text-align: center; color: #d6efff; min-height: 64px; }
.dia-txt b { display: block; margin: 0 0 6px; font: 900 15px var(--font-s); letter-spacing: .32em; color: #9fd8ff; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.dia-rw.idle .dia-txt b { opacity: 1; transform: none; }
.dia-name { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; font: 900 28px var(--font-s); letter-spacing: .06em; }
.dia-name i { display: inline-block; font-style: normal; opacity: 0; transform: translateY(18px) scale(.6); background: var(--ice-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 8px rgba(110,200,255,.55)); }
.dia-rw.idle .dia-name i { animation: diaChar .55s cubic-bezier(.2,1.5,.4,1) calc(.15s + var(--i) * 70ms) forwards; }
@keyframes diaChar { 60% { opacity: 1; transform: translateY(-4px) scale(1.12); } 100% { opacity: 1; transform: none; } }
.dia-name em, .dia-name u { margin-left: 8px; opacity: 0; font-style: normal; text-decoration: none; }
.dia-name em { padding: 2px 7px; border-radius: 5px; font: 800 12px var(--font-n); color: #062033; background: #bdf0ff; box-shadow: 0 0 12px rgba(160,225,255,.8); transform: scale(2.4) rotate(-14deg); }
.dia-name u { font: 800 16px var(--font-n); color: #bdf0ff; transform: scale(1.6); }
.dia-rw.idle .dia-name em, .dia-rw.idle .dia-name u { animation: diaStamp .45s cubic-bezier(.3,1.6,.5,1) .85s forwards; }
@keyframes diaStamp { 70% { opacity: 1; transform: scale(.92) rotate(-6deg); } 100% { opacity: 1; transform: scale(1) rotate(-6deg); } }
.dia-ok { position: relative; min-width: 160px; opacity: 0; transform: translateY(10px); transition: opacity .4s 1.3s, transform .4s 1.3s; }
.dia-rw.idle .dia-ok { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dia-dust, .dia-rays { display: none; } .dia-rw .dia-flip, .dia-rw .dia-sheen, .dia-name i, .dia-name em, .dia-name u { animation-duration: .01s !important; animation-delay: 0s !important; } }

.bt-prep { position: absolute; inset: 0; z-index: 40; overflow: auto; -webkit-overflow-scrolling: touch; color: #fff; padding-bottom: calc(24px + var(--sab, 0px)); opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .35s cubic-bezier(.2,.9,.3,1); }
.bt-prep.on { opacity: 1; transform: none; }
.bt-prep .bt-bg { position: fixed; inset: 0; z-index: -1; }
.bt-prep .close-x { position: fixed; }
.pp-h { padding: calc(18px + var(--sat)) 64px 10px 16px; }
.pp-h small { display: block; font: 700 12px var(--font-d); letter-spacing: .2em; color: #ff8fb0; }
.pp-h h2 { margin: 2px 0 4px; font: 900 26px var(--font-d); letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-rk { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 800 12px var(--font-n); letter-spacing: .06em; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.pp-deck { padding: 14px; }
.pp-deck .dk-slot-in { cursor: default; }
.pp-me { margin: 0 16px 12px; padding: 10px 12px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.pp-me b { grid-row: 1 / 3; font: 800 13px var(--font-d); letter-spacing: .1em; color: var(--mut); writing-mode: vertical-rl; text-orientation: upright; }
.pp-me-c { display: flex; align-items: flex-end; gap: 5px; min-height: 60px; }
.pp-me-c .card { flex: none; }
.pp-me small { font: 600 11px var(--font-d); color: var(--mut); }
.pp-me.warn { border-color: rgba(255,140,170,.4); background: rgba(251,114,153,.08); } .pp-me.warn small { color: #ff8fb0; }
.pp-me.warn .pp-me-c { min-height: 0; }
.pp-acts { margin: 0 16px; }
.pp-go { background: linear-gradient(180deg, #ff8fb0, #fb7299 55%, #e4557f); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 0 0 1px rgba(251,114,153,.35), 0 10px 22px rgba(251,114,153,.35); }
.pp-go:disabled { opacity: .5; filter: saturate(.3); }
.pp-ret { margin: 0 16px 12px; grid-template-columns: 1fr; }
.pp-back { background: linear-gradient(180deg, rgba(251,114,153,.35), rgba(251,114,153,.18)); border: 1px solid rgba(255,140,170,.5); }

html, body { overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; width: 100%; }
.screen.scroll, .sheet, .bt-prep, .mg-list, .fd-list { overscroll-behavior: contain; }

.screen:not(.on) *, .screen:not(.on) *::before, .screen:not(.on) *::after { animation-play-state: paused !important; }

.scrolling *, .scrolling *::before, .scrolling *::after { animation-play-state: paused !important; }

html.touch .page-h { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(180deg, rgba(9,9,15,.97) 62%, rgba(9,9,15,0)); }
html.touch .screen.scroll .chips, html.touch .screen.scroll .glass, html.touch .screen.scroll .buy2, html.touch .screen.scroll .ghost-btn { backdrop-filter: none; -webkit-backdrop-filter: none; }

.sheet.qz-sheet { display: block; }
.sheet.qz-sheet > .qz { min-height: 100%; overflow: visible; overflow-x: clip; }
.qz-aura { max-width: 100vw; }

html.lowfx #app::after { display: none; }
html.lowfx #sky .sky-neb, html.lowfx #sky .sky-shade, html.lowfx #sky .sky-near { display: none; }
html.lowfx #sky .sky-far { will-change: auto; transform: none !important; left: 0; top: 0; width: 100%; height: 100%; }
html.lowfx *, html.lowfx *::before, html.lowfx *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.lowfx .modal-bg { background: rgba(4,4,8,.92); }
html.lowfx .loading { background: rgba(4,4,8,.86); }
html.lowfx .tabbar, html.lowfx .glass, html.lowfx .chips, html.lowfx .toast, html.lowfx .coins, html.lowfx .ibtn, html.lowfx .close-x { background-color: rgba(20,20,28,.9); }
html.lowfx .home-car .slot { will-change: auto; }

html.lowfx .screen.scroll .card *, html.lowfx .screen.scroll .card *::before, html.lowfx .screen.scroll .card *::after,
html.lowfx .screen.scroll .card::before, html.lowfx .screen.scroll .card::after, html.lowfx .screen.scroll .card,
html.lowfx .screen.scroll .cell *, html.lowfx .screen.scroll .cell *::before, html.lowfx .screen.scroll .cell *::after { animation-play-state: paused !important; }

#col-filter.years { touch-action: pan-x pan-y; }
html.touch .spin3d { touch-action: pan-y; }

html.lowfx #sky > * { -webkit-mask: none !important; mask: none !important; }
html.lowfx #sky::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
html.lowfx #sky[data-mode="home"]::after { background: linear-gradient(180deg, transparent 0, transparent 30%, rgba(1,1,2,.45) 46%, rgba(1,1,2,.82) 60%, #010102 74%); }
html.lowfx #sky[data-mode="space"]::after { background: linear-gradient(180deg, transparent 0, transparent 42%, rgba(1,1,2,.5) 60%, rgba(1,1,2,.85) 72%, #010102 84%); }

#col-filter.years { position: relative; z-index: 1; }

html.lowfx #app.in-bt > #sky, html.lowfx #app.in-bt > .screen, html.lowfx #app.in-bt > #gl { visibility: hidden; }

html.lowfx .rv-halo, html.lowfx .rv-pool { filter: none; mix-blend-mode: normal; }
html.lowfx .rv-stack .slot { will-change: auto; }

html.lowfx .mg-list .card *, html.lowfx .mg-list .card *::before, html.lowfx .mg-list .card *::after { animation-play-state: paused !important; }
html.lowfx .mg-cell.lit .mg-card { filter: none; }

html.lowfx .rv-side:not(.open) { display: none; }

html.calm #sky .sky-neb, html.calm #sky .sky-shade, html.calm #sky .sky-near { display: none; }
html.calm #sky .sky-far { will-change: auto; transform: none !important; left: 0; top: 0; width: 100%; height: 100%; }
html.calm #sky > * { -webkit-mask: none !important; mask: none !important; }
html.calm *, html.calm *::before, html.calm *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.calm .modal-bg { background: rgba(4,4,8,.92); }
html.calm #app::after { display: none; }
html.calm .rv-stack .slot { will-change: auto; }
html.calm .rv-halo, html.calm .rv-pool { filter: none; }
html.calm .rv-side:not(.open) { display: none; }

.screen.scroll, .sheet, .mg-list, .fd-list { overscroll-behavior: contain; }
html.ios body { position: fixed; width: 100%; }

@supports (overflow: clip) {
  #app { overflow: clip; }
  html.touch body { overflow: clip; }
}

html.touch, html.touch body, html.touch #app, html.touch .tabbar, html.touch .screen:not(.scroll) { touch-action: none; }

html.touch .fd-list { touch-action: none; }

html.touch #col-grid .cell *, html.touch #col-grid .cell *::before, html.touch #col-grid .cell *::after { animation: none !important; }
html.touch #app::after { display: none; }
html.touch .bt-beam { display: none; }
html.touch .bt-spot { animation: none; filter: blur(4px); }
html.touch .bt-u.ready::after { animation: none; box-shadow: inset 0 0 0 2px #fff, 0 0 14px var(--ac), 0 10px 24px rgba(0,0,0,.6); }

.ice-text { background: var(--ice-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 10px rgba(140,210,255,.75)) drop-shadow(0 2px 0 rgba(0,20,40,.7)); }
.cine-rib.ice { color: #0c2236; background: linear-gradient(180deg, #ffffff 0%, #d4f1ff 45%, #8fd0f4 100%); box-shadow: 0 0 16px rgba(150,220,255,.65), inset 0 1px 0 #fff; }
.cine-plate.ice .cine-pname { background: var(--ice-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; filter: drop-shadow(0 0 12px rgba(140,210,255,.8)) drop-shadow(0 2px 0 rgba(0,20,40,.75)); }
.cine-plate.ice .cine-pno { color: #cdeeff; }
.cine-ghalo.ice { background: radial-gradient(closest-side, rgba(225,246,255,.5), rgba(120,200,255,.18) 45%, transparent 78%); }
.cine-aura.ice i { background: repeating-conic-gradient(from 0deg, transparent 0deg 8deg, rgba(200,240,255,.55) 10deg, transparent 12deg 18deg, rgba(255,255,255,.3) 20deg, transparent 22.5deg); }
.cine-aura.ice i + i { background: repeating-conic-gradient(from 7deg, transparent 0deg 12deg, rgba(190,160,255,.3) 13.5deg, transparent 15deg 30deg); }
.cine-aura.ice b { background: radial-gradient(closest-side, #eaf8ff, rgba(160,220,255,.4) 50%, transparent); }
.cine-flip > .cback.ice, .cine-flip > .ice { box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 0 30px 4px rgba(150,220,255,.55); }

.cslab-back.ice { background: var(--ice-shell), linear-gradient(180deg, #0f2238, #060f18); box-shadow: inset 0 0 0 1px rgba(200,240,255,.25), 0 24px 40px -12px rgba(0,0,0,.9); }
.cslab-front.ice { border: 0; background: none; box-shadow: inset 0 0 0 4px rgba(0,0,0,.35), inset 0 0 0 5px rgba(160,220,255,.35); }
.cslab-front.ice::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: var(--ice-bevel);
  -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);
}
.cslab-front.ice.lit { box-shadow: inset 0 0 0 4px rgba(0,0,0,.35), inset 0 0 0 5px rgba(160,220,255,.45), 0 0 30px -6px rgba(140,210,255,.6), 0 0 90px -24px rgba(140,210,255,.55); }
.cslab-front.ice.shine::before { animation: gildIgnite 1.1s ease-out; }
.cslab-front.ice .cslab-lbl { position: relative; border: 1.5px solid rgba(255,255,255,.95); color: #3d6b8c;
  background: repeating-linear-gradient(120deg, rgba(180,230,255,.08) 0 2px, transparent 2px 7px) padding-box, linear-gradient(180deg, #ffffff 0%, #e6f6ff 48%, #d0ecff 52%, #f4fbff 100%) padding-box;
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(0,0,0,.5); }
.cslab-front.ice .cl-l b, .cslab-front.ice .cl-r em { background: linear-gradient(180deg, #17466f 0%, #2a76ad 48%, #3f93cf 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: none; }
.cslab-front.ice .cl-l b { font-family: var(--font-s); font-weight: 900; letter-spacing: .06em; }
.cslab-front.ice .cl-r em { font-family: var(--font-lux); font-weight: 700; letter-spacing: .04em; }
.cslab-front.ice .cl-l span, .cslab-front.ice .cl-r span { color: #4a7fa3; font-family: var(--font-s); font-weight: 600; letter-spacing: .18em; }

.dias { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px 0 9px; border-radius: 17px; background: rgba(0,0,0,.45); border: 1px solid rgba(150,215,255,.35); font: 700 17px var(--font-n); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #dff4ff; box-shadow: inset 0 0 12px -4px rgba(120,210,255,.35); }
.dia-ic { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; flex: none;
  background: linear-gradient(135deg, #ffffff 0%, #d7f4ff 28%, #6fd3ff 52%, #2a76ad 78%, #9fd8ff 100%);
  clip-path: polygon(22% 0, 78% 0, 100% 34%, 50% 100%, 0 34%); filter: drop-shadow(0 0 4px rgba(130,215,255,.85)); }
.ar-boss { border-color: rgba(255,210,80,.25); }
.ar-boss-list { display: grid; gap: 8px; }
.ar-bs { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 14px; text-align: left; color: #eee; background: var(--streak), var(--lacq); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 6px 14px -8px rgba(0,0,0,.8); }
.ar-bs:active { transform: translateY(1px); }
.ar-bs.done { border-color: rgba(120,220,160,.35); }
.ar-bs-c { width: 44px; height: 62px; flex: none; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.06); }
.ar-bs-c .card { --cw: 44px !important; width: 44px; } .ar-bs-c .card .face { box-shadow: none; }
.ar-bs-i { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ar-bs-i b { font: 800 15px var(--font-d); letter-spacing: .04em; }
.ar-bs-i em { font: 500 11px var(--font-n); font-style: normal; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-bs-go { font: 300 26px var(--font-n); font-style: normal; color: var(--mut); }
.lp { display: inline-block; padding: 1px 7px; border-radius: 9px; margin-right: 4px; font: 700 10.5px var(--font-n); font-style: normal; background: rgba(255,255,255,.08); color: #aaa; }
.lp.ok { background: rgba(80,200,120,.25); color: #8fe3a8; } .lp.cur { background: rgba(255,210,80,.28); color: #ffd34d; } .lp.lock { opacity: .5; }
.bs-lvs { display: flex; gap: 8px; margin-top: 10px; }
.bs-lv { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; font: 800 14px var(--font-d); color: #ddd; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.bs-lv small { font: 600 10px var(--font-n); color: var(--mut); }
.bs-lv.on { background: rgba(255,210,80,.22); border-color: rgba(255,210,80,.6); color: #ffd34d; }
.bs-lv.ok { color: #8fe3a8; } .bs-lv.ok.on { background: rgba(80,200,120,.22); border-color: rgba(120,220,160,.6); }
.bs-lv:disabled { opacity: .45; }
.bs-body .dk-hst span:last-child { color: #ffd34d; }
.ar-shop .ar-dia-c { position: relative; padding-bottom: 26px; }
.ar-dia-n { position: absolute; top: 2px; right: 2px; padding: 0 5px; border-radius: 8px; font: 700 10px var(--font-n); font-style: normal; color: #0c2236; background: linear-gradient(180deg, #fff, #bfeeff); }
.ar-buy { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 11px; font: 700 12px var(--font-n); color: #0c2236; background: linear-gradient(180deg, #ffffff, #cdeeff 60%, #8fd0f4); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.ar-buy.poor { filter: saturate(.3); opacity: .7; }
.ar-dia-bal { color: #dff4ff; }
.bt-rw { margin: 6px 0 2px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.bt-rw > b { display: block; font: 800 12px var(--font-d); color: #ffd34d; margin-bottom: 6px; letter-spacing: .06em; }
.bt-rw-l { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.bt-rw-c { display: inline-block; width: 56px; } .bt-rw-c .card { --cw: 56px !important; width: 56px; }
.bt-rw-t { display: inline-flex; align-items: center; gap: 4px; font: 800 15px var(--font-n); color: #fff; }
.ar-shop .ar-dia-c:not(.got) .card { filter: grayscale(.35) brightness(.72); }
.cback.mystery-ice { animation: mysIce 1.6s ease-in-out infinite; box-shadow: 0 0 0 1px rgba(200,240,255,.6), 0 0 28px rgba(120,210,255,.55), 0 0 70px rgba(80,180,255,.3); }
@keyframes mysIce { 0%, 100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(-4px); filter: brightness(1.18); } }

.in-bt #app::after { display: none; }
.bt-bg::before { mix-blend-mode: normal; opacity: .13; }
.bt-lines .glow { filter: none; stroke-width: 13; opacity: .22; }
.bt-cd, .bt-orbs { will-change: transform; }

.bt-spot { filter: blur(4px); will-change: transform; }
.bt-beam { filter: blur(14px); }
.bt-stage::after { background-size: 100% 100%; width: 240%; left: -70%; background-position: 0 0; animation: bt-sheen2 6s ease-in-out infinite; will-change: transform; }
@keyframes bt-sheen2 { 0% { transform: translateX(28%); } 100% { transform: translateX(-28%); } }
.bt-crowd::after { mix-blend-mode: normal; opacity: .55; }
.bt-u.ulted .bt-pic { animation: none; box-shadow: 0 0 18px var(--ac), 0 0 0 2px color-mix(in srgb, var(--ac) 70%, #fff); }
.bt-stage { overflow: hidden; }

#app.in-bt .screen *, #app.in-bt .screen *::before, #app.in-bt .screen *::after { animation-play-state: paused !important; }
@container (max-width: 90px) {
  .card.ic .c-glints { display: none; }
  .card .c-prism, .card .gf-lit, .card .gf-dust, .card .c-shine, .card .gf-rim, .card .fx-rim, .card.ic .face { animation: none !important; }
}
@keyframes bt-blinkop { from { opacity: .5; } to { opacity: 1; } }
.bt-u.ready .wg-face { animation: none; box-shadow: 0 0 0 1.5px #fff, 0 0 12px var(--ac), 0 0 26px color-mix(in srgb, var(--ac) 60%, transparent); }
.bt-u.wait .bt-cost { animation: bt-blinkop .35s ease-in-out infinite alternate; }
.bt-en.full i.on { animation: bt-blinkop .5s ease-in-out infinite alternate; box-shadow: 0 0 10px #fff; }
.bt-hp.crit i { animation: bt-blinkop .6s ease-in-out infinite alternate; box-shadow: 0 0 10px #fff; }
.bt-clock.storm { animation: bt-blinkop .6s ease-in-out infinite alternate; }
.bt-lines .flow { animation-timing-function: steps(7); }

.bt.dim .bt-ulthint { opacity: 0 !important; animation: none !important; }
.bt.dim .bt-hslot.m.go .bt-u { animation: none !important; }
.bt.dim .bt-hslot.m.go .bt-u::after { animation: none !important; }

.bt-row.m .bt-u, .bt-hslot.m .bt-u { touch-action: none; }
.bt.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.bt.dragging .bt-row.m .bt-u, .bt.dragging .bt-hslot.m .bt-u { cursor: grabbing; }
.bt-u.drag-src { transform: translateY(-6px) scale(1.06); filter: brightness(1.15); z-index: 8; transition: transform .12s; }
.bt-u.drag-src::after { box-shadow: 0 0 0 2px #ffd27a, 0 0 18px #ffd27a, 0 10px 24px rgba(0,0,0,.6); }
.bt-row.e .bt-u.drag-over { transform: scale(1.08); filter: brightness(1.2); z-index: 8; }
.bt-row.e .bt-u.drag-over::after { box-shadow: 0 0 0 2px #ff5c5c, 0 0 20px #ff5c5c, 0 10px 24px rgba(0,0,0,.6); }
.bt.dragging .bt-row.e .bt-u:not(.drag-over) { filter: brightness(.7); }
.bt-dragline { position: absolute; z-index: 30; height: 4px; margin-top: -2px; transform-origin: 0 50%; border-radius: 2px; background: repeating-linear-gradient(90deg, #ffd27a 0 10px, rgba(255,210,122,.25) 10px 16px); box-shadow: 0 0 10px rgba(255,210,122,.7); pointer-events: none; }
.bt-dragline::after { content: ''; position: absolute; right: -4px; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translateY(-50%); background: #ffd27a; box-shadow: 0 0 12px #ffd27a; }
.bt-dragline.ok { background: repeating-linear-gradient(90deg, #ff5c5c 0 10px, rgba(255,92,92,.3) 10px 16px); box-shadow: 0 0 12px rgba(255,92,92,.8); }
.bt-dragline.ok::after { background: #ff5c5c; box-shadow: 0 0 14px #ff5c5c; }
.bt-u.manual .bt-pic::before { content: '🎯'; position: absolute; left: 50%; top: -9px; z-index: 5; transform: translateX(-50%); font-size: 13px; filter: drop-shadow(0 1px 2px #000); pointer-events: none; }

.bt.sea .bt-bg { background: #041a2e; }
.bt.sea .bt-bg::after { display: none; } .bt.sea .bt-bg::before { opacity: .08; }
.bt.sea .bt-stage.t { background-image: linear-gradient(180deg, rgba(120,220,255,.08), rgba(255,255,255,.01)); } .bt.sea .bt-stage.b { background-image: linear-gradient(0deg, rgba(120,220,255,.08), rgba(255,255,255,.01)); }
.bt-sea { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bt-sea > * { position: absolute; }
.bt-sea .sea-far { left: 0; top: 0; width: 100%; height: 100%; }

.bt-sea .sea-ca { left: -12.5%; top: -12.5%; opacity: .22; will-change: transform; }
.bt-sea .sea-ca.a { animation: seaCaA 17s ease-in-out infinite alternate; }
.bt-sea .sea-ca.b { opacity: .14; animation: seaCaB 23s ease-in-out infinite alternate; }
@keyframes seaCaA { from { transform: translate(0, 0); } to { transform: translate(7%, 5%); } }
@keyframes seaCaB { from { transform: translate(6%, 2%); } to { transform: translate(-4%, 7%); } }

.bt-sea .sea-rays { inset: 0; }
.bt-sea .sea-rays .ray { position: absolute; top: -12%; transform-origin: 50% 0; transform: rotate(var(--r)); will-change: transform, opacity; animation: seaRay 12s ease-in-out infinite alternate; }
.bt-sea .sea-rays .r1 { animation-duration: 13s; } .bt-sea .sea-rays .r2 { animation-duration: 10s; animation-delay: -4s; } .bt-sea .sea-rays .r3 { animation-duration: 15s; animation-delay: -7s; } .bt-sea .sea-rays .r4 { animation-duration: 9s; animation-delay: -2s; opacity: .7; }
@keyframes seaRay { from { transform: rotate(calc(var(--r) - 3deg)); opacity: .55; } 50% { opacity: 1; } to { transform: rotate(calc(var(--r) + 3deg)); opacity: .65; } }

.bt-sea .sea-whale { left: 0; top: 14%; width: 100%; height: 22%; animation: seaWhaleX 75s linear infinite; will-change: transform; }
.bt-sea .sea-whale svg { position: absolute; left: 0; top: 0; width: 62%; height: 100%; fill: #8fd6ff; opacity: .13; animation: seaWhaleY 7s ease-in-out infinite alternate; }
@keyframes seaWhaleX { from { transform: translateX(110%); } to { transform: translateX(-70%); } }
@keyframes seaWhaleY { from { transform: translateY(-6px) rotate(-1.5deg); } to { transform: translateY(8px) rotate(1.5deg); } }

.bt-sea .sea-floor { left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(1,8,16,.55) 55%, rgba(0,5,12,.92)); }
.bt-sea .rock { position: absolute; bottom: -4%; border-radius: 50% 50% 30% 30%; background: #02101c; }
.bt-sea .rock.r1 { left: -6%; width: 34%; height: 22%; } .bt-sea .rock.r2 { left: 22%; width: 18%; height: 12%; } .bt-sea .rock.r3 { right: -8%; width: 40%; height: 26%; }
.bt-sea .k { position: absolute; bottom: 0; width: 7%; fill: #03141f; transform-origin: 50% 100%; animation: seaKelp 7s ease-in-out infinite alternate; will-change: transform; }
@keyframes seaKelp { from { transform: skewX(-4deg) rotate(-2deg); } to { transform: skewX(4deg) rotate(2.5deg); } }

.bt-sea .sea-surface { left: 0; top: 0; will-change: transform; animation: seaSurf 11s linear infinite; }
@keyframes seaSurf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bt-sea .sea-live { left: 0; top: 0; width: 100%; height: 100%; }

.bt.sea .bt-vig { background: radial-gradient(ellipse 58% 52% at 50% 50%, transparent 0, rgba(0,8,20,.1) 45%, rgba(0,6,16,.6) 75%, rgba(0,4,12,.92) 100%); }
.bt.sea .bt-ult.bt-ultbg { background: radial-gradient(80% 60% at 50% 50%, rgba(60,180,255,.3), rgba(0,20,50,.78)); }
.bt.sea .bt-clock.storm { color: #9fe8ff; }

.bt-sea .sea-rays.one { left: 0; top: 0; animation: seaRayLow 9s ease-in-out infinite alternate; } @keyframes seaRayLow { from { opacity: .6; } to { opacity: 1; } } .bt-sea.low .sea-ca { opacity: .14; } .bt-sea.low .k { animation: none; } .bt-sea.low .sea-surface { animation-duration: 20s; }
@media (prefers-reduced-motion: reduce) { .bt-sea * { animation: none !important; } }

.ar-tower { border-color: rgba(255,210,80,.25); }
.ar-tower.on { border-color: rgba(120,220,255,.35); }
.tw-desc { margin: 4px 0 10px; font: 500 12px/1.6 var(--font-n); color: var(--mut); }
.tw-go { width: 100%; }
.tw-roster { display: flex; gap: 6px; justify-content: space-between; margin: 6px 0 8px; }
.tw-m { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tw-m .tw-mc .card { --cw: 48px !important; width: 48px; } .tw-m.hero .tw-mc .card { --cw: 56px !important; width: 56px; } .tw-m .card .face { box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.tw-hp { width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.tw-hp i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3ddc84, #9ef5c0); }
.tw-hp.low i { background: linear-gradient(90deg, #ff5c5c, #ffa98a); }
.tw-m small { font: 700 10px var(--font-d); color: var(--mut); white-space: nowrap; }
.tw-bench { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; } .tw-bench b { font: 700 11px var(--font-d); color: #9fe8ff; margin-right: 2px; }
.tw-b .card { --cw: 40px !important; width: 40px; }
.tw-sum { font: 600 11px var(--font-d); color: var(--mut); margin-bottom: 8px; }
.pp-me .tw-roster { margin-top: 8px; } .pp-me .tw-bench { margin-top: 6px; }
.bt-u .bt-skill { position: absolute; left: 4px; bottom: calc(var(--st) + 4px); z-index: 4; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 900 9px var(--font-d); color: #06321c; background: linear-gradient(180deg, #b9f5d3, #3ddc84); box-shadow: 0 0 8px rgba(61,220,132,.6); pointer-events: none; }
.bt-u.sub-in { animation: bt-subin .5s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes bt-subin { from { transform: translateY(40px) scale(.6); opacity: 0; filter: brightness(2); } to { transform: none; opacity: 1; filter: none; } }
.tw-rw small { display: block; margin-top: 4px; color: var(--mut); font: 500 11px var(--font-n); }
.bt-rw-t { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font: 800 12px var(--font-d); color: #ffd27a; background: rgba(255,210,122,.14); } .bt-rw-t.dia { color: #9fe8ff; background: rgba(159,232,255,.14); }
.tw-pick { margin-top: 10px; } .tw-pick > b { display: block; font: 800 12px var(--font-d); color: #9fe8ff; margin-bottom: 6px; }
.tw-pick-l { display: flex; gap: 8px; justify-content: center; }
.tw-pc { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #eee; }
.tw-pc .card { --cw: 64px !important; width: 64px; } .tw-pc small { font: 700 10px var(--font-d); max-width: 72px; text-align: center; line-height: 1.3; }
.tw-pc:disabled { opacity: .45; } .tw-pc.on { opacity: 1; border-color: #3ddc84; background: rgba(61,220,132,.16); box-shadow: 0 0 14px rgba(61,220,132,.4); }

html.lowfx .bt .bt-pic { animation: none !important; }
html.lowfx .bt .bt-lines path { animation: none !important; }
html.lowfx .bt .bt-cd, html.lowfx .bt .bt-orbs, html.lowfx .bt .bt-spot { will-change: auto !important; }
html.lowfx .bt .bt-cd i { transition: none !important; }
html.lowfx .bt .bt-cost, html.lowfx .bt .bt-hp i, html.lowfx .bt .bt-en i, html.lowfx .bt .bt-clock { animation: none !important; }
html.lowfx .bt .bt-spotf { display: none; }
.pp-me.tw { display: block; } .pp-me.tw > b { writing-mode: horizontal-tb; text-orientation: mixed; display: block; margin-bottom: 4px; }

.tw-route .tw-rt-tip { text-align: center; font: 700 12px var(--font-d); color: rgba(255,255,255,.7); margin: 2px 0 10px; }
.tw-rts { display: flex; gap: 8px; justify-content: center; padding: 0 12px; }
.tw-rt { flex: 1 1 0; max-width: 118px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tw-rt-in { position: relative; width: 100%; height: 236px; }
.tw-rt-f.bk { transition: transform .22s ease-in var(--d, 0s); } .tw-rts.open .tw-rt-f.bk { transform: scaleX(0); pointer-events: none; }
.tw-rt-f.fr { transform: scaleX(0); transition: transform .3s cubic-bezier(.3,1.4,.5,1) calc(var(--d, 0s) + .22s); } .tw-rts.open .tw-rt-f.fr { transform: none; }
.tw-rt-f { position: absolute; inset: 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; box-sizing: border-box; }
.tw-rt-f.bk { background: linear-gradient(160deg, #2a2347, #15122a); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 6px 18px rgba(0,0,0,.4), inset 0 0 18px rgba(159,232,255,.12); cursor: pointer; }
.tw-rt-f.bk > b { position: absolute; font: 900 34px var(--font-d); color: #fff; text-shadow: 0 0 14px #9fe8ff, 0 2px 0 rgba(0,0,0,.4); }
.tw-rt-bc { position: relative; width: 92px; height: 129px; opacity: .92; pointer-events: none; } .tw-rt-bc > * { position: absolute !important; inset: 0; margin: 0 !important; }
.tw-rts:not(.open) .tw-rt-f.bk { animation: tw-rt-bob 2.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes tw-rt-bob { 50% { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 0 22px rgba(159,232,255,.25); } }
.tw-rt-f.fr { background: linear-gradient(170deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.16); }
.tw-rt.k-elite .tw-rt-f.fr { border-color: rgba(255,120,120,.6); background: linear-gradient(170deg, rgba(255,90,90,.22), rgba(60,10,20,.3)); box-shadow: 0 0 16px rgba(255,90,90,.25); }
.tw-rt.k-rest .tw-rt-f.fr { border-color: rgba(110,255,170,.55); background: linear-gradient(170deg, rgba(80,230,150,.2), rgba(10,50,30,.3)); box-shadow: 0 0 16px rgba(80,230,150,.22); }
.tw-rt-tag { font: 900 11px var(--font-d); font-style: normal; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.14); }
.k-elite .tw-rt-tag { background: #ff6b6b; color: #2a0a0a; } .k-rest .tw-rt-tag { background: #4fe39a; color: #062a17; }
.tw-rt-c .card { --cw: 84px !important; width: 84px; }
.tw-rt-f.fr > b { font: 800 11px var(--font-d); text-align: center; line-height: 1.25; }
.tw-rt-h { font: 700 10px var(--font-d); color: rgba(255,255,255,.6); } .tw-rt-h.good { color: #7dffb2; } .tw-rt-h.bad { color: #ff9a9a; }
.tw-rt-d { font: 700 9.5px var(--font-d); color: rgba(255,255,255,.75); text-align: center; line-height: 1.3; }
.tw-rt-m { display: flex; align-items: center; gap: 3px; font: 800 10px var(--font-d); color: #ffd27a; } .tw-rt-m .bt-at { width: 14px; height: 14px; }
.tw-rt-go { width: 100%; min-height: 36px; opacity: 0; pointer-events: none; transition: opacity .3s calc(var(--d) + .5s); }
.tw-rts.open .tw-rt-go { opacity: 1; pointer-events: auto; }
.tw-route .pp-acts { margin-top: 14px; }
html.lowfx .tw-rts:not(.open) .tw-rt-f.bk { animation: none; }

.tw-rls { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .tw-rls > b { font: 800 11px var(--font-d); color: #ffd27a; margin-right: 4px; }
.tw-rl-i { width: 28px; height: 28px; display: inline-block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); cursor: pointer; } .tw-rl-i svg, .tw-rl i svg { width: 100%; height: 100%; display: block; }
.tw-relic-pick > b { display: block; font: 800 12px var(--font-d); color: #ffd27a; margin-bottom: 8px; }
.tw-rl-l { display: flex; flex-direction: column; gap: 8px; }
.tw-rl { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 14px; background: linear-gradient(170deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid rgba(255,210,122,.3); color: #fff; animation: tw-rl-in .4s cubic-bezier(.3,1.4,.5,1) both; }
.tw-rl:nth-child(2) { animation-delay: .08s; } .tw-rl:nth-child(3) { animation-delay: .16s; } .tw-rl:nth-child(4) { animation-delay: .24s; }
.tw-rl i { grid-row: span 2; width: 56px; height: 56px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.tw-rl > b { font: 900 14px var(--font-d); } .tw-rl > small { font: 700 11px var(--font-d); color: rgba(255,255,255,.75); line-height: 1.35; }
.tw-rl:active { transform: scale(.97); border-color: #ffd27a; }
@keyframes tw-rl-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.tw-carry { margin: 8px 16px 0; padding: 8px 12px; border-radius: 12px; background: rgba(255,90,90,.14); border: 1px solid rgba(255,120,120,.35); font: 700 12px var(--font-d); color: #ffb3b3; }
.tw-mybonds { margin-top: 8px; }
.tw-rt-h .bt-at { width: 13px; height: 13px; margin-right: 2px; vertical-align: -2px; }
.bt-rg { position: absolute; left: 50%; top: calc(var(--mw) * 1.4 - 14px); transform: translateX(-50%); z-index: 5; padding: 0 6px; border-radius: 7px; background: linear-gradient(180deg, #ff5a4a, #c81e1e); color: #fff; font: 900 10px/16px var(--font-d); font-style: normal; box-shadow: 0 0 10px rgba(255,60,60,.8); pointer-events: none; display: none; }
.bt-u.hero .bt-rg { top: calc(var(--hw) * 1.4 - 16px); }
.bt-u.rage .bt-rg { display: block; } .bt-u.rage.ko .bt-rg { display: none; }
.bt-u.rage .bt-hp i { background: linear-gradient(90deg, #ff3b3b, #ff8a4a) !important; }
html:not(.lowfx) .bt-u.rage .bt-rg { animation: tw-rage .6s ease-in-out infinite alternate; }
@keyframes tw-rage { to { box-shadow: 0 0 18px rgba(255,80,60,1); transform: translateX(-50%) scale(1.08); } }
.pp-me.tw .dk-bonds > b, .pp-me.tw .tw-rls > b { writing-mode: horizontal-tb; white-space: nowrap; }
.pp-me.tw .dk-bonds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bt-ls { position: absolute; left: 50%; top: calc(var(--hw) * 1.4 - 22px); transform: translateX(-50%); z-index: 5; padding: 0 8px; border-radius: 8px; background: linear-gradient(180deg, #ff7a5a, #d0242a); color: #fff; font: 900 11px/18px var(--font-d); font-style: normal; white-space: nowrap; box-shadow: 0 0 14px rgba(255,70,60,.8); pointer-events: none; }
.bt-u.laststand.ko .bt-ls { display: none; }

.bt-u { --st: 20px; } .bt-u.hero { --st: 22px; }
.bt-st { padding: 0 3px; gap: 0; }
.bt-hp { flex: 1; height: 14px; border-radius: 7px; background: rgba(0,0,0,.74); box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.16); display: flex; align-items: center; }
.bt-u.hero .bt-hp { height: 16px; border-radius: 8px; }
.bt-hp i { position: absolute; left: 0; top: 0; bottom: 0; height: auto; width: 100%; border-radius: inherit; background: linear-gradient(180deg, #4ae89a, #19a85f); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.bt-hp.low i { background: linear-gradient(180deg, #ff6a74, #b8102a); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.bt-hp::after { background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(0,0,0,.35) calc(25% - 1px) 25%); }
.bt-hpn, .bt-u.hero .bt-hpn { position: relative; z-index: 1; flex: 1; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none !important; box-shadow: none; text-align: center; font: 900 11px/1 var(--font-n); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.8); }
.bt-u.hero .bt-hpn { font-size: 12px; }

.bt-u .bt-at { left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; --rim: #cfd6e4; overflow: visible;
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--ac) 50%, #fff) 0, var(--ac) 40%, color-mix(in srgb, var(--ac) 55%, #000) 100%);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--rim) 70%, #000), 0 0 0 3px var(--rim), 0 0 0 3.5px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.45); }
.bt-u .bt-at::before { content: ''; position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,0) 55%); pointer-events: none; }
.bt-u .bt-at svg { position: relative; width: 14px; height: 14px; }
.bt-u.hero .bt-at { width: 28px; height: 28px; left: 4px; top: 4px; } .bt-u.hero .bt-at svg { width: 17px; height: 17px; }
.bt-u.r-common .bt-at { --rim: #d4dbe8; }
.bt-u.r-pixel .bt-at { --rim: #7dffb0; border-radius: 4px; }
.bt-u.r-gold .bt-at { --rim: #ffd27a; }
.bt-u.r-gold2 .bt-at { --rim: #ffe9b3; }
.bt-u.r-rainbow .bt-at { --rim: #ffd1f0; }
.bt-u.r-diamond .bt-at { --rim: #d6f4ff; }

.ar-rk-u { display: inline; font: 800 14px var(--font-d); letter-spacing: .1em; margin-left: 4px; }
.ar-shopbtn { border-color: rgba(150,215,255,.45); background: radial-gradient(120% 90% at 50% 0%, rgba(110,200,255,.2), transparent 70%), var(--lacq); }
.ar-shopbtn span { color: #dff4ff; }
.ar-shop-sheet .bt-pick-h small { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.ar-shop-sheet { background: rgba(6,6,12,.975); }
.ar-shop-body { flex: 1; overflow-y: auto; padding: 4px 16px calc(20px + var(--sab)); }
.ar-shop-sheet .ar-dia-row { grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
.ar-shop-sheet .ar-dia-c { position: relative; padding-bottom: 26px; }
.ar-shop-sheet .ar-dia-c:not(.got) .card { filter: grayscale(.35) brightness(.72); }
.ar-shop-sheet .ar-dia-note { margin-top: 12px; }
.tw-rules { margin: -4px 0 10px; } .tw-rules summary { cursor: pointer; font: 700 11px var(--font-d); color: #9fe8ff; list-style: none; } .tw-rules summary::-webkit-details-marker { display: none; } .tw-rules summary::before { content: '▸ '; } .tw-rules[open] summary::before { content: '▾ '; }
.tw-rules p { margin: 6px 0 0; font: 500 11px/1.6 var(--font-n); color: var(--mut); }

.tw-team { display: flex; align-items: flex-end; justify-content: center; gap: 7px; margin: 6px 0 6px; }
.tw-u { position: relative; flex: none; }
.tw-u .tw-uc .card { --cw: 62px !important; width: 62px; } .tw-u.hero .tw-uc .card { --cw: 78px !important; width: 78px; }
.tw-u .card .face { box-shadow: 0 4px 10px rgba(0,0,0,.55); }
.tw-ubar { position: absolute; left: 4px; right: 4px; bottom: 5px; height: 12px; border-radius: 6px; background: rgba(0,0,0,.78); box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 1px 3px rgba(0,0,0,.7); overflow: hidden; }
.tw-ubar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(180deg, #4ae89a, #19a85f); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.tw-u.mid .tw-ubar i { background: linear-gradient(180deg, #ffd45a, #d1900f); }
.tw-u.low .tw-ubar i { background: linear-gradient(180deg, #ff6a74, #b8102a); }
.tw-ubar em { position: absolute; inset: 0; display: grid; place-items: center; font: 900 9px/1 var(--font-n); font-style: normal; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.tw-u.hero .tw-ubar { height: 14px; bottom: 6px; } .tw-u.hero .tw-ubar em { font-size: 10px; }

.tw-prep .pp-h h2 { font-size: 24px; }
.tw-en, .tw-mine { margin: 0 16px; padding: 12px; border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.45); }
.tw-en { background: linear-gradient(180deg, rgba(251,114,153,.14), rgba(255,255,255,.03)); border: 1px solid rgba(251,114,153,.4); }
.tw-mine { margin-bottom: 12px; background: linear-gradient(180deg, rgba(0,174,236,.14), rgba(255,255,255,.03)); border: 1px solid rgba(0,174,236,.45); }
.tw-en-top { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: start; }
.tw-en-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tw-en .dk-name { display: flex; align-items: center; gap: 6px; } .tw-en .dk-name b { font: 900 17px var(--font-d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-en-st { display: flex; gap: 14px; } .tw-en-st span { font: 900 24px/1 var(--font-n); color: #fff; } .tw-en-st small { font: 700 11px var(--font-n); color: var(--mut); margin-right: 4px; vertical-align: 4px; }
.tw-rwc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .tw-rwc > b { width: 100%; font: 800 10px var(--font-d); letter-spacing: .15em; color: var(--mut); }
.tw-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font: 800 11px var(--font-d); color: #ffd27a; background: rgba(255,210,122,.14); border: 1px solid rgba(255,210,122,.32); white-space: nowrap; }
.tw-chip.dia { color: #9fe8ff; background: rgba(159,232,255,.14); border-color: rgba(159,232,255,.35); }
.tw-en .dk-mins { margin-top: 10px; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tw-en .dk-bonds, .tw-foot .dk-bonds { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; min-height: 0; border: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.tw-en .dk-bonds span, .tw-foot .dk-bonds span { gap: 5px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.12); }
.tw-en .dk-bonds > i, .tw-foot .dk-bonds > i { font: 600 11px var(--font-d); font-style: normal; color: var(--mut); }
.tw-vsmark { position: relative; height: 36px; margin: 2px 16px; display: grid; place-items: center; }
.tw-vsmark::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }
.tw-vsmark i { position: relative; padding: 0 14px; font: 900 18px/30px var(--font-n); font-style: italic; letter-spacing: .1em; color: #fff; border-radius: 999px; background: linear-gradient(180deg, #ff7a9c, #c2184c); box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 18px rgba(251,114,153,.6); transform: skewX(-8deg); }
.tw-mine .tw-team { margin: 0 0 8px; } .tw-mine .tw-carry { margin: 0 0 10px; } .tw-mine .tw-bench { margin: 0 0 8px; }
.tw-foot { display: flex; flex-direction: column; gap: 6px; } .tw-foot .dk-bonds { margin-top: 0; } .tw-foot .tw-rls { margin-top: 0; }

.bt-over.tw-ov { gap: 6px; }
.bt-over.tw-ov > b { font-size: 36px; }
.bt-over.tw-ov > small.tw-ov-sub { font: 700 13px var(--font-d); color: rgba(255,255,255,.82); }
.tw-ov-rw { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tw-ov-rw .tw-chip { font-size: 13px; padding: 4px 12px; }
.bt-over.tw-ov .bt-over-btns { margin-top: 14px; }

.dia-ic { width: 16px; height: 16px; clip-path: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='7,4 25,4 31,12 1,12' fill='%23bfefff'/%3E%3Cpolygon points='7,4 12,12 1,12' fill='%2383dcff'/%3E%3Cpolygon points='25,4 31,12 20,12' fill='%2383dcff'/%3E%3Cpolygon points='7,4 16,4 12,12' fill='%23eafcff'/%3E%3Cpolygon points='16,4 25,4 20,12' fill='%23d8f6ff'/%3E%3Cpolygon points='12,12 20,12 16,4' fill='%23a6e8ff'/%3E%3Cpolygon points='1,12 31,12 16,30' fill='%232fa6ea'/%3E%3Cpolygon points='12,12 20,12 16,30' fill='%2358c6ff'/%3E%3Cpolygon points='1,12 12,12 16,30' fill='%231f86d2'/%3E%3Cpolygon points='20,12 31,12 16,30' fill='%23176cb4'/%3E%3Cpolygon points='7,4 25,4 31,12 16,30 1,12' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 3px rgba(120,210,255,.8)); }
.ar-shop-sheet .bt-pick-h .dia-ic { width: 22px; height: 22px; }
.ar-shop-sheet .ar-dia-row { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; margin: 8px 0 10px; }
.ar-shop-sheet .ar-dia-c { position: relative; width: 100%; padding: 8px 8px 50px; border-radius: 16px; background: linear-gradient(180deg, rgba(120,200,255,.1), rgba(255,255,255,.03)); border: 1px solid rgba(150,215,255,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 18px rgba(0,0,0,.45); display: flex; justify-content: center; }
.ar-shop-sheet .ar-dia-c .card { --cw: 150px !important; width: 150px; }
.ar-shop-sheet .ar-dia-c .card .face { box-shadow: 0 6px 16px rgba(0,0,0,.6); }
.ar-shop-sheet .ar-dia-n { top: 12px; right: 12px; padding: 2px 8px; border-radius: 999px; font: 800 11px var(--font-d); color: #0c2236; background: linear-gradient(180deg, #fff, #bfeeff); box-shadow: 0 2px 6px rgba(0,0,0,.5); z-index: 2; }
.ar-shop-sheet .ar-buy { left: 8px; right: 8px; bottom: 8px; height: 36px; gap: 6px; border-radius: 12px; font: 900 16px/1 var(--font-n); color: #fff; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0,30,90,.7);
  background: linear-gradient(180deg, #6ad8ff 0%, #2b9ae6 55%, #1b6fc4 100%); border: 1px solid rgba(220,245,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(0,40,100,.35), 0 4px 10px rgba(0,0,0,.5), 0 0 12px rgba(90,200,255,.35); }
.ar-shop-sheet .ar-buy .dia-ic { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0,30,90,.6)); }
.ar-shop-sheet .ar-buy small { font: 800 11px var(--font-d); opacity: .9; margin-left: 2px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.4); }
.ar-shop-sheet .ar-buy.poor { filter: none; opacity: 1; background: linear-gradient(180deg, #5b6472, #3a414c); border-color: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 10px rgba(0,0,0,.5); color: rgba(255,255,255,.75); }
.ar-shop-sheet .ar-buy:active { transform: translateY(1px); }

.bt-u .bt-at { width: 27px; height: 27px; left: 3px; top: 3px; border-radius: 50%; background: var(--at-img) center / contain no-repeat; box-shadow: 0 2px 5px rgba(0,0,0,.75); }
.bt-u .bt-at::before, .bt-u .bt-at svg { display: none; }
.bt-u.hero .bt-at { width: 32px; height: 32px; left: 4px; top: 4px; }
.bt-u.r-pixel .bt-at { border-radius: 50%; }
.bt-u.bz .bt-at { --at-img: url(img/ui/at-bz.webp); } .bt-u.gc .bt-at { --at-img: url(img/ui/at-gc.webp); } .bt-u.cs .bt-at { --at-img: url(img/ui/at-cs.webp); } .bt-u.ka .bt-at { --at-img: url(img/ui/at-ka.webp); } .bt-u.db .bt-at { --at-img: url(img/ui/at-db.webp); }

.bt-u { --st: 17px; } .bt-u.hero { --st: 19px; }
.bt-st { gap: 5px; padding: 0 5px 0 4px; background: linear-gradient(180deg, rgba(8,6,10,.55), rgba(8,6,10,.92)); border-top: 1px solid rgba(240,201,138,.35); }
.bt-hp { flex: 1; height: 5px; border-radius: 3px; background: #140c10; box-shadow: 0 0 0 1px #b8834a, 0 0 0 2px rgba(0,0,0,.6), inset 0 1px 1px rgba(0,0,0,.9); display: block; }
.bt-u.hero .bt-hp { height: 6px; }
.bt-hp i { position: absolute; left: 0; top: 0; bottom: 0; height: auto; border-radius: inherit; background: linear-gradient(180deg, #8dffb9 0%, #3ddc84 45%, #159a52 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 4px rgba(61,220,132,.5); }
.bt-hp.low i { background: linear-gradient(180deg, #ffb3a6 0%, #ff5c5c 45%, #b8102a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 4px rgba(255,92,92,.6); }
.bt-hp::after { background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(0,0,0,.5) calc(25% - 1px) 25%); }
.bt-hpn, .bt-u.hero .bt-hpn { position: static; flex: none; min-width: 0; height: auto; padding: 0; background: none !important; box-shadow: none; font: 900 10px/1 var(--font-n); color: #ffe9b3; text-shadow: 0 1px 0 #000, 0 0 3px rgba(0,0,0,.8); }
.bt-u.hero .bt-hpn { font-size: 11px; }
.bt-hp.low ~ .bt-hpn { color: #ffb3a6; }

.dia-ic { width: 18px; height: 18px; vertical-align: -3px; background: url(img/ui/diamond.webp) center / contain no-repeat; clip-path: none; filter: drop-shadow(0 1px 3px rgba(90,170,255,.55)); }

.ar-shopbtn { background: url(img/ui/diamond.webp) 18px center / 36px no-repeat, radial-gradient(120% 90% at 50% 0%, rgba(110,200,255,.2), transparent 70%), var(--lacq); }

.ar-shop-sheet { background: radial-gradient(90% 40% at 50% 0%, rgba(40,90,170,.35), transparent 70%), rgba(5,8,18,.975); }
.ar-shop-sheet .bt-pick-h small { font-size: 12px; } .ar-shop-sheet .bt-pick-h .dia-ic { width: 34px; height: 34px; margin: -6px 2px -6px 0; } .ar-shop-sheet .ar-dia-bal { font: 900 22px/1 var(--font-n); color: #eaf8ff; }
.ar-shop-sheet .ar-dia-c { background: linear-gradient(180deg, rgba(60,120,220,.16), rgba(255,255,255,.03)); border-color: rgba(150,200,255,.3); padding-bottom: 64px; }
.ar-shop-sheet .ar-buy { left: 6px; right: 6px; bottom: 7px; height: 52px; border: 0; border-radius: 0; background: url(img/ui/crystal-btn.webp) center / 100% 100% no-repeat; box-shadow: none; gap: 5px; padding: 0 10px; font: 900 18px/1 var(--font-n); color: #f4fbff; text-shadow: 0 1px 2px rgba(0,20,60,.9), 0 0 8px rgba(120,190,255,.6); filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)); }
.ar-shop-sheet .ar-buy .dia-ic { width: 40px; height: 40px; filter: drop-shadow(0 1px 2px rgba(0,20,60,.7)); margin-left: -4px; }
.ar-shop-sheet .ar-buy small { font: 800 12px var(--font-d); border-left: 1px solid rgba(220,240,255,.55); padding-left: 8px; margin-left: 4px; opacity: 1; }
.ar-shop-sheet .ar-buy.poor { background: url(img/ui/crystal-btn.webp) center / 100% 100% no-repeat; filter: grayscale(.85) brightness(.65) drop-shadow(0 4px 8px rgba(0,0,0,.55)); color: rgba(255,255,255,.8); }
.ar-shop-sheet .ar-buy:active { transform: translateY(1px); filter: brightness(1.15) drop-shadow(0 2px 4px rgba(0,0,0,.55)); }

.bt-rg { display: none !important; }
.bt-u.rage::before { content: ''; position: absolute; left: -5px; right: -5px; top: -9px; bottom: -3px; z-index: 0; border-radius: 10px; pointer-events: none; opacity: .9;
  background: conic-gradient(from 20deg, #ff2a00, #ff8a00 18%, #ffd040 30%, #ff4a00 45%, #ff9a1a 60%, #ff2a00 75%, #ffb040 88%, #ff2a00); filter: blur(5px);
  -webkit-mask: linear-gradient(180deg, #000 0, #000 70%, rgba(0,0,0,.6)); mask: linear-gradient(180deg, #000 0, #000 70%, rgba(0,0,0,.6)); }
.bt-u.rage .bt-pic { box-shadow: 0 0 0 2px #ff6a2a, 0 0 10px 2px rgba(255,90,30,.9), inset 0 0 16px rgba(255,90,30,.6); }
.bt-u.rage.ko::before { display: none; } .bt-u.rage.ko .bt-pic { box-shadow: none; }
html:not(.lowfx) .bt-u.rage::before { animation: tw-flame .32s ease-in-out infinite alternate; }
@keyframes tw-flame { from { transform: scale(1, 1) ; opacity: .75; filter: blur(5px) brightness(1); } to { transform: scale(1.03, 1.06); opacity: 1; filter: blur(4px) brightness(1.25); } }
html.lowfx .bt-u.rage::before { filter: none; opacity: .7; }
.ar-shop-sheet .ar-dia-n { display: none; }
.ar-shop-sheet .ar-buy { padding: 0; gap: 6px; justify-content: center; }
.ar-shop-sheet .ar-buy .dia-ic { width: 26px; height: 26px; margin: 0; }
.ar-shop-sheet .ar-buy b { font: 900 18px/1 var(--font-n); }
.ar-shop-sheet .ar-buy small { padding-left: 8px; margin-left: 2px; }
.ar-shop-sheet .ar-dia-c .card { cursor: pointer; }
.bt-u.rage::before, .bt-u.rage.hero::before { display: block !important; inset: -9px -5px -3px; height: auto; padding: 0; z-index: 0; box-shadow: none; border: 0; }
.bt-u.rage.ko::before, .bt-u.rage.hero.ko::before { display: none !important; }
.ar-shop-sheet { z-index: 44; }

.bt-u.rage::before, .bt-u.rage.hero::before { display: none !important; animation: none; }
.bt-u.rage .bt-pic { box-shadow: none; }

.bt-ls { display: none !important; }
.bt-u.ko .bt-ko { display: none !important; }
.bt-u .bt-at { width: 22px; height: 22px; left: 3px; top: 3px; }
.bt-u.hero .bt-at { width: 26px; height: 26px; left: 4px; top: 4px; }

.bt-u .bt-cost { display: none !important; }

.tw-map .tw-chart { margin: 4px 14px 12px; border-radius: 16px; overflow: hidden; position: relative; border: 1px solid rgba(232,200,120,.35); box-shadow: 0 0 0 3px rgba(20,14,40,.9), 0 0 0 4px rgba(232,200,120,.18), 0 18px 40px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.55);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.9) 0 .8px, transparent 1.6px), radial-gradient(circle at 72% 8%, rgba(255,255,255,.7) 0 .7px, transparent 1.5px), radial-gradient(circle at 88% 30%, rgba(255,255,255,.8) 0 .6px, transparent 1.4px),
    radial-gradient(circle at 10% 42%, rgba(255,255,255,.6) 0 .7px, transparent 1.5px), radial-gradient(circle at 60% 55%, rgba(255,255,255,.8) 0 .8px, transparent 1.6px), radial-gradient(circle at 30% 70%, rgba(255,255,255,.6) 0 .6px, transparent 1.4px),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,.75) 0 .7px, transparent 1.5px), radial-gradient(circle at 45% 90%, rgba(255,255,255,.6) 0 .7px, transparent 1.5px), radial-gradient(circle at 92% 94%, rgba(255,255,255,.7) 0 .6px, transparent 1.4px),
    radial-gradient(ellipse at 50% 0%, rgba(120,90,200,.35), transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(60,120,200,.25), transparent 55%),
    linear-gradient(180deg, #121233 0%, #0d1130 45%, #0a1a38 100%); }
.tw-map .tw-chart::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-radial-gradient(circle at 50% 110%, transparent 0 58px, rgba(232,200,120,.06) 58px 59px); mix-blend-mode: screen; }
.tw-map .tw-chart::after { content: ''; position: absolute; inset: 6px; pointer-events: none; border: 1px solid rgba(232,200,120,.22); border-radius: 12px; }
.tw-sky { display: block; }
.tw-paper { fill: #fff; opacity: .9; }
.tw-band line { stroke: rgba(232,200,120,.28); stroke-width: 1; stroke-dasharray: 2 5; }
.tw-band text { fill: rgba(232,200,120,.6); font: 700 10px var(--font-d); letter-spacing: .2em; text-anchor: end; }
.tw-fl { fill: rgba(232,200,120,.38); font: 800 11px var(--font-n); }
.tw-ed { fill: none; stroke: rgba(232,200,120,.22); stroke-width: 1.6; stroke-dasharray: 3 5; stroke-linecap: round; }
.tw-ed.done { stroke: rgba(255,226,160,.95); stroke-dasharray: none; stroke-width: 2.4; filter: url(#tw-glow); }
.tw-ed.open { stroke: rgba(255,226,160,.8); stroke-dasharray: 4 6; stroke-width: 2.2; animation: tw-march 1.2s linear infinite; }
@keyframes tw-march { to { stroke-dashoffset: -20; } }
.tw-nd { cursor: default; }
.tw-nd-halo { fill: var(--nc); opacity: 0; }
.tw-nd-ring { fill: none; stroke: var(--nc); stroke-width: 1.2; opacity: .35; }
.tw-nd-bg { fill: var(--nc); stroke: rgba(255,255,255,.55); stroke-width: 1.2; }
.tw-nd-ic { overflow: visible; fill: #1a1230; }
.tw-nd.boss .tw-nd-bg { stroke: #fff2c8; stroke-width: 2; }
.tw-nd.boss .tw-nd-ring { stroke-width: 2; stroke-dasharray: 3 3; opacity: .6; }
.tw-nd.future, .tw-nd.passed { opacity: .38; }
.tw-nd.passed .tw-nd-bg { fill: #3b3752; stroke: rgba(255,255,255,.25); }
.tw-nd.done .tw-nd-bg { fill: #2a2b46; stroke: rgba(255,226,160,.7); } .tw-nd.done .tw-nd-ic { opacity: .35; }
.tw-nd-ok { fill: none; stroke: #ffe2a0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tw-nd.cur .tw-nd-halo { opacity: .35; animation: tw-pulse 1.6s ease-in-out infinite; } .tw-nd.cur .tw-nd-ring { opacity: 1; stroke-width: 2.4; stroke: #fff; }
.tw-nd.open { cursor: pointer; } .tw-nd.open .tw-nd-halo { opacity: .22; animation: tw-pulse 1.4s ease-in-out infinite; } .tw-nd.open .tw-nd-ring { opacity: .9; stroke-width: 2; filter: url(#tw-glow); }
.tw-nd.open .tw-nd-bg { filter: url(#tw-glow); }
@keyframes tw-pulse { 0%, 100% { transform: scale(1); opacity: .18; } 50% { transform: scale(1.25); opacity: .4; } }
.tw-nd-halo { transform-box: fill-box; transform-origin: center; }
.tw-legend { display: flex; justify-content: center; gap: 12px; margin: 0 14px 6px; flex-wrap: wrap; }
.tw-legend span { display: inline-flex; align-items: center; gap: 4px; font: 700 11px var(--font-d); color: rgba(255,255,255,.72); }
.tw-legend svg { width: 18px; height: 18px; border-radius: 50%; background: var(--nc); fill: #1a1230; padding: 2px; box-sizing: border-box; }
.tw-map .pp-me.tw { margin-top: 2px; }
.tw-elite-tag { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font: 800 12px var(--font-d); letter-spacing: .1em; color: #ffd0c8; background: rgba(255,107,87,.22); border: 1px solid rgba(255,107,87,.6); }
.tw-prep .pp-h small { display: none; }
html.lowfx .tw-ed.done, html.lowfx .tw-nd.open .tw-nd-ring, html.lowfx .tw-nd.open .tw-nd-bg { filter: none; }
html.lowfx .tw-nd-halo, html.lowfx .tw-ed.open { animation: none !important; }

.bt .bt-hudrow, .bt .bt-tags, .bt .bt-rkpill { display: none !important; }
.bt { --hw: calc(var(--mw) * 1.45); }
.bt-hslot.e { margin-top: calc(14px + var(--sat, 0px)); } .bt-hslot.m { margin-bottom: 14px; }
.bt-mid { position: relative; }
.bt-mid .bt-btn.bt-fast { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; font-size: 14px; }
.bt-mid .bt-btn.bt-skip { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); height: 36px; padding: 0 8px; font-size: 10px; line-height: 1.05; }
.bt-mid .bt-btn.bt-skip i { display: block; }

.bt .bt-row { gap: 6px; padding: 0 6px 6px; align-items: flex-start; }
.bt .bt-row.m .bt-u:nth-child(1), .bt .bt-row.m .bt-u:nth-child(3) { margin-top: 0; } .bt .bt-row.m .bt-u:nth-child(2) { margin-top: 12px; } .bt .bt-row.m .bt-u:nth-child(4) { margin-top: 8px; }
.bt .bt-row.e { align-items: flex-end; } .bt .bt-row.e .bt-u:nth-child(2) { margin-bottom: 12px; } .bt .bt-row.e .bt-u:nth-child(4) { margin-bottom: 8px; }
.bt .bt-row.m .bt-u:nth-child(2) .card, .bt .bt-row.e .bt-u:nth-child(3) .card { transform: rotate(-1.2deg); } .bt .bt-row.m .bt-u:nth-child(3) .card, .bt .bt-row.e .bt-u:nth-child(2) .card { transform: rotate(1.2deg); }
.bt-over.tw-ov .tw-ov-rw { flex-direction: column; gap: 6px; margin-top: 2px; }
.tw-ov-got { font: 700 14px var(--font-d); color: rgba(255,255,255,.85); } .tw-ov-got em { font-style: normal; color: #ffd27a; }
.bt-over.tw-ov.lose .bt-over-card { display: none; }

.ar-chart { margin: 0 14px 12px; padding: 14px 14px 16px; border-radius: 18px; position: relative; overflow: hidden; border: 1px solid rgba(232,200,120,.38);
  box-shadow: 0 0 0 3px rgba(20,14,40,.9), 0 0 0 4px rgba(232,200,120,.18), 0 18px 40px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.5);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.9) 0 .8px, transparent 1.6px), radial-gradient(circle at 72% 8%, rgba(255,255,255,.7) 0 .7px, transparent 1.5px), radial-gradient(circle at 88% 30%, rgba(255,255,255,.8) 0 .6px, transparent 1.4px),
    radial-gradient(circle at 10% 42%, rgba(255,255,255,.6) 0 .7px, transparent 1.5px), radial-gradient(circle at 60% 55%, rgba(255,255,255,.8) 0 .8px, transparent 1.6px), radial-gradient(circle at 30% 70%, rgba(255,255,255,.6) 0 .6px, transparent 1.4px),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,.75) 0 .7px, transparent 1.5px), radial-gradient(circle at 45% 90%, rgba(255,255,255,.6) 0 .7px, transparent 1.5px), radial-gradient(circle at 92% 94%, rgba(255,255,255,.7) 0 .6px, transparent 1.4px),
    radial-gradient(ellipse at 50% 0%, rgba(120,90,200,.35), transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(60,120,200,.25), transparent 55%),
    linear-gradient(180deg, #121233 0%, #0d1130 45%, #0a1a38 100%); }
.ar-chart::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-radial-gradient(circle at 50% 115%, transparent 0 58px, rgba(232,200,120,.08) 58px 59px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .7 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: screen; }
.ar-chart::after { content: ''; position: absolute; inset: 6px; pointer-events: none; border: 1px solid rgba(232,200,120,.22); border-radius: 12px; }
.ar-chart > * { position: relative; z-index: 1; }
.ar-ch-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 0 2px 2px; }
.ar-ch-h small { display: block; font: 700 10px var(--font-d); letter-spacing: .28em; color: rgba(232,200,120,.75); }
.ar-ch-h b { display: block; margin-top: 2px; font: 900 28px/1.1 var(--font-d); color: #fff7e0; text-shadow: 0 2px 8px rgba(0,0,0,.6); letter-spacing: .04em; }
.ar-ch-h b i { font-style: normal; font-size: 14px; color: rgba(232,200,120,.7); letter-spacing: .06em; }
.ar-ch-r { text-align: right; } .ar-ch-r em { display: block; font: 800 15px var(--font-d); font-style: normal; color: #ffd27a; letter-spacing: .06em; }
.ar-ch-r small { margin-top: 2px; letter-spacing: .16em; }
.ar-lives { color: #ff6b7a !important; font-size: 18px !important; letter-spacing: .08em !important; line-height: 1 !important; }
.ar-route { margin: 0 -4px 10px; } .ar-route > svg { display: block; width: 100%; }
.ar-sky .tw-fl { text-anchor: middle; font-size: 10px; fill: rgba(232,200,120,.5); }
.ar-sky .tw-band text { text-anchor: middle; font-size: 10px; } .ar-sky .tw-band line { stroke-dasharray: 2 4; }
.ar-sky .tw-nd.future { opacity: .42; } .ar-sky .tw-nd.cur .tw-nd-bg { stroke: #fff; }
.ar-sky .tw-nd.next .tw-nd-halo { opacity: .22; animation: tw-pulse 1.4s ease-in-out infinite; } .ar-sky .tw-nd.next .tw-nd-ring { opacity: .9; stroke-width: 2; filter: url(#tw-glow); } .ar-sky .tw-nd.next .tw-nd-bg { filter: url(#tw-glow); }
.ar-sky .tw-ed.next { stroke: rgba(255,226,160,.8); stroke-dasharray: 4 6; stroke-width: 2.2; animation: tw-march 1.2s linear infinite; }
html.lowfx .ar-sky .tw-nd.next .tw-nd-ring, html.lowfx .ar-sky .tw-nd.next .tw-nd-bg { filter: none; } html.lowfx .ar-sky .tw-ed.next { animation: none; }
.ar-chart .tw-team { margin: 0 0 8px; gap: 6px; }
.ar-chart .tw-u .tw-uc .card { --cw: 54px !important; width: 54px; } .ar-chart .tw-u.hero .tw-uc .card { --cw: 68px !important; width: 68px; }
.ar-ch-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0 0 12px; }
.ar-ch-sum .tw-rls { margin: 0; gap: 3px; } .ar-ch-sum .tw-rls > b { color: rgba(232,200,120,.7); } .ar-ch-sum .tw-rl-i { width: 24px; height: 24px; }
.ar-chart .ar-go { width: 100%; height: 64px; border-radius: 16px; gap: 0; border: 1px solid rgba(255,236,190,.85); color: #2a1a05; text-shadow: 0 1px 0 rgba(255,255,255,.45);
  background: linear-gradient(180deg, #fff1c8 0%, #ffc23d 46%, #dc961e 52%, #ffd27a 100%);
  box-shadow: 0 0 0 3px rgba(20,14,40,.9), 0 0 0 4px rgba(255,194,61,.35), 0 0 30px rgba(255,194,61,.5), 0 10px 24px rgba(0,0,0,.5); animation: ar-go-glow 2.2s ease-in-out infinite; }
@keyframes ar-go-glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(20,14,40,.9), 0 0 0 4px rgba(255,194,61,.35), 0 0 22px rgba(255,194,61,.4), 0 10px 24px rgba(0,0,0,.5); } 50% { box-shadow: 0 0 0 3px rgba(20,14,40,.9), 0 0 0 4px rgba(255,194,61,.55), 0 0 40px rgba(255,194,61,.7), 0 10px 24px rgba(0,0,0,.5); } }
.ar-chart .ar-go span { align-items: center; font-size: 21px; letter-spacing: .24em; text-indent: .24em; } .ar-chart .ar-go small { color: #4a3410; opacity: 1; letter-spacing: .06em; text-indent: 0; }
.ar-chart .ar-go:disabled { opacity: .5; filter: saturate(.3); animation: none; }
.ar-quit { display: block; margin: 10px auto 0; padding: 4px 10px; background: none; border: 0; color: rgba(232,200,120,.55); font: 700 11px var(--font-d); letter-spacing: .1em; text-decoration: underline dotted; }
.ar-chart .tw-rules { margin: 10px 0 0; text-align: center; } .ar-chart .tw-rules summary { color: rgba(232,200,120,.7); letter-spacing: .1em; } .ar-chart .tw-rules p { text-align: left; color: rgba(255,255,255,.62); }
.ar-seals { margin: 0 14px 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ar-seal { position: relative; overflow: hidden; padding: 12px 6px 10px; border-radius: 14px; border: 1px solid rgba(232,200,120,.3); color: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
  background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.7) 0 .7px, transparent 1.4px), radial-gradient(circle at 80% 70%, rgba(255,255,255,.6) 0 .6px, transparent 1.3px), radial-gradient(ellipse at 50% 0%, rgba(120,90,200,.28), transparent 60%), linear-gradient(180deg, #14143a, #0c1534);
  box-shadow: 0 0 0 2px rgba(20,14,40,.9), 0 8px 18px rgba(0,0,0,.5), inset 0 0 24px rgba(0,0,0,.45); }
.ar-seal i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #e9dcb8; box-shadow: 0 0 0 2px #0d1130, 0 0 0 3px rgba(232,200,120,.55); }
.ar-seal i svg { width: 24px; height: 24px; fill: #1a1230; display: block; }
.ar-seal.rec i { background: #ffc23d; } .ar-seal.dia i { background: #9fe8ff; } .ar-seal.friend i { background: #ff6b57; }
.ar-seal b { font: 800 13px var(--font-d); letter-spacing: .04em; color: #fff3cf; white-space: nowrap; }
.ar-seal small { font: 600 10px var(--font-d); color: rgba(232,200,120,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
button.ar-seal:active { transform: translateY(1px); }
.ar-seal::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .7 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: screen; opacity: .8; } .ar-seal > * { position: relative; }
.ar-deck { margin: 0 14px 12px; border-color: rgba(232,200,120,.3); background: linear-gradient(180deg, rgba(20,20,58,.92), rgba(12,21,52,.92)); box-shadow: 0 0 0 2px rgba(20,14,40,.9), 0 8px 18px rgba(0,0,0,.45); }
.ar-deck em { color: #ffd27a; }
.ar-rank { margin: 0 14px 12px; border-color: rgba(232,200,120,.3); background: linear-gradient(180deg, #121233, #0a1a38); box-shadow: 0 0 0 3px rgba(20,14,40,.9), 0 10px 22px rgba(0,0,0,.5); }
.ar-rank .dk-h b { color: #fff3cf; letter-spacing: .06em; } .ar-rank .dk-h small { color: rgba(232,200,120,.6); }
.ar-rank .bt-rank div { border-top: 1px dashed rgba(232,200,120,.22); } .ar-rank .bt-rank .me { background: rgba(255,194,61,.12); }
html.lowfx .ar-chart .ar-go { animation: none; box-shadow: 0 0 0 3px rgba(20,14,40,.9), 0 0 0 4px rgba(255,194,61,.35); }

.ar-rank { cursor: pointer; } .ar-rank:active { transform: translateY(1px); } .ar-rank .dk-h small { color: #ffd27a; font-weight: 800; letter-spacing: .08em; }
.rk-sheet { position: absolute; inset: 0; z-index: 46; display: flex; flex-direction: column; padding: calc(10px + var(--sat, 0px)) 12px calc(10px + var(--sab, 0px)); background: rgba(6,6,14,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s; }
.rk-sheet.on { opacity: 1; }
.rk-chart { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid rgba(232,200,120,.4);
  box-shadow: 0 0 0 3px rgba(20,14,40,.9), 0 0 0 4px rgba(232,200,120,.2), 0 18px 40px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.5);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.9) 0 .8px, transparent 1.6px), radial-gradient(circle at 72% 8%, rgba(255,255,255,.7) 0 .7px, transparent 1.5px), radial-gradient(circle at 88% 30%, rgba(255,255,255,.8) 0 .6px, transparent 1.4px),
    radial-gradient(circle at 10% 42%, rgba(255,255,255,.6) 0 .7px, transparent 1.5px), radial-gradient(circle at 60% 55%, rgba(255,255,255,.8) 0 .8px, transparent 1.6px), radial-gradient(circle at 30% 70%, rgba(255,255,255,.6) 0 .6px, transparent 1.4px),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,.75) 0 .7px, transparent 1.5px), radial-gradient(circle at 45% 90%, rgba(255,255,255,.6) 0 .7px, transparent 1.5px), radial-gradient(circle at 92% 94%, rgba(255,255,255,.7) 0 .6px, transparent 1.4px),
    radial-gradient(ellipse at 50% 0%, rgba(120,90,200,.35), transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(60,120,200,.25), transparent 55%),
    linear-gradient(180deg, #121233 0%, #0d1130 45%, #0a1a38 100%); }
.rk-chart::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: repeating-radial-gradient(circle at 50% 110%, transparent 0 58px, rgba(232,200,120,.08) 58px 59px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .7 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: screen; }
.rk-chart::after { content: ''; position: absolute; inset: 6px; pointer-events: none; z-index: 2; border: 1px solid rgba(232,200,120,.22); border-radius: 12px; }
.rk-chart > * { position: relative; z-index: 1; }
.rk-h { padding: 18px 18px 10px; border-bottom: 1px solid rgba(232,200,120,.28); }
.rk-h b { display: block; font: 900 22px var(--font-d); color: #fff7e0; letter-spacing: .08em; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.rk-h small { display: block; margin-top: 2px; font: 700 11px var(--font-d); letter-spacing: .2em; color: rgba(232,200,120,.72); }
.rk-h .close-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; background: rgba(13,17,48,.9); border: 1px solid rgba(232,200,120,.55); box-shadow: 0 0 0 2px rgba(20,14,40,.9), 0 0 12px rgba(232,200,120,.25); backdrop-filter: none; -webkit-backdrop-filter: none; }
.rk-h .close-x::before, .rk-h .close-x::after { width: 14px; background: #ffd27a; }
.rk-list { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 4px 14px 12px; overscroll-behavior: contain; }
.rk-list div, .rk-me div { border-top: 1px dashed rgba(232,200,120,.2); padding: 9px 4px; font-size: 13px; color: #fff3cf; }
.rk-list div:first-child { border-top: 0; }
.rk-list i, .rk-me i { width: 26px; height: 26px; line-height: 26px; border-radius: 50%; font: 800 12px/26px var(--font-n); color: rgba(232,200,120,.6); }
.rk-list div.top1 i, .rk-list div.top2 i, .rk-list div.top3 i { color: #1a1230 !important; font-weight: 900; box-shadow: 0 0 0 1px #0d1130, 0 0 0 2px rgba(232,200,120,.5); }
.rk-list .top1 i { background: linear-gradient(180deg, #ffe9b0, #ffc23d); } .rk-list .top2 i { background: linear-gradient(180deg, #f4f1ff, #c9c4e0); } .rk-list .top3 i { background: linear-gradient(180deg, #ffd1a8, #d9a066); }
.rk-list em, .rk-me em { color: #ffd27a; }
.rk-list .me, .rk-me .me { background: rgba(255,194,61,.14); border-top-color: transparent; border-radius: 10px; margin: 0 -4px; padding: 9px 8px; box-shadow: inset 0 0 0 1px rgba(255,194,61,.45); }
.rk-list .me i { color: #ffd27a; }
.rk-me { padding: 6px 14px 10px; border-top: 1px solid rgba(232,200,120,.28); background: rgba(10,14,40,.85); }
html.lowfx .rk-sheet { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6,6,14,.94); }