body[data-screen=home] .v7-carousel { margin-top: 9px; }
body[data-screen=home] .image-slide { height: clamp(116px, 35vw, 173px); }
body[data-screen=leaders] .topbar { display:none; }
.rank-screen { padding: 0 0 8px; color:#fbf5ff; }
.rank-heading { display:flex; gap:12px; align-items:center; padding:8px 5px 16px; }
.rank-heading h1 { margin:0; font-size:17px; flex:1; text-align:center; padding-right:26px; }
.rank-heading .ic { color:#e28cbd; }
.rank-podium { display:flex; align-items:flex-end; justify-content:center; gap:7px; padding:5px 2px 16px; }
.rank-player { position:relative; min-width:0; }
.rank-podium-player { flex:1; padding:45px 5px 7px; text-align:center; border-radius:16px 16px 8px 8px; background:linear-gradient(180deg,#111028,#263d70 65%,#171225); border:1px solid #9ac7fc55; }
.rank-podium-player.rank-1 { padding-top:64px; background:linear-gradient(180deg,#19101e,#784c22 66%,#201523); border-color:#dfb25988; }
.rank-podium-player.rank-3 { background:linear-gradient(180deg,#170f25,#733b3b 65%,#241421); border-color:#ed9c7655; }
.rank-portrait { width:42px; height:42px; position:relative; flex:none; overflow:hidden; border-radius:50%; display:grid; place-items:center; }
.rank-podium-player .rank-portrait { width:min(100%,80px); height:auto; aspect-ratio:1; margin:0 auto 7px; }
.rank-portrait canvas { position:absolute; width:100%; height:100%; inset:0; }
.rank-initial { position:relative; font-size:19px; font-weight:850; text-shadow:0 2px 8px #0009; }
.rank-podium-player .rank-initial { font-size:32px; }
.rank-info { min-width:0; display:grid; gap:4px; }
.rank-info b { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }
.rank-info strong { display:flex; align-items:center; gap:3px; color:#66e4b4; font-size:13px; }
.rank-podium-player .rank-info strong { justify-content:center; }
.rank-info .ic,.rank-place .ic { width:14px; height:14px; }
.rank-place { display:flex; align-items:center; justify-content:center; gap:4px; color:#ffdc92; font-weight:800; }
.rank-podium-player .rank-place { position:absolute; top:12px; left:0; right:0; }
.rank-list { border:1px solid #554566; border-radius:19px; overflow:hidden; background:#191724; }
.rank-list .rank-player { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; padding:9px 12px; }
.rank-list .rank-player + .rank-player { border-top:1px solid #34303d; }
.rank-self { margin-top:14px; text-align:center; color:#bcadce; }
.vip-showcase { position:relative; border-radius:27px; overflow:hidden; padding:32px 21px 23px; color:white; background:linear-gradient(165deg,#050506 24%,#120c50 48%,#2920db 72%,#557eff); }
.vip-close { position:absolute; top:10px; right:10px; display:grid; place-items:center; border:0; background:transparent; color:white; width:35px; height:35px; }
.vip-showcase h1 { font-size:clamp(34px,9vw,57px); line-height:.94; letter-spacing:-.055em; margin:6px 0 11px; }
.vip-showcase h1 em { color:#ffd235; font-style:normal; }
.vip-showcase p { font-size:13px; color:#e3e1ff; }
.vip-art { width:100%; height:auto; max-height:260px; object-fit:contain; display:block; }
.vip-option { display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-radius:16px; background:#ffffff20; border:1px solid #ffffff28; cursor:pointer; }
.vip-option:has(input:checked) { border-color:#b8c4ff; background:#ffffff2c; }
.vip-option input { accent-color:#ffd84c; width:18px; height:18px; }
.vip-option span { display:grid; gap:3px; }
.vip-options summary { text-align:center; padding:13px 0; cursor:pointer; }
.vip-showcase .vip-terms { text-align:center; font-size:11px; }
.vip-continue { width:100%; min-height:51px; border:0; border-radius:99px; background:white; color:#271bb8; font-size:16px; font-weight:850; margin-top:8px; }
body[data-screen=market] .view>.seg--caps { width:53%; height:47px; margin-bottom:22px; }
body[data-screen=market] .seg--filter { background:#0b0816; min-height:49px; }
body[data-screen=market] .ggrid { gap:9px; }
body[data-screen=market] .ggrid .gcard { padding:5px 5px 9px!important; border-radius:17px!important; }
body[data-screen=market] .ggrid .gcard__art { border-radius:13px!important; }
body[data-screen=market] .gcard__img { inset:16%; width:68%; height:68%; }
body[data-screen=market] .gcard__t { font-size:16px; }
body[data-screen=market] .gcard .buy-btn { align-self:center; width:calc(100% - 12px); }
body[data-screen=market] .mk-dock { bottom:calc(72px + max(env(safe-area-inset-bottom),var(--mafia-safe-bottom,0px))); }

/* Reference artwork rendered on Canvas; live names, scores and pricing stay interactive. */
.rank-screen { background:linear-gradient(#160e2a,#070915 51%,#10101d); border-radius:15px; padding:0 8px 10px; }
.rank-heading { min-height:45px; padding:5px 4px 10px; }
.rank-podium { gap:6px; padding:0 0 13px; }
.rank-podium-player,.rank-podium-player.rank-1,.rank-podium-player.rank-3 { padding:0; border:0; background:none; border-radius:0; }
.rank-podium-player .rank-portrait { width:100%; aspect-ratio:79/115; border-radius:0 0 7px 7px; margin-bottom:4px; background:#1c2449; }
.rank-podium-player.rank-1 .rank-portrait { aspect-ratio:82/135; }
.rank-podium-player .rank-info { gap:3px; }
.rank-podium-player .rank-art-ready .rank-place,.rank-podium-player.rank-art-ready .rank-place,.rank-art-ready .rank-initial { display:none; }
.rank-list { border-color:#494551; background:#1a1929; }
.rank-list .rank-player { padding:7px 8px; }
.rank-list .rank-portrait { background:#33234d; }
.rank-list .rank-place { border:1px solid #cfa866; border-radius:50%; min-width:30px; height:30px; font-size:11px; }
.vip-showcase { padding:0 0 15px; background:linear-gradient(#070707 0%,#1713a1 52%,#3930db 74%,#5c82fe 100%); border-radius:0 0 30px 30px; }
.vip-art { max-height:none; width:100%; aspect-ratio:622/775; object-fit:fill; }
.vip-close { z-index:2; top:2.1%; right:8.4%; }
.vip-options,.vip-showcase .vip-terms { margin-inline:7%; }
.vip-option { border:0; background:#ffffff20; padding:16px 18px; }
.vip-option b { font-size:clamp(15px,4.4vw,23px); }
.vip-option input { accent-color:white; }
.vip-options details { margin-top:12px; border-top:1px dashed #ffffff45; }
.vip-showcase .vip-continue { width:86%; margin:12px 7% 0; min-height:55px; }

.rank-portrait > svg { display:block; width:100%; height:100%; object-fit:cover; }
.rank-podium-player .rank-portrait > svg { position:absolute; bottom:0; height:78%; }
.rank-podium-player .rank-place { top:4px; }
.rank-place .rank-wreath { width:40px; height:40px; }
.rank-list .rank-place { border:0; height:auto; }
.rank-list .rank-wreath { width:34px; height:34px; }
.rank-2 .rank-place { color:#c4d4ff; }
.rank-3 .rank-place { color:#edaa73; }

.cyber-stage { position:relative; overflow:hidden; border-radius:18px; border:1px solid #ed4af6; background:#0c1028; box-shadow:0 0 14px #2cdeff55,inset 0 0 15px #df3ff966; padding:0 12px 14px; margin-bottom:13px; }
.cyber-title { display:block; width:calc(100% + 24px); height:auto; margin:0 -12px; }
.cyber-stage .wheel-stage { margin-top:22px; margin-bottom:16px; background:#17112d; border-radius:50%; }
.cyber-stage .wheel-hub { background:radial-gradient(circle,#d4faff,#5a36e4 42%,#130a3d 74%); }
.cyber-stage .wheel-hub .ic { visibility:hidden; }
.cyber-stage .spin-actions .btn { clip-path:polygon(8% 0,92% 0,100% 16%,100% 84%,92% 100%,8% 100%,0 84%,0 16%); border-radius:0; }
.cyber-stage .spin-actions .btn--primary { background:linear-gradient(140deg,#196078,#241940); }

/* Full-width screens; Telegram's safe insets still protect the controls. */
body[data-screen=plans], body[data-screen=spin] { padding-inline:0; }
body[data-screen=plans] .topbar, body[data-screen=spin] .topbar,
body[data-screen=plans] #tabbar, body[data-screen=spin] #tabbar { display:none; }
body[data-screen=plans] .view, body[data-screen=spin] .view { max-width:none; padding:0; }
.vip-showcase {
  min-height:calc(100dvh - var(--mafia-safe-top,0px));
  border-radius:0;
  padding-bottom:calc(14px + max(env(safe-area-inset-bottom),var(--mafia-safe-bottom,0px)));
  display:flex; flex-direction:column;
}
.vip-showcase .vip-art { width:100%; aspect-ratio:622/277; max-width:622px; align-self:center; }
.vip-showcase .vip-close { top:9px; right:4%; }
.premium-mark { display:block; align-self:center; width:min(68%,320px); max-height:25dvh; margin:4px 0 9px; filter:drop-shadow(0 12px 27px #6078ff8c); animation:premium-float 3.4s ease-in-out infinite; }
@keyframes premium-float { 50% { transform:translateY(-7px) rotate(2deg); } }
@media(prefers-reduced-motion:reduce) { .premium-mark { animation:none; } }
.vip-showcase .vip-options { display:grid; gap:7px; margin:0 auto; width:min(88%,500px); }
.vip-showcase .vip-option { padding:6px 17px; border-radius:0; clip-path:polygon(4% 0,100% 0,96% 100%,0 100%); background:#ffffff21; }
.vip-showcase .vip-option:has(input:checked) { background:#aebaff58; }
.vip-option span { gap:1px; }
.vip-option small { font-size:11px; }
.vip-showcase .vip-continue { margin:12px auto 0; width:min(88%,500px); }
.cyber-stage { border-radius:0; margin:0; min-height:calc(100dvh - var(--mafia-safe-top,0px)); padding-bottom:calc(16px + max(env(safe-area-inset-bottom),var(--mafia-safe-bottom,0px))); background:radial-gradient(ellipse at 50% 46%,#2a1a53,#090d23 70%,#13091e); }
.cyber-stage .cyber-title { max-width:640px; margin:0 auto; width:100%; }
.cyber-stage .wheel-stage { width:min(100%,65dvh,540px); }
.cyber-stage .spin-actions { max-width:540px; margin:0 auto; }
body[data-screen=spin] .view > :not(.cyber-stage) { margin-inline:12px; }

.rank-podium-player,.rank-podium-player.rank-1,.rank-podium-player.rank-3 { background:transparent; }
.rank-podium-player .rank-portrait { border:1px solid #a994ef77; background:linear-gradient(#120e26,#284b9d); }
.rank-podium-player.rank-1 .rank-portrait { background:linear-gradient(#191127,#9a632c); border-color:#ffcb62a6; }
.rank-podium-player.rank-3 .rank-portrait { background:linear-gradient(#1d102c,#863f38); border-color:#f0ac7477; }
.rank-podium-player .rank-portrait canvas { top:auto; bottom:0; height:57%; }
.rank-podium-player.rank-art-ready .rank-place { display:flex; }
.rank-podium-player .rank-place { z-index:1; top:4%; }
.rank-place .rank-wreath { width:42px; height:42px; }
.rank-podium-player.rank-1 .rank-wreath { width:54px; height:54px; }
.rank-list .rank-place { border:0; height:auto; }
.rank-list .rank-wreath { width:35px; height:35px; }
.rank-2 .rank-place { color:#bacaff; }
.vip-head { width:min(86%,540px); margin:24px auto 4px; }
.vip-showcase .vip-head h1 { font-size:clamp(37px,11vw,70px); margin:0 0 14px; line-height:.88; letter-spacing:-.07em; }
.vip-showcase .vip-head h1 em { color:#ffcc20; }
.vip-showcase .premium-mark { width:min(82%,385px); max-height:34dvh; margin:12px auto; }
.vip-showcase .vip-options { margin-top:auto; }
.cyber-stage { isolation:isolate; background:radial-gradient(ellipse at 50% 60%,#36134f,#10183a 55%,#080a20); }
.cyber-skyline { position:absolute; z-index:-1; inset:0; opacity:.34; background:repeating-linear-gradient(0deg,transparent 0 16px,#3bf3ff28 17px 18px),repeating-linear-gradient(90deg,#151e3e 0 14px,transparent 16px 34px); clip-path:polygon(0 12%,8% 12%,8% 33%,17% 33%,17% 47%,27% 47%,27% 70%,73% 70%,73% 37%,84% 37%,84% 24%,92% 24%,92% 6%,100% 6%,100% 100%,0 100%); }
.cyber-logo { margin:13px auto 8px; text-align:center; color:#d7fcff; font-size:clamp(44px,14vw,95px); line-height:.8; font-weight:950; font-style:italic; letter-spacing:-.055em; -webkit-text-stroke:1px #63eaff; text-shadow:3px 3px #7527bd,-2px -2px #f22bc8,0 0 20px #68e4ff; }
.cyber-stage .wheel-stage { box-shadow:0 0 0 2px #ffa4ff,0 0 0 5px #b927c7,0 0 27px #cc39ed; }
.cyber-stage .wheel-pointer { border:0; width:25px; height:40px; top:-20px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#e8ffff,#44edff 55%,#6049e8); clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%); filter:drop-shadow(0 0 6px #21eaff); }
.cyber-stage .spin-actions { grid-template-columns:1fr; width:min(84%,350px); }
/* Production artwork layer: decorative assets, live controls above. */
.cyber-stage { background:#080c22 url('assets/cyber-city-hd.png') center/cover no-repeat; padding-inline:18px; }
.cyber-skyline { display:none; }
.cyber-stage::before { content:""; position:absolute; inset:8px; border:2px solid #e949ed; box-shadow:0 0 5px #f145ee,inset 0 0 7px #23d8ef; pointer-events:none; z-index:-1; border-radius:19px; }
.cyber-stage .row-x { background:#090e29aa; border-radius:12px; padding:0 10px; }
.cyber-stage .wheel-stage { background:radial-gradient(circle,#3d1d65,#11102d); margin-block:30px 26px; border:5px solid #221035; }
.cyber-stage .spin-actions { gap:11px; }
.cyber-stage .spin-actions .btn { min-height:63px; border:2px solid #5cf6ff; background:linear-gradient(130deg,#48d9eecc,#14628ee8); box-shadow:inset 0 0 15px #a8ffff66; text-shadow:0 2px 3px #051021; }
.cyber-stage .spin-actions .btn--gold { border-color:#e6a0ff; background:linear-gradient(135deg,#8835aecf,#26113ae8); }
.cyber-stage .spin-actions .btn:disabled { opacity:.55; }
.vip-showcase { background:radial-gradient(ellipse at 84% 93%,#6b98ff 0,transparent 52%),radial-gradient(ellipse at 4% 70%,#3824ff 0,transparent 55%),linear-gradient(#030305 20%,#10084e 48%,#2622d9); }
.vip-showcase .premium-mark { width:min(76vw,360px); height:min(34dvh,360px); object-fit:contain; max-height:none; margin:12px auto 22px; filter:drop-shadow(0 20px 28px #02011199); }
.vip-showcase .vip-option { min-height:72px; padding:10px 22px; box-shadow:inset 0 1px #ffffff4a; backdrop-filter:blur(12px); }
.vip-showcase .vip-option input { width:23px; height:23px; }
.vip-showcase .vip-option small { color:#eceaff; font-size:12px; }
.vip-showcase .vip-continue { min-height:58px; box-shadow:0 8px 22px #120a7438; }
.rank-screen { background:radial-gradient(ellipse at 50% 5%,#342052,#10091e 45%,#0b0b18); }
.rank-podium-player .rank-portrait { box-shadow:inset 0 0 20px #85caff33,0 6px 20px #0005; }
.rank-podium-player.rank-1 .rank-portrait { box-shadow:inset 0 0 22px #ffc05044,0 7px 24px #b77b1622; }
.rank-list { background:linear-gradient(115deg,#292339,#141321); box-shadow:inset 0 1px #a98fbc30,0 12px 30px #0004; }
@media (max-height:700px) { .vip-head { margin-top:19px; } .vip-showcase .premium-mark { height:27dvh; margin:5px auto 12px; } .vip-showcase .vip-option { min-height:62px; } }
/* v25 — separately assembled reference-style wheel and panels. */
.cyber-detail { padding:22px 22px 34px; background-image:url('assets/cyber-city-detail.png'); border:0; overflow:hidden; }
.cyber-detail::before { display:none; }
.cyber-frame { position:absolute; inset:12px; border:2px solid #35ecff; border-radius:16px; box-shadow:0 0 9px #30eaff,inset 0 0 7px #30eaff; pointer-events:none; }
.cyber-frame::after { content:""; position:absolute; inset:5px -7px -5px 5px; border:2px solid #f337ee; border-radius:13px; box-shadow:0 0 9px #f731ee,inset 0 0 6px #f731ee; }
.cyber-wordmark { display:block; position:relative; width:98%; height:auto; margin:6px auto 16px; filter:drop-shadow(0 6px 1px #110c29); }
.cyber-detail .subhead { position:absolute; top:12px; left:13px; z-index:5; margin:0; }
.cyber-detail .subhead h1 { display:none; }
.cyber-detail .subhead .ibtn { width:30px; height:30px; background:#081a2abf; border-radius:50%; }
.cyber-detail .row-x { position:relative; padding:5px 9px; margin:0 auto 20px; font-size:11px; max-width:500px; border:1px solid #79eaff24; }
.cyber-detail .page-sub { font-size:11px; line-height:1.4; margin:0; }
.cyber-detail .row-x .ibtn { width:29px; height:29px; }
.cyber-detail .wheel-stage { width:min(100%,560px); aspect-ratio:1; margin:22px auto 25px; border:6px solid #241135; box-shadow:0 0 0 2px #f146e4,0 0 0 5px #49166e,0 0 0 7px #d840ed,0 0 28px #d52ae5; }
.cyber-detail .wheel-stage::before { border:0; box-shadow:none; }
.cyber-detail .wheel { width:100%; height:100%; }
.cyber-detail .wheel-hub { width:34%; height:34%; left:50%; top:50%; margin:0; transform:translate(-50%,-50%); border:0; background:transparent; box-shadow:none; }
.cyber-detail .wheel-hub::before { display:none; }
.cyber-detail .wheel-hub img { display:block; width:100%; height:100%; object-fit:contain; animation:plasma-pulse 2.8s ease-in-out infinite; }
.cyber-detail .wheel-pointer { width:32px; height:51px; top:-34px; background:linear-gradient(125deg,#fff 0%,#caffff 27%,#00dfff 48%,#406aff 70%,#c4ffff 90%); clip-path:polygon(50% 0,100% 39%,50% 100%,0 39%); z-index:5; }
.cyber-detail .spin-actions { width:min(88%,380px); gap:14px; margin:0 auto; }
.cyber-detail .spin-actions .btn { position:relative; min-height:65px; padding:8px; border-width:3px; background:repeating-linear-gradient(45deg,#ffffff0a 0 2px,transparent 2px 4px),linear-gradient(120deg,#48e3f1e8,#2479a0e8); color:#fff; font-size:20px; font-weight:950; line-height:1.05; }
.cyber-detail .spin-actions .btn small { color:#ffe76d; font-size:13px; margin-top:5px; }
.cyber-detail .spin-actions .btn--gold { width:90%; align-self:center; justify-self:center; background:repeating-linear-gradient(45deg,#ffffff08 0 2px,transparent 2px 4px),linear-gradient(125deg,#6d338edb,#211334ef); }
.cyber-wallet { display:flex; gap:10px; justify-content:center; margin:20px auto 12px; max-width:450px; position:relative; }
.cyber-wallet>span { display:flex; align-items:center; justify-content:center; gap:5px; flex:1; padding:10px 5px; background:#10233de0; border:2px solid #6cd5ff; clip-path:polygon(7% 0,93% 0,100% 24%,100% 76%,93% 100%,7% 100%,0 76%,0 24%); font-size:17px; font-weight:900; white-space:nowrap; }
.cyber-wallet>span+span { border-color:#edc052; background:#32230be6; }
.cyber-wallet small { font-size:10px; }.cyber-wallet .ic { width:21px; height:21px; color:#72edff; }
@keyframes plasma-pulse { 50% { filter:brightness(1.3) drop-shadow(0 0 8px #a135ff); } }
.vip-showcase .vip-head { margin-top:39px; }
.vip-showcase .vip-head h1 { font-size:clamp(40px,12vw,75px); letter-spacing:-.065em; }
.vip-showcase .vip-head p { font-size:clamp(12px,3.2vw,18px); margin-top:19px; }
.vip-showcase .premium-mark { margin:22px auto; }
.vip-showcase .vip-options { gap:9px; }
.vip-showcase .vip-option { min-height:66px; }
.vip-showcase .vip-terms { padding:15px 0 20px; margin-top:14px; border-bottom:1px dashed #ffffff3f; }
.vip-showcase .vip-continue { margin-top:6px; }
.rank-screen { border-radius:0; padding:0 0 12px; }
.rank-heading { padding:6px 8px 20px; }
.rank-podium { gap:8px; padding-bottom:20px; }
.rank-podium-player .rank-portrait { border-radius:0 0 7px 7px; }
.rank-podium-player.rank-1 .rank-portrait { aspect-ratio:82/135; }
.rank-list { overflow:visible; position:relative; border-radius:19px 19px 0 0; }
.rank-list::before { content:""; position:absolute; top:-9px; left:36%; width:28%; height:8px; background:#87cb44; clip-path:polygon(50% 0,100% 100%,0 100%); }
.rank-list .rank-player { padding:9px 10px; }
.rank-info b { font-weight:500; }.rank-info strong { color:#7be8ba; }
@media(min-width:650px) { .cyber-detail { max-width:650px; margin:auto; } }
@media(prefers-reduced-motion:reduce) { .cyber-detail .wheel-hub img { animation:none; } }