:root {
--bg: #0b0c0e;
--bg-2: #101215;
--surface: #16181c;
--surface-2: #1d2026;
--surface-3: #262a31;
--line: rgba(255, 255, 255, 0.08);
--line-2: rgba(255, 255, 255, 0.14);
--text: #f4f4f1;
--muted: #8e929b;
--muted-2: #61656e;
--yellow: #f2d92b;
--yellow-2: #ffe94d;
--yellow-ink: #121212;
--cyan: #19b8f6;
--red: #ec3b32;
--green: #36d77f;
--violet: #9b6bff;
--radius: 16px;
--radius-sm: 12px;
--display: "Oswald", "Bebas Neue", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
--body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--spring: cubic-bezier(.34, 1.56, .64, 1);
--ease: cubic-bezier(.2, .8, .2, 1);
--safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body {
font: 15px/1.4 var(--body);
-webkit-font-smoothing: antialiased;
overscroll-behavior: none;
user-select: none;
-webkit-user-select: none;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
#app { min-height: 100%; }
body::before {
content: "";
position: fixed; inset: 0; pointer-events: none; z-index: 0;
background:
linear-gradient(115deg, transparent 0 58%, rgba(25, 184, 246, .07) 58% 61%, transparent 61%),
linear-gradient(115deg, transparent 0 64%, rgba(242, 217, 43, .06) 64% 65.5%, transparent 65.5%),
radial-gradient(120% 60% at 100% 0%, rgba(242, 217, 43, .08), transparent 60%),
var(--bg);
}
.screen {
position: relative; z-index: 1;
padding: 12px 16px calc(96px + var(--safe-bottom));
max-width: 560px; margin: 0 auto;
animation: screen-in .35s var(--ease);
}
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.display, h1, h2, h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0; }
h1 { font-size: 34px; line-height: 1; font-weight: 700; }
h2 { font-size: 22px; line-height: 1.1; font-weight: 700; }
h3 { font-size: 15px; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.large-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 0 14px; }
.large-title .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 2px 10px; }
.section-head h3 { display: flex; align-items: center; gap: 8px; }
.section-head h3::before { content: ""; width: 3px; height: 14px; background: var(--yellow); transform: skewX(-15deg); }
.tag {
display: inline-flex; align-items: center; gap: 6px;
font: 600 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
padding: 6px 12px 5px; color: var(--yellow-ink); background: var(--yellow);
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.tag.cyan { background: var(--cyan); color: #04121a; }
.tag.dark { background: var(--surface-3); color: var(--text); }
.tag.red { background: var(--red); color: #fff; }
.press { transition: transform .45s var(--spring), opacity .2s, filter .2s; will-change: transform; }
.press:active, .press.is-pressed { transform: scale(.96); transition: transform .12s var(--ease); }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 50px; padding: 0 20px; border-radius: 14px; width: 100%;
font: 600 17px/1 var(--body); letter-spacing: -.01em;
background: var(--surface-3); color: var(--text);
}
.btn.primary {
background: linear-gradient(180deg, var(--yellow-2), var(--yellow));
color: var(--yellow-ink);
box-shadow: 0 8px 24px -10px rgba(242, 217, 43, .7), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn.cyan { background: var(--cyan); color: #04121a; }
.btn.ghost { background: rgba(255,255,255,.06); }
.btn.small { height: 36px; border-radius: 11px; font-size: 15px; padding: 0 14px; width: auto; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn.slanted.is-disabled { font-size: 16px; line-height: 1.1; text-align: center; }
.btn.slanted { border-radius: 4px; font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 20px;
clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.card {
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)) , var(--surface);
border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
}
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 52px; position: relative; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: var(--line); }
.row.plain + .row.plain::before { left: 14px; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .subtitle { font-size: 13px; color: var(--muted); margin-top: 2px; }
.row .value { color: var(--muted); font-variant-numeric: tabular-nums; }
.icon-sq {
width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none;
background: var(--surface-3); font-size: 17px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; min-width: 0; }
.stat .k { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v { font: 700 22px/1.15 var(--display); margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .v.yellow { color: var(--yellow); }
.stat .v.cyan { color: var(--cyan); }
.bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--yellow); border-radius: inherit; transition: width .8s var(--ease); }
.bar.cyan > i { background: var(--cyan); }
.bar.green > i { background: var(--green); }
.bar.thin { height: 5px; }
.segmented {
position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
background: rgba(118,118,128,.24); border-radius: 10px; padding: 2px; margin: 4px 0 6px;
}
.segmented button { position: relative; z-index: 1; height: 32px; font-size: 14px; font-weight: 600; color: var(--text); border-radius: 8px; }
.segmented .thumb {
position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 2px; border-radius: 8px;
background: #636366; box-shadow: 0 3px 8px rgba(0,0,0,.25);
transition: transform .35s var(--spring);
}
.bp-hero {
position: relative; overflow: hidden; border-radius: 20px; padding: 18px 16px 16px;
background:
linear-gradient(115deg, transparent 0 52%, rgba(242,217,43,.18) 52% 54%, transparent 54% 57%, rgba(242,217,43,.10) 57% 58%, transparent 58%),
radial-gradient(140% 120% at 100% 0%, rgba(25,184,246,.28), transparent 55%),
linear-gradient(160deg, #1b1e24, #0f1114);
border: 1px solid var(--line-2);
}
.bp-hero .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bp-hero h1 { margin-top: 10px; font-size: 38px; }
.bp-hero h1 span { color: var(--yellow); }
.bp-hero .timer { font-size: 13px; color: var(--muted); margin-top: 6px; }
.bp-level {
display: flex; align-items: center; gap: 14px; margin-top: 16px;
}
.lvl-badge {
position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center;
font: 700 28px/1 var(--display); color: var(--yellow-ink); background: var(--yellow);
clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.lvl-badge small { position: absolute; top: 9px; font: 600 9px/1 var(--display); letter-spacing: .1em; }
.lvl-badge b { margin-top: 8px; }
.bp-level .grow { flex: 1; min-width: 0; }
.bp-level .xp { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.bp-level .xp b { color: var(--text); }
.bp-actions { display: grid; gap: 10px; margin-top: 16px; }
.premium-active { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(25,184,246,.12); border: 1px solid rgba(25,184,246,.35); color: #bfeaff; font-weight: 600; }
.track-head { display: grid; grid-template-columns: 1fr 52px 1fr; gap: 10px; margin: 22px 0 8px; text-align: center; }
.track-head span { font: 600 13px/1 var(--display); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.track-head span:last-child { color: var(--yellow); }
.track { position: relative; }
.track::before {
content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%; width: 4px; transform: translateX(-50%);
background: var(--surface-3); border-radius: 4px;
}
.track .fill { position: absolute; top: 24px; left: 50%; width: 4px; transform: translateX(-50%); background: var(--yellow); border-radius: 4px; box-shadow: 0 0 14px rgba(242,217,43,.6); transition: height 1s var(--ease); }
.lvl-row { position: relative; display: grid; grid-template-columns: 1fr 52px 1fr; gap: 10px; align-items: center; padding: 6px 0; }
.lvl-node {
position: relative; z-index: 1; justify-self: center; width: 40px; height: 40px; display: grid; place-items: center;
font: 700 17px/1 var(--display); background: var(--surface-2); border: 2px solid var(--surface-3); color: var(--muted);
clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.lvl-row.reached .lvl-node { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); }
.lvl-row.current .lvl-node { box-shadow: 0 0 0 4px rgba(242,217,43,.25); }
.reward {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
height: 74px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); overflow: hidden;
}
.reward .amt { font: 700 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.reward .lbl { font-size: 11px; color: var(--muted); }
.reward .st { position: absolute; top: 6px; right: 7px; font-size: 13px; }
.reward.premium { background: linear-gradient(160deg, rgba(242,217,43,.12), rgba(242,217,43,.02)), var(--surface); border-color: rgba(242,217,43,.25); }
.reward.locked, .reward.need_premium { opacity: .55; }
.reward.claimed { opacity: .4; }
.reward.claimed .amt { text-decoration: line-through; text-decoration-thickness: 2px; }
.reward.available { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow), 0 10px 26px -12px rgba(242,217,43,.9); animation: glow 1.8s ease-in-out infinite; }
.reward.available::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-100%); animation: shine 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 1px var(--yellow), 0 10px 30px -8px rgba(242,217,43,1); } }
@keyframes shine { 60%, 100% { transform: translateX(100%); } }
.reward.pop { animation: pop .5s var(--spring); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.quest { display: flex; align-items: center; gap: 12px; padding: 14px; }
.quest + .quest { border-top: 1px solid var(--line); }
.quest .emoji { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; background: var(--surface-3); flex: none; }
.quest .grow { flex: 1; min-width: 0; }
.quest .t { font-weight: 600; font-size: 15px; line-height: 1.25; }
.quest .meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.quest .meta .bar { flex: 1; }
.quest .meta .cnt { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.xp-chip { flex: none; font: 600 13px/1 var(--display); letter-spacing: .04em; padding: 7px 9px 6px; border-radius: 9px; background: rgba(242,217,43,.12); color: var(--yellow); }
.quest.done .emoji { background: rgba(54,215,127,.16); }
.quest.done .xp-chip { background: rgba(54,215,127,.15); color: var(--green); }
.quest.done_locked .xp-chip { background: rgba(25,184,246,.14); color: var(--cyan); }
.lock-note { display: flex; gap: 10px; align-items: center; padding: 12px 14px; font-size: 13px; color: #bfeaff; background: rgba(25,184,246,.1); border-bottom: 1px solid var(--line); }
.arena-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 18px 16px; border: 1px solid var(--line-2);
background:
linear-gradient(115deg, transparent 0 60%, rgba(236,59,50,.22) 60% 62%, transparent 62%),
radial-gradient(120% 120% at 0% 0%, rgba(236,59,50,.25), transparent 55%),
linear-gradient(160deg, #1d1416, #0f1013);
}
.arena-hero .rating { font: 700 54px/1 var(--display); letter-spacing: .01em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.arena-hero .rating small { font-size: 18px; color: var(--muted); margin-left: 6px; }
.squad { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
.squad::-webkit-scrollbar { display: none; }
.fighter { scroll-snap-align: start; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.fighter .img { height: 150px; background-size: cover; background-position: center top; position: relative; display: grid; place-items: center; font-size: 42px; }
.fighter .img::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.fighter .stars { position: absolute; z-index: 1; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: 1px; }
.fighter .info { padding: 8px 10px 10px; }
.fighter .name { font: 600 14px/1.15 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fighter .st { font-size: 11px; color: var(--muted); margin-top: 3px; }
.r-common { background: linear-gradient(160deg, #5b6170, #2a2e36); }
.r-rare { background: linear-gradient(160deg, #1c6fd0, #12233f); }
.r-epic { background: linear-gradient(160deg, #8a46e8, #26163f); }
.r-legendary { background: linear-gradient(160deg, #e7a91c, #3d2a08); }
.r-mythic { background: linear-gradient(160deg, #ec3b32, #3f0c0a); }
.battle { text-align: center; }
.battle .vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 10px 0 18px; }
.battle .side { min-width: 0; }
.battle .side .who { font: 600 16px/1.1 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.battle .side .pw { font-size: 12px; color: var(--muted); margin: 3px 0 8px; }
.battle .vs-mark { font: 700 26px/1 var(--display); color: var(--yellow); transform: skewX(-10deg); }
.battle .hp { height: 12px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; transform: skewX(-12deg); }
.battle .hp > i { display: block; height: 100%; background: var(--green); transition: width .45s var(--ease), background .3s; }
.battle .hp.enemy > i { background: var(--red); }
.battle .hpv { font-size: 12px; color: var(--muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
.battle .log { min-height: 140px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.battle .log .ln { font-size: 14px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); animation: screen-in .3s var(--ease); }
.battle .log .ln b.crit { color: var(--yellow); }
.battle .result { font: 700 46px/1 var(--display); text-transform: uppercase; margin: 6px 0 10px; animation: pop .6s var(--spring); }
.battle .result.win { color: var(--yellow); text-shadow: 0 0 30px rgba(242,217,43,.5); }
.battle .result.lose { color: var(--red); }
.shake { animation: shake .35s; }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.rank { width: 26px; text-align: center; font: 700 17px/1 var(--display); color: var(--muted); flex: none; }
.rank.top1 { color: var(--yellow); } .rank.top2 { color: #d9dde3; } .rank.top3 { color: #d98a4b; }
.row.me { background: rgba(242,217,43,.07); }
.result-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.clan-hero { border-radius: 20px; padding: 18px 16px; border: 1px solid var(--line-2);
background: linear-gradient(115deg, transparent 0 62%, rgba(25,184,246,.2) 62% 64%, transparent 64%), radial-gradient(120% 120% at 100% 0%, rgba(25,184,246,.22), transparent 55%), linear-gradient(160deg, #141b22, #0e1013); }
.clan-hero .name { font: 700 30px/1.05 var(--display); text-transform: uppercase; margin-top: 10px; word-break: break-word; }
.role { font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 6px; background: var(--surface-3); color: var(--muted); }
.role.owner { background: rgba(242,217,43,.15); color: var(--yellow); }
.role.officer { background: rgba(25,184,246,.15); color: var(--cyan); }
.empty { text-align: center; padding: 30px 20px; }
.empty .big { font-size: 54px; }
.profile-head { display: flex; align-items: center; gap: 16px; margin: 8px 0 16px; }
.avatar-ring { --p: 0; position: relative; width: 84px; height: 84px; border-radius: 50%; flex: none; padding: 4px;
background: conic-gradient(var(--yellow) calc(var(--p) * 1%), rgba(255,255,255,.1) 0); }
.avatar { width: 100%; height: 100%; border-radius: 50%; background: var(--surface-3) center/cover; display: grid; place-items: center; font: 700 30px/1 var(--display); border: 3px solid var(--bg); }
.avatar-ring .lv { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; padding: 5px 10px 4px; }
.profile-head .name { font: 700 26px/1.05 var(--display); text-transform: uppercase; word-break: break-word; }
.vip { color: var(--yellow); font-weight: 700; }
.tabbar {
position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
display: grid; grid-template-columns: repeat(5, 1fr);
padding: 6px 6px calc(6px + var(--safe-bottom));
background: rgba(14, 15, 18, .78); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px);
border-top: 1px solid var(--line);
}
.tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0 3px; color: var(--muted-2); font-size: 10px; white-space: nowrap; font-weight: 600; transition: color .2s, transform .45s var(--spring); }
.tab:active { transform: scale(.9); transition: transform .1s; }
.tab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.active { color: var(--yellow); }
.tab .badge { position: absolute; top: 2px; left: 56%; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font: 700 11px/17px var(--body); font-style: normal; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.55); animation: fade .25s; }
.sheet {
position: fixed; z-index: 31; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto;
max-width: 560px; margin: 0 auto;
background: var(--bg-2); border-radius: 22px 22px 0 0; border-top: 1px solid var(--line-2);
padding: 8px 18px calc(22px + var(--safe-bottom));
animation: sheet-in .45s var(--spring);
}
.sheet.closing { animation: sheet-out .25s var(--ease) forwards; }
.sheet-grabber { width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); margin: 0 auto 14px; }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
.toast {
position: fixed; z-index: 40; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 16px;
background: rgba(40, 42, 48, .92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
font-weight: 600; font-size: 14px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.4);
animation: toast-in .5s var(--spring);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -20px) scale(.9); } }
.boot { min-height: 70vh; display: grid; place-content: center; gap: 22px; justify-items: center; }
.boot-logo { font: 700 40px/1 var(--display); letter-spacing: .02em; transform: skewX(-8deg); }
.boot-logo span { color: var(--yellow); margin-left: 6px; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--yellow); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.note { font-size: 13px; color: var(--muted); padding: 12px 4px 0; line-height: 1.45; }
.spacer { height: 12px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.exp-slot { display: block; width: 100%; text-align: left; margin-bottom: 12px; border-radius: 18px; padding: 14px;
background: linear-gradient(115deg, transparent 0 70%, rgba(242,217,43,.07) 70% 72%, transparent 72%), var(--surface);
border: 1px solid var(--line); }
.exp-slot.free { border-style: dashed; border-color: var(--line-2); background: rgba(255,255,255,.02); }
.exp-slot.locked { opacity: .55; }
.exp-slot.ready { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow), 0 12px 30px -16px rgba(242,217,43,.8); }
.exp-slot-head { display: flex; align-items: center; gap: 10px; }
.exp-route { font: 600 17px/1.1 var(--display); text-transform: uppercase; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-chance { font-size: 12px; color: var(--muted); white-space: nowrap; }
.exp-empty { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; color: var(--muted); font-weight: 600; }
.exp-empty .plus { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--yellow); color: var(--yellow-ink); }
.exp-map { position: relative; height: 64px; margin: 14px 10px 6px; }
.exp-track { position: absolute; left: 0; right: 0; top: 30px; height: 4px; border-radius: 4px;
background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 8px, transparent 8px 14px); }
.exp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--yellow); box-shadow: 0 0 10px rgba(242,217,43,.6); transition: width 1s linear; }
.exp-base, .exp-goal { position: absolute; top: 18px; font-size: 20px; transform: translateX(-50%); }
.exp-base { left: 0; } .exp-goal { left: 100%; }
.exp-node { position: absolute; top: 14px; width: 34px; height: 34px; transform: translateX(-50%); border-radius: 50%; font-size: 16px;
display: grid; place-items: center; background: var(--surface-3); border: 2px solid var(--line-2); }
.exp-node.future { opacity: .45; filter: grayscale(1); }
.exp-node.pending { border-color: var(--cyan); background: #0d2a38; animation: node-pulse 1.4s ease-in-out infinite; }
.exp-node.won, .exp-node.done { border-color: var(--green); }
.exp-node.lost { border-color: var(--red); }
.exp-node.missed { border-color: var(--muted-2); }
@keyframes node-pulse { 50% { box-shadow: 0 0 0 7px rgba(25,184,246,.25); } }
.exp-marker { position: absolute; top: -6px; transform: translateX(-50%); font-size: 18px; transition: left 1s linear; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.exp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.exp-team { display: flex; }
.exp-chip { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); margin-right: -8px; background-size: cover; background-position: center top; display: grid; place-items: center; font-size: 15px; }
.exp-timer { font-size: 13px; color: var(--muted); }
.route-list { display: grid; gap: 10px; }
.route-card { display: block; width: 100%; text-align: left; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.route-card.special { background: linear-gradient(160deg, rgba(242,217,43,.10), rgba(242,217,43,.02)), var(--surface); border-color: rgba(242,217,43,.3); }
.route-card.is-locked { opacity: .5; }
.route-top { display: flex; align-items: center; gap: 10px; }
.route-top b { font: 600 18px/1.1 var(--display); text-transform: uppercase; flex: 1; }
.route-emoji { font-size: 22px; }
.route-time { font-size: 13px; color: var(--muted); }
.route-stats { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 13px; color: #cfd2d8; }
.route-note { margin-top: 8px; font-size: 12px; color: var(--yellow); }
.route-lock { margin-top: 8px; font-size: 12px; color: var(--muted); }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.pick { text-align: left; border-radius: 14px; overflow: hidden; background: var(--surface); border: 2px solid transparent; }
.pick.on { border-color: var(--yellow); }
.pick-img { position: relative; display: grid; place-items: center; height: 92px; font-size: 30px; background-size: cover; background-position: center top; }
.pick-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--body); font-style: normal;
background: rgba(0,0,0,.45); color: transparent; border: 2px solid rgba(255,255,255,.6); }
.pick.on .pick-check { background: var(--yellow); color: var(--yellow-ink); border-color: var(--yellow); }
.pick-name { display: block; padding: 6px 8px 0; font: 600 13px/1.15 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-meta { display: block; padding: 2px 8px 8px; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-panel { position: sticky; bottom: calc(-22px - var(--safe-bottom)); margin: 14px -18px calc(-22px - var(--safe-bottom)); padding: 14px 18px calc(18px + var(--safe-bottom));
background: rgba(16,18,21,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); display: grid; gap: 8px; }
.pick-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.pick-row b { color: var(--text); }
.event-emoji { font-size: 56px; text-align: center; margin: 14px 0 6px; animation: pop .5s var(--spring); }
.event-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.event-result.win h2 { color: var(--green); } .event-result.lose h2 { color: var(--red); }
.loot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-top: 8px; }
.loot-item { margin-top: 10px; font-weight: 600; text-align: center; animation: pop .6s var(--spring); }
.seg-badge { display: inline-block; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font: 700 10px/16px var(--body); font-style: normal; vertical-align: 1px; }
.grid-4 .stat { padding: 10px 8px; }
.grid-4 .stat .v { font-size: 19px; }
.chev { color: var(--muted-2); font-size: 22px; line-height: 1; margin-left: 2px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.slot-card { display: block; text-align: left; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); min-height: 150px; }
.slot-card .img { height: 112px; background-size: cover; background-position: center top; position: relative; display: grid; place-items: center; font-size: 34px; }
.slot-card .img::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.slot-card .stars { position: absolute; z-index: 1; bottom: 5px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: 1px; color: var(--yellow); }
.slot-card .info { padding: 7px 9px 9px; }
.slot-card .name { font: 600 13px/1.15 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-card .st { font-size: 11px; color: var(--yellow); margin-top: 3px; }
.slot-card.empty { display: grid; place-content: center; justify-items: center; gap: 8px; border-style: dashed; border-color: var(--line-2); background: rgba(255,255,255,.02); }
.slot-card.empty .plus { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--yellow); color: var(--yellow-ink); }
.slot-n { position: absolute; z-index: 2; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--yellow); color: var(--yellow-ink); font: 700 13px/22px var(--display); transform: skewX(-8deg); }
.fighter.big { border: 0; background: none; }
.fighter.big .img { height: 220px; border-radius: 18px; font-size: 64px; }
.icon-sq.r-common, .icon-sq.r-rare, .icon-sq.r-epic, .icon-sq.r-legendary, .icon-sq.r-mythic { background-position: center top; }
.boss-card { position: relative; text-align: center; border-radius: 20px; padding: 18px 16px; overflow: hidden; border: 1px solid rgba(236,59,50,.35);
background: radial-gradient(120% 80% at 50% 0%, rgba(236,59,50,.28), transparent 60%), linear-gradient(160deg, #1d1112, var(--surface)); }
.boss-emoji { font-size: 72px; line-height: 1; filter: drop-shadow(0 8px 20px rgba(236,59,50,.5)); }
.boss-emoji.hit { animation: boss-hit .45s var(--ease); }
@keyframes boss-hit { 20% { transform: translateX(-8px) rotate(-6deg) scale(.94); filter: brightness(2.2); } 45% { transform: translateX(7px) rotate(5deg); } }
.boss-name { font: 700 26px/1.05 var(--display); text-transform: uppercase; margin: 8px 0 4px; }
.boss-hp { position: relative; height: 22px; margin-top: 14px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; transform: skewX(-12deg); }
.boss-hp > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #a51d17, var(--red)); transition: width .8s var(--ease); }
.boss-hp > span { position: relative; z-index: 1; display: block; font: 600 12px/22px var(--display); letter-spacing: .04em; transform: skewX(12deg); }
.dmg-float { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); font: 700 30px/1 var(--display); color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); animation: dmg-up 1.1s var(--ease) forwards; pointer-events: none; }
.dmg-float.crit { color: var(--yellow); font-size: 38px; }
@keyframes dmg-up { from { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } to { opacity: 0; transform: translate(-50%, -50px); } }
.search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin-bottom: 10px; border-radius: 12px; background: rgba(118,118,128,.24); }
.search svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; flex: none; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: 16px var(--body); }
.search input::placeholder { color: var(--muted); }
.clan-row, .req-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; position: relative; }
.clan-row + .clan-row::before, .req-row + .req-row::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--line); }
.clan-row .grow, .req-row .grow { flex: 1; min-width: 0; }
.clan-row .title, .req-row .title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clan-row .subtitle, .req-row .subtitle { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clan-badge { flex: none; min-width: 48px; height: 36px; padding: 0 6px; display: grid; place-items: center; border-radius: 6px; transform: skewX(-8deg);
background: linear-gradient(135deg, var(--cyan), #0b6f99); color: #04121a; font: 700 14px/1 var(--display); letter-spacing: .04em; }
.clan-badge.big { min-width: 64px; height: 52px; font-size: 18px; }
.round-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 700; }
.round-btn.yes { background: var(--green); color: #062314; }
.round-btn.no { background: rgba(236,59,50,.16); color: var(--red); }
.btn.danger { color: var(--red); }
.btn.danger-fill { background: var(--red); color: #fff; box-shadow: none; }
.bank-hero { text-align: center; padding: 22px 16px; border-radius: 20px; border: 1px solid rgba(242,217,43,.25);
background: radial-gradient(100% 90% at 50% 0%, rgba(242,217,43,.16), transparent 70%), var(--surface); }
.bank-amount { font: 700 46px/1.05 var(--display); color: var(--yellow); margin: 6px 0; }
.bank-amount small { font-size: 26px; }
.stepper { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; }
.stepper button { height: 48px; border-radius: 12px; background: var(--surface-3); font-size: 24px; font-weight: 600; }
.stepper input { height: 48px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); text-align: center; font: 700 22px var(--display); outline: 0; min-width: 0; }
.squad-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 11px; border-radius: 10px; font-size: 13px; font-weight: 600; background: var(--surface); border: 1px solid var(--line); }
.chip.attack { border-color: rgba(242,217,43,.45); background: rgba(242,217,43,.08); }
.chip.defense { border-color: rgba(25,184,246,.45); background: rgba(25,184,246,.08); }
.chip.empty { color: var(--muted-2); border-style: dashed; min-width: 54px; text-align: center; }
.check { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: transparent; border: 2px solid var(--line-2); }
.check.on { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); }
.arena-hero.war { background: radial-gradient(110% 80% at 100% 0%, rgba(236,59,50,.22), transparent 60%), var(--surface); }
.battle .score { font: 700 48px/1 var(--display); color: var(--yellow); margin-bottom: 12px; }
.lvl-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 118px; gap: 10px; overflow-x: auto; padding: 2px 16px 12px; margin: 0 -16px 4px; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.lvl-strip::-webkit-scrollbar { display: none; }
.lvl-card { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 10px 10px; min-height: 136px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.lvl-card.special { background: linear-gradient(160deg, rgba(242,217,43,.14), rgba(242,217,43,.02)), var(--surface); border-color: rgba(242,217,43,.35); }
.lvl-card.ready { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow), 0 10px 24px -12px rgba(242,217,43,.9); }
.lvl-card.claimed { opacity: .45; }
.lvl-card.locked { opacity: .6; }
.lvl-num { font: 700 15px/1 var(--display); letter-spacing: .06em; color: var(--yellow); margin-bottom: 4px; }
.lvl-special { position: absolute; top: 8px; right: 9px; font-size: 18px; }
.lvl-line { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lvl-sp-t { font-size: 11px; color: var(--yellow); line-height: 1.2; }
.lvl-st { margin-top: auto; padding-top: 6px; font: 600 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lvl-card.ready .lvl-st { color: var(--yellow); }
.row.dim { opacity: .55; }
.switch { position: relative; flex: none; width: 51px; height: 31px; border-radius: 16px; background: rgba(120,120,128,.32); transition: background .25s; }
.switch i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.3); transition: transform .35s var(--spring); }
.switch.on { background: var(--green); }
.switch.on i { transform: translateX(20px); }
.avatar-ring.frame-veteran { padding: 5px; background: conic-gradient(from 200deg, #f2d92b, #b8860b, #fff3a0, #c48a12, #f2d92b); box-shadow: 0 0 0 2px rgba(242,217,43,.35), 0 0 24px rgba(242,217,43,.35); }
.avatar-ring.frame-veteran::before, .avatar-ring.frame-veteran::after { content: "★"; position: absolute; top: -4px; font-size: 14px; color: var(--yellow); text-shadow: 0 0 6px rgba(0,0,0,.8); }
.avatar-ring.frame-veteran::before { left: 4px; } .avatar-ring.frame-veteran::after { right: 4px; }
.frame-tag { display: inline-block; margin: 4px 0 2px; font: 600 11px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
.slot-busy { position: absolute; z-index: 2; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: rgba(0,0,0,.55); }
.slot-card:has(.slot-busy) .img { filter: grayscale(.7) brightness(.7); }
.wallet { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.wallet b { color: var(--text); }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 12px; padding: 0 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip-btn { flex: none; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--rc, var(--text)); letter-spacing: 1px; }
.chip-btn.on { background: var(--rc, var(--yellow)); color: #0b0c0e; border-color: transparent; }
.chip-btn:not([style]).on { background: var(--yellow); }
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ftile { display: block; text-align: left; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 -2px 0 var(--rc); min-width: 0; }
.ftile-img { position: relative; display: grid; place-items: center; height: 118px; font-size: 34px; background-size: cover; background-position: center top; }
.ftile-img::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.ftile-stars { position: absolute; z-index: 1; bottom: 5px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: 1px; color: var(--yellow); }
.ftile-name { display: block; padding: 7px 8px 0; font: 600 13px/1.15 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftile-pw { display: block; padding: 2px 8px 8px; font-size: 11px; color: var(--yellow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftile.locked .ftile-img { filter: grayscale(1) brightness(.35) blur(1.5px); }
.ftile.locked .q { position: relative; z-index: 2; font: 700 40px/1 var(--display); color: rgba(255,255,255,.7); filter: none; }
.ftile.locked { opacity: .75; box-shadow: none; }
.fcard { text-align: center; }
.fcard-img { position: relative; height: 260px; border-radius: 18px; background-size: cover; background-position: center top; display: grid; place-items: center; font-size: 72px;
box-shadow: 0 0 0 2px var(--rc), 0 18px 40px -18px var(--rc); }
.fcard-img::after { content: ""; position: absolute; inset: 60% 0 0; border-radius: 0 0 18px 18px; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.fcard-stars { position: absolute; z-index: 1; bottom: 10px; left: 0; right: 0; font-size: 18px; letter-spacing: 3px; color: var(--yellow); }
.fcard-name { font: 700 28px/1.05 var(--display); text-transform: uppercase; margin: 14px 0 4px; }
.fstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.fstat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 4px; text-align: center; display: grid; gap: 2px; font-size: 13px; }
.fstat b { font: 700 18px/1.1 var(--display); }
.fstat small { color: var(--green); font-size: 11px; }
.gear-list { display: grid; gap: 8px; }
.gear { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--rc, transparent); }
.gear.empty { border-style: dashed; }
.gear-img { flex: none; width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; background: var(--surface-3) center/cover; }
.gear .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.gear-k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.gear-v { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gear-s { font-size: 12px; color: var(--yellow); }
.item-row { box-shadow: inset 3px 0 0 var(--rc); }
.item-img { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: var(--surface-3) center/cover; }
.row.item-row + .row.item-row::before { left: 70px; }
.rdot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--rc); transform: rotate(45deg); }
.section-head h3 .rdot { margin-right: 2px; }
.section-head h3[style]::before { background: var(--rc); }
.craft-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 16px 0; }
.craft-flow span { display: grid; gap: 4px; padding: 12px; border-radius: 14px; text-align: center; font-weight: 600; font-size: 14px; background: var(--surface); border: 1px solid var(--rc); }
.craft-flow b { font: 700 22px/1 var(--display); color: var(--rc); }
.craft-flow i { font-style: normal; font-size: 22px; color: var(--muted); }
.spin-hero { text-align: center; padding: 22px 16px 18px; margin-top: 12px; border-radius: 20px; border: 1px solid var(--line-2);
background: radial-gradient(90% 70% at 50% 0%, rgba(155,92,240,.25), transparent 70%), var(--surface); }
.spin-deck { position: relative; width: 120px; height: 150px; margin: 4px auto 14px; }
.deck-card { position: absolute; inset: 0; border-radius: 14px; border: 2px solid rgba(242,217,43,.6);
background: repeating-linear-gradient(45deg, #1d1530 0 10px, #241a3c 10px 20px); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.deck-card.c3 { transform: rotate(-10deg) translateX(-14px); opacity: .6; }
.deck-card.c2 { transform: rotate(8deg) translateX(12px); opacity: .8; }
.deck-card.c1 { display: grid; place-items: center; font-size: 44px; animation: deck-float 3s ease-in-out infinite; }
@keyframes deck-float { 50% { transform: translateY(-6px) rotate(-1deg); } }
.spin-count { font: 600 18px/1.2 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.spin-count b { font-size: 34px; color: var(--yellow); margin-right: 4px; }
.bundle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bundle { display: grid; gap: 2px; justify-items: center; padding: 14px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.bundle b { font: 700 28px/1 var(--display); color: var(--yellow); }
.bundle span { font-size: 18px; }
.bundle small { font-size: 11px; color: var(--muted); text-align: center; }
.crate-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.crate { display: grid; justify-items: center; gap: 6px; padding: 14px 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.crate.is-locked { opacity: .45; }
.crate-box { position: relative; width: 72px; height: 58px; border-radius: 10px; display: grid; place-items: center; font-size: 26px; transform: perspective(200px) rotateX(10deg);
background: linear-gradient(160deg, #3a3f49, #1c1f25); border: 2px solid #f2d92b; box-shadow: 0 10px 20px -10px rgba(242,217,43,.7); }
.crate-box::before { content: ""; position: absolute; left: -2px; right: -2px; top: 18px; height: 6px; background: #f2d92b; }
.crate-box span { position: relative; z-index: 1; margin-top: 10px; }
.crate-box.armor { border-color: var(--cyan); box-shadow: 0 10px 20px -10px rgba(25,184,246,.7); }
.crate-box.armor::before { background: var(--cyan); }
.crate-box.big { width: 86px; height: 70px; font-size: 32px; flex: none; }
.crate-name { font: 600 15px/1.1 var(--display); text-transform: uppercase; }
.crate-price { font-size: 12px; color: var(--muted); }
.reveal { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 30px 20px calc(24px + var(--safe-bottom));
background: radial-gradient(70% 50% at 50% 38%, color-mix(in srgb, var(--rc) 28%, transparent), rgba(5,6,8,.96) 70%); animation: fade .25s; overflow: hidden; }
.reveal.out { animation: fade .25s reverse forwards; }
.reveal-rays { position: absolute; left: 50%; top: 38%; width: 900px; height: 900px; margin: -450px 0 0 -450px; opacity: 0;
background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 35%, transparent) 0 8deg, transparent 8deg 20deg); transition: opacity .6s; animation: spin 18s linear infinite; }
.reveal.flip .reveal-rays { opacity: .55; }
.reveal:not(.high).flip .reveal-rays { opacity: .25; }
.reveal-stage { perspective: 1000px; }
.reveal-card { position: relative; width: 210px; height: 290px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.4,.5,1); animation: card-in .5s var(--spring); }
@keyframes card-in { from { transform: translateY(60px) scale(.6); opacity: 0; } }
.reveal.shake .reveal-card { animation: card-shake .55s ease-in-out 2; }
.reveal.high.shake .reveal-card { animation: card-shake .4s ease-in-out 3; }
@keyframes card-shake { 25% { transform: rotate(-4deg) scale(1.03); } 75% { transform: rotate(4deg) scale(1.03); } }
.reveal.flip .reveal-card { transform: rotateY(180deg); animation: none; }
.rv-face { position: absolute; inset: 0; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rv-back { display: grid; place-items: center; border: 3px solid var(--yellow); background: repeating-linear-gradient(45deg, #17191e 0 12px, #1f2228 12px 24px);
box-shadow: 0 0 40px color-mix(in srgb, var(--rc) 50%, transparent); }
.rv-back span { font: 700 46px/1 var(--display); color: var(--yellow); transform: skewX(-8deg); }
.reveal.shake .rv-back { box-shadow: 0 0 60px var(--rc); }
.rv-front { transform: rotateY(180deg); display: grid; place-items: center; font-size: 80px; background-size: cover; background-position: center top;
border: 3px solid var(--rc); box-shadow: 0 0 50px var(--rc); overflow: hidden; }
.rv-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); }
.reveal.shown .rv-front::after { animation: sheen 1.1s .1s ease-out; }
@keyframes sheen { to { transform: translateX(120%); } }
.rv-stars { position: absolute; z-index: 1; bottom: 10px; left: 0; right: 0; text-align: center; color: var(--yellow); font-size: 20px; letter-spacing: 3px; text-shadow: 0 2px 8px #000; }
.reveal-info { position: relative; width: 100%; max-width: 420px; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .5s var(--spring); }
.reveal.shown .reveal-info { opacity: 1; transform: none; }
.rv-title { font: 600 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rv-rarity { font: 700 16px/1 var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--rc); margin: 10px 0 4px; }
.rv-name { font: 700 34px/1.05 var(--display); text-transform: uppercase; }
.rv-sub { font-size: 14px; color: #cfd2d8; margin-top: 6px; min-height: 18px; }
.rv-actions { display: grid; gap: 8px; margin-top: 18px; }
.reward .rw-icon { font-size: 22px; }
.reward .rw-stars { font-size: 10px; color: var(--yellow); letter-spacing: 1px; }
.create-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; border-color: rgba(242,217,43,.3);
background: linear-gradient(120deg, rgba(242,217,43,.10), transparent 60%), var(--surface); }
.field { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.field input, .textarea { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font: 17px var(--body); outline: 0; }
.field input:focus, .textarea:focus { border-color: var(--yellow); }
.textarea { height: 120px; padding: 12px 14px; resize: none; margin-top: 12px; line-height: 1.4; }
.clan-preview { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface); }
.clan-preview b { font: 700 20px/1.1 var(--display); text-transform: uppercase; }
.clan-hero.has-media { background: linear-gradient(180deg, rgba(11,12,14,.25), rgba(11,12,14,.9)), var(--media) center/cover; min-height: 170px; display: flex; flex-direction: column; justify-content: flex-end; }
.clan-desc { margin-top: 6px; font-size: 14px; color: #d9dbe0; line-height: 1.35; }
.frame-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.frame-opt { display: grid; justify-items: center; gap: 8px; padding: 14px 6px; border-radius: 16px; background: var(--surface); border: 2px solid transparent; }
.frame-opt.on { border-color: var(--yellow); }
.avatar-ring.frame-season1 { padding: 5px; background: conic-gradient(from 0deg, #19b8f6, #9b5cf0, #ec3b32, #f2d92b, #19b8f6); box-shadow: 0 0 22px rgba(155,92,240,.55); }
.avatar-ring.frame-season1::after { content: "S1"; position: absolute; top: -6px; right: -4px; font: 700 11px/1 var(--display); padding: 3px 5px; border-radius: 5px; background: #9b5cf0; color: #fff; transform: skewX(-8deg); }
.bonus-card { padding: 16px; border-radius: 20px; margin-bottom: 12px; border: 1px solid rgba(242,217,43,.28);
background: radial-gradient(120% 90% at 100% 0%, rgba(242,217,43,.16), transparent 60%), var(--surface); }
.bdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 14px 0; }
.bday { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.bday small { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.bday b { font: 700 13px/1.1 var(--display); }
.bday span { font-size: 11px; }
.bday.done { background: rgba(242,217,43,.14); border-color: rgba(242,217,43,.35); }
.bday.done b { color: var(--yellow); }
.bday.next { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); animation: glow 1.8s ease-in-out infinite; }
.bday.d7 { background: linear-gradient(160deg, rgba(155,92,240,.25), rgba(236,59,50,.15)); }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.hub-tile { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.hub-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--surface-3); }
.hub-title { font: 600 13px/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.hub-badge { position: absolute; top: 8px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font: 700 11px/18px var(--body); font-style: normal; }
.back-link { color: var(--cyan); font-size: 16px; font-weight: 600; padding: 4px 0; }
.task-card { border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); margin-bottom: 12px; }
.task-card.gw { border-color: rgba(155,92,240,.35); }
.task-img { height: 150px; background: var(--surface-3) center/cover; }
.task-body { padding: 14px; }
.task-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task-head b { font: 600 18px/1.15 var(--display); text-transform: uppercase; }
.rchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.rchip { padding: 6px 9px; border-radius: 9px; font: 600 13px/1 var(--display); background: rgba(242,217,43,.12); color: var(--yellow); }
.conds { display: grid; gap: 8px; margin: 10px 0 12px; }
.cond { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); text-align: left; width: 100%; font-weight: 600; font-size: 14px; }
.cond .grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cond.completed { border-color: rgba(54,215,127,.4); color: #bff3d6; }
.cond.waiting { border-color: rgba(25,184,246,.4); }
.cond small { color: var(--cyan); }
.gw-prize { margin-top: 8px; font: 700 20px/1.15 var(--display); color: var(--yellow); }
.gw-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 12px; font-size: 13px; color: #cfd2d8; }
.vip-card { padding: 18px 16px; border-radius: 20px; color: #1a1300; background: linear-gradient(135deg, #f2d92b, #ffe98a 45%, #d9a512); box-shadow: 0 16px 36px -18px rgba(242,217,43,.8); }
.vip-card.on { background: linear-gradient(135deg, #19b8f6, #9ce3ff 45%, #0b7fb0); color: #021018; }
.vip-head { display: flex; align-items: center; gap: 12px; }
.vip-head h2 { font-size: 30px; }
.vip-gem { font-size: 40px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.vip-perks { margin: 14px 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.35; }
.vip-card .btn.primary { background: #121212; color: var(--yellow); box-shadow: none; }
.bp-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; position: relative; }
.bp-row + .bp-row::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--line); }
.bp-row.on { background: rgba(54,215,127,.07); }
.bp-row .grow { flex: 1; min-width: 0; }
.bp-row .title { font-weight: 600; }
.bp-row .subtitle { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.bp-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--surface-3); }
.bp-icon.big { width: 60px; height: 60px; font-size: 30px; }
.wd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wd-btn { display: grid; justify-items: center; gap: 2px; padding: 14px 6px; border-radius: 14px; background: var(--surface); border: 1px solid rgba(242,217,43,.3); }
.wd-btn b { font: 700 24px/1 var(--display); color: var(--yellow); }
.wd-btn small { font-size: 10.5px; color: var(--muted); }
.wd-btn.is-locked { opacity: .45; border-color: var(--line); }
.friends-hero { text-align: center; padding: 22px 16px; border-radius: 20px; border: 1px solid var(--line-2);
background: radial-gradient(100% 80% at 50% 0%, rgba(25,184,246,.18), transparent 70%), var(--surface); }
.big-num { font: 700 56px/1 var(--display); color: var(--cyan); }
.link-box { padding: 12px; border-radius: 12px; background: var(--bg); border: 1px dashed var(--line-2); font: 13px/1.3 ui-monospace, Menlo, monospace; word-break: break-all; color: #cfd2d8; }
.tour { position: fixed; inset: 0; z-index: 60; animation: fade .25s; }
.tour.out { animation: fade .25s reverse forwards; }
.tour-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(4,5,7,.78), 0 0 0 3px var(--yellow), 0 0 26px 6px rgba(242,217,43,.5);
transition: all .45s var(--spring); pointer-events: none; }
.tour-card { position: fixed; left: 16px; right: 16px; bottom: calc(96px + var(--safe-bottom)); max-width: 460px; margin: 0 auto; padding: 18px; border-radius: 20px;
background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 20px 50px rgba(0,0,0,.6); animation: pop .45s var(--spring); }
.tour-card.center { top: 50%; bottom: auto; transform: translateY(-50%); text-align: center; animation: none; }
.tour-card h2 { font-size: 26px; margin: 4px 0 8px; }
.tour-card p { margin: 0 0 16px; color: #cfd2d8; line-height: 1.45; font-size: 15px; }
.tour-step { font: 600 12px/1 var(--display); letter-spacing: .12em; color: var(--yellow); min-height: 12px; }
.tour-gift { font-size: 64px; animation: deck-float 2.4s ease-in-out infinite; }
.tour-actions { display: flex; gap: 10px; align-items: center; }
.tour-actions .btn.primary { flex: 1; }
.tour-card.center .tour-actions { display: grid; }
.daily-card { padding: 14px; border-radius: 18px; margin-bottom: 6px; border: 1px solid rgba(25,184,246,.3);
background: radial-gradient(110% 90% at 100% 0%, rgba(25,184,246,.14), transparent 60%), var(--surface); }
.daily-card.complete { border-color: rgba(54,215,127,.4); }
.dq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dq-count { font: 700 22px/1 var(--display); color: var(--cyan); }
.dq-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.dq-row .grow { flex: 1; min-width: 0; }
.dq-row.done { color: var(--muted); }
.dq-row.done .grow { text-decoration: line-through; }
.dq-emoji { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); flex: none; }
.gear-btn { margin-left: auto; align-self: flex-start; flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.gear-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.switch .lock { position: absolute; left: 7px; top: 7px; font-size: 11px; z-index: 1; font-style: normal; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.adm-kpi .stat .small { margin-top: 2px; font-size: 12px; }
.adm-gold { margin: 12px 2px 0; }
.adm-chart-card { padding: 14px 14px 12px; }
.adm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.adm-legend b { color: var(--text); margin-left: 2px; }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.sw.y { background: var(--yellow); }
.sw.c { background: var(--cyan); border-radius: 50%; }
.adm-plot { position: relative; }
.adm-plot svg { display: block; width: 100%; height: 150px; touch-action: none; overflow: visible; }
.adm-max { position: absolute; top: -2px; left: 0; right: 0; display: flex; justify-content: space-between; font-size: 10px; color: var(--muted-2); pointer-events: none; }
.adm-max .c { color: var(--cyan); opacity: .8; }
.adm-grid-line { stroke: rgba(255,255,255,.07); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.adm-bar { fill: var(--yellow); opacity: .82; transition: opacity .15s; }
.adm-bar.on { opacity: 1; fill: var(--yellow-2); }
.adm-line { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.adm-cursor { fill: rgba(255,255,255,.07); transition: x .12s var(--ease), opacity .2s; }
.adm-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-2); margin-top: 6px; }
.adm-readout { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: var(--bg); font-size: 13px; color: var(--muted); min-height: 38px; }
.adm-readout > b { color: var(--text); text-transform: capitalize; }
.adm-readout span b { color: var(--text); }
.adm-kbar { height: 4px; border-radius: 2px; background: var(--surface-3); margin-top: 7px; overflow: hidden; }
.adm-kbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--yellow), var(--cyan)); border-radius: 2px; }
.adm-wd { margin-bottom: 10px; }
.adm-wd-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.adm-amt { font: 700 26px/1 var(--display); color: var(--yellow); white-space: nowrap; }
.adm-amt small { font-size: 16px; }
.adm-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.adm-kv span { color: var(--muted); }
.adm-kv b { text-align: right; font-weight: 600; }
.adm-copy { color: var(--cyan); font-weight: 600; }
.adm-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; }
.adm-thead, .adm-trow { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 6px; align-items: center; }
.adm-thead { padding: 6px 4px 8px; font: 600 11px/1 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: center; }
.adm-trow + .adm-trow { margin-top: 6px; }
.adm-lvl { text-align: center; font: 700 16px/1 var(--display); color: var(--muted); }
.adm-cell { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; min-width: 0; }
.adm-cell b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-cell.premium { background: linear-gradient(120deg, rgba(25,184,246,.12), transparent 70%), var(--surface-2); border-color: rgba(25,184,246,.25); }
.adm-types { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-create { margin-bottom: 4px; }
.adm-new { display: grid; justify-items: center; gap: 6px; padding: 16px 6px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.adm-new span { font-size: 28px; line-height: 1; }
.adm-item { margin-bottom: 10px; }
.adm-sw { min-height: 56px; }
.adm-cond { padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 10px; display: grid; gap: 8px; }
.adm-cond-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.adm-x { width: 28px; height: 28px; border-radius: 14px; background: var(--surface-3); color: var(--muted); font-size: 13px; }
.adm-in { width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font: 16px var(--body); outline: 0; }
.adm-in:focus { border-color: var(--yellow); }
.adm-photo { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 14px; border: 1px dashed var(--line-2); color: var(--muted); font-weight: 600; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 12px; }
.adm-photo.has { border-style: solid; border-color: var(--green); color: var(--text); }
.field select, .field textarea { -webkit-user-select: text; user-select: text; }
.field input, .adm-in, .textarea { -webkit-user-select: text; user-select: text; }
.field input[type="date"], .field input[type="datetime-local"] { -webkit-appearance: none; appearance: none; min-width: 0; font-size: 15px; color-scheme: dark; }
.adm-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.adm-period { display: flex; padding: 2px; border-radius: 9px; background: var(--bg); }
.adm-period button { height: 26px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--muted); }
.adm-period button.on { background: var(--surface-3); color: var(--text); }
.sw.g { background: var(--green); }
.sw.r { background: var(--red); }
.adm-bar.in { fill: var(--green); }
.adm-bar.out { fill: var(--red); }
.adm-bar.in.on { fill: #5ef09c; }
.adm-bar.out.on { fill: #ff6a5f; }
.adm-cur { margin-bottom: 10px; width: max-content; }
.adm-flags { display: grid; gap: 6px; margin-top: 10px; }
.adm-flag { padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.35; }
.adm-flag.high { background: rgba(236,59,50,.12); border: 1px solid rgba(236,59,50,.35); color: #ffb3ae; }
.adm-flag.mid { background: rgba(242,217,43,.08); border: 1px solid rgba(242,217,43,.28); color: #f5e58a; }
.adm-link { color: var(--cyan); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; margin-left: 4px; }
.adm-link.big { margin: 0; text-decoration: none; font-size: 15px; color: var(--text); font-weight: 700; }
.adm-search { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.adm-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: 16px var(--body); outline: 0; -webkit-user-select: text; user-select: text; }
.adm-urow { width: 100%; text-align: left; }
.adm-ava { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font: 700 16px/1 var(--display); }
.adm-ava.big { width: 56px; height: 56px; font-size: 24px; background: linear-gradient(135deg, var(--yellow), #e0a400); color: #121212; }
.adm-ucard.banned { border-color: rgba(236,59,50,.5); }
.adm-uhead { display: flex; gap: 14px; align-items: center; }
.adm-uhead h2 { font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.adm-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.adm-act { display: grid; justify-items: center; gap: 4px; padding: 10px 2px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 11px; font-weight: 600; }
.adm-act span { font-size: 22px; line-height: 1; }
.adm-act.danger { color: #ff8a82; border-color: rgba(236,59,50,.3); }
.adm-act.ok { color: var(--green); border-color: rgba(54,215,127,.3); }
.adm-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-fchip { padding: 5px 9px; border-radius: 9px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--rc) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent); }
.adm-fchip small { color: var(--rc); letter-spacing: -1px; }
.adm-st { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 8px; background: var(--surface-3); color: var(--muted); }
.adm-st.approved, .adm-st.ok { background: rgba(54,215,127,.14); color: var(--green); }
.adm-st.rejected { background: rgba(236,59,50,.14); color: #ff8a82; }
.adm-st.pending { background: rgba(242,217,43,.14); color: var(--yellow); }
.adm-event { margin-bottom: 10px; }
.adm-event.on { border-color: rgba(54,215,127,.45); background: linear-gradient(120deg, rgba(54,215,127,.10), transparent 60%), var(--surface); }
.adm-ev-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--surface-3); }
.adm-ev-btns { display: flex; gap: 8px; margin-top: 12px; }
.adm-ev-btns .btn { flex: 1; padding: 0 8px; font-size: 14px; }
.adm-bc-status { padding: 10px 12px; border-radius: 12px; background: var(--bg); margin-bottom: 12px; font-size: 14px; }
.adm-bc-status.run { color: var(--yellow); }
.spinner.sm { display: inline-block; width: 14px; height: 14px; border-width: 2px; vertical-align: -2px; margin-right: 6px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; }
.adm-promo.exhausted, .adm-promo.expired, .adm-promo.disabled { opacity: .55; }
.section-head .btn.small { height: 30px; font-size: 13px; padding: 0 12px; }
.event-banner { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 12px; border-radius: 16px;
background: linear-gradient(110deg, rgba(255,138,31,.22), rgba(236,59,50,.14) 55%, rgba(155,107,255,.12)), var(--surface);
border: 1px solid rgba(255,138,31,.45); animation: ebGlow 3s ease-in-out infinite; }
@keyframes ebGlow { 50% { box-shadow: 0 0 22px rgba(255,138,31,.25); } }
.eb-ico { font-size: 30px; flex: none; }
.event-banner b { font: 700 18px/1.15 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.event-banner .small { color: #e4d2c4; margin-top: 2px; }
.eb-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 3px; }
.eb-tag { font: 700 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #ffb066; }
.eb-time { font-size: 12px; color: #ffd7b0; font-variant-numeric: tabular-nums; }
.badge-row { display: flex; align-items: center; gap: 6px; width: 100%; padding: 10px 12px; margin-bottom: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.ach-badge { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: var(--surface-3); border: 2px solid var(--muted-2); }
.ach-badge.t1 { border-color: #cd7f4f; }
.ach-badge.t2 { border-color: #c9ccd2; }
.ach-badge.t3 { border-color: #f2d92b; box-shadow: 0 0 10px rgba(242,217,43,.4); }
.ach-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ach-head > div { flex: 1; }
.ach { margin-bottom: 10px; }
.ach.ready { border-color: rgba(242,217,43,.45); }
.ach-top { display: flex; gap: 12px; align-items: center; }
.ach-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: var(--surface-3); border: 3px solid var(--line-2); }
.ach-ico.t1 { border-color: #cd7f4f; }
.ach-ico.t2 { border-color: #c9ccd2; }
.ach-ico.t3 { border-color: #f2d92b; box-shadow: 0 0 14px rgba(242,217,43,.35); }
.ach-pips { display: flex; gap: 4px; }
.pip { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c); opacity: .35; }
.pip.ready, .pip.claimed { opacity: 1; }
.pip.claimed { background: var(--c); }
.pip.ready { animation: pipBlink 1.2s ease-in-out infinite; }
@keyframes pipBlink { 50% { background: var(--c); } }
.ach-prog { margin-top: 12px; display: grid; gap: 6px; }
.ach-btn { width: 100%; margin-top: 10px; }
.case-open { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: center; gap: 22px;
background: radial-gradient(120% 60% at 50% 45%, #22252c, #060709) #0b0c0e; animation: fade .25s ease; }
.case-open.out { animation: fade .25s reverse forwards; }
.cs-top { display: flex; align-items: center; justify-content: center; position: relative; padding: 0 56px; }
.cs-title { font: 700 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.cs-sound { position: absolute; right: 16px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.07); font-size: 17px; }
.cs-window { position: relative; height: 168px; overflow: hidden; background: linear-gradient(180deg, #15171b, #0e0f12);
border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.cs-strip { position: absolute; top: 14px; left: 0; display: flex; gap: 6px; will-change: transform; }
.cs-item { position: relative; flex: none; width: 118px; height: 140px; border-radius: 6px; overflow: hidden;
background: linear-gradient(180deg, #2a2e36 0%, color-mix(in srgb, var(--rc) 22%, #1b1e24) 100%);
border: 1px solid rgba(255,255,255,.06); transition: opacity .4s, filter .4s; }
.cs-img { height: 96px; display: grid; place-items: center; font-size: 46px; background: center/contain no-repeat;
background-image: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rc) 35%, transparent), transparent 70%); }
.cs-img[style] { background-size: cover; }
.cs-name { padding: 6px 8px 0; font-size: 12px; font-weight: 600; color: #e6e7ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--rc); box-shadow: 0 -4px 14px color-mix(in srgb, var(--rc) 70%, transparent); }
.cs-marker { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: var(--yellow); z-index: 3;
box-shadow: 0 0 12px rgba(242,217,43,.9); }
.cs-marker::before, .cs-marker::after { content: ""; position: absolute; left: 50%; margin-left: -8px; border: 8px solid transparent; }
.cs-marker::before { top: 0; border-top-color: var(--yellow); }
.cs-marker::after { bottom: 0; border-bottom-color: var(--yellow); }
.cs-fade { position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none; }
.cs-fade.l { left: 0; background: linear-gradient(90deg, #0b0c0e, transparent); }
.cs-fade.r { right: 0; background: linear-gradient(270deg, #0b0c0e, transparent); }
.case-open.landed .cs-item:not(.win) { opacity: .28; filter: grayscale(.6); }
.cs-item.win { border-color: var(--rc); box-shadow: 0 0 0 2px var(--rc), 0 0 34px color-mix(in srgb, var(--rc) 75%, transparent); animation: csWin .6s var(--spring); z-index: 1; }
@keyframes csWin { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1.04); } }
.cs-skip { align-self: center; width: auto; padding: 0 26px; transition: opacity .2s; }
.case-open.landed .cs-skip { opacity: 0; pointer-events: none; }
.starter { position: relative; overflow: hidden; padding: 16px; margin-bottom: 12px; border-radius: 18px;
background: linear-gradient(135deg, rgba(242,217,43,.20), rgba(155,107,255,.18) 55%, rgba(25,184,246,.14)), var(--surface);
border: 1px solid rgba(242,217,43,.5); box-shadow: 0 10px 30px rgba(242,217,43,.08); }
.st-ribbon { position: absolute; top: 14px; right: -34px; transform: rotate(35deg); width: 130px; text-align: center; padding: 4px 0;
background: var(--red); color: #fff; font: 700 13px/1 var(--display); letter-spacing: .05em; }
.st-head { display: flex; gap: 12px; align-items: center; }
.st-head h3 { color: var(--text); font-size: 18px; }
.st-head .small { color: #d9d2b0; margin-top: 2px; }
.st-gift { font-size: 38px; animation: giftBob 2.4s ease-in-out infinite; }
@keyframes giftBob { 50% { transform: translateY(-3px) rotate(-6deg); } }
.st-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 10px; }
.st-items div { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; background: rgba(0,0,0,.28); }
.st-items span { font-size: 22px; }
.st-items b { font: 700 18px/1 var(--display); }
.st-items small { font-size: 11px; color: var(--muted); text-align: center; }
.st-foot { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; }
.st-timer { color: #ffd7b0; font-variant-numeric: tabular-nums; }
.old-price { color: var(--muted); font-weight: 500; opacity: .8; }
.sale-price { color: var(--green); }
.btn .sale-price { color: inherit; }
.sale-strip { padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: rgba(54,215,127,.12); border: 1px solid rgba(54,215,127,.4); color: #9ff0c3; font-weight: 600; font-size: 14px; }
.ret-tile .v { font-size: 20px; }
.ret-wrap { padding: 4px 6px; margin-top: 10px; overflow-x: auto; }
.ret-table { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 13px; }
.ret-table th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 4px; text-align: center; }
.ret-table td { padding: 6px 4px; text-align: center; border-radius: 6px; }
.ret-table td:first-child { text-align: left; color: var(--muted); }
.ret-table td[style] { background: rgba(54,215,127, calc(.08 + var(--h) * .55)); }
.ret-table td.na { color: var(--muted-2); }
.reveal { background-color: #08090b; }
.rv-front { background-color: #1d2026; }
.glass, .glass-tile, .crate {
--g: 242, 217, 43;
--gt: #fff4b8;
}
.glass.gold  { --g: 242, 200, 43;  --gt: #fff4c2; }
.glass.cyan  { --g: 25, 184, 246;  --gt: #e2f7ff; }
.glass.red   { --g: 236, 59, 50;   --gt: #ffe6e3; }
.glass.mint  { --g: 54, 215, 127;  --gt: #dcffe9; }
.glass.smoke { --g: 18, 18, 22;    --gt: #ffe873; }
.btn.glass {
position: relative; isolation: isolate; overflow: hidden;
color: var(--gt); font-weight: 700; letter-spacing: .01em;
text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 14px rgba(var(--g), .55);
background:
radial-gradient(120% 90% at 50% 120%, rgba(var(--g), .55), transparent 60%),
linear-gradient(180deg, rgba(var(--g), .34) 0%, rgba(var(--g), .12) 48%, rgba(var(--g), .26) 100%),
rgba(14, 15, 18, .55);
-webkit-backdrop-filter: blur(18px) saturate(180%);
backdrop-filter: blur(18px) saturate(180%);
border: 1px solid rgba(var(--g), .6);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .55),
inset 0 -1px 0 rgba(var(--g), .9),
inset 0 -14px 22px -14px rgba(var(--g), .9),
inset 0 0 0 1px rgba(255, 255, 255, .05),
0 12px 30px -14px rgba(var(--g), .85),
0 2px 6px rgba(0, 0, 0, .35);
transition: transform .18s var(--spring), box-shadow .25s, filter .2s;
}
.btn.glass::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
left: 1px; right: 1px; top: 1px; height: 48%;
border-radius: 13px 13px 0 0;
background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .03) 85%, transparent);
}
.btn.glass.shine::after {
content: ""; position: absolute; z-index: -1; pointer-events: none;
top: -60%; bottom: -60%; left: -45%; width: 32%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5) 45%, rgba(255, 255, 255, .08) 60%, transparent);
transform: skewX(-22deg);
animation: glassGlint 5.5s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes glassGlint { 0%, 62% { left: -45%; } 88%, 100% { left: 125%; } }
.btn.glass:active { transform: scale(.97); filter: brightness(1.15); }
.btn.glass.slanted { border-radius: 4px; }
.btn.glass .sale-price { color: #b8ffd5; text-shadow: 0 0 10px rgba(54, 215, 127, .6); }
.btn.glass .old-price { color: rgba(255, 255, 255, .55); }
.btn.glass.is-joined { pointer-events: none; opacity: .9; }
.btn.glass.smoke {
background: linear-gradient(180deg, rgba(40, 40, 46, .78), rgba(10, 10, 12, .88));
border-color: rgba(255, 255, 255, .35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(255, 255, 255, .15), 0 12px 26px -12px rgba(0, 0, 0, .7);
text-shadow: 0 0 12px rgba(242, 217, 43, .5);
}
.vip-card .btn.glass.smoke { background: linear-gradient(180deg, rgba(30, 30, 34, .72), rgba(8, 8, 10, .86)); }
.bundle.glass-tile {
position: relative; isolation: isolate; overflow: hidden;
background:
radial-gradient(90% 70% at 50% 110%, rgba(var(--g), .32), transparent 65%),
linear-gradient(165deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02) 45%, rgba(var(--g), .10));
-webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(var(--g), .38);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(var(--g), .5), 0 10px 24px -14px rgba(var(--g), .7);
transition: transform .18s var(--spring);
}
.bundle.glass-tile::before {
content: ""; position: absolute; inset: 1px 1px 55%; z-index: -1; border-radius: 13px 13px 50% 50% / 13px 13px 18px 18px;
background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent);
}
.bundle.glass-tile b { text-shadow: 0 0 18px rgba(242, 217, 43, .55); }
.bundle.glass-tile:active { transform: scale(.96); }
.bundle.best { --g: 54, 215, 127; border-color: rgba(54, 215, 127, .7); padding-top: 24px; }
.best-tag { position: absolute; top: 0; left: 0; right: 0; padding: 4px 0; font: 700 10px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; font-style: normal;
color: #062b17; background: linear-gradient(90deg, #36d77f, #9df5c3, #36d77f); }
.crate { --g: 242, 200, 43; position: relative; isolation: isolate; overflow: hidden;
background:
radial-gradient(70% 55% at 50% 38%, rgba(var(--g), .26), transparent 70%),
linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .015) 40%, rgba(var(--g), .08) 100%),
rgba(18, 20, 24, .6);
-webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
border: 1px solid rgba(var(--g), .35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -18px 30px -24px rgba(var(--g), .9), 0 14px 30px -18px rgba(var(--g), .7);
transition: transform .18s var(--spring); }
.crate.k-armor { --g: 25, 184, 246; }
.crate::before { content: ""; position: absolute; inset: 1px 1px 60%; z-index: -1; border-radius: 15px 15px 50% 50% / 15px 15px 20px 20px;
background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent); pointer-events: none; }
.crate::after { content: ""; position: absolute; left: 20%; right: 20%; top: 72px; height: 14px; z-index: -1; border-radius: 50%;
background: radial-gradient(closest-side, rgba(var(--g), .65), transparent); filter: blur(2px); }
.crate:active { transform: scale(.97); }
.crate .crate-box { filter: drop-shadow(0 8px 14px rgba(var(--g), .45)); animation: crateFloat 3.6s ease-in-out infinite; }
.crate:nth-child(2n) .crate-box { animation-delay: -1.8s; }
@keyframes crateFloat { 50% { transform: perspective(200px) rotateX(10deg) translateY(-3px); } }
.crate .crate-price { color: #e9e2c0; font-weight: 600; }
.crate.k-armor .crate-price { color: #cdeefe; }
.crate.is-locked { --g: 120, 124, 132; filter: grayscale(.7); }
.crate.is-locked .crate-box { animation: none; }
.task-card.gw { border-color: rgba(236, 59, 50, .28);
background: radial-gradient(90% 60% at 100% 0%, rgba(236, 59, 50, .12), transparent 60%), var(--surface); }
@media (prefers-reduced-motion: reduce) {
.btn.glass.shine::after, .crate .crate-box { animation: none; }
}
.bundle small { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; line-height: 1.3; }
.bundle small b, .bundle small s { font: 700 12px/1.3 var(--body); text-shadow: none; }
.bundle small b.sale-price { color: var(--green); }
.vip-card { position: relative; isolation: isolate; overflow: hidden; color: var(--text);
background:
radial-gradient(90% 70% at 85% 0%, rgba(242, 217, 43, .38), transparent 60%),
radial-gradient(70% 60% at 0% 100%, rgba(255, 170, 0, .18), transparent 65%),
linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .01) 45%), rgba(20, 18, 10, .75);
-webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
border: 1px solid rgba(242, 217, 43, .55);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -24px 40px -30px rgba(242, 217, 43, .8), 0 20px 44px -22px rgba(242, 217, 43, .75); }
.vip-card::before { content: ""; position: absolute; inset: 1px 1px auto; height: 90px; z-index: -1; border-radius: 19px 19px 0 0;
background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent); }
.vip-card .vip-head h2 { color: var(--yellow); text-shadow: 0 0 22px rgba(242, 217, 43, .5); }
.vip-card .vip-head .small { opacity: .75 !important; }
.vip-card .vip-perks { color: #e8e3cc; }
.vip-card .vip-perks li::marker { color: var(--yellow); }
.vip-card.on { color: var(--text); border-color: rgba(25, 184, 246, .6);
background: radial-gradient(90% 70% at 85% 0%, rgba(25, 184, 246, .38), transparent 60%),
linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .01) 45%), rgba(8, 18, 24, .78);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -24px 40px -30px rgba(25, 184, 246, .8), 0 20px 44px -22px rgba(25, 184, 246, .7); }
.vip-card.on .vip-head h2 { color: #8fe0ff; text-shadow: 0 0 22px rgba(25, 184, 246, .5); }
.btn.small.glass { height: 34px; border-radius: 11px; font-size: 14px; }
.btn.small.glass::before { border-radius: 10px 10px 0 0; }
.lb-chips { margin-top: 0; }
.lb-hint { margin: -2px 2px 14px; font-size: 13px; color: var(--muted); }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin: 18px 0 16px; }
.pod { display: grid; justify-items: center; text-align: center; min-width: 0; position: relative; }
.pod.empty { visibility: hidden; }
.pod-crown { font-size: 26px; margin-bottom: -6px; filter: drop-shadow(0 4px 10px rgba(242,217,43,.6)); animation: giftBob 3s ease-in-out infinite; }
.pod-name { margin-top: 8px; font-weight: 700; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-val { margin-top: 2px; font: 700 15px/1.2 var(--display); color: var(--yellow); }
.pod-base { width: 100%; margin-top: 10px; border-radius: 14px 14px 6px 6px; display: grid; place-items: start center; padding-top: 8px; position: relative; overflow: hidden;
--g: 205, 127, 79;
background: linear-gradient(180deg, rgba(var(--g), .38), rgba(var(--g), .08));
border: 1px solid rgba(var(--g), .6); border-bottom: 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 -10px 30px -14px rgba(var(--g), .8); }
.pod-base::before { content: ""; position: absolute; inset: 1px 1px 60%; border-radius: 13px 13px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.22), transparent); }
.pod-base b { font: 700 30px/1 var(--display); color: rgba(255,255,255,.9); text-shadow: 0 0 16px rgba(var(--g), .9); position: relative; }
.pod.p1 .pod-base { height: 92px; --g: 242, 200, 43; }
.pod.p2 .pod-base { height: 70px; --g: 201, 204, 210; }
.pod.p3 .pod-base { height: 56px; }
.pod.me .pod-name { color: var(--yellow); }
.lb-ava { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3);
font: 700 15px/1 var(--display); border: 2px solid rgba(255,255,255,.12); }
.lb-ava.big { width: 58px; height: 58px; font-size: 24px; border-width: 3px; }
.pod.p1 .lb-ava.big { width: 70px; height: 70px; font-size: 28px; border-color: var(--yellow); box-shadow: 0 0 24px rgba(242,217,43,.55); }
.pod.p2 .lb-ava.big { border-color: #c9ccd2; }
.pod.p3 .lb-ava.big { border-color: #cd7f4f; }
.lb-ava.frame-veteran { border-color: #cd7f4f; }
.lb-ava.frame-season1 { border-color: #9b5cf0; box-shadow: 0 0 12px rgba(155,92,240,.5); }
.lb-clan { font-size: 11px; font-weight: 600; color: var(--cyan); }
.pod .lb-clan { margin-top: 2px; }
.lb-row .lb-rank { width: 28px; text-align: center; font: 700 16px/1 var(--display); color: var(--muted); }
.lb-row.me { background: rgba(242,217,43,.08); }
.lb-row + .lb-row::before { left: 90px; }
.lb-me { position: sticky; bottom: calc(76px + var(--safe-bottom)); z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
background: linear-gradient(180deg, rgba(242,217,43,.18), rgba(242,217,43,.06)), rgba(16,17,20,.86);
-webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
border: 1px solid rgba(242,217,43,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 30px -10px rgba(0,0,0,.7); }
.lb-me .lb-rank { min-width: 34px; font: 700 22px/1 var(--display); color: var(--yellow); text-align: center; }
.lb-me .grow { flex: 1; min-width: 0; }
.lb-me .value { color: var(--yellow); font-weight: 700; }
.lb-me.muted { background: rgba(16,17,20,.86); border-color: var(--line-2); }
.section-head .btn.small.ghost { height: 30px; font-size: 13px; padding: 0 12px; }
.arena-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.season-chip { appearance: none; border: 1px solid rgba(242,217,43,.4); background: rgba(242,217,43,.1); color: var(--yellow);
font: 600 12px/1 var(--body); padding: 6px 10px; border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.season-card { position: relative; overflow: hidden; border-radius: 20px; padding: 16px; border: 1px solid rgba(242,217,43,.28);
background: radial-gradient(120% 90% at 100% 0%, rgba(242,217,43,.16), transparent 60%), radial-gradient(90% 70% at 0% 100%, rgba(155,107,255,.14), transparent 60%), var(--surface); }
.season-head { display: flex; align-items: center; gap: 10px; }
.season-head b { font: 700 24px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.season-now { border-radius: 14px; padding: 12px 14px; background: rgba(0,0,0,.28); border: 1px solid var(--line-2); }
.season-now .sn-league { font: 700 22px/1.2 var(--display); margin-top: 4px; }
.season-now .sn-reward { color: var(--yellow); font-weight: 600; margin-top: 2px; }
.season-tier .st-league { min-width: 112px; font: 600 15px/1.2 var(--display); }
.season-tier:not(.ok) { opacity: .62; }
.season-tier.cur { opacity: 1; background: linear-gradient(90deg, rgba(242,217,43,.14), rgba(242,217,43,.02)); box-shadow: inset 3px 0 0 var(--yellow); }
.season-tier .value { color: var(--text); }
.yellow { color: var(--yellow); }
.season-recap { --rc: #f2d92b; position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px 20px calc(24px + var(--safe-bottom)); overflow: hidden;
background: radial-gradient(70% 45% at 50% 32%, rgba(242,217,43,.22), transparent 70%), #07080a; animation: fade .3s; }
.season-recap.out { animation: fade .3s reverse forwards; }
.season-recap .reveal-rays { top: 32%; opacity: 0; transition: opacity .8s; }
.season-recap.s1 .reveal-rays { opacity: .55; }
.sr-body { position: relative; width: 100%; max-width: 380px; display: grid; justify-items: center; text-align: center; }
.sr-kicker { font: 600 13px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.sr-title { font: 700 32px/1.1 var(--display); text-transform: uppercase; margin-top: 8px; }
.sr-badge { --lc: 205,127,79; width: 132px; height: 132px; margin-top: 22px; border-radius: 34px; display: grid; place-items: center; transform: scale(.2) rotate(-25deg); opacity: 0;
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 40%), linear-gradient(160deg, rgba(var(--lc), .9), rgba(var(--lc), .35));
border: 2px solid rgba(255,255,255,.35); box-shadow: 0 0 60px rgba(var(--lc), .65), inset 0 2px 0 rgba(255,255,255,.5); }
.sr-badge span { font-size: 64px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.season-recap.s1 .sr-badge { animation: srBadge .8s var(--spring) forwards; }
@keyframes srBadge { to { transform: scale(1) rotate(0); opacity: 1; } }
.sr-badge.league-silver { --lc: 201,204,210; } .sr-badge.league-gold { --lc: 242,200,43; } .sr-badge.league-platinum { --lc: 25,184,246; }
.sr-badge.league-diamond { --lc: 120,200,255; } .sr-badge.league-master { --lc: 236,90,50; } .sr-badge.league-legend { --lc: 155,107,255; }
.sr-league, .sr-stats, .sr-got, .sr-note, .sr-go { opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s var(--ease); }
.sr-league { font: 700 26px/1.2 var(--display); text-transform: uppercase; margin-top: 14px; }
.season-recap.s1 .sr-league { opacity: 1; transform: none; transition-delay: .4s; }
.sr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 18px; }
.sr-stats > div { display: grid; gap: 2px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); }
.sr-stats b { font: 700 30px/1.1 var(--display); color: var(--yellow); }
.sr-stats small { color: var(--muted); font-size: 12px; }
.season-recap.s2 .sr-stats { opacity: 1; transform: none; }
.sr-got { margin-top: 18px; }
.sr-loots { display: flex; justify-content: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.sr-loot { display: grid; justify-items: center; gap: 2px; min-width: 92px; padding: 12px 10px; border-radius: 16px; opacity: 0; transform: scale(.6) translateY(16px);
background: linear-gradient(180deg, rgba(242,217,43,.16), rgba(242,217,43,.04)); border: 1px solid rgba(242,217,43,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.sr-loot.in { animation: srLoot .5s var(--spring) forwards; }
@keyframes srLoot { to { opacity: 1; transform: none; } }
.sr-loot i { font-style: normal; font-size: 28px; }
.sr-loot b { font: 700 22px/1 var(--display); }
.sr-loot small { color: var(--muted); font-size: 11px; }
.season-recap.s3 .sr-got, .season-recap.s3 .sr-note, .season-recap.s3 .sr-go { opacity: 1; transform: none; }
.season-recap.s3 .sr-note { transition-delay: .5s; } .season-recap.s3 .sr-go { transition-delay: .7s; }
.sr-note { margin: 16px 0 14px; }
.sr-go { width: 100%; }
.season-card .timer { font-size: 13px; color: var(--muted); margin-top: 8px; }
.fr-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fr-nums > div { display: grid; justify-items: center; }
.big-num.cyan { color: var(--cyan); }
.ms-card { border-radius: 18px; padding: 26px 18px 14px; background: radial-gradient(100% 120% at 0% 0%, rgba(25,184,246,.12), transparent 60%), var(--surface); border: 1px solid var(--line-2); }
.ms-track { position: relative; height: 8px; margin: 0 14px 18px 4px; border-radius: 99px; background: var(--surface-3); }
.ms-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--yellow)); box-shadow: 0 0 12px rgba(25,184,246,.5); transition: width .6s var(--ease); }
.ms-node { position: absolute; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; display: grid; place-items: center;
background: var(--surface-2); border: 2px solid var(--line-2); font: 700 12px/1 var(--display); color: var(--muted); }
.ms-node.done { background: var(--cyan); border-color: var(--cyan); color: #04121a; }
.ms-node.ready { background: var(--yellow); border-color: var(--yellow-2); color: var(--yellow-ink); box-shadow: 0 0 0 4px rgba(242,217,43,.22), 0 0 18px rgba(242,217,43,.7); animation: msPulse 1.6s ease-in-out infinite; }
@keyframes msPulse { 50% { box-shadow: 0 0 0 7px rgba(242,217,43,.08), 0 0 26px rgba(242,217,43,.9); } }
.ms-row .ms-need { width: 44px; text-align: center; font: 700 20px/1 var(--display); color: var(--muted); }
.ms-row .ms-need small { display: block; font-size: 11px; margin-top: 2px; }
.ms-row.ready { background: linear-gradient(90deg, rgba(242,217,43,.12), transparent); }
.ms-row.ready .ms-need { color: var(--yellow); }
.ms-row.claimed { opacity: .55; }
.fr-st { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 2px 6px; border-radius: 6px; font: 600 10px/1.2 var(--body); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-3); color: var(--muted); }
.fr-st.ok { background: rgba(54,215,127,.16); color: var(--green); }
.fr-row .btn.small { flex: none; }
.fr-nums > div:first-child .big-num { color: var(--text); }
.ms-row .title { white-space: normal; overflow: visible; }
.avatar-ring.frame-recruiter { padding: 5px; background: conic-gradient(from 90deg, #19b8f6, #36d77f, #19b8f6, #0b6fa8, #19b8f6); box-shadow: 0 0 22px rgba(25,184,246,.5); }
.avatar-ring.frame-recruiter::after { content: "👥"; position: absolute; top: -6px; right: -4px; font-size: 14px; }
.avatar-ring.frame-legend { padding: 5px; background: conic-gradient(from 0deg, #9b6bff, #f2d92b, #ec3b32, #9b6bff); box-shadow: 0 0 26px rgba(155,107,255,.6); animation: legendGlow 3s ease-in-out infinite; }
.avatar-ring.frame-legend::after { content: "🏆"; position: absolute; top: -8px; right: -6px; font-size: 16px; }
@keyframes legendGlow { 50% { box-shadow: 0 0 34px rgba(242,217,43,.7); } }
.lb-ava.frame-recruiter { border-color: var(--cyan); } .lb-ava.frame-legend { border-color: #9b6bff; box-shadow: 0 0 12px rgba(155,107,255,.5); }
.avatar.has-media, .lb-ava.has-media, .adm-ava.has-img { overflow: hidden; padding: 0; }
.ava-media { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; pointer-events: none; }
.name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.edit-pen { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; padding: 0;
border: 1px solid var(--line-2); background: rgba(255,255,255,.06); color: var(--text); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.edit-pen svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.edit-pen:active { transform: scale(.92); }
.ep-hero { display: grid; justify-items: center; text-align: center; padding: 22px 16px 18px; border-radius: 22px; border: 1px solid var(--line-2);
background: radial-gradient(90% 70% at 50% 0%, rgba(242,217,43,.14), transparent 70%), var(--surface); }
.ep-ava-wrap { position: relative; }
.ep-ring { width: 128px; height: 128px; padding: 5px; }
.ep-ring .avatar { font-size: 46px; }
.ep-busy { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); }
.ep-hero-name { font: 700 22px/1.1 var(--display); text-transform: uppercase; margin-top: 12px; }
.ep-ava-btns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.ep-upload { cursor: pointer; }
.ep-field .subtitle { margin-bottom: 2px; }
.ep-field .chev { color: var(--muted); font-size: 16px; }
.ep-servers { display: flex; gap: 10px; }
.ep-servers .chip-btn { flex: 1; height: 48px; font-size: 16px; }
.ep-err { color: var(--red); margin: -6px 0 12px; }
.ep-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ep-frame { appearance: none; display: grid; justify-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: 18px; color: var(--text);
background: var(--surface); border: 1.5px solid var(--line); text-align: center; font: inherit; }
.ep-frame .avatar-ring { width: 64px; height: 64px; }
.ep-frame .avatar { font-size: 22px; }
.ep-frame b { font: 600 13px/1.15 var(--display); letter-spacing: .02em; }
.ep-frame small { font-size: 10.5px; color: var(--muted); }
.ep-frame .ep-on { color: var(--yellow); }
.ep-frame.on { border-color: var(--yellow); background: linear-gradient(180deg, rgba(242,217,43,.12), transparent), var(--surface); }
.ep-frame.locked .avatar-ring { filter: grayscale(.65) brightness(.7); }
.ep-frame.locked b { color: var(--muted); }
.ep-fsheet { display: grid; justify-items: center; text-align: center; gap: 4px; }
.ep-fprev { position: relative; margin: 6px 0 10px; }
.ep-fprev.locked .avatar-ring { filter: grayscale(.5) brightness(.75); }
.ep-lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; }
.ep-quote { font-style: italic; color: var(--text); opacity: .85; margin: 6px 8px 12px; line-height: 1.45; }
.ep-how { width: 100%; display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); margin-bottom: 14px; }
.ep-how small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ep-fsheet .btn { width: 100%; }
.avatar-ring.frame-pioneer { padding: 5px; background: conic-gradient(from 45deg, #8d6e4a, #d9b77e, #6b4f2f, #d9b77e, #8d6e4a); box-shadow: 0 0 18px rgba(217,183,126,.35); }
.avatar-ring.frame-pioneer::after { content: "🧭"; position: absolute; top: -6px; right: -4px; font-size: 15px; }
.avatar-ring.frame-vip { padding: 5px; background: conic-gradient(from 0deg, #7fe3ff, #ffffff, #19b8f6, #b9f0ff, #7fe3ff); box-shadow: 0 0 24px rgba(127,227,255,.55); animation: vipShine 2.4s linear infinite; }
.avatar-ring.frame-vip::after { content: "👑"; position: absolute; top: -6px; right: -4px; font-size: 15px; }
@keyframes vipShine { 50% { box-shadow: 0 0 34px rgba(255,255,255,.7); } }
.avatar-ring.frame-patron { padding: 5px; background: conic-gradient(from 180deg, #f2d92b, #ff8a1f, #f2d92b, #fff3a0, #f2d92b); box-shadow: 0 0 24px rgba(255,138,31,.45); }
.avatar-ring.frame-patron::after { content: "⭐"; position: absolute; top: -6px; right: -4px; font-size: 15px; }
.lb-ava.frame-pioneer { border-color: #d9b77e; } .lb-ava.frame-vip { border-color: #7fe3ff; } .lb-ava.frame-patron { border-color: #ff8a1f; }
.name-row { align-items: flex-start; } .edit-pen { margin-top: 2px; }
.adm-money { padding: 16px; }
.adm-money-main { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; align-items: end; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.adm-big { font: 700 40px/1.05 var(--display); color: var(--yellow); margin: 2px 0 4px; }
.adm-big small { font-size: 22px; }
.adm-mid { font: 700 24px/1.1 var(--display); margin: 2px 0 2px; }
.adm-money-grid { gap: 14px 12px; margin: 14px 0; }
.adm-money-grid > div { display: grid; gap: 2px; align-content: start; }
.adm-money-grid b { font: 700 20px/1.15 var(--display); }
.adm-delta { display: inline-block; justify-self: start; font: 600 11px/1 var(--body); padding: 3px 6px; border-radius: 6px; background: var(--surface-3); color: var(--muted); margin-top: 2px; }
.adm-delta.up { background: rgba(54,215,127,.15); color: var(--green); }
.adm-delta.down { background: rgba(236,59,50,.15); color: var(--red); }
.adm-dist { padding-top: 12px; border-top: 1px solid var(--line); }
.adm-dist-row { display: grid; grid-template-columns: 82px 1fr 34px; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.adm-dist-row b { text-align: right; }
.adm-dist-row .adm-kbar { margin: 0; }
.pcard { position: relative; overflow: hidden; border-radius: 22px; margin: 4px 0 14px; background: var(--surface); border: 1px solid var(--line-2);
box-shadow: 0 18px 40px -24px rgba(0,0,0,.9); }
.pc-banner { position: relative; height: 112px; overflow: hidden; background: #1a1d24; }
.pc-bmedia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(22,24,28,.85) 100%); }
.pc-gear { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.18); color: #fff;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pc-body { position: relative; display: flex; align-items: flex-end; gap: 12px; padding: 0 14px; margin-top: -44px; }
.pc-ring { width: 92px; height: 92px; }
.pc-ring .avatar { font-size: 32px; }
.pc-main { flex: 1; min-width: 0; padding-bottom: 2px; }
.pc-name { font: 700 24px/1.05 var(--display); text-transform: uppercase; word-break: break-word; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.pc-sub { margin-top: 3px; }
.pc-likes { flex: none; display: grid; justify-items: center; gap: 1px; padding: 6px 10px; border-radius: 14px; background: rgba(236,59,50,.12); border: 1px solid rgba(236,59,50,.35); }
.pc-likes span { font-size: 16px; line-height: 1; }
.pc-likes b { font: 700 15px/1 var(--display); }
.pc-level { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; }
.pc-lv { flex: none; font: 700 14px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--yellow); }
.pc-level .bar { flex: 1; margin: 0; }
.pc-show { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px 14px; }
.pc-slot { appearance: none; font: inherit; color: var(--text); display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 78px; padding: 8px 4px; border-radius: 14px; text-align: center;
--tc: 205,127,79; background: linear-gradient(180deg, rgba(var(--tc), .2), rgba(var(--tc), .05)); border: 1px solid rgba(var(--tc), .5); }
.pc-slot.t2 { --tc: 201,204,210; } .pc-slot.t3 { --tc: 242,200,43; box-shadow: 0 0 16px -4px rgba(242,200,43,.6); }
.pc-slot.empty { background: rgba(255,255,255,.03); border: 1.5px dashed var(--line-2); color: var(--muted); }
.pc-semoji { font-size: 24px; line-height: 1.1; }
.pc-slot b { font: 600 12px/1.15 var(--display); letter-spacing: .02em; }
.pc-slot small { font-size: 10.5px; color: rgba(var(--tc), 1); }
.pc-slot.empty small { color: var(--muted); }
.pc-sheet .pcard { margin: 4px 0 12px; }
.pc-actions { display: grid; gap: 6px; }
.pc-actions .btn { width: 100%; }
.pc-like small { font-weight: 500; opacity: .85; margin-left: 6px; font-size: 12px; }
.pc-like.on { color: var(--red); border-color: rgba(236,59,50,.4); }
.pc-note { text-align: center; margin: 2px 0 0; }
.pc-heart { position: absolute; left: 50%; top: 40%; font-size: 90px; transform: translate(-50%, -50%) scale(.3); pointer-events: none; animation: pcHeart 1.1s var(--spring) forwards; }
@keyframes pcHeart { 40% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -110%) scale(.9); opacity: 0; } }
.lb-tap { color: var(--muted-2); font-size: 12px; }
.lb-row[data-act], .pod[data-act], .fr-row [data-act] { cursor: pointer; }
.lb-row[data-act]:active, .pod[data-act]:active { opacity: .7; }
.bn-default { background: radial-gradient(120% 140% at 0% 0%, rgba(242,217,43,.22), transparent 55%), linear-gradient(135deg, #20232b, #121418); }
.bn-dusk { background: linear-gradient(160deg, #ff7a59 0%, #c2406b 45%, #3b1f5c 80%, #15111f 100%); }
.bn-neon { background: radial-gradient(60% 120% at 20% 100%, rgba(25,184,246,.75), transparent 60%), radial-gradient(60% 120% at 85% 0%, rgba(255,79,163,.75), transparent 60%), #0b0820; }
.bn-neon::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 22px), repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 22px); }
.bn-arena { background: radial-gradient(80% 140% at 50% 120%, rgba(236,59,50,.9), transparent 60%), repeating-linear-gradient(-35deg, rgba(0,0,0,.25) 0 14px, transparent 14px 28px), linear-gradient(180deg, #3a0d0b, #140606); }
.bn-gold { background: linear-gradient(115deg, #7a5a12 0%, #f2d92b 30%, #fff3a0 42%, #c48a12 58%, #f2d92b 75%, #6b4a0c 100%); background-size: 200% 100%; animation: bnGold 6s linear infinite; }
@keyframes bnGold { to { background-position: -200% 0; } }
.bn-cosmos { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 70%, #fff, transparent),
radial-gradient(1px 1px at 40% 80%, #fff, transparent), radial-gradient(1px 1px at 55% 45%, #cfe8ff, transparent), radial-gradient(70% 120% at 70% 30%, rgba(155,107,255,.6), transparent 60%), radial-gradient(60% 100% at 10% 90%, rgba(25,184,246,.5), transparent 60%), #070816; }
.bn-legend { background: conic-gradient(from 200deg at 50% 120%, #9b6bff, #f2d92b, #ec3b32, #9b6bff); }
.bn-legend::before { content: "🏆"; position: absolute; right: 14px; top: 10px; font-size: 34px; opacity: .55; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.ep-banners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ep-banner { appearance: none; font: inherit; color: var(--text); position: relative; display: grid; gap: 6px; padding: 8px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); text-align: left; }
.ep-banner .pc-banner, .ep-bpick .pc-banner { height: 58px; border-radius: 10px; }
.ep-banner .pc-shade { display: none; }
.ep-banner b { font: 600 13px/1.15 var(--display); padding: 0 2px; }
.ep-banner.on { border-color: var(--yellow); }
.ep-banner .ep-on { position: absolute; top: 12px; right: 12px; background: var(--yellow); color: #121212; border-radius: 6px; padding: 1px 5px; font-weight: 700; }
.ep-banner.locked .pc-banner { filter: grayscale(.6) brightness(.6); }
.ep-banner.locked b { color: var(--muted); }
.ep-block { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font-size: 20px; }
.ep-bpick { appearance: none; padding: 0; border: 0; background: none; display: block; width: 100%; }
.ep-bempty { height: 58px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; opacity: .6; }
.ep-bup { display: block; text-align: center; padding: 6px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--yellow); background: rgba(242,217,43,.1); border: 1px solid rgba(242,217,43,.35); cursor: pointer; }
.ep-bprev { position: relative; width: 100%; margin: 6px 0 10px; }
.ep-bprev .pc-banner { border-radius: 16px; }
.ep-bprev.locked .pc-banner { filter: grayscale(.5) brightness(.7); }
.ep-show { padding: 0; }
.link-btn { appearance: none; border: 0; background: none; color: var(--red); font: inherit; padding: 0; text-decoration: underline; }
.open-row { display: grid; grid-template-columns: 1fr 64px; gap: 8px; }
.open-row .btn { width: 100%; }
.btn.x3 { padding: 0; font: 700 18px/1 var(--display); letter-spacing: .02em; }
.auto-btn { width: 100%; margin-top: 8px; }
.auto-btn.locked { color: var(--muted); }
.auto-hero { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; font-size: 40px; color: #121212; margin: 4px 0 10px;
background: linear-gradient(135deg, #fff3a0, #f2d92b 45%, #c48a12); box-shadow: 0 0 36px rgba(242,217,43,.5), inset 0 2px 0 rgba(255,255,255,.6); }
.auto-bar { position: fixed; left: 12px; right: 12px; bottom: calc(14px + var(--safe-bottom)); z-index: 80; padding: 10px 12px; border-radius: 18px;
background: rgba(16,17,20,.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(242,217,43,.35);
box-shadow: 0 16px 40px -12px rgba(0,0,0,.8); animation: fade .25s; }
.ab-top { display: flex; align-items: center; gap: 8px; }
.ab-top b { color: var(--yellow); font: 700 14px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.ab-top .num { font-size: 12px; color: var(--muted); }
.ab-top .btn.small { margin-left: auto; height: 32px; }
.ab-rare { appearance: none; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font: 600 11px/1 var(--body); padding: 6px 8px; border-radius: 8px; }
.ab-rare.on { color: var(--yellow); border-color: rgba(242,217,43,.5); background: rgba(242,217,43,.1); }
.ab-log { display: flex; gap: 5px; margin-top: 8px; overflow: hidden; }
.ab-chip { flex: none; max-width: 86px; padding: 4px 7px; border-radius: 7px; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
background: color-mix(in srgb, var(--rc) 22%, #15171b); border-bottom: 2px solid var(--rc); animation: fade .3s; }
.cs-lines { display: grid; gap: 10px; }
.case-open.multi { gap: 16px; }
.case-open.multi .cs-window { height: 128px; }
.case-open.multi .cs-strip { top: 10px; }
.case-open.multi .cs-item { width: 92px; height: 108px; }
.case-open.multi .cs-img { height: 72px; font-size: 34px; }
.case-open.multi .cs-name { font-size: 11px; padding: 5px 6px 0; }
.cs-x { color: var(--yellow); }
.cs-window.landed .cs-item:not(.win) { opacity: .28; filter: grayscale(.6); transition: opacity .3s; }
.cs-window.rk3, .cs-window.rk4 { box-shadow: inset 0 0 40px -6px var(--wc, rgba(240,179,35,.5)); }
.cs-window.rk4 { --wc: rgba(236,59,50,.6); animation: csShake .45s; }
@keyframes csShake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.case-open.flash::after, .reveal-many.flash::after, .bp-reward.flash::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%); animation: flashOut .5s forwards; pointer-events: none; }
@keyframes flashOut { from { opacity: 1; } to { opacity: 0; } }
.reveal.rk0 .reveal-rays { display: none; }
.reveal.rk3 .rv-front, .reveal.rk4 .rv-front { box-shadow: 0 0 0 3px var(--rc), 0 0 60px var(--rc); }
.reveal.burst .reveal-stage::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%;
box-shadow: 0 0 0 0 var(--rc); animation: ring 1s ease-out forwards; pointer-events: none; }
@keyframes ring { to { box-shadow: 0 0 0 220px transparent; opacity: 0; } }
.reveal.rk4 .reveal-rays { animation-duration: 8s; opacity: .8 !important; }
.reveal-stage { position: relative; }
.reveal-many { position: fixed; inset: 0; z-index: 55; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 24px 14px calc(24px + var(--safe-bottom)); overflow: hidden;
background: radial-gradient(70% 45% at 50% 40%, color-mix(in srgb, var(--rc) 26%, transparent), rgba(5,6,8,.97) 72%), #08090b; animation: fade .25s; }
.reveal-many.out { animation: fade .25s reverse forwards; }
.reveal-many .reveal-rays { opacity: .35; top: 40%; }
.reveal-many.rk0 .reveal-rays, .reveal-many.rk1 .reveal-rays { opacity: .12; }
.rm-title { font: 700 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .06em; position: relative; }
.rm-row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 420px; }
.rm-card { display: grid; gap: 8px; perspective: 800px; }
.rm-inner { position: relative; aspect-ratio: 3 / 4; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
.rm-card.flip .rm-inner { transform: rotateY(180deg); }
.rm-face { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; font-size: 34px; overflow: hidden; }
.rm-back { background: linear-gradient(135deg, #2a2e36, #15171b); border: 2px solid rgba(255,255,255,.12); font: 700 22px/1 var(--display); color: rgba(255,255,255,.35); }
.rm-front { transform: rotateY(180deg); background: #1d2026 center/cover no-repeat; border: 2px solid var(--rc); box-shadow: 0 0 22px -4px var(--rc); }
.rm-card.rk3 .rm-front, .rm-card.rk4 .rm-front { box-shadow: 0 0 0 2px var(--rc), 0 0 36px var(--rc); }
.rm-card.rk4.flip .rm-inner { animation: rmPop .7s var(--spring); }
@keyframes rmPop { 50% { transform: rotateY(180deg) scale(1.12); } }
.rm-info { display: grid; gap: 2px; text-align: center; opacity: 0; transition: opacity .3s; }
.rm-card.flip .rm-info { opacity: 1; }
.rm-info b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-info small { font-size: 11px; color: var(--rc); font-weight: 600; }
.rm-info .rm-sub { color: var(--muted); font-weight: 500; font-size: 10.5px; }
.rm-actions { width: 100%; max-width: 420px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.reveal-many.shown .rm-actions { opacity: 1; pointer-events: auto; }
.bp-reward { position: fixed; inset: 0; z-index: 65; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 40px 20px calc(28px + var(--safe-bottom)); overflow: hidden;
background: radial-gradient(70% 45% at 50% 45%, color-mix(in srgb, var(--rc) 30%, transparent), rgba(5,6,8,.97) 72%), #08090b; animation: fade .25s; }
.bp-reward.out { animation: fade .28s reverse forwards; }
.bp-reward .reveal-rays { top: 45%; opacity: .3; transition: opacity .4s; }
.bp-reward.rk0 .reveal-rays { opacity: 0; } .bp-reward.rk1 .reveal-rays { opacity: .15; } .bp-reward.rk4 .reveal-rays { opacity: .65; animation-duration: 7s; }
.bpr-head { position: relative; font: 600 13px/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.bpr-stage { position: relative; display: grid; place-items: center; }
.bpr-card { position: relative; display: grid; justify-items: center; gap: 6px; min-width: 210px; padding: 26px 22px 22px; border-radius: 26px; text-align: center;
background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 26%, #1b1e24), #121418); border: 2px solid var(--rc);
box-shadow: 0 0 50px -10px var(--rc), inset 0 1px 0 rgba(255,255,255,.2); animation: bprIn .55s var(--spring); }
.bp-reward.rk0 .bpr-card { animation-duration: .35s; box-shadow: none; }
.bp-reward.rk3 .bpr-card { animation: bprIn .7s var(--spring), bprGlow 1.6s ease-in-out .7s infinite; }
.bp-reward.rk4 .bpr-card { animation: bprMega .9s var(--spring), bprGlow 1.2s ease-in-out .9s infinite; }
@keyframes bprIn { from { transform: scale(.4) translateY(30px); opacity: 0; } }
@keyframes bprMega { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.15) rotate(3deg); opacity: 1; } }
@keyframes bprGlow { 50% { box-shadow: 0 0 80px -6px var(--rc), inset 0 1px 0 rgba(255,255,255,.2); } }
.bpr-icon { font-size: 64px; line-height: 1; filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
.bp-reward.rk4 .bpr-icon { font-size: 78px; }
.bpr-big { font: 700 34px/1.05 var(--display); color: #fff; text-shadow: 0 0 20px var(--rc); max-width: 260px; word-break: break-word; }
.bpr-small { font: 600 14px/1.2 var(--body); color: var(--rc); text-transform: uppercase; letter-spacing: .08em; }
.bpr-meta { margin-top: 4px; font-size: 12px; color: var(--muted); }
.bpr-meta b { color: var(--yellow); }
.bpr-foot { position: relative; display: grid; justify-items: center; gap: 10px; }
.bpr-parts { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.bpr-parts i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 2px; background: var(--rc); box-shadow: 0 0 10px var(--rc);
transform: rotate(var(--a)) translateX(0) scale(var(--s)); animation: bprPart 1.1s cubic-bezier(.15,.8,.3,1) forwards; }
@keyframes bprPart { to { transform: rotate(var(--a)) translateX(var(--d)) scale(0); opacity: 0; } }
.bp-reward.sum { grid-template-rows: 1fr; align-items: center; }
.bpr-sum { position: relative; display: grid; gap: 16px; justify-items: center; width: 100%; max-width: 400px; }
.bpr-title { font: 700 26px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.bpr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.bpr-card.mini { min-width: 0; padding: 12px 6px; border-radius: 16px; gap: 3px; animation: bprIn .4s var(--spring) both; }
.bpr-card.mini .bpr-icon { font-size: 28px; }
.bpr-card.mini .bpr-big { font-size: 17px; }
.bpr-card.mini .bpr-small { font-size: 10px; }
.bpr-sum .btn { width: 100%; }
.bp-reward.sum .reveal-rays { opacity: .14; }
.rm-front .rv-stars { font-size: 11px; letter-spacing: -1px; bottom: 6px; }
.reveal-many.rk0 .reveal-rays { opacity: .05; } .reveal-many.rk1 .reveal-rays { opacity: .1; }
.rm-row { align-items: start; }
.cs-item { perspective: 600px; }
.cs-flip { position: absolute; inset: 0 0 5px; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,1.4,.5,1); }
.cs-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px 6px 0 0; overflow: hidden; }
.cs-hid { display: grid; place-items: center; align-content: center; gap: 4px;
background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px), radial-gradient(90% 70% at 50% 40%, color-mix(in srgb, var(--rc) 45%, #1b1e24), #15171b); }
.cs-q { font: 700 46px/1 var(--display); color: color-mix(in srgb, var(--rc) 70%, #fff); text-shadow: 0 0 18px var(--rc); }
.cs-rl { font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--rc) 75%, #fff); text-transform: uppercase; letter-spacing: .04em; padding: 0 6px; text-align: center; }
.case-open.multi .cs-q { font-size: 34px; }
.case-open.multi .cs-rl { font-size: 9.5px; }
.cs-real { transform: rotateY(180deg); background: linear-gradient(180deg, #2a2e36 0%, color-mix(in srgb, var(--rc) 22%, #1b1e24) 100%); }
.cs-item.win .cs-flip { transform: rotateY(180deg); transition-delay: .15s; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin: 4px 0 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.mode-switch button { appearance: none; border: 0; height: 42px; border-radius: 12px; background: transparent; color: var(--muted); font: 700 15px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.mode-switch button.on { color: #121212; background: linear-gradient(180deg, #ffe94d, #f2d92b); box-shadow: 0 6px 18px -8px rgba(242,217,43,.8), inset 0 1px 0 rgba(255,255,255,.6); }
.mode-switch .seg-badge { vertical-align: 2px; }
.fold-box { margin-bottom: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.fold-head { appearance: none; width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 0; background: transparent; color: var(--text); text-align: left; }
.fold-title { flex: 1; font: 700 16px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.fold-pill { font: 600 12px/1 var(--body); padding: 6px 9px; border-radius: 9px; background: var(--surface-3); color: var(--muted); }
.fold-pill.hot { background: linear-gradient(180deg, #ffe94d, #f2d92b); color: #121212; animation: msPulse 1.8s ease-in-out infinite; }
.fold-pill.ok { background: rgba(54,215,127,.16); color: var(--green); }
.fold-chev { font-size: 18px; color: var(--muted); transition: transform .25s var(--ease); line-height: 1; }
.fold-box.folded .fold-chev { transform: rotate(-90deg); }
.fold-body { padding: 0 6px 6px; }
.fold-box.folded .fold-body { display: none; }
.fold-body > section { margin: 0; border: 0; background: transparent; box-shadow: none; }
.fold-body .bonus-top h3, .fold-body .dq-head h3 { display: none; }
.daily-pop { display: grid; justify-items: center; text-align: center; }
.daily-pop .dp-gift { font-size: 56px; animation: giftBob 2.4s ease-in-out infinite; }
.daily-pop .bonus-card { width: 100%; text-align: left; margin: 0; }
.daily-pop .bonus-top h3 { display: none; }
button.pc-likes { appearance: none; color: var(--text); font: inherit; cursor: pointer; }
button.pc-likes:active { transform: scale(.94); }
.lk-row [data-lc] { cursor: pointer; }
.ach-lvl { margin-bottom: 6px; }
.fold-body .dq-count { display: none; }
.tab-menu { position: fixed; inset: 0; z-index: 70; }
.tm-back { position: absolute; inset: 0; background: rgba(0,0,0,.45); animation: fade .18s; }
.tm-pop { position: absolute; padding: 6px; border-radius: 18px; background: rgba(20,22,26,.94); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255,255,255,.16); box-shadow: 0 20px 50px -10px rgba(0,0,0,.9); transform-origin: var(--ax, 50%) 100%; animation: tmIn .22s var(--spring); }
.tm-pop::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-top-color: rgba(20,22,26,.94); border-bottom: 0; }
@keyframes tmIn { from { transform: scale(.85) translateY(10px); opacity: 0; } }
.tab-menu.out .tm-pop { animation: tmIn .16s reverse forwards; }
.tab-menu.out .tm-back { animation: fade .16s reverse forwards; }
.tm-pop button { appearance: none; display: flex; width: 100%; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent;
color: var(--text); font: 600 15px/1 var(--body); text-align: left; }
.tm-pop button.on { background: rgba(242,217,43,.14); color: var(--yellow); }
.tm-pop button:active { background: rgba(255,255,255,.08); }
.tm-ico { width: 24px; text-align: center; font-size: 18px; }
.tm-label { flex: 1; }
.tm-badge { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--red); color: #fff; font: 700 11px/1 var(--body); }
.tab { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.lk-row { flex-wrap: wrap; row-gap: 8px; }
.lk-row .grow { flex: 1; }
.lk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.lk-btns .btn.small { padding: 8px 10px; width: 100%; justify-content: center; text-align: center; }
.lk-btns > span { display: flex; align-items: center; justify-content: center; }
.sheet-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 6px 12px 6px 8px;
border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,.12)); background: rgba(255,255,255,.06);
color: inherit; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.sheet-back:active { transform: scale(.96); }
.inv-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 6px; }
.inv-kind { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: var(--radius-sm);
background: var(--surface); border: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; transition: transform .15s var(--ease), border-color .2s, background .2s; }
.inv-kind span { font-size: 20px; line-height: 1; }
.inv-kind b { font-size: 13px; font-weight: 600; }
.inv-kind small { color: var(--muted); font-size: 11px; }
.inv-kind.on { border-color: var(--yellow); background: linear-gradient(180deg, rgba(242,217,43,.14), rgba(242,217,43,.03)); }
.inv-kind.on small { color: var(--yellow); }
.inv-kind:active { transform: scale(.96); }
.upg-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 16px 10px; position: relative; overflow: hidden; }
.upg-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 50%, rgba(54,215,127,.10), transparent 70%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.upg-stage.win::before { opacity: 1; animation: upgPulse .9s ease 2; }
.upg-stage.lose::before { background: radial-gradient(60% 80% at 50% 50%, rgba(236,59,50,.22), transparent 70%); opacity: 1; }
.upg-stage.lose { animation: upgShake .5s; }
@keyframes upgPulse { 50% { opacity: .3; } }
@keyframes upgShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.upg-side { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center;
background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; transition: transform .15s var(--ease); }
.upg-side:active { transform: scale(.95); }
.upg-side[disabled] { cursor: default; }
.upg-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 26px; color: var(--muted); padding: 14px 4px;
border: 1.5px dashed var(--line-2); border-radius: 14px; width: 100%; max-width: 104px; }
.upg-empty small { font-size: 11px; line-height: 1.2; }
.upg-sum { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }
.upg-sum b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upg-sum small { font-size: 11px; color: var(--muted); }
.upg-card { --rc: #8e929b; position: relative; display: inline-flex; width: 64px; height: 50px; border-radius: 12px; overflow: hidden;
background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 35%, var(--surface-2)), var(--surface)); border: 1px solid color-mix(in srgb, var(--rc) 60%, transparent);
box-shadow: 0 0 14px color-mix(in srgb, var(--rc) 25%, transparent); flex-shrink: 0; }
.upg-card.big { width: 86px; height: 64px; }
.upg-card.sm { width: 52px; height: 40px; border-radius: 10px; box-shadow: none; }
.upg-img { width: 100%; height: 100%; display: grid; place-items: center; font-size: 22px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.upg-stack { display: flex; justify-content: center; }
.upg-stack .upg-card { width: 56px; height: 44px; margin-left: -30px; }
.upg-stack .upg-card:first-child { margin-left: 0; }
.upg-stack.n1 .upg-card { width: 86px; height: 64px; }
.upg-stack.n2 .upg-card { margin-left: -22px; }
.upg-wheel { position: relative; width: 132px; height: 132px; }
.upg-wheel svg { width: 100%; height: 100%; overflow: visible; }
.upg-arm { position: absolute; inset: 0; transform-origin: 50% 50%; z-index: 2; pointer-events: none; will-change: transform; }
.upg-ring { fill: none; stroke: rgba(236,59,50,.28); stroke-width: 12; }
.upg-win { fill: none; stroke: var(--green); stroke-width: 12; filter: drop-shadow(0 0 6px rgba(54,215,127,.55)); transition: stroke-dasharray .35s var(--ease); }
.upg-tick { stroke: rgba(255,255,255,.22); stroke-width: 1.4; }
.upg-ptr { position: absolute; left: 50%; top: -6px; width: 0; height: 0; transform: translateX(-50%);
border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 15px solid var(--yellow); filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); z-index: 2; }
.upg-center { position: absolute; inset: 24px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center;
box-shadow: inset 0 0 0 1px var(--line); }
.upg-center b { font: 700 24px/1 var(--display); letter-spacing: .5px; }
.upg-center small { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-top: 3px; }
.upg-stage.win .upg-center b { color: var(--green); }
.upg-stage.lose .upg-center b { color: var(--red); }
.upg-go { width: 100%; margin-top: 12px; }
.upg-list { display: flex; flex-direction: column; gap: 6px; }
.upg-row { --rc: #8e929b; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface);
border: 1px solid var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .12s; }
.upg-row:active { transform: scale(.985); }
.upg-row .grow { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.upg-row .grow b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upg-row .grow small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upg-row.on { border-color: var(--rc); background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 18%, var(--surface)), var(--surface)); }
.upg-val { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.upg-val b { font-size: 13px; }
.upg-val small { font-size: 12px; font-weight: 700; color: var(--muted); }
.upg-val small.hi { color: var(--green); }
.upg-val small.mid { color: var(--yellow); }
.upg-val small.lo { color: var(--red); }
.upg-row.on .upg-check { color: var(--yellow); }
.upg-h.win .title { color: var(--green); }
.upg-h.lose .title { color: var(--muted); }
.upg-empty { position: relative; }
.upg-plus { position: absolute; top: 4px; right: 6px; font-size: 13px; color: var(--yellow); }
.upg-empty.pulse { border-color: var(--yellow); animation: upgEmptyPulse 1.4s ease-in-out infinite; }
@keyframes upgEmptyPulse { 50% { box-shadow: 0 0 0 4px rgba(242,217,43,.15); } }
.upg-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.upg-pickers .btn { justify-content: center; gap: 6px; }
.upg-pickers .btn b { color: var(--yellow); }
.upg-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.upg-sheet-head h2 { margin: 0; }
.upg-count { color: var(--yellow); font-weight: 700; }
.upg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
.upg-tile { --rc: #8e929b; position: relative; display: flex; flex-direction: column; gap: 2px; padding: 6px 6px 8px; border-radius: 14px; min-width: 0;
background: var(--surface); border: 1.5px solid var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer;
transition: transform .12s var(--ease), border-color .2s, opacity .2s; }
.upg-tile:active { transform: scale(.95); }
.upg-tile.on { border-color: var(--rc); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 22%, var(--surface)), var(--surface)); }
.upg-tile.off { opacity: .45; }
.upg-tile-img { position: relative; display: block; height: 58px; border-radius: 10px; overflow: hidden; margin-bottom: 4px;
background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 35%, var(--surface-2)), var(--surface-2)); border-bottom: 2px solid var(--rc); }
.upg-tile b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upg-tile small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upg-tile-val { font-size: 12px; font-weight: 700; margin-top: 2px; }
.upg-tick-on { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
background: var(--yellow); color: var(--yellow-ink); font-style: normal; font-size: 12px; font-weight: 800; }
.upg-ch { position: absolute; left: 4px; bottom: 4px; padding: 2px 6px; border-radius: 8px; font-style: normal; font-size: 11px; font-weight: 800;
background: rgba(0,0,0,.65); }
.upg-ch.hi { color: var(--green); } .upg-ch.mid { color: var(--yellow); } .upg-ch.lo { color: var(--red); }
.upg-sheet-foot { position: sticky; bottom: calc(-22px - var(--safe-bottom)); margin: 8px -18px calc(-22px - var(--safe-bottom));
padding: 10px 18px calc(14px + var(--safe-bottom)); background: linear-gradient(180deg, transparent, var(--bg-2) 30%); }
.upg-sheet-foot .btn { width: 100%; }
.upg-help { width: 100%; margin-top: 4px; }
.upg-formula { font-weight: 700; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); margin: 6px 0 8px; }
.upg-lock { position: absolute; left: 4px; top: 4px; font-style: normal; font-size: 13px; padding: 1px 5px; border-radius: 8px; background: rgba(0,0,0,.6); }
.pick-row .rdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.en { display: flex; gap: 3px; margin: 6px 0 3px; }
.en i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); }
.en i.on { background: linear-gradient(90deg, #ffe94d, #f2b92b); box-shadow: 0 0 6px rgba(242,217,43,.4); }
.en.sm { width: 110px; margin: 4px 0 0; } .en.sm i { height: 5px; }
.en-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.en-txt b { color: var(--yellow); }
.en-txt.tired { color: var(--cyan); }
.en-tired { color: var(--cyan); }
.slot-card .img { position: relative; }
.slot-card.tired .img { filter: none; }
.slot-card.tired .img::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1); }
.slot-card .zz { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; }
.slot-card .zz div { background: rgba(0,0,0,.66); border: 1px solid var(--line-2); border-radius: 12px; padding: 5px 10px; font: 700 13px var(--display); letter-spacing: .5px; text-align: center; }
.slot-card .zz small { display: block; font: 700 12px var(--body); color: var(--cyan); }
.ar-shield { display: flex; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 14px; margin-top: 12px;
background: linear-gradient(120deg, rgba(25,184,246,.2), rgba(25,184,246,.05)); border: 1px solid rgba(25,184,246,.45); text-align: left; }
.ar-shield .ic { font-size: 28px; filter: drop-shadow(0 0 10px rgba(25,184,246,.7)); }
.ar-shield b { font: 700 15px var(--display); letter-spacing: .5px; text-transform: uppercase; color: #7fd8ff; }
.ar-shield .t { font: 700 20px var(--display); margin-left: auto; }
.ar-sub { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }
.ar-def { padding: 12px 14px; margin-top: 12px; }
.ar-def-h { display: flex; justify-content: space-between; font-size: 13px; }
.ar-def .bar { margin: 8px 0; height: 7px; } .ar-def .bar i { background: linear-gradient(90deg, #ff8a5c, #ec3b32); }
.lu-list { display: flex; flex-direction: column; gap: 6px; }
.lu-row { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
color: var(--text); font: inherit; text-align: left; cursor: pointer; width: 100%; }
.lu-row.on { border-color: var(--yellow); background: linear-gradient(90deg, rgba(242,217,43,.12), var(--surface)); }
.lu-row.res.on { border-style: dashed; }
.lu-row.off { opacity: .5; cursor: default; }
.lu-img { width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; background-size: cover; background-position: center top; }
.lu-row .grow { display: flex; flex-direction: column; min-width: 0; }
.lu-row .grow b { font: 700 14px var(--display); text-transform: uppercase; }
.lu-rep { color: var(--yellow); font-size: 11.5px; }
.lu-tired { color: var(--cyan); font-size: 12px; }
.lu-pw { font-size: 12px; color: var(--muted); white-space: nowrap; }
.lu-chk { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.lu-row.on .lu-chk { background: var(--yellow); border-color: var(--yellow); color: #111; }
.sh-ic { font-size: 60px; text-align: center; filter: drop-shadow(0 0 22px rgba(25,184,246,.8)); margin: 4px 0; }
.sh-tl { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.sh-tl span { width: 56px; }
.sh-seg { flex: 1; height: 11px; border-radius: 6px; background: rgba(25,184,246,.18); overflow: hidden; }
.sh-seg i { display: block; height: 100%; background: linear-gradient(90deg, #19b8f6, #7fd8ff); }
.sh-after { color: #7fd8ff; }
.tb { position: relative; }
.tb-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.tb-shadow { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 8px; background: rgba(155,107,255,.2); color: #c8b0ff;
font: 700 12px var(--display); letter-spacing: .8px; text-transform: uppercase; }
.tb-speed { display: flex; gap: 6px; }
.tb-speed button { padding: 5px 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); font: 700 13px var(--display); cursor: pointer; }
.tb-speed button.on { background: var(--yellow); color: #111; border-color: var(--yellow); }
.tb-team { display: flex; align-items: center; gap: 8px; font: 700 13px var(--display); margin: 6px 0; }
.tb-team .enemy-n { color: #ff6a62; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-team .me-n { color: var(--green); }
.tb.shadow .tb-team .enemy-n { color: #c8b0ff; }
.tb-tbar { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.tb-tbar i { display: block; height: 100%; width: 100%; transition: width .35s var(--ease); }
.tb-tbar.e i { background: linear-gradient(90deg, #ff5a4f, #ec3b32); } .tb-tbar.m i { background: linear-gradient(90deg, #36d77f, #1fb866); }
.tb.shadow .tb-tbar.e i { background: linear-gradient(90deg, #b08cff, #7b4fe0); }
.tb-row { display: flex; justify-content: center; gap: 7px; }
.tb-row .tb-fc { width: calc(25% - 5.25px); flex: 0 0 auto; }
.tb-fc { position: relative; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); transition: transform .18s var(--spring), box-shadow .18s, border-color .18s; }
.tb-im { height: 70px; border-radius: 11px 11px 0 0; display: grid; place-items: center; font-size: 28px; background-size: cover; background-position: center top; position: relative; overflow: hidden; }
.tb-nm { font: 700 10.5px var(--display); text-transform: uppercase; text-align: center; padding: 4px 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-hp { height: 5px; margin: 0 6px 7px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.tb-hp i { display: block; height: 100%; background: var(--green); transition: width .3s var(--ease); }
.tb-fc.enemy .tb-hp i { background: var(--red); }
.tb-fc.ghost { border-color: rgba(155,107,255,.45); box-shadow: inset 0 0 16px rgba(155,107,255,.22); }
.tb-fc.ghost .tb-im { filter: saturate(.3) hue-rotate(220deg); }
.tb-fc.ghost .tb-hp i { background: #9b6bff; }
.tb-fc.act { transform: translateY(-10px) scale(1.06); border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow), 0 10px 22px rgba(242,217,43,.35); z-index: 4; }
.tb-fc.enemy.act { transform: translateY(10px) scale(1.06); }
.tb-fc.hit { border-color: var(--red); box-shadow: 0 0 0 2px rgba(236,59,50,.9), 0 0 22px rgba(236,59,50,.55); animation: tbHit .26s; }
.tb-fc.hit .tb-im::after { content: ""; position: absolute; inset: 0; background: rgba(255,40,30,.35); }
@keyframes tbHit { 25% { transform: translateX(-5px) rotate(-2deg); } 60% { transform: translateX(5px) rotate(2deg); } }
.tb-fc.ko .tb-im { filter: grayscale(1) brightness(.35); }
.tb-skull { position: absolute; left: 0; right: 0; top: 18px; text-align: center; font-size: 26px; z-index: 3; animation: tbKo .35s var(--spring); }
@keyframes tbKo { from { transform: scale(2.2); opacity: 0; } }
.tb-dmg { position: absolute; left: 50%; top: 34px; transform: translate(-50%, -50%); font: 700 21px var(--display); color: #fff; z-index: 6; pointer-events: none;
text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.8); white-space: nowrap; animation: tbDmg .95s ease-out forwards; text-align: center; }
.tb-dmg.crit { color: var(--yellow); font-size: 28px; text-shadow: 0 2px 0 #6a3d00, 0 0 18px rgba(242,217,43,.75); }
.tb-dmg small { display: block; font-size: 11px; letter-spacing: 2px; }
@keyframes tbDmg { 0% { transform: translate(-50%, -30%) scale(.6); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -120%) scale(1); opacity: 0; } }
.tb-field { position: relative; margin: 10px 0; height: 118px; border-radius: 16px; overflow: hidden;
background: radial-gradient(70% 55% at 50% 50%, rgba(242,217,43,.06), transparent 70%), repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px), var(--bg); border: 1px solid var(--line); }
.tb-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 40px var(--display); color: rgba(255,255,255,.06); letter-spacing: 4px; }
.tb-shadow-note { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 7px 10px; border-radius: 10px; font-size: 11.5px;
background: rgba(155,107,255,.14); border: 1px solid rgba(155,107,255,.4); }
.tb-banner { position: absolute; left: -10px; right: -10px; top: 26px; text-align: center; font: 700 30px var(--display); letter-spacing: 3px; color: var(--yellow);
background: linear-gradient(90deg, transparent, rgba(0,0,0,.78) 20%, rgba(0,0,0,.78) 80%, transparent); padding: 4px 0; transform: skewY(-4deg);
text-shadow: 0 0 18px rgba(242,217,43,.6); animation: tbBanner .22s var(--spring); z-index: 5; }
.tb-banner small { display: block; font: 600 12px var(--body); color: var(--text); letter-spacing: .3px; }
@keyframes tbBanner { from { transform: skewY(-4deg) scaleX(.3); opacity: 0; } }
.tb-tracer { position: absolute; height: 3px; border-radius: 2px; transform-origin: left center; z-index: 5; pointer-events: none;
background: linear-gradient(90deg, rgba(255,233,77,0), #ffe94d 60%, #fff); box-shadow: 0 0 10px #ffe94d; animation: tbTr .26s ease-out forwards; }
.tb-tracer.crit { height: 4px; background: linear-gradient(90deg, rgba(255,120,60,0), #ffb04d 50%, #fff); box-shadow: 0 0 16px #ff9a3d; }
@keyframes tbTr { from { clip-path: inset(0 100% 0 0); } 60% { clip-path: inset(0 0 0 0); opacity: 1; } to { opacity: 0; } }
.tb-log { margin: 10px 0; display: flex; flex-direction: column; gap: 5px; min-height: 102px; }
.tb-log div { font-size: 12.5px; padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: flex; gap: 8px; align-items: center; animation: fade .2s; }
.tb-log div:first-child { border-color: rgba(242,217,43,.4); background: linear-gradient(90deg, rgba(242,217,43,.12), var(--surface)); }
.tb-log div.their b { color: #ff6a62; } .tb-log div.mine b { color: var(--yellow); }
.tb-log b.c { color: var(--yellow) !important; } .tb-log i { font-style: normal; color: var(--muted); }
.tb.done .tb-field, .tb.done .tb-log { display: none; }
.tb-result { text-align: center; font: 700 50px/1 var(--display); letter-spacing: 4px; text-transform: uppercase; margin: 14px 0 6px; animation: tbBanner .3s var(--spring); }
.tb-result.win { color: var(--yellow); text-shadow: 0 0 30px rgba(242,217,43,.45); }
.tb-result.lose { color: var(--red); } .tb-result.draw { color: var(--muted); }
.tb-mvp { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; margin: 10px 0;
background: linear-gradient(120deg, rgba(242,217,43,.18), var(--surface) 60%); border: 1px solid rgba(242,217,43,.4); }
.tb-mvp-im { width: 56px; height: 56px; border-radius: 11px; display: grid; place-items: center; font-size: 28px; flex-shrink: 0; background-size: cover; background-position: center top; }
.tb-mvp small { color: var(--yellow); font-weight: 700; letter-spacing: 1px; font-size: 11px; display: block; }
.tb-mvp b { font: 700 17px var(--display); text-transform: uppercase; }
.tb-dmgs { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.tb-dr { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.tb-dr-im { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 14px; background-size: cover; background-position: center top; }
.tb-dr .bar { height: 7px; }
.tb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 8px 0; }
.tb-stats .v.cyan { color: var(--cyan); }
.h-shield { background: linear-gradient(90deg, rgba(25,184,246,.12), transparent); }
.row.h-capped { background: linear-gradient(90deg, rgba(242,217,43,.08), var(--surface)); }
.icon-sq.h-sh { background: rgba(155,107,255,.2); }
.hub-tile.soon { opacity: .45; border-style: dashed; pointer-events: none; }
.pr-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pr-cell { position: relative; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.pr-cell.on { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow) inset; }
.pr-cell.is-empty { border-style: dashed; background: rgba(255,255,255,.02); }
.pr-main { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 26px 10px 10px; text-align: left; }
.pr-name { font: 600 13px/1.15 var(--display); text-transform: uppercase; letter-spacing: .03em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-faces { display: flex; min-height: 26px; align-items: center; }
.pr-face { width: 26px; height: 26px; border-radius: 8px; margin-right: -6px; border: 2px solid var(--surface); background-size: cover; background-position: center; display: grid; place-items: center; font-size: 13px; }
.pr-faces.big { justify-content: center; }
.pr-faces.big .pr-face { width: 46px; height: 46px; border-radius: 12px; margin-right: -8px; font-size: 22px; }
.pr-state { font-size: 11px; color: var(--muted, #8a8f98); }
.pr-cell.on .pr-state { color: var(--yellow); }
.pr-edit { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 8px; font-size: 13px; color: var(--muted, #8a8f98); display: grid; place-items: center; }
.pr-rename { display: flex; gap: 8px; align-items: center; }
.pr-rename input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--line); color: inherit; font: inherit; }
.bp-hero { padding: 18px 16px 16px; box-shadow: 0 24px 48px -28px rgba(242,217,43,.35); }
.bp-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%;
background: radial-gradient(circle, rgba(242,217,43,.22), transparent 70%); pointer-events: none; }
.bp-hero .timer { display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid var(--line); color: #c9ccd2; }
.bp-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.bp-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f2b823, var(--yellow) 60%, #fff59a);
box-shadow: 0 0 14px rgba(242,217,43,.7); position: relative; overflow: hidden; }
.bp-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); animation: shine 2.6s ease-in-out infinite; }
.bp-next { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.32); border: 1px solid var(--line); }
.bp-next-k { font: 600 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: auto; }
.bp-next-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bp-next-chip { padding: 6px 9px; border-radius: 10px; font-size: 13px; background: var(--surface-3); white-space: nowrap; }
.bp-next-chip b { font-family: var(--display); letter-spacing: .02em; }
.bp-next-chip.premium { background: linear-gradient(135deg, rgba(242,217,43,.22), rgba(242,217,43,.06)); color: #ffeaa0; border: 1px solid rgba(242,217,43,.3); }
.bp-actions { position: relative; z-index: 1; }
.bp-ready-btn { border: 1px solid rgba(54,215,127,.45) !important; color: var(--green) !important; background: rgba(54,215,127,.08) !important; }
.shine-btn { position: relative; overflow: hidden; }
.shine-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-100%); animation: shine 2.4s ease-in-out infinite; }
.bp-how { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 4px; margin-top: 12px; }
.bp-how-step { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.bp-how-step span { font-size: 20px; }
.bp-how-step b { font: 600 13px/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.bp-how-step small { font-size: 10.5px; color: var(--muted); line-height: 1.2; }
button.bp-how-step { border-color: rgba(242,217,43,.35); }
.bp-how-arr { align-self: center; font-style: normal; color: var(--yellow); font: 700 18px/1 var(--display); }
.bp-feats { display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px 14px; margin: 0 -16px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
.bp-feats::-webkit-scrollbar { display: none; }
.bp-feat { --rc: #9b5cf0; position: relative; flex: none; width: 132px; min-height: 178px; padding: 12px 10px 10px; scroll-snap-align: start;
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; overflow: hidden; border-radius: 18px;
background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--rc) 38%, transparent), transparent 70%), linear-gradient(180deg, #1c1f25, #121418);
border: 1.5px solid color-mix(in srgb, var(--rc) 70%, transparent);
box-shadow: 0 14px 30px -18px var(--rc), inset 0 1px 0 rgba(255,255,255,.08); }
.bp-feat .bf-glow { position: absolute; inset: -40% -20% auto; height: 120%; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--rc) 40%, transparent), transparent 30%);
animation: spin 6s linear infinite; opacity: .5; pointer-events: none; }
.bp-feat.rk4 { box-shadow: 0 0 0 1px var(--rc), 0 18px 36px -14px var(--rc); animation: featPulse 2.4s ease-in-out infinite; }
.bp-feat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%); transform: translateX(-100%); animation: shine 3.2s ease-in-out infinite; pointer-events: none; }
.bp-feat > span { position: relative; z-index: 1; }
.bf-rib { position: absolute !important; top: 12px; right: -26px; transform: rotate(35deg); width: 96px; text-align: center; z-index: 2 !important; padding: 3px 0; background: var(--rc); color: #111; font: 700 10px/1 var(--display); letter-spacing: .08em; }
.bf-lv { white-space: nowrap; align-self: flex-start; font: 600 10.5px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #d9dbe0; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.4); }
.bf-ic { font-size: 44px; line-height: 1; margin: 8px 0 2px; filter: drop-shadow(0 6px 14px var(--rc)); animation: featFloat 3s ease-in-out infinite; }
.bf-stars { color: var(--yellow); font-size: 11px; letter-spacing: 1px; }
.bf-big { font: 700 17px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; max-width: 100%; }
.bf-small { font-size: 11px; color: var(--muted); }
.bf-st { margin-top: auto; font: 600 11px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; padding: 5px 9px; border-radius: 8px; background: rgba(255,255,255,.07); color: #c9ccd2; }
.bf-st.go { background: var(--yellow); color: var(--yellow-ink); }
.bf-st.ok { background: rgba(54,215,127,.15); color: var(--green); }
.bf-st.lock { background: rgba(242,217,43,.12); color: #ffe27a; }
.bp-feat.claimed { opacity: .55; filter: saturate(.6); }
@keyframes featPulse { 50% { box-shadow: 0 0 0 1px var(--rc), 0 18px 46px -8px var(--rc); } }
@keyframes featFloat { 50% { transform: translateY(-4px) scale(1.04); } }
.bp-totals { margin-top: 4px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 8px; }
.bp-tot-h { font: 600 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bp-tot-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: center; }
.bp-tot-k { font: 600 13px/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.bp-tot-row.prem .bp-tot-k { color: var(--yellow); }
.bp-tot-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bp-tot-chip { padding: 5px 8px; border-radius: 9px; background: var(--surface-3); font-size: 12px; white-space: nowrap; }
.bp-tot-chip b { font-family: var(--display); letter-spacing: .02em; }
.bp-tot-chip.rare { background: color-mix(in srgb, var(--rc) 22%, var(--surface-3)); border: 1px solid color-mix(in srgb, var(--rc) 60%, transparent); }
.bp-tot-row.prem .bp-tot-chip:not(.rare) { background: rgba(242,217,43,.1); color: #ffeaa0; }
.bp-tot-row.locked .bp-tot-chips { opacity: .75; }
.bp-tot-cta { justify-self: stretch; padding: 10px; border-radius: 12px; background: linear-gradient(90deg, rgba(242,217,43,.18), rgba(242,217,43,.05)); border: 1px solid rgba(242,217,43,.35); color: var(--yellow); font: 600 14px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.reward { height: 86px; gap: 1px; }
.reward .rw-ic { font-size: 19px; line-height: 1; margin-bottom: 3px; }
.reward .amt { font-size: 19px; }
.reward .lbl.strong { font: 600 12px/1.1 var(--display); text-transform: uppercase; color: var(--text); padding: 0 6px; text-align: center; }
.reward .rw-take { position: absolute; bottom: 0; left: 0; right: 0; padding: 3px 0; background: var(--yellow); color: var(--yellow-ink); font: 700 10px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.reward.available { padding-bottom: 14px; }
.reward.feat { border: 1.5px solid var(--rc); background: radial-gradient(110% 90% at 50% 0%, color-mix(in srgb, var(--rc) 34%, transparent), transparent 70%), var(--surface);
box-shadow: 0 10px 26px -14px var(--rc); }
.reward.feat .rw-ic { font-size: 24px; filter: drop-shadow(0 4px 10px var(--rc)); }
.reward.feat.locked, .reward.feat.need_premium { opacity: .9; }
.reward.feat.rk4 { animation: featPulse 2.4s ease-in-out infinite; }
.reward .rw-rib { position: absolute; top: 5px; left: 6px; padding: 2px 5px; border-radius: 5px; background: var(--rc); color: #111; font: 700 9px/1 var(--display); letter-spacing: .06em; }
.reward.ping { animation: rwPing 1.1s var(--ease) 2; }
@keyframes rwPing { 40% { transform: scale(1.06); box-shadow: 0 0 0 4px var(--rc, var(--yellow)), 0 0 30px var(--rc, var(--yellow)); } }
.lvl-row.milestone .lvl-node { width: 46px; height: 46px; font-size: 19px; border-color: rgba(242,217,43,.6); }
.lvl-row.milestone:not(.reached) .lvl-node { color: var(--yellow); }
.lvl-row.current .lvl-node { animation: node-pulse 1.8s ease-in-out infinite; }
.q-sum { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; margin-bottom: 12px;
background: linear-gradient(135deg, rgba(25,184,246,.12), transparent 60%), var(--surface); border: 1px solid var(--line); }
.q-sum.has-ready { background: linear-gradient(135deg, rgba(54,215,127,.18), transparent 65%), var(--surface); border-color: rgba(54,215,127,.4); }
.q-sum b { font: 600 17px/1.15 var(--display); letter-spacing: .02em; }
.q-ring { --p: 0deg; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
background: conic-gradient(var(--green) var(--p), rgba(255,255,255,.08) 0); }
.q-ring > span { width: 46px; height: 46px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; grid-auto-flow: column; align-content: center; }
.q-ring b { font-size: 18px !important; }
.q-ring small { font-size: 11px; color: var(--muted); }
.q-all { margin-bottom: 12px; }
.q-claim { flex: none; display: grid; justify-items: center; gap: 1px; min-width: 70px; padding: 7px 10px; border-radius: 12px; position: relative; overflow: hidden;
background: linear-gradient(180deg, #4be08f, #23b866); color: #062b15; box-shadow: 0 8px 20px -8px rgba(54,215,127,.9); animation: qGlow 1.6s ease-in-out infinite; }
.q-claim small { font: 700 10px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.q-claim b { font: 700 16px/1 var(--display); }
.q-claim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); transform: translateX(-100%); animation: shine 2.2s ease-in-out infinite; }
@keyframes qGlow { 50% { box-shadow: 0 8px 26px -4px rgba(54,215,127,1); } }
.quest.ready { background: linear-gradient(90deg, rgba(54,215,127,.1), transparent 70%); }
.quest.ready .emoji { background: rgba(54,215,127,.2); }
.quest.done { opacity: .6; }
.quest.done .t { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
.xp-chip.got { background: rgba(54,215,127,.15); color: var(--green); }
.xp-chip.lock { background: rgba(25,184,246,.14); color: var(--cyan); border: 0; }
.quest.claimed-anim { animation: qOut .42s var(--ease) forwards; }
@keyframes qOut { 40% { transform: scale(1.02); background: rgba(54,215,127,.25); } 100% { opacity: .6; } }
.xp-pop { position: fixed; z-index: 120; transform: translate(-50%, 0); pointer-events: none; font: 700 26px/1 var(--display); color: var(--yellow);
text-shadow: 0 0 18px rgba(242,217,43,.8), 0 2px 0 #000; animation: xpUp 1.25s var(--ease) forwards; }
.xp-pop small { font-size: 14px; }
@keyframes xpUp { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -14px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -90px) scale(1); } }
.bp-lvlup { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 24px; background: rgba(5,6,8,.82); backdrop-filter: blur(6px); animation: fade .25s; --rc: var(--yellow); }
.bp-lvlup.out { opacity: 0; transition: opacity .25s; }
.bl-card { position: relative; z-index: 1; width: min(340px, 100%); display: grid; justify-items: center; text-align: center; padding: 22px 18px 18px; border-radius: 22px;
background: radial-gradient(120% 70% at 50% 0%, rgba(242,217,43,.25), transparent 70%), #15171b; border: 1px solid rgba(242,217,43,.4); animation: bprIn .45s var(--spring); }
.bl-card .btn { width: 100%; }
.bl-k { font: 700 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--yellow); margin-bottom: 14px; }
.lvl-badge.big { width: 92px; height: 92px; font-size: 40px; box-shadow: 0 0 40px rgba(242,217,43,.6); }
.lvl-badge.big small { top: 14px; font-size: 11px; }
.bl-rws { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-bottom: 14px; }
.lu-rw { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.lu-rw .rw-ic { font-size: 18px; }
.lu-rw .amt { font: 700 17px/1 var(--display); }
.lu-rw .lbl { font-size: 10.5px; color: var(--muted); }
.lu-rw.prem { background: linear-gradient(160deg, rgba(242,217,43,.14), rgba(242,217,43,.03)), var(--surface-2); border-color: rgba(242,217,43,.3); }
.lu-rw.prem.locked { opacity: .55; }
.sq-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.sq-tab { display: grid; gap: 3px; justify-items: start; padding: 9px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: left; min-width: 0; }
.sq-tab-n { font: 600 13px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-tab small { font-size: 11px; color: var(--muted); }
.sq-tab.act small { color: var(--yellow); }
.sq-tab.sel { background: var(--surface-3); border-color: var(--line-2); box-shadow: inset 0 -2px 0 var(--yellow); }
.sq-head { display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 10px; border-radius: 14px; background: var(--surface); border: 1px dashed var(--line-2); }
.sq-head.is-active { border-style: solid; border-color: rgba(242,217,43,.35); background: linear-gradient(90deg, rgba(242,217,43,.08), transparent 70%), var(--surface); }
.sq-head .grow { min-width: 0; }
.sq-title { display: flex; align-items: center; gap: 6px; }
.sq-title b { font: 700 17px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-ren { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-3); color: var(--muted); font-size: 13px; flex: none; }
.slot-card.saved { opacity: .92; }
.sq-add { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(242,217,43,.14); color: var(--yellow); font-weight: 700; }
.pick-tag { position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px); padding: 2px 5px; border-radius: 5px; background: rgba(0,0,0,.72); color: #ffd66b; font: 600 9.5px/1.2 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-tag.same { color: var(--muted); }
.pick.off { opacity: .4; }
.pick-img { position: relative; }
.bp-hero.compact { padding: 14px 14px 12px; }
.bp-h-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bp-hero.compact h1 { margin: 0; font-size: 26px; line-height: 1; }
.bp-h-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bp-hero.compact .timer { margin: 0; padding: 4px 9px; font-size: 12px; }
.bp-hero.compact .bp-level { margin-top: 12px; gap: 12px; align-items: flex-start; }
.bp-hero.compact .lvl-badge { width: 54px; height: 54px; font-size: 24px; }
.bp-hero.compact .lvl-badge small { top: 8px; }
.bp-hero.compact .bp-next { margin-top: 8px; padding: 0; background: none; border: 0; gap: 6px; }
.bp-hero.compact .bp-next-k { margin-right: 0; font-size: 11px; }
.bp-hero.compact .bp-next-chip { padding: 4px 7px; font-size: 12px; }
.bp-hero.compact .bp-actions { margin-top: 12px; gap: 8px; }
.bp-hero.compact .bp-actions .btn { min-height: 44px; }
.bp-prem-btn { font-size: 14px; }
.bp-how { margin-top: 10px; }
.bp-how-step { position: relative; padding: 8px 4px; }
.bp-how-step.static { background: transparent; }
button.bp-how-step { background: var(--surface); }
.bp-how-step .hub-badge { top: 6px; right: 6px; }
.bp-feats.in-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 0; margin: 0 0 12px; }
.bp-feats.in-sheet .bp-feat { width: auto; }
.track-head { margin-top: 16px; }
.sq-head .btn { white-space: nowrap; flex: none; width: auto; }
.cr-gem { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 34px;
background: radial-gradient(circle at 30% 25%, rgba(120,220,255,.45), rgba(25,184,246,.12) 60%), var(--surface-2);
border: 1px solid rgba(25,184,246,.45); box-shadow: 0 10px 30px -12px rgba(25,184,246,.9); flex: none; }
.cr-gem.sm { width: 44px; height: 44px; border-radius: 14px; font-size: 22px; }
.cr-card { padding: 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(25,184,246,.14), transparent 65%), var(--surface); border: 1px solid rgba(25,184,246,.3); }
.cr-card-top { display: flex; align-items: center; gap: 12px; }
.cr-amount { font: 700 26px/1.05 var(--display); color: #bfeaff; }
.cr-amount.big { font-size: 34px; }
.cr-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.cr-seg { margin-bottom: 4px; }
.cr-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cr-pack { position: relative; display: grid; gap: 3px; justify-items: center; padding: 12px 6px 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.cr-pack b { font: 700 16px/1.1 var(--display); color: #bfeaff; }
.cr-pack span { font-size: 12px; color: var(--muted); }
.cr-pack.is-locked { opacity: .45; }
.cr-bonus { position: absolute; top: -7px; right: -4px; padding: 2px 6px; border-radius: 8px; background: var(--green); color: #062b15; font: 700 10px/1.2 var(--body); font-style: normal; }
.cr-pay { display: grid; justify-items: center; text-align: center; gap: 6px; padding-top: 6px; }
.cr-pay .btn { width: 100%; }
button.stat { border: 0; color: inherit; font: inherit; }
.bal-pills { display: grid; gap: 6px; justify-items: end; flex: none; }
.bal-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 9px; border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); }
.bal-pill .bal-ic { font-size: 15px; line-height: 1; }
.bal-pill b { font: 700 15px/1 var(--display); letter-spacing: .02em; min-width: 18px; text-align: right; }
.bal-plus { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 17px/1 var(--body); font-style: normal; }
.bal-pill.cr { border-color: rgba(25,184,246,.45); background: linear-gradient(90deg, rgba(25,184,246,.16), transparent 80%), var(--surface-2); }
.bal-pill.cr b { color: #bfeaff; }
.bal-pill.cr .bal-plus { background: var(--cyan); color: #04202c; box-shadow: 0 0 12px rgba(25,184,246,.6); }
.bal-pill.coin { border-color: rgba(242,217,43,.4); background: linear-gradient(90deg, rgba(242,217,43,.12), transparent 80%), var(--surface-2); }
.bal-pill.coin b { color: #ffe27a; }
.bal-pill.coin .bal-plus { background: var(--yellow); color: var(--yellow-ink); }
.cr-coin-rate { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 4px; font: 700 22px/1 var(--display); }
.cr-coin-rate i { font-style: normal; color: var(--muted); }
.cr-pack.coin b { color: #ffe27a; }
.cr-seg button { font-size: 13px; }
.ntf { --nc: #f2d92b; position: fixed; z-index: 140; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); width: min(380px, calc(100% - 24px));
display: flex; align-items: center; gap: 12px; padding: 12px 14px 14px 12px; border-radius: 20px; overflow: hidden; cursor: pointer;
background: linear-gradient(120deg, color-mix(in srgb, var(--nc) 22%, transparent), transparent 55%), rgba(20,22,27,.94);
border: 1px solid color-mix(in srgb, var(--nc) 55%, transparent);
box-shadow: 0 18px 40px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04) inset, 0 10px 34px -18px var(--nc);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
transform: translate(-50%, 0); animation: ntfIn .55s var(--spring) both; }
.ntf.out { animation: ntfOut .32s var(--ease) forwards; }
.ntf-glow { position: absolute; inset: -60% auto auto -20%; width: 70%; height: 220%; pointer-events: none;
background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%); transform: translateX(-120%); animation: ntfShine 1.6s .35s ease-out; }
.ntf-ic { position: relative; flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 26px;
background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--nc) 55%, transparent), color-mix(in srgb, var(--nc) 12%, transparent) 70%);
border: 1px solid color-mix(in srgb, var(--nc) 60%, transparent); box-shadow: 0 0 22px -4px var(--nc); }
.ntf-ic span { animation: ntfPop .7s .15s var(--spring) both; }
.ntf-ic::after { content: ""; position: absolute; inset: -6px; border-radius: 19px; border: 2px solid var(--nc); opacity: 0; animation: ntfRing 1.1s .2s ease-out; }
.ntf-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ntf-eb { font: 600 11px/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--nc); }
.ntf-title { font: 700 17px/1.15 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntf-sub { font-size: 12.5px; color: #b9bcc4; line-height: 1.25; }
.ntf-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.ntf-chips span { padding: 3px 7px; border-radius: 8px; font: 600 12px/1.2 var(--body); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.ntf-go { flex: none; font: 700 26px/1 var(--display); color: var(--nc); opacity: .9; }
.ntf-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--nc); opacity: .75; transform-origin: left; animation: ntfTimer 4.2s linear forwards; }
@keyframes ntfIn { from { transform: translate(-50%, -140%) scale(.92); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes ntfOut { to { transform: translate(-50%, -140%) scale(.95); opacity: 0; } }
@keyframes ntfShine { to { transform: translateX(260%); } }
@keyframes ntfPop { from { transform: scale(.3) rotate(-20deg); } 60% { transform: scale(1.25) rotate(6deg); } to { transform: none; } }
@keyframes ntfRing { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes ntfTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ntf, .ntf.out, .ntf-ic span, .ntf-ic::after, .ntf-glow { animation-duration: .01s; } }
.hub-tile[data-new]::after { content: "NEW"; position: absolute; top: 7px; right: 7px; padding: 2px 5px; border-radius: 6px; font: 700 9px/1 var(--body); letter-spacing: .06em; background: var(--green); color: #04150b; }
.mkt-seg { margin: 10px 0 12px; }
.mkt-seg .seg-badge, .segmented .seg-badge { font-style: normal; }
.mkt-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.mkt-search:focus-within { border-color: var(--line-2); }
.mkt-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--text); font: 15px var(--body); -webkit-appearance: none; }
.mkt-search input::-webkit-search-cancel-button { display: none; }
.mkt-clear { width: 24px; height: 24px; border-radius: 12px; background: var(--surface-3); color: var(--muted); font-size: 12px; }
.mkt-chips { margin-top: 10px; margin-bottom: 8px; }
.mkt-sorts { display: flex; gap: 14px; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px; }
.mkt-sorts::-webkit-scrollbar { display: none; }
.mkt-sorts button { flex: none; padding: 4px 0; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; }
.mkt-sorts button.on { color: var(--text); border-color: var(--yellow); }
.mkt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mkt-card { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 0 0 10px; border-radius: 16px; overflow: hidden;
background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 2px 0 var(--rc); transition: transform .15s var(--ease); }
.mkt-card:active { transform: scale(.97); }
.mkt-img, .mkt-hero-img { position: relative; display: grid; place-items: center; font-size: 38px; background-color: #15171b; background-size: cover; background-position: center top;
background-image: radial-gradient(120% 90% at 50% 0%, var(--rc), transparent 70%); }
.mkt-img { height: 112px; }
.mkt-img::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.mkt-stars { position: absolute; z-index: 1; left: 8px; bottom: 6px; font-size: 11px; letter-spacing: 1px; color: var(--yellow); }
.mkt-count { position: absolute; z-index: 1; right: 8px; top: 8px; padding: 2px 7px; border-radius: 8px; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mkt-rar { display: block; padding: 8px 10px 0; font-size: 11px; font-weight: 600; color: var(--rc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-name { display: block; padding: 2px 10px 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-price { display: flex; align-items: baseline; gap: 4px; padding: 6px 10px 0; }
.mkt-price small { color: var(--muted); font-size: 12px; }
.mkt-price b { font: 700 18px/1 var(--display); letter-spacing: .02em; }
.mkt-meta { padding: 4px 10px 0; font-size: 11px; color: var(--muted); }
.mkt-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.mkt-hero .mkt-rar { padding: 0; font-size: 12px; }
.mkt-hero-img { flex: none; width: 96px; height: 96px; border-radius: 18px; overflow: hidden; font-size: 42px; box-shadow: 0 0 0 1px var(--line-2), 0 10px 30px -12px var(--rc); }
.mkt-hero-name { margin: 2px 0 4px; font: 700 22px/1.1 var(--display); text-transform: uppercase; }
.mkt-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mkt-kpi { padding: 10px; border-radius: 12px; background: var(--surface-2); }
.mkt-kpi span { display: block; font-size: 11px; color: var(--muted); }
.mkt-kpi b { display: block; margin-top: 4px; font: 700 17px/1 var(--display); }
.mkt-spark { margin-top: 10px; padding: 10px 12px 8px; border-radius: 14px; background: var(--surface-2); }
.mkt-spark svg { display: block; width: 100%; height: 84px; margin: 6px 0 2px; }
.mkt-spark-h, .mkt-spark-f { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.mkt-spark-h b { font-size: 13px; }
.mkt-nohist { margin-top: 10px; padding: 14px; border-radius: 14px; background: var(--surface-2); color: var(--muted); font-size: 13px; text-align: center; }
.mkt-row .title { font-size: 13px; }
.mkt-row-r { display: grid; justify-items: end; gap: 6px; }
.mkt-buy { min-width: 92px; }
.mkt-buy.confirm { background: linear-gradient(180deg, #4fe89a, var(--green)); color: #04150b; }
.mkt-sell-btn { margin-top: 4px; }
.mkt-sell-link { margin-top: 8px; }
.mkt-limit { text-align: center; margin: 8px 0 0; }
.mkt-mini { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-3); font-size: 16px; margin-left: 4px; }
.mkt-price-box { padding: 14px; border-radius: 16px; background: var(--surface-2); }
.mkt-price-k { font-size: 12px; color: var(--muted); text-align: center; }
.mkt-stepper { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; align-items: center; margin: 8px 0 10px; }
.mkt-stepper > button { height: 48px; border-radius: 14px; background: var(--surface-3); font-size: 24px; font-weight: 600; }
.mkt-stepper label { display: flex; align-items: center; justify-content: center; gap: 6px; height: 56px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line-2); }
.mkt-stepper input { width: 100%; max-width: 140px; background: none; border: 0; outline: 0; color: var(--text); text-align: center; font: 700 30px/1 var(--display); -moz-appearance: textfield; }
.mkt-stepper input::-webkit-outer-spin-button, .mkt-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mkt-stepper label span { font-size: 20px; }
.mkt-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mkt-quick button { height: 30px; padding: 0 10px; border-radius: 15px; font-size: 12px; color: var(--muted); background: var(--surface-3); border: 1px solid transparent; }
.mkt-quick button b { color: var(--text); margin-left: 2px; }
.mkt-quick button.on { border-color: var(--yellow); color: var(--text); }
.mkt-calc { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px; }
.mkt-calc > div { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.mkt-calc > div b { color: var(--text); font-weight: 600; }
.mkt-calc-get span { color: var(--text); font-weight: 600; }
.mkt-calc-get b { color: var(--green) !important; font: 700 20px/1 var(--display) !important; }
.mkt-range { margin-top: 8px; text-align: center; }
.mkt-range.bad { color: var(--red); }
.hub-tile.gate-locked { background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 8px, transparent 8px 16px), var(--surface); border-style: dashed; border-color: var(--line-2); }
.hub-tile.gate-locked .hub-icon { position: relative; filter: grayscale(.85) brightness(.75); }
.hub-tile.gate-locked .hub-title { color: var(--muted); }
.gate-lock { position: absolute; right: -10px; bottom: -6px; font-size: 14px; font-style: normal; filter: none; }
.gate-lvl { position: absolute; top: 7px; right: 7px; padding: 2px 6px; border-radius: 7px; font: 700 10px/1.2 var(--body); font-style: normal; background: rgba(242,217,43,.14); color: var(--yellow); }
.gate-hero { text-align: center; padding-top: 4px; }
.gate-hero h2 { margin: 6px 0 6px; font: 700 24px/1.1 var(--display); text-transform: uppercase; }
.gate-hero p { margin: 0 auto; max-width: 320px; font-size: 14px; }
.gate-eb { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
.gate-ic { position: relative; width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 24px; display: grid; place-items: center; font-size: 42px;
background: radial-gradient(circle at 50% 30%, rgba(242,217,43,.25), transparent 70%), var(--surface-2); box-shadow: 0 0 0 1px var(--line-2), 0 14px 40px -18px rgba(242,217,43,.6); }
.gate-ic span { filter: grayscale(.6); }
.gate-ic i { position: absolute; right: -6px; bottom: -6px; width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; font-size: 16px; font-style: normal; background: var(--surface-3); box-shadow: 0 0 0 3px var(--bg-2); }
.gate-path { display: flex; align-items: center; justify-content: center; margin: 18px 0 14px; overflow-x: auto; }
.gate-path span { flex: none; position: relative; width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 0; }
.gate-path span b { font-size: 13px; color: var(--muted); }
.gate-path span.cur { background: var(--yellow); border-color: transparent; }
.gate-path span.cur b { color: var(--yellow-ink); }
.gate-path span.goal { width: 44px; height: 44px; border-radius: 22px; font-size: 20px; border-color: var(--green); background: rgba(54,215,127,.12); }
.gate-path span.goal b { position: absolute; bottom: -18px; font-size: 11px; color: var(--green); }
.gate-path i { flex: 1; max-width: 34px; min-width: 10px; height: 2px; background: var(--line-2); }
.gate-prog { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.gate-prog-h { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.gate-prog-h b { color: var(--text); }
.gate-prog .bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.gate-prog .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--yellow), var(--green)); }
.mkt-mini.is-locked { opacity: .45; }
.tut { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.tut.hidden { display: none; }
.tut-b { position: fixed; background: rgba(4,5,8,.78); pointer-events: auto; transition: all .28s var(--ease); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.tut-ring { position: fixed; border-radius: 16px; pointer-events: none; transition: all .28s var(--ease);
box-shadow: 0 0 0 2px var(--yellow), 0 0 26px 4px rgba(242,217,43,.45); }
.tut-ring i { position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--yellow); animation: tut-pulse 1.6s ease-out infinite; }
.tut-ring.flash { animation: tut-flash .5s ease; }
@keyframes tut-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes tut-flash { 0%, 100% { box-shadow: 0 0 0 2px var(--yellow), 0 0 26px 4px rgba(242,217,43,.45); } 50% { box-shadow: 0 0 0 4px #fff, 0 0 40px 10px rgba(242,217,43,.8); } }
.tut-hand { position: fixed; font-size: 32px; pointer-events: none; transition: left .28s var(--ease), top .28s var(--ease); animation: tut-tap 1.1s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.tut-hand.up { transform: rotate(180deg); animation-name: tut-tap-up; }
@keyframes tut-tap { 0%, 100% { translate: 0 6px; } 50% { translate: 0 -4px; } }
@keyframes tut-tap-up { 0%, 100% { translate: 0 -6px; } 50% { translate: 0 4px; } }
.tut-card { position: fixed; left: 12px; right: 12px; bottom: calc(18px + var(--safe-bottom)); pointer-events: auto; padding: 14px 16px 16px; border-radius: 20px;
background: linear-gradient(160deg, rgba(38,42,49,.97), rgba(20,22,26,.97)); border: 1px solid var(--line-2);
box-shadow: 0 20px 50px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); transition: top .3s var(--ease), bottom .3s var(--ease); }
.tut-card.top { bottom: auto; top: calc(14px + env(safe-area-inset-top, 0px)); }
.tut-card.mid { bottom: auto; top: 40%; }
.tut-card.in { animation: tut-card-in .45s var(--spring); }
.tut-card.shake { animation: tut-shake .4s ease; }
@keyframes tut-card-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tut-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.tc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tc-dots { display: flex; gap: 6px; }
.tc-dots i { width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; font-style: normal; font-size: 13px; background: var(--surface-3); opacity: .55; }
.tc-dots i.done { background: var(--green); color: #04150b; font-weight: 700; opacity: 1; }
.tc-dots i.cur { background: var(--yellow); opacity: 1; box-shadow: 0 0 0 3px rgba(242,217,43,.25); animation: tut-dot 1.4s ease-in-out infinite; }
@keyframes tut-dot { 50% { box-shadow: 0 0 0 6px rgba(242,217,43,.08); } }
.tc-n { font-size: 12px; color: var(--muted); }
.tc-eb { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.tc-t { margin-top: 2px; font: 700 22px/1.15 var(--display); text-transform: uppercase; }
.tc-d { margin-top: 4px; font-size: 14px; color: var(--muted); }
.tut-intro, .tut-final { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; overflow: hidden; text-align: center;
background: radial-gradient(120% 80% at 50% 20%, #1d1a0a, #07080a 60%); animation: ti-in .5s ease both; }
.tut-intro.out, .tut-final.out { animation: ti-out .5s ease forwards; }
@keyframes ti-in { from { opacity: 0; } }
@keyframes ti-out { to { opacity: 0; transform: scale(1.06); } }
.ti-rays { position: absolute; left: 50%; top: 30%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; opacity: .16;
background: repeating-conic-gradient(from 0deg, rgba(242,217,43,.9) 0 6deg, transparent 6deg 18deg); animation: ti-spin 40s linear infinite;
-webkit-mask: radial-gradient(circle, #000 0, transparent 45%); mask: radial-gradient(circle, #000 0, transparent 45%); }
@keyframes ti-spin { to { transform: rotate(360deg); } }
.ti-glow { position: absolute; left: 50%; top: 30%; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; background: radial-gradient(circle, rgba(242,217,43,.35), transparent 65%); animation: ti-breathe 3s ease-in-out infinite; }
@keyframes ti-breathe { 50% { transform: scale(1.15); opacity: .7; } }
.ti-sparks i { position: absolute; bottom: -10px; left: var(--x); width: 4px; height: 4px; border-radius: 2px; background: var(--yellow); opacity: 0;
animation: ti-spark calc(4s * var(--s)) linear var(--d) infinite; box-shadow: 0 0 8px var(--yellow); }
@keyframes ti-spark { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-105vh) translateX(20px); } }
.ti-body { position: relative; z-index: 1; width: min(380px, 100% - 32px); }
.ti-logo { font: 700 52px/1 var(--display); letter-spacing: .06em; color: var(--yellow); text-shadow: 0 0 30px rgba(242,217,43,.5); }
.ti-logo span { display: inline-block; animation: ti-drop .7s var(--spring) both; animation-delay: calc(.08s * var(--i) + .15s); }
@keyframes ti-drop { from { opacity: 0; transform: translateY(-60px) rotate(-12deg) scale(.6); } }
.ti-eb { margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); animation: ti-up .6s var(--ease) .7s both; }
.ti-title { margin: 6px 0 8px; font: 700 30px/1.08 var(--display); text-transform: uppercase; animation: ti-up .6s var(--ease) .8s both; }
.ti-sub { margin: 0 auto; color: var(--muted); font-size: 15px; animation: ti-up .6s var(--ease) .9s both; }
@keyframes ti-up { from { opacity: 0; transform: translateY(16px); } }
.ti-steps { display: flex; align-items: center; justify-content: center; margin: 26px 0 28px; }
.ti-step { display: grid; justify-items: center; gap: 6px; animation: ti-pop .55s var(--spring) var(--d) both; }
.ti-step span { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: var(--surface-2); border: 1px solid var(--line-2); }
.ti-step b { font-size: 11px; font-weight: 600; color: var(--muted); }
@keyframes ti-pop { from { opacity: 0; transform: scale(.4) translateY(20px); } }
.ti-line { width: 18px; height: 2px; margin: 0 4px 18px; background: linear-gradient(90deg, var(--yellow), transparent); transform-origin: left; animation: ti-line .4s ease 1.6s both; }
@keyframes ti-line { from { transform: scaleX(0); } }
.ti-go { animation: ti-up .6s var(--ease) 1.7s both, ti-glowbtn 2s ease-in-out 2.3s infinite; }
@keyframes ti-glowbtn { 50% { box-shadow: 0 0 0 6px rgba(242,217,43,.18), 0 10px 30px -8px rgba(242,217,43,.8); } }
.tut-final { background: radial-gradient(120% 80% at 50% 25%, #0c2216, #07080a 60%); }
.tf-confetti i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--c);
animation: tf-fall var(--t) cubic-bezier(.2,.6,.4,1) var(--d) both; transform: rotate(var(--r)); }
@keyframes tf-fall { from { transform: translateY(0) rotate(var(--r)); opacity: 1; } to { transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); opacity: .2; } }
.tf-cup { width: 110px; height: 110px; margin: 0 auto 6px; border-radius: 34px; display: grid; place-items: center; font-size: 60px;
background: radial-gradient(circle at 50% 35%, rgba(242,217,43,.45), transparent 70%), var(--surface-2); box-shadow: 0 0 0 1px var(--line-2), 0 20px 50px -20px rgba(242,217,43,.9);
animation: tf-cup .8s var(--spring) .15s both; }
@keyframes tf-cup { from { transform: scale(0) rotate(-30deg); } }
.tf-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 24px; }
.tf-chips span { padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line-2); animation: ti-pop .5s var(--spring) var(--d) both; }
.tut-final .ti-go { animation-delay: 1s, 1.6s; }
.gate-page { padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { .tut *, .tut-intro *, .tut-final * { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }
.cr-custom { margin-top: 10px; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 1px dashed var(--line-2); }
.cr-custom.is-locked { opacity: .55; }
.cr-custom-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cr-custom-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 10px; }
.cr-custom-row > i { font-style: normal; color: var(--muted); }
.cr-custom-in { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-2); }
.cr-custom-in input { width: 100%; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 700 22px/1 var(--display); -moz-appearance: textfield; }
.cr-custom-in input::-webkit-outer-spin-button, .cr-custom-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cr-custom-in span { color: var(--muted); font-weight: 600; }
.cr-custom-out { font: 700 20px/1.1 var(--display); text-align: right; }
.cr-custom-out .cr-bonus { position: static; display: inline-block; font-size: 11px; vertical-align: middle; }
.adm-kbar.out i { background: var(--red); }
.inv-tools { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.sell-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-bottom: 90px; }
.sell-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 0 0 8px; border-radius: 14px; overflow: hidden;
background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 2px 0 var(--rc); transition: transform .12s var(--ease); }
.sell-tile:active { transform: scale(.96); }
.sell-tile.on { border-color: var(--yellow); background: linear-gradient(180deg, rgba(242,217,43,.12), var(--surface)); }
.sell-tile.off { opacity: .45; }
.sell-img { position: relative; height: 70px; display: grid; place-items: center; font-size: 28px; background-color: #15171b; background-size: cover; background-position: center top;
background-image: radial-gradient(120% 90% at 50% 0%, var(--rc), transparent 70%); }
.sell-chk { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; background: var(--yellow); color: var(--yellow-ink); }
.sell-lock { position: absolute; top: 6px; left: 6px; font-style: normal; font-size: 14px; }
.sell-mkt { position: absolute; bottom: 4px; right: 6px; font-style: normal; font-size: 12px; opacity: .9; }
.sell-tile b { display: block; padding: 6px 8px 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sell-tile small { display: block; padding: 0 8px; font-size: 11px; color: var(--muted); }
.sell-price { display: block; padding: 4px 8px 0; font-size: 12px; font-weight: 700; color: var(--yellow); }
.sell-bar { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(78px + var(--safe-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 10px 10px 16px; border-radius: 18px; background: rgba(29,32,38,.96); border: 1px solid var(--line-2); box-shadow: 0 14px 40px -10px rgba(0,0,0,.8);
transform: translateY(140%); transition: transform .3s var(--spring); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sell-bar.on { transform: none; }
.sell-bar .btn { width: auto; height: 44px; padding: 0 16px; font-size: 15px; }
.upg-slots { margin: 10px 0 12px; }
.don-hero { padding: 18px 16px; border-radius: 20px; border: 1px solid rgba(25,184,246,.28);
background: radial-gradient(120% 120% at 100% 0%, rgba(25,184,246,.18), transparent 55%), radial-gradient(90% 90% at 0% 100%, rgba(155,107,255,.14), transparent 60%), var(--surface); }
.don-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.don-amount { font: 700 34px/1.05 var(--display); margin-top: 2px; }
.don-amount small { font-size: 20px; }
.don-games { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.don-game { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); text-align: left; transition: transform .15s var(--ease), border-color .2s; }
.don-game span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: var(--surface-3); }
.don-game b { font-size: 14px; }
.don-game.on { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset, 0 8px 24px -14px var(--cyan); }
.don-game.soon { opacity: .45; }
.don-game.soon b { font-weight: 500; color: var(--muted); font-size: 12px; }
.don-game:active { transform: scale(.97); }
.don-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.don-pack { position: relative; display: grid; justify-items: center; gap: 2px; padding: 14px 6px 10px; border-radius: 16px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-2);
transition: transform .15s var(--ease); animation: ti-pop .45s var(--spring) both; }
.don-pack:nth-child(2) { animation-delay: .04s; } .don-pack:nth-child(3) { animation-delay: .08s; } .don-pack:nth-child(4) { animation-delay: .12s; } .don-pack:nth-child(5) { animation-delay: .16s; }
.don-pack .don-unit { font-size: 22px; }
.don-pack b { font: 700 24px/1 var(--display); color: var(--yellow); }
.don-pack small { color: var(--muted); font-size: 11px; }
.don-price { margin-top: 6px; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; background: rgba(25,184,246,.14); color: #7fd8ff; }
.don-pct { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 6px; background: rgba(236,59,50,.18); color: #ff8a83; }
.don-pack.is-locked { opacity: .45; }
.don-pack:active { transform: scale(.96); }
.don-saved { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px dashed var(--line-2); }
.don-saved .subtitle { font-size: 12px; color: var(--muted); }
.don-sheet .field { display: grid; gap: 6px; margin-top: 10px; }
.don-sheet .field span { font-size: 12px; color: var(--muted); font-weight: 600; }
.don-hint { margin: 6px 2px 0; }
.don-sum { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(242,217,43,.12), rgba(25,184,246,.1)); border: 1px solid var(--line-2); }
.don-sum-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--surface-3); }
.don-sum-v { font: 700 26px/1 var(--display); color: var(--yellow); }
.don-sum-v small { font: 500 13px var(--body); color: var(--muted); }
.don-sum-c { font: 700 22px/1 var(--display); color: #7fd8ff; }
.don-srv-row { margin: 12px 2px 0; }
.don-remember { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); text-align: left; }
.don-remember b { display: block; font-size: 14px; }
.don-remember small { display: block; font-size: 12px; color: var(--muted); }
.don-check { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: transparent; border: 2px solid var(--line-2); transition: all .2s var(--spring); }
.don-remember.on { border-color: rgba(54,215,127,.45); }
.don-remember.on .don-check { background: var(--green); border-color: var(--green); color: #07130c; transform: scale(1.06); }
.vgate { z-index: 9800; background: radial-gradient(120% 80% at 50% 20%, #0a1a24, #07080a 60%); }
.vgate .ti-rays { background: repeating-conic-gradient(from 0deg, rgba(25,184,246,.9) 0 6deg, transparent 6deg 18deg); }
.vgate .ti-glow { background: radial-gradient(circle, rgba(25,184,246,.35), transparent 65%); }
.vgate .ti-sparks i { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.vg-shield { width: 92px; height: 92px; margin: 0 auto; border-radius: 30px; display: grid; place-items: center; font-size: 48px;
background: radial-gradient(circle at 50% 35%, rgba(25,184,246,.45), transparent 70%), var(--surface-2); box-shadow: 0 0 0 1px var(--line-2), 0 20px 50px -20px rgba(25,184,246,.9);
animation: tf-cup .8s var(--spring) .1s both; }
.vg-box { margin: 22px 0 12px; padding: 16px; border-radius: 20px; background: rgba(22,24,28,.85); border: 1px solid var(--line-2); min-height: 120px; display: grid; place-items: center; animation: ti-up .6s var(--ease) 1s both; }
.vg-box .spinner { margin: 0 auto; }
.vg-q { margin: 0 0 12px; font: 700 20px/1.2 var(--display); text-transform: uppercase; }
.vg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.vg-opt { aspect-ratio: 1; border-radius: 18px; font-size: 38px; background: var(--surface-2); border: 1px solid var(--line-2); animation: ti-pop .45s var(--spring) both; animation-delay: calc(.05s * var(--i)); transition: transform .12s var(--ease); }
.vg-opt:active { transform: scale(.92); }
.vg-opt.hit { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan) inset; }
.vg-note { min-height: 18px; margin: 10px 0 0; }
.vg-box.shake { animation: vg-shake .4s ease; }
@keyframes vg-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.vg-ok { display: grid; justify-items: center; gap: 8px; }
.vg-ok span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; font-weight: 800; color: #07130c; background: var(--green); animation: tf-cup .6s var(--spring) both; box-shadow: 0 0 0 8px rgba(54,215,127,.15); }
.vg-ok b { font: 700 18px var(--display); text-transform: uppercase; }
.vg-new { animation: ti-up .6s var(--ease) 1.2s both; }
.rf-wallet { margin-top: 12px; padding: 16px; border-radius: 18px; background: radial-gradient(120% 120% at 100% 0%, rgba(242,217,43,.14), transparent 55%), var(--surface); border: 1px solid rgba(242,217,43,.22); }
.rf-w-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rf-w-amt { font: 700 28px/1.05 var(--display); }
.rf-w-amt small { font: 500 14px var(--body); color: var(--muted); }
.rf-bar { margin-top: 12px; }
.rf-steps { display: grid; gap: 8px; }
.rf-step { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); animation: ti-up .45s var(--ease) both; }
.rf-step:nth-child(2) { animation-delay: .05s; } .rf-step:nth-child(3) { animation-delay: .1s; } .rf-step:nth-child(4) { animation-delay: .15s; }
.rf-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-3); color: var(--muted); }
.rf-ic { font-size: 20px; }
.rf-step .grow { font-size: 13px; }
.rf-v { flex: none; font-size: 13px; color: var(--yellow); white-space: nowrap; }
.rf-mini { height: 4px; margin-top: 6px; }
.fr-st.bad { color: #ff8a83; background: rgba(236,59,50,.14); }
.vg-opt.miss { opacity: .3; filter: grayscale(1); }
.lot-intro { font-size: 13px; margin: 0 0 12px; }
.lot-card { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; position: relative; overflow: hidden; }
.lot-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--lot, var(--yellow)); }
.lot-bronze { --lot: #c98a52; } .lot-silver { --lot: #c7d0da; } .lot-gold { --lot: #f2d92b; }
.lot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 17px; }
.lot-cd { font-size: 12px; color: var(--muted); white-space: nowrap; }
.lot-bank { font-weight: 700; font-size: 30px; line-height: 1; color: var(--lot, var(--yellow)); }
.lot-bank .num { font-family: var(--display); }
.lot-bank small { font-size: 13px; font-weight: 500; }
.lot-prizes { display: flex; flex-wrap: wrap; gap: 6px; }
.lot-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.lot-stats > div { background: rgba(255,255,255,.04); border-radius: 10px; padding: 7px 2px; display: flex; flex-direction: column; gap: 3px; }
.lot-stats small { font-size: 11px; }
.lot-card .bar > i { background: var(--lot, var(--yellow)); }
.lot-win { border-top: 1px solid rgba(255,255,255,.07); padding-top: 8px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.hist-chips { display: flex; gap: 8px; margin: 14px 0 10px; }
.hist-day { padding: 10px 14px 4px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.hist-row .value { white-space: nowrap; font-weight: 700; }
.hist-in { color: var(--green); }
.hist-out { color: var(--text); opacity: .9; }
.cr-head .cr-hist { margin-left: auto; align-self: center; height: 32px; padding: 0 12px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.adm-pulse { margin-bottom: 14px; }
.pl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.pl-cell { background: rgba(255,255,255,.04); border-radius: 12px; padding: 10px; min-width: 0; }
.pl-cell .k { font-size: 12px; color: var(--muted); }
.pl-cell .v { font-size: 20px; font-weight: 700; margin-top: 2px; }
.pl-cell .v.cyan { color: var(--cyan); } .pl-cell .v.yellow { color: var(--yellow); } .pl-cell .v.red { color: var(--red); }
.pl-cell .small { margin-top: 2px; font-size: 11px; }
.pl-queue { margin-top: 10px; font-size: 13px; color: var(--muted); }
.pl-queue.on { color: var(--text); }
.pl-alert { margin-top: 8px; }
.adm-pulse .adm-chart-head { flex-wrap: wrap; gap: 8px; }
.adm-pulse .adm-chart-head h3 { flex: 1 1 100%; }
.adm-pulse .adm-period { flex: 1 1 100%; display: flex; }
.adm-pulse .adm-period button { flex: 1; white-space: nowrap; }
.hist-row .value.hist-in, .stat .v.hist-in { color: var(--green); }
.cd-card { margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.cd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cd-head h3 { margin: 0; font-size: 17px; }
.cd-timer { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cd-track { position: relative; padding: 4px 14px 30px 0; }
.cd-track .bar { height: 10px; }
.cd-track .bar > i { background: linear-gradient(90deg, #c98a52, #c7d0da 55%, var(--yellow)); }
.cd-step { position: absolute; top: -6px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; filter: grayscale(1); opacity: .55; transition: .3s; }
.cd-step.on { filter: none; opacity: 1; }
.cd-step .cd-ic { font-size: 22px; line-height: 22px; background: var(--surface); border-radius: 50%; }
.cd-step.on .cd-ic { animation: cdPop .5s var(--ease); }
.cd-step.got::after { content: "✓"; position: absolute; top: -4px; right: -8px; font-size: 11px; color: var(--green); font-weight: 800; }
.cd-step small { font-size: 11px; color: var(--muted); }
@keyframes cdPop { 0% { transform: scale(.6); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.cd-sub { font-size: 13px; color: var(--muted); }
.cd-rewards { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-rewards .rchip.dim { opacity: .45; }
.cd-done { font-size: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(54,215,127,.1); color: var(--green); }
.cd-streak { font-size: 13px; }
.cd-streak b { color: var(--yellow); }
.cd-whos { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-who { font-size: 12px; padding: 5px 9px; border-radius: 10px; background: rgba(255,255,255,.05); }
.cd-who.on { background: rgba(54,215,127,.12); }
.cd-who.me { outline: 1px solid var(--yellow); }
.cd-how summary { cursor: pointer; font-size: 13px; color: var(--cyan); list-style: none; }
.cd-how summary::-webkit-details-marker { display: none; }
.cd-acts { display: grid; gap: 4px; margin: 8px 0; }
.cd-act { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.03); }
.cd-act.full { opacity: .5; }
.cd-act small { color: var(--muted); }
.cq-card { display: grid; gap: 8px; margin-bottom: 12px; }
.cq-cad { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 4px; }
.cq-row { display: flex; gap: 10px; align-items: center; }
.cq-row .grow { min-width: 0; }
.cq-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.cq-top small { color: var(--muted); }
.cq-pts { font-size: 12px; color: var(--yellow); white-space: nowrap; }
.cq-row.done .bar > i { background: var(--green); }
.cf-card { margin-bottom: 12px; border: 1px dashed rgba(242,217,43,.4); }
.cf-slots { display: grid; gap: 6px; }
.cf-slot { padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 14px; display: flex; gap: 8px; }
.cf-slot.on { background: rgba(54,215,127,.12); }
.cf-pend { font-size: 12px; margin-top: 6px; }
.cc-req { margin-top: 12px; font-size: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(236,59,50,.1); }
.cc-req.ok { background: rgba(54,215,127,.1); }
.cc-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cc-opt { padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 4px; text-align: left; }
.cc-opt b { font-size: 18px; }
.cc-opt small { color: var(--muted); font-size: 12px; }
.cc-opt.on { border-color: var(--yellow); background: rgba(242,217,43,.08); }
.cc-opt[data-low] small { color: #ff8a83; }
.cq-row .grow { flex: 1 1 auto; }
.mode-switch { grid-template-columns: repeat(3, 1fr); }
.mode-switch button { font-size: 13px; padding: 0 4px; }
.zach-hero { border-radius: 16px; padding: 14px; margin-bottom: 14px; border: 1px solid var(--line);
background: linear-gradient(160deg, rgba(110,40,70,.55), rgba(22,24,28,.9) 55%), url("static/game/bg_street.png") center 35% / cover; image-rendering: pixelated; }
.zach-hero-t { font: 700 20px/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.zach-hero p { margin: 0 0 10px; }
.zach-hero-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.zach-hero-stats b { color: var(--yellow); }
.zach-slots { grid-template-columns: repeat(3, 1fr); }
.zach-stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-bottom: 14px; }
.zach-stage { appearance: none; text-align: left; border-radius: 12px; padding: 9px 10px; background: var(--surface); border: 1px solid var(--line); color: inherit; display: grid; gap: 3px; }
.zach-stage b { font: 700 14px/1 var(--display); text-transform: uppercase; }
.zach-stage small { color: var(--muted); font-size: 11px; }
.zach-stage.sel { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow) inset; }
.zach-stage.new b { color: var(--yellow); }
.zach-st-stars i, .zg-stars i { font-style: normal; color: #4a4d55; }
.zach-st-stars i.on, .zg-stars i.on { color: var(--yellow); }
.zach-go { width: 100%; margin-bottom: 8px; }
.zg-ov { position: fixed; inset: 0; z-index: 200; background: #0b0c10; display: flex; flex-direction: column; align-items: center;
padding: max(8px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom)); overflow-y: auto; animation: zgIn .2s ease; }
.zg-ov.zg-out { opacity: 0; transition: opacity .18s; }
@keyframes zgIn { from { opacity: 0; } }
.zg-top { width: 100%; max-width: 520px; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 700 14px/1 var(--display); text-transform: uppercase; }
.zg-stage { color: var(--muted); }
.zg-wave { flex: 1; color: var(--yellow); }
.zg-kills b { color: #fff; }
.zg-btn { appearance: none; border: 1px solid var(--line); background: var(--surface); color: #fff; border-radius: 10px; height: 32px; min-width: 40px; font: 700 14px/1 var(--display); }
.zg-canvas-wrap { width: 100%; max-width: 520px; display: flex; justify-content: center; }
.zg-canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 10px; }
.zg-hp { width: 100%; max-width: 520px; display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 12px; color: var(--muted); }
.zg-hp-bar { flex: 1; height: 8px; border-radius: 6px; background: #2a1414; overflow: hidden; }
.zg-hp-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #7ee08a, #3fae52); transition: width .15s linear; }
.zg-hp-bar i.low { background: linear-gradient(180deg, #ff8a6a, #d33a2a); }
.zg-hp b { color: #fff; min-width: 34px; text-align: right; }
.zg-squad { width: 100%; max-width: 520px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zg-card { border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.zg-card.empty { opacity: .45; }
.zg-ph { height: 64px; background-size: cover; background-position: center top; position: relative; display: grid; place-items: center; font-size: 24px; }
.zg-ph span { position: absolute; top: 4px; left: 6px; font: 700 12px/1 var(--display); text-shadow: 0 1px 2px #000; }
.zg-nm { font-size: 12px; font-weight: 700; padding: 5px 7px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zg-st { font-size: 11px; color: var(--muted); padding: 2px 7px 6px; min-height: 18px; }
.zg-result { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 360px); z-index: 2;
background: rgba(16,18,24,.97); border: 1px solid var(--line); border-radius: 18px; padding: 20px 18px; text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,.7); animation: zgPop .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes zgPop { from { transform: translate(-50%, -50%) scale(.8); opacity: 0; } }
.zg-result.win { border-color: rgba(242,217,43,.6); }
.zg-result.lose { border-color: rgba(220,70,60,.6); }
.zg-res-title { font: 700 22px/1.1 var(--display); text-transform: uppercase; margin-bottom: 8px; }
.zg-result.win .zg-res-title { color: var(--yellow); }
.zg-result.lose .zg-res-title { color: #ff6a5a; }
.zg-stars { font-size: 30px; letter-spacing: 4px; margin-bottom: 8px; }
.zg-res-row { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 2px; border-bottom: 1px solid var(--line); }
.zg-reward { display: flex; justify-content: center; gap: 14px; font: 700 18px/1 var(--display); margin: 14px 0 6px; color: var(--yellow); }
.zg-first { font-size: 13px; color: #9fe3a6; margin-top: 4px; }
.zg-norew { font-size: 13px; color: var(--muted); margin: 12px 0 4px; }
.zg-res-btns { display: grid; gap: 8px; margin-top: 16px; }
.zg-b { appearance: none; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: #fff; font: 700 15px/1 var(--display); text-transform: uppercase; }
.zg-b.primary { background: linear-gradient(180deg, #ffe94d, #f2d92b); color: #121212; border: 0; }
.zg-b.ghost { background: transparent; }