/* Xorise design system. Built on the PayHot layout language: light canvas, black rounded "islands", 8px gaps, 32px radius,
   Onest headings with tight tracking, Inter text, Fira Code uppercase labels with a red square, one red accent, corner-tick active states.
   Two themes (data-theme="light" | "dark", set by theme.js). Islands (.isl) always stay black. */
@import url("fonts/fonts.css");

:root {
  --bg: #f0f4f8; --s1: #ffffff; --s2: #f0f4f8; --s3: #e6ecf3; --s4: #dbe3ec;
  --line: #d9e1e9; --line2: #c6d0db; --line3: #a9b6c5;
  --tx: #0e0e0e; --mu: #6b7590; --mu2: #98a3b6;
  --red: #fb1519; --red2: #ff3b3f; --redd: #d90f14; --redbg: rgba(251, 21, 25, .08);
  --redg: linear-gradient(180deg, #fd2226, #ec0a46);
  --ink: #100c0d; --ink2: #19191c; --ink3: #232327;
  --ok: #12a150; --okbg: rgba(18, 161, 80, .1); --warn: #d97706; --bad: #e5252b;
  --c-common: #8a94a6; --c-rare: #3b82f6; --c-epic: #9b5cf6; --c-legendary: #f59e0b; --c-mythic: #ef2f3a;
  --r: 24px; --r2: 16px; --r3: 12px; --rI: 32px;
  --sh: 0 1px 8px rgba(16, 24, 40, .05), 0 9px 40px rgba(16, 24, 40, .07);
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --head: Onest, Inter, system-ui, sans-serif;
  --mono: "Fira Code", ui-monospace, Consolas, monospace;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b0809; --s1: #141012; --s2: #1b1618; --s3: #251f22; --s4: #302a2d;
  --line: #2a2326; --line2: #3b3337; --line3: #534a4f;
  --tx: #f6f5f7; --mu: #a09aa6; --mu2: #6f6974;
  --redbg: rgba(251, 21, 25, .16); --ok: #3fcf79; --okbg: rgba(63, 207, 121, .12); --bad: #ff6a6e;
  --ink: #0f0b0c; --sh: none;
  --c-common: #98a0ae; --c-rare: #5b9aff; --c-epic: #b07cff; --c-legendary: #ffb23d; --c-mythic: #ff4a52;
  color-scheme: dark;
}
/* a black island: its children read the dark palette whatever the page theme is */
.isl, .blk.isl {
  --s1: #19191c; --s2: #212125; --s3: #2b2b30; --s4: #35353b; --line: rgba(255, 255, 255, .1); --line2: rgba(255, 255, 255, .17); --line3: rgba(255, 255, 255, .28);
  --tx: #fff; --mu: #a2a2ae; --mu2: #6f6f7b; --redbg: rgba(251, 21, 25, .2); --ok: #3fcf79; --okbg: rgba(63, 207, 121, .14); --bad: #ff6a6e;
  --c-common: #98a0ae; --c-rare: #5b9aff; --c-epic: #b07cff; --c-legendary: #ffb23d; --c-mythic: #ff4a52;
  background: var(--ink); color: #fff; border-color: rgba(255, 255, 255, .06);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--tx); font: 450 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-family: var(--head); font-weight: 500; letter-spacing: -.03em; line-height: 1.08; }
p { margin: 0; }
.mono { font-family: var(--mono); }
.muted { color: var(--mu); }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 6px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }
.xi { flex: none; }

/* ---------------------------------------------------------------- label: red square + Fira Code caps */
.lbl { display: inline-flex; align-items: center; gap: 9px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tx); }
.lbl::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--redg); flex: none; }
.lbl .sp { flex: 1; }
.lbl.blue::before { background: #4972ce; }
.us { color: var(--red); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ---------------------------------------------------------------- buttons, fields */
.btn { --hv: var(--s2); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 8px; border: 1px solid var(--line2); background: var(--s1); color: var(--tx); font: 700 13px/1 var(--head); white-space: nowrap; transition: transform .3s cubic-bezier(.2, .7, .2, 1), color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hv); opacity: 0; transition: opacity .3s ease; }
.btn:hover { transform: translateY(-2px); border-color: var(--tx); box-shadow: 0 8px 20px rgba(16, 24, 40, .08); }
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(0); box-shadow: none; transition-duration: .1s; }
.btn.primary { --hv: #fff; color: #fff; background: var(--redg); border-color: transparent; }
.btn.primary:hover { color: #000; border-color: transparent; box-shadow: 0 10px 28px rgba(251, 21, 25, .28); }
.btn.dark { --hv: var(--red); color: #fff; background: var(--ink); border-color: var(--ink); }
.btn.dark:hover { border-color: var(--red); }
.btn.ghost { --hv: rgba(120, 135, 155, .14); background: transparent; border-color: transparent; }
.btn.ghost:hover { border-color: transparent; box-shadow: none; }
.btn.small { height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 8px; }
.btn.large { height: 54px; padding: 0 28px; font-size: 14px; border-radius: 12px; }
.btn.block { width: 100%; }
.btn.danger { color: var(--bad); }
.btn:disabled, .btn.off { opacity: .45; pointer-events: none; }
.btn .xi { margin-top: -1px; }
.input { height: 46px; width: 100%; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line2); background: var(--s1); outline: none; font-weight: 500; transition: border-color .15s, box-shadow .15s; }
.input::placeholder { color: var(--mu2); }
.input:hover { border-color: var(--line3); }
.input:focus { border-color: var(--red); box-shadow: 0 0 0 4px var(--redbg); }
select.input { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7590' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; color: var(--mu); }
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 14px; background: rgba(120, 135, 155, .14); }
.seg button { height: 34px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--mu); font: 600 13px var(--sans); transition: background .15s, color .15s; }
.seg button:hover { color: var(--tx); }
.seg button.on { background: var(--s1); color: var(--tx); box-shadow: 0 1px 4px rgba(16, 24, 40, .14); }
.isl .seg button.on { background: var(--s3); box-shadow: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--s1); color: var(--mu); font: 600 12.5px var(--sans); transition: .15s; }
button.chip:hover { border-color: var(--line3); color: var(--tx); }
button.chip.on { border-color: var(--tx); color: var(--tx); background: var(--s1); }
button.chip.rar-COMMON.on, button.chip.rar-RARE.on, button.chip.rar-EPIC.on, button.chip.rar-LEGENDARY.on, button.chip.rar-MYTHIC.on { border-color: var(--rc); color: var(--rc); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 8px; font: 600 12px var(--sans); background: var(--s2); color: var(--mu); }
.pill.ok { color: var(--ok); background: var(--okbg); }
.pill.bad { color: var(--bad); background: var(--redbg); }
.notice { display: none; padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 500; }
.notice.show { display: block; }
.notice.err { background: var(--redbg); color: var(--bad); }
.notice.ok { background: var(--okbg); color: var(--ok); }
.check { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.check input { position: absolute; opacity: 0; }
.check .box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line3); display: grid; place-items: center; color: transparent; transition: .15s; flex: none; }
.check input:checked + .box { background: var(--redg); border-color: transparent; color: #fff; }
.check input:focus-visible + .box { outline: 2px solid var(--red); outline-offset: 2px; }
.check .box svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------------- blocks, grain, matrix */
.blk { position: relative; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; overflow: hidden; }
.blk.pad0 { padding: 0; }
.blk.flat2 { background: var(--s2); border-color: transparent; }
.blk.isl { border-radius: var(--rI); }
.grain::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .085; mix-blend-mode: screen; pointer-events: none; z-index: 1; }
.glow::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 62% 70% at var(--gx, 85%) var(--gy, 80%), rgba(251, 21, 25, .55), rgba(251, 21, 25, .12) 45%, transparent 72%); }
canvas.matrix { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.isl > .in, .isl > .z { position: relative; z-index: 2; }
.big { font: 500 44px/1 var(--head); letter-spacing: -.04em; }
.h2 { font: 500 22px/1.1 var(--head); letter-spacing: -.02em; }
.sub { color: var(--mu); }
.row { display: flex; align-items: center; gap: 12px; }
.row.sb { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c7 { grid-column: span 7; } .c6 { grid-column: span 6; } .c5 { grid-column: span 5; } .c4 { grid-column: span 4; } .c3 { grid-column: span 3; }
.stack { display: grid; gap: 8px; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.kv:first-child { border-top: 0; }
.kv .k { color: var(--mu); }
.meter { display: inline-block; width: 84px; height: 6px; border-radius: 4px; background: var(--s3); overflow: hidden; vertical-align: middle; }
.meter > span { display: block; height: 100%; background: var(--redg); border-radius: 4px; }
.ico-tile { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--s2); color: var(--tx); flex: none; }
.isl .ico-tile { background: rgba(255, 255, 255, .08); color: #fff; }
.stat { display: grid; gap: 14px; align-content: space-between; min-height: 190px; }
.stat .big { font-size: 40px; }

/* ---------------------------------------------------------------- coin */
.coin { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; flex: none; }
.coinval { display: inline-flex; align-items: center; gap: .36em; font-variant-numeric: tabular-nums; font-weight: 650; }

.coin-float { position: absolute; right: 7%; top: 50%; margin-top: -100px; z-index: 2; animation: float 6s ease-in-out infinite; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55)); }
.coin-float .coin { width: 190px; height: 190px; }
.chest-corner { position: absolute; right: -14px; bottom: -22px; width: 58%; pointer-events: none; z-index: 1; }
.chest-corner img { width: 100%; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .5)); }

/* ---------------------------------------------------------------- app shell */
.app { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 8px; padding: 8px; min-height: 100vh; }
.side { position: sticky; top: 8px; height: calc(100vh - 16px); padding: 18px 12px 14px; border-radius: 28px; background: var(--s1); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 12px 20px; font: 600 21px var(--head); letter-spacing: -.04em; }
.brand img, .brand .xlogo { width: 34px; height: auto; color: var(--red); }
.nav { display: grid; gap: 2px; }
.nav a { position: relative; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; color: var(--mu); font: 600 14px var(--sans); border-radius: 12px; transition: color .2s, background-color .2s; }
.nav a:hover { color: var(--tx); background: rgba(120, 135, 155, .1); }
.nav a.on { color: var(--tx); background: rgba(120, 135, 155, .13); border-radius: 0; }
.nav a.on::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6; background: linear-gradient(currentColor, currentColor) top left/3px 3px no-repeat, linear-gradient(currentColor, currentColor) top right/3px 3px no-repeat, linear-gradient(currentColor, currentColor) bottom left/3px 3px no-repeat, linear-gradient(currentColor, currentColor) bottom right/3px 3px no-repeat; }
.nav a.on .xi { color: var(--red); }
.nav a .badge { margin-left: auto; font: 600 11px var(--mono); background: var(--redg); color: #fff; border-radius: 8px; padding: 3px 7px; }
.side .foot { margin-top: auto; display: grid; gap: 8px; }
.usercard { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: var(--s2); }
.usercard .nm { font-weight: 650; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usercard .sb { font-size: 12px; color: var(--mu); }
.main { padding: 14px 18px 60px; min-width: 0; max-width: 1400px; width: 100%; margin: 0 auto; }
.top { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 26px; padding-top: 6px; }
.top .lbl { margin-bottom: 14px; }
.top h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); letter-spacing: -.045em; line-height: 1; }
.top .sub { margin-top: 10px; font-size: 14.5px; font-weight: 500; }
.tools { display: flex; gap: 8px; align-items: center; }
.iconbtn { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line2); background: var(--s1); display: grid; place-items: center; color: var(--tx); transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s ease, color .3s ease, border-color .3s ease; }
.iconbtn:hover { border-color: var(--tx); transform: translateY(-2px); }
.walletpill { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 5px 0 16px; border-radius: 14px; background: var(--ink); color: #fff; font: 600 15px var(--head); }
.walletpill .plus { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--redg); color: #fff; transition: .2s; }
.walletpill .plus:hover { background: #fff; color: #000; }
.burger { display: none; }
.ava { position: relative; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; background: var(--s3); font-weight: 700; flex: none; color: var(--tx); }
.ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ava.def { background: var(--ink); }
.ava.def img { position: static; width: 52%; height: auto; object-fit: contain; }
.ava-xs { width: 30px; height: 30px; font-size: 12px; }
.ava-xl { width: 96px; height: 96px; font-size: 36px; cursor: pointer; border: 0; padding: 0; }
html { scrollbar-gutter: stable; }
.page { display: none; }
.page.on { display: block; opacity: 1; transform: none; transition: opacity .34s ease, transform .46s cubic-bezier(.2, .8, .2, 1); }
.page.on.pre { opacity: 0; transform: translateY(12px); transition: none; }
.page.on.leaving { opacity: 0; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease; }
.top .grow { transition: opacity .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
.top .grow.swap { opacity: 0; transform: translateY(6px); }
/* blocks of a freshly opened page arrive one after another */
@keyframes blkIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.page.enter .bento > *, .page.enter .cases > *, .page.enter .upg > *, .page.enter .tickbar, .page.enter .se > * { animation: blkIn .55s cubic-bezier(.2, .8, .2, 1) both; }
.page.enter .bento > :nth-child(2), .page.enter .cases > :nth-child(2), .page.enter .upg > :nth-child(2), .page.enter .se > :nth-child(2) { animation-delay: 60ms; }
.page.enter .bento > :nth-child(3), .page.enter .cases > :nth-child(3) { animation-delay: 120ms; }
.page.enter .bento > :nth-child(4), .page.enter .cases > :nth-child(4) { animation-delay: 180ms; }
.page.enter .bento > :nth-child(5), .page.enter .cases > :nth-child(5) { animation-delay: 240ms; }
.page.enter .bento > :nth-child(n + 6), .page.enter .cases > :nth-child(n + 6) { animation-delay: 300ms; }
/* a thin bar runs at the top while a page needs more than a moment to load */
body.routing::before { content: ""; position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 200; background: var(--red); transform-origin: left; animation: routebar 1.1s ease-in-out infinite; }
@keyframes routebar { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(.85); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
html[data-motion="off"] .page.on, html[data-motion="off"] .top .grow { transition: none; }

/* ---------------------------------------------------------------- item tiles */
.rar-COMMON { --rc: var(--c-common); } .rar-RARE { --rc: var(--c-rare); } .rar-EPIC { --rc: var(--c-epic); }
.rar-LEGENDARY { --rc: var(--c-legendary); } .rar-MYTHIC { --rc: var(--c-mythic); }
.grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.grid.sm { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.grid.sm .tile { padding: 6px; border-radius: 16px; gap: 6px; }
.grid.sm .tile .art { border-radius: 11px; }
.grid.sm .tile .nm { font-size: 11.5px; min-height: 2.4em; padding: 0 2px; }
.grid.sm .tile .mt { font-size: 11px; padding: 0 2px 2px; }
.grid.sm .tile .rr { font-size: 9px; }
.tile { position: relative; background: var(--s2); border: 1px solid transparent; border-radius: 20px; padding: 8px; display: flex; flex-direction: column; gap: 8px; text-align: left; transition: border-color .2s, transform .2s, background-color .2s; min-width: 0; }
button.tile:hover, .tile.hov:hover { border-color: var(--rc, var(--line3)); transform: translateY(-2px); }
.tile.sel { border-color: var(--rc, var(--red)); background: var(--s1); }
.tile .art { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc, #8a94a6) 24%, transparent), transparent 70%), var(--s1); display: grid; place-items: center; overflow: hidden; color: var(--rc, var(--mu)); }
.isl .tile .art { background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc, #8a94a6) 30%, transparent), transparent 70%), var(--s1); }
.tile .art::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--rc, var(--line2)); }
.tile .art img { width: 86%; height: 86%; object-fit: contain; }
.tile .art svg { width: 44%; height: 44%; stroke-width: 1.4; }
.tile .nm { font: 600 13px/1.25 var(--sans); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.5em; padding: 0 4px; }
.tile .mt { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--mu); padding: 0 4px 4px; }
.tile .rr { font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rc); }
.tile .flag { position: absolute; top: 14px; left: 14px; z-index: 2; font: 500 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: 7px; background: var(--ink); color: #fff; }
.tile .flag.red { background: var(--redg); }
.tile .xq { position: absolute; top: 14px; right: 14px; z-index: 2; font: 600 11px var(--mono); padding: 3px 7px; border-radius: 7px; background: var(--ink); color: #fff; }
.slotbar { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.slotbox { border: 1.5px dashed var(--line2); border-radius: 16px; padding: 10px 6px; text-align: center; font-size: 11px; color: var(--mu2); min-height: 96px; display: grid; gap: 5px; align-content: center; justify-items: center; background: transparent; }
.slotbox.has { border-style: solid; border-color: transparent; color: var(--tx); background: var(--s2); box-shadow: inset 0 -3px 0 var(--rc); }
.slotbox svg { width: 24px; height: 24px; color: var(--rc, var(--mu2)); }
.slotbox span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- cases: PayHot-style cards, light by default, turn black on hover */
.cases { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.case { position: relative; display: flex; flex-direction: column; min-height: 400px; padding: 30px 28px 26px; border-radius: var(--rI); background: var(--s1); border: 1px solid var(--line); overflow: hidden; text-align: left; color: var(--tx); transition: background-color .35s ease, border-color .35s ease, color .35s ease; isolation: isolate; }
.case::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(ellipse 80% 55% at 70% 72%, color-mix(in srgb, var(--cc, #fb1519) 55%, transparent), transparent 70%); }
.case .no { font: 500 13px var(--mono); color: var(--red); }
.case .tier { position: absolute; top: 24px; right: 24px; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 8px; background: var(--s2); color: var(--mu); transition: .35s; }
.case .tier.free { background: var(--redg); color: #fff; }
.case .stage { position: absolute; left: 4%; right: 4%; bottom: 62px; top: 96px; display: grid; place-items: center; pointer-events: none; }
.case .stage .tier { display: none; }
.case .art-wrap { width: 100%; height: 100%; display: grid; place-items: center; }
.case .stage img, .case .stage svg.cart { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(16, 24, 40, .18)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.case h3 { margin-top: 20px; font: 500 28px/.96 var(--head); letter-spacing: -.045em; max-width: 75%; }
.case .tg { display: none; }
.case .pr { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin-top: auto; font-size: 17px; }
.case .pr .coinval { font-size: 18px; font-family: var(--head); font-weight: 600; }
.case .pr .muted { transition: color .35s; }
.case .used { opacity: .5; }
.case.used { opacity: .55; }
@media (hover: hover) {
  .case:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
  .case:hover::before { opacity: 1; }
  .case:hover .tier { background: rgba(255, 255, 255, .12); color: #fff; }
  .case:hover .stage img, .case:hover .stage svg.cart { transform: scale(1.06) translateY(-8px); filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .5)); }
  .case:hover .pr .muted { color: #a2a2ae; }
  .case:hover .pill.ok { background: rgba(63, 207, 121, .16); }
}
.case-hero { width: 300px; max-width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; animation: float 6s ease-in-out infinite; }
.case-hero .art-wrap, .case-hero img { width: 100%; }
.case-hero img, .case-hero svg { filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .55)); }
.arena { min-height: 560px; }
.arena .z { display: grid; gap: 22px; }
.ar-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.ar-hd h1 { margin-top: 16px; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.045em; }
.ar-hd .sub { margin-top: 8px; font-weight: 500; }
.ar-bal { display: grid; gap: 6px; justify-items: end; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #a2a2ae; }
.ar-bal b { font: 600 20px var(--head); color: #fff; letter-spacing: 0; text-transform: none; }
.stage-ar { min-height: 250px; display: grid; align-items: center; }
.idle { display: grid; justify-items: center; gap: 6px; text-align: center; color: #a2a2ae; font-weight: 500; }
.idle .case-hero { width: min(360px, 70%); }
.belts { display: grid; gap: 10px; }
.panel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px; border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.panel .sum { margin-left: auto; font: 500 14px var(--head); color: #a2a2ae; display: flex; align-items: center; gap: 10px; }
.panel .sum .coinval { color: #fff; font-size: 18px; }
.tgl { display: inline-flex; align-items: center; gap: 10px; font: 600 13px var(--sans); color: #e8e8ee; cursor: pointer; }
.tgl input { position: absolute; opacity: 0; }
.tgl .sw { width: 42px; height: 24px; border-radius: 14px; background: rgba(255, 255, 255, .16); position: relative; transition: .2s; }
.tgl .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s; }
.tgl input:checked + .sw { background: var(--redg); }
.tgl input:checked + .sw::after { transform: translateX(18px); }
.tgl input:focus-visible + .sw { outline: 2px solid var(--red); outline-offset: 2px; }
.res-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.roulette::before, .roulette::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18%; z-index: 2; pointer-events: none; }
.roulette::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.roulette::after { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.roulette.sm { height: 150px; }
.roulette .mark { box-shadow: 0 0 22px 2px rgba(251, 21, 25, .7); z-index: 3; }
.roulette.stopped .belt .tile:not(.win) { opacity: .35; transition: opacity .5s; }
.roulette.stopped .belt .tile.win { transform: scale(1.06); border-color: var(--rc); box-shadow: 0 0 0 1px var(--rc), 0 0 30px color-mix(in srgb, var(--rc) 55%, transparent); transition: .45s; }
.roulette { position: relative; border-radius: 22px; background: var(--ink); overflow: hidden; height: 190px; border: 1px solid rgba(255, 255, 255, .08); --s1: #19191c; --s2: #212125; --tx: #fff; --mu: #a2a2ae; }
.roulette .belt { position: absolute; top: 0; left: 0; height: 100%; display: flex; gap: 10px; padding: 14px 0; will-change: transform; }
.roulette .belt .tile { flex: none; width: 140px; height: 100%; padding: 8px; justify-content: space-between; background: #19191c; color: #fff; }
.roulette .belt .tile .art { aspect-ratio: auto; flex: 1; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc, #8a94a6) 30%, transparent), transparent 70%), #212125; }
.roulette .mark { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--red); z-index: 3; transform: translateX(-1px); }
.roulette .mark::before, .roulette .mark::after { content: ""; position: absolute; left: -6px; border: 7px solid transparent; }
.roulette .mark::before { top: 0; border-top-color: var(--red); }
.roulette .mark::after { bottom: 0; border-bottom-color: var(--red); }
.chance-row { display: grid; grid-template-columns: 104px 1fr 62px; gap: 12px; align-items: center; font-size: 13px; margin: 10px 0; }
.chance-row .bar { height: 8px; border-radius: 5px; background: var(--s3); overflow: hidden; }
.chance-row .bar i { display: block; height: 100%; background: var(--rc); border-radius: 5px; }
.chance-row .rr { font: 500 11px var(--mono); color: var(--rc); letter-spacing: .05em; text-transform: uppercase; }

/* ---------------------------------------------------------------- upgrader */
.upg { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 8px; }
.drops { border-radius: var(--rI); background: var(--ink); color: #fff; overflow: hidden; display: flex; flex-direction: column; max-height: 800px; --line: rgba(255, 255, 255, .1); --mu: #a2a2ae; --s2: #212125; }
.drops .hd { padding: 20px 18px 12px; }
.drops .hd .lbl { color: #fff; }
.drops .list { overflow: hidden auto; display: flex; flex-direction: column; }
.drop { display: grid; grid-template-columns: 1fr 46px; gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, .08); border-left: 3px solid var(--rc); animation: dropin .45s ease-out; }
.drop .t { font: 500 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; }
.drop .t small { display: block; font-weight: 450; color: #a2a2ae; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop .im { width: 46px; height: 46px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%), #212125; display: grid; place-items: center; color: var(--rc); }
.drop .im svg { width: 22px; height: 22px; }
.drop .im img { width: 86%; height: 86%; object-fit: contain; }
@keyframes dropin { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.upg-main { display: grid; gap: 8px; }
.upg-stage { display: grid; grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr); gap: 8px; align-items: stretch; }
.upg-box { border-radius: var(--rI); background: var(--s1); border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 14px; min-height: 290px; }
.upg-box .ph { flex: 1; display: grid; place-items: center; text-align: center; color: var(--mu); font-size: 13px; padding: 10px; border: 1.5px dashed var(--line2); border-radius: 18px; }
.upg-sel { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; flex: 1; }
.mini { position: relative; width: 78px; height: 78px; border-radius: 16px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc, #8a94a6) 22%, transparent), transparent 70%), var(--s2); display: grid; place-items: center; color: var(--rc); }
.mini svg { width: 28px; height: 28px; }
.mini img { width: 84%; height: 84%; object-fit: contain; }
.mini::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--rc); }
.mini .x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); border: 0; display: grid; place-items: center; color: #fff; padding: 0; }
.mini .x:hover { background: var(--red); }
.wheelbox { --s1: #19191c; --s2: #212125; --s3: #2b2b30; --line: rgba(255, 255, 255, .1); --tx: #fff; --mu: #a2a2ae; display: grid; place-items: center; position: relative; background: var(--ink); border-radius: var(--rI); padding: 16px; overflow: hidden; }
.wheelbox::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .08; pointer-events: none; }
.wheel { width: 100%; max-width: 300px; aspect-ratio: 1; position: relative; z-index: 2; }
.wheel svg { width: 100%; height: 100%; display: block; }
.wheel .needle { transform-origin: 150px 150px; transition: transform 5s cubic-bezier(.08, .72, .12, 1); }
.wheel .ctr { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.wheel .ctr b { font: 500 42px var(--head); letter-spacing: -.04em; display: block; color: #fff; }
.wheel .ctr span { font: 500 11px var(--mono); color: #a2a2ae; letter-spacing: .08em; text-transform: uppercase; }
.wheel.win .ctr b { color: #3fcf79; } .wheel.lose .ctr b { color: #ff6a6e; }
.wheel.win #wArc { stroke: #3fcf79; } .wheel.lose #wArc { stroke: #ff6a6e; }
.upg-go { display: grid; justify-items: center; gap: 10px; }
.upg-go .btn { min-width: 280px; }
.tabs2 { display: flex; gap: 6px; }
.inv-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ---------------------------------------------------------------- tables, lists */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font: 500 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mu); padding: 0 14px 12px 0; }
.table td { padding: 13px 14px 13px 0; border-top: 1px solid var(--line); vertical-align: middle; font-weight: 500; }
.table .pos { color: var(--ok); } .table .neg { color: var(--bad); }
.scroll-x { overflow-x: auto; }
.empty { text-align: center; color: var(--mu); padding: 44px 10px; font-weight: 500; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.toolbar .input { width: auto; min-width: 160px; }
.toolbar .grow { flex: 1; }

/* ---------------------------------------------------------------- modal / drawer */
.modal-back { position: fixed; inset: 0; background: rgba(8, 6, 7, .66); backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 100; padding: 16px; animation: fade .18s; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--s1); border-radius: var(--rI); padding: 32px; animation: pop .26s cubic-bezier(.2, .9, .3, 1.1); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.modal.wide { width: min(900px, 100%); }
.modal h2 { font-size: 26px; margin-bottom: 6px; }
.modal .close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--s2); display: grid; place-items: center; transition: .2s; }
.modal .close:hover { background: var(--ink); color: #fff; }
@keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: scale(.96) translateY(10px); } }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: .25s; z-index: 200; max-width: calc(100vw - 32px); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.result { text-align: center; display: grid; gap: 14px; justify-items: center; }
.result .tile { width: 240px; }
.result .tile.big .art { aspect-ratio: 1.15; }
.reveal { animation: revealIn .55s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes revealIn { from { opacity: 0; transform: scale(.85); } }
.sheet-back { position: fixed; inset: 0; background: rgba(8, 6, 7, .66); backdrop-filter: blur(6px); display: grid; place-items: center; z-index: 110; padding: 16px; }
.sheet { width: min(460px, 100%); background: var(--s1); border-radius: var(--rI); padding: 30px; }
.sheet h2 { font-size: 24px; } .sheet .sub { margin: 8px 0 16px; font-size: 13px; }
.crop-stage { display: grid; place-items: center; } .crop-stage canvas { width: 100%; max-width: 320px; aspect-ratio: 1; border-radius: 50%; background: var(--s2); touch-action: none; cursor: grab; }
.zoom { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--mu); } .zoom input { flex: 1; accent-color: var(--red); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; } .sheet-actions { justify-content: flex-end; }
.ava-badge { display: none; }
.profile { display: flex; align-items: center; gap: 22px; }
.profile.drop { outline: 2px dashed var(--red); outline-offset: 6px; border-radius: 16px; }

/* ---------------------------------------------------------------- illustrations: transform-only animation */
.ill { width: 100%; height: 100%; }
.ill .spin { transform-origin: center; transform-box: fill-box; animation: spin 18s linear infinite; }
.ill .bob { transform-box: fill-box; transform-origin: center; animation: bob 4s ease-in-out infinite; }
.ill .bob2 { animation-delay: -1.3s; } .ill .bob3 { animation-delay: -2.6s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-9px); } }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* ---------------------------------------------------------------- splash: the mark is drawn, then filled like liquid */
#xload { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; align-content: center; gap: 22px; background: var(--ink); color: #fff; transition: opacity .55s ease, visibility .55s; animation: xlkill .01s 8s forwards; }
#xload::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .08; pointer-events: none; }
#xload.out { opacity: 0; visibility: hidden; }
#xload .xl-logo { position: relative; z-index: 2; width: min(210px, 52vw); height: auto; overflow: visible; }
#xload .xl-ghost path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: xld 1.15s cubic-bezier(.5, 0, .2, 1) forwards; }
#xload .xl-ghost path:nth-child(2) { animation-delay: .12s; } #xload .xl-ghost path:nth-child(3) { animation-delay: .24s; } #xload .xl-ghost path:nth-child(4) { animation-delay: .36s; }
#xload .xl-pct { position: relative; z-index: 2; font: 500 12px var(--mono); letter-spacing: .12em; color: #a2a2ae; }
#xload .xl-pct::after { content: " %"; }
@keyframes xld { to { stroke-dashoffset: 0; } }
@keyframes xlkill { to { visibility: hidden; opacity: 0; } }
html.xl-seen #xload { display: none; }

/* reveal on scroll */
[data-rv] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
[data-rv].in { opacity: 1; transform: none; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
html[data-motion="off"] [data-rv] { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .upg-stage { grid-template-columns: 1fr; } .wheelbox { order: -1; } .upg { grid-template-columns: 1fr; } .drops { max-height: 280px; } .drops .list { flex-direction: row; overflow: auto hidden; } .drop { min-width: 200px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .08); }
  .c8, .c7, .c6, .c5, .c4 { grid-column: span 12; } .c3 { grid-column: span 6; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; padding: 6px; }
  .side { position: fixed; inset: 6px auto 6px 6px; height: auto; width: 280px; transform: translateX(-110%); transition: transform .28s ease; z-index: 60; }
  .side.open { transform: none; box-shadow: 0 0 0 100vmax rgba(8, 6, 7, .6); }
  .burger { display: grid; }
  .main { padding: 8px 10px 60px; }
  .top { flex-wrap: wrap; align-items: center; }
  .top > .grow { order: 3; flex-basis: 100%; }
  .inv-pick { grid-template-columns: 1fr; }
  .blk { padding: 20px; border-radius: 22px; }
  .big { font-size: 34px; }
  .modal { padding: 24px; }
}
@media (max-width: 560px) { .c3 { grid-column: span 12; } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cases { grid-template-columns: 1fr; } .case { min-height: 380px; } .upg-go .btn { min-width: 0; width: 100%; } }

/* the corner ticks of the active nav item fade in instead of popping */
.nav a { transition: color .3s ease, background-color .3s ease, border-radius .3s ease; }
.nav a::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: linear-gradient(currentColor, currentColor) top left/3px 3px no-repeat, linear-gradient(currentColor, currentColor) top right/3px 3px no-repeat, linear-gradient(currentColor, currentColor) bottom left/3px 3px no-repeat, linear-gradient(currentColor, currentColor) bottom right/3px 3px no-repeat; }
.nav a.on::before { opacity: .6; }
.coin-float img { width: 200px; height: auto; display: block; animation: sway 7s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg) translateY(-4px); } }
.seg-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.seg-row:first-of-type { border-top: 0; }
.seg-row b { display: block; font-weight: 650; } .seg-row small { color: var(--mu); font-size: 12.5px; }
.tgl.dk-on { color: var(--tx); } .blk:not(.isl) .tgl .sw { background: var(--s4); }

.slotbox img { width: 52px; height: 52px; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }

/* arena: the caption under the belt says what dropped; items keep their silhouette on dark tiles */
.stage-ar { align-content: center; gap: 14px; }
.winbar { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 12px 14px; flex-wrap: wrap; text-align: center; color: #fff; font: 500 14px var(--sans); opacity: .9; }
.winbar .hint { color: #a2a2ae; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.winbar .lbl { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #a2a2ae; }
.winbar b { font: 600 22px/1.1 var(--head); letter-spacing: -.03em; }
.winbar .rr { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rc, #fff); padding: 5px 9px; border-radius: 8px; background: color-mix(in srgb, var(--rc, #fff) 16%, transparent); }
.winbar .dim { color: #a2a2ae; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.winbar .chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .07); font-weight: 600; font-size: 13px; }
.winbar .chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--rc, #888); }
.winbar.in { animation: winIn .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes winIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html[data-motion="off"] .winbar.in { animation: none; }
.roulette .belt .tile .art { background: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .13), transparent 62%), radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc, #8a94a6) 30%, transparent), transparent 70%), #212125; }
.roulette .tile .art img, html[data-theme="dark"] .tile .art img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .5)) drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
html[data-theme="dark"] .tile .art { background: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .11), transparent 62%), radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc, #8a94a6) 28%, transparent), transparent 70%), var(--s1); }

/* ---- result windows (cases, upgrader), instant sell */
.stage-ar { min-height: 340px; }
.belts { transition: opacity .35s ease, transform .35s ease; }
.belts.out { opacity: 0; transform: scale(.98); }
.winboard { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 6px 0; }
.winall { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.winall .dim { color: #a2a2ae; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.wincard { --w: 196px; position: relative; width: var(--w); padding: 14px 14px 16px; border-radius: 24px; background: #1a1a1d; border: 1px solid color-mix(in srgb, var(--rc, #888) 55%, transparent); color: #fff; display: grid; justify-items: center; gap: 8px; text-align: center; overflow: hidden; isolation: isolate; box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 44px color-mix(in srgb, var(--rc, #888) 26%, transparent); animation: wcIn .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 110ms); }
.wincard .wc-glow { position: absolute; inset: -20% -10% 38% -10%; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--rc, #888) 48%, transparent), transparent 68%); z-index: -1; }
.wincard .wc-art { width: 132px; height: 132px; display: grid; place-items: center; animation: wcFloat 4.5s ease-in-out infinite; }
.wincard .wc-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .4)) drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); }
.wincard .wc-art svg { width: 48px; height: 48px; color: var(--rc); }
.wincard .wc-rr { font: 600 10.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--rc, #fff); padding: 5px 9px; border-radius: 8px; background: color-mix(in srgb, var(--rc, #fff) 16%, transparent); }
.wincard .wc-nm { font: 600 16px/1.15 var(--head); letter-spacing: -.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; }
.wincard .wc-meta { display: flex; align-items: center; justify-content: center; gap: 12px; color: #a2a2ae; font-size: 12.5px; }
.wincard .wc-meta .coinval { color: #fff; }
.wincard .wc-sell { margin-top: 2px; width: 100%; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); color: #fff; }
.wincard .wc-sell:hover { color: #fff; border-color: #fff; }
.wincard .wc-sell.warn { background: var(--red); border-color: var(--red); }
.wincard .wc-done { color: #a2a2ae; font: 500 12px var(--mono); letter-spacing: .06em; min-height: 0; }
.wincard.sold { opacity: .6; filter: saturate(.5); }
.wincard.sold .wc-art { animation: none; }
@keyframes wcIn { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes wcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
html[data-motion="off"] .wincard, html[data-motion="off"] .wincard .wc-art { animation: none; }
.btn.warn { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
/* upgrader */
.upg-stage { position: relative; }
.stage-pop { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; border-radius: var(--rI); background: rgba(10, 8, 9, .72); backdrop-filter: blur(6px); animation: popIn .35s ease both; padding: 14px; }
.stage-pop.out { opacity: 0; transition: opacity .25s ease; }
.stage-pop .pop-in { display: grid; justify-items: center; gap: 12px; color: #fff; }
.stage-pop .lbl { color: #a2a2ae; }
.losecard { width: 240px; padding: 22px 18px; border-radius: 24px; background: #1a1a1d; border: 1px solid rgba(255, 255, 255, .1); text-align: center; display: grid; gap: 8px; animation: wcIn .5s cubic-bezier(.2, .8, .2, 1) both; }
.losecard .lc-t { font: 600 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #a2a2ae; }
.losecard .lc-v { font: 600 30px var(--head); letter-spacing: -.03em; }
.losecard .lc-s { font-size: 12.5px; color: #a2a2ae; }
@keyframes popIn { from { opacity: 0; } to { opacity: 1; } }
.upg-go .tgl { color: var(--tx); }
.goalbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.goalown { display: grid; grid-template-columns: 120px 1fr; gap: 8px; margin-top: 10px; }
.goalown[hidden] { display: none; }
@media (max-width: 560px) { .wincard { --w: calc(50% - 7px); } .wincard .wc-art { width: 96px; height: 96px; } }
.stage-pop .wincard { --w: 188px; padding: 12px 12px 14px; gap: 6px; }
.stage-pop .wincard .wc-art { width: 100px; height: 100px; }
.stage-pop .wincard .wc-nm { min-height: 0; font-size: 15px; }
.stage-pop .pop-in { gap: 8px; }
.stage-pop .btn-row { margin-top: 6px !important; }
.stage-pop .btn.primary { height: 38px; }
.upg-sel { gap: 16px; }
.upg-sel .grow { padding-left: 4px; }

/* ---- live strips (cases and upgrader): rows never redraw, new ones slide in */
@keyframes dropFresh { from { opacity: 0; max-height: 0; transform: translateY(-10px); } to { opacity: 1; max-height: 90px; transform: none; } }
.drop { animation: none; overflow: hidden; grid-template-columns: 46px 1fr; gap: 12px; }
.drop.fresh { animation: dropFresh .55s cubic-bezier(.2, .8, .2, 1) both; }
.drop .t { font: 600 12.5px/1.25 var(--sans); text-transform: none; letter-spacing: 0; color: #fff; }
.drop .t small { margin-top: 2px; }
.drop .t small .lost { color: #8b8b96; } .drop .t small .won { color: var(--rc); }
.drop .im { order: -1; }
html[data-motion="off"] .drop.fresh, html[data-motion="off"] .tk.fresh { animation: none; }
.tickbar { display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.tk-lbl { flex: none; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; border-radius: 16px; background: var(--ink); color: #fff; font: 600 10px var(--mono); letter-spacing: .14em; }
.tk-lbl i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: tkPulse 1.8s ease-in-out infinite; }
@keyframes tkPulse { 50% { opacity: .3; } }
.tk-list { display: flex; gap: 8px; overflow: hidden; flex: 1; min-width: 0; border-radius: 16px; }
.tk { position: relative; flex: none; width: 196px; height: 68px; border-radius: 16px; background: var(--ink); color: #fff; overflow: hidden; border-left: 3px solid var(--rc, #666); }
.tk .nm { font: 600 13px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk .muted { font-size: 11px; color: #a2a2ae; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-f, .tk-b { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 10px; transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .25s ease; }
.tk-b { transform: translateY(100%); opacity: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 34%, #141416), #141416 70%); }
.tk-b .ci { width: 48px; height: 48px; flex: none; display: grid; place-items: center; }
.tk-b .ci img, .tk-b .ci svg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.tk:hover .tk-b { transform: none; opacity: 1; }
.tk:hover .tk-f { transform: translateY(-30%); opacity: 0; }
.tk.fresh { animation: tkFresh .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tkFresh { from { opacity: 0; width: 0; margin-right: -8px; } to { opacity: 1; width: 196px; margin-right: 0; } }

/* ---- reveal: one drop per screen */
.reveal { display: grid; justify-items: center; gap: 16px; position: relative; width: 100%; animation: rvIn .5s cubic-bezier(.2, .8, .2, 1) both; }
.reveal.out { animation: rvOut .22s ease both; }
@keyframes rvIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rvOut { to { opacity: 0; transform: scale(.97); } }
.rv-top { width: min(100%, 560px); display: flex; justify-content: flex-end; }
.rv-cnt { font: 500 12px var(--mono); letter-spacing: .05em; color: #a2a2ae; padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.rv-cnt b { color: #fff; font-weight: 600; }
.rv-frame { position: relative; width: min(100%, 440px); margin-top: -4px; }
.rv-card { position: relative; height: 300px; border-radius: 24px; background: #101012; border: 1px solid color-mix(in srgb, var(--rc, #888) 42%, transparent); overflow: hidden; padding: 20px 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; box-shadow: 0 34px 80px rgba(0, 0, 0, .55), 0 0 70px color-mix(in srgb, var(--rc, #888) 20%, transparent); isolation: isolate; }
.rv-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--rc, #888) 30%, transparent), transparent 66%); }
.rv-dash { position: absolute; top: 18px; left: 20px; width: 24px; height: 5px; border-radius: 3px; background: var(--rc, #888); }
.rv-price { position: absolute; top: 12px; right: 18px; font: 600 14px var(--mono); }
.rv-price .coinval { color: #fff; gap: 6px; }
.rv-art { position: absolute; left: 50%; top: 26px; width: 210px; height: 190px; margin-left: -105px; display: grid; place-items: center; animation: wcFloat 4.6s ease-in-out infinite; }
.rv-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .45)) drop-shadow(0 18px 18px rgba(0, 0, 0, .55)); }
.rv-art svg { width: 64px; height: 64px; color: var(--rc); }
.rv-nm { position: relative; font: 600 24px/1.1 var(--head); letter-spacing: -.035em; color: #fff; }
.rv-meta { display: flex; align-items: center; gap: 12px; color: #a2a2ae; font-size: 13px; }
.rv-rr { font: 600 11px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--rc, #fff); padding: 5px 9px; border-radius: 8px; background: color-mix(in srgb, var(--rc, #fff) 16%, transparent); }
.cn { position: absolute; width: 50px; height: 12px; border-radius: 3px; background: var(--rc, #888); box-shadow: 0 0 20px color-mix(in srgb, var(--rc, #888) 85%, transparent); z-index: 2; animation: cnIn .6s cubic-bezier(.2, .8, .2, 1) both .15s; }
.cn.tl { top: 2px; left: -34px; transform: rotate(35deg); } .cn.tr { top: 2px; right: -34px; transform: rotate(-35deg); }
.cn.bl { bottom: 2px; left: -34px; transform: rotate(-35deg); } .cn.br { bottom: 2px; right: -34px; transform: rotate(35deg); }
@keyframes cnIn { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
.rv-act { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.rv-act .btn { min-width: 180px; }
.rv-bulk { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.btn.ghost { background: transparent; }
.rv-banner { font: 600 12px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--rc); margin: -2px 0 -4px; text-shadow: 0 0 18px color-mix(in srgb, var(--rc) 80%, transparent); animation: rvIn .7s ease both .2s; }
/* rare drops: shine over the card; legendary and mythic also get rotating rays and sparks */
.reveal.big .rv-card::after, .reveal.mega .rv-card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .16) 48%, transparent 60%); transform: translateX(-120%); animation: rvShine 3.6s ease-in-out infinite 1s; }
@keyframes rvShine { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
.reveal.mega .rv-card { box-shadow: 0 34px 80px rgba(0, 0, 0, .55), 0 0 110px color-mix(in srgb, var(--rc, #888) 38%, transparent); animation: rvPulse 2.8s ease-in-out infinite; }
@keyframes rvPulse { 50% { box-shadow: 0 34px 80px rgba(0, 0, 0, .55), 0 0 150px color-mix(in srgb, var(--rc, #888) 55%, transparent); } }
.rv-rays { position: absolute; left: 50%; top: 46%; width: 880px; height: 880px; margin: -440px 0 0 -440px; border-radius: 50%; pointer-events: none; z-index: -1; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 22%, transparent) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 62%); mask-image: radial-gradient(circle, #000 0, transparent 62%); animation: spin 36s linear infinite; }
.rv-sparks { position: absolute; inset: -30px; pointer-events: none; z-index: 3; }
.rv-sparks i { position: absolute; left: var(--x); bottom: 8%; width: 5px; height: 5px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 10px var(--rc); opacity: 0; animation: spark var(--d) ease-out infinite var(--l); }
@keyframes spark { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-280px) scale(1.2); } }
html[data-motion="off"] .reveal, html[data-motion="off"] .reveal * { animation: none !important; }
@media (max-width: 560px) { .rv-frame { width: 100%; } .rv-card { height: 270px; } .cn { display: none; } .rv-act .btn { min-width: 0; flex: 1; } }

.drop { flex: none; }
.drops .list { scrollbar-width: thin; }

/* ---------------------------------------------------------------- scripts tab (cabinet): the shared editor in the site's design language.
   The editor stylesheet is written for the admin panel (its own tokens); here every rule is restated with the cabinet tokens. */
#p-scripts .se { grid-template-columns: 330px minmax(0, 1fr); gap: 8px; align-items: start; }
#p-scripts .se-list { position: sticky; top: 16px; padding: 20px; gap: 16px; border-radius: var(--rI); background: var(--s1); border: 1px solid var(--line); max-height: calc(100vh - 110px); box-shadow: none; }
#p-scripts .se-list-head { gap: 8px; align-items: center; }
#p-scripts .se-search { height: 44px; border-radius: 12px; border: 1px solid var(--line2); background: var(--s1); color: var(--tx); font: 500 14px var(--sans); padding: 0 14px; transition: border-color .2s, box-shadow .2s; }
#p-scripts .se-search::placeholder { color: var(--mu2); }
#p-scripts .se-search:hover { border-color: var(--line3); }
#p-scripts .se-search:focus { border-color: var(--tx); box-shadow: 0 0 0 4px var(--redbg); }
#p-scripts .se-new { height: 44px; padding: 0 18px; border-radius: 12px; font-size: 13px; }
#p-scripts .se-items { gap: 4px; margin: 0 -8px; padding: 0 8px; scrollbar-width: thin; }
#p-scripts .se-item { position: relative; padding: 13px 14px 13px 16px; border-radius: 16px; gap: 6px; color: var(--tx); transition: background-color .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
#p-scripts .se-item:hover { background: var(--s2); transform: translateX(2px); }
#p-scripts .se-item.on { background: var(--s2); }
#p-scripts .se-item::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--red); opacity: 0; transform: scaleY(.4); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
#p-scripts .se-item.on::before { opacity: 1; transform: none; }
#p-scripts .se-item-top b { font: 650 14px var(--sans); letter-spacing: -.01em; }
#p-scripts .se-item-sub { font: 500 11px var(--mono); color: var(--mu); letter-spacing: 0; }
#p-scripts .se-none { color: var(--mu); font: 500 13.5px var(--sans); padding: 28px 8px; }
#p-scripts .badge { position: static; display: inline-flex; align-items: center; gap: 6px; height: 22px; min-width: 0; padding: 0 9px; border-radius: 999px; background: var(--s3); color: var(--mu); font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: none; }
#p-scripts .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#p-scripts .badge.ok { background: var(--okbg); color: var(--ok); }
#p-scripts .badge.warn { background: rgba(217, 119, 6, .14); color: var(--warn); }
#p-scripts .badge.bad { background: var(--redbg); color: var(--bad); }

#p-scripts .se-pane { padding: 28px; gap: 18px; border-radius: var(--rI); background: var(--s1); border: 1px solid var(--line); }
#p-scripts .se-head { gap: 10px; }
#p-scripts .se-title { gap: 12px; }
#p-scripts .se-name { margin-left: -10px; padding: 4px 10px; border-radius: 14px; font: 600 30px/1.1 var(--head); letter-spacing: -.04em; color: var(--tx); transition: border-color .2s, background-color .2s; }
#p-scripts .se-name:hover { border-color: var(--line2); }
#p-scripts .se-name:focus { border-color: var(--tx); background: var(--s2); }
#p-scripts .se-meta { font: 500 11.5px var(--mono); color: var(--mu); }
#p-scripts .se-meta b { color: var(--tx); font-weight: 600; }
#p-scripts .se-desc { height: 46px; border-radius: 12px; border: 1px solid var(--line2); background: var(--s1); color: var(--tx); font: 500 14px var(--sans); padding: 0 14px; transition: border-color .2s, box-shadow .2s; }
#p-scripts .se-desc::placeholder { color: var(--mu2); }
#p-scripts .se-desc:focus { border-color: var(--tx); box-shadow: 0 0 0 4px var(--redbg); }
#p-scripts .se-hint { font: 500 13px/1.55 var(--sans); color: var(--mu); padding: 12px 16px; background: var(--s2); border-radius: 14px; border-left: 3px solid var(--red); }

#p-scripts .se-tabs { gap: 6px; border: 0; padding: 0; }
#p-scripts .se-tab { height: 34px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--line2); background: var(--s1); color: var(--mu); font: 500 12px var(--mono); transition: color .2s, border-color .2s, background-color .2s, transform .25s cubic-bezier(.2, .8, .2, 1); }
#p-scripts .se-tab:hover { color: var(--tx); border-color: var(--tx); transform: translateY(-1px); }
#p-scripts .se-tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
#p-scripts .se-tab i { color: var(--red); }
#p-scripts .se-add { color: var(--red); border-style: dashed; }
#p-scripts .se-x:hover { background: var(--redbg); color: var(--bad); }
#p-scripts .se-newfile { height: 34px; border-radius: 10px; border: 1px solid var(--red); background: var(--s1); color: var(--tx); font: 500 12px var(--mono); padding: 0 12px; }

#p-scripts .se-code { height: min(60vh, 620px); border-radius: 24px; border: 1px solid rgba(255, 255, 255, .06); background: #0f0b0c; }
#p-scripts .se-gutter, #p-scripts .se-text { font: 13px/21px var(--mono); padding-top: 16px; padding-bottom: 16px; }
#p-scripts .se-gutter { min-width: 52px; color: #6f6f7b; opacity: 1; border-right: 1px solid rgba(255, 255, 255, .07); }
#p-scripts .se-text { color: #ecebef; caret-color: var(--red); padding-left: 16px; }
#p-scripts .se-text::selection { background: rgba(251, 21, 25, .38); }
#p-scripts .se-binary { color: #a2a2ae; }

#p-scripts .se-check-head { font: 600 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
#p-scripts .se-check-head.ok { color: var(--ok); } #p-scripts .se-check-head.bad { color: var(--bad); }
#p-scripts .se-find { background: var(--s2); border-radius: 14px; padding: 10px 14px; color: var(--tx); transition: background-color .2s; }
#p-scripts .se-find:hover { background: var(--s3); }
#p-scripts .se-find.bad { border-left-color: var(--bad); } #p-scripts .se-find.warn { border-left-color: var(--warn); }
#p-scripts .se-find-where, #p-scripts .se-find code { color: var(--mu); }

#p-scripts .se-actions { padding-top: 16px; border-top: 1px solid var(--line); align-items: center; }
#p-scripts .se-dirty { display: inline-flex; align-items: center; gap: 7px; font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--warn); }
#p-scripts .se-dirty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: tkPulse 1.6s ease-in-out infinite; }
#p-scripts .se-reject input { height: 34px; border-radius: 10px; border: 1px solid var(--line2); background: var(--s1); color: var(--tx); padding: 0 12px; }

#p-scripts .se-empty { padding: 96px 20px; gap: 10px; color: var(--mu); }
#p-scripts .se-empty::before { content: ""; width: 80px; height: 80px; border-radius: 26px; margin-bottom: 10px; background: var(--s2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb1519' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='m16 18 6-6-6-6'/><path d='m8 6-6 6 6 6'/></svg>") center / 34px no-repeat; }
#p-scripts .se-empty b { font: 600 24px var(--head); letter-spacing: -.035em; color: var(--tx); }
#p-scripts .se-empty span { max-width: 340px; font: 500 14px/1.5 var(--sans); }

#p-scripts .se-create { max-width: 640px; gap: 18px; }
#p-scripts .se-create h2 { font: 600 28px var(--head); letter-spacing: -.04em; color: var(--tx); }
#p-scripts .se-create label { gap: 8px; font: 600 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--mu); }
#p-scripts .se-create input:not([type=checkbox]):not([type=file]) { height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line2); background: var(--s1); color: var(--tx); font: 500 15px var(--sans); letter-spacing: 0; text-transform: none; transition: border-color .2s, box-shadow .2s; }
#p-scripts .se-create input:not([type=checkbox]):not([type=file]):focus { border-color: var(--tx); box-shadow: 0 0 0 4px var(--redbg); }
#p-scripts .se-create input[type=file] { width: 100%; padding: 18px; border: 1.5px dashed var(--line3); border-radius: 16px; background: var(--s2); color: var(--mu); font: 500 13px var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer; transition: border-color .2s, background-color .2s; }
#p-scripts .se-create input[type=file]:hover { border-color: var(--red); background: var(--redbg); }
#p-scripts .se-create input[type=file]::file-selector-button { height: 36px; padding: 0 16px; margin-right: 14px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font: 650 12.5px var(--sans); cursor: pointer; }
#p-scripts .se-create .se-check-row { display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font: 500 14px var(--sans); color: var(--tx); }
@media (max-width: 900px) { #p-scripts .se { grid-template-columns: minmax(0, 1fr); } #p-scripts .se-list { position: static; max-height: 340px; } #p-scripts .se-pane { padding: 18px; } #p-scripts .se-name { font-size: 24px; } }

#p-scripts .se-list { grid-template-columns: minmax(0, 1fr); }
#p-scripts .se-list > * { min-width: 0; }
#p-scripts .se-filter { width: 100%; }
#p-scripts .se-filter button { padding-left: 4px; padding-right: 4px; }
#p-scripts .se-pane { min-height: 440px; }

html[data-theme="dark"] #p-scripts .se-tab.on { background: var(--s3); border-color: var(--line3); color: var(--tx); }
html[data-theme="dark"] #p-scripts .se-create input[type=file]::file-selector-button { background: var(--s3); }

/* ---- top-up (PayHot) */
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; margin-top: 16px; }
.pack { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--s2); color: var(--tx); cursor: pointer; text-align: left; font: inherit; transition: border-color .2s, transform .2s, background .2s; }
.pack b { font: 700 21px/1.1 var(--head); letter-spacing: -.02em; }
.pack span { font: 500 12px var(--mono); color: var(--mu); letter-spacing: .02em; }
.pack:hover { border-color: var(--red); transform: translateY(-2px); background: var(--s1); }
.pack:active { transform: translateY(0) scale(.98); }
.paylist { display: grid; gap: 6px; margin-top: 12px; }
.payrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r3); background: var(--s2); font-size: 13px; }
.payrow .grow { flex: 1; }
.payrow .pc { font-weight: 650; }
html[data-motion="off"] .pack { transition: none; }

/* ---- header: balance + top-up button */
.walletpill .topup { height: 36px; padding: 0 14px 0 11px; border-radius: 10px; border: 0; display: inline-flex; align-items: center; gap: 6px; background: var(--redg); color: #fff; font: 600 13px var(--sans); cursor: pointer; transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.walletpill .topup:hover { background: #fff; color: #000; box-shadow: 0 6px 20px rgba(251, 21, 25, .3); }
.walletpill .topup:active { transform: scale(.95); }
@media (max-width: 560px) { .walletpill .topup .tl { display: none; } .walletpill .topup { padding: 0 11px; } }

/* ---- top-up window */
.modal.tu-modal { width: min(500px, 100%); padding: 30px 28px 26px; }
.tu h2 { font-size: 28px; letter-spacing: -.03em; margin: 12px 0 4px; }
.tu .sub { font-size: 14px; margin: 0; }
.tu-sec { display: flex; align-items: center; gap: 9px; margin: 22px 0 10px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.tu-ico { position: relative; display: inline-block; width: 48px; height: 48px; flex: none; }
.tu-ico > img:first-child { width: 48px; height: 48px; display: block; border-radius: 18px; }
.tu-ico .net { position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; border-radius: 8px; box-shadow: 0 0 0 3px var(--s1); }
.tu-ico.lg, .tu-ico.lg > img:first-child { width: 72px; height: 72px; border-radius: 26px; }
.tu-ico.lg .net { width: 30px; height: 30px; border-radius: 11px; right: -7px; bottom: -7px; box-shadow: 0 0 0 4px var(--s1); }
.tu-method, .tu-wcard { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: var(--r2); border: 1.5px solid var(--line2); background: var(--s2); color: var(--tx); font: inherit; text-align: left; cursor: pointer; position: relative; transition: border-color .2s, background .2s, transform .2s; }
.tu-method { border-color: var(--red); background: var(--redbg); cursor: default; }
.tu-mt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tu-mt b { font: 650 16px var(--head); letter-spacing: -.01em; }
.tu-mt small { font: 500 12px var(--mono); color: var(--mu); letter-spacing: .02em; }
.tu-tag { padding: 4px 9px; border-radius: 7px; background: var(--ink); color: #fff; font: 600 11px var(--sans); }
.tu-chk { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--redg); color: #fff; flex: none; }
.tu-wcard { margin-top: 16px; }
.tu-wcard:hover { border-color: var(--red); transform: translateY(-2px); background: var(--s1); }
.tu-wcard:active { transform: scale(.99); }
.tu-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 8px; }
.tu-pack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 13px; border-radius: var(--r3); border: 1.5px solid var(--line); background: var(--s2); color: var(--tx); font: inherit; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.tu-pack b { font: 700 17px/1.1 var(--head); letter-spacing: -.02em; }
.tu-pack span { font: 500 11.5px var(--mono); color: var(--mu); }
.tu-pack:hover { border-color: var(--line3); transform: translateY(-1px); }
.tu-pack:active { transform: scale(.97); }
.tu-pack.on { border-color: var(--red); background: var(--redbg); }
.tu-amt { display: flex; align-items: stretch; gap: 8px; margin-top: 10px; }
.tu-amt label { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 16px; min-width: 0; border-radius: var(--r2); border: 1.5px solid var(--line2); background: var(--s1); transition: border-color .15s, box-shadow .15s; }
.tu-amt label:focus-within { border-color: var(--red); box-shadow: 0 0 0 4px var(--redbg); }
.tu-amt input { flex: 1; min-width: 0; width: 100%; height: 56px; border: 0; outline: 0; background: transparent; color: var(--tx); font: 700 26px var(--head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tu-amt label span { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--mono); color: var(--mu); white-space: nowrap; }
.tu-amt label span svg { width: 16px; height: 16px; }
.tu-step { width: 56px; border-radius: var(--r2); border: 1.5px solid var(--line2); background: var(--s2); color: var(--tx); display: grid; place-items: center; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.tu-step:hover { border-color: var(--red); background: var(--redbg); }
.tu-step:active { transform: scale(.94); }
.tu-sum { margin-top: 14px; padding: 6px 16px; border-radius: var(--r2); background: var(--s2); }
.tu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; border-top: 1px solid var(--line); }
.tu-row:first-child { border-top: 0; }
.tu-row > span { color: var(--mu); }
.tu-row > b { font-weight: 650; font-variant-numeric: tabular-nums; }
.tu-total > b { font: 700 18px var(--head); letter-spacing: -.01em; }
.tu-err { margin-top: 12px; padding: 11px 14px; border-radius: var(--r3); background: var(--redbg); color: var(--bad); font-size: 13.5px; font-weight: 500; }
.tu-err[hidden] { display: none; }
.tu-go { width: 100%; height: 56px; margin-top: 16px; border-radius: var(--r2); font-size: 16px; gap: 10px; }
.tu-go:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.tu-note { display: flex; gap: 9px; align-items: flex-start; margin: 14px 2px 0; color: var(--mu); font-size: 12.5px; line-height: 1.5; }
.tu-note svg { flex: none; margin-top: 2px; color: var(--ok); }
.tu-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; }
.tu-open { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: var(--r3); border: 1.5px dashed var(--red); background: var(--redbg); }
.tu-open div { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.tu-open span { color: var(--mu); font-size: 12.5px; }
/* waiting */
.tu-wait, .tu-done, .tu-fail { text-align: center; }
.tu-wait .sub { margin-top: 6px; }
.tu-orbwrap { position: relative; width: 112px; height: 112px; margin: 6px auto 8px; display: grid; place-items: center; }
.tu-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--red); border-right-color: var(--red); animation: spin 1.3s linear infinite; }
.tu-orbwrap::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--redbg); animation: tuPulse 2s ease-in-out infinite; }
.tu-orbwrap .tu-ico { z-index: 1; }
@keyframes tuPulse { 50% { transform: scale(.92); opacity: .5; } }
.tu-order { margin: 18px 0 0; padding: 4px 16px; border-radius: var(--r2); background: var(--s2); text-align: left; }
.tu-order > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.tu-order > div:first-child { border-top: 0; }
.tu-order span { color: var(--mu); }
.tu-order code { font: 500 12.5px var(--mono); color: var(--tx); }
.tu-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 18px 0 0; padding: 0; }
.tu-steps li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11.5px; color: var(--mu2); line-height: 1.25; position: relative; }
.tu-steps i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line2); background: var(--s1); display: grid; place-items: center; font-style: normal; position: relative; z-index: 1; }
.tu-steps li::before { content: ""; position: absolute; top: 10px; right: 50%; width: 100%; height: 2px; background: var(--line2); }
.tu-steps li:first-child::before { display: none; }
.tu-steps li.done, .tu-steps li.now { color: var(--tx); }
.tu-steps li.done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.tu-steps li.done::before, .tu-steps li.now::before { background: var(--ok); }
.tu-steps li.now i { border-color: var(--red); animation: tuBlink 1.4s ease-in-out infinite; }
.tu-steps li.now i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
@keyframes tuBlink { 50% { box-shadow: 0 0 0 6px var(--redbg); } }
.tu-actions { display: flex; gap: 8px; margin-top: 20px; }
.tu-actions .btn { flex: 1; height: 50px; border-radius: var(--r3); gap: 8px; }
.tu-wait .tu-note { justify-content: center; text-align: left; }
/* done / failed */
.tu-ok { width: 84px; height: 84px; margin: 6px auto 4px; }
.tu-ok svg { width: 100%; height: 100%; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tu-ok svg circle { stroke: var(--ok); fill: var(--okbg); stroke-dasharray: 151; stroke-dashoffset: 151; animation: tuDraw .6s .05s cubic-bezier(.3, .7, .3, 1) forwards; }
.tu-ok svg path { stroke: var(--ok); stroke-dasharray: 40; stroke-dashoffset: 40; animation: tuDraw .4s .45s ease-out forwards; }
.tu-ok.bad svg circle { stroke: var(--bad); fill: var(--redbg); }
.tu-ok.bad svg path { stroke: var(--bad); }
@keyframes tuDraw { to { stroke-dashoffset: 0; } }
.tu-gain { margin-top: 6px; font: 800 52px/1 var(--head); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ok); }
.tu-gain-l { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 8px 0 12px; color: var(--mu); font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.tu-gain-l svg { width: 16px; height: 16px; }
.tu-done .tu-go, .tu-fail .tu-actions { margin-top: 18px; }
.tu-fail .tu-order { margin-top: 16px; }
html[data-motion="off"] .tu-ring, html[data-motion="off"] .tu-orbwrap::after, html[data-motion="off"] .tu-steps li.now i { animation: none; }
html[data-motion="off"] .tu-ok svg circle, html[data-motion="off"] .tu-ok svg path { animation: none; stroke-dashoffset: 0; }
@media (max-width: 560px) { .modal.tu-modal { padding: 24px 18px 20px; } .tu-steps li { font-size: 10.5px; } .tu-gain { font-size: 44px; } }