.card {
    padding: 17px; border-radius: var(--r); border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--panel);
}
.card.lg { padding: 19px; }
.card.pad-s { padding: 14px; }
.card > h3 { font-size: 15px; margin-bottom: 12px; }
.card.lg > h3 { font-size: 16px; margin-bottom: 14px; }
.card-h { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.card-h h2, .card-h h3 { font-size: 15px; }
.card.lg .card-h h3 { font-size: 16px; }

.ticker {
    min-height: 46px; padding: 6px 10px 6px 14px; display: flex; align-items: center; gap: 14px;
    overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.ticker .live {
    flex: none; display: inline-flex; align-items: center; gap: 8px; color: var(--green);
    font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.ticker .track {
    min-width: 0; flex: 1; overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ticker .row { width: max-content; display: flex; align-items: center; animation: tick 44s linear infinite; }
.ticker .row > .e { margin-right: 9px; }
.ticker .row:hover { animation-play-state: paused; }
.ticker .e {
    min-height: 34px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 8px;
    white-space: nowrap; background: var(--surface-2); border-radius: var(--r-2xs); font-size: 11px;
}
.ticker .row.is-wait { animation: none; }
.ticker .e.sk {
    padding: 0; background: linear-gradient(90deg, var(--surface-2) 0%, rgba(255,255,255,.09) 50%, var(--surface-2) 100%) 0 0 / 200% 100%;
    animation: tkWait 1.4s ease-in-out infinite;
}
@keyframes tkWait { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ticker .e.sk { animation: none; } }
.ticker .e span { color: var(--dim); }
.ticker .e b { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--green); }
.ticker .e b.mult { color: var(--gold); }

.ticker .e .gi { flex: none; width: 22px; height: 22px; object-fit: contain; margin-left: -4px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }

.ticker .e.big {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, rgba(247,201,75,.18), rgba(247,160,40,.08));
    box-shadow: inset 0 0 0 1px rgba(247,201,75,.38);
}
.ticker .e.big span { color: #f3e2b4; }
.ticker .e.big b.mult { color: #ffd45c; text-shadow: 0 0 12px rgba(247,190,60,.55); }

.ticker .e.mega {
    background: linear-gradient(135deg, #ffe38a, #f7b733 55%, #e08a12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 18px -8px rgba(247,170,40,.9);
}
.ticker .e.mega span { color: #3a2200; font-weight: 700; }
.ticker .e.mega b.mult { color: #2a1600; text-shadow: none; font-size: 12px; }
.ticker .e.mega em {
    font-style: normal; padding: 2px 6px; border-radius: 6px; font-size: 9px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: #fff; background: #d0421a;
}
.ticker .e.big::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: translateX(-140%);
    animation: tickShine 3.2s ease-in-out infinite;
}
.ticker .e.mega::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); }

@keyframes tickShine { 0%, 55% { transform: translateX(-140%); } 100% { transform: translateX(440%); } }
@media (prefers-reduced-motion: reduce) { .ticker .e.big::after { animation: none; display: none; } }

.h-hero { position: relative; border-radius: 26px; overflow: hidden; isolation: isolate;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px -36px rgba(0,0,0,.9); }
.h-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.h-track::-webkit-scrollbar { display: none; }
.h-slide {
    position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; min-height: 300px;

    --art-w: clamp(300px, 30vw, 470px);
    display: grid; grid-template-columns: minmax(0, 1fr) var(--art-w); align-items: center;
    padding: 38px 44px 34px; overflow: hidden; color: #fff;
    background:
        radial-gradient(520px 340px at calc(100% - 44px - var(--art-w) / 2) 52%, var(--glow), transparent 70%),
        linear-gradient(120deg, var(--b1), var(--b2));
}

.h-slide::before {
    content: ''; position: absolute; right: calc(44px + var(--art-w) / 2 - 350px); top: 50%; width: 700px; height: 700px; margin-top: -350px; z-index: 0;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.06) 0 6deg, transparent 6deg 18deg);
    -webkit-mask-image: radial-gradient(circle, #000 0 18%, transparent 62%); mask-image: radial-gradient(circle, #000 0 18%, transparent 62%);
    animation: hSpin 70s linear infinite;
}
.h-tx { position: relative; z-index: 2; min-width: 0; }
.h-tx h3 { font-family: var(--f-display); font-size: clamp(28px, 3vw, 40px); line-height: 1.06; letter-spacing: -.045em; margin: 14px 0 10px; }
.h-tx p { max-width: 430px; color: rgba(255,255,255,.74); font-size: 14px; font-weight: 600; line-height: 1.55; }
.h-chip {
    display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #ffe9b0; background: rgba(255,200,80,.12); box-shadow: inset 0 0 0 1px rgba(255,200,80,.3);
}
.h-chip .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3dffa8; box-shadow: 0 0 0 4px rgba(61,255,168,.18); animation: hPulse 1.6s infinite; }
@keyframes hPulse { 50% { opacity: .45; } }
.h-gold {
    background: linear-gradient(180deg, #fff6d0 0%, #ffd45c 45%, #f29d1a 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 4px 18px rgba(247,170,40,.4));
}
.h-acts { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.h-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 15px;
    font-weight: 800; font-size: 14.5px; color: #2a1600; white-space: nowrap;
    background: linear-gradient(180deg, #ffe38a 0%, #f7b733 55%, #e08a12 100%);
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(120,60,0,.35), 0 14px 34px -12px rgba(247,170,40,.85);
    transition: transform .15s, filter .15s;
}
.h-cta i { font-style: normal; transition: transform .2s var(--ease); }
.h-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.h-cta:hover i { transform: translateX(3px); }
.h-cta:active { transform: translateY(1px); }
.h-note { color: rgba(255,255,255,.62); font-size: 12px; font-weight: 700; }
.h-note:empty { display: none; }
.h-live { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 16px; padding: 10px 16px; border-radius: 14px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,200,80,.25); }
.h-live small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.h-live b { font-family: var(--f-display); font-size: 24px; font-variant-numeric: tabular-nums; }

.h-art { position: relative; z-index: 1; height: 250px; }
.h-art img { position: absolute; max-width: none; user-select: none; }
.h-float { animation: hFloat 4s ease-in-out infinite; }
.h-slow { animation-duration: 6s; }
.h-spin { animation: hSpin 40s linear infinite; }
@keyframes hFloat { 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes hSpin { to { transform: rotate(360deg); } }

.h-wheel { --b1: #1a0b3d; --b2: #3a0f6b; --glow: rgba(255,190,70,.38); }

.h-wheel .wb { inset: 0; margin: auto; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 36px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(255,190,70,.25)); }

.h-wheel .h-art .c1, .h-wheel .h-art .d1 { display: none; }
.h-dep  { --b1: #0a1d3d; --b2: #0f4a6e; --glow: rgba(255,200,90,.35); }
.h-dep .ch  { width: 290px; left: 50%; top: 50%; margin: -145px 0 0 -145px; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.h-dep .d1  { width: 70px; right: 4%; top: 4%; }
.h-dep .c1  { width: 58px; left: 6%; top: 12%; animation-delay: -2s; }
.h-bank { --b1: #2a1300; --b2: #5c2a05; --glow: rgba(255,170,40,.45); }
.h-bank .pot { width: 280px; left: 50%; top: 50%; margin: -140px 0 0 -140px; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.h-bank .c1  { width: 62px; left: 4%; top: 10%; }
.h-bank .c2  { width: 46px; right: 4%; top: 20%; animation-delay: -1s; }
.h-ref  { --b1: #0d2a1f; --b2: #0f5a3f; --glow: rgba(90,255,190,.3); }

.h-season   { --b1: #170d3d; --b2: #3a1f8a; --glow: rgba(160,120,255,.42); }
.h-treasure { --b1: #2a1a05; --b2: #6b4410; --glow: rgba(255,200,90,.42); }
.h-streak   { --b1: #2a0f05; --b2: #6e2a0c; --glow: rgba(255,130,60,.42); }
.h-daily    { --b1: #0b2a1c; --b2: #145a3a; --glow: rgba(255,200,80,.38); }
.h-bn .rb { inset: 0; margin: auto; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 34px rgba(0,0,0,.5)) drop-shadow(0 0 30px var(--glow)); }
.h-bn .h-art { margin-right: 0; }
.h-ref .rb { height: 240px; width: auto; left: 50%; top: 50%; margin: -120px 0 0 -144px; filter: drop-shadow(0 24px 34px rgba(0,0,0,.5)) drop-shadow(0 0 34px rgba(255,210,80,.3)); }

@media (min-width: 1300px) {
    .h-art { height: 300px; }
    .h-dep .ch   { width: 330px; margin: -165px 0 0 -165px; }
    .h-bank .pot { width: 320px; margin: -160px 0 0 -160px; }
    .h-ref .rb   { height: 280px; margin: -140px 0 0 -168px; }
}

.h-bars { position: absolute; z-index: 3; left: 44px; right: 44px; top: 16px; display: flex; gap: 6px; }
.h-bars button { flex: 1; height: 16px; padding: 6px 0; background: none; cursor: pointer; }
.h-bars button i { position: relative; display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); overflow: hidden; }
.h-bars button i::after { content: ''; position: absolute; inset: 0; background: #fff; border-radius: inherit; transform: scaleX(0); transform-origin: 0 50%; }
.h-bars button.done i::after { transform: none; }

.h-bars button.on i::after { animation: hBar 6.5s linear forwards; }
.h-bars button.on.paused i::after { animation-play-state: paused; }
@keyframes hBar { from { transform: scaleX(0); } to { transform: none; } }

@media (max-width: 760px) {
    .h-hero { border-radius: 22px; }
    .h-slide { --art-w: 118px; grid-template-columns: minmax(0, 1fr) 118px; align-items: center; padding: 30px 16px 18px; min-height: 0; }

    .h-wheel .h-art { margin-right: 0; }
    .h-tx p { display: none; }
    .h-art { height: 150px; margin-right: -16px; }
    .h-slide::before { right: -330px; top: 50%; width: 560px; height: 560px; margin-top: -280px; }
    .h-art img { transform-origin: 50% 50%; }
    .h-dep .ch, .h-bank .pot { width: 150px; left: -4px; top: 50%; margin: -75px 0 0; }
    .h-ref .rb { height: 104px; left: 50%; top: 50%; margin: -52px 0 0 -62px; }
    .h-ref .h-art { margin-right: 0; }
    .h-art .c1, .h-art .c2, .h-art .d1 { display: none; }
    .h-tx h3 { font-size: 21px; line-height: 1.1; margin: 10px 0 0; }
    .h-chip { height: 24px; padding: 0 10px; font-size: 9px; letter-spacing: .05em; white-space: nowrap; max-width: 100%; }
    .h-acts { margin-top: 14px; gap: 8px 12px; }
    .h-cta { height: 44px; padding: 0 18px; font-size: 13.5px; border-radius: 13px; }
    .h-note { font-size: 11px; }
    .h-live { margin-top: 10px; padding: 7px 12px; gap: 8px; }
    .h-live small { font-size: 9.5px; }
    .h-live b { font-size: 17px; }
    .h-bars { left: 16px; right: 16px; top: 10px; }

    .h-slide { --art-w: 38%; column-gap: 10px; }
    .h-art, .h-wheel .h-art, .h-ref .h-art { height: 150px; margin-right: -4px; }
    .h-art :is(.wb, .ch, .pot, .rb) {
        inset: 0; left: 0; top: 0; margin: auto; width: 100%; height: 100%; max-width: none; object-fit: contain;
    }
    .h-tx h3 { font-size: clamp(18px, 5.2vw, 22px); overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
    .h-float, .h-spin, .h-slide::before, .h-chip .dot { animation: none; }
}

.screen.home .h-slide { --art-w: clamp(220px, 22vw, 320px); min-height: 0; padding: 30px 36px 22px; }
.screen.home .h-slide::before { width: 520px; height: 520px; margin-top: -260px; right: calc(36px + var(--art-w) / 2 - 260px); }
.screen.home .h-tx h3 { font-size: clamp(22px, 2.1vw, 30px); margin: 10px 0 6px; }
.screen.home .h-tx p { font-size: 13px; line-height: 1.45; }
.screen.home .h-chip { height: 24px; padding: 0 10px; font-size: 9.5px; }
.screen.home .h-acts { margin-top: 14px; gap: 10px 12px; }
.screen.home .h-cta { height: 42px; padding: 0 20px; font-size: 13.5px; border-radius: 13px; }
.screen.home .h-live { margin-top: 10px; padding: 7px 12px; }
.screen.home .h-live b { font-size: 19px; }
.screen.home .h-art, .screen.home .h-wheel .h-art, .screen.home .h-ref .h-art { height: 168px; margin-right: 0; }
.screen.home .h-art :is(.wb, .ch, .pot, .rb) { inset: 0; left: 0; top: 0; margin: auto; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.screen.home .h-art .c1, .screen.home .h-art .c2, .screen.home .h-art .d1 { width: 38px; }
.screen.home .h-bars { left: 36px; right: 36px; top: 10px; }

.screen.home .h-wheel { --art-w: clamp(280px, 30vw, 440px); }
.screen.home .h-wheel .h-art .wb { inset: -16px 0; height: calc(100% + 32px); }

.screen.home .h-bn .h-art .rb { inset: -20px 0; height: calc(100% + 40px); }
@media (max-width: 760px) {

    .screen.home .h-slide { --art-w: 34%; padding: 22px 14px 14px; }
    .screen.home .h-chip { display: none; }
    .screen.home .h-tx h3 { font-size: clamp(17px, 4.8vw, 20px); margin: 0; }
    .screen.home .h-acts { margin-top: 10px; }
    .screen.home .h-cta { height: 38px; padding: 0 14px; font-size: 13px; border-radius: 12px; }
    .screen.home .h-art, .screen.home .h-wheel .h-art, .screen.home .h-ref .h-art { height: 108px; margin-right: -4px; }
    .screen.home .h-live { margin-top: 8px; padding: 5px 10px; } .screen.home .h-live b { font-size: 15px; }
    .screen.home .h-bars { left: 14px; right: 14px; top: 6px; }
    .screen.home .h-wheel { --art-w: 46%; }
    .screen.home .h-wheel .h-art .wb { inset: -10px -4px; width: calc(100% + 8px); height: calc(100% + 20px); }
}

.promo {
    display: grid; gap: 14px;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}
.promo-slot { display: flex; min-width: 0; }

.promo-card {
    position: relative; overflow: hidden; isolation: isolate;
    flex: 1; min-width: 0; width: 100%;
    display: flex; align-items: center; gap: 18px; text-align: left; cursor: pointer;
    padding: 26px 28px; border-radius: var(--r-lg); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.promo-card:hover { transform: translateY(-3px); }
.promo-card:active { transform: translateY(0); }

.promo-glow {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(70% 120% at 82% -20%, rgba(255,255,255,.28), transparent 60%),
        radial-gradient(90% 140% at 0% 120%, rgba(0,0,0,.26), transparent 62%);
}

.promo-body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.promo-card h3 {
    font-family: var(--f-display); font-size: 27px; font-weight: 800;
    letter-spacing: -.04em; line-height: 1.12;
}
.promo-card p { margin-top: 9px; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 700; }

.promo-row { display: flex; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

.promo-pill {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 15px; border-radius: 999px;
    background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
    font-size: 12px; font-weight: 800; white-space: nowrap;
}
.promo-pill .dot {
    width: 7px; height: 7px; flex: none; border-radius: 50%; background: #7bffc4;
    box-shadow: 0 0 0 3px rgba(123,255,196,.24); animation: pulseDot 1.8s ease-in-out infinite;
}

.promo-go {
    display: inline-flex; align-items: center; gap: 9px;
    height: 44px; padding: 0 20px; border-radius: 999px;
    background: #fff; color: #2a1a63; font-size: 13.5px; font-weight: 800; white-space: nowrap;
    box-shadow: 0 10px 24px -12px rgba(0,0,0,.7);
    transition: gap .2s var(--ease);
}
.promo-go i { font-style: normal; transition: transform .2s var(--ease); }
.promo-card:hover .promo-go i { transform: translateX(3px); }

.promo-spin {
    container-type: inline-size;
    background: linear-gradient(112deg, #7b3df2 0%, #5c49f0 42%, #3a6ff2 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 22px 44px -28px rgba(92,73,240,.9);
}
.promo-spin:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 30px 56px -28px rgba(92,73,240,1); }

.promo-chips { display: none; }
.pchip {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 13px; border-radius: 999px;
    background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
    font-size: 11.5px; font-weight: 800; white-space: nowrap;
}
.pchip span { color: rgba(255,255,255,.74); font-weight: 700; }
.pchip b { font-weight: 800; }

@container (min-width: 780px) {
    .promo-chips { display: flex; flex-direction: column; gap: 8px; flex: none; }
}

.promo-art {
    position: relative; flex: none; width: 150px; height: 150px;
    display: grid; place-items: center;
}
.promo-art::before {
    content: ''; position: absolute; inset: 6% 6% 0;
    border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 68%);
}
.promo-art .fw {
    position: relative; width: 100%; height: 100%;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
    transition: transform .3s var(--ease);
}
.promo-spin:hover .promo-art .fw { transform: rotate(6deg); }

.promo-spin.is-used { filter: saturate(.72); }
.promo-spin.is-used .promo-pill .dot { background: var(--gold); box-shadow: none; animation: none; }
.promo-spin.is-used .promo-go { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }

.promo-ref {
    align-items: stretch;
    background: linear-gradient(150deg, #9040f5 0%, #7128e0 52%, #5118b4 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 22px 44px -28px rgba(113,40,224,.9);
}
.promo-ref:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 30px 56px -28px rgba(113,40,224,1); }
.promo-ref h3 { font-size: 23px; }
.promo-stats { display: flex; gap: 10px; margin-top: 16px; }
.promo-stats .st {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
    padding: 11px 13px; border-radius: var(--r-xs);
    background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.promo-stats b { font-family: var(--f-display); font-size: 19px; font-weight: 700; letter-spacing: -.04em; }
.promo-stats small { color: rgba(255,255,255,.76); font-size: 10.5px; font-weight: 700; line-height: 1.3; }
.promo-ref .promo-go { margin-top: auto; align-self: flex-start; margin-top: 18px; }

@media (max-width: 1180px) {
    .promo { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .promo-card { padding: 22px 22px; gap: 14px; }
    .promo-card h3 { font-size: 24px; }
    .promo-ref h3 { font-size: 21px; }
    .promo-art { width: 128px; height: 128px; }
}

@media (max-width: 860px) {
    .promo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .promo { gap: 10px; }
    .promo-card { padding: 14px 15px; gap: 10px; border-radius: var(--r); align-items: center; }
    .promo-card h3 { font-size: 19px; letter-spacing: -.045em; line-height: 1.08; }
    .promo-card p { display: none; }

    .promo-row { margin-top: 9px; gap: 8px; }
    .promo-pill { height: 28px; padding: 0 10px; font-size: 10.5px; gap: 6px; }
    .promo-pill .dot { width: 6px; height: 6px; box-shadow: 0 0 0 2.5px rgba(123,255,196,.24); }
    .promo-go { height: 36px; padding: 0 14px; font-size: 12px; gap: 7px; }
    .promo-art { width: 104px; height: 104px; margin-right: -4px; }

    .promo-ref { align-items: stretch; }
    .promo-ref h3 { font-size: 18px; }
    .promo-stats { margin-top: 10px; gap: 7px; }
    .promo-stats .st { padding: 8px 10px; gap: 1px; }
    .promo-stats b { font-size: 16px; }
    .promo-stats small { font-size: 9.5px; line-height: 1.25; }
    .promo-ref .promo-go { margin-top: 10px; height: 34px; }
}

@media (max-width: 400px) {
    .promo-card { padding: 12px 13px; gap: 8px; }
    .promo-card h3 { font-size: 17.5px; }
    .promo-ref h3 { font-size: 16.5px; }
    .promo-art { width: 92px; height: 92px; }
    .promo-go { height: 34px; padding: 0 12px; font-size: 11.5px; }
    .promo-pill { height: 26px; padding: 0 9px; font-size: 10px; }
    .promo-stats .st { padding: 7px 9px; }
    .promo-stats b { font-size: 15px; }
    .promo-stats small { font-size: 9px; }
}

.fw { display: block; width: 100%; aspect-ratio: 1; }

.mdl.mdl-wheel {
    background:
        radial-gradient(70% 38% at 50% 0%, rgba(124,92,255,.30), transparent 72%),
        radial-gradient(50% 30% at 85% 34%, rgba(240,63,166,.10), transparent 70%),
        radial-gradient(50% 30% at 12% 40%, rgba(31,179,236,.10), transparent 70%),
        radial-gradient(60% 40% at 50% 100%, rgba(31,127,224,.10), transparent 70%),
        linear-gradient(180deg, #11152a 0%, #0a0d18 100%);
    border-color: rgba(150,160,255,.14);
    box-shadow: 0 50px 140px rgba(0,0,0,.72), 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}

.mdl.mdl-wheel::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.3px) 0 0 / 18px 18px;
    -webkit-mask: linear-gradient(180deg, #000, transparent 46%);
    mask: linear-gradient(180deg, #000, transparent 46%);
}
.wm { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.wm-main, .wm-side { display: contents; }
.wm .wb-pills { justify-content: center; margin: 0; }
.wm .wb-pill {
    height: 29px; padding: 0 13px 0 11px; gap: 6px; color: #c9c3ff;
    background: rgba(124,92,255,.12); border-color: rgba(150,130,255,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(8px);
}
.wm .wb-pill svg { opacity: .8; }
.wm-title { font-family: var(--f-display); font-size: 31px; font-weight: 800; letter-spacing: -.045em; line-height: 1.04; margin: -4px 0 0; text-wrap: balance; }
.wm-title span {
    display: block;
    background: linear-gradient(92deg, #ffe39a, #f7c94b 45%, #ff9f43);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 4px 18px rgba(247,180,60,.25));
}

.wm-stage { --wy: 54.87%; --wd: 88.5%; position: relative; width: min(350px, 88vw); margin: 2px 0 -2%; }
.wm-glow {
    position: absolute; inset: -10% -12% 4%; border-radius: 50%; pointer-events: none;
    background:
        conic-gradient(from 0deg, rgba(91,79,240,.45), rgba(240,63,166,.35), rgba(31,179,236,.4), rgba(155,69,240,.45), rgba(91,79,240,.45));
    filter: blur(46px); opacity: .55;
    animation: wmGlow 14s linear infinite;
}
@keyframes wmGlow { to { transform: rotate(360deg); } }

.wm-rays {
    position: absolute; left: 50%; top: var(--wy); width: 150%; aspect-ratio: 1;
    translate: -50% -50%; border-radius: 50%; pointer-events: none;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.055) 0 4deg, transparent 4deg 18deg);
    -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%);
    mask: radial-gradient(closest-side, #000 30%, transparent 100%);
    animation: wmGlow 60s linear infinite;
}

.wm-plinth {
    position: absolute; left: 14%; right: 14%; top: calc(var(--wy) + var(--wd) / 2 - 3%); height: 9%;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(140,120,255,.55), rgba(91,79,240,.18) 60%, transparent);
    filter: blur(6px);
}
.wm-stage .fw { position: relative; filter: drop-shadow(0 22px 40px rgba(0,0,0,.7)); transition: opacity .3s; }

.wm-load {
    position: absolute; left: 50%; top: var(--wy); width: var(--wd); aspect-ratio: 1;
    translate: -50% -50%; border-radius: 50%; pointer-events: none;
    opacity: 0; transition: opacity .35s, scale .45s var(--ease); scale: 1.03;
}
.wm-load i { position: absolute; inset: 0; border-radius: 50%; }
.wm-load .sk {
    background:
        radial-gradient(closest-side, transparent 24%, rgba(255,255,255,.02) 24.5%, transparent 60%),
        repeating-conic-gradient(from 16.9deg, rgba(255,255,255,.07) 0 .6deg, transparent .6deg 32.727deg),
        radial-gradient(closest-side, #1a2036 0 60%, #131829 87%, #0d111d 87.5%, #1b2235 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 40px rgba(0,0,0,.6);
}

.wm-load .sk::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 70%, rgba(160,150,255,.16) 88%, transparent 100%);
    -webkit-mask: radial-gradient(closest-side, transparent 27%, #000 28%, #000 86%, transparent 87%);
    mask: radial-gradient(closest-side, transparent 27%, #000 28%, #000 86%, transparent 87%);
    animation: wmGlow 1.6s linear infinite;
}

.wm-load .arc {
    background: conic-gradient(from 0deg, transparent 0 62%, #5b4ff0 80%, #b88cff 94%, #fff 99%, transparent 100%);
    -webkit-mask: radial-gradient(closest-side, transparent 89%, #000 90%, #000 98%, transparent 99%);
    mask: radial-gradient(closest-side, transparent 89%, #000 90%, #000 98%, transparent 99%);
    filter: drop-shadow(0 0 6px rgba(150,120,255,.9));
    animation: wmGlow 1.1s cubic-bezier(.5,.15,.5,.85) infinite;
}
.wm-load .hub {
    inset: 36%;
    background: radial-gradient(circle at 40% 35%, #2a3150, #12172a 70%);
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 30px rgba(124,92,255,.35);
    animation: wmHub 1.6s ease-in-out infinite;
}
@keyframes wmHub { 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 46px rgba(124,92,255,.6); scale: 1.04; } }
.wm-load-tx {
    position: absolute; left: 0; right: 0; top: calc(var(--wy) + var(--wd) / 2 + 1%); text-align: center;
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
    opacity: 0; transition: opacity .3s; pointer-events: none;
}
.wm-stage.is-loading .wm-load { opacity: 1; scale: 1; }
.wm-stage.is-loading .wm-load-tx { opacity: 1; }
.wm-stage.is-loading .fw { opacity: 0; }
.wm-stage.is-loading + .wb-ready { visibility: hidden; }

.wm-stage.is-in .fw { animation: wmIn .6s var(--ease) backwards; }
@keyframes wmIn { from { opacity: 0; transform: scale(.92); } }

.wm-actions [aria-busy="true"] { opacity: .6; pointer-events: none; }

.wm-actions { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; margin-top: 2px; }
.wm-actions .btn { flex: 1 1 150px; border-radius: 16px; position: relative; overflow: hidden; letter-spacing: -.01em; }
.wm-actions .btn-acc {
    background: linear-gradient(180deg, #7aa4ff 0%, #4f7cf6 55%, #3f62e8 100%);
    box-shadow: 0 12px 32px rgba(63,111,240,.42), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(20,30,90,.25);
    transition: transform .2s var(--ease), box-shadow .2s, filter .2s;
}

.wm-actions .btn-acc:not(:disabled)::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-18deg); animation: wmShine 3.8s ease-in-out infinite;
}
@keyframes wmShine { 0%, 62% { left: -40%; } 100% { left: 130%; } }
.wm-actions .btn-acc:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 16px 38px rgba(63,111,240,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.wm-actions .btn-acc:not(:disabled):active { transform: translateY(1px) scale(.99); }

.wm-actions .btn-acc:disabled {
    opacity: 1; color: var(--dim); background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.wm-actions .btn-acc:disabled::after { display: none; }

.wm-goals {
    width: 100%; padding: 12px; border-radius: 20px; text-align: left;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.wm-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 4px 10px; }
.wm-sub b { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.wm-sub small { font-size: 11px; font-weight: 600; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm .wb-goals { width: 100%; gap: 6px; }
.wm .wb-goal { text-align: left; border-radius: 14px; background:
        linear-gradient(90deg, color-mix(in srgb, var(--tone) 13%, transparent), transparent 55%),
        rgba(8,11,20,.55);
    border-color: rgba(255,255,255,.05); }
.wm .wb-goal:hover { border-color: color-mix(in srgb, var(--tone) 30%, transparent); }
.wm .wb-goal.is-done { border-color: color-mix(in srgb, var(--tone) 45%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--tone) 18%, transparent); }
.wm .wb-goal .gnum { text-shadow: 0 0 18px color-mix(in srgb, var(--tone) 45%, transparent); }

.wm-reset {
    display: inline-flex; align-items: center; gap: 6px; flex: none; height: 24px; padding: 0 10px 0 8px;
    border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--dim); white-space: nowrap;
    background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
}
.wm-reset svg { opacity: .75; }
.wm-reset b { color: #fff; font-size: inherit; font-weight: 800; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.wm-reset.is-hot { color: #ffd98a; background: rgba(247,201,75,.10); border-color: rgba(247,201,75,.32);
    box-shadow: 0 0 18px rgba(247,201,75,.14); }
.wm-reset.is-hot svg { opacity: 1; animation: wmTick 1s steps(2) infinite; }
@keyframes wmTick { 50% { opacity: .35; } }
.wm-sub:has(.wm-reset) { align-items: center; }
.wm-sub:has(.wm-reset) > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.wm-prev {
    position: relative; display: flex; align-items: center; gap: 11px; margin-top: 8px;
    padding: 10px 12px 10px 10px; border-radius: 14px; overflow: hidden;
    background: linear-gradient(100deg, rgba(124,92,255,.12), rgba(124,92,255,0) 60%), rgba(8,11,20,.4);
    border: 1px dashed rgba(255,255,255,.10);
}
.wm-prev-ic {
    display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px;
    color: #b9a8ff; background: rgba(124,92,255,.16); border: 1px solid rgba(124,92,255,.28);
}
.wm-prev-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.wm-prev-tx small { white-space: nowrap; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.wm-prev-tx b { font-size: 14px; font-weight: 800; color: #fff; }
.wm-prev-chips { display: flex; gap: 6px; margin-left: auto; }
.wm-prev-none { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--faint); text-align: right; }
.wm-pchip {
    display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 7px; row-gap: 4px;
    align-items: center; padding: 6px 9px 6px 7px; border-radius: 11px;
    background: color-mix(in srgb, var(--tone) 9%, rgba(8,11,20,.6));
    border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent);
}
.wm-pchip .pi { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
    color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent); }
.wm-pchip .pn { font-size: 14px; font-weight: 900; color: var(--tone); line-height: 1; font-variant-numeric: tabular-nums; }
.wm-pchip .pn i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--faint); }
.wm-pchip .pp { display: flex; gap: 2px; }
.wm-pchip .pp i { width: 7px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); }
.wm-pchip .pp i.on { background: var(--tone); box-shadow: 0 0 6px color-mix(in srgb, var(--tone) 60%, transparent); }
.wm-pchip.is-zero { opacity: .5; }
@media (max-width: 380px) {
    .wm-prev { flex-wrap: wrap; }
    .wm-prev-chips, .wm-prev-none { margin-left: 45px; }
}
.wm-note {
    display: flex; align-items: flex-start; gap: 8px; text-align: left;
    color: var(--faint); font-size: 12px; font-weight: 600; line-height: 1.55; max-width: 48ch; margin: 0;
}
.wm-note svg { flex: none; margin-top: 2px; opacity: .7; }
.wm.is-spinning .wb-ready,
.wm.is-done .wb-ready {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 16px 0 13px;
    border-radius: 999px; color: #8ff0c6; font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
    background: linear-gradient(180deg, rgba(54,216,154,.14), rgba(54,216,154,.06));
    border: 1px solid rgba(54,216,154,.32);
    box-shadow: 0 6px 20px rgba(54,216,154,.12), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(8px);
}
.wb-ready .dot {
    width: 8px; height: 8px; flex: none; border-radius: 50%; background: #36d89a;
    box-shadow: 0 0 0 4px rgba(54,216,154,.18); animation: pulseDot 1.8s ease-in-out infinite;
}
.wb-ready b { color: #fff; font-weight: 800; }
.wb-ready.is-empty { color: var(--dim); background: rgba(255,255,255,.04); border-color: var(--line-2); box-shadow: none; }
.wb-ready.is-empty .dot { background: var(--faint); box-shadow: none; animation: none; }
.wm.is-spinning .wb-ready .dot { background: var(--gold-text); box-shadow: 0 0 0 4px rgba(247,201,75,.18); }

@media (min-width: 900px) {
    .mdl.mdl-wheel { width: min(940px, calc(100vw - 48px)); }
    .mdl.mdl-wheel .mdl-scroll { padding: 18px; }
    .wm {
        display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr; grid-template-areas: "side a" "side b";
        align-items: start; gap: 0 30px; text-align: left;
    }
    .wm-main, .wm-side { display: flex; flex-direction: column; min-width: 0; }
    .wm-main { grid-area: a; gap: 12px; align-items: flex-start; padding: 26px 26px 0 0; }
    .wm-main-b { grid-area: b; gap: 14px; align-items: stretch; padding: 22px 6px 6px 0; }
    .wm-side {
        grid-area: side; align-self: stretch; position: relative; overflow: hidden;
        align-items: center; justify-content: center; gap: 14px; padding: 28px 18px 24px;
        border-radius: 22px; isolation: isolate;
        background:
            radial-gradient(70% 60% at 50% 45%, rgba(124,92,255,.20), transparent 70%),
            linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
        border: 1px solid rgba(255,255,255,.07);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -40px 80px rgba(0,0,0,.25);
    }
    .wm .wb-pills { justify-content: flex-start; }
    .wm-title { font-size: 40px; margin: 2px 0 0; text-wrap: initial; }
    .wm-stage { width: min(420px, 100%); margin: 0 0 -3%; }
    .wm-actions { margin-top: 0; }
    .wm-note { max-width: none; }
}

.wb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-pill {
    height: 27px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px;
    border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--lilac); background: var(--acc-soft); border: 1px solid var(--acc-line);
}
.wb-pill.ok { color: var(--mint); background: var(--green-soft-2); border-color: var(--green-line); }
.wb-pill.ok i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(54,216,154,.2); animation: pulseDot 1.8s ease-in-out infinite; }
.wb-ready {
    display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px;
    border-radius: 999px; color: var(--mint); background: rgba(8,12,22,.7);
    border: 1px solid var(--green-line); font-size: 11px; font-weight: 800;
}

.wb-goals { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; width: 100%; }

.wb-goal {
    position: relative; overflow: hidden;

    display: grid; grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto; align-items: center;
    gap: 7px 12px; padding: 12px 14px; border-radius: var(--r-sm);
    border: 1px solid var(--line);

    background:
        radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--tone) 12%, transparent), transparent 62%),
        rgba(255,255,255,.035);
    transition: border-color .25s, transform .25s var(--ease), background .25s;
}

.wb-goal .ic {
    grid-row: 1 / 3; align-self: center;
    width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent);
}

.wb-goal .gtx { grid-column: 2; grid-row: 1; min-width: 0; }
.wb-goal .gtx small {
    display: block; color: var(--faint); font-size: 8.5px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-goal .gtx b {
    display: block; font-size: 13px; font-weight: 800; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wb-goal .gnum {
    grid-column: 3; grid-row: 1 / 3; align-self: center;
    font-family: var(--f-display); font-size: 21px; font-weight: 700;
    letter-spacing: -.03em; color: var(--tone); line-height: 1; white-space: nowrap;
}
.wb-goal .gnum i {
    font-style: normal; font-size: 12px; font-weight: 700; color: var(--faint-2); margin-left: 1px;
}

.wb-goal .gpips { grid-column: 2; grid-row: 2; display: flex; gap: 5px; }
.wb-goal .gpips i {
    flex: 1; max-width: 30px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.09);
    transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.wb-goal .gpips i.on {
    background: var(--tone);
    box-shadow: 0 0 10px color-mix(in srgb, var(--tone) 45%, transparent);
}

.wb-goal.is-done {
    border-color: color-mix(in srgb, var(--tone) 38%, transparent);
    background:
        radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--tone) 20%, transparent), transparent 66%),
        rgba(255,255,255,.05);
}
.wb-goal.is-done .gnum i { color: color-mix(in srgb, var(--tone) 60%, var(--faint-2)); }

@media (prefers-reduced-motion: reduce) {
    .wb-pill.ok i, .promo-pill .dot { animation: none; }
}

.prog { height: 6px; border-radius: 999px; background: var(--surface-4); overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: 999px; background: var(--acc-grad); width: 0; transition: width .9s var(--ease); }
.prog.gold i { background: linear-gradient(90deg,#f7c94b,#f0a62c); }
.prog.gold-warm i { background: linear-gradient(90deg,#ffe08a,#f0a62c); }
.prog.cyan i { background: linear-gradient(90deg,#37d7f2,#4d8dff); }
.prog.green i { background: linear-gradient(90deg,#36d89a,#22b47f); }
.prog.ice i { background: linear-gradient(90deg,#8fe4ff,#37a7f2); }
.prog.h8 { height: 8px; }
.prog.h9 { height: 9px; }

.quest {
    padding: 12px; border-radius: var(--r-sm); border: 1px solid var(--line-soft); background: var(--surface);
}
.quest + .quest { margin-top: 10px; }
.quest .top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.quest .top { flex: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.quest .top:hover { transform: none; }
.quest .top:last-child { margin-bottom: 0; }
.quest .ic {
    width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--r-2xs);
    font-size: 15px; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent);
}
.quest b { display: block; font-size: 12.5px; font-weight: 800; }
.quest small { display: block; color: var(--muted); font-size: 10.5px; font-weight: 700; }
.quest .rew {
    flex: none; padding: 6px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
    color: var(--gold-text); background: var(--gold-soft-2);
}
.quest.done .rew { color: var(--mint); background: var(--green-soft-2); }

.quest .rew.go { cursor: pointer; color: var(--green-ink); background: var(--green-grad); box-shadow: 0 8px 18px -10px rgba(54,216,154,.9); transition: transform .12s, filter .15s; }
.quest .rew.go:hover { filter: brightness(1.06); }
.quest .rew.go:active { transform: translateY(1px); }
.quest .rew.go:disabled { opacity: .6; pointer-events: none; }
.quest .rew.got { color: var(--faint); background: var(--surface-3); }
.quest.claimed { opacity: .72; }
.quest .desc { display: block; margin-top: 8px; color: var(--faint); font-size: 11px; font-weight: 700; line-height: 1.5; }

.resume { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.resume a {
    display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-md);
    border: 1px solid var(--line-2); background: linear-gradient(140deg,#1a1f30,#111520); transition: .18s;
}
.resume a:hover { border-color: var(--acc-line); transform: translateY(-2px); }
.resume .who { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.resume .tile { display: block; width: 44px; height: 44px; flex: none; border-radius: var(--r-xs); background: linear-gradient(135deg, var(--c1), var(--c2)); }
.resume b { display: block; font-size: 14px; font-weight: 800; }
.resume small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.resume .go {
    flex: none; min-height: 38px; padding: 0 14px; display: grid; place-items: center;
    border: 1px solid var(--acc-line); border-radius: 12px; color: #fff; background: var(--acc-soft);
    font-size: 12px; font-weight: 800;
}

.filters { display: flex; gap: 4px; padding: 4px; border-radius: 15px; background: rgba(255,255,255,.04); }
.filters button {
    flex: none; min-height: 34px; padding: 0 13px; border-radius: 11px; font-size: 12px; font-weight: 800;
    white-space: nowrap; color: var(--dim); background: transparent; border: 0;
    display: inline-flex; align-items: center; gap: 7px; transition: color .16s, background .16s;
}
.filters button .n {
    min-width: 18px; height: 17px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px;
    background: rgba(255,255,255,.08); color: var(--faint); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.filters button:hover { color: var(--text); background: var(--surface-2); }
.filters button.on { color: #fff; background: var(--acc-grad); box-shadow: var(--acc-sh); }
.filters button.on .n { background: rgba(255,255,255,.22); color: #fff; }

.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.game {
    --r-card: 26px;
    position: relative; display: flex; flex-direction: column;
    border-radius: var(--r-card); background: var(--panel-2);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.055), 0 10px 26px -20px rgba(0,0,0,.95);
    transition: transform .26s var(--ease), box-shadow .26s;
}
.game:hover {
    transform: translateY(-6px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--env) 45%, transparent),
                0 30px 58px -28px color-mix(in srgb, var(--env) 62%, #000),
                0 14px 30px -22px rgba(0,0,0,.9);
}
.game:active { transform: translateY(-2px) scale(.988); }
.game:focus-visible { outline: 2px solid color-mix(in srgb, var(--env) 70%, transparent); outline-offset: 3px; }

.game .g-scene {
    position: relative; aspect-ratio: 1.12; overflow: hidden;
    border-radius: var(--r-card) var(--r-card) 0 0;
    background: linear-gradient(168deg, color-mix(in srgb, var(--env) 30%, #131c2e) 0%, #0b1220 80%);
}
.game .g-glow {
    position: absolute; inset: 0; pointer-events: none; opacity: .9;
    background: radial-gradient(84% 64% at 24% 2%, color-mix(in srgb, var(--env) 58%, transparent) 0%, transparent 66%);
    transition: opacity .28s var(--ease);
}
.game:hover .g-glow { opacity: 1; }
.game .g-grain {
    position: absolute; inset: 0; pointer-events: none; opacity: .15; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.game .g-scene::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, transparent 54%, rgba(8,12,22,.6) 100%);
}
.game .g-halo {
    position: absolute; left: 50%; top: 50%; width: 82%; aspect-ratio: 1; transform: translate(-50%,-50%);
    border-radius: 50%; pointer-events: none; opacity: .7;
    background: radial-gradient(circle closest-side,
        color-mix(in srgb, var(--tone) 42%, transparent) 0%,
        color-mix(in srgb, var(--tone) 12%, transparent) 56%, transparent 100%);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.game:hover .g-halo { opacity: 1; transform: translate(-50%,-50%) scale(1.07); }

.game .g-art { position: absolute; inset: 4% 4% 2%; z-index: 2; pointer-events: none; }
.game .g-art img { width: 100%; height: 100%; object-fit: contain; }

.game .badge {
    position: absolute; z-index: 3; top: 11px; left: 11px;
    height: 21px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px;
    color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
    background: linear-gradient(90deg,#f2476a,#fa8c42); box-shadow: 0 8px 18px -8px rgba(242,71,106,.9);
}
.game .badge.new { background: var(--acc-grad); box-shadow: 0 8px 18px -8px rgba(77,141,255,.95); }

.game .badge.adm { gap: 5px; letter-spacing: .04em; text-transform: uppercase; color: #1d1405;
    background: linear-gradient(90deg,#ffd76a,#ffab3d); box-shadow: 0 8px 18px -8px rgba(255,171,61,.95); }
.game .badge.adm::before { content: ''; width: 9px; height: 9px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z'/%3E%3C/svg%3E") center / contain no-repeat; }

.game .badge.day { gap: 5px; letter-spacing: .04em; text-transform: uppercase; color: #2a1a00;
    background: linear-gradient(90deg,#fff1a8,#f7c94b 55%,#f0a62c); box-shadow: 0 8px 18px -8px rgba(247,201,75,.95), inset 0 0 0 1px rgba(255,255,255,.35); }
.game .badge.day::before { content: ''; width: 9px; height: 9px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.2 3.4 1.4-6.8L2.1 9.1 9 8.3z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.2 3.4 1.4-6.8L2.1 9.1 9 8.3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.game .online, .game .mult {
    position: absolute; z-index: 3; height: 22px; padding: 0 9px;
    display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
    background: rgba(7,11,20,.46); backdrop-filter: blur(14px);
    font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.game .online { top: 11px; right: 11px; color: #eef1f8; }
.game .online i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(54,216,154,.22); animation: pulseDot 1.8s ease-in-out infinite; }
.game .mult { left: 11px; bottom: 11px; color: var(--mint); box-shadow: inset 0 0 0 1px rgba(54,216,154,.28); }
.game .mult i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px 1px rgba(54,216,154,.8); }

.game .g-body { position: relative; padding: 13px 16px 15px; }
.game .g-body h3 {
    font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: -.04em; line-height: 1.2;
    padding-right: 54px;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.game .g-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 5px; min-height: 30px; color: var(--faint); font-size: 11px; font-weight: 700; line-height: 1.35;
}
.game .g-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.game .chip {
    height: 22px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px;
    color: var(--dim); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
    font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.game .chip.win { color: var(--gold-pale); background: var(--gold-soft-2); box-shadow: inset 0 0 0 1px var(--gold-line); }

.game .g-play {
    position: absolute; z-index: 4; right: 14px; top: -23px;
    width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
    color: #fff; border: 4px solid var(--panel-2);
    background: var(--acc-grad);
    box-shadow: 0 12px 24px -10px rgba(77,141,255,.95);
    transition: transform .24s var(--ease), box-shadow .24s;
}
.game .g-play svg { width: 14px; height: 14px; margin-left: 2px; }
.game:hover .g-play {
    transform: scale(1.12);
    box-shadow: 0 18px 34px -12px rgba(77,141,255,1), inset 0 1px 0 rgba(255,255,255,.35);
}
.game:active .g-play { transform: scale(1.02); }

.level {
    display: flex; align-items: center; gap: 13px; padding: 16px; border-radius: var(--r);
    border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--panel);
}
.ring {
    width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--ring-c, var(--acc)) 0 var(--p, 32%), rgba(255,255,255,.08) var(--p, 32%) 100%);
}
.ring b { width: 44px; height: 44px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font-family: var(--f-display); font-size: 13px; font-weight: 700; }
.ring.lg { width: 86px; height: 86px; }
.ring.lg b { width: 72px; height: 72px; font-size: 28px; background: linear-gradient(135deg,#34d7ed,#4d8dff); color: #fff; }
.level .tx b { display: block; font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.level .tx small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }

.bonus {
    display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: 16px;
    border: 1px solid var(--line-soft); background: var(--surface);
}
.bonus + .bonus { margin-top: 9px; }
.bonus.ready { border-color: rgba(54,216,154,.28); background: var(--green-soft); }
.bonus .ic {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px;
    font-size: 16px; color: var(--dim); background: var(--surface-3);
}
.bonus.ready .ic { color: var(--mint); background: rgba(54,216,154,.16); }
.bonus b { display: block; font-size: 13px; font-weight: 800; }
.bonus small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.bonus .cta {
    flex: none; padding: 8px 13px; border-radius: 12px; font-size: 11.5px; font-weight: 800;
    color: var(--muted); background: var(--surface-3);
}
.bonus.ready .cta { color: var(--green-ink); background: linear-gradient(135deg,#6ff0bb,#36d89a); }

.hist { display: flex; flex-direction: column; }
.hist .h {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center;
    gap: 11px; padding: 10px 2px; border-top: 1px solid rgba(255,255,255,.06);
}
.hist .h:first-child { border-top: 0; }
.hist.lined .h { padding: 11px 2px; gap: 12px; }
.hist .tile { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.hist b { display: block; font-size: 12.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist small { display: block; margin-top: 1px; color: var(--faint); font-size: 10.5px; font-weight: 700; }
.hist .amt { justify-self: end; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--green); white-space: nowrap; }
.hist .amt.neg { color: var(--muted); }

.nearby { display: flex; flex-direction: column; gap: 6px; }
.nearby .n {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center;
    gap: 10px; padding: 9px 12px; border-radius: 13px;
    background: rgba(255,255,255,.035);
}
.nearby .ava { width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, var(--c1), #4d8dff); }
.nearby b { min-width: 0; font-size: 12.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nearby .cells { color: var(--faint); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.nearby .res { justify-self: end; min-width: 58px; text-align: right; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold); }
.nearby .res.win { color: var(--green); }

.nudge {
    display: flex; align-items: center; gap: 11px; padding: 14px; border-radius: var(--r-md);
    background: var(--green-soft); border: 1px solid var(--green-line);
}
.nudge .ic {
    width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--r-2xs);
    background: rgba(54,216,154,.16); color: var(--green); font-size: 16px; font-weight: 800;
}
.nudge b { display: block; font-size: 12.5px; font-weight: 800; color: var(--mint); }
.nudge small { display: block; color: var(--mint-2); font-size: 11px; font-weight: 700; }

.rounds { display: flex; flex-direction: column; gap: 6px; }
.rounds .r {
    position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center; gap: 11px; padding: 8px 12px 8px 8px; border-radius: 13px;
    background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.05);
    transition: background .18s, border-color .18s, transform .18s;
}
.rounds .r.win {
    background: linear-gradient(90deg, rgba(54,216,154,.10), rgba(54,216,154,.015) 55%, rgba(255,255,255,.02));
    border-color: rgba(54,216,154,.14);
}
@media (hover: hover) {
    .rounds .r:hover { background-color: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); transform: translateX(2px); }
    .rounds .r.win:hover { border-color: rgba(54,216,154,.28); }
}
.rounds .m {
    height: 34px; display: grid; place-items: center; border-radius: 10px;
    font-size: 11.5px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
    color: var(--faint); background: rgba(255,255,255,.045);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.rounds .r.win .m {
    color: #eafff5;
    background: linear-gradient(160deg, rgba(111,240,187,.34), rgba(34,180,127,.2));
    box-shadow: inset 0 0 0 1px rgba(111,240,187,.35), inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px -4px rgba(54,216,154,.55);
    text-shadow: 0 1px 6px rgba(54,216,154,.5);
}
.rounds .rmid { min-width: 0; }
.rounds .a { display: block; font-size: 14px; line-height: 1.15; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--muted); letter-spacing: -.01em; }
.rounds .r.win .a { color: var(--green); }
.rounds .b { display: block; margin-top: 3px; color: var(--faint-2); font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rounds .rside { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; }
.rounds .rt { color: var(--faint); font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rounds .id {
    color: var(--faint-2); font-size: 9.5px; font-weight: 800; white-space: nowrap;
    font-variant-numeric: tabular-nums; letter-spacing: .02em; opacity: .7;
}
.rounds .r.fresh { animation: rnd-in .45s cubic-bezier(.2,.9,.3,1.2); }
.rounds .r.fresh.win::after {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 1px rgba(111,240,187,.55), 0 0 18px rgba(54,216,154,.35);
    animation: rnd-glow 1.4s ease-out forwards;
}
@keyframes rnd-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rnd-glow { to { opacity: 0; } }
.rounds-empty {
    padding: 22px 12px; border-radius: 13px; border: 1px dashed rgba(255,255,255,.1);
    color: var(--faint); font-size: 12px; font-weight: 700; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    .rounds .r, .rounds .r.fresh, .rounds .r.fresh.win::after { animation: none; transition: none; }
}

.stats-list { display: flex; flex-direction: column; gap: 8px; }
.stats-list .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats-list .s {
    min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 11px 12px 12px;
    border-radius: 13px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.055);
}
.stats-list .s span {
    min-width: 0; color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stats-list .s b { font-size: 17px; line-height: 1.1; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-list .s.win { background: linear-gradient(160deg, rgba(54,216,154,.1), rgba(54,216,154,.02)); border-color: rgba(54,216,154,.16); }
.stats-list .s.win b { color: var(--green); }
.stats-list .s.gold { background: linear-gradient(160deg, rgba(247,201,75,.1), rgba(247,201,75,.02)); border-color: rgba(247,201,75,.16); }
.stats-list .s.gold b { color: var(--gold-text); }

.stat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.stat-tiles .t { padding: 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.stat-tiles .t .cap { display: block; font-size: 9px; margin-bottom: 7px; }
.stat-tiles .t b { display: block; font-family: var(--f-display); font-size: min(19px, 14cqw); font-weight: 700; letter-spacing: -.035em; white-space: nowrap; }

.stat-tiles .t { container-type: inline-size; }

.p-hero {
    position: relative; overflow: hidden; padding: 24px; border-radius: var(--r-xl);
    border: 1px solid rgba(255,255,255,.11);
    background: radial-gradient(700px 380px at 88% 4%, rgba(59,124,246,.26), transparent 66%),
                linear-gradient(150deg,#1a1d2e,#10131e);
}
.p-hero .head { display: flex; align-items: center; gap: 17px; margin-bottom: 20px; }
.p-hero .name { display: block; font-family: var(--f-display); font-size: 26px; font-weight: 700; letter-spacing: -.04em; margin-bottom: 7px; }
.p-hero .streak-box { text-align: right; }
.p-hero .streak-box .cap { display: block; margin-bottom: 5px; }
.p-hero .streak-box strong { font-family: var(--f-display); font-size: 22px; font-weight: 700; }
.p-hero .foot { display: flex; align-items: center; gap: 10px; }
.p-hero .foot small { font-size: 12px; font-weight: 700; }

.ref-card {
    padding: 19px; border-radius: var(--r); border: 1px solid var(--cyan-line);
    background: radial-gradient(500px 280px at 90% 6%, rgba(55,215,242,.2), transparent 70%),
                linear-gradient(150deg,#13202b,#10131e);
}
.ref-card h3 { font-size: 16px; margin-bottom: 7px; }
.ref-card p { color: var(--dim); font-size: 12px; line-height: 1.55; margin-bottom: 15px; }
.ref-row { display: flex; gap: 9px; }
.ref-row .link {
    flex: 1; min-width: 0; display: flex; align-items: center; min-height: 48px; padding: 0 14px;
    border-radius: var(--r-sm); background: rgba(255,255,255,.05); border: 1px solid var(--line-2);
    color: var(--dim); font-size: 12px; font-weight: 700;
}

.empty {
    min-height: 120px; display: grid; place-items: center; border-radius: var(--r-sm);
    border: 1px dashed var(--line-2); color: var(--faint); font-size: 12px; font-weight: 700; text-align: center; padding: 16px;
}

.prose { max-width: 780px; color: var(--dim); font-size: 14px; line-height: 1.75; }
.prose h1 { font-size: 26px; color: var(--text); margin-bottom: 14px; }
.prose h2 { font-size: 18px; color: var(--text); margin: 28px 0 10px; }
.prose p { margin-bottom: 14px; }
.prose ul { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); }
.prose a { color: var(--lilac); }

@media (max-width: 1180px) {
    .stat-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1040px) {
    .resume { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {

    .card { padding: 15px; border-radius: var(--r); }
    .card.lg { padding: 15px; }
    .card-h h2, .card-h h3, .card > h3 { font-size: 15px; }

    .ticker { min-height: 44px; padding: 6px 8px 6px 12px; gap: 11px; }
    .ticker .live { font-size: 9px; gap: 7px; }
    .ticker .row > .e { margin-right: 8px; }
    .ticker .e { min-height: 32px; padding: 4px 11px; gap: 7px; border-radius: 10px; font-size: 10px; }

    .wm-title { font-size: 25px; }
    .wm-actions .btn { min-height: 50px; font-size: 14px; }
    .wm-goals { padding: 10px; border-radius: 18px; }
    .wm-sub small { display: none; }

    .wb-goal { padding: 10px 12px; gap: 6px 10px; }
    .wb-goal .ic { width: 32px; height: 32px; border-radius: 10px; }
    .wb-goal .gtx b { font-size: 12.5px; }
    .wb-goal .gnum { font-size: 19px; }
    .wb-goal .gpips i { max-width: 26px; }

    .quest { padding: 11px 12px; }
    .quest + .quest { margin-top: 9px; }
    .quest .ic { width: 32px; height: 32px; font-size: 14px; }
    .quest b { font-size: 12px; }
    .quest small { font-size: 10px; }
    .quest .rew { padding: 5px 9px; font-size: 10px; }

    .resume {
        display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
        margin: 0 calc(var(--pad-x) * -1); padding: 0 var(--pad-x) 4px;
    }
    .resume::-webkit-scrollbar { display: none; }
    .resume a { flex: 0 0 auto; width: 186px; flex-direction: column; align-items: stretch; gap: 10px; padding: 11px; border-radius: var(--r-md); }
    .resume a .who { display: flex; align-items: center; gap: 9px; }
    .resume .tile { width: 38px; height: 38px; border-radius: 12px; }
    .resume b { font-size: 13px; white-space: nowrap; }
    .resume small { font-size: 10px; }
    .resume .go { min-height: 36px; border-radius: var(--r-2xs); font-size: 11px; }

    .filters {
        overflow-x: auto; scrollbar-width: none;
        margin: 0 calc(var(--pad-x) * -1); padding: 0 var(--pad-x) 12px;
    }
    .filters::-webkit-scrollbar { display: none; }
    .filters button { min-height: 36px; padding: 0 13px; font-size: 11px; }

    .games { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    .game { --r-card: 20px; }
    .game .badge, .game .online, .game .mult { height: 19px; font-size: 9px; padding: 0 7px; }
    .game .badge, .game .online { top: 8px; }
    .game .badge { left: 8px; }
    .game .online { right: 8px; }
    .game .mult { left: 8px; bottom: 8px; }
    .game .g-body { padding: 11px 12px 13px; }
    .game .g-body h3 { font-size: 14px; padding-right: 44px; }
    .game .g-desc { margin-top: 4px; min-height: 27px; font-size: 10px; }
    .game .g-chips { margin-top: 8px; gap: 5px; }
    .game .chip { height: 20px; padding: 0 8px; font-size: 10px; }
    .game .g-play { width: 38px; height: 38px; right: 10px; top: -19px; border-width: 3px; }
    .game .g-play svg { width: 12px; height: 12px; }

    .level { padding: 14px; gap: 12px; border-radius: 20px; }
    .ring { width: 52px; height: 52px; }
    .ring b { width: 40px; height: 40px; font-size: 12px; }
    .ring.lg { width: 70px; height: 70px; }
    .ring.lg b { width: 58px; height: 58px; font-size: 22px; }

    .bonus { padding: 11px; gap: 10px; border-radius: var(--r-sm); }
    .bonus + .bonus { margin-top: 8px; }
    .bonus .ic { width: 34px; height: 34px; border-radius: var(--r-2xs); font-size: 15px; }
    .bonus b { font-size: 12px; }
    .bonus small { font-size: 10px; }
    .bonus .cta { padding: 7px 11px; border-radius: var(--r-2xs); font-size: 11px; }

    .hist .h { padding: 11px 10px; border-radius: 14px; gap: 10px; }
    .hist.lined .h { border-top: 0; }
    .hist .tile { width: 34px; height: 34px; border-radius: var(--r-2xs); }
    .hist b { font-size: 12px; }
    .hist small { font-size: 10px; }
    .hist .amt { font-size: 12px; }

    .nearby .n { padding: 9px 11px; gap: 9px; }
    .nearby .ava { width: 28px; height: 28px; border-radius: 9px; }
    .nearby b, .nearby .res { font-size: 12px; }
    .nearby .cells { font-size: 10px; }

    .nudge { padding: 11px 12px; gap: 9px; border-radius: var(--r-sm); }
    .nudge .ic { width: 30px; height: 30px; border-radius: 10px; font-size: 14px; }
    .nudge b { font-size: 12px; }
    .nudge small { font-size: 10px; }

    .stat-tiles { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
    .stat-tiles .t { padding: 12px; border-radius: 17px; }
    .stat-tiles .t .cap { font-size: 8px; margin-bottom: 5px; }
    .stat-tiles .t b { font-size: min(17px, 14cqw); }

    .p-screen { display: flex; flex-direction: column; gap: 14px; }
    .p-screen > .col { display: contents; }
    .p-hero    { order: 1; padding: 17px; border-radius: var(--r-lg); }
    .p-stats   { order: 2; }
    .p-bonuses { order: 3; }
    .p-ref     { order: 4; }
    .p-history { order: 5; }
    .p-quests  { order: 6; }
    .p-legal   { order: 7; }
    .p-hero .head { gap: 13px; margin-bottom: 15px; }
    .p-hero .name { font-size: 19px; letter-spacing: -.035em; margin-bottom: 4px; }
    .p-hero .streak-box { display: none; }
    .p-hero .foot small { font-size: 11px; }
    .ref-card { padding: 15px; }
    .ref-card h3 { font-size: 15px; margin-bottom: 6px; }
    .ref-card p { font-size: 11px; margin-bottom: 13px; }
    .ref-row .link { min-height: 46px; border-radius: 14px; font-size: 11px; }
    .ref-row .btn { min-height: 46px !important; border-radius: 14px !important; }
}

.mdl.mdl-wallet { width: min(580px, calc(100vw - 32px)); }

.mdl-wallet .mdl-scroll {
    flex: 1; min-height: 0; border-radius: inherit;
    padding: 0; overflow: hidden;
    display: flex; scrollbar-gutter: auto;
}
.pw { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.pw-head {
    flex: none;
    display: flex; align-items: center; gap: 12px;
    padding: 17px 56px 15px 20px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(77,141,255,.1), transparent);
}
.pw-head .ic {
    flex: none; width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: var(--r-xs); color: var(--lilac-2);
    background: var(--acc-soft); border: 1px solid var(--acc-line);
}
.pw-head .tx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pw-head .tx b { font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: -.035em; }
.pw-head .tx small {
    color: var(--faint); font-size: 11px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pw-head .bal { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pw-head .bal small {
    color: var(--faint); font-size: 8.5px; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; line-height: 1;
}
.pw-head .bal b {
    font-family: var(--f-display); font-size: 15px; font-weight: 700;
    letter-spacing: -.035em; white-space: nowrap;
}

.pw-tabs {
    flex: none; display: flex; gap: 4px; margin: 12px 20px 0; padding: 4px;
    border-radius: var(--r-sm); background: rgba(255,255,255,.035);
    box-shadow: inset 0 0 0 1px var(--line);
}
.pw-tabs button {
    flex: 1; min-height: 38px; border-radius: 12px;
    font-size: 12.5px; font-weight: 800; color: var(--muted);
    transition: color .18s, background .18s, box-shadow .18s;
}
.pw-tabs button:hover { color: var(--text); background: var(--surface-2); }
.pw-tabs button.on {
    color: #fff; background: var(--acc-soft-2);
    box-shadow: inset 0 0 0 1px var(--acc-line-2), 0 6px 16px -10px rgba(77,141,255,.9);
}

.pw-body {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 15px 20px 20px;
}

.pm-cap {
    display: flex; align-items: center; gap: 7px;
    margin: 14px 2px 8px;
    color: var(--faint); font-size: 10px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
}
.pm-cap:first-child { margin-top: 2px; }
.pm-cap i {
    font-style: normal; letter-spacing: 0; color: var(--dim);
    padding: 1px 6px; border-radius: 99px; background: var(--surface-3);
}
.pm-cap::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.pm, .pm-tile, .pm-hero {
    position: relative; overflow: hidden; text-align: left;
    background: var(--panel); border: 1px solid var(--line);
    transition: border-color .18s, background .18s, transform .14s var(--ease);
}
.pm::before, .pm-tile::before, .pm-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 140% at 12% 50%, var(--tone), transparent 62%);
    opacity: 0; transition: opacity .22s;
}
.pm-tile::before { background: radial-gradient(90% 70% at 50% 28%, var(--tone), transparent 70%); }
.pm > *, .pm-tile > *, .pm-hero > * { position: relative; }
.pm:hover, .pm-tile:hover, .pm-hero:hover { border-color: var(--line-3); background: var(--panel-2); }
.pm:hover::before, .pm-tile:hover::before, .pm-hero:hover::before { opacity: .14; }
.pm:active, .pm-tile:active, .pm-hero:active { transform: scale(.98); }
.pm:focus-visible, .pm-tile:focus-visible, .pm-hero:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }

.pm .ic, .pm-tile .ic, .pm-hero .ic, .pw-sub .ic, .pw-chosen .ic {
    flex: none; width: 40px; height: 40px; padding: 0 2px;
    display: grid; place-items: center; border-radius: var(--r-xs);
    font-family: var(--f-display); font-size: 14px; font-weight: 800; letter-spacing: -.04em;
    color: var(--tone, var(--acc));
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -9px 18px -11px var(--tone, var(--acc));
}

.pm .ic.sm, .pm-tile .ic.sm { font-size: 11px; letter-spacing: -.06em; }

.pm .ic.has-img, .pm-tile .ic.has-img, .pm-hero .ic.has-img,
.pw-sub .ic.has-img, .pw-chosen .ic.has-img, .pw-op .ic.has-img {
    display: flex; align-items: center; justify-content: center;
    padding: 4px; overflow: hidden; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-soft);
}
.pm .ic.has-img img, .pm-tile .ic.has-img img, .pm-hero .ic.has-img img,
.pw-sub .ic.has-img img, .pw-chosen .ic.has-img img, .pw-op .ic.has-img img {
    max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; border-radius: 8px;
}
.pw-op .ic.has-img { padding: 3px; }
.pw-op .ic.has-img img { border-radius: 6px; }

.pm-heros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pm-hero {
    display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
    column-gap: 11px; row-gap: 10px; align-items: center;
    padding: 12px; border-radius: var(--r-sm);
    background: linear-gradient(160deg, rgba(255,255,255,.045), transparent 60%), var(--panel);
}
.pm-hero .ic { width: 42px; height: 42px; }
.pm-hero .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-hero .tx b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-hero .tx small { color: var(--faint); font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-hero .pm-stack { grid-column: 1 / -1; grid-row: 2; }
.pm-hero .go { grid-column: 3; grid-row: 1; }

.pm-heros.is-col { grid-template-columns: minmax(0, 1fr); }
.pm-heros.is-col .pm-hero:not(.is-paused) { grid-template-columns: auto auto 1fr auto; grid-template-rows: auto; }
.pm-heros.is-col .pm-hero:not(.is-paused) .pm-stack { grid-column: 3; grid-row: 1; justify-content: flex-end; }
.pm-heros.is-col .pm-hero:not(.is-paused) .go { grid-column: 4; }

.pm-hero.is-paused { cursor: default; border-color: rgba(240,166,44,.32); }
.pm-hero.is-paused:hover { border-color: rgba(240,166,44,.32); background: linear-gradient(160deg, rgba(255,255,255,.045), transparent 60%), var(--panel); }
.pm-hero.is-paused:hover::before { opacity: 0; }
.pm-hero.is-paused:active { transform: none; }
.pm-hero.is-paused .ic { filter: grayscale(1); opacity: .6; }
.pm-hero.is-paused .tx small { color: #f0a62c; }
.pm-hero.is-paused .note {
    grid-column: 1 / -1; grid-row: 2; margin: 0;
    color: var(--dim); font-size: 11.5px; font-weight: 600; line-height: 1.4;
}

.pm-stack { display: flex; align-items: center; gap: 4px; }
.pm-stack i {
    width: 24px; height: 24px; flex: none; padding: 2px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    border-radius: 7px; background: var(--surface-3);
    box-shadow: inset 0 0 0 1px var(--line-soft);
    font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--dim);
}
.pm-stack img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; border-radius: 5px; }
.pm-stack .more { padding: 0 5px; width: auto; min-width: 24px; }

.pm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.pm-tile {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 6px 8px; border-radius: var(--r-sm); text-align: center;
}
.pm-tile .ic { width: 40px; height: 40px; margin-bottom: 4px; }
.pm-tile b {
    max-width: 100%; font-size: 12px; font-weight: 800;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-tile small { color: var(--faint); font-size: 10px; font-weight: 700; white-space: nowrap; }
.pm-tile .cnt {
    position: absolute; top: 6px; right: 6px;
    min-width: 17px; height: 17px; padding: 0 5px;
    display: grid; place-items: center; border-radius: 99px;
    color: var(--dim); background: var(--surface-3);
    font-size: 9.5px; font-weight: 800;
}

.pm-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pm {
    display: flex; align-items: center; gap: 10px;
    min-height: 50px; padding: 7px 10px 7px 7px; border-radius: 13px;
}
.pm .ic { width: 34px; height: 34px; border-radius: 10px; }
.pm .ic.has-img { padding: 3px; }
.pm .ic.has-img img { border-radius: 7px; }
.pm .tx { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pm .tx b { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm .tx small {
    color: var(--faint); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm .tag {
    flex: none; padding: 2px 6px; border-radius: 7px;
    font-size: 9.5px; font-weight: 800; color: var(--dim); background: var(--surface-3);
}
.pm .tag.tg { color: #5fccff; background: rgba(95,204,255,.12); }

.pm .go, .pm-hero .go { flex: none; display: flex; color: var(--dead); transform: scaleX(-1); transition: color .18s, transform .18s var(--ease); }
.pm:hover .go, .pm-hero:hover .go { color: var(--lilac); transform: scaleX(-1) translateX(2px); }

.pw-sub, .pw-chosen {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 12px; border-radius: var(--r-sm);
    background: var(--panel); border: 1px solid var(--line);
}
.pw-sub { gap: 10px; padding: 7px 7px 7px 7px; margin-bottom: 4px; }
.pw-sub .ic { width: 34px; height: 34px; border-radius: 10px; }
.pw-sub .ic.has-img { padding: 3px; }
.pw-sub .ic.has-img img { border-radius: 7px; }
.pw-chosen { margin-bottom: 14px; }
.pw-sub .back {
    flex: none; width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 10px; color: var(--dim);
    background: var(--surface-2); border: 1px solid var(--line-2);
    transition: color .18s, background .18s;
}
.pw-sub .back:hover { color: #fff; background: var(--surface-4); }
.pw-sub .tx, .pw-chosen .tx { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pw-sub .tx { gap: 1px; }
.pw-sub .tx b, .pw-chosen .tx b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-sub .tx small, .pw-chosen .tx small { color: var(--faint); font-size: 10.5px; font-weight: 700; line-height: 1.35; }
.pw-chosen .btn { flex: none; }

.pw-search {
    flex: 0 1 200px; min-width: 0;
    display: flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 11px;
    border-radius: 10px; color: var(--faint);
    background: rgba(255,255,255,.04); border: 1px solid var(--line);
    transition: border-color .18s, background .18s, flex-basis .22s var(--ease);
    cursor: text;
}
.pw-search svg { flex: none; }
.pw-search:focus-within { flex-basis: 260px; border-color: var(--acc-line-2); background: rgba(255,255,255,.06); color: var(--lilac-2); }
.pw-search input {
    flex: 1; min-width: 0; width: 100%; border: 0; background: none; outline: none;
    font-size: 12.5px; font-weight: 700; color: var(--text);
}
.pw-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.pw-search input::placeholder { color: var(--faint-2); font-weight: 600; }

.pw-addr {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px; padding: 10px 10px 10px 14px; border-radius: var(--r-sm);
    background: var(--panel); border: 1px solid var(--line);
}
.pw-addr.tag { border-color: rgba(240,166,44,.35); background: rgba(240,166,44,.06); }
.pw-addr-f { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pw-addr-f .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px; font-weight: 700; letter-spacing: .01em; line-height: 1.35;
    word-break: break-all; color: var(--text);
}
.pw-addr-cp {
    flex: none; width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 11px; color: var(--dim);
    background: var(--surface-2); border: 1px solid var(--line-2);
    transition: color .18s, background .18s, transform .14s var(--ease);
}
.pw-addr-cp:hover { color: #fff; background: var(--surface-4); }
.pw-addr-cp:active { transform: scale(.94); }
.pw-qr {
    aspect-ratio: 1; padding: 10px; border-radius: var(--r-sm); background: #fff;
    display: grid; place-items: center;
}
.pw-qr svg { width: 100%; height: 100%; display: block; }

.cx-min {
    position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 13px;
    margin-bottom: 12px; padding: 14px 16px 14px 14px; border-radius: 16px;
    background:
        radial-gradient(130% 150% at 0% 0%, rgba(255,90,115,.22), transparent 58%),
        linear-gradient(180deg, rgba(255,90,115,.1), rgba(255,90,115,.04));
    box-shadow: inset 0 0 0 1px rgba(255,110,130,.34), 0 14px 30px -20px rgba(255,70,100,.8);
}
.cx-min::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
    border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #ff9aae, #ff4f70);
    box-shadow: 0 0 12px rgba(255,80,110,.8);
}
.cx-min-ic {
    flex: none; width: 42px; height: 42px; margin-left: 4px; display: grid; place-items: center;
    border-radius: 13px; color: #ff8aa0;
    background: linear-gradient(160deg, rgba(255,110,135,.26), rgba(255,70,100,.08));
    box-shadow: inset 0 0 0 1px rgba(255,130,150,.34), 0 0 20px -6px rgba(255,80,110,.9);
}
.cx-min-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cx-min-tx .cap { color: #ffb3c1; }
.cx-min-tx > b {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
    font-family: var(--f-display); font-size: 24px; line-height: 1.1; letter-spacing: -.03em;
    color: #fff; font-variant-numeric: tabular-nums;
}
.cx-min-tx > b small { font-family: inherit; font-size: 13px; color: #ffc2cd; letter-spacing: -.01em; }
.cx-min-tx p { margin: 4px 0 0; color: rgba(255,225,231,.8); font-size: 12px; font-weight: 600; line-height: 1.45; }
.cx-min-tx strong { color: #fff; font-weight: 800; }

.cx-sec {
    margin-bottom: 10px; padding: 12px; border-radius: 16px;
    background: var(--panel); border: 1px solid var(--line);
}
.cx-step { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.cx-step i {
    flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
    font-style: normal; font-size: 11.5px; font-weight: 900; color: #fff;
    background: var(--acc-grad); box-shadow: var(--acc-sh);
}
.cx-step b { color: #ff9aae; white-space: nowrap; }
.cx-sec .pw-addr { margin: 10px 0 0; }

.cx-addr { display: grid; grid-template-columns: 148px 1fr; gap: 14px; align-items: center; }
.cx-addr .pw-qr { padding: 8px; box-shadow: 0 10px 26px -14px rgba(0,0,0,.8); }
.cx-addr-r { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cx-addr-r .cap { display: flex; align-items: center; gap: 7px; }
.cx-net {
    padding: 2px 7px; border-radius: 999px; font-size: 9.5px; letter-spacing: .04em;
    color: var(--lilac-2); background: var(--acc-soft); box-shadow: inset 0 0 0 1px var(--acc-line);
}
.cx-addr-r .mono {
    align-self: stretch; padding: 9px 11px; border-radius: 11px;
    background: var(--panel-4); border: 1px solid var(--line);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .02em;
    word-break: break-all; color: var(--dim);
}
.cx-addr-r .mono em { font-style: normal; font-weight: 800; color: #fff; }
.cx-addr-r small { color: var(--faint); font-size: 10.5px; font-weight: 700; line-height: 1.35; }
.cx-cp { gap: 7px; }

.cx-calc { display: flex; flex-direction: column; gap: 8px; }
.cx-calc-in { display: flex; flex-direction: column; gap: 5px; cursor: text; }
.cx-calc-f {
    display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 46px; border-radius: 12px;
    background: var(--panel-4); border: 1px solid var(--line-2);
    transition: border-color .18s, background .18s;
}
.cx-calc-f:focus-within { border-color: var(--acc-line-2); background: rgba(255,255,255,.05); }
.cx-calc-f input {
    flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text);
    font-family: var(--f-display); font-size: 18px; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.cx-calc-f input::placeholder { color: var(--dead); }
.cx-calc-f em { font-style: normal; font-weight: 800; color: var(--faint); }
.cx-calc-q { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-calc-q button {
    flex: 1 1 0; min-width: 64px; height: 32px; padding: 0 8px; border-radius: 10px;
    font-size: 11.5px; font-weight: 800; color: var(--dim); white-space: nowrap;
    background: var(--surface-2); border: 1px solid var(--line-2);
    transition: color .18s, background .18s, border-color .18s;
}
.cx-calc-q button:hover { color: #fff; background: var(--surface-4); }
.cx-calc-q button.on { color: #fff; background: var(--acc-soft); border-color: var(--acc-line-2); }
.cx-calc-out {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    padding: 10px 12px; border-radius: 12px; min-height: 44px;
    background: var(--surface); border: 1px dashed var(--line-2);
    font-size: 12px; font-weight: 600; color: var(--faint);
}
.cx-calc-out b { font-size: 14.5px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.cx-calc-out span { flex-basis: 100%; line-height: 1.4; }
.cx-calc-out.is-ok { border: 1px solid var(--green-line); background: var(--green-soft); color: var(--mint-2); }
.cx-calc-out.is-ok b { color: var(--mint); }
.cx-calc-out.is-low { border: 1px solid rgba(255,110,130,.4); background: rgba(255,90,115,.09); color: #ffb3c1; }
.cx-calc-out.is-low b { color: #ff8aa0; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.cx-calc-out.is-low strong { color: #fff; }
.cx-calc-cp {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 8px;
    font-size: 11px; font-weight: 800; color: var(--mint);
    background: rgba(54,216,154,.12); border: 1px solid var(--green-line);
}
.cx-calc-cp:hover { background: rgba(54,216,154,.2); }

.cx-net-warn {
    display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; padding: 9px 11px; border-radius: 12px;
    color: rgba(255,236,204,.8); font-size: 12px; font-weight: 600; line-height: 1.45;
    background: rgba(255,184,77,.07); box-shadow: inset 0 0 0 1px rgba(255,184,77,.22);
}
.cx-net-warn i { flex: none; margin-top: 1px; color: #ffc861; display: grid; }
.cx-net-warn b { color: #ffe2ad; font-weight: 800; }

.cx-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cx-facts li {
    position: relative; padding-left: 20px; color: var(--dim); font-size: 12px; font-weight: 600; line-height: 1.45;
}
.cx-facts li::before {
    content: ""; position: absolute; left: 2px; top: 4px; width: 9px; height: 5px;
    border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg);
}
.cx-sec + .btn { margin-top: 4px; gap: 8px; }
.pw-empty .btn { display: block; margin: 10px auto 0; }

.pw-amount {
    padding: 12px 15px 10px; border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(77,141,255,.1), rgba(255,255,255,.02));
    box-shadow: inset 0 0 0 1px var(--acc-line);
    transition: background .2s, box-shadow .2s;
    cursor: text;
}
.pw-amount:focus-within { box-shadow: inset 0 0 0 1px var(--acc); }
.pw-amount .cap { display: block; margin-bottom: 3px; }

.pw-amount .fld { display: flex; align-items: baseline; gap: 7px; }
.pw-amount input {
    flex: 0 1 auto; min-width: 1.2em; width: auto; max-width: 100%; field-sizing: content;
    border: 0; background: none; outline: none;
    font-family: var(--f-display); font-size: 30px; font-weight: 700;
    letter-spacing: -.045em; color: #fff;
}
.pw-amount .cur {
    flex: none; font-style: normal; font-family: var(--f-display);
    font-size: 21px; font-weight: 700; color: var(--faint);
}

.pw-amount .pw-hint {
    display: block; min-height: 15px; margin-top: 3px; text-align: left;
    font-style: normal; font-size: 11px; font-weight: 700; color: var(--pink);
}
.pw-amount.bad {
    background: linear-gradient(180deg, rgba(255,102,133,.1), rgba(255,255,255,.02));
    box-shadow: inset 0 0 0 1px rgba(255,102,133,.42);
}

.pw-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 9px 0 14px; }
.pw-quick button {
    min-height: 38px; border-radius: 12px; white-space: nowrap;
    font-size: 11.5px; font-weight: 800; color: var(--dim);
    background: var(--surface-2); border: 1px solid var(--line);
    transition: color .16s, background .16s, border-color .16s, transform .14s var(--ease);
}
.pw-quick button:hover { color: #fff; background: var(--surface-4); transform: translateY(-1px); }
.pw-quick button.on { color: #fff; background: var(--acc-soft-2); border-color: var(--acc-line-2); }

.pw-sumup {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 15px; border-radius: var(--r-md);
    background: var(--panel); border: 1px solid var(--line);
}
.pw-sumup .big { flex: none; display: flex; flex-direction: column; gap: 3px; }
.pw-sumup .big small {
    color: var(--faint); font-size: 9px; font-weight: 800;
    letter-spacing: .11em; text-transform: uppercase; line-height: 1;
}
.pw-sumup .big b {
    font-family: var(--f-display); font-size: 21px; font-weight: 700;
    letter-spacing: -.045em; color: var(--green); white-space: nowrap;
}
.pw-sumup .rows {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px;
    padding-left: 14px; border-left: 1px solid var(--line);
}
.pw-sumup .rows i { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-style: normal; }
.pw-sumup .rows em { font-style: normal; color: var(--faint); font-size: 11px; font-weight: 700; }
.pw-sumup .rows b { font-size: 11.5px; font-weight: 800; white-space: nowrap; }

.pw-sumup.off { opacity: .4; }
.pw-sumup.off .big b { color: var(--dim); }

.pw-bonus {
    display: flex; align-items: center; gap: 11px; margin-top: 10px;
    padding: 11px 12px; border-radius: var(--r-sm);
    background: rgba(247,201,75,.07); border: 1px dashed var(--gold-line);
    transition: background .2s, border-color .2s;
}
.pw-bonus .ic {
    flex: none; width: 36px; height: 36px; display: grid; place-items: center;
    border-radius: 11px; color: var(--gold); background: var(--gold-soft-2);
}
.pw-bonus .tx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pw-bonus .tx b { font-size: 12px; font-weight: 800; color: var(--gold-text); }
.pw-bonus .tx small { color: var(--gold-warm); font-size: 10.5px; font-weight: 700; line-height: 1.35; }
.pw-bonus .tag {
    flex: none; padding: 4px 8px; border-radius: 999px;
    color: var(--gold-ink); background: var(--gold-grad);
    font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

.pw-bonus.on { background: var(--gold-soft-2); border-style: solid; border-color: rgba(247,201,75,.45); }

.pw-bonus.got {
    position: relative; overflow: hidden; border-style: solid;
    border-color: rgba(52,211,153,.42);
    background: linear-gradient(100deg, rgba(52,211,153,.16), rgba(52,211,153,.05) 60%, rgba(247,201,75,.08));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 22px -12px rgba(52,211,153,.55);
}
.pw-bonus.got::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.10) 50%, transparent 70%);
    transform: translateX(-100%); animation: pwGotShine 3.6s ease-in-out 0.4s infinite;
}
@keyframes pwGotShine { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
.pw-bonus.got .ic {
    color: #062b1d; background: linear-gradient(135deg, #6ee7b7, #34d399);
    box-shadow: 0 0 0 4px rgba(52,211,153,.14), 0 4px 14px -4px rgba(52,211,153,.7);
}
.pw-bonus.got .tx b { color: #a7f3d0; }
.pw-bonus.got .tx small { color: rgba(167,243,208,.72); }
.pw-bonus.got .tag {
    display: inline-flex; align-items: center; gap: 4px;
    color: #062b1d; background: linear-gradient(135deg, #6ee7b7, #34d399);
}
.pw-bonus.got .tag svg { stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .pw-bonus.got::after { animation: none; display: none; } }

.pw-go { margin-top: 14px; }
.pw-foot { margin-top: 12px; text-align: center; font-size: 11px; font-weight: 700; color: var(--faint); line-height: 1.5; }
.pw-foot a { color: var(--lilac); border-bottom: 1px solid rgba(169,204,255,.3); }
.pw-foot a:hover { color: #fff; }
.pw-foot span { display: block; margin-top: 3px; color: var(--faint-2); font-size: 10px; }

.pw-switch {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 14px; padding: 4px;
    border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.pw-switch button {
    min-height: 34px; padding: 0 14px; border-radius: 10px;
    font-size: 12px; font-weight: 800; color: var(--muted); background: transparent; border: 1px solid transparent;
    transition: color .16s, background .16s, border-color .16s;
}
.pw-switch button:hover { color: #fff; }
.pw-switch button.on { color: #fff; background: var(--acc-soft-2); border-color: var(--acc-line-2); box-shadow: 0 4px 14px rgba(0,0,0,.25); }

.pw-day {
    display: flex; align-items: center; gap: 10px; margin: 6px 2px 2px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.pw-day::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.pw-day:first-child { margin-top: 0; }

.pw-ops { display: flex; flex-direction: column; gap: 8px; }
.pw-op {
    border-radius: 16px; border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--panel);
    transition: border-color .18s, background .18s, transform .18s var(--ease), box-shadow .18s;
}
.pw-op:hover { border-color: var(--line-2); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.22); }

.pw-op-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; border-radius: inherit; }
.pw-op-row:focus-visible { outline: 2px solid var(--acc-line-2); outline-offset: -2px; }
.pw-op .chev {
    flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px;
    color: var(--faint); background: rgba(255,255,255,.04); transform: rotate(-90deg);
    transition: transform .2s var(--ease), color .16s, background .16s;
}
.pw-op-row:hover .chev { color: #fff; background: rgba(255,255,255,.08); }
.pw-op.open { border-color: var(--line-3); background: var(--surface); transform: none; }
.pw-op.open .chev { transform: rotate(90deg); }

.pw-why {
    display: flex; align-items: flex-start; gap: 8px; margin: -2px 14px 12px 64px; padding: 9px 12px;
    border-radius: 12px; font-size: 11.5px; font-weight: 600; line-height: 1.45; color: #ffd0da;
    background: linear-gradient(180deg, rgba(255,102,133,.13), rgba(255,102,133,.06));
    box-shadow: inset 0 0 0 1px rgba(255,102,133,.26);
}
.pw-why svg { flex: none; margin-top: 1px; color: var(--pink); }
.pw-why b { color: #fff; font-weight: 800; }

.pw-why--burn {
    color: #ffe6b8;
    background: linear-gradient(180deg, rgba(255,190,70,.12), rgba(255,190,70,.05));
    box-shadow: inset 0 0 0 1px rgba(255,190,70,.26);
}
.pw-why--burn svg { color: var(--gold); }

.pw-det {
    margin: 0 14px 14px; padding: 4px 12px; border-radius: 12px;
    background: rgba(0,0,0,.18); border: 1px solid var(--line-soft); animation: pwDet .22s var(--ease);
}
@keyframes pwDet { from { opacity: 0; transform: translateY(-4px); } }
.pw-det > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 11.5px; }
.pw-det > div + div { border-top: 1px solid var(--line-soft); }
.pw-det dt { color: var(--faint); font-weight: 700; }
.pw-det dd { margin: 0; color: var(--text); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; word-break: break-word; }

.pw-op .ic {
    flex: none; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 12px; color: var(--dim); background: var(--surface-2);
}
.pw-op.ok   .ic { color: var(--green); background: var(--green-soft-2); }
.pw-op.no   .ic { color: var(--pink);  background: rgba(255,102,133,.12); }
.pw-op.wait .ic { color: var(--gold);  background: var(--gold-soft-2); }
.pw-op .tx { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pw-op .tx b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-op .tx small { color: var(--faint); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pw-op .am { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pw-op .am b {
    font-family: var(--f-display); font-size: 15px; font-weight: 700;
    letter-spacing: -.035em; white-space: nowrap;
}
.pw-op.in.ok .am b { color: var(--green); }
.pw-op.no .am b, .pw-op.wait .am b { color: var(--dim); }
.pw-op.no .am b { text-decoration: line-through; text-decoration-thickness: 1.5px; }

.pw-op .am .pw-st {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 7px; border-radius: 999px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--faint); background: rgba(255,255,255,.05);
}
.pw-op .am .pw-st::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pw-op.ok   .am .pw-st { color: var(--mint-2);    background: rgba(80,220,160,.1); }
.pw-op.no   .am .pw-st { color: var(--pink);      background: rgba(255,102,133,.1); }
.pw-op.wait .am .pw-st { color: var(--gold-warm); background: rgba(255,190,70,.1); }
.pw-op.wait .am .pw-st::before { animation: pwPulse 1.4s ease-in-out infinite; }
@keyframes pwPulse { 50% { opacity: .3; } }

.pw-pages { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.pw-pages button {
    width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px;
    color: var(--dim); background: var(--surface-2); border: 1px solid var(--line);
    transition: color .16s, background .16s;
}
.pw-pages button:hover { color: #fff; background: var(--surface-4); }
.pw-pages button[disabled] { opacity: .35; pointer-events: none; }
.pw-pages .next svg { transform: scaleX(-1); }
.pw-pages span { font-size: 11.5px; font-weight: 800; color: var(--faint); }

.pw-empty {
    padding: 30px 16px; text-align: center; border-radius: var(--r-sm);
    color: var(--faint); font-size: 12px; font-weight: 700;
    background: rgba(255,255,255,.02); border: 1px dashed var(--line-2);
}

.pw-tg {
    display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px;
    border-radius: var(--r-xs); background: rgba(42,163,224,.1); border: 1px solid rgba(42,163,224,.3);
    color: var(--text); font-size: 12.5px; font-weight: 700;
}
.pw-tg .tx { flex: 1; }

.pw-cap {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 12px; margin: 12px 0 14px; padding: 12px 14px;
    border-radius: var(--r-md);
    background: linear-gradient(100deg, rgba(247,201,75,.14), rgba(247,201,75,.03) 55%, transparent), var(--panel);
    border: 1px solid rgba(247,201,75,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.pw-cap::before {
    content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
    border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #ffe08a, #f7a64b);
}
.pw-cap-ic {
    flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px;
    color: #ffd36b; background: rgba(247,201,75,.12);
    box-shadow: inset 0 0 0 1px rgba(247,201,75,.32), 0 8px 22px -10px rgba(247,201,75,.75);
}
.pw-cap-ic svg { width: 19px; height: 19px; }
.pw-cap-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pw-cap-t {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.pw-cap-t em {
    font-style: normal; letter-spacing: .04em; color: #1b1305; font-size: 10.5px;
    padding: 3px 9px; border-radius: 99px; background: linear-gradient(180deg, #ffe08a, #f5b942);
}
.pw-cap-tx small { color: var(--dim); font-size: 12.5px; font-weight: 700; line-height: 1.45; }
.pw-cap-tx small b { color: var(--text); white-space: nowrap; }

.pw-lock {
    display: flex; flex-direction: column; gap: 14px;
    padding: 18px; border-radius: var(--r-md);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(247,201,75,.14), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
    border: 1px solid rgba(247,201,75,.2);
}
.pw-lock-top { display: flex; align-items: center; gap: 16px; }
.pw-lock-ring { position: relative; flex: none; width: 76px; height: 76px; display: grid; place-items: center; }
.pw-lock-arc { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pw-lock-arc circle { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 5; }
.pw-lock-arc circle.on {
    stroke: #ffc94a; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(247,201,75,.55));
    transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1);
}
.pw-lock-ic {
    width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
    color: #ffd36b; background: radial-gradient(circle at 50% 30%, rgba(247,201,75,.24), rgba(247,201,75,.06));
    box-shadow: inset 0 0 0 1px rgba(247,201,75,.3), 0 10px 26px -12px rgba(247,201,75,.8);
}
.pw-lock-ic svg { width: 24px; height: 24px; }
.pw-lock-tx { min-width: 0; display: flex; flex-direction: column; }
.pw-lock-t { font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.pw-lock-k { margin-top: 10px; color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pw-lock-v {
    margin-top: 1px; font-family: var(--f-display); font-size: 30px; font-weight: 700; letter-spacing: -.04em; line-height: 1.1;
    color: var(--gold-text); font-variant-numeric: tabular-nums;
}
.pw-lock-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.pw-lock-bar i {
    display: block; min-width: 6px; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #f0a62c, #ffd36b); box-shadow: 0 0 10px rgba(247,201,75,.5);
}
.pw-lock-p {
    display: flex; justify-content: space-between; gap: 10px; margin-top: 7px;
    color: var(--faint); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pw-lock-p b { color: var(--text); }

.pw-wr { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); }
.pw-wr-t { display: block; margin: 0 2px 9px; color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pw-wr-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: .85fr 1fr 1.1fr; gap: 6px; }
.pw-wr-it b { white-space: nowrap; }
.pw-wr-it {
    display: flex; align-items: flex-start; gap: 8px; padding: 9px; border-radius: 10px;
    background: rgba(47,207,115,.06); border: 1px solid rgba(47,207,115,.18);
}
.pw-wr-it.no { background: rgba(255,90,70,.05); border-color: rgba(255,90,70,.18); }
.pw-wr-ic {
    flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%;
    color: #0c2a17; background: linear-gradient(180deg, #6ff0a4, #2fcf73);
}
.pw-wr-it.no .pw-wr-ic { color: #2a0c08; background: linear-gradient(180deg, #ffa79b, #ff6a55); }
.pw-wr-ic svg { width: 10px; height: 10px; }
.pw-wr-it b { display: block; font-size: 12px; font-weight: 800; line-height: 1.25; }
.pw-wr-it small { display: block; margin-top: 2px; color: #6ff0a4; font-size: 10.5px; font-weight: 600; }
.pw-wr-it.no small { color: #ff9b8f; }
.pw-wr-n { margin: 9px 2px 0; color: var(--dim); font-size: 12px; font-weight: 600; line-height: 1.45; }
.pw-wr-n:first-child { margin-top: 0; }
.pw-lock-acts { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.pw-lock-acts .btn { min-height: 46px; }
.pw-lock-acts .btn-soft { padding-inline: 22px; }

.pw-rs {
    border-radius: 14px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
}
.pw-rs.is-ready { border-color: rgba(47,207,115,.28); background: rgba(47,207,115,.04); }
.pw-rs-h {
    display: flex; align-items: center; gap: 11px; padding: 12px 14px; cursor: pointer;
    list-style: none; user-select: none;
}
.pw-rs-h::-webkit-details-marker { display: none; }
.pw-rs-ht { flex: 1; min-width: 0; }
.pw-rs-h b { display: block; font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.pw-rs-h small { display: block; margin-top: 2px; color: var(--faint); font-size: 11.5px; font-weight: 600; line-height: 1.35; }
.pw-rs.is-ready .pw-rs-h small { color: #6ff0a4; }
.pw-rs-hic {
    flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px;
    color: #7fb2ff; background: rgba(90,150,255,.12); box-shadow: inset 0 0 0 1px rgba(90,150,255,.28);
}
.pw-rs.is-ready .pw-rs-hic { color: #6ff0a4; background: rgba(47,207,115,.14); box-shadow: inset 0 0 0 1px rgba(47,207,115,.3); }
.pw-rs-hic svg { width: 16px; height: 16px; }
.pw-rs-chev { flex: none; color: var(--faint); transition: transform .2s; }
.pw-rs-chev svg { display: block; width: 18px; height: 18px; }
.pw-rs[open] .pw-rs-chev { transform: rotate(180deg); }
.pw-rs-h:hover .pw-rs-chev { color: var(--text); }
.pw-rs-list { list-style: none; margin: 0; padding: 0 14px; display: grid; gap: 6px; }
.pw-rs-row {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border-radius: 11px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05);
}
.pw-rs-n {
    flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
    color: var(--muted); background: rgba(255,255,255,.06); font-size: 11.5px; font-weight: 800;
}
.pw-rs-n svg { width: 12px; height: 12px; }
.pw-rs-tx { flex: 1; min-width: 0; }
.pw-rs-tx b { display: block; font-size: 12.5px; font-weight: 800; }
.pw-rs-tx small { display: block; margin-top: 1px; color: var(--faint); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pw-rs-tag {
    flex: none; padding: 3px 8px; border-radius: 99px; white-space: nowrap;
    color: var(--faint); background: rgba(255,255,255,.05); font-size: 10.5px; font-weight: 800;
}
.pw-rs-row.ok { background: rgba(47,207,115,.07); border-color: rgba(47,207,115,.22); }
.pw-rs-row.ok .pw-rs-n { color: #0c2a17; background: linear-gradient(180deg, #6ff0a4, #2fcf73); }
.pw-rs-row.ok .pw-rs-tag { color: #6ff0a4; background: rgba(47,207,115,.14); }
.pw-rs-row.no .pw-rs-tag { color: #ff9b8f; background: rgba(255,90,70,.12); }
.pw-rs-row.no .pw-rs-tx small { color: #ff9b8f; }
.pw-rs-f { margin: 10px 16px 0; color: var(--faint); font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.pw-rs-go { width: calc(100% - 28px); min-height: 44px; margin: 12px 14px 0; }
.pw-rs[open] { padding-bottom: 14px; }

@media (max-width: 420px) {
    .pw-lock { padding: 16px 14px; }
    .pw-lock-top { gap: 12px; }
    .pw-lock-ring { width: 64px; height: 64px; }
    .pw-lock-ic { width: 44px; height: 44px; }
    .pw-lock-v { font-size: 26px; }
    .pw-rs-tag { display: none; }
    .pw-wr-l { grid-template-columns: 1fr; }
    .pw-wr-it { align-items: center; padding: 8px 10px; }
    .pw-wr-it small { display: inline; margin: 0 0 0 4px; }
    .pw-wr-it b { display: inline; }
    .pw-wr-it small::before { content: "— "; }
}

@media (max-width: 760px) {

    .mdl.mdl-wallet { width: 100%; max-height: 88dvh; }

    .pw-head { padding: 40px 52px 13px 16px; }
    .pw-tabs { margin: 10px 16px 0; }
    .pw-body { padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); }
}

@media (max-width: 520px) {

    .pm-heros { grid-template-columns: 1fr; gap: 7px; }
    .pm-hero { grid-template-columns: auto 1fr auto auto; row-gap: 0; padding: 10px 11px; }
    .pm-hero .pm-stack { grid-column: 3; grid-row: 1; gap: 3px; }

    .pm-hero .pm-stack i { width: 20px; height: 20px; border-radius: 6px; }
    .pm-hero .pm-stack .more { width: auto; min-width: 20px; padding: 0 3px; font-size: 9px; }
    .pm-hero .go { grid-column: 4; }
    .pm-tiles { gap: 6px; }
    .pm-tile { padding: 9px 4px 8px; }
    .pm-tile .ic { width: 38px; height: 38px; margin-bottom: 4px; }
    .pm-tile b { font-size: 11px; }
    .pm-tile small { font-size: 9.5px; }
    .pm-rows { gap: 6px; }
    .pm { min-height: 48px; padding: 6px 8px 6px 6px; gap: 8px; }
    .pm .ic, .pm .ic.has-img { width: 32px; height: 32px; }
    .pm .tx b { font-size: 12px; }
    .pm .tx small { font-size: 10px; }
    .pm .go { display: none; }
    .pw-search { flex-basis: 120px; }
    .pw-search:focus-within { flex-basis: 170px; }

    .pw-head { padding-right: 46px; }
    .pw-head .tx small { display: none; }
    .pw-head .tx b { font-size: 15px; }
    .pw-head .bal b { font-size: 13px; }
    .pw-amount input { font-size: 26px; }
    .cx-addr { grid-template-columns: 112px 1fr; gap: 10px; }
    .cx-addr .pw-qr { padding: 6px; }
    .cx-addr-r .mono { font-size: 11.5px; padding: 7px 9px; }
    .cx-addr-r small { display: none; }
    .cx-min { padding: 12px 12px 12px 10px; gap: 10px; }
    .cx-min-ic { width: 36px; height: 36px; }
    .cx-min-tx > b { font-size: 21px; }
    .cx-sec { padding: 11px 10px; }
    .pw-addr-f .mono { font-size: 12px; }

    .pw-sumup { flex-direction: column; align-items: stretch; gap: 11px; }
    .pw-sumup .rows { padding: 11px 0 0; border-left: 0; border-top: 1px solid var(--line); }
    .pw-quick button { font-size: 10.5px; }
}

@media (max-width: 360px) {
    .pm-tiles { gap: 5px; }
    .pm-tile { padding: 8px 2px 7px; }
    .pm-tile .ic, .pm-tile .ic.has-img { width: 34px; height: 34px; }
    .pm-tile b { font-size: 10px; letter-spacing: -.02em; }
    .pm-tile .cnt { top: 4px; right: 4px; }
    .pw-sub .ic, .pw-sub .ic.has-img { display: none; }
    .pm-hero .pm-stack { display: none; }
}

.p-hero .net-box { text-align: right; }
.p-hero .net-box .cap { display: block; margin-bottom: 5px; }
.p-hero .net-box strong { font-family: var(--f-display); font-size: 22px; font-weight: 700; letter-spacing: -.03em; }

.p-hero .net-box strong.is-win  { color: var(--green); }
.p-hero .net-box strong.is-lose { color: var(--pink); }
.p-hero .who small { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; }

.p-acts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.p-acts .pa {
    display: block; text-align: left; padding: 15px; border-radius: var(--r-md);
    border: 1px solid var(--line); background: var(--surface); color: var(--text);
    cursor: pointer; transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.p-acts .pa:hover { transform: translateY(-2px); background: var(--surface-3); border-color: var(--line-3); }
.p-acts .pa .ic {
    display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 11px;
    border-radius: 11px; background: var(--surface-3); font-size: 15px; font-weight: 800;
}
.p-acts .pa .ic.acc  { color: #fff; background: var(--acc-soft-2); box-shadow: inset 0 0 0 1px var(--acc-line); }
.p-acts .pa .ic.pink { background: rgba(255,102,133,.16); }
.p-acts .pa .ic.mint { color: var(--mint); background: var(--green-soft-2); }
.p-acts .pa b { display: block; font-size: 13px; font-weight: 800; }
.p-acts .pa small { display: block; margin-top: 3px; color: var(--faint); font-size: 11px; font-weight: 700; }

.bygame { display: flex; flex-direction: column; gap: 4px; }
.bg-row {
    display: flex; align-items: center; gap: 13px; padding: 11px; border-radius: var(--r-sm);
    color: var(--text); transition: background .2s var(--ease);
}
.bg-row:hover { background: var(--surface); }
.bg-row .tile {
    flex: none; width: 38px; height: 38px; border-radius: 12px;
    background: linear-gradient(150deg, var(--c1), var(--c2));
}
.bg-row .grow { min-width: 0; flex: 1; }
.bg-row b { display: block; font-size: 13px; font-weight: 800; }
.bg-row small { display: block; margin: 2px 0 7px; color: var(--faint); font-size: 11px; font-weight: 700; }
.bg-row .bar { display: block; height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bg-row .bar i { display: block; height: 100%; border-radius: 99px; }
.bg-row .back {
    flex: none; text-align: right; font-family: var(--f-display); font-size: 15px;
    font-weight: 700; letter-spacing: -.03em; color: var(--dim);
}

.bg-row .back.up { color: var(--green); }
.bg-row .back small { display: block; margin-top: 2px; color: var(--faint); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.acc-list { display: flex; flex-direction: column; }
.acc-row {
    display: flex; align-items: center; gap: 12px; padding: 11px 0;
    border-bottom: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 700;
}
.acc-row:last-child { border-bottom: 0; }
.acc-row span { color: var(--faint); }
.acc-row b { margin-left: auto; text-align: right; word-break: break-word; }
.acc-row [data-acc-link] { margin-left: auto; min-height: 30px; }

.ref-nums { display: flex; gap: 22px; margin-bottom: 15px; }
.ref-nums .n b { display: block; font-family: var(--f-display); font-size: 19px; font-weight: 700; letter-spacing: -.035em; color: var(--cyan-2); }
.ref-nums .n small { display: block; margin-top: 3px; color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.hist-filters {
    display: flex; gap: 7px; margin-bottom: 14px; padding-bottom: 12px;
    overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line-soft);
}
.hist-filters::-webkit-scrollbar { display: none; }
.hist-filters .hf {
    flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2);
    background: var(--surface); color: var(--dim); font-size: 12px; font-weight: 800; cursor: pointer;
    transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.hist-filters .hf:hover { color: var(--text); background: var(--surface-3); }

.hist-filters .hf.on {
    color: #fff; border-color: color-mix(in srgb, var(--tone, #4d8dff) 55%, transparent);
    background: color-mix(in srgb, var(--tone, #4d8dff) 22%, transparent);
}

.hist-rows { display: flex; flex-direction: column; }
.hrow {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
}
.hrow:last-child { border-bottom: 0; }
.hrow .tile { flex: none; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(150deg, var(--c1), var(--c2)); }
.hrow .who { min-width: 0; flex: 1; }
.hrow .who b { display: block; font-size: 13px; font-weight: 800; }
.hrow .who small { display: block; margin-top: 2px; color: var(--faint); font-size: 11px; font-weight: 700; }
.hrow .mult {
    flex: none; min-width: 66px; text-align: right; font-family: var(--f-display);
    font-size: 13px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums;
}
.hrow .bet { flex: none; min-width: 92px; text-align: right; color: var(--faint); font-size: 12px; font-weight: 700; }
.hrow .amt { flex: none; min-width: 108px; text-align: right; font-size: 13.5px; font-weight: 800; color: var(--pink); }
.hrow.win .amt { color: var(--green); }
.hrow .fair { flex: none; min-width: 74px; text-align: right; color: var(--lilac); font-size: 11px; font-weight: 800; }
.hrow .fair.off { color: var(--dead); }
.hist-more { width: 100%; margin-top: 14px; }

@media (max-width: 760px) {

    .hrow {
        display: grid; column-gap: 10px; row-gap: 4px;
        grid-template-columns: 34px minmax(0,1fr) auto auto;
        grid-template-areas: "tile who who amt" "tile mult bet fair";
    }
    .hrow .tile { grid-area: tile; align-self: start; }
    .hrow .who  { grid-area: who; }
    .hrow .amt  { grid-area: amt; min-width: 0; }
    .hrow .mult { grid-area: mult; min-width: 0; text-align: left; font-size: 12px; }
    .hrow .bet  { grid-area: bet; min-width: 0; font-size: 11px; }
    .hrow .fair { grid-area: fair; min-width: 0; font-size: 11px; }
    .p-acts { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.lvl-hero { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.lvl-hero .tx b { display: block; font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.lvl-hero .tx small { font-size: 11.5px; font-weight: 700; }

.lvl-list { display: flex; flex-direction: column; gap: 9px; }
.lvl {
    padding: 13px 15px; border-radius: var(--r-sm);
    border: 1px solid var(--line); background: var(--surface);
}

.lvl.got { opacity: .65; }
.lvl.now {
    opacity: 1; border-color: var(--gold-line); background: var(--gold-soft);
    box-shadow: 0 14px 30px -22px rgba(247,201,75,.8);
}
.lvl .lh { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.lvl .lh b { font-family: var(--f-display); font-size: 14px; font-weight: 700; letter-spacing: -.03em; }
.lvl .need { margin-left: auto; color: var(--faint); font-size: 11px; font-weight: 800; }
.lvl .perks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.lvl .perks li { position: relative; padding-left: 15px; color: var(--dim); font-size: 12px; font-weight: 700; line-height: 1.45; }
.lvl .perks li::before {
    content: ''; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px;
    border-radius: 50%; background: var(--acc);
}
.lvl.now .perks li::before { background: var(--gold); }

.cb-row {
    display: flex; align-items: center; gap: 12px; padding: 11px 0;
    border-bottom: 1px solid var(--line-soft);
}
.cb-row:last-child { border-bottom: 0; }
.cb-row b { display: block; font-size: 13px; font-weight: 800; }
.cb-row small { display: block; margin-top: 2px; color: var(--faint); font-size: 11px; font-weight: 700; }
.cb-row .sum { margin-left: auto; font-family: var(--f-display); font-size: 15px; font-weight: 700; color: var(--dim); }
.cb-row.ready small { color: var(--mint); }
.cb-row.ready .sum { color: var(--green); }

.wager-card .foot-row {
    display: flex; align-items: center; gap: 10px; margin-top: 11px;
    color: var(--faint); font-size: 11.5px; font-weight: 700;
}
.wager-card .foot-row b { margin-left: auto; color: var(--gold-text); font-size: 13px; }

.mdl-title { font-family: var(--f-display); font-size: 18px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 15px; }

.mdl.mdl-fair { width: min(1000px, calc(100vw - 32px)); }
.mdl.mdl-fair::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 180px; border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: radial-gradient(520px 160px at 12% 0, rgba(54,216,154,.13), transparent 70%),
                radial-gradient(420px 160px at 88% 0, rgba(77,141,255,.12), transparent 70%);
    pointer-events: none;
}
.mdl-fair .mdl-scroll { position: relative; padding: 26px; }
.fx-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.fx-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; margin-bottom: 18px; }
.fx-head__shield {
    flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px;
    color: var(--green-ink); background: var(--green-grad); box-shadow: 0 14px 30px -14px rgba(54,216,154,.9);
}
.fx-head .mdl-title { margin: 0 0 3px; font-size: 20px; }
.fx-head p { color: var(--dim); font-size: 12.5px; line-height: 1.5; }

.fx-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.fx-flow li {
    position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px;
    border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--line-soft);
}
.fx-flow i {
    flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
    font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--lilac-2);
    background: var(--acc-soft); border: 1px solid var(--acc-line);
}
.fx-flow li:last-child i { color: var(--mint); background: var(--green-soft-2); border-color: var(--green-line); }
.fx-flow span { min-width: 0; color: var(--faint); font-size: 11px; font-weight: 700; line-height: 1.35; }
.fx-flow b { display: block; color: var(--text); font-size: 12px; font-weight: 800; }

.fx-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.fx-main, .fx-next { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fx-next {
    position: sticky; top: 0; padding: 16px; border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(77,141,255,.07), transparent 60%), var(--surface);
    border: 1px solid var(--line);
}

.fx-round { display: flex; align-items: center; gap: 12px; }
.fx-round__tile {
    flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff;
    background: linear-gradient(140deg, var(--c1), var(--c2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.fx-round__who { min-width: 0; }
.fx-round__who b { display: block; font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.fx-round__who b span { color: var(--faint); font-weight: 600; }
.fx-round__who small { color: var(--faint); font-size: 11.5px; font-weight: 700; }

.fx-verdict { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); }
.fx-verdict.is-ok {
    background: radial-gradient(360px 120px at 0 50%, rgba(54,216,154,.2), transparent 70%), var(--green-soft);
    border: 1px solid var(--green-line);
}
.fx-verdict.is-bad { background: rgba(255,102,133,.1); border: 1px solid rgba(255,102,133,.32); }
.fx-verdict__badge {
    position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
}
.is-ok .fx-verdict__badge { color: var(--green-ink); background: var(--green-grad); box-shadow: 0 0 0 6px rgba(54,216,154,.12), 0 12px 28px -10px rgba(54,216,154,.8); }
.is-bad .fx-verdict__badge { color: #fff; background: var(--pink); box-shadow: 0 0 0 6px rgba(255,102,133,.14); }
.is-ok .fx-verdict__badge::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(54,216,154,.5);
    animation: fx-pulse 2.4s var(--ease) infinite;
}
@keyframes fx-pulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.fx-verdict__text b { display: block; font-family: var(--f-display); font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.is-ok .fx-verdict__text b { color: var(--mint); }
.is-bad .fx-verdict__text b { color: var(--pink); }
.fx-verdict__text small { color: var(--dim); font-size: 12px; font-weight: 700; }

.fx-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fx-checks li {
    display: flex; gap: 10px; padding: 11px 12px; border-radius: var(--r-xs);
    background: var(--surface); border: 1px solid var(--line-soft);
}
.fx-checks i {
    flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; margin-top: 1px;
}
.fx-checks .is-ok i  { color: var(--green-ink); background: var(--green); }
.fx-checks .is-bad i { color: #fff; background: var(--pink); }
.fx-checks span { color: var(--faint); font-size: 11.5px; font-weight: 700; line-height: 1.45; }
.fx-checks b { display: block; color: var(--text); font-size: 12.5px; font-weight: 800; }

.fx-adjusted {
    display: flex; gap: 10px; padding: 11px 12px; border-radius: var(--r-xs);
    background: rgba(255,196,77,.08); border: 1px solid rgba(255,196,77,.28);
}
.fx-adjusted i {
    flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; margin-top: 1px;
    color: #ffc44d; background: rgba(255,196,77,.16);
}
.fx-adjusted span { color: var(--faint); font-size: 11.5px; font-weight: 700; line-height: 1.45; }
.fx-adjusted b { display: block; color: var(--text); font-size: 12.5px; font-weight: 800; }

.fx-block { padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-soft); }
.fx-block__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fx-block__head span { color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fx-block__head em { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.fx-block__head em.is-ok  { color: var(--mint); background: var(--green-soft-2); border: 1px solid var(--green-line); }
.fx-block__head em.is-bad { color: var(--pink); background: rgba(255,102,133,.12); border: 1px solid rgba(255,102,133,.3); }

.fx-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
.fx-compare > div { min-width: 0; padding: 10px 12px; border-radius: var(--r-2xs); background: rgba(0,0,0,.22); border: 1px solid var(--line-soft); }
.fx-compare span { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--faint); font-size: 10.5px; font-weight: 800; }
.fx-compare code { display: block; color: var(--lilac-2); font-size: 12px; font-weight: 700; line-height: 1.5; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fx-compare__eq {
    align-self: center; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
    font-style: normal; font-size: 15px; font-weight: 800;
}
.fx-compare__eq.is-ok  { color: var(--mint); background: var(--green-soft-2); border: 1px solid var(--green-line); }
.fx-compare__eq.is-bad { color: var(--pink); background: rgba(255,102,133,.12); border: 1px solid rgba(255,102,133,.3); }

.fx-viz { margin-bottom: 12px; }
.fx-viz--row { display: flex; align-items: center; gap: 18px; }
.fx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: var(--faint); font-size: 11px; font-weight: 700; }
.fx-legend--col { flex-direction: column; margin: 0; }
.fx-legend small { color: var(--faint-2); font-size: 10.5px; line-height: 1.45; }
.fx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fx-legend span::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--surface-4); border: 1px solid var(--line-2); }
.fx-legend .is-safe::before  { background: rgba(54,216,154,.2); border-color: var(--green-line); }
.fx-legend .is-pit::before   { background: rgba(255,102,133,.3); border-color: rgba(255,102,133,.55); }
.fx-legend .is-first::before { background: var(--pink); border-color: var(--pink); }
.fx-legend .is-drawn::before { background: var(--acc-soft-2); border-color: var(--acc-line-2); }
.fx-legend .is-pick::before  { background: transparent; border: 1.5px solid var(--gold); }
.fx-legend .is-hit::before   { background: var(--gold-grad); border-color: var(--gold); }

.fx-road { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; }
.fx-road__cell {
    height: 30px; display: grid; place-items: center; border-radius: 7px; font-size: 10.5px; font-weight: 800;
    color: var(--mint-2); background: rgba(54,216,154,.1); border: 1px solid rgba(54,216,154,.2);
}
.fx-road__cell.is-pit { color: #ffb3c2; background: rgba(255,102,133,.16); border-color: rgba(255,102,133,.4); }
.fx-road__cell.is-first { color: #fff; background: var(--pink); border-color: var(--pink); box-shadow: 0 6px 16px -6px rgba(255,102,133,.9); }

.fx-mines { flex: none; display: grid; grid-template-columns: repeat(5, 30px); gap: 5px; padding: 8px; border-radius: 12px; background: rgba(0,0,0,.22); }
.fx-mines__cell { width: 30px; height: 30px; border-radius: 8px; background: rgba(54,216,154,.1); border: 1px solid rgba(54,216,154,.22); }
.fx-mines__cell.is-mine {
    background: radial-gradient(circle at 50% 50%, #ff8aa1 0 24%, var(--pink) 26% 34%, rgba(255,102,133,.2) 36%);
    border-color: rgba(255,102,133,.55);
}

.fx-keno { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 4px; }
.fx-keno__cell {
    height: 26px; display: grid; place-items: center; border-radius: 7px; font-size: 10.5px; font-weight: 800;
    color: var(--faint-2); background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
}
.fx-keno__cell.is-drawn { color: var(--lilac-2); background: var(--acc-soft); border-color: var(--acc-line); }
.fx-keno__cell.is-pick  { color: var(--gold-text); border: 1.5px solid rgba(247,201,75,.55); }
.fx-keno__cell.is-hit   { color: var(--gold-ink); background: var(--gold-grad); border-color: var(--gold); }

.fx-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.fx-big b { font-family: var(--f-display); font-size: 28px; font-weight: 700; letter-spacing: -.03em; color: var(--text); }
.fx-big small { color: var(--faint); font-size: 11.5px; font-weight: 700; }
.fx-scale, .fx-pot { position: relative; height: 8px; margin-top: 12px; border-radius: 999px; }
.fx-scale { background: linear-gradient(90deg, var(--acc), var(--green)); opacity: .9; }
.fx-scale i, .fx-pot i {
    position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.5);
}
.fx-pot { display: flex; gap: 2px; overflow: visible; }
.fx-pot span { height: 100%; min-width: 2px; border-radius: 3px; background: var(--surface-4); }
.fx-pot span.is-win { background: var(--gold-grad); }

.fx-seed { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.fx-block .fx-seed:last-child, .fx-next .fx-seed:last-of-type { border-bottom: 0; }
.fx-block .fx-seed:first-of-type { padding-top: 0; }
.fx-seed__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.fx-seed__label { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); font-size: 11px; font-weight: 800; }
.fx-seed__value {
    display: block; padding: 8px 10px; border-radius: 9px; background: rgba(0,0,0,.26); border: 1px solid var(--line-soft);
    color: var(--text); font-size: 11.5px; line-height: 1.5; word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.fx-seed.is-ok .fx-seed__value { color: var(--mint); border-color: rgba(54,216,154,.18); }
.fx-seed__hint { display: block; margin-top: 6px; color: var(--faint-2); font-size: 11px; font-weight: 700; line-height: 1.5; }

.fx-copy {
    flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 8px;
    color: var(--faint); font-size: 10.5px; font-weight: 800; background: transparent; border: 1px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
}
.fx-copy:hover { color: var(--text); background: var(--surface-3); border-color: var(--line-2); }
.fx-copy.is-done { color: var(--mint); border-color: var(--green-line); background: var(--green-soft); }

.fx-foot { display: flex; align-items: center; gap: 7px; color: var(--faint-2); font-size: 11px; font-weight: 700; }
.fx-foot svg { flex: none; }

.fx-next__head { display: flex; align-items: center; gap: 11px; }
.fx-next__ic {
    flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px;
    color: var(--lilac-2); background: var(--acc-soft); border: 1px solid var(--acc-line);
}
.fx-next__head b { display: block; font-family: var(--f-display); font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; }
.fx-next__head small { color: var(--faint); font-size: 11px; font-weight: 700; }
.fx-note { color: var(--faint); font-size: 11.5px; font-weight: 700; line-height: 1.55; }
.fx-seedform { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.fx-seedform__row { display: flex; gap: 8px; }
.fx-input {
    flex: 1; min-width: 0; min-height: 44px; padding: 0 13px; border-radius: var(--r-2xs);
    color: var(--text); font-size: 12.5px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: rgba(0,0,0,.3); border: 1px solid var(--line-2); transition: border-color .15s, box-shadow .15s;
}
.fx-input::placeholder { color: var(--faint-2); font-family: var(--f-text); }
.fx-input:focus { outline: none; border-color: var(--acc-line-2); box-shadow: 0 0 0 3px rgba(77,141,255,.16); }
.fx-dice {
    flex: none; width: 44px; display: grid; place-items: center; border-radius: var(--r-2xs);
    color: var(--dim); background: var(--surface-3); border: 1px solid var(--line-2); transition: color .15s, background .15s;
}
.fx-dice:hover { color: var(--text); background: var(--surface-4); }
.fx-save { width: 100%; }

.fx-empty {
    display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: var(--r-md);
    color: var(--faint); background: var(--surface); border: 1px dashed var(--line-2);
}
.fx-empty svg { flex: none; }
.fx-empty p { font-size: 12px; font-weight: 700; line-height: 1.55; }
.fx-sk {
    height: 64px; border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--surface) 0%, var(--surface-4) 50%, var(--surface) 100%) 0 0 / 200% 100%;
    animation: fx-sk 1.2s linear infinite;
}
.fx-sk--h { height: 42px; width: 60%; }
.fx-sk--v { height: 84px; }
@keyframes fx-sk { to { background-position: -200% 0; } }

@media (max-width: 860px) {
    .fx-grid { grid-template-columns: 1fr; }
    .fx-next { position: static; }
}
@media (max-width: 760px) {
    .mdl.mdl-fair { width: 100%; }
    .mdl-fair .mdl-scroll { padding: 46px 14px calc(20px + env(safe-area-inset-bottom)); }
    .fx-head { padding-right: 0; }
    .fx-head__shield { width: 42px; height: 42px; border-radius: 13px; }

    .fx-flow { gap: 6px; margin-bottom: 16px; }
    .fx-flow li { flex-direction: column; gap: 5px; padding: 9px 6px; text-align: center; }
    .fx-flow span { font-size: 0; }
    .fx-flow b { font-size: 11px; }
    .fx-checks { grid-template-columns: 1fr; }
    .fx-compare { grid-template-columns: 1fr; }
    .fx-compare__eq { justify-self: center; }
    .fx-viz--row { flex-direction: column; align-items: flex-start; }
    .fx-road { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .fx-keno { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .fx-verdict__text b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .is-ok .fx-verdict__badge::after, .fx-sk { animation: none; }
}

.fair-btn {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; margin-left: 6px;
    border-radius: 11px; color: var(--mint); font-size: 12px; font-weight: 800; white-space: nowrap;
    background: var(--green-soft); border: 1px solid var(--green-line);
    transition: background .15s, border-color .15s;
}
.fair-btn:hover { background: var(--green-soft-2); border-color: rgba(54,216,154,.4); }
@media (max-width: 760px) {
    .fair-btn { min-height: 34px; padding: 0 9px; margin-left: 0; }
    .fair-btn span { display: none; }
}

.rules-btn {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; margin-left: 6px;
    border-radius: 11px; color: var(--lilac); font-size: 12px; font-weight: 800; white-space: nowrap;
    background: var(--acc-soft); border: 1px solid var(--acc-line);
    transition: background .15s, border-color .15s;
}
.rules-btn:hover { background: rgba(77,141,255,.3); border-color: rgba(124,180,255,.5); }
.rules-btn + .fair-btn { margin-left: 6px; }
@media (max-width: 760px) {
    .rules-btn { min-height: 34px; padding: 0 9px; margin-left: 0; }
    .rules-btn span { display: none; }
}

.mdl.mdl-rules { width: min(700px, calc(100vw - 32px)); --tone: var(--acc); overflow: hidden; }
.mdl-rules .mdl-scroll { position: relative; padding: 0; scrollbar-gutter: auto; }
.mdl-rules .mdl-x { background: rgba(8,11,18,.6); backdrop-filter: blur(6px); }

.rl-hero {
    position: relative; isolation: isolate; overflow: hidden; min-height: 214px;
    padding: 26px 26px 22px; display: flex; align-items: flex-end;
    background: radial-gradient(420px 220px at 78% 40%, color-mix(in srgb, var(--tone) 34%, transparent), transparent 70%),
                linear-gradient(160deg, color-mix(in srgb, var(--tone) 18%, var(--panel)), var(--screen) 75%);
}
.rl-hero-bg {
    position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
    filter: saturate(1.1);
}
.rl-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(10,15,24,.94) 0, rgba(10,15,24,.82) 42%, rgba(10,15,24,.25) 75%, rgba(10,15,24,.05)),
                linear-gradient(0deg, var(--screen) 0, transparent 38%);
}
.rl-hero.no-bg::before { background: linear-gradient(0deg, var(--screen) 0, transparent 40%); }
.rl-hero-pic {
    position: absolute; z-index: -1; right: 6px; bottom: -6px; height: 112%; max-width: 46%; object-fit: contain; object-position: bottom right;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)) drop-shadow(0 0 40px color-mix(in srgb, var(--tone) 35%, transparent));
    animation: rl-float 5s ease-in-out infinite;
}
@keyframes rl-float { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .rl-hero-pic { animation: none; } }
.rl-hero-txt { position: relative; max-width: 60%; }

.rl-kick {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px;
    color: var(--tone); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.rl-ico {
    width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
    background: color-mix(in srgb, var(--tone) 18%, rgba(10,15,24,.7));
    border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
}
.rl-hero .mdl-title { margin: 0; font-size: 30px; line-height: 1.05; letter-spacing: -.04em; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.rl-tag { margin: 8px 0 14px; color: #d5dbe8; font-size: 14px; line-height: 1.45; text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.rl-tag b { color: var(--text); }

.rl-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-facts div {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px; border-radius: 999px;
    background: rgba(8,11,18,.62); backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--tone) 30%, rgba(255,255,255,.1));
}
.rl-facts small { color: var(--faint); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.rl-facts b { color: var(--text); font: 700 13px/1.2 var(--f-display); letter-spacing: -.02em; white-space: nowrap; }

.rl-body { padding: 2px 26px 0; }
.rl-sec { margin-top: 22px; }
.rl-sec h4 {
    display: flex; align-items: center; gap: 10px; margin: 0 0 11px;
    color: var(--text); font: 700 13px/1.2 var(--f-display); letter-spacing: -.01em;
}
.rl-sec h4::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: var(--tone); box-shadow: 0 0 10px var(--tone); }
.rl-sec h4::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

.rl-goal {
    margin: 0; padding: 14px 16px; border-radius: 16px;
    color: var(--text); font-size: 14.5px; line-height: 1.55;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 12%, var(--panel)), var(--panel-4));
    border: 1px solid color-mix(in srgb, var(--tone) 24%, var(--line-soft));
}
.rl-wl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.rl-wl > div {
    --st: var(--green); display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 14px;
    color: var(--dim); font-size: 13px; line-height: 1.45;
    background: color-mix(in srgb, var(--st) 8%, transparent); border: 1px solid color-mix(in srgb, var(--st) 28%, transparent);
}
.rl-wl > .is-lose { --st: #ff5d6c; }
.rl-wl > div:only-child { grid-column: 1 / -1; }
.rl-wl b { display: block; margin-bottom: 2px; color: var(--st); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.rl-wl-ic {
    flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
    color: #0a0f18; background: var(--st);
}

.rl-how { margin: 0; padding: 0; list-style: none; }
.rl-how li { position: relative; display: flex; align-items: flex-start; gap: 14px; padding-bottom: 14px; }
.rl-how li:last-child { padding-bottom: 0; }
.rl-how li:not(:last-child)::before {
    content: ''; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 45%, transparent), var(--line-soft));
}
.rl-how-n {
    flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
    color: #0a0f18; background: var(--tone); font: 800 13px/1 var(--f-display);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 16%, transparent);
}
.rl-how-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.rl-how-t > b { color: var(--text); font-size: 14.5px; font-weight: 800; line-height: 1.3; }
.rl-how-t > span { color: var(--dim); font-size: 13.5px; line-height: 1.5; }
.rl-how-pic {
    flex: none; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 14px;
    background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--tone) 24%, transparent), transparent 75%), var(--surface-2);
    border: 1px solid var(--line-soft);
}
.rl-how-img { max-width: 52px; max-height: 52px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }

.rl-ex {
    padding: 14px; border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 12%, var(--panel)), var(--panel-4));
    border: 1px solid color-mix(in srgb, var(--tone) 24%, var(--line-soft));
}
.rl-ex-sum { display: flex; align-items: stretch; gap: 8px; }
.rl-ex-cell {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px;
    background: rgba(8,11,18,.45); border: 1px solid var(--line-soft);
}
.rl-ex-cell small { color: var(--faint); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rl-ex-cell b { color: var(--text); font: 800 19px/1.1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-ex-cell.is-x b { color: #b4f6ff; }
.rl-ex-cell.is-win { background: var(--green-soft-2); border-color: var(--green-line); }
.rl-ex-cell.is-win b { color: var(--mint); }
.rl-ex-op { align-self: center; color: var(--muted); font: 700 18px/1 var(--f-display); }
.rl-ex-cap { margin: 0 2px 10px; color: var(--text); font-size: 13.5px; line-height: 1.5; }

.rl-prs { display: grid; gap: 6px; }
.rl-prs.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rl-prs.is-grid > .rl-pr:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rl-pr {
    display: flex; align-items: center; gap: 11px; min-width: 0; padding: 9px 12px; border-radius: 12px;
    background: var(--surface-2); border: 1px solid var(--line-soft);
}
.rl-pr-lead { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-3); }
.rl-pr-img { max-width: 32px; max-height: 32px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.rl-pr-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint-2); }
.rl-pr.r .rl-pr-dot { background: #ff4d5e; box-shadow: 0 0 10px #ff4d5e; }
.rl-pr.k .rl-pr-dot { background: #6b7488; }
.rl-pr.g .rl-pr-dot { background: #2fd37a; box-shadow: 0 0 10px #2fd37a; }

.rl-pr-sw {
    width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
    color: #fff; font: 800 12px/1 var(--f-display); letter-spacing: -.03em; text-shadow: 0 1px 2px rgba(0,0,0,.45);
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 42%), var(--c);
    box-shadow: inset 0 -3px 6px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.18), 0 0 14px -2px var(--c);
}
.rl-die { width: 16px; height: 16px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.rl-pr.gold .rl-pr-dot { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.rl-pr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rl-pr-t b { color: var(--text); font-size: 13px; font-weight: 800; line-height: 1.25; }
.rl-pr-t small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.rl-pr-bar { display: block; height: 4px; margin-top: 5px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.rl-pr-bar i { display: block; height: 100%; border-radius: inherit; background: var(--tone); }
.rl-pr em {
    flex: none; max-width: 55%; padding: 5px 9px; border-radius: 9px; font-style: normal; text-align: right;
    color: #b4f6ff; background: rgba(95,204,255,.08); font: 800 14px/1.2 var(--f-display); letter-spacing: -.02em;
}
.rl-pr.g em { color: #7df0b0; background: var(--green-soft); }
.rl-pr.gold {
    background: linear-gradient(120deg, rgba(247,201,75,.13), rgba(247,201,75,.03));
    border-color: rgba(247,201,75,.35);
}
.rl-pr.gold em { color: var(--gold-ink); background: var(--gold-grad); box-shadow: 0 6px 16px -8px rgba(247,201,75,.9); }
.rl-pr.gold .rl-pr-bar i { background: var(--gold); }

.rl-note {
    display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; padding: 9px 12px; border-radius: 12px;
    color: var(--dim); font-size: 12.5px; line-height: 1.45;
    background: color-mix(in srgb, var(--tone) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--tone) 28%, transparent);
}
.rl-note svg { flex: none; margin-top: 1px; color: var(--tone); }
.rl-note b { color: var(--text); }

.rl-pay { border-radius: var(--r-xs); border: 1px solid var(--line-soft); overflow: hidden; }
.rl-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: 12.5px; color: var(--dim); }
.rl-row + .rl-row { border-top: 1px solid var(--line-soft); }
.rl-row:nth-child(odd) { background: var(--surface); }
.rl-row span { flex: 1; min-width: 0; line-height: 1.4; }
.rl-row b { flex: none; max-width: 58%; text-align: right; color: #b4f6ff; font: 700 12.5px/1.35 var(--f-display); letter-spacing: -.02em; }
.rl-row.gold b { color: var(--gold); }

.rl-tips { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.rl-tips li {
    display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 12px;
    color: var(--dim); font-size: 13px; line-height: 1.45; background: var(--surface);
}
.rl-tips b { color: var(--text); }
.rl-tip-ic {
    flex: none; width: 20px; height: 20px; margin-top: 0; display: grid; place-items: center; border-radius: 7px;
    color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent);
}

.rl-more { margin-top: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-soft); }
.rl-fair { margin-top: 22px; }
.rl-more summary {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none;
    color: var(--dim); font-size: 13px; font-weight: 800;
}
.rl-more summary::-webkit-details-marker { display: none; }
.rl-more summary::after {
    content: ''; margin-left: auto; width: 8px; height: 8px; border: solid var(--muted); border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.rl-more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.rl-more summary:hover { color: var(--text); }
.rl-fair-ic { display: grid; color: var(--green); }
.rl-more > .rl-list, .rl-more > .rl-pay { margin: 0 14px 14px; }

.rl-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rl-list li { position: relative; padding-left: 18px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.rl-list li::before {
    content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 2px;
    background: var(--tone); transform: rotate(45deg);
}
.rl-list b { color: var(--text); }

.rl-foot {
    position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 8px;
    margin: 22px -26px 0; padding: 14px 26px 18px;
    background: linear-gradient(180deg, transparent, var(--screen) 34%);
}
@media (max-width: 520px) {

    .mdl.mdl-rules { width: 100%; }
    .mdl-rules .mdl-grip { z-index: 3; background: rgba(255,255,255,.4); }
}
@media (max-width: 560px) {
    .mdl-rules .mdl-scroll { padding: 0 0 env(safe-area-inset-bottom); }
    .rl-hero { min-height: 230px; padding: 46px 16px 16px; }
    .rl-hero-txt { max-width: 64%; }
    .rl-hero-pic { max-width: 48%; height: 92%; right: -6px; }
    .rl-hero .mdl-title { font-size: 25px; }
    .rl-tag { font-size: 13px; }
    .rl-facts div { padding: 5px 9px; }
    .rl-facts small { font-size: 9.5px; }
    .rl-facts b { font-size: 12px; }
    .rl-body { padding: 0 16px; }
    .rl-goal { padding: 12px 13px; font-size: 14px; }
    .rl-wl { grid-template-columns: 1fr; }
    .rl-how li { gap: 11px; }
    .rl-how-pic { width: 48px; height: 48px; border-radius: 12px; }
    .rl-how-img { max-width: 42px; max-height: 42px; }
    .rl-how-t > span { font-size: 13px; }
    .rl-ex { padding: 10px; }
    .rl-ex-sum { gap: 5px; }
    .rl-ex-cell { padding: 8px 9px; }
    .rl-ex-cell small { font-size: 9px; }
    .rl-ex-cell b { font-size: 15px; }
    .rl-ex-op { font-size: 14px; }
    .rl-prs.is-grid { grid-template-columns: 1fr; }
    .rl-foot { flex-direction: column-reverse; margin: 20px -16px 0; padding: 12px 16px 14px; }
    .rl-foot .btn { width: 100%; }
}

.hrow .fair {
    border: 0; background: none; padding: 0; cursor: pointer;
    color: var(--lilac); font-size: 11px; font-weight: 800;
}
.hrow .fair:hover { color: var(--lilac-2); text-decoration: underline; }

.tops { margin-top: 14px; }
.tops-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.tops-h .note { color: var(--faint); font-size: 11px; font-weight: 700; }
.tops-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.top {
    display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 16px;
    border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--panel);
    color: var(--text); transition: transform .2s var(--ease), border-color .2s;
}
.top:hover { transform: translateY(-2px); border-color: var(--line-3); }
.top .ava {
    flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px;
    font-family: var(--f-display); font-size: 13px; font-weight: 700; color: #10131e; background: var(--tone);
}
.top .tx { min-width: 0; flex: 1; }
.top .tx b { display: block; font-size: 12.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .tx small { display: block; color: var(--faint); font-size: 10.5px; font-weight: 700; }
.top .mx { flex: none; text-align: right; font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: -.03em; color: var(--tone); }
.top .mx small { display: block; color: var(--mint); font-family: var(--f-text); font-size: 10.5px; font-weight: 800; }
@media (max-width: 760px) {
    .tops { margin-top: 10px; }
    .tops-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--pad-x)); padding: 0 var(--pad-x); }
    .tops-row::-webkit-scrollbar { display: none; }
    .top { flex: 0 0 68%; padding: 9px 10px; }
    .screen.home .s-tops { order: 2; }
    .screen.home .s-ticker { order: 2; }
}

.hist .tile, .bg-row .tile, .hrow .tile, .resume .tile { display: grid; place-items: center; color: rgba(255,255,255,.92); }
.hist .tile svg, .bg-row .tile svg, .hrow .tile svg, .resume .tile svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }

.ms-screen { display: flex; flex-direction: column; gap: 18px; }
.ms-hero {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px;
    min-height: 210px; padding: 26px 30px; border-radius: var(--r-xl);
    border: 1px solid rgba(55,215,242,.2);
    background:
        radial-gradient(520px 300px at 88% 40%, rgba(55,215,242,.2), transparent 70%),
        radial-gradient(420px 260px at 0% 100%, rgba(77,141,255,.16), transparent 70%),
        linear-gradient(150deg, #122032, #0d1320 70%);
}
.ms-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.ms-hero-tx { position: relative; z-index: 1; flex: 1; min-width: 0; }
.ms-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--cyan-2); }
.ms-hero .eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(95,204,255,.16); }
.ms-hero h2 { font-size: 30px; letter-spacing: -.035em; margin-bottom: 10px; line-height: 1.05; }
.ms-hero p { color: var(--dim); font-size: 13px; line-height: 1.6; max-width: 560px; }
.ms-stats { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.ms-st {
    min-width: 108px; padding: 10px 16px; border-radius: 14px;
    background: rgba(255,255,255,.045); border: 1px solid var(--line-soft);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ms-st b { display: block; font-family: var(--f-display); font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.ms-st small { display: block; margin-top: 2px; color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ms-st.ready.on { background: var(--green-soft); border-color: var(--green-line); }
.ms-st.ready.on b { color: var(--mint); }
.ms-hero-art { position: relative; z-index: 1; flex: none; width: 210px; height: 190px; margin: -16px -6px -26px 0; }
.ms-hero-art img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); animation: ms-float 5s ease-in-out infinite; }
.ms-glow { position: absolute; inset: 18% 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(95,204,255,.4), transparent); filter: blur(10px); }
@keyframes ms-float { 50% { transform: translateY(-7px); } }

.ms-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ms-bar h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.ms-pill:empty { display: none; }
.ms-pill {
    padding: 4px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 800;
    color: var(--mint); background: var(--green-soft); border: 1px solid var(--green-line);
}
.ms-tabs { margin-left: auto; display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid var(--line-soft); }
.ms-tabs button {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 10px;
    color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; transition: color .15s, background .15s;
}
.ms-tabs button:hover { color: var(--text); }
.ms-tabs button.on { color: var(--text); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--line-2); }
.ms-tabs i { font-style: normal; min-width: 18px; padding: 1px 5px; border-radius: 99px; font-size: 10px; text-align: center; background: rgba(255,255,255,.07); color: var(--dim); }
.ms-tabs i:empty { display: none; }
.ms-tabs [data-ms-tab="ready"] i:not(:empty) { color: var(--green-ink); background: var(--green); }

.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.ms-grid > .empty { grid-column: 1 / -1; }
.ms-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 16px; border-radius: var(--r-lg); border: 1px dashed var(--line-2); color: var(--dim); font-size: 13px; }
.ms-empty img { width: 110px; height: 110px; object-fit: contain; opacity: .9; }

.msc {
    --tone: var(--acc);
    position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 7%, #151c2a), #121826);
    border: 1px solid color-mix(in srgb, var(--tone) 16%, var(--line-soft));
    transition: transform .18s, border-color .18s, box-shadow .18s;
}
.msc:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tone) 38%, transparent); box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--tone) 70%, transparent); }
.msc-art {
    position: relative; height: 136px; overflow: hidden;
    background:
        radial-gradient(300px 140px at 50% 110%, color-mix(in srgb, var(--tone) 45%, transparent), transparent 70%),
        linear-gradient(160deg, color-mix(in srgb, var(--tone) 22%, #121a2a), #0e1422);
}
.msc-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(14,20,34,.85)); }

.msc-art img { position: absolute; top: 8px; bottom: 2px; right: 8px; width: 48%; height: calc(100% - 10px); object-fit: contain; object-position: right center; transform-origin: 70% 60%; filter: drop-shadow(0 10px 20px rgba(0,0,0,.4)); transition: transform .35s; }
.msc:hover .msc-art img { transform: scale(1.05) rotate(-2deg); }
.msc-glyph { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: color-mix(in srgb, var(--tone) 80%, #fff); opacity: .9; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--tone) 70%, transparent)); }
.msc-where {
    position: absolute; z-index: 1; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; color: #fff;
    background: rgba(8,12,20,.55); border: 1px solid rgba(255,255,255,.1);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.msc-rew {
    position: absolute; z-index: 1; left: 14px; bottom: 12px; padding: 6px 12px; border-radius: 11px;
    font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: -.02em;
    color: var(--gold-ink); background: var(--gold-grad); box-shadow: 0 10px 22px -12px rgba(247,201,75,.9);
}
.msc-rew small { margin-left: 8px; padding-left: 8px; border-left: 1px solid rgba(23,19,7,.25); font-family: var(--f-ui, inherit); font-size: 11px; font-weight: 800; letter-spacing: 0; opacity: .8; }
.msc-wager { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; font-size: 11.5px; font-weight: 700; line-height: 1.35;
    color: var(--gold-pale); background: var(--gold-soft); border: 1px solid var(--gold-line); }
.msc-wager svg { flex: none; }
.msc-wager.free { color: var(--mint); background: var(--green-soft); border-color: var(--green-line); }
.msc-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.msc-t { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.msc-d { margin-top: -4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.msc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.msc-chips span { padding: 4px 9px; border-radius: 8px; font-size: 11px; font-weight: 800; color: var(--dim); background: rgba(255,255,255,.05); border: 1px solid var(--line-soft); }
.msc-prog { margin-top: auto; }
.msc-pl { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.msc-pl span { color: var(--faint); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.msc-pl b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.msc .prog { height: 8px; }
.msc.is-active .prog i { background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 55%, #fff)); box-shadow: 0 0 14px color-mix(in srgb, var(--tone) 60%, transparent); }
.msc-foot { display: flex; align-items: center; gap: 10px; justify-content: space-between; min-height: 38px; }
.msc-time { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); font-size: 11.5px; font-weight: 700; }
.msc-time.urgent { color: #ffb36b; }
.msc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 16px; border-radius: 12px;
    font-size: 12.5px; font-weight: 800; white-space: nowrap; transition: transform .12s, filter .15s, background .15s;
}
.msc-btn.go { color: var(--text); background: rgba(255,255,255,.07); border: 1px solid var(--line-2); }
.msc-btn.go:hover { background: color-mix(in srgb, var(--tone) 22%, transparent); border-color: color-mix(in srgb, var(--tone) 45%, transparent); }
.msc-btn.claim { cursor: pointer; color: var(--green-ink); background: var(--green-grad); box-shadow: 0 10px 22px -12px rgba(54,216,154,.95); }
.msc-btn.claim:hover { filter: brightness(1.07); }
.msc-btn.claim:active { transform: translateY(1px); }
.msc-btn.claim:disabled { opacity: .6; pointer-events: none; }
.msc-btn.got { color: var(--mint); background: var(--green-soft); padding: 0 12px; }
.msc.is-ready { border-color: var(--green-line); box-shadow: 0 0 0 1px rgba(54,216,154,.12), 0 22px 44px -28px rgba(54,216,154,.8); }
.msc.is-ready .msc-btn.claim { animation: ms-pulse 2.2s ease-in-out infinite; }
.msc.is-claimed { opacity: .62; }
.msc.is-claimed .msc-art img { filter: grayscale(.7) drop-shadow(0 10px 20px rgba(0,0,0,.4)); }
.msc.is-claimed .msc-rew { color: var(--dim); background: rgba(255,255,255,.08); box-shadow: none; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
.msc-btn.off { color: var(--faint); background: rgba(255,255,255,.04); border: 1px solid var(--line-soft); padding: 0 12px; }
.msc.is-ended { opacity: .55; }
.msc.is-ended .msc-art img { filter: grayscale(1) drop-shadow(0 10px 20px rgba(0,0,0,.4)); }
.msc.is-ended .msc-rew { color: var(--dim); background: rgba(255,255,255,.08); box-shadow: none; }
.msc.is-ended .prog i { background: rgba(255,255,255,.22); box-shadow: none; }
@keyframes ms-pulse { 50% { box-shadow: 0 0 0 6px rgba(54,216,154,.14), 0 10px 22px -12px rgba(54,216,154,.95); } }

@media (max-width: 760px) {
    .ms-hero { padding: 20px 16px 0; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; }
    .ms-hero h2 { font-size: 23px; }
    .ms-hero p { font-size: 12.5px; }
    .ms-st { min-width: 0; flex: 1; padding: 9px 12px; }
    .ms-st b { font-size: 19px; }
    .ms-st small { font-size: 9px; letter-spacing: .03em; white-space: nowrap; }
    .ms-hero-art { width: 150px; height: 130px; margin: -6px auto -18px; }
    .ms-tabs { margin-left: 0; width: 100%; overflow-x: auto; scrollbar-width: none; }
    .ms-tabs button { flex: 1; padding: 0 10px; }
    .ms-grid { grid-template-columns: 1fr; }
}
.is-lite .ms-hero-art img, .is-lite .msc.is-ready .msc-btn.claim { animation: none; }
.is-lite .ms-st { -webkit-backdrop-filter: none; backdrop-filter: none; }

.gm-slot:empty { display: none; }
.gm-slot { display: inline-flex; margin-left: 10px; }
.gm-btn {
    --tone: var(--acc); --p: 0%;
    position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 4px;
    border-radius: 12px; color: var(--text); white-space: nowrap;
    background: linear-gradient(135deg, rgba(55,215,242,.14), rgba(77,141,255,.1)); border: 1px solid rgba(55,215,242,.28);
    transition: background .15s, border-color .15s;
}
.gm-btn:hover, .gm-btn[aria-expanded="true"] { background: linear-gradient(135deg, rgba(55,215,242,.24), rgba(77,141,255,.18)); border-color: rgba(95,204,255,.5); }
.gm-ring {
    position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--cyan);
    background: conic-gradient(var(--cyan) var(--p), rgba(255,255,255,.1) 0);
}
.gm-ring::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #0f1826; }
.gm-ring svg { position: relative; }
.gm-tx { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.gm-tx b { font-size: 12px; font-weight: 800; }
.gm-tx small { color: var(--cyan-2); font-size: 10px; font-weight: 700; }
.gm-n {
    position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
    display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; color: #fff;
    background: var(--acc); box-shadow: 0 0 0 2px var(--screen);
}
.gm-btn.ready { background: linear-gradient(135deg, rgba(54,216,154,.22), rgba(54,216,154,.1)); border-color: rgba(54,216,154,.5); }
.gm-btn.ready .gm-ring { color: var(--green); background: conic-gradient(var(--green) 100%, transparent 0); }
.gm-btn.ready .gm-tx small { color: var(--mint); }
.gm-btn.ready .gm-n { color: var(--green-ink); background: var(--green); }
.gm-btn.ready { animation: ms-pulse 2.2s ease-in-out infinite; }
.gm-btn.fresh { animation: gm-flash .9s ease-out 2; }
@keyframes gm-flash { 0% { box-shadow: 0 0 0 0 rgba(54,216,154,.8); } 100% { box-shadow: 0 0 0 16px rgba(54,216,154,0); } }

.gm-pop {
    position: fixed; z-index: 90; width: 360px; max-height: min(460px, calc(100vh - 100px)); display: flex; flex-direction: column;
    border-radius: 18px; background: rgba(15,21,33,.97); border: 1px solid var(--line-2);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(95,204,255,.08);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    animation: gm-in .16s ease-out;
}
@keyframes gm-in { from { opacity: 0; transform: translateY(-6px); } }
.gm-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line-soft); }
.gm-h small { display: block; color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gm-h b { font-size: 14px; font-weight: 800; }
.gm-all { margin-left: auto; color: var(--cyan-2); font-size: 12px; font-weight: 800; }
.gm-all:hover { color: var(--cyan); }
.gm-list { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 760px) {
    .gm-slot { margin-left: 4px; }
    .gm-btn { padding: 0 4px; min-height: 34px; }
    .gm-tx { display: none; }
    .gm-pop { left: 8px !important; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); top: auto !important; width: auto; max-height: 70vh; animation-name: gm-up; }
    @keyframes gm-up { from { opacity: 0; transform: translateY(14px); } }
}
.is-lite .gm-btn.ready, .is-lite .gm-pop { animation: none; }

.gm-card {
    position: relative; overflow: hidden; padding: 14px 14px 6px; border-radius: var(--r-lg);
    background:
        radial-gradient(240px 110px at 0% 0%, rgba(55,215,242,.1), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.gm-card[hidden] { display: none; }
.gm-card.ready { border-color: var(--green-line); background: radial-gradient(260px 120px at 0% 0%, rgba(54,216,154,.14), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.gc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.gc-h b { font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.gc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(95,204,255,.15), 0 0 10px rgba(95,204,255,.7); }
.gm-card.ready .gc-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(54,216,154,.16), 0 0 10px rgba(54,216,154,.8); }
.gc-n { min-width: 18px; padding: 1px 6px; border-radius: 99px; font-size: 10.5px; font-weight: 800; text-align: center; color: var(--dim); background: rgba(255,255,255,.07); }
.gc-badge { padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; color: var(--green-ink); background: var(--green); }
.gc-all { margin-left: auto; color: var(--faint); font-size: 11.5px; font-weight: 800; transition: color .15s; }
.gc-all:hover { color: var(--cyan-2); }

.gq {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; column-gap: 12px;
    padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06);
}
.gc-list .gq:first-child, .gm-list .gq:first-child { border-top: 0; }
.gq-ring {
    position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: conic-gradient(var(--tone) var(--p), rgba(255,255,255,.08) 0);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tone) 35%, transparent));
}
.gq-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #10151f; }
.gq-ring b { position: relative; font-family: var(--f-display); font-size: 12.5px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gq-ring i { font-style: normal; color: var(--faint); font-size: 10px; }
.gq-main { min-width: 0; }
.gq-t { display: block; font-size: 13px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.gq-tags { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.4; }
.gq-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.gq-foot .gq-rew { margin-left: auto; }
.gq-time { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); font-size: 10.5px; font-weight: 700; }
.gq-time svg { width: 11px; height: 11px; }
.gq-time.urgent { color: #ffb36b; }
.gq-rew {
    padding: 4px 9px; border-radius: 8px; white-space: nowrap;
    font-family: var(--f-display); font-size: 11.5px; font-weight: 700; letter-spacing: -.02em;
    color: var(--gold-text); background: linear-gradient(180deg, rgba(247,201,75,.16), rgba(247,201,75,.08));
    box-shadow: inset 0 0 0 1px rgba(247,201,75,.22);
}
.gq.is-ready .gq-ring { color: var(--green-ink); background: var(--green); filter: drop-shadow(0 0 10px rgba(54,216,154,.6)); }
.gq.is-ready .gq-ring::before { display: none; }
.gq.is-ready .gq-foot { display: none; }
.gq-claim {
    grid-column: 1 / -1; margin-top: 10px; min-height: 40px; border-radius: 12px;
    font-size: 13px; font-weight: 800; color: var(--green-ink); background: var(--green-grad);
    box-shadow: 0 12px 24px -14px rgba(54,216,154,.95); transition: filter .15s, transform .12s;
    animation: ms-pulse 2.2s ease-in-out infinite;
}
.gq-claim:hover { filter: brightness(1.07); }
.gq-claim:active { transform: translateY(1px); }
.gq-claim:disabled { opacity: .6; pointer-events: none; }
.gm-pop .gm-list { padding: 4px 16px 8px; gap: 0; }
.is-lite .gq-claim { animation: none; }
@media (min-width: 761px) { .has-gm-card .gm-slot { display: none; } }
@media (max-width: 760px) { .gm-card { display: none; } }

.pw-req { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
.pw-req-note { color: var(--dim); font-size: 12px; line-height: 1.55; font-weight: 700; }
.pw-req-f { display: block; }
.pw-req-f .cap { display: block; margin-bottom: 6px; }
.pw-req-f .cap i { font-style: normal; color: var(--faint-2); text-transform: none; letter-spacing: 0; }
.pw-req-f .text-input { width: 100%; }
.pw-req-f small { display: block; margin-top: 5px; color: var(--faint); font-size: 10.5px; font-weight: 700; }
.pw-req-f[hidden] { display: none; }

.pw-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.pw-pick-o {
    position: relative; display: flex; align-items: center; gap: 9px; min-width: 0;
    min-height: 46px; padding: 8px 10px 8px 8px; border-radius: 13px; text-align: left;
    color: var(--dim); background: var(--surface-2); border: 1px solid var(--line);
    transition: color .16s, background .16s, border-color .16s, box-shadow .16s, transform .14s var(--ease);
}
.pw-pick-o:hover { color: #fff; background: var(--surface-4); transform: translateY(-1px); }
.pw-pick-o:focus-visible { outline: 2px solid var(--acc-line-2); outline-offset: 2px; }
.pw-pick-o b {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px; font-weight: 800;
}
.pw-pick-o .bd {
    flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; overflow: hidden;
    font-size: 12px; font-weight: 900; line-height: 1; color: var(--dim);
    background: var(--surface-4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.pw-pick-o .bd.sm { font-size: 9px; letter-spacing: -.03em; }
.pw-pick-o .bd.has-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pw-pick-o .ok {
    position: absolute; top: -5px; right: -5px; display: grid; place-items: center;
    width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--acc-grad);
    box-shadow: 0 0 0 2px var(--panel); opacity: 0; transform: scale(.4);
    transition: opacity .16s, transform .2s var(--ease);
}
.pw-pick-o .ok svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 3; }
.pw-pick-o.on { color: #fff; background: var(--acc-soft); border-color: var(--acc-line-2); box-shadow: var(--acc-sh); }
.pw-pick-o.on .ok { opacity: 1; transform: none; }
.pw-pick-o.extra { display: none; }
.pw-pick.all .pw-pick-o.extra { display: flex; animation: pwPickIn .22s var(--ease) both; }
.pw-pick-more {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; border-radius: 12px; font-size: 11.5px; font-weight: 800; color: var(--dim);
    background: transparent; border: 1px dashed var(--line-3);
    transition: color .16s, background .16s;
}
.pw-pick-more:hover { color: #fff; background: var(--surface-2); }
.pw-pick-more svg { width: 12px; height: 12px; transform: rotate(-90deg); stroke: currentColor; fill: none; stroke-width: 2.4; }
@keyframes pwPickIn { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 440px) {
    .pw-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pw-pick:not(.all) .pw-pick-o:nth-of-type(9):not(:last-of-type) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pw-pick-o, .pw-pick-o .ok { transition: none; }
    .pw-pick.all .pw-pick-o.extra { animation: none; }
}
.pw-h2h { display: flex; flex-direction: column; gap: 8px; }
.pw-h2h-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.pw-h2h-head b { font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.pw-h2h-head small { margin-left: auto; color: var(--gold-text); font-size: 11.5px; font-weight: 800; }
.pw-h2h-row {
    display: grid; grid-template-columns: 110px minmax(0,1fr) auto; align-items: center; gap: 10px; text-align: left;
    padding: 11px 13px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line-soft);
}
.pw-h2h-row span { color: var(--faint); font-size: 11px; font-weight: 800; }
.pw-h2h-row b { font-size: 13.5px; font-weight: 800; word-break: break-all; font-variant-numeric: tabular-nums; }
.pw-h2h-row i { font-style: normal; color: var(--lilac); font-size: 11px; font-weight: 800; }
.pw-h2h .btn { margin-top: 6px; }
.pw-cancel { margin-top: 4px; color: var(--pink); font-size: 10.5px; font-weight: 800; }
.pw-cancel:disabled { opacity: .5; }

.pw-act {
    display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px;
    padding: 11px 12px; border-radius: var(--r-sm);
    background: rgba(247,201,75,.06); border: 1px solid var(--gold-line);
}
.pw-act-head { display: flex; align-items: center; gap: 7px; color: var(--gold); }
.pw-act-head b { font-size: 12.5px; font-weight: 800; color: var(--gold-text); }
.pw-act-head .lim {
    margin-left: auto; padding: 3px 8px; border-radius: 999px;
    color: var(--gold-warm); background: var(--gold-soft-2);
    font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.pw-act-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 9px;
    border-radius: var(--r-xs); background: var(--panel); border: 1px solid var(--line);
}
.pw-act-row .ic {
    flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 9px; color: var(--gold); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-soft);
    font-family: var(--f-display); font-size: 12px; font-weight: 800;
}
.pw-act-row .ic.has-img { padding: 3px; overflow: hidden; }
.pw-act-row .ic.has-img img { max-width: 100%; max-height: 100%; display: block; border-radius: 6px; }
.pw-act-row .tx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pw-act-row .tx b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pw-act-row .tx small { color: var(--faint); font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-act-row .btn { flex: none; }
.pw-act-note { margin: 0; color: var(--gold-warm); font-size: 11px; font-weight: 700; line-height: 1.45; }

.pw-act.full { background: rgba(255,102,133,.07); border-color: rgba(255,102,133,.35); }
.pw-act.full .pw-act-head, .pw-act.full .pw-act-head b { color: var(--pink); }
.pw-act.full .pw-act-head .lim { color: #fff; background: rgba(255,102,133,.25); }
.pw-act.full .pw-act-note { color: var(--text); }

.pw-bank { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pw-bank > .ic {
    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
    border-radius: 16px; color: var(--tone, var(--acc)); background: var(--surface-3);
    box-shadow: inset 0 0 0 1px var(--line-soft), 0 0 24px -8px var(--tone, var(--acc));
    font-family: var(--f-display); font-size: 17px; font-weight: 800;
}
.pw-bank > .ic.has-img { padding: 6px; overflow: hidden; }
.pw-bank > .ic.has-img img { max-width: 100%; max-height: 100%; display: block; border-radius: 10px; }
.pw-bank-t { margin-top: 4px; font-family: var(--f-display); font-size: 17px; font-weight: 700; letter-spacing: -.03em; }
.pw-bank-p { max-width: 400px; margin: 0; color: var(--dim); font-size: 12.5px; font-weight: 700; line-height: 1.5; }

.pw-bank .pw-det {
    align-self: stretch; margin: 8px 0 2px; padding: 0; border-top: 0; text-align: left;
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px;
}
.pw-bank .pw-det > div,
.pw-bank .pw-det > div:nth-child(even) {
    flex-direction: column; justify-content: flex-start; gap: 5px; padding: 12px 14px; border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    box-shadow: inset 0 0 0 1px var(--line-soft), inset 0 1px 0 rgba(255,255,255,.05);
}
.pw-bank .pw-det dt { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.pw-bank .pw-det dd { text-align: left; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.pw-bank .pw-det > div:last-child {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(77,141,255,.2), transparent 60%),
        linear-gradient(180deg, rgba(77,141,255,.08), rgba(77,141,255,.03));
    box-shadow: inset 0 0 0 1px var(--acc-line), inset 0 1px 0 rgba(255,255,255,.06);
}
.pw-bank .pw-det > div:last-child dd { font-family: var(--f-display); font-size: 19px; letter-spacing: -.03em; color: #fff; }

.pw-warn {
    position: relative; overflow: hidden; align-self: stretch; margin: 2px 0 8px;
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 14px 14px;
    border: 1px solid rgba(255,190,90,.2); border-radius: 14px; text-align: left;
    background: linear-gradient(135deg, rgba(255,184,77,.1), rgba(255,184,77,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 8px 24px -20px rgba(255,170,50,.6);
}
.pw-warn::before {
    content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px;
    border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #ffd27a, #f5a13e);
}
.pw-warn-ic {
    flex: none; width: 34px; height: 34px; margin: 1px 0 0 2px; display: grid; place-items: center;
    border: 1px solid rgba(255,200,110,.2); border-radius: 10px; color: #ffc86b;
    background: rgba(255,190,90,.09);
}
.pw-warn-tx { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.pw-warn-tx b { color: #ffe4b5; font-size: 13px; font-weight: 750; letter-spacing: -.01em; }
.pw-warn-tx span { color: rgba(255,239,214,.7); font-size: 12px; font-weight: 550; line-height: 1.5; }
.pw-warn--commission {
    padding-top: 15px; padding-bottom: 15px;
    border-color: rgba(255,100,125,.42);
    background: linear-gradient(135deg, rgba(255,70,96,.16), rgba(255,70,96,.055));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 28px -20px rgba(255,55,85,.8);
}
.pw-warn--commission::before { background: linear-gradient(180deg, #ff9aaa, #ff526d); }
.pw-warn--commission .pw-warn-ic {
    color: #ff9aaa; border-color: rgba(255,130,150,.28); background: rgba(255,90,115,.11);
}
.pw-warn-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pw-warn--commission .pw-warn-head > b { color: #fff0f3; font-size: 14px; }
.pw-warn-rate {
    flex: none; padding: 4px 8px; border: 1px solid rgba(255,145,165,.3); border-radius: 8px;
    color: #ffacba; background: rgba(255,105,130,.12); font-size: 13px; font-weight: 800; white-space: nowrap;
}
.pw-warn--commission .pw-warn-tx span { color: rgba(255,235,239,.78); font-size: 12px; }
.pw-bank .btn { align-self: stretch; }

.pw-go { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; animation: pwDet .22s var(--ease); }
.pw-go-ic {
    position: relative; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px;
    color: #cfe0ff; background: linear-gradient(160deg, rgba(77,141,255,.32), rgba(77,141,255,.08));
    box-shadow: inset 0 0 0 1px var(--acc-line), 0 0 34px -8px rgba(77,141,255,.9);
}
.pw-go-ic::after {
    content: ""; position: absolute; inset: -7px; border-radius: 23px;
    border: 1px solid rgba(77,141,255,.22); animation: pwGoRing 2.4s ease-out infinite;
}
@keyframes pwGoRing { 0% { opacity: .9; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.18); } }
.pw-go-t { margin-top: 6px; font-family: var(--f-display); font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.pw-go-p { max-width: 440px; text-wrap: balance; margin: 0; color: var(--dim); font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.pw-go-sum {
    align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 6px 0 4px; padding: 14px 16px; border-radius: 16px;
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(77,141,255,.2), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    box-shadow: inset 0 0 0 1px var(--acc-line), inset 0 1px 0 rgba(255,255,255,.06);
}
.pw-go-sum b { font-family: var(--f-display); font-size: 24px; letter-spacing: -.035em; color: #fff; font-variant-numeric: tabular-nums; }
.pw-go-sum span {
    min-width: 0; padding: 6px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
    color: var(--gold-text); background: var(--gold-soft-2, rgba(247,201,75,.1)); box-shadow: inset 0 0 0 1px var(--gold-line);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pw-go .btn { align-self: stretch; }
.pw-go-steps {
    align-self: stretch; list-style: none; margin: 6px 0 2px; padding: 4px 14px; border-radius: 16px; text-align: left;
    background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px var(--line-soft);
}
.pw-go-steps li { display: flex; align-items: center; gap: 11px; padding: 9px 0; color: var(--dim); font-size: 12.5px; font-weight: 700; }
.pw-go-steps li + li { border-top: 1px dashed var(--line-soft); }
.pw-go-steps i {
    flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
    font-style: normal; font-size: 11px; font-weight: 800; color: var(--lilac-2, #b9c8ff);
    background: var(--acc-soft); box-shadow: inset 0 0 0 1px var(--acc-line);
}
@media (prefers-reduced-motion: reduce) { .pw-go, .pw-go-ic::after { animation: none; } }
.pw-bank-back { margin-top: 2px; padding: 6px; color: var(--faint); font-size: 11.5px; font-weight: 800; }
.pw-bank-back:hover { color: #fff; }
@media (max-width: 760px) { .pw-h2h-row { grid-template-columns: 90px minmax(0,1fr) auto; } }

.bw-flash {
    position: fixed; inset: 0; z-index: 88; pointer-events: none;
    background: radial-gradient(420px 420px at var(--x) var(--y), rgba(255,210,90,.55), rgba(255,170,40,.18) 40%, transparent 70%);
    animation: bwFlash .85s ease-out forwards;
}
.bw-flash.mega { background: radial-gradient(640px 640px at var(--x) var(--y), rgba(255,220,110,.7), rgba(255,170,40,.25) 45%, transparent 72%); }
@keyframes bwFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.bw-coin { position: fixed; z-index: 89; pointer-events: none; will-change: transform, opacity; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }

.bw-banner {
    position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; cursor: pointer;
    background: radial-gradient(circle at 50% 50%, rgba(10,6,0,.55), rgba(10,6,0,.15) 60%, transparent);
    opacity: 0; transition: opacity .3s ease;
}
.bw-banner.on { opacity: 1; }
.bw-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 40px 26px; border-radius: 26px; text-align: center;
    background: radial-gradient(120% 90% at 50% 0%, rgba(255,214,110,.28), transparent 60%), linear-gradient(180deg, #2b1a04, #160d02);
    box-shadow: inset 0 0 0 2px rgba(255,200,80,.55), 0 0 0 6px rgba(255,190,60,.08), 0 30px 80px -20px rgba(255,170,40,.6);
    transform: scale(.6) rotate(-4deg); transition: transform .45s cubic-bezier(.2,1.4,.4,1);
}
.bw-banner.on .bw-card { transform: none; }
.bw-card small { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #ffe2a0; }
.bw-card b {
    font-family: var(--f-display); font-size: clamp(48px, 9vw, 76px); line-height: 1; letter-spacing: -.04em;
    background: linear-gradient(180deg, #fff6d0, #ffd45c 45%, #f29d1a); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 6px 24px rgba(247,170,40,.6));
}
.bw-card em { font-style: normal; font-family: var(--f-display); font-size: 22px; color: #7dffc4; letter-spacing: -.02em; }
@media (prefers-reduced-motion: reduce) { .bw-card { transition: none; transform: none; } }

@media (max-width: 760px) {
    .pw-why { margin-left: 14px; }
    .pw-det > div { flex-direction: row; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .pw-det { animation: none; } .pw-op, .pw-op .chev { transition: none; } .pw-op:hover { transform: none; } .pw-op.wait .am .pw-st::before { animation: none; } }

.mdl.mdl-auth { width: min(440px, calc(100vw - 24px)); }
.au { padding: 6px 4px 4px; }
.au-head { text-align: center; margin-bottom: 16px; }
.au-head svg, .au-logo { display: block; margin: 0 auto 10px; border-radius: 14px; }
.au-head h2 { font-family: var(--f-display); font-size: 22px; letter-spacing: -.035em; }
.au-head p { margin-top: 5px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.au-ok { width: 52px; height: 52px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; font-weight: 800; color: #062016; background: var(--green-grad); box-shadow: 0 10px 30px -10px rgba(54,216,154,.9); }
.au-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.28); margin-bottom: 14px; }
.au-tabs button { height: 38px; border-radius: 10px; font-size: 13px; font-weight: 800; color: var(--muted); }
.au-tabs button.on { color: #fff; background: var(--acc-grad); box-shadow: var(--acc-sh); }
.au-form { display: flex; flex-direction: column; gap: 10px; }
.au-f { display: block; }
.au-l { display: block; margin: 0 0 5px 2px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--faint); }
.au-in { display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 12px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--faint); transition: border-color .15s, box-shadow .15s; }
.au-in:focus-within { border-color: var(--acc-line-2); box-shadow: 0 0 0 3px var(--acc-soft); color: var(--lilac); }
.au-in svg { flex: none; }
.au-in input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; color: var(--text); font-size: 14px; font-weight: 600; }
.au-in input:focus { outline: none; }
.au-in input::placeholder { color: var(--faint-2); }
.au-eye { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--faint); }
.au-eye:hover { color: var(--text); background: var(--surface-3); }
.au-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.au-consent input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--acc); }
.au-consent a, .au-fine a { color: var(--lilac); }
.au-msg { min-height: 0; font-size: 12.5px; font-weight: 700; text-align: center; }
.au-msg:empty { display: none; }
.au-msg.err { color: var(--pink); }
.au-msg.ok { color: var(--mint); }
.au-go {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; margin-top: 4px; border-radius: 14px;
    font-size: 14.5px; font-weight: 800; color: #2a1600; text-decoration: none;
    background: linear-gradient(180deg, #ffe38a 0%, #f7b733 55%, #e08a12 100%);
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(120,60,0,.35), 0 12px 28px -12px rgba(247,170,40,.8);
}
.au-go i { font-style: normal; }

.mdl.mdl-invite { width: min(420px, calc(100vw - 24px)); }
.inv { position: relative; padding: 4px 4px 2px; text-align: center; }
.inv::before {
    content: ''; position: absolute; left: 50%; top: 0; width: 260px; height: 220px; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(247,183,51,.28), rgba(77,141,255,.12) 60%, transparent);
    pointer-events: none;
}
.inv-art { position: relative; display: block; height: 200px; width: auto; margin: 0 auto -6px; filter: drop-shadow(0 14px 24px rgba(0,0,0,.45)); }
.inv-from {
    position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 12px; padding: 6px 14px 6px 6px;
    border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-2);
}
.inv-ava { width: 36px; height: 36px; flex: none; }
.inv-ava i {
    width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%;
    color: #fff; background: var(--acc-grad); font-style: normal;
    font-family: var(--f-display); font-size: 15px; font-weight: 800;
}
.inv-who { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.inv-who b { font-size: 13.5px; font-weight: 800; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-who small { color: var(--lilac); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.inv h2 { font-family: var(--f-display); font-size: 21px; line-height: 1.2; letter-spacing: -.03em; overflow-wrap: anywhere; }
.inv p { margin: 8px auto 0; max-width: 340px; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.5; }
.inv p b { color: var(--text); }
.inv-proof {
    display: inline-block; margin-top: 12px; padding: 5px 12px; border-radius: 999px;
    color: var(--mint); background: var(--green-soft-2); font-size: 12px; font-weight: 800;
}
.inv-go { margin-top: 16px; cursor: pointer; border: 0; }
.inv-later { display: block; width: 100%; margin-top: 6px; height: 40px; border-radius: 12px; color: var(--faint); font-size: 13px; font-weight: 700; }
.inv-later:hover { color: var(--text); background: var(--surface-2); }
@media (max-width: 760px) {

    .mdl.mdl-invite { width: 100%; }
    .inv-art { height: 170px; }
}
@media (max-height: 640px) { .inv-art { height: 130px; } }
.au-go:hover { filter: brightness(1.05); }
.au-go:disabled, .au-go.is-busy { opacity: .6; pointer-events: none; }
.au-soft + .au-go { margin-top: 10px; }
.au-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--faint); font-size: 11px; font-weight: 700; }
.au-or::before, .au-or::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.au-quick { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; border-radius: 13px; font-size: 13.5px; font-weight: 800; color: #fff; background: var(--acc-grad); box-shadow: var(--acc-sh); }
.au-quick.is-busy { opacity: .6; pointer-events: none; }
.au-fine { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--faint); text-align: center; }
.au-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.au-tg { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #fff; background: #2aa3e0; }
.au-tg:hover { filter: brightness(1.08); }
.au-google { min-height: 44px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.au-google[hidden] { display: none; }
.au-socials:has(.au-google[hidden]) { grid-template-columns: 1fr; }
.au-back { display: block; margin: 12px auto 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.au-back:hover { color: var(--text); }
.au-soft { width: 100%; height: 42px; margin-top: 8px; border-radius: 12px; font-size: 13px; font-weight: 800; color: var(--text); background: var(--surface-3); border: 1px solid var(--line-2); }
.au-cap { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 90px; justify-content: center; margin-bottom: 8px; }
.au-capimg { display: flex; align-items: center; gap: 8px; }
.au-capimg img { border-radius: 10px; background: #fff; }
.au-capimg button { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; color: var(--text); background: var(--surface-3); }
.au-capin { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; text-align: center; font-size: 16px; font-weight: 800; letter-spacing: .2em; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2); }
.au-code, .au-cred { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); }
.au-code b { flex: 1; min-width: 0; font-family: var(--f-display); font-size: 26px; letter-spacing: .12em; text-align: center; }

@media (max-width: 480px) { .au-code b { font-size: 19px; letter-spacing: .06em; } }
.au-cred small { flex: none; width: 58px; color: var(--faint); font-size: 11px; font-weight: 800; }
.au-cred b { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.au-code button, .au-cred button { flex: none; height: 32px; padding: 0 12px; border-radius: 9px; font-size: 12px; font-weight: 800; color: var(--lilac); background: var(--acc-soft); }
.au-wait { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 12px; font-weight: 700; }
.au-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--acc); animation: auSpin .8s linear infinite; margin: 10px auto; }
.au-spin.sm { width: 14px; height: 14px; border-width: 2px; margin: 0; }
@keyframes auSpin { to { transform: rotate(360deg); } }

.tgb .au-head p b { color: var(--text); }
.tgb-step { margin: 0 0 8px; text-align: center; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.tgb .au-msg { margin-top: 10px; }

.guest-acts { display: flex; gap: 8px; }
.guest-acts .btn { height: 42px; padding: 0 18px; border-radius: 12px; font-weight: 800; }
@media (max-width: 760px) {
    .guest-acts { gap: 6px; }
    .guest-acts .btn { height: 38px; padding: 0 12px; font-size: 12.5px; }
    .guest-acts .btn { padding: 0 11px; }
}

.cp { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 70px; justify-content: center; }
.cp:empty { display: none; }
.cp-widget { min-height: 65px; display: flex; justify-content: center; }
.cp-img { display: flex; align-items: center; gap: 8px; }
.cp-img img { border-radius: 10px; background: #fff; }
.cp-reload { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; color: var(--text); background: var(--surface-3); }
.cp-in { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; text-align: center; font-size: 16px; font-weight: 800; letter-spacing: .2em; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2); }
.cp-in:focus { outline: none; border-color: var(--acc-line-2); box-shadow: 0 0 0 3px var(--acc-soft); }
.cp-retry { font-size: 12.5px; font-weight: 700; color: var(--lilac); }
.cp-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--acc); animation: auSpin .8s linear infinite; }

.pc-form { display: flex; flex-direction: column; gap: 10px; }
.pc-code {
    width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; font-size: 16px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-2);
}
.pc-code::placeholder { letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--faint-2); }
.pc-code:focus { outline: none; border-color: var(--acc-line-2); box-shadow: 0 0 0 3px var(--acc-soft); }
.pc-cap { min-height: 0; }
.pc-msg { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pc-msg:empty { display: none; }
.pc-msg.err { color: var(--pink); }
.pc-msg.ok { color: var(--mint); }
.pc-msg a { color: var(--lilac); white-space: nowrap; }
.pc-go { height: 48px; }
.pc-hist { margin-top: 14px; }
.pc-hist:empty { display: none; }
.pc-hist-t { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.pc-h { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.pc-h span { flex: 1; min-width: 0; }
.pc-h b { display: block; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.pc-h small { display: block; margin-top: 2px; color: var(--faint); font-size: 11px; font-weight: 700; }
.pc-h em { flex: none; font-style: normal; font-weight: 800; font-size: 13px; color: var(--mint); }
@media (prefers-reduced-motion: reduce) { .wm-glow, .wm-rays, .wm-actions .btn-acc::after { animation: none; } .wm-load .arc, .wm-load .sk::after { animation-duration: 3s; } }
html.is-lite .ticker .e.sk, html.is-webview .ticker .e.sk { animation: none; }

.mdl.mdl-guard { width: min(480px, calc(100vw - 32px)); overflow: hidden; }
.mdl-guard .mdl-scroll { padding: 0; scrollbar-gutter: auto; }
.gd { position: relative; padding: 0 22px 18px; }
.gd-hero {
    position: relative; margin: 0 -22px; padding: 34px 26px 20px; text-align: center;
    background:
        radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--gd) 30%, transparent), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.025), transparent);
}
.gd-hero::after {
    content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gd) 45%, transparent), transparent);
}
.gd-orb {
    position: relative; width: 72px; height: 72px; margin: 0 auto 24px;
    display: grid; place-items: center; border-radius: 24px; color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--gd) 92%, #fff), color-mix(in srgb, var(--gd) 70%, #000));
    box-shadow: 0 18px 40px -14px var(--gd), inset 0 1px 0 rgba(255,255,255,.35);
    animation: gdPop .5s var(--ease) both;
}
.gd-orb::before {
    content: ''; position: absolute; inset: -10px; border-radius: 30px;
    border: 1px solid color-mix(in srgb, var(--gd) 40%, transparent);
    animation: gdRing 2.4s ease-out infinite;
}
.gd-orb svg { width: 30px; height: 30px; }
.gd-eye {
    display: inline-block; padding: 4px 10px; border-radius: 999px; margin-bottom: 9px;
    font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: color-mix(in srgb, var(--gd) 70%, #fff); background: color-mix(in srgb, var(--gd) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--gd) 28%, transparent);
}
.gd-t { margin: 0 0 8px; font-family: var(--f-display); font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -.03em; }
.gd-p { margin: 0 auto; max-width: 360px; color: var(--dim); font-size: 13.5px; line-height: 1.5; }
.gd-cta { margin-top: 16px; gap: 9px; }
.gd-cta svg { width: 18px; height: 18px; }
.gd-cta.is-busy { opacity: .7; }
.gd-later {
    display: block; margin: 10px auto 0; padding: 8px 14px; border-radius: 10px;
    color: var(--muted); font-size: 13px; font-weight: 700; background: none; border: 0; cursor: pointer;
}
.gd-later:hover { color: var(--text); background: var(--surface-2); }

.gd-games { display: grid; gap: 8px; margin-top: 18px; }
.gd-game {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 9px; border-radius: 16px;
    color: inherit; text-decoration: none;
    background: linear-gradient(100deg, color-mix(in srgb, var(--tone) 13%, transparent), var(--surface) 60%);
    border: 1px solid color-mix(in srgb, var(--tone) 24%, var(--line));
    transition: transform .18s var(--ease), border-color .18s;
    animation: gdIn .4s var(--ease) both; animation-delay: calc(var(--i) * 60ms + 120ms);
}
.gd-game:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--tone) 55%, transparent); }
.gd-game-art {
    flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px;
    color: var(--tone);
    background: radial-gradient(80% 80% at 30% 25%, color-mix(in srgb, var(--tone) 30%, transparent), transparent 75%),
                color-mix(in srgb, var(--tone) 12%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.gd-game-art svg { width: 28px; height: 28px; }
.gd-game-tx { flex: 1; min-width: 0; }
.gd-game-tx b { display: block; font-size: 15px; font-weight: 800; }
.gd-game-tx small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 600; }
.gd-game-go {
    flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
    color: #fff; background: var(--tone); box-shadow: 0 8px 20px -8px var(--tone);
}
.gd-game-go svg { width: 15px; height: 15px; }

.gd-fs {
    display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px;
    padding: 18px; border-radius: 18px;
    background: radial-gradient(80% 120% at 30% 50%, rgba(95,204,255,.16), transparent 70%), var(--surface-2);
    border: 1px solid var(--cyan-line);
}
.gd-fs strong {
    font-family: var(--f-display); font-size: 46px; line-height: 1; font-weight: 800;
    background: linear-gradient(160deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 6px 18px rgba(95,204,255,.35));
}
.gd-fs span { font-size: 17px; font-weight: 800; }
.gd-fs small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 600; }

.gd-sk {
    flex-direction: column; gap: 8px; text-align: center;
    background: radial-gradient(80% 120% at 50% 30%, rgba(255,138,60,.18), transparent 70%), var(--surface-2);
    border-color: rgba(255,138,60,.35);
}
.gd-sk strong {
    font-size: clamp(24px, 7.5vw, 34px); background-image: linear-gradient(160deg, #fff, #ff8a3c);
    filter: drop-shadow(0 6px 18px rgba(255,138,60,.35));
}
.gd-sk strong i { font-style: normal; white-space: nowrap; }

.gd-bal { margin-top: 18px; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.gd-bal-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--dim); font-weight: 600; }
.gd-bal-row b { font-family: var(--f-display); font-size: 17px; color: var(--text); }
.gd-bal-lim b { font-size: 14px; color: var(--pink); }
.gd-bal-bar { position: relative; height: 8px; margin: 12px 0; border-radius: 999px; background: linear-gradient(90deg, var(--pink), #ffb36b); }
.gd-bal-bar i {
    position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 3px; background: #fff;
    box-shadow: 0 0 0 3px rgba(255,102,133,.35); left: var(--x, 0); transform: translateX(-50%);
}

.gd-more {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px;
    padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 12px;
}
.gd-more > span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-weight: 700; }
.gd-more > span svg { width: 14px; height: 14px; }
.gd-more i {
    font-style: normal; padding: 4px 9px; border-radius: 999px; font-weight: 700;
    color: var(--dim); background: var(--surface-3); border: 1px solid var(--line-2);
}

@keyframes gdPop { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes gdRing { 0% { opacity: .9; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes gdIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
    .mdl.mdl-guard { width: 100%; }
    .mdl-guard .mdl-scroll { padding: 0 0 env(safe-area-inset-bottom); }
    .gd { padding: 0 16px 14px; }
    .gd-hero { margin: 0 -16px; padding: 40px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .gd-orb, .gd-orb::before, .gd-game { animation: none; }
}

.mdl.mdl-pfs { width: min(460px, calc(100vw - 32px)); overflow: hidden; }
.mdl-pfs .mdl-scroll { padding: 0; scrollbar-gutter: auto; }
.mdl-pfs .mdl-x { z-index: 3; background: rgba(8,12,22,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pfs-hero {
    position: relative; overflow: hidden; padding: 30px 0 34px; display: grid; place-items: center;
    background: radial-gradient(90% 100% at 50% 0%, rgba(95,204,255,.24), transparent 70%);
}
.pfs-blur {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; filter: blur(28px) saturate(1.4); opacity: .5; transform: scale(1.35);
    -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 72%); mask-image: linear-gradient(180deg, #000 25%, transparent 72%);
}
.pfs-cover {
    position: relative; z-index: 1; width: 150px; aspect-ratio: 1; border-radius: 22px;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--cyan) 92%, #fff), color-mix(in srgb, var(--cyan) 55%, #000));
    box-shadow: 0 22px 50px -16px rgba(95,204,255,.6), 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.3);
    animation: gdPop .5s var(--ease) both;
}
.pfs-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pfs-reels svg { width: 46px; height: 46px; }
.pfs:not(.no-art) .pfs-reels { display: none; }
.pfs.no-art .pfs-cover img, .pfs.no-art .pfs-blur { display: none; }
.pfs-count {
    position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); white-space: nowrap; z-index: 1;
    padding: 5px 12px; border-radius: 999px; font-family: var(--f-display); font-size: 17px; font-weight: 800;
    color: #062033; background: linear-gradient(160deg, #fff, var(--cyan));
    box-shadow: 0 8px 20px -6px rgba(95,204,255,.75);
}
.pfs-body { padding: 6px 22px 18px; text-align: center; }
.pfs-eye {
    display: inline-block; padding: 4px 10px; border-radius: 999px; margin-bottom: 9px;
    font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--mint); background: color-mix(in srgb, var(--mint) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mint) 28%, transparent);
}
.pfs-t { margin: 0 0 8px; font-family: var(--f-display); font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -.03em; }
.pfs-p { margin: 0 auto; max-width: 360px; color: var(--dim); font-size: 13.5px; line-height: 1.5; }
.pfs-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.pfs-facts span {
    padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
    color: var(--dim); background: var(--surface-3); border: 1px solid var(--line-2);
}
.pfs-facts .is-wager { color: #ffc861; border-color: rgba(255,200,97,.35); }
.pfs-facts .is-free { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 35%, transparent); }
.pfs-cta { margin-top: 16px; gap: 9px; }
.pfs-cta svg { width: 16px; height: 16px; }
.pfs-cta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfs-later {
    display: block; margin: 10px auto 0; padding: 8px 14px; border-radius: 10px;
    color: var(--muted); font-size: 13px; font-weight: 700; background: none; border: 0; cursor: pointer;
}
.pfs-later:hover { color: var(--text); background: var(--surface-2); }
@media (max-width: 760px) {
    .mdl.mdl-pfs { width: 100%; }
    .mdl-pfs .mdl-scroll { padding: 0 0 env(safe-area-inset-bottom); }
    .pfs-hero { padding-top: 38px; }
    .pfs-body { padding: 6px 16px 14px; }
}
.is-lite .pfs-blur { display: none; }
@media (prefers-reduced-motion: reduce) { .pfs-cover { animation: none; } }

.mdl.mdl-lite {
    width: min(440px, calc(100vw - 32px)); overflow: hidden;
    background: linear-gradient(180deg, #161a2a, var(--screen) 300px);
    border-color: rgba(247,201,75,.16);
}
.mdl.mdl-lite::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 300px; pointer-events: none;
    background:
        radial-gradient(260px 200px at 50% 22%, rgba(247,201,75,.22), transparent 70%),
        radial-gradient(240px 160px at 0% 0%, rgba(77,141,255,.16), transparent 72%),
        radial-gradient(240px 160px at 100% 10%, rgba(140,92,255,.14), transparent 72%);
}
.mdl.mdl-lite::after {
    content: ""; position: absolute; inset: 0 0 auto; height: 220px; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
}
.mdl-lite .mdl-scroll { position: relative; z-index: 1; padding: 26px 26px 22px; }

.lto { display: flex; flex-direction: column; align-items: center; text-align: center; }

.lto-art { position: relative; width: 150px; height: 120px; display: grid; place-items: center; margin: 4px 0 10px; }
.lto-ic {
    position: relative; z-index: 2; width: 74px; height: 74px; display: grid; place-items: center; border-radius: 24px;
    color: var(--gold-ink); background: var(--gold-grad);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -10px 18px rgba(160,90,0,.35), 0 18px 40px -12px rgba(247,201,75,.85);
    transform: rotate(-8deg); animation: lto-pop .6s var(--ease) both;
}
.lto-ic svg { transform: rotate(8deg); fill: rgba(23,19,7,.12); }
.lto-ring {
    position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 26px;
    border: 1.5px solid rgba(247,201,75,.5); opacity: 0;
    animation: lto-wave 2.8s cubic-bezier(.2,.7,.3,1) infinite;
}
.lto-ring.r2 { animation-delay: .9s; }
.lto-ring.r3 { animation-delay: 1.8s; }
@keyframes lto-wave { 0% { opacity: .9; transform: rotate(-8deg) scale(1); } 100% { opacity: 0; transform: rotate(-8deg) scale(2.1); } }
@keyframes lto-pop { 0% { opacity: 0; transform: rotate(-30deg) scale(.6); } 100% { opacity: 1; transform: rotate(-8deg) scale(1); } }
.lto-chip {
    position: absolute; z-index: 3; padding: 5px 9px; border-radius: 999px; white-space: nowrap;
    font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--text);
    background: rgba(12,16,28,.82); border: 1px solid var(--line-3);
    box-shadow: 0 10px 24px -10px rgba(0,0,0,.8);
    animation: lto-float 4s ease-in-out infinite;
}
.lto-chip.c1 { left: -18px; top: 18px; color: var(--green); border-color: rgba(54,216,154,.32); }
.lto-chip.c2 { right: -22px; bottom: 16px; color: var(--gold-text); border-color: var(--gold-line); animation-delay: -2s; }
@keyframes lto-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.lto-kick {
    margin-bottom: 8px; padding: 4px 10px; border-radius: 999px;
    color: var(--gold-text); background: var(--gold-soft); border: 1px solid var(--gold-line);
    font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.lto-t { margin: 0 0 8px; font-family: var(--f-display); font-size: 23px; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }
.lto-s { max-width: 350px; margin: 0 0 18px; color: var(--dim); font-size: 13px; line-height: 1.5; }

.lto-pros { width: 100%; display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; text-align: left; }
.lto-pros li {
    display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
    border: 1px solid var(--line);
    animation: lto-in .45s var(--ease) both;
}
.lto-pros li:nth-child(1) { animation-delay: .12s; }
.lto-pros li:nth-child(2) { animation-delay: .2s; }
.lto-pros li:nth-child(3) { animation-delay: .28s; }
@keyframes lto-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
.lto-pi {
    flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px;
    color: var(--gold-text); background: var(--gold-soft-2); border: 1px solid var(--gold-line);
}
.lto-pros b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.lto-pros small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 600; }

.lto-act { width: 100%; display: grid; gap: 8px; }
.lto-act .btn-gold { gap: 8px; }
.lto-note { margin: 14px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.lto-kbd {
    display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0 2px; vertical-align: -5px;
    border-radius: 7px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-3);
}

@media (max-width: 760px) {
    .mdl.mdl-lite { width: 100%; }
    .mdl-lite .mdl-scroll { padding: 40px 18px calc(18px + env(safe-area-inset-bottom)); }
    .lto-art { height: 108px; margin-top: 0; }
    .lto-t { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
    .lto-ring, .lto-chip, .lto-ic, .lto-pros li { animation: none; }
}
html.is-lite .lto-ring, html.is-lite .lto-chip { animation: none; }

.rounds { gap: 5px; }
.rounds .r { grid-template-columns: 50px minmax(0, 1fr) auto; overflow: hidden; padding: 7px 12px 7px 10px; }
.rounds .r::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: rgba(255,107,107,.35); }
.rounds .r.win::before { background: var(--green); box-shadow: 0 0 10px rgba(54,216,154,.6); }
.rounds .m { height: 30px; }
.rounds .r.lose .m { color: rgba(255,138,138,.75); background: rgba(255,107,107,.07); box-shadow: inset 0 0 0 1px rgba(255,107,107,.12); }
.rounds .r.lose .a { color: var(--dim); }
.rounds .rt { font-size: 10px; }

.bsx { position: fixed; left: 16px; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 10px;
    padding: 7px 14px 7px 7px; border-radius: 16px; text-decoration: none; color: #fff; min-width: 210px;
    background: linear-gradient(135deg, rgba(42,16,40,.94), rgba(20,14,40,.94));
    border: 1px solid rgba(255,90,110,.45); box-shadow: 0 14px 34px -12px rgba(255,60,90,.65), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none; transition: opacity .3s, transform .3s; }
.bsx.on { opacity: 1; transform: none; pointer-events: auto; }
.bsx:hover { border-color: rgba(255,120,135,.8); }
.bsx-av { position: relative; flex: none; width: 42px; height: 42px; border-radius: 12px; overflow: hidden;
    background: radial-gradient(circle at 50% 70%, rgba(255,90,110,.45), rgba(255,90,110,0) 70%), #1a1030; }
.bsx-av i { display: block; background: center / contain no-repeat; position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: contain; pointer-events: none; }
.bsx-tx { display: grid; gap: 4px; min-width: 0; flex: 1; }
.bsx-n { font: 800 12.5px/1.1 Unbounded, Manrope, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsx-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.bsx-bar i { display: block; height: 100%; width: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #ff3d5a, #ff8a5c); box-shadow: 0 0 10px rgba(255,80,100,.8); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.bsx-s { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bsx[data-phase="idle"] { border-color: rgba(247,201,75,.5); animation: bsx-warn 1.6s ease-in-out infinite; }
.bsx[data-phase="idle"] .bsx-bar i { background: linear-gradient(90deg, #f7c94b, #ffab3d); }
.bsx[data-phase="result"] .bsx-bar i { background: linear-gradient(90deg, #36d89a, #7fe07f); }
.bsx.hit .bsx-av { animation: bsx-hit .4s ease-out; }
.bsx-pops { position: absolute; left: 30px; top: -4px; pointer-events: none; }
.bsx-pop { position: absolute; left: 0; bottom: 0; font: 800 15px/1 Unbounded, sans-serif; font-style: normal; color: #ff6b7f;
    text-shadow: 0 2px 10px rgba(255,60,90,.8); white-space: nowrap; animation: bsx-pop 1.4s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes bsx-pop { 0% { opacity: 0; transform: translate(0, 6px) scale(.6); } 15% { opacity: 1; transform: translate(0, -6px) scale(1.15); }
    100% { opacity: 0; transform: translate(14px, -46px) scale(.9); } }
@keyframes bsx-hit { 0% { transform: none; filter: none; } 30% { transform: translateX(-3px) rotate(-4deg); filter: brightness(1.8) saturate(1.6); }
    60% { transform: translateX(3px) rotate(3deg); } 100% { transform: none; filter: none; } }
@keyframes bsx-warn { 50% { box-shadow: 0 14px 34px -12px rgba(247,201,75,.85), 0 0 0 4px rgba(247,201,75,.12); } }
@media (max-width: 860px) { .bsx { left: 10px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); min-width: 0; max-width: calc(100vw - 20px); } }
html.is-lite .bsx { backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (max-width: 860px) { body.has-dock .bsx { bottom: auto; top: calc(66px + env(safe-area-inset-top, 0px)); padding: 5px 10px 5px 5px; gap: 7px; }
    body.has-dock .bsx-av { width: 32px; height: 32px; } body.has-dock .bsx-n { font-size: 11px; } }

.hbx { --boss: #ff5a6e; position: relative; isolation: isolate; display: flex; align-items: center; gap: 18px; min-height: 148px;
    margin: 0 0 4px; padding: 18px 22px; border-radius: var(--r-lg, 18px); overflow: hidden; text-decoration: none; color: #fff;
    border: 1px solid color-mix(in srgb, var(--boss) 40%, rgba(255,255,255,.08));
    box-shadow: 0 22px 50px -26px color-mix(in srgb, var(--boss) 80%, #000); transition: transform .2s, box-shadow .2s; }
.hbx:hover { transform: translateY(-2px); box-shadow: 0 28px 56px -24px color-mix(in srgb, var(--boss) 95%, #000); }
.hbx-bg { position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(10,7,26,.94) 0%, rgba(10,7,26,.78) 45%, rgba(10,7,26,.25) 100%),
                radial-gradient(50% 90% at 82% 70%, color-mix(in srgb, var(--boss) 40%, transparent), transparent 70%),
                url(../assets/art/boss/arena.webp) center 65% / cover no-repeat; }
.hbx-tx { position: relative; z-index: 1; flex: 1; min-width: 0; display: grid; gap: 6px; }
.hbx-eye { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: color-mix(in srgb, var(--boss) 65%, #fff); }
.hbx-eye i { width: 8px; height: 8px; border-radius: 50%; background: var(--boss); box-shadow: 0 0 10px var(--boss); }

.hbx[data-phase="fight"] .hbx-eye i, .hbx[data-phase="warn"] .hbx-eye i { animation: hbx-pulse 1.4s ease-in-out infinite; will-change: opacity, transform; }
@keyframes hbx-pulse { 50% { opacity: .35; transform: scale(.7); } }
.hbx-eye em { font-style: normal; padding: 2px 7px; border-radius: 6px; letter-spacing: .04em; color: #1d1405; background: linear-gradient(90deg,#ffd76a,#ffab3d); }
.hbx-n { font: 800 clamp(20px, 2.4vw, 28px)/1.1 var(--f-display, Unbounded), sans-serif; text-shadow: 0 4px 24px color-mix(in srgb, var(--boss) 60%, transparent); }
.hbx-sub { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbx-hp { display: block; height: 8px; max-width: 460px; margin-top: 4px; border-radius: 9px; background: rgba(255,255,255,.1); overflow: hidden; }
.hbx-hp i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff2d55, #ff9a3c); box-shadow: 0 0 12px rgba(255,60,80,.8); transition: width .6s; }
.hbx[data-phase="idle"] .hbx-hp, .hbx[data-phase="warn"] .hbx-hp { opacity: .35; }
.hbx[data-phase="result"] .hbx-hp i { background: linear-gradient(90deg, #36d89a, #7fe07f); }
.hbx-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.hbx-row b { color: #fff; } .hbx-row b.g { color: var(--gold, #f7c94b); }
.hbx-art { position: relative; z-index: 1; flex: none; width: 170px; height: 150px; margin: -18px 0 -30px; }
.hbx-art i { display: block; background: center bottom / contain no-repeat; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; pointer-events: none;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)) drop-shadow(0 0 20px color-mix(in srgb, var(--boss) 45%, transparent));
    animation: hbx-float 3.2s ease-in-out infinite; }

.hbx-art::before { content: ''; position: absolute; left: 6%; right: 6%; top: 14%; bottom: 4%; border-radius: 50%; z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--boss) 55%, transparent), transparent 75%);
    filter: blur(8px); opacity: .55; animation: hbx-halo 2.6s ease-in-out infinite; }
.hbx[data-phase="idle"] .hbx-art i, .hbx[data-phase="warn"] .hbx-art i {
    filter: brightness(0)
        drop-shadow(0 0 1px color-mix(in srgb, var(--boss) 45%, #fff))
        drop-shadow(0 0 1px color-mix(in srgb, var(--boss) 45%, #fff))
        drop-shadow(0 0 7px var(--boss))
        drop-shadow(0 0 18px color-mix(in srgb, var(--boss) 70%, transparent)); }
.hbx[data-phase="idle"] .hbx-art::before, .hbx[data-phase="warn"] .hbx-art::before { opacity: .9; }
.hbx[data-phase="warn"] .hbx-art::before { animation-duration: 1.2s; }
@keyframes hbx-halo { 50% { transform: scale(1.08); opacity: 1; } }
@keyframes hbx-float { 50% { transform: translateY(-6px); } }
.hbx-go { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 13px;
    font: 800 14px/1 var(--f-text, Manrope), sans-serif; color: #fff; background: linear-gradient(135deg, #ff3d5a, #ff8a5c);
    box-shadow: 0 12px 26px -12px rgba(255,61,90,.95); }
.hbx[data-phase="warn"] { animation: hbx-warn 1.6s ease-in-out infinite; }
@keyframes hbx-warn { 50% { box-shadow: 0 0 0 3px rgba(247,201,75,.35), 0 22px 50px -26px rgba(247,201,75,.9); } }
@media (max-width: 720px) {
    .hbx { min-height: 0; padding: 14px; gap: 10px; flex-wrap: wrap; }
    .hbx-art { position: absolute; right: -6px; bottom: -8px; width: 112px; height: 112px; margin: 0; opacity: .95; }
    .hbx-tx { padding-right: 96px; }
    .hbx-sub { white-space: normal; font-size: 12px; }
    .hbx-go { width: 100%; justify-content: center; padding: 11px; }
}
html.is-lite .hbx-art i { animation: none; }

@media (max-width: 760px) { .screen.home .hbx { order: 1; } }

.dbx { --dm: #f7c94b; position: relative; isolation: isolate; display: flex; align-items: center; gap: 18px; min-height: 148px;
    margin: 0 0 4px; padding: 18px 22px; border-radius: var(--r-lg, 18px); overflow: hidden; color: #fff; cursor: pointer;
    border: 1px solid rgba(247,201,75,.35);
    box-shadow: 0 22px 50px -26px rgba(247,201,75,.55); transition: transform .2s, box-shadow .2s; }
.dbx:hover { transform: translateY(-2px); box-shadow: 0 28px 56px -24px rgba(247,201,75,.75); }
.dbx-bg { position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(45% 110% at 80% 60%, color-mix(in srgb, var(--dm) 34%, transparent), transparent 70%),
                radial-gradient(40% 90% at 0% 0%, rgba(247,201,75,.16), transparent 70%),
                linear-gradient(120deg, #1d1630 0%, #111529 55%, #0d1122 100%); }
.dbx-bg::after { content: ''; position: absolute; right: 10%; top: 50%; width: 420px; height: 420px; transform: translateY(-50%);
    background: repeating-conic-gradient(from 0deg, rgba(255,226,138,.09) 0 8deg, transparent 8deg 22deg); border-radius: 50%;
    -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%); }
.dbx-tx { position: relative; z-index: 1; flex: 1; min-width: 0; display: grid; gap: 6px; }
.dbx-eye { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffe28a; }
.dbx-eye i { width: 8px; height: 8px; border-radius: 50%; background: #f7c94b; box-shadow: 0 0 10px #f7c94b; }
.dbx-eye em { font-style: normal; padding: 2px 7px; border-radius: 6px; letter-spacing: .04em; color: #1d1405; background: linear-gradient(90deg,#ffd76a,#ffab3d); }
.dbx-n { font: 800 clamp(20px, 2.4vw, 28px)/1.1 var(--f-display, Unbounded), sans-serif; text-shadow: 0 4px 24px color-mix(in srgb, var(--dm) 55%, transparent); }
.dbx-sub { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.dbx-row b { color: #fff; } .dbx-row b.g { color: var(--gold, #f7c94b); }
.dbx-art { position: relative; z-index: 1; flex: none; width: 220px; height: 150px; margin: -18px 0 -30px; }
.dbx-card { position: absolute; left: 4px; top: 22px; width: 104px; height: 104px; border-radius: 18px; transform: rotate(-7deg);
    background: center / 88% no-repeat, radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--dm) 40%, #1a2040), #10142a 75%);
    background-color: #10142a;
    box-shadow: 0 16px 30px -14px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.12), 0 0 0 3px rgba(247,201,75,.4); }
.dbx-lion { position: absolute; right: 0; bottom: 0; width: 132px; height: 160px; pointer-events: none;
    background: url(../assets/art/daily/lion-v3.webp) center bottom / contain no-repeat;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.55)); animation: hbx-float 3.4s ease-in-out infinite; }
.dbx-go { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 13px;
    font: 800 14px/1 var(--f-text, Manrope), sans-serif; color: #2a1a00; background: linear-gradient(180deg, #ffe28a, #f0a62c);
    box-shadow: 0 12px 26px -12px rgba(247,201,75,.95); }
.dbx.is-ready { animation: dbx-ready 1.8s ease-in-out infinite; }
@keyframes dbx-ready { 50% { box-shadow: 0 0 0 3px rgba(247,201,75,.35), 0 22px 50px -26px rgba(247,201,75,.95); } }
@media (max-width: 720px) {
    .dbx { min-height: 0; padding: 14px; gap: 10px; flex-wrap: wrap; }
    .dbx-art { position: absolute; right: 2px; top: 10px; bottom: auto; width: 150px; height: 118px; margin: 0; }
    .dbx-card { width: 66px; height: 66px; top: 26px; left: 0; border-radius: 13px; }
    .dbx-lion { width: 96px; height: 118px; }
    .dbx-tx { padding-right: 128px; }
    .dbx-sub { white-space: normal; font-size: 12px; }
    .dbx-go { width: 100%; justify-content: center; padding: 11px; }
}
html.is-lite .dbx-lion, html.is-lite .dbx.is-ready { animation: none; }
@media (prefers-reduced-motion: reduce) { .dbx-lion, .dbx.is-ready { animation: none; } }
@media (max-width: 760px) { .screen.home .dbx { order: 1; } }

.sbx { position: relative; isolation: isolate; display: flex; align-items: center; gap: 18px; min-height: 140px;
    margin: 0 0 4px; padding: 18px 22px; border-radius: var(--r-lg, 18px); overflow: hidden; color: #fff; cursor: pointer;
    border: 1px solid rgba(255,138,60,.35); box-shadow: 0 22px 50px -26px rgba(255,110,40,.6); transition: transform .2s, box-shadow .2s; }
.sbx:hover { transform: translateY(-2px); box-shadow: 0 28px 56px -24px rgba(255,110,40,.8); }
.sbx-bg { position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(42% 110% at 82% 70%, rgba(255,120,40,.34), transparent 70%),
                radial-gradient(40% 90% at 0% 0%, rgba(255,80,60,.14), transparent 70%),
                linear-gradient(120deg, #2a1420 0%, #161228 55%, #0d1022 100%); }
.sbx-tx { position: relative; z-index: 1; flex: 1; min-width: 0; display: grid; gap: 6px; }
.sbx-eye { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffb27a; }
.sbx-eye i { width: 8px; height: 8px; border-radius: 50%; background: #ff8a3c; box-shadow: 0 0 10px #ff8a3c; }
.sbx-eye em { font-style: normal; padding: 2px 7px; border-radius: 6px; letter-spacing: .04em; color: #1d1405; background: linear-gradient(90deg,#ffd76a,#ffab3d); }
.sbx-n { font: 800 clamp(19px, 2.2vw, 26px)/1.1 var(--f-display, Unbounded), sans-serif; text-shadow: 0 4px 24px rgba(255,120,40,.5); }
.sbx-sub { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbx-dots { display: flex; gap: 5px; }
.sbx-dots i { width: 22px; height: 6px; border-radius: 9px; background: rgba(255,255,255,.12); }
.sbx-dots i.on { background: linear-gradient(90deg, #ff6a3c, #ffb03c); box-shadow: 0 0 8px rgba(255,138,60,.7); }
.sbx-dots i.now { background: rgba(255,138,60,.35); box-shadow: inset 0 0 0 1px #ff8a3c; animation: sbx-now 1.6s ease-in-out infinite; will-change: opacity; }
@keyframes sbx-now { 50% { opacity: .4; } }
.sbx-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.sbx-row b { color: #fff; }
.sbx.is-risk .sbx-row span:last-child b { color: #ff7a85; }
.sbx-art { position: relative; z-index: 1; flex: none; width: 150px; height: 150px; margin: -18px 0 -30px; }
.sbx-art i { position: absolute; inset: 0; background: url(../assets/art/streak/lion-v3.webp) center bottom / contain no-repeat;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.55)); animation: hbx-float 3.4s ease-in-out infinite; }
.sbx-go { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 13px;
    font: 800 14px/1 var(--f-text, Manrope), sans-serif; color: #fff; background: linear-gradient(135deg, #ff5a3c, #ff9a3c);
    box-shadow: 0 12px 26px -12px rgba(255,100,50,.95); }
.sbx.is-ready { animation: sbx-ready 1.8s ease-in-out infinite; }
@keyframes sbx-ready { 50% { box-shadow: 0 0 0 3px rgba(255,138,60,.4), 0 22px 50px -26px rgba(255,110,40,.95); } }
@media (max-width: 720px) {
    .sbx { min-height: 0; padding: 14px; gap: 10px; flex-wrap: wrap; }
    .sbx-art { position: absolute; right: 0; top: 6px; width: 104px; height: 120px; margin: 0; }
    .sbx-tx { padding-right: 96px; }
    .sbx-sub { white-space: normal; font-size: 12px; }
    .sbx-dots i { width: 16px; }
    .sbx-go { width: 100%; justify-content: center; padding: 11px; }
}
html.is-lite .sbx-art i, html.is-lite .sbx.is-ready, html.is-lite .sbx-dots i.now { animation: none; }
@media (prefers-reduced-motion: reduce) { .sbx-art i, .sbx.is-ready, .sbx-dots i.now { animation: none; } }
@media (max-width: 760px) { .screen.home .sbx { order: 1; } }

.nbx { position: relative; isolation: isolate; display: flex; align-items: center; gap: 18px; min-height: 140px;
    margin: 0 0 4px; padding: 18px 22px; border-radius: var(--r-lg, 18px); overflow: hidden; color: #fff; cursor: pointer;
    border: 1px solid rgba(247,201,75,.35); box-shadow: 0 22px 50px -26px rgba(247,201,75,.45); transition: transform .2s, box-shadow .2s; }
.nbx:hover { transform: translateY(-2px); box-shadow: 0 28px 56px -24px rgba(247,201,75,.65); }
.nbx-bg { position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(42% 110% at 82% 70%, rgba(247,201,75,.28), transparent 70%),
                radial-gradient(40% 90% at 0% 0%, rgba(109,141,255,.2), transparent 70%),
                linear-gradient(120deg, #1a1f4a 0%, #141634 55%, #0d1022 100%); }
.nbx-tx { position: relative; z-index: 1; flex: 1; min-width: 0; display: grid; gap: 6px; }
.nbx-eye { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffd76a; }
.nbx-eye i { width: 8px; height: 8px; border-radius: 50%; background: #f7c94b; box-shadow: 0 0 10px #f7c94b; }
.nbx-eye em { font-style: normal; padding: 2px 7px; border-radius: 6px; letter-spacing: .04em; color: #1d1405; background: linear-gradient(90deg,#ffd76a,#ffab3d); }
.nbx-n { font: 800 clamp(19px, 2.2vw, 26px)/1.1 var(--f-display, Unbounded), sans-serif; text-shadow: 0 4px 24px rgba(247,201,75,.4); }
.nbx-sub { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbx-bar { display: block; max-width: 320px; height: 6px; border-radius: 9px; background: rgba(255,255,255,.12); overflow: hidden; }
.nbx-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f0a62c, #ffe08a); transition: width .5s; }
.nbx-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.nbx-row b { color: #fff; }
.nbx-art { position: relative; z-index: 1; flex: none; width: 150px; height: 150px; margin: -18px 0 -30px; }
.nbx-art i { position: absolute; inset: 0; background: url(../assets/art/season/lion-v2.webp) center bottom / contain no-repeat;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.55)); animation: hbx-float 3.4s ease-in-out infinite; }
.nbx-go { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 13px;
    font: 800 14px/1 var(--f-text, Manrope), sans-serif; color: #2a1a00; background: linear-gradient(135deg, #fff1a8, #f7c94b 55%, #f0a62c);
    box-shadow: 0 12px 26px -12px rgba(247,201,75,.95); }
.nbx.is-ready { animation: nbx-ready 1.8s ease-in-out infinite; }
@keyframes nbx-ready { 50% { box-shadow: 0 0 0 3px rgba(247,201,75,.4), 0 22px 50px -26px rgba(247,201,75,.9); } }
@media (max-width: 720px) {
    .nbx { min-height: 0; padding: 14px; gap: 10px; flex-wrap: wrap; }
    .nbx-art { position: absolute; right: 0; top: 6px; width: 104px; height: 120px; margin: 0; }
    .nbx-tx { padding-right: 96px; }
    .nbx-sub { white-space: normal; font-size: 12px; }
    .nbx-go { width: 100%; justify-content: center; padding: 11px; }
}
html.is-lite .nbx-art i, html.is-lite .nbx.is-ready { animation: none; }
@media (prefers-reduced-motion: reduce) { .nbx-art i, .nbx.is-ready { animation: none; } }
@media (max-width: 760px) { .screen.home .nbx { order: 1; } }

.hduo { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg, 18px); }
.hduo::-webkit-scrollbar { display: none; }
.hduo:empty { display: none; }
.hduo > .hbx, .hduo > .dbx, .hduo > .sbx, .hduo > .nbx, .hduo > .tbx { margin: 0; min-height: 0; padding: 14px 22px; gap: 18px;
    scroll-snap-align: start; scroll-snap-stop: always; align-content: center; }
.hduo > :hover { transform: none; }
.hduo .hbx-tx, .hduo .dbx-tx, .hduo .sbx-tx, .hduo .nbx-tx, .hduo .tbx-tx { gap: 4px; }
.hduo .hbx-n, .hduo .dbx-n, .hduo .sbx-n, .hduo .nbx-n, .hduo .tbx-n { font-size: clamp(17px, 1.5vw, 22px); }
.hduo .hbx-sub, .hduo .dbx-sub, .hduo .sbx-sub, .hduo .nbx-sub, .hduo .tbx-sub { font-size: 12.5px; }
.hduo .hbx-row, .hduo .dbx-row, .hduo .sbx-row, .hduo .nbx-row { font-size: 12px; }
.hduo .hbx-hp { height: 6px; margin-top: 2px; }
.hduo .tbx-pc i { width: 20px; height: 20px; border-radius: 6px; }
.hduo .hbx-go, .hduo .dbx-go, .hduo .sbx-go, .hduo .nbx-go, .hduo .tbx-go { padding: 10px 16px; font-size: 13px; border-radius: 11px; }
.hduo .hbx-art, .hduo .sbx-art, .hduo .nbx-art, .hduo .tbx-art { width: 112px; height: 116px; margin: -14px 0 -22px; }
.hduo .dbx-art { width: 170px; height: 120px; margin: -14px 0 -22px; }
.hduo .dbx-card { width: 78px; height: 78px; top: 22px; border-radius: 14px; }
.hduo .dbx-lion { width: 100px; height: 124px; }
.hduo .dbx-bg::after { width: 300px; height: 300px; }
.hduo-dots { display: flex; justify-content: center; gap: 6px; margin-top: -4px; }
.hduo-dots[hidden] { display: none; }
.hduo-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 9px; background: rgba(255,255,255,.22); cursor: pointer; transition: width .25s, background .25s; }
.hduo-dots button:hover { background: rgba(255,255,255,.4); }
.hduo-dots button.on { width: 22px; background: var(--gold, #f7c94b); }
@media (max-width: 720px) {
    .hduo { gap: 10px; }
    .hduo > .hbx, .hduo > .dbx, .hduo > .sbx, .hduo > .nbx, .hduo > .tbx { padding: 12px 14px; gap: 8px; }
    .hduo .hbx-art, .hduo .sbx-art, .hduo .nbx-art, .hduo .tbx-art { position: absolute; right: 0; top: 6px; bottom: auto; width: 96px; height: 104px; margin: 0; }
    .hduo .dbx-art { position: absolute; right: 2px; top: 8px; width: 140px; height: 104px; margin: 0; }
    .hduo .dbx-card { width: 60px; height: 60px; top: 24px; }
    .hduo .dbx-lion { width: 86px; height: 104px; }

    .hduo .hbx-tx, .hduo .dbx-tx, .hduo .sbx-tx, .hduo .nbx-tx, .hduo .tbx-tx { flex: 1 1 100%; padding-right: 86px; }
    .hduo .dbx-tx { padding-right: 112px; }
    .hduo .hbx-eye, .hduo .dbx-eye, .hduo .sbx-eye, .hduo .nbx-eye, .hduo .tbx-eye { letter-spacing: .06em; }
    .hduo .hbx-go, .hduo .dbx-go, .hduo .sbx-go, .hduo .nbx-go, .hduo .tbx-go { width: auto; padding: 9px 14px; }
    .hduo .hbx-n, .hduo .dbx-n, .hduo .sbx-n, .hduo .nbx-n, .hduo .tbx-n { font-size: 17px; }
    .hduo .hbx-sub, .hduo .dbx-sub, .hduo .sbx-sub, .hduo .nbx-sub, .hduo .tbx-sub { font-size: 12px; line-height: 1.3; white-space: nowrap; }
    .hduo .hbx-row, .hduo .dbx-row, .hduo .sbx-row, .hduo .nbx-row { font-size: 11.5px; gap: 2px 10px; }
    .hduo .hbx-tx, .hduo .dbx-tx, .hduo .sbx-tx, .hduo .nbx-tx, .hduo .tbx-tx { gap: 3px; }
    .hduo .hbx-art, .hduo .sbx-art, .hduo .nbx-art, .hduo .tbx-art { width: 84px; height: 92px; }
    .hduo .dbx-art { width: 116px; height: 92px; }
    .hduo .dbx-card { width: 50px; height: 50px; top: 22px; }
    .hduo .dbx-lion { width: 72px; height: 92px; }
    .hduo .tbx-pc i { width: 18px; height: 18px; }

    .hduo .hbx-sub, .hduo .dbx-sub, .hduo .sbx-sub, .hduo .nbx-sub, .hduo .tbx-sub { display: none; }
    .hduo .hbx-tx, .hduo .dbx-tx, .hduo .sbx-tx, .hduo .nbx-tx, .hduo .tbx-tx { padding-right: 112px; }
    .hduo .hbx-go, .hduo .dbx-go, .hduo .sbx-go, .hduo .nbx-go, .hduo .tbx-go { position: absolute; right: 12px; bottom: 12px; width: auto;
        padding: 8px 11px; gap: 6px; font-size: 12px; border-radius: 10px; }
    .hduo .hbx-go svg, .hduo .dbx-go svg, .hduo .sbx-go svg, .hduo .nbx-go svg, .hduo .tbx-go svg { width: 13px; height: 13px; }
    .hduo .hbx-art, .hduo .sbx-art, .hduo .nbx-art, .hduo .tbx-art { top: 4px; right: 18px; width: 76px; height: 62px; }
    .hduo .dbx-art { top: 4px; right: 10px; width: 100px; height: 62px; }
    .hduo .dbx-card { width: 40px; height: 40px; top: 12px; left: 4px; border-radius: 10px; }
    .hduo .dbx-lion { width: 56px; height: 62px; }
    .hduo .hbx-art::before { display: none; }
    .hduo > .hbx, .hduo > .dbx, .hduo > .sbx, .hduo > .nbx, .hduo > .tbx { min-height: 108px; align-content: flex-start; }
}
@media (max-width: 760px) { .screen.home .hduo, .screen.home .hduo-dots { order: 1; } .hduo-dots { margin-top: -6px; } }

.pw-stk {
    position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 13px;
    margin: 0 0 12px; padding: 12px 14px 12px 12px; border-radius: var(--r-sm, 14px); text-decoration: none; color: #fff;
    background: linear-gradient(115deg, rgba(255,106,60,.16), rgba(255,154,60,.05) 55%, rgba(255,255,255,.02));
    border: 1px solid rgba(255,138,60,.32);
    transition: border-color .18s, transform .14s var(--ease, ease), box-shadow .18s;
}
.pw-stk::before { content: ''; position: absolute; z-index: -1; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,140,50,.28), transparent 65%); }
.pw-stk:hover { border-color: rgba(255,150,70,.6); transform: translateY(-1px); box-shadow: 0 14px 30px -18px rgba(255,110,40,.9); }
.pw-stk-fire { position: relative; flex: none; width: 46px; height: 50px; display: grid; place-items: end center; padding-bottom: 9px;
    background: radial-gradient(circle at 50% 72%, #fff3c4 0 14%, #ffc04a 32%, #ff6a2c 62%, #d83a1c 100%);
    filter: drop-shadow(0 6px 14px rgba(255,100,40,.55));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cpath d='M12 .5c1 4.6 7.4 7.4 7.4 14.3a7.4 7.4 0 0 1-14.8 0c0-3.4 1.7-5.6 3.4-7.1.3 2.5 1.6 3.9 3 4.4-1-4.7.3-9 1-11.6z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cpath d='M12 .5c1 4.6 7.4 7.4 7.4 14.3a7.4 7.4 0 0 1-14.8 0c0-3.4 1.7-5.6 3.4-7.1.3 2.5 1.6 3.9 3 4.4-1-4.7.3-9 1-11.6z'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: pw-stk-flick 2.4s ease-in-out infinite; }
.pw-stk-fire b { font: 800 15px/1 var(--f-display, Unbounded), sans-serif; color: #7a2104; }
@keyframes pw-stk-flick { 50% { transform: scale(1.05, .97); filter: drop-shadow(0 6px 18px rgba(255,120,40,.8)) brightness(1.08); } }
.pw-stk-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pw-stk-tx small { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffb27a; }
.pw-stk-tx small em, .pw-stk-sum em { font-style: normal; padding: 1px 6px; border-radius: 5px; letter-spacing: .04em; font-size: 9px; font-weight: 800;
    text-transform: uppercase; color: #1d1405; background: linear-gradient(90deg,#ffd76a,#ffab3d); }
.pw-stk-tx > b { font-size: 13.5px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-stk-dots { display: flex; gap: 4px; }
.pw-stk-dots i { flex: 1; max-width: 30px; height: 5px; border-radius: 9px; background: rgba(255,255,255,.1); }
.pw-stk-dots i.on { background: linear-gradient(90deg, #ff6a3c, #ffb03c); box-shadow: 0 0 8px rgba(255,138,60,.6); }
.pw-stk-dots i.now { background: rgba(255,138,60,.3); box-shadow: inset 0 0 0 1px #ff8a3c; }
.pw-stk-sub { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pw-stk.is-risk .pw-stk-sub { color: #ff9aa2; }
.pw-stk-pct { flex: none; display: grid; justify-items: end; gap: 2px; }
.pw-stk-pct b { font: 800 22px/1 var(--f-display, Unbounded), sans-serif; letter-spacing: -.02em;
    background: linear-gradient(180deg, #ffe08a, #ff8a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pw-stk-pct small { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pw-stk.is-ready { animation: pw-stk-ready 1.8s ease-in-out infinite; }
.pw-stk.is-ready .pw-stk-pct small { color: #ffb27a; }
@keyframes pw-stk-ready { 50% { box-shadow: 0 0 0 3px rgba(255,138,60,.28); } }

.pw-stk-sum { display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm, 14px);
    background: rgba(255,138,60,.06); border: 1px dashed rgba(255,138,60,.35); transition: background .2s, border-color .2s; }
.pw-stk-sum.on { background: linear-gradient(115deg, rgba(255,106,60,.16), rgba(255,154,60,.05)); border-style: solid; border-color: rgba(255,138,60,.45); }
.pw-stk-fire.sm { width: 26px; height: 30px; padding: 0; animation: none; }
.pw-stk-sum .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-stk-sum .tx b { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #ffc08a; }
.pw-stk-sum .tx small { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.62); line-height: 1.35; }
.pw-stk-sum .v { flex: none; font: 800 16px/1 var(--f-display, Unbounded), sans-serif; color: rgba(255,255,255,.4); font-variant-numeric: tabular-nums; }
.pw-stk-sum.on .v { color: #ffc08a; }
@media (max-width: 520px) {
    .pw-stk { gap: 10px; padding: 10px 11px 10px 10px; }
    .pw-stk-fire { width: 38px; height: 42px; padding-bottom: 7px; } .pw-stk-fire b { font-size: 13px; }
    .pw-stk-pct b { font-size: 18px; }
}
html.is-lite .pw-stk-fire, html.is-lite .pw-stk.is-ready { animation: none; }
@media (prefers-reduced-motion: reduce) { .pw-stk-fire, .pw-stk.is-ready { animation: none; } }

.pw-stk-sum .v { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pw-stk-sum .v i.fs { font: 800 10.5px/1 var(--f-text, Manrope), sans-serif; font-style: normal; padding: 3px 7px; border-radius: 999px;
    color: #2a1a00; background: linear-gradient(90deg,#fff1a8,#f7c94b 55%,#f0a62c); }

.tbx { position: relative; isolation: isolate; display: flex; align-items: center; gap: 18px; min-height: 140px;
    margin: 0 0 4px; padding: 18px 22px; border-radius: var(--r-lg, 18px); overflow: hidden; color: #fff; cursor: pointer;
    border: 1px solid rgba(255,193,74,.35); box-shadow: 0 22px 50px -26px rgba(255,170,60,.55); transition: transform .2s, box-shadow .2s; }
.tbx:hover { transform: translateY(-2px); box-shadow: 0 28px 56px -24px rgba(255,170,60,.75); }
.tbx-bg { position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(14,10,26,.94) 0%, rgba(14,10,26,.75) 45%, rgba(14,10,26,.15) 100%),
                url(../assets/art/treasure/island.webp) center 62% / cover no-repeat; }
.tbx-tx { position: relative; z-index: 1; flex: 1; min-width: 0; display: grid; gap: 6px; }
.tbx-eye { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffd27a; }
.tbx-eye i { width: 8px; height: 8px; border-radius: 50%; background: #ffc14a; box-shadow: 0 0 10px #ffc14a; }
.tbx-eye em { font-style: normal; padding: 2px 7px; border-radius: 6px; letter-spacing: .04em; color: #1d1405; background: linear-gradient(90deg,#ffd76a,#ffab3d); }
.tbx-n { font: 800 clamp(19px, 2.2vw, 26px)/1.1 var(--f-display, Unbounded), sans-serif; text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.tbx-sub { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbx-pc { display: flex; gap: 6px; }
.tbx-pc i { width: 26px; height: 26px; border-radius: 8px; background: rgba(0,0,0,.4) url(../assets/art/treasure/piece.webp) center / 80% no-repeat;
    filter: grayscale(1) brightness(.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.tbx-pc i.on { filter: none; background-color: rgba(255,193,74,.18); box-shadow: inset 0 0 0 1px rgba(255,193,74,.6); }
.tbx-art { position: relative; z-index: 1; flex: none; width: 150px; height: 150px; margin: -18px 0 -30px; }
.tbx-art i { position: absolute; inset: 0; background: url(../assets/art/treasure/lion-map.webp) center bottom / contain no-repeat;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.55)); animation: hbx-float 3.4s ease-in-out infinite; }
.tbx-go { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 13px;
    font: 800 14px/1 var(--f-text, Manrope), sans-serif; color: #3a2400; background: linear-gradient(180deg, #ffe28a, #f0a62c);
    box-shadow: 0 12px 26px -12px rgba(247,201,75,.95); }
.tbx.is-ready { animation: tbx-ready 1.8s ease-in-out infinite; }
@keyframes tbx-ready { 50% { box-shadow: 0 0 0 3px rgba(255,193,74,.35), 0 22px 50px -26px rgba(255,170,60,.95); } }
@media (max-width: 720px) {
    .tbx { min-height: 0; padding: 14px; gap: 10px; flex-wrap: wrap; }
    .tbx-art { position: absolute; right: 0; top: 6px; width: 104px; height: 120px; margin: 0; }
    .tbx-tx { padding-right: 96px; }
    .tbx-sub { white-space: normal; font-size: 12px; }
    .tbx-pc i { width: 22px; height: 22px; }
    .tbx-go { width: 100%; justify-content: center; padding: 11px; }
}
html.is-lite .tbx-art i, html.is-lite .tbx.is-ready { animation: none; }
@media (prefers-reduced-motion: reduce) { .tbx-art i, .tbx.is-ready { animation: none; } }
@media (max-width: 760px) { .screen.home .tbx { order: 1; } }