:root{
  --bg0:#0B0630;--bg1:#2A0F6B;--bg2:#5B1FB0;
  --card:rgba(52,30,140,.72);--card2:rgba(40,22,118,.78);
  --line:rgba(150,110,255,.75);--line-soft:rgba(160,120,255,.28);
  --lav:#C4A1FF;--cap:#A99CD6;--green:#4ADE80;
  --p1:#C084FC;--p2:#8B3FE8;--s1:#4C3BC4;--s2:#3A2A9E;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;}
body{font-family:Montserrat,system-ui,sans-serif;color:#fff;background:linear-gradient(180deg,var(--bg0) 0%,#1A0A4E 30%,var(--bg1) 60%,var(--bg2) 100%) fixed;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
input{font-family:inherit}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.stars i{position:absolute;border-radius:50%;background:#fff;animation:tw 4s ease-in-out infinite}
.stars b{position:absolute;color:#fff;font-size:12px;opacity:.8;animation:tw 5s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:var(--o,.7)}50%{opacity:.15}}
.app{position:relative;z-index:1;max-width:380px;margin:0 auto;padding:10px 12px 110px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;height:46px}
.logo{display:flex;align-items:center;font-weight:900;font-size:30px;letter-spacing:-.5px;line-height:1;user-select:none;text-shadow:0 0 18px rgba(192,132,252,.45);position:relative}
.logo .gem{width:30px;height:30px;margin:0 1px;filter:drop-shadow(0 0 8px rgba(181,123,255,.9))}
.dev{font-style:normal;font-size:8px;font-weight:800;letter-spacing:1px;background:#F59E0B;color:#1a0a4e;border-radius:6px;padding:2px 5px;margin-left:8px;text-shadow:none}
.balance{display:flex;align-items:center;gap:6px;height:34px;padding:0 6px 0 14px;border-radius:999px;font-weight:800;font-size:15px;background:linear-gradient(180deg,rgba(76,59,196,.9),rgba(58,42,158,.9));border:1.5px solid var(--line);box-shadow:0 0 14px rgba(139,92,246,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.star{color:#FFD45C;text-shadow:0 0 8px rgba(255,212,92,.7)}
.balance .plus{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--p1),var(--p2));font-size:16px;line-height:1}

/* glass cards */
.card{position:relative;border-radius:18px;background:linear-gradient(160deg,rgba(66,40,170,.78),rgba(38,20,112,.8));border:1.5px solid var(--line);box-shadow:0 0 0 3px rgba(139,92,246,.14),0 0 26px rgba(139,92,246,.32),inset 0 1px 0 rgba(255,255,255,.16);overflow:hidden}
.card.shine::after{content:"";position:absolute;right:14px;bottom:10px;width:22px;height:8px;background:repeating-linear-gradient(115deg,rgba(255,255,255,.55) 0 2px,transparent 2px 6px);opacity:.55;pointer-events:none}
.label{font-size:9px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--lav)}
.cap{color:var(--cap);font-size:12px;font-weight:600}

.titlebar{display:flex;align-items:center;justify-content:space-between;margin:8px 0 10px}
.titlebar h1{margin:0;font-size:24px;font-weight:900;letter-spacing:-.3px}
.icons{display:flex;gap:7px}
.ib{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,rgba(76,59,196,.85),rgba(50,34,140,.85));border:1.5px solid var(--line-soft);box-shadow:0 0 10px rgba(139,92,246,.25),inset 0 1px 0 rgba(255,255,255,.18)}
.ib svg{width:18px;height:18px;fill:none;stroke:#E9DDFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ib.admin{border-color:#F59E0B}

/* segmented tabs */
.seg{display:flex;gap:7px;margin-bottom:9px}
.seg button{flex:1;height:40px;border-radius:14px;font-weight:800;font-size:14px;color:var(--cap);background:rgba(40,22,118,.55);border:1.5px solid var(--line-soft);transition:.2s}
.seg button.on{color:#fff;background:linear-gradient(180deg,#9D5CF5,#6D2FD9);border-color:rgba(220,190,255,.8);box-shadow:0 0 16px rgba(160,90,255,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.seg button.friend{flex:1.1;color:#fff;background:linear-gradient(180deg,var(--s1),var(--s2));border-color:var(--line)}
.seg button.friend.on{background:linear-gradient(180deg,#9D5CF5,#6D2FD9)}
.seg.small button{height:34px;font-size:12.5px;border-radius:12px}

.banner{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:12px;border-radius:14px}
.banner .nm{flex:1;font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner .amt{font-weight:800;color:var(--green);font-size:14px}
.banner .bx{font-size:10px;font-weight:800;color:var(--green);background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.35);border-radius:999px;padding:2px 6px}

.poolrow{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 8px}
.poolrow .tot{display:flex;align-items:baseline;gap:7px;font-weight:700;color:var(--cap);font-size:14px}
.poolrow .tot b{font-size:24px;color:#fff;font-weight:900;text-shadow:0 0 14px rgba(196,161,255,.6)}
.status{font-size:13px;font-weight:700;color:var(--cap);display:flex;align-items:center;gap:6px}
.status.live{color:#fff}
.status .tm{font-variant-numeric:tabular-nums;background:linear-gradient(180deg,var(--p1),var(--p2));padding:3px 10px;border-radius:999px;box-shadow:0 0 12px rgba(192,132,252,.6)}
.dots{display:inline-flex;gap:3px;margin-left:2px}
.dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:dot 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* round card */
.round{height:318px;display:grid;place-items:center}
.round::before{content:"";position:absolute;width:300px;height:300px;right:-150px;top:-60px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(140,100,255,.45),rgba(90,50,200,.18) 60%,transparent 70%);pointer-events:none}
.round::after{content:"";position:absolute;left:-40px;bottom:-30px;width:420px;height:90px;border:1.5px solid rgba(190,160,255,.16);border-radius:50%;transform:rotate(-12deg);pointer-events:none}
.wheelwrap{position:relative;width:272px;height:272px}
.rim{position:absolute;inset:0}
.spinner{position:absolute;inset:16px;transition:none;will-change:transform}
.spinner svg,.rim svg{width:100%;height:100%;display:block;overflow:visible}
.hub{position:absolute;inset:78px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 30%,#4A2BB8,#22106A 75%);border:2px solid rgba(200,170,255,.6);box-shadow:0 0 24px rgba(160,100,255,.55),inset 0 2px 0 rgba(255,255,255,.18);z-index:2}
.hub .big{font-size:38px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(196,161,255,.8)}
.hub .sm{font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--lav);margin-top:4px}
.hub .gemc{width:40px;height:40px;filter:drop-shadow(0 0 10px rgba(181,123,255,.9))}
.pointer{position:absolute;left:50%;top:2px;width:30px;height:34px;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 0 8px rgba(255,255,255,.7)) drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.empty-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center}

.winner{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(circle at 50% 45%,rgba(120,60,230,.55),rgba(20,8,70,.88) 70%);backdrop-filter:blur(3px);animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.winner .lbl{font-size:10px;letter-spacing:2.4px;font-weight:800;color:var(--lav);text-transform:uppercase}
.winner .wn{font-size:18px;font-weight:800;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.winner .wa{font-size:34px;font-weight:900;color:var(--green);text-shadow:0 0 18px rgba(74,222,128,.55)}
.winner .mx{font-size:12px;font-weight:800;color:var(--green);background:rgba(74,222,128,.15);border:1px solid rgba(74,222,128,.4);padding:3px 10px;border-radius:999px}
.winner .me{font-size:12px;font-weight:700;color:#fff;opacity:.85}
.winner .av{box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 30px rgba(196,161,255,.9)}
.spark{position:absolute;color:#fff;font-size:14px;animation:sp 1.6s ease-out infinite}
@keyframes sp{0%{opacity:0;transform:scale(.4)}30%{opacity:1}100%{opacity:0;transform:scale(1.3) translateY(-14px)}}

/* buttons */
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border-radius:999px;font-weight:800;font-size:16px;color:#fff;background:linear-gradient(180deg,var(--p1),var(--p2));border:1.5px solid rgba(240,220,255,.55);box-shadow:0 0 22px rgba(170,100,255,.55),0 6px 18px rgba(40,10,120,.45);overflow:hidden;transition:transform .12s,filter .2s}
.btn::before{content:"";position:absolute;top:4px;left:9%;right:9%;height:38%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.1))}
.btn::after{content:"";position:absolute;right:22px;bottom:9px;width:18px;height:6px;background:repeating-linear-gradient(115deg,rgba(255,255,255,.6) 0 2px,transparent 2px 5px);opacity:.6}
.btn>*{position:relative}
.btn:active{transform:scale(.97)}
.btn.sec{background:linear-gradient(180deg,var(--s1),var(--s2));border-color:var(--line);box-shadow:0 0 16px rgba(110,80,240,.4)}
.btn.ghost{background:rgba(40,22,118,.5);border-color:var(--line-soft);box-shadow:none}
.btn.ghost::before,.btn.ghost::after{display:none}
.btn[disabled]{filter:saturate(.35) brightness(.8);pointer-events:none}
.btn.sm{height:38px;font-size:13px}
.betbtn{margin:12px 0 16px}

.listhead{display:flex;justify-content:space-between;align-items:baseline;margin:4px 4px 8px}
.listhead h3{margin:0;font-size:16px;font-weight:800}
.prow{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:7px;border-radius:16px;animation:slidein .35s ease}
@keyframes slidein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.prow .dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor}
.prow .info{flex:1;min-width:0}
.prow .nm{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .ch{font-size:11.5px;color:var(--cap);font-weight:600;margin-top:2px}
.prow .st{font-weight:800;font-size:15px;white-space:nowrap}
.prow.me{border-color:rgba(230,200,255,.95);box-shadow:0 0 0 3px rgba(192,132,252,.2),0 0 22px rgba(192,132,252,.45)}
.prow.win{border-color:rgba(74,222,128,.8);background:linear-gradient(160deg,rgba(30,110,90,.55),rgba(30,40,110,.8))}
.tag{font-size:9px;font-weight:800;letter-spacing:.8px;padding:2px 6px;border-radius:6px;background:rgba(196,161,255,.22);color:var(--lav);margin-left:6px;vertical-align:2px}
.av{flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;overflow:hidden;background-size:cover;background-position:center;text-shadow:0 1px 2px rgba(0,0,0,.25);border:1.5px solid rgba(255,255,255,.35)}
.hash{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 4px;font-size:12px;color:var(--cap);font-weight:600}
.hash code{font-family:ui-monospace,Menlo,monospace;color:#E9DDFF;font-size:12px}
.copy{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:rgba(196,161,255,.15)}
.copy svg{width:13px;height:13px;fill:none;stroke:var(--lav);stroke-width:2}
.emptyp{text-align:center;padding:16px;color:var(--cap);font-size:13px;font-weight:600}

/* invite */
.invite{padding:18px 16px;text-align:center;margin-bottom:12px}
.invite .ring{width:72px;height:72px;border-radius:50%;margin:2px auto 10px;display:grid;place-items:center;font-size:34px;font-weight:300;border:2px dashed rgba(196,161,255,.7);animation:spin 12s linear infinite;background:rgba(120,70,230,.25)}
.invite .ring span{animation:spin 12s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.invite h2{margin:0 0 4px;font-size:19px;font-weight:900}
.invite .link{margin:12px 0;padding:10px 12px;border-radius:12px;background:rgba(15,6,50,.5);border:1px solid var(--line-soft);font-family:ui-monospace,monospace;font-size:11px;color:#E9DDFF;word-break:break-all}
.row2{display:flex;gap:8px}

/* nav */
.nav{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(380px,calc(100% - 20px));display:flex;gap:4px;padding:5px;border-radius:22px;z-index:20;background:linear-gradient(180deg,rgba(48,26,130,.82),rgba(28,14,86,.88));border:1.5px solid var(--line);box-shadow:0 0 0 3px rgba(139,92,246,.14),0 0 26px rgba(139,92,246,.4);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav button{flex:1;height:50px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:700;color:#BFB3EA;position:relative;overflow:hidden}
.nav svg{width:19px;height:19px;fill:currentColor}
.nav button.active{color:#fff;background:linear-gradient(180deg,#B57BFF,#8B3FE8);border:1.5px solid rgba(240,220,255,.7);box-shadow:0 0 18px rgba(180,110,255,.7)}
.nav button.active::before{content:"";position:absolute;top:3px;left:10%;right:10%;height:40%;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.05))}
.nav button>*{position:relative}

/* sheets */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(8,3,30,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .25s}
.overlay.open{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:50%;bottom:0;width:min(420px,100%);max-height:88vh;overflow-y:auto;transform:translate(-50%,100%);transition:transform .32s cubic-bezier(.2,.9,.3,1);border-radius:24px 24px 0 0;padding:10px 16px calc(22px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#311A86 0%,#1F0E5C 100%);border:1.5px solid var(--line);border-bottom:0;box-shadow:0 -10px 40px rgba(100,50,220,.45),inset 0 1px 0 rgba(255,255,255,.18)}
.overlay.open .sheet{transform:translate(-50%,0)}
.handle{width:40px;height:4px;border-radius:9px;background:rgba(220,200,255,.45);margin:0 auto 12px}
.shead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.shead h2{margin:0;font-size:20px;font-weight:900}
.x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(196,161,255,.16);font-size:18px}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.chip{height:52px;border-radius:14px;font-weight:800;font-size:15px;background:rgba(40,22,118,.65);border:1.5px solid var(--line-soft);display:flex;align-items:center;justify-content:center;gap:3px}
.chip.on{background:linear-gradient(180deg,#9D5CF5,#6D2FD9);border-color:rgba(240,220,255,.8);box-shadow:0 0 16px rgba(160,90,255,.6)}
.chip[disabled]{opacity:.35}
.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(196,161,255,.12);font-size:13px;font-weight:600}
.kv>span:first-child{color:var(--cap)}
.htabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;scrollbar-width:none}
.htabs::-webkit-scrollbar{display:none}
.htabs button{flex:none;height:34px;padding:0 14px;border-radius:12px;font-size:12.5px;font-weight:800;color:var(--cap);background:rgba(40,22,118,.55);border:1.5px solid var(--line-soft)}
.htabs button.on{color:#fff;background:linear-gradient(180deg,#9D5CF5,#6D2FD9);border-color:rgba(240,220,255,.8)}
.hcard{padding:12px;margin-bottom:10px;border-radius:16px}
.hcard .r1{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pill{font-size:12px;font-weight:800;color:var(--green);background:rgba(74,222,128,.15);border:1px solid rgba(74,222,128,.4);padding:3px 9px;border-radius:999px}
.hcard .r2{display:flex;align-items:center;gap:10px}
.hcard .r2 .nm{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard .pay{text-align:right;white-space:nowrap}
.hcard .pay b{color:var(--green);font-size:17px;font-weight:900}
.others{display:flex;gap:4px;margin:10px 0;flex-wrap:wrap}
.chipbox{display:flex;gap:8px;margin:6px 0 12px}
.chipbox>div{flex:1;min-width:0}
.mono{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:5px;padding:8px 10px;border-radius:10px;background:rgba(15,6,50,.55);border:1px solid var(--line-soft);font-family:ui-monospace,monospace;font-size:12px;color:#E9DDFF}
.note{padding:12px;border-radius:14px;background:rgba(15,6,50,.45);border:1px solid var(--line-soft);font-size:12px;line-height:1.55;color:#D6CCF5;margin-top:10px}
.note code{font-family:ui-monospace,monospace;color:#fff;font-size:11px}
.ok{color:var(--green);font-weight:700}.bad{color:#F87171;font-weight:700}
.rules h3{font-size:15px;margin:14px 0 6px}
.rules p{margin:0 0 8px;font-size:13px;line-height:1.55;color:#D6CCF5}
.step{padding:10px 12px;border-radius:12px;background:rgba(15,6,50,.45);border:1px solid var(--line-soft);margin-bottom:8px;font-size:12.5px;line-height:1.5;color:#D6CCF5}
.step .label{display:block;margin-bottom:3px}
.soon{padding:40px 20px;text-align:center;margin-top:20px}
.soon .ic{font-size:44px;margin-bottom:8px;filter:drop-shadow(0 0 12px rgba(196,161,255,.8))}
.soon h2{margin:0 0 6px;font-weight:900}
.toast{position:fixed;left:50%;top:16px;transform:translate(-50%,-80px);z-index:99;padding:10px 16px;border-radius:999px;font-weight:700;font-size:13px;background:linear-gradient(180deg,#4C3BC4,#3A2A9E);border:1.5px solid var(--line);box-shadow:0 0 20px rgba(139,92,246,.5);transition:transform .3s;white-space:nowrap}
.toast.show{transform:translate(-50%,0)}
.conn{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:60;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;background:#7C2D12;border:1px solid #F59E0B;display:flex;align-items:center;gap:4px}

/* admin */
.adm .sec{padding:12px;margin-bottom:10px}
.adm h3{margin:0 0 8px;font-size:15px;font-weight:800;display:flex;justify-content:space-between;align-items:center}
.adm .mini{font-size:11px;color:var(--cap);font-weight:600}
.adm input,.adm select{width:100%;height:36px;border-radius:10px;border:1px solid var(--line-soft);background:rgba(15,6,50,.6);color:#fff;padding:0 10px;font-size:13px;font-weight:600}
.adm .grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}
.adm .grid label{font-size:10px;color:var(--cap);font-weight:700}
.adm .bl{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid rgba(196,161,255,.1);font-size:12.5px}
.adm .bl .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.adm .tbtn{height:28px;padding:0 10px;border-radius:9px;font-size:11px;font-weight:800;background:rgba(196,161,255,.18);border:1px solid var(--line-soft)}
.adm .tbtn.red{background:rgba(248,113,113,.18);border-color:rgba(248,113,113,.5)}
.adm .tbtn.on{background:linear-gradient(180deg,#9D5CF5,#6D2FD9)}
.adm .bigp{font-size:28px;font-weight:900;color:var(--green)}
.switch{width:44px;height:26px;border-radius:999px;background:rgba(255,255,255,.15);position:relative;flex:none;transition:.2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.switch.on{background:linear-gradient(180deg,var(--p1),var(--p2))}.switch.on::after{left:21px}
.conn[hidden],[hidden]{display:none!important}
.seg.small button{font-size:12px;padding:0 4px;white-space:nowrap}
.invite .row .btn{font-size:13px;padding-left:6px;padding-right:6px}

/* ===== v5: polygon arena ===== */
.arbar{display:flex;align-items:center;gap:8px;margin:6px 0 10px}
.arbar .seg.mini{flex:1;margin:0;gap:5px}
.arbar .seg.mini button{height:34px;font-size:12.5px;border-radius:12px;padding:0 4px}
.arbar .icons{display:flex;gap:5px}
.arbar .ib{width:32px;height:32px}
.arbar .ib svg{width:16px;height:16px}
.ib.q{font-weight:900;font-size:16px;color:#E9DDFF}
.ib.off{opacity:.45}
.topgame{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;margin-bottom:10px;border-radius:14px;color:#fff;text-align:left;font-family:inherit}
.topgame .tl{font-size:11px;font-weight:800;color:var(--lav);white-space:nowrap}
.topgame .nm{flex:1;min-width:0;font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topgame .bx{font-size:10px;font-weight:800;color:var(--green);background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.35);border-radius:999px;padding:2px 6px}
.topgame .amt{font-weight:800;color:var(--green);font-size:13px;white-space:nowrap}
.topgame .chev{font-style:normal;color:var(--lav);font-size:18px;line-height:1}
.poolhead{display:flex;align-items:flex-end;justify-content:space-between;margin:0 4px 8px}
.pid{font-size:12px;font-weight:700;color:var(--cap);display:flex;align-items:center;gap:6px}
.pid b{color:#fff}
.tier{font-size:9px;font-weight:900;letter-spacing:1.2px;padding:3px 7px;border-radius:7px;color:#fff;background:linear-gradient(180deg,var(--s1),var(--s2));border:1px solid var(--line)}
.ptot{display:flex;align-items:baseline;gap:5px;margin-top:2px}
.ptot b{font-size:28px;font-weight:900;line-height:1.05;text-shadow:0 0 14px rgba(196,161,255,.6);font-variant-numeric:tabular-nums}
.ptot .star{font-size:18px}
.pst{font-size:13px;font-weight:800;color:var(--cap);padding:6px 11px;border-radius:999px;background:rgba(40,22,118,.6);border:1px solid var(--line-soft);white-space:nowrap;display:flex;align-items:center;gap:4px}
.pst b{font-variant-numeric:tabular-nums;color:#fff;min-width:28px;display:inline-block}
.pst.live{color:#fff;border-color:var(--line)}
.pst.red{color:#FF6B8A;border-color:rgba(255,90,130,.7);box-shadow:0 0 12px rgba(255,80,120,.45);animation:pulse 1s infinite}
.pst.red b{color:#FF6B8A}
.pst.spin{color:#fff;background:linear-gradient(180deg,#9D5CF5,#6D2FD9);border-color:rgba(220,190,255,.8)}
.pst.done{color:var(--green);border-color:rgba(74,222,128,.55);background:rgba(20,80,60,.45)}
@keyframes pulse{50%{transform:scale(1.05)}}
.thumbs{display:flex;gap:6px;align-items:center;margin:0 2px 8px;min-height:46px;overflow:hidden}
.th{flex:none;width:42px;height:46px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 45%,transparent),rgba(30,16,90,.7));border:1.5px solid color-mix(in srgb,var(--c) 70%,#fff 10%);animation:slidein .3s ease}
.th .av{border-width:1px}
.th b{font-size:9px;font-weight:800;line-height:1}
.th.me{box-shadow:0 0 0 2px #fff,0 0 12px rgba(255,255,255,.4)}
.th.ghost{background:rgba(40,22,118,.35);border:1.5px dashed var(--line-soft);animation:none}
.th.more{font-size:12px;font-weight:800;color:var(--lav);background:rgba(40,22,118,.6);border-color:var(--line-soft)}
.thumbs .cap{margin-left:6px}
.boardcard{padding:8px;border-radius:20px;margin-bottom:12px}
.boardcard.mini{max-width:300px;margin:10px auto 12px}
.arena{position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;background:radial-gradient(circle at 50% 40%,#2B1680,#140A45);overflow:hidden;box-shadow:inset 0 0 0 1.5px rgba(200,170,255,.35)}
.field{position:absolute;inset:6px;border-radius:10px;overflow:hidden}
.zsvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.zp{stroke:#160A4A;stroke-width:7;stroke-linejoin:round;transition:opacity .4s,filter .4s;filter:saturate(1.05)}
.zp.hot{filter:brightness(1.35) saturate(1.2)}
.zp.dim{opacity:.32}
.zp.win{stroke:#fff;stroke-width:9;filter:brightness(1.2) drop-shadow(0 0 14px #fff)}
.avs{position:absolute;inset:0;pointer-events:none}
.zav{position:absolute;transform:translate(-50%,-50%);border-radius:50%;transition:opacity .3s}
.zav .av{width:100%!important;height:100%!important;font-size:inherit!important;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 4px 14px rgba(0,0,0,.35);border:0}
.zav.me .av{box-shadow:0 0 0 3px #fff,0 0 16px rgba(255,255,255,.7)}
.zav.dim{opacity:.35!important}
.zav.win .av{box-shadow:0 0 0 3px #fff,0 0 26px #fff}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;color:var(--lav);font-weight:800;font-size:13px}
.empty:empty{display:none}
.empty .gemc{width:46px;height:46px;margin:0 auto 8px;display:block;filter:drop-shadow(0 0 12px rgba(181,123,255,.9));animation:pulse 2s infinite}
.empty>div{transform:translateY(34px)}
.pop{position:absolute;inset:0;pointer-events:none}
.pop>div{position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:22px;color:#fff;text-shadow:0 0 12px #4ADE80,0 2px 6px rgba(0,0,0,.6);animation:popup 1.6s ease forwards;white-space:nowrap}
@keyframes popup{0%{opacity:0;transform:translate(-50%,-60%) scale(.6)}25%{opacity:1;transform:translate(-50%,-190%) scale(1.1)}100%{opacity:1;transform:translate(-50%,-240%) scale(1)}}
.betrow{display:flex;gap:0;margin-bottom:8px;border-radius:999px;box-shadow:0 0 22px rgba(192,132,252,.45)}
.betrow .btn{box-shadow:none}
.betmain{flex:1;border-radius:999px 0 0 999px!important}
.betdd{width:auto!important;flex:none;padding:0 16px 0 14px;border-radius:0 999px 999px 0!important;border-left:1px solid rgba(255,255,255,.35)!important;font-size:14px}
.betdd::after{display:none}
.betdd .chev{font-style:normal;font-size:12px;margin-left:2px}
.privbtn{height:44px;font-size:14px;margin-bottom:12px}
#privRow .row2{margin-bottom:12px}
.listhead .cnt{font-size:12px;font-weight:800;color:var(--lav);background:rgba(196,161,255,.18);padding:2px 8px;border-radius:999px;margin-left:4px;vertical-align:2px}
.prow .num{width:18px;text-align:center;font-weight:900;font-size:13px;color:var(--lav);flex:none}
.prow .bar{height:4px;border-radius:4px;background:rgba(255,255,255,.1);margin-top:6px;overflow:hidden}
.prow .bar i{display:block;height:100%;border-radius:4px;background:var(--c);box-shadow:0 0 8px var(--c);transition:width .5s}
.prow .st{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.prow .st b{font-size:15px}
.prow .st>span{font-size:11.5px;color:var(--cap);font-weight:700}
.prow{border-left:4px solid var(--c,var(--line))}
.hash{flex-direction:column;gap:6px;margin:12px 0 6px}
.hash .hl{display:flex;align-items:center;gap:7px}
.hash .label{font-size:11px;letter-spacing:.5px;text-transform:none}
.fair{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--green);background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.35);padding:5px 11px;border-radius:999px;font-family:inherit}
.fair svg{width:14px;height:14px;fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.amtin{display:flex;gap:8px;margin:4px 0 8px}
.amtin input{flex:1;min-width:0;height:46px;border-radius:14px;border:1.5px solid var(--line);background:rgba(15,6,50,.6);color:#fff;text-align:center;font-size:18px;font-weight:800;font-family:inherit}
.amtin button{width:46px;height:46px;border-radius:14px;background:linear-gradient(180deg,var(--s1),var(--s2));border:1.5px solid var(--line);color:#fff;font-size:22px;font-weight:800}
.winmodal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(120,60,230,.55),rgba(8,3,30,.92) 70%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
.winmodal.open{opacity:1}
.winmodal .conf{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.winmodal .conf i{position:absolute;top:-20px;border-radius:2px;animation:fall linear infinite}
@keyframes fall{0%{transform:translate(0,-20px) rotate(0)}100%{transform:translate(var(--x),105vh) rotate(var(--r))}}
.wbox{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(330px,86vw);text-align:center;transform:scale(.85);transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.winmodal.open .wbox{transform:none}
.wbox .lbl{font-size:12px;letter-spacing:3px;font-weight:900;color:var(--lav);text-transform:uppercase}
.wring{position:relative;padding:8px;border-radius:50%;background:conic-gradient(from 0deg,#C084FC,#67E8F9,#F0ABFC,#FDE68A,#C084FC);animation:spin 4s linear infinite;box-shadow:0 0 40px rgba(192,132,252,.9),0 0 90px rgba(139,92,246,.6)}
.wring .av{animation:spin 4s linear infinite reverse;border:4px solid #160A4A}
.wbox .wn{font-size:20px;font-weight:900;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbox .wa{font-size:40px;font-weight:900;color:var(--green);text-shadow:0 0 22px rgba(74,222,128,.6);line-height:1}
.wbox .mx{font-size:12px;font-weight:800;color:var(--green);background:rgba(74,222,128,.15);border:1px solid rgba(74,222,128,.4);padding:4px 11px;border-radius:999px}
.wbox .me{font-size:12.5px;font-weight:700;opacity:.85}
.wbox .btn{margin-top:10px;width:220px}

/* =====================================================================
   v8 — PVM design system (tokens taken from PVM: g-frame / g-panel / g-btn / g-chip / cosmos)
   ===================================================================== */
:root{--lav:#c7b2ff;--cap:#a593dc;--line:#d6b0ffe6;--line-soft:#aa8cff4d;--pink:#ff2fdc;--green:#5ef0a4}
body{font-family:-apple-system,"SF Pro Display",Inter,system-ui,sans-serif;letter-spacing:-.011em;background:#1d0a5e;color:#f5f5f7}
.num{font-variant-numeric:tabular-nums}
/* cosmos */
.cosmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(85% 50% at 60% 58%,rgba(112,26,172,.55) 0%,rgba(86,19,148,.22) 50%,transparent 78%),radial-gradient(70% 40% at 12% 88%,rgba(58,42,210,.32) 0%,transparent 70%),radial-gradient(60% 30% at 92% 30%,rgba(150,40,200,.18) 0%,transparent 70%),linear-gradient(180deg,#01033c,#0c094e 12%,#260b72 30%,#3d1088 50%,#3e1085 70%,#3d129a 86%,#2b0b80)}
.cosmos .nebula{position:absolute;inset:-20%;background:radial-gradient(40% 30% at 30% 40%,rgba(160,60,230,.22),transparent 70%),radial-gradient(35% 25% at 75% 65%,rgba(90,60,255,.2),transparent 70%);animation:nebula 46s ease-in-out infinite alternate;will-change:transform}
@keyframes nebula{to{transform:translate(4%,-3%) scale(1.08) rotate(3deg)}}
.cosmos .dust{position:absolute;left:0;right:0;top:0;height:200%;background-repeat:repeat;will-change:transform}
.cosmos .d1{animation:rise 140s linear infinite;opacity:.85}
.cosmos .d2{animation:rise 90s linear infinite;opacity:.9}
.cosmos .d3{animation:rise 60s linear infinite;opacity:.55;filter:blur(1.2px)}
@keyframes rise{to{transform:translateY(-50%)}}
.cosmos .sparks svg{position:absolute;animation:sparkle 4s ease-in-out infinite;filter:drop-shadow(0 0 4px currentColor)}
@keyframes sparkle{0%,100%{opacity:.15;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1) rotate(25deg)}}
.cosmos .shoot{position:absolute;top:14%;left:70%;width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));opacity:0;transform:rotate(-28deg);animation:shoot 9s ease-in 3s infinite}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(152deg)}3%{opacity:1}12%{opacity:0;transform:translate(-260px,140px) rotate(152deg)}100%{opacity:0;transform:translate(-260px,140px) rotate(152deg)}}
.app{padding:8px 12px 118px}

/* header */
.top{height:52px;margin-bottom:4px}
.logo .lg{height:30px;width:auto;filter:drop-shadow(0 0 10px rgba(255,47,220,.35)) drop-shadow(0 2px 6px rgba(20,0,80,.6))}
.balance{height:40px;gap:7px;padding:0 5px 0 8px;border-radius:9999px;font-size:17px;font-weight:900;background:linear-gradient(180deg,#40209c9e,#2610689e);border:1.5px solid rgba(170,130,255,.5);box-shadow:inset 0 1px #ffffff29,0 4px 14px #1400464d,0 0 18px rgba(150,70,255,.25)}
.balance .plus{width:28px;height:28px;font-size:19px;font-weight:900;background:linear-gradient(180deg,#d77dff,#b552f8 42%,#9640f2 72%,#8a3aec);border:1.5px solid rgba(236,200,255,.9);box-shadow:0 0 0 2px #300e78b3,0 3px 10px #af50ff73,inset 0 -3px 6px #5618b473}
/* currency: glossy PVM star */
.star{display:inline-block;width:.95em;height:.95em;vertical-align:-.14em;color:transparent!important;text-shadow:none!important;overflow:hidden;font-size:inherit;background:url(star.svg?v=11) center/contain no-repeat;filter:drop-shadow(0 0 4px rgba(226,150,255,.55));text-indent:-99px;flex:none}
.star.big{width:26px;height:26px;vertical-align:middle}

/* PVM g-frame / g-panel */
.gf{position:relative;isolation:isolate;border-radius:30px;padding:6px;margin-bottom:14px;background:linear-gradient(180deg,#a466ff,#7a3ee6 32%,#5a28c4 72%,#4a1fae);box-shadow:0 0 0 1.5px #d6b0ffe6,0 0 24px #9646ff6b,0 16px 32px #04001e73,inset 0 2px 1px #fff6,inset 0 -3px 2px #2408608c}
.gf::before{content:"";position:absolute;top:2px;left:20px;width:32%;height:3px;border-radius:3px;background:linear-gradient(90deg,#fffc,#fff0);z-index:2;pointer-events:none}
.gf::after{content:"";position:absolute;inset:34% 1px;border-left:3px solid #d9bcff;border-right:3px solid #b48aff;border-radius:3px;opacity:.85;pointer-events:none}
.gf.sm{border-radius:24px;padding:4px}
.gp{position:relative;border-radius:24px;overflow:hidden;padding:14px 12px 12px;background:radial-gradient(110% 90% at 80% 30%,rgba(92,52,210,.5) 0%,transparent 60%),linear-gradient(165deg,#2b137a,#22106a 45%,#1b0b58);box-shadow:inset 0 0 0 1.5px #ba8cff99,inset 0 0 0 3.5px #16064280,inset 0 10px 28px #0a002d66}
.gf.sm .gp{border-radius:20px}
.gp>*{position:relative}
.gp>.planet{position:absolute;inset:0;width:100%;height:220px;pointer-events:none;opacity:.9}
.g-cap{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#c7b2ff}
.card{border-radius:22px;background:linear-gradient(165deg,#381c8a99,#1e0c5699);border:0;box-shadow:inset 0 0 0 1.5px #b088ff5c,inset 0 1px #ffffff24,0 10px 26px #08002859}
.label{font-size:11px;letter-spacing:.06em;color:#c7b2ff}
.cap{color:#a593dc}

/* PVM g-btn */
.btn{min-height:52px;height:auto;border-radius:9999px;font-size:18px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(50,0,100,.45);border:2px solid rgba(236,200,255,.9);background:linear-gradient(180deg,#d77dff,#b552f8 42%,#9640f2 72%,#8a3aec);box-shadow:0 0 0 2.5px #300e78b3,0 6px 18px #af50ff73,inset 0 -5px 10px #5618b473;transition:transform .12s,filter .2s}
.btn::before{left:7%;right:7%;top:3px;height:44%;border-radius:9999px;background:linear-gradient(180deg,#ffffff80,#ffffff0d)}
.btn::after{right:18px;bottom:6px;width:24px;height:5px;background:repeating-linear-gradient(-60deg,rgba(255,255,255,.6) 0 2.5px,transparent 2.5px 6.5px);opacity:.6}
.btn.sec{border-color:#aa8effe6;background:linear-gradient(180deg,#6d48e6,#5232c4 45%,#4127a6);box-shadow:0 0 0 2.5px #1e0a5ab3,0 6px 16px #5a3ce659,inset 0 -5px 10px #1e0c6e73}
.btn.sm{min-height:38px;height:38px;font-size:14px}
.btn.ghost{color:#d9c8ff;background:#8260ff1f;border:0;box-shadow:inset 0 0 0 1.5px #aa8cff4d;font-size:13px;font-weight:700;text-shadow:none;min-height:40px}
.btn[disabled]{filter:saturate(.45) brightness(.78)}
.btn:active{transform:scale(.97);filter:brightness(1.08)}

/* icon buttons */
.ib{width:36px;height:36px;background:linear-gradient(180deg,#40209c,#261068);border:1.5px solid rgba(170,130,255,.5);box-shadow:inset 0 1px #ffffff29,0 4px 12px #1400464d}
.ib svg{stroke:#e2d4ff}
.ib.q{font-size:16px;color:#e2d4ff}
.ib.admin{border-color:#ffb84d;box-shadow:0 0 10px rgba(255,184,77,.35)}

/* arena header */
.arhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 2px 10px}
.arhead h1{margin:0;font-size:28px;font-weight:900;letter-spacing:-.02em;line-height:1.05;text-shadow:0 3px 14px rgba(40,0,110,.55)}
.arhead .sub{font-size:12px;font-weight:600;color:#a593dc;margin-top:2px}
.arhead .icons{gap:6px}
.arhead .ib{width:34px;height:34px}
.arhead .ib svg{width:16px;height:16px}
.rooms{display:flex;gap:6px;padding:4px;margin-bottom:10px;border-radius:20px;background:linear-gradient(180deg,rgba(43,19,122,.9),rgba(27,11,88,.92));box-shadow:0 0 0 1.5px #d6b0ff99,inset 0 1px #ffffff1f,0 8px 20px #04001e59}
.rooms button{flex:1;height:46px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#a593dc;transition:.2s;position:relative;overflow:hidden}
.rooms .rk{font-size:13px;font-weight:800;color:inherit}
.rooms .rv{font-size:10.5px;font-weight:700;opacity:.85;display:flex;align-items:center;gap:2px}
.rooms button.on{color:#fff;background:linear-gradient(180deg,#b45cf7 0%,#8a3aec 100%);box-shadow:inset 0 0 0 1.5px rgba(236,200,255,.75),inset 0 2px 0 rgba(255,255,255,.35),0 4px 14px rgba(175,80,255,.45)}
.rooms button.on::before{content:"";position:absolute;top:2px;left:12%;right:12%;height:40%;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0))}
.rooms button>*{position:relative}

/* top game ticker */
.topgame{border-radius:9999px;padding:7px 12px 7px 14px;margin-bottom:12px;background:linear-gradient(180deg,#40209c9e,#2610689e);border:1.5px solid rgba(170,130,255,.5);box-shadow:inset 0 1px #ffffff29,0 4px 14px #1400464d}
.topgame .tl{color:#c7b2ff;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.topgame .bx,.topgame .amt{color:var(--green)}

/* pool header */
.arenap{padding:14px 12px 14px}
.poolhead{align-items:flex-start;margin:0 4px 10px}
.pid{gap:7px;font-size:13px}
.pid b{font-weight:900;color:#fff;font-size:13px}
.tier{font-size:9.5px;letter-spacing:.08em;padding:3px 8px;border-radius:9999px;background:linear-gradient(180deg,#6d48e6,#4127a6);border:1px solid #aa8effe6;box-shadow:inset 0 1px #ffffff40}
.ptot{align-items:center;gap:7px;margin-top:4px}
.ptot b{font-size:38px;font-weight:900;letter-spacing:-.02em;line-height:1;text-shadow:0 3px 14px rgba(40,0,110,.55),0 0 22px rgba(200,140,255,.35)}
.ptot .star.big{width:30px;height:30px;animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-3px) rotate(-6deg)}}
.ptot b.bump{animation:bump .45s ease}
@keyframes bump{40%{transform:scale(1.08);color:#ffe0ff}}
.pwin{font-size:11.5px;font-weight:700;color:#a593dc;margin-top:5px;display:flex;align-items:center;gap:4px}
.pwin b{color:#e9dcff}
.pst{height:34px;padding:0 13px;font-size:13px;border-radius:9999px;background:linear-gradient(180deg,#40209c9e,#2610689e);border:1.5px solid rgba(170,130,255,.5);box-shadow:inset 0 1px #ffffff29,0 4px 14px #1400464d;color:#d9c8ff}
.pst.live{color:#fff;border-color:#d6b0ffe6}
.pst.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#5ef0a4;box-shadow:0 0 8px #5ef0a4;margin-right:3px;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.3}}
.pst.red{color:#fff;background:linear-gradient(180deg,#ff5fa8,#d61f7a);border-color:#ffc2e0;box-shadow:0 0 0 2px #5a0a3a99,0 0 18px rgba(255,60,150,.6)}
.pst.red b{color:#fff}
.pst.red::before{background:#fff;box-shadow:0 0 8px #fff}
.pst.spin{background:linear-gradient(180deg,#d77dff,#9640f2);border-color:rgba(236,200,255,.9);box-shadow:0 0 16px rgba(200,90,255,.6)}
.pst.done{color:#5ef0a4;background:linear-gradient(180deg,rgba(20,90,80,.6),rgba(16,50,70,.6));border-color:rgba(94,240,164,.55)}

/* thumbs = PVM ticker chips */
.thumbs{gap:6px;margin:0 0 10px;min-height:34px;overflow-x:auto;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.th{width:auto;height:32px;flex-direction:row;gap:5px;padding:0 9px 0 3px;border-radius:9999px;background:linear-gradient(180deg,#40209c9e,#2610689e);border:1.5px solid color-mix(in srgb,var(--c) 70%,#fff 15%);box-shadow:inset 0 1px #ffffff29,0 0 10px color-mix(in srgb,var(--c) 35%,transparent)}
.th .av{border:1.5px solid rgba(255,255,255,.7)}
.th b{font-size:12px;font-weight:800}
.th .star{width:12px;height:12px}
.th.me{box-shadow:0 0 0 2px #fff,0 0 14px rgba(255,255,255,.45)}
.th.more{padding:0 10px;color:#c7b2ff;border-color:rgba(170,130,255,.5)}
.th.ghost{padding:0 12px 0 6px;border:1.5px dashed rgba(170,130,255,.5);background:rgba(40,20,120,.35);box-shadow:none}
.th.ghost i{width:22px;height:22px;border-radius:50%;border:1.5px dashed rgba(200,170,255,.6)}
.th.ghost b{color:#a593dc;font-weight:700;font-size:12px}

/* ===== 3D glass cube board ===== */
.boardcard{padding:0;margin:0 -2px 12px;background:none;box-shadow:none;border:0;border-radius:0;overflow:visible}
.boardcard.mini{max-width:300px;margin:6px auto 14px}
.arena{aspect-ratio:auto;background:none;box-shadow:none;overflow:visible;border-radius:0;padding:4px 0 18px}
.cube{position:relative;perspective:1100px;perspective-origin:50% 0%}
.slab{position:relative;width:93%;margin:0 auto;aspect-ratio:1/1;transform-style:preserve-3d;transform:rotateX(17deg);transform-origin:50% 60%}
.rim{position:absolute;inset:0;border-radius:28px;padding:8px;background:linear-gradient(165deg,#f1e2ff 0%,#b98aff 9%,#7a3ee6 30%,#5a28c4 70%,#3a1896 100%);box-shadow:0 0 0 1.5px #e7ccffee,0 0 34px #a050ff88,inset 0 2px 1px #fffa,inset 0 -3px 3px #24086099,inset 2px 0 2px #ffffff40,inset -2px 0 2px #2a0a7a80;transform:translateZ(0)}
.rim::before{content:"";position:absolute;top:2px;left:24px;width:36%;height:3px;border-radius:3px;background:linear-gradient(90deg,#fff,#fff0);pointer-events:none;z-index:3}
.rim::after{content:"";position:absolute;right:2px;top:30%;bottom:30%;width:3px;border-radius:3px;background:linear-gradient(180deg,#e2c8ff,#9d6bff);opacity:.85;pointer-events:none}
.field{inset:8px;border-radius:20px;background:#150646}
.zsvg{border-radius:20px}
.wall{position:absolute;left:0;right:0;pointer-events:none}
.wf{top:100%;height:46px;transform-origin:50% 0;transform:rotateX(-90deg);border-radius:0 0 28px 28px;background:linear-gradient(180deg,#d9b8ff 0%,#8a52f0 18%,#5a28c4 55%,#2c1078 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -6px 10px rgba(10,0,40,.5),inset 18px 0 16px -10px rgba(255,255,255,.35),inset -18px 0 16px -10px rgba(20,0,60,.4)}
.wb{display:none}
.cshadow{position:absolute;left:8%;right:8%;bottom:-6px;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgba(6,0,30,.75),rgba(6,0,30,0));pointer-events:none}
.cube::after{content:"";position:absolute;left:4%;right:4%;bottom:-16px;height:46px;border-radius:50%;background:radial-gradient(closest-side,rgba(190,80,255,.45),rgba(190,80,255,0));pointer-events:none;z-index:-1}
/* glass on top of the zones: bevel, convex bulge, specular streaks, light sweep */
.glass{position:absolute;inset:8px;border-radius:20px;pointer-events:none;overflow:hidden;box-shadow:inset 0 0 0 1.5px rgba(255,235,255,.55),inset 0 3px 2px rgba(255,255,255,.45),inset 0 14px 22px rgba(255,255,255,.12),inset 0 -16px 26px rgba(14,0,52,.55),inset 0 0 36px rgba(20,0,70,.45)}
.glass .bulge{position:absolute;inset:0;background:radial-gradient(120% 85% at 50% -8%,rgba(255,255,255,.26) 0%,rgba(255,255,255,.07) 38%,rgba(255,255,255,0) 58%),radial-gradient(78% 78% at 50% 48%,rgba(0,0,0,0) 62%,rgba(14,0,52,.34) 100%)}
.glass .spec{position:absolute;left:7%;top:3.5%;width:58%;height:15%;border-radius:50%;border-top:2.5px solid rgba(255,255,255,.75);filter:blur(.6px);opacity:.8;transform:rotate(-4deg)}
.glass .spec2{position:absolute;right:7%;top:6%;width:34px;height:7px;background:repeating-linear-gradient(-60deg,rgba(255,255,255,.75) 0 3px,transparent 3px 8px);opacity:.55;border-radius:3px}
.glass .sweep{position:absolute;top:-20%;bottom:-20%;left:0;width:38%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.16) 45%,rgba(255,240,255,.28) 50%,rgba(255,255,255,.16) 55%,rgba(255,255,255,0));animation:sweep 6.5s ease-in-out infinite;will-change:transform}
@keyframes sweep{0%{transform:translateX(-140%) skewX(-18deg)}55%,100%{transform:translateX(360%) skewX(-18deg)}}
.arena.spinning .glass .sweep{animation-duration:1.6s}
.empty{inset:8px;color:#e2d4ff;font-size:14px;text-shadow:0 2px 8px rgba(20,0,60,.8)}
.empty>div{transform:none;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:84px;padding:8px 14px;border-radius:9999px}
.empty .gemc{width:40px;height:40px;margin:0;filter:drop-shadow(0 0 14px rgba(255,47,220,.8))}
.pop{inset:8px}
.pop>div{font-size:24px;text-shadow:0 0 14px #ff2fdc,0 2px 8px rgba(20,0,60,.9);display:flex;align-items:center;gap:4px}
/* zones */
.zp{stroke:#12043f;stroke-width:10;stroke-linejoin:round;filter:none;transition:opacity .45s}
.ze{fill:none;stroke:rgba(240,220,255,.55);stroke-width:2.5;stroke-linejoin:round;transition:stroke .3s,stroke-width .3s,opacity .45s}
.eg{filter:drop-shadow(0 0 5px rgba(200,140,255,.8))}
.ze.me{stroke:#fff;stroke-width:5}
.zp.hot{filter:brightness(1.4) saturate(1.15)}
.ze.hot{stroke:#fff;stroke-width:4}
.zp.dim,.ze.dim{opacity:.28}
.zp.win{stroke:#fff;stroke-width:6;filter:brightness(1.25) saturate(1.1)}
.ze.win{stroke:#ffe0ff;stroke-width:9;animation:wglow 1.1s ease-in-out infinite alternate}
@keyframes wglow{to{stroke:#fff;stroke-width:13}}
/* avatars inside zones */
.zav{display:flex;flex-direction:column;align-items:center;transition:opacity .3s}
.zring{width:100%;height:100%;border-radius:50%;padding:2.5px;background:linear-gradient(160deg,#ffffff,#e2c8ff 35%,#9d6bff 70%,#5a28c4);box-shadow:0 0 0 1.5px rgba(20,0,60,.6),0 4px 12px rgba(10,0,40,.55),0 0 14px color-mix(in srgb,var(--c) 60%,transparent);flex:none}
.zav .av{width:100%!important;height:100%!important;font-size:inherit!important;border:0;box-shadow:inset 0 2px 3px rgba(255,255,255,.35),inset 0 -3px 5px rgba(0,0,0,.25)}
.zchip{position:absolute;top:calc(100% - 6px);left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:900;line-height:1;padding:3px 6px;border-radius:9999px;white-space:nowrap;color:#fff;background:linear-gradient(180deg,#40209cee,#261068ee);border:1px solid rgba(214,176,255,.8);box-shadow:0 2px 6px rgba(10,0,40,.5);font-variant-numeric:tabular-nums}
.zav.nochip .zchip,.zav.nochip .zme{display:none}
.zme{position:absolute;bottom:calc(100% - 4px);left:50%;transform:translateX(-50%);font-size:8.5px;font-weight:900;letter-spacing:.06em;padding:2px 5px;border-radius:6px;color:#2b0b80;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7)}
.zav.me .zring{background:linear-gradient(160deg,#fff,#ffd6fb 40%,#ff2fdc 75%,#c026d3);box-shadow:0 0 0 1.5px rgba(20,0,60,.6),0 0 18px rgba(255,90,230,.8)}
.zav.dim{opacity:.3!important}
.zav.win .zring{background:conic-gradient(from 0deg,#fff,#ff9ee6,#d8c8ff,#bcd0ff,#fff);box-shadow:0 0 0 2px #fff,0 0 26px #fff,0 0 40px #ff9ee6;animation:wpulse 1s ease-in-out infinite alternate}
@keyframes wpulse{to{transform:scale(1.1)}}

/* quick amount chips + bet CTA */
.quick{display:flex;gap:6px;margin:2px 0 10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.quick::-webkit-scrollbar{display:none}
.qchip{flex:1 0 auto;height:34px;padding:0 10px;border-radius:9999px;display:flex;align-items:center;justify-content:center;gap:3px;font-size:13px;font-weight:800;color:#e2d4ff;background:linear-gradient(180deg,#40209c9e,#2610689e);border:1.5px solid rgba(170,130,255,.5);box-shadow:inset 0 1px #ffffff29,0 4px 10px #1400464d;transition:.15s}
.qchip .star{width:12px;height:12px}
.qchip.on{color:#fff;background:linear-gradient(180deg,#b45cf7,#8a3aec);border-color:rgba(236,200,255,.85);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 14px rgba(175,80,255,.6)}
.qchip.x2{flex:0 0 auto;color:#ffd6fb}
.qchip:active{transform:scale(.94)}
.betrow{gap:8px;box-shadow:none;margin-bottom:2px;border-radius:0}
.betmain{border-radius:9999px!important;font-size:18px}
.betmain>span{display:flex;align-items:center;gap:5px}
.betmain .star{width:19px;height:19px}
.betdd{border-radius:9999px!important;border-left:2px solid #aa8effe6!important;padding:0 14px;font-size:15px;min-width:86px}
.betdd>span{display:flex;align-items:center;gap:4px}
.betdd::after{display:none}
.betdd .chev{font-size:11px;opacity:.85}

/* participants */
.plistp{padding:12px 10px 10px}
.listhead{margin:2px 4px 10px}
.listhead h3{font-size:17px;font-weight:900}
.listhead .cnt{background:linear-gradient(180deg,#6d48e6,#4127a6);color:#fff;border:1px solid #aa8effe6}
.prow{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 9px;margin-bottom:7px;border-radius:18px;border:0;background:linear-gradient(165deg,#381c8a99,#1e0c5699);box-shadow:inset 0 0 0 1.5px #b088ff4d,inset 0 1px #ffffff1f;position:relative;overflow:hidden}
.prow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);box-shadow:0 0 10px var(--c)}
.prow .rk{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;color:#e2d4ff;background:rgba(130,96,255,.22);box-shadow:inset 0 0 0 1px #aa8cff66;flex:none}
.pav{padding:2px;border-radius:50%;background:linear-gradient(160deg,#fff,color-mix(in srgb,var(--c) 70%,#fff) 40%,var(--c));box-shadow:0 0 10px color-mix(in srgb,var(--c) 55%,transparent);flex:none}
.pav .av{border:2px solid #1e0c56}
.prow .nm{font-weight:800;font-size:14px;display:flex;align-items:center;gap:5px}
.tag{font-size:9px;font-weight:900;letter-spacing:.06em;padding:2px 6px;border-radius:6px;background:rgba(170,140,255,.25);color:#e2d4ff}
.tag.me{background:#fff;color:#2b0b80}
.tag.win{background:linear-gradient(180deg,#5ef0a4,#22b874);color:#06331f}
.prow .bar{height:5px;margin-top:7px;background:rgba(10,0,40,.45);box-shadow:inset 0 1px 1px rgba(0,0,0,.3)}
.prow .bar i{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 60%,#fff),var(--c));box-shadow:0 0 8px var(--c)}
.prow .st b{font-size:17px;font-weight:900}
.schip{display:flex;align-items:center;gap:3px;font-size:12px!important;font-weight:800!important;color:#e2d4ff!important;padding:2px 7px;border-radius:9999px;background:rgba(130,96,255,.2);box-shadow:inset 0 0 0 1px #aa8cff55}
.schip .star{width:12px;height:12px}
.prow.me{box-shadow:inset 0 0 0 1.5px #ffd6fbcc,0 0 16px rgba(255,90,230,.35);background:linear-gradient(165deg,#5a2aa8aa,#2a0f6eaa)}
.prow.win{box-shadow:inset 0 0 0 1.5px #5ef0a4cc,0 0 18px rgba(94,240,164,.35);background:linear-gradient(165deg,rgba(30,110,100,.55),rgba(30,30,110,.75))}
.emptyp{display:flex;flex-direction:column;align-items:center;gap:8px;color:#a593dc}
.emptyp .gemc{width:34px;height:34px;filter:drop-shadow(0 0 10px rgba(255,47,220,.6))}
.hash{display:flex;margin:12px 4px 2px}
.hash code{color:#e2d4ff}
.copy{color:#c7b2ff}.copy svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.fair{color:#5ef0a4;background:rgba(94,240,164,.1);border-color:rgba(94,240,164,.4)}
.privbtn{min-height:44px;margin:0 0 14px}

/* bottom nav — PVM */
.nav{left:0;right:0;transform:none;width:auto;margin:0 auto;max-width:404px;padding:0 12px;bottom:calc(10px + env(safe-area-inset-bottom));background:none;border:0;box-shadow:none;display:block;border-radius:0}
.navf{position:relative;border-radius:24px;padding:4px;background:linear-gradient(180deg,#a466ff,#7a3ee6 32%,#5a28c4 72%,#4a1fae);box-shadow:0 0 0 1.5px #d6b0ffe6,0 0 24px #9646ff6b,0 16px 32px #04001e73,inset 0 2px 1px #fff6,inset 0 -3px 2px #2408608c}
.navf::before{content:"";position:absolute;top:2px;left:20px;width:32%;height:3px;border-radius:3px;background:linear-gradient(90deg,#fffc,#fff0);z-index:2}
.navp{display:flex;padding:4px;border-radius:20px;background:linear-gradient(180deg,rgba(43,19,122,.94),rgba(27,11,88,.96));box-shadow:inset 0 0 0 1.5px #ba8cff99,inset 0 0 0 3.5px #16064280}
.nav button{height:56px;border-radius:16px;font-size:11px;font-weight:800;color:#a593dc;gap:3px;border:0;box-shadow:none;background:none}
.nav svg{width:24px;height:24px}
.nav button.active{color:#fff;border:0;background:linear-gradient(180deg,#b45cf7 0%,#8a3aec 100%);box-shadow:inset 0 0 0 1.5px rgba(236,200,255,.75),inset 0 2px 0 rgba(255,255,255,.35),0 4px 14px rgba(175,80,255,.45)}
.nav button.active::before{top:2px;left:12%;right:12%;height:42%;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0))}
.nav button.active svg{filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}

/* sheets */
.overlay{background:rgba(4,0,30,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sheet{background:radial-gradient(110% 60% at 80% 0%,rgba(92,52,210,.5),transparent 60%),linear-gradient(165deg,#2b137a,#22106a 45%,#1b0b58);border:0;box-shadow:0 0 0 1.5px #d6b0ffe6,0 -4px 0 0 #7a3ee6,0 -6px 0 0 #a466ff,0 -10px 40px #9646ff6b,inset 0 2px 1px #fff4}
.handle{background:linear-gradient(90deg,#e2c8ff,#9d6bff);height:5px;width:44px}
.shead h2{font-size:22px;letter-spacing:-.02em}
.x{background:#8260ff1f;box-shadow:inset 0 0 0 1.5px #aa8cff4d;color:#d9c8ff}
.chip{border-radius:9999px;height:46px;background:linear-gradient(180deg,#40209c9e,#2610689e);border:1.5px solid rgba(170,130,255,.5);box-shadow:inset 0 1px #ffffff29,0 4px 14px #1400464d;color:#fff}
.chip .star{width:14px;height:14px}
.chip.on{background:linear-gradient(180deg,#b45cf7,#8a3aec);border-color:rgba(236,200,255,.85);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 16px rgba(175,80,255,.6)}
.chips{grid-template-columns:repeat(3,1fr)}
.amtin input{border-radius:9999px;border:1.5px solid rgba(170,130,255,.6);background:rgba(10,0,40,.5);box-shadow:inset 0 2px 6px rgba(0,0,0,.35);font-size:22px;font-weight:900}
.amtin button{border-radius:50%;border:2px solid #aa8effe6;background:linear-gradient(180deg,#6d48e6,#5232c4 45%,#4127a6);box-shadow:0 0 0 2px #1e0a5ab3,inset 0 -4px 8px #1e0c6e73}
.kv{border-bottom-color:rgba(170,130,255,.16)}
.kv>span:last-child{display:flex;align-items:center;gap:4px;font-weight:800}
.htabs button{border-radius:9999px;background:linear-gradient(180deg,#40209c9e,#2610689e);border:1.5px solid rgba(170,130,255,.5)}
.htabs button.on{background:linear-gradient(180deg,#b45cf7,#8a3aec);border-color:rgba(236,200,255,.85);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 0 12px rgba(175,80,255,.5)}
.hcard{border-radius:20px}
.pill{color:#5ef0a4}
.step,.note{background:rgba(10,0,40,.38);border-color:rgba(170,130,255,.3);border-radius:16px}
.toast{background:linear-gradient(180deg,#6d48e6,#4127a6);border:1.5px solid #d6b0ffe6;box-shadow:0 0 0 2px #1e0a5ab3,0 8px 24px #9646ff6b}

/* winner modal */
.winmodal{background:radial-gradient(circle at 50% 42%,rgba(150,60,240,.55),rgba(4,0,30,.93) 72%)}
.wrays{position:absolute;left:50%;top:44%;width:640px;height:640px;margin:-320px 0 0 -320px;background:repeating-conic-gradient(from 0deg,rgba(255,200,255,.13) 0 7deg,rgba(255,200,255,0) 7deg 20deg);-webkit-mask:radial-gradient(closest-side,#000 25%,transparent 100%);mask:radial-gradient(closest-side,#000 25%,transparent 100%);animation:spin 26s linear infinite;pointer-events:none}
.wbox{gap:0;padding:6px;width:min(320px,88vw)}
.wbox .gp{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 18px 18px;width:100%}
.wbox .lbl{font-size:13px;letter-spacing:.1em;color:#e2c8ff}
.wring{padding:5px;background:conic-gradient(from 0deg,#fff,#ff9ee6,#d8c8ff,#bcd0ff,#ff2fdc,#fff);box-shadow:0 0 34px rgba(255,120,240,.8),0 0 80px rgba(150,70,255,.6)}
.wring .av{border:4px solid #1b0b58}
.wbox .wa{display:flex;align-items:center;gap:8px;font-size:42px;color:#fff;text-shadow:0 3px 14px rgba(40,0,110,.55),0 0 24px rgba(255,140,240,.6);letter-spacing:-.02em}
.wbox .wa .star.big{width:38px;height:38px;animation:float 3s ease-in-out infinite}
.wbox .mx{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;background:none;border:0;padding:0;color:#e2d4ff}
.wbox .mx>span{display:flex;align-items:center;gap:3px;padding:4px 10px;border-radius:9999px;background:linear-gradient(180deg,#40209c9e,#2610689e);border:1.5px solid rgba(170,130,255,.5);font-size:11.5px}
.wbox .mx>span:first-child{color:#5ef0a4;border-color:rgba(94,240,164,.5)}
.wbox .mx .star{width:11px;height:11px}
.wbox .btn{width:100%;margin-top:6px}
.wbox .gp>.planet{height:100%}

/* misc screens */
.titlebar h1{font-size:28px;text-shadow:0 3px 14px rgba(40,0,110,.55)}
.soon .ic{filter:drop-shadow(0 0 14px rgba(255,120,240,.7))}
.invite .ring{background:conic-gradient(#ff2fdc,#a466ff,#5b3dff,#ff2fdc)}
.switch.on{background:linear-gradient(180deg,#d77dff,#8a3aec)}
.adm .tbtn.on{background:linear-gradient(180deg,#b45cf7,#8a3aec);border-color:rgba(236,200,255,.8)}
@media (prefers-reduced-motion:reduce){.cosmos *,.glass .sweep{animation:none!important}}
/* v8 fixes */
.poolhead{gap:8px}.poolhead>.pid,.poolhead>div:first-child{min-width:0}
.pst{flex:none;max-width:46%;overflow:hidden;text-overflow:ellipsis;font-size:12px;padding:0 11px}
.prow .st .num,.prow .st b{width:auto;color:#fff;text-align:right}
.prow .st{flex:none;align-items:flex-end}
.quick{gap:5px}.qchip{flex:1 1 0;min-width:0;padding:0 4px;font-size:12.5px}.qchip.x2{flex:0 0 auto;padding:0 9px}
.wf{top:auto;bottom:-22px;height:60px;transform:none;z-index:-1;border-radius:0 0 30px 30px;background:linear-gradient(180deg,#3a1896 0%,#6a36d8 40%,#4a1fae 75%,#2a0f78 100%);box-shadow:0 0 0 1.5px #c9a2ffbb,inset 0 -3px 2px rgba(255,255,255,.25),inset 0 -10px 14px rgba(10,0,40,.45),inset 22px 0 18px -12px rgba(255,255,255,.3),inset -22px 0 18px -12px rgba(20,0,60,.45),0 18px 30px rgba(4,0,30,.55),0 0 30px rgba(160,80,255,.35)}
.slab{margin-bottom:22px}
.cshadow{bottom:-14px}
.poolhead>:first-child{flex:1 1 auto;min-width:0}.pid{flex-wrap:wrap;row-gap:4px}.pst{max-width:42%}
/* v8.1 — @trade-like field: bright solid zones, thin seams, big avatar discs */
.zp{stroke:#1a0750;stroke-width:5}
.ze{stroke:rgba(255,255,255,.22);stroke-width:1.5}
.eg{filter:none}
.ze.me{stroke:rgba(255,255,255,.75);stroke-width:3}
.ze.hot{stroke:#fff;stroke-width:3.5}
.ze.win{stroke:#fff;stroke-width:6}
@keyframes wglow{to{stroke:#fff;stroke-width:9}}
.zp.hot{filter:brightness(1.18) saturate(1.1)}
.zbig{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;font-weight:900;letter-spacing:-.02em;color:rgba(255,255,255,.6);background:radial-gradient(circle at 50% 35%,var(--c2),color-mix(in srgb,var(--c2) 80%,#000) 100%);background-size:cover;background-position:center;box-shadow:inset 0 2px 6px rgba(0,0,0,.22),inset 0 -2px 4px rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.18);transition:transform .3s,box-shadow .3s}
.zbig[style*="background-image"]{color:transparent}
.zav.me .zbig{color:rgba(255,255,255,.85);box-shadow:inset 0 2px 6px rgba(0,0,0,.22),0 0 0 2.5px rgba(255,255,255,.9),0 0 16px rgba(255,255,255,.45)}
.zav.win .zbig{box-shadow:0 0 0 3px #fff,0 0 24px #fff,0 0 40px var(--c);animation:wpulse 1s ease-in-out infinite alternate;color:#fff}
.zav.hot .zbig{transform:scale(1.05)}
.zchip{top:calc(100% - 9px);font-size:10px;padding:2px 6px;background:rgba(20,6,70,.78);border:1px solid rgba(255,255,255,.35)}
.zme{bottom:calc(100% - 8px)}
.glass .bulge{background:radial-gradient(120% 85% at 50% -8%,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,0) 58%),radial-gradient(80% 80% at 50% 48%,rgba(0,0,0,0) 66%,rgba(14,0,52,.28) 100%)}
/* v9 — current PVM header: big centred P▼M logo with a glowing violet glyph */
.top{position:relative;justify-content:center;height:66px;margin:2px 0 6px}
.logo .lg{height:44px;filter:drop-shadow(0 0 14px rgba(190,120,255,.55)) drop-shadow(0 3px 8px rgba(20,0,80,.65))}
.top .balance{position:absolute;right:0;top:50%;transform:translateY(-50%);height:36px;font-size:15px;padding:0 4px 0 7px}
.top .balance .star.big{width:22px;height:22px}
.top .balance .plus{width:26px;height:26px;font-size:17px}
.nav button{border-radius:14px}
.nav button.active{border-radius:14px}

/* ===================== v3: full-screen, flat landscape board, new zones, bet input ===================== */
html,body{background:#1d0a5e;overscroll-behavior:none}
.app{max-width:none;width:100%;box-sizing:border-box;margin:0;
  padding:calc(6px + var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) calc(104px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px));
  border:0;border-radius:0;box-shadow:none;background:none}
@media (min-width:560px){.app{max-width:540px;margin:0 auto}}
.nav{max-width:540px}
/* the arena panel is no longer a card: content sits right on the space background (no nested frames) */
.arenap{padding:2px 0 6px;background:none;border:0;box-shadow:none;position:relative}
.arenap .planet{display:none}
.boardcard{margin:6px -4px 12px;padding:0}
.boardcard.mini{max-width:none;margin:8px 0 12px}
/* ---- board: ONE glossy bevelled PVM frame, flat head-on rectangle ---- */
.arena{padding:0;aspect-ratio:auto;overflow:visible}
.bframe{position:relative;padding:6px;border-radius:22px;
  background:linear-gradient(180deg,#e9d6ff 0%,#b48cff 7%,#7c4cf0 22%,#5b2fd0 60%,#41209f 88%,#6a45d8 100%);
  box-shadow:0 0 0 1px rgba(30,6,90,.9),0 1px 0 1px rgba(255,255,255,.18) inset,0 16px 34px rgba(8,0,40,.6),0 0 30px rgba(150,90,255,.35)}
.bframe::before{content:"";position:absolute;left:18px;right:46%;top:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 30%,rgba(255,255,255,0));opacity:.9;pointer-events:none}
.bframe::after{content:"";position:absolute;right:10px;bottom:3px;width:30px;height:5px;border-radius:2px;background:repeating-linear-gradient(-60deg,rgba(255,255,255,.55) 0 2px,transparent 2px 6px);pointer-events:none}
.arena .field{position:relative;inset:auto;width:100%;border-radius:16px;overflow:hidden;background:#0c0330;
  box-shadow:0 0 0 1.5px #1a0750,0 0 0 2.5px rgba(255,255,255,.22)}
.arena.sq .field{aspect-ratio:1/1}
.cam{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.zsvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.arena .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.arena .glass{position:absolute;inset:0;border-radius:16px;pointer-events:none;overflow:hidden;z-index:4;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 10px 18px -8px rgba(255,255,255,.22),inset 0 -14px 26px -10px rgba(10,0,40,.7),inset 0 0 40px rgba(10,0,40,.45)}
.arena .glass .gtop{position:absolute;left:0;right:0;top:0;height:42%;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0))}
.arena .glass .gstr{position:absolute;top:-30%;bottom:-30%;left:-30%;width:22%;transform:rotate(18deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.07),rgba(255,255,255,0));animation:gsw 7s ease-in-out infinite}
@keyframes gsw{0%,55%{left:-30%}100%{left:130%}}
.arena .empty{inset:0;z-index:5}
.arena .empty>div{margin-top:0}
.arena .pop{inset:0;z-index:2}
/* zones */
.zone .zp{transition:opacity .35s,filter .35s}
.zone .zi{fill:none;stroke-width:34;opacity:.55;transition:opacity .35s}
.zone.me .zi{opacity:.85}
.ze{fill:none;stroke:rgba(255,236,255,.55);stroke-width:2.6;stroke-linejoin:round;transition:stroke .3s,opacity .35s,stroke-width .3s}
.zg{filter:none}
.eg::before{content:none}
.zone.dim .zp,.zone.dim .zi{opacity:.38}
.ze.dim{opacity:.35}
.zone.hot .zp{filter:brightness(1.22) saturate(1.1)}
.zone.hot .zi{opacity:1}
.ze.hot{stroke:#fff;stroke-width:4}
.ze.me{stroke:rgba(255,255,255,.9);stroke-width:3.4}
.zone.win .zp{filter:brightness(1.3) saturate(1.15);animation:zwin 1s ease-in-out infinite alternate}
.zone.win .zi{opacity:1;stroke-width:60}
.ze.win{stroke:#fff;stroke-width:6}
@keyframes zwin{from{filter:brightness(1.15)}to{filter:brightness(1.45) saturate(1.2)}}
/* avatar + name/% tag */
.arena .zav{position:absolute;transform:translate(-50%,-58%);display:block;border-radius:50%;transition:opacity .35s,transform .35s;z-index:1}
.zav .zph{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,var(--c1),var(--c) 55%,var(--c2));background-size:cover;background-position:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.92),0 0 0 3.5px rgba(20,0,60,.55),0 6px 14px rgba(0,0,0,.45);display:grid;place-items:center}
.zav .zph b{font-weight:900;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4);letter-spacing:-.02em}
.zav .ztag{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);display:flex;align-items:center;gap:4px;white-space:nowrap;
  padding:2px 7px 2px 7px;border-radius:999px;background:rgba(14,3,48,.72);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  font-size:10px;font-weight:800;line-height:14px;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.zav .znm{max-width:70px;overflow:hidden;text-overflow:ellipsis;opacity:.85;font-weight:700}
.zav .zpc{color:#ffd6fb}
.zav .zyou{font-style:normal;font-size:9px;padding:0 5px;border-radius:999px;background:linear-gradient(180deg,#ff6ae0,#c026d3);color:#fff}
.zav.notag .ztag{display:none}
.zav.tiny .znm{display:none}
.zav.me .zph{box-shadow:0 0 0 2.5px #fff,0 0 0 4px #ff2fdc,0 0 18px rgba(255,80,220,.75)}
.zav.dim{opacity:.4!important}
.zav.hot{transform:translate(-50%,-58%) scale(1.08)}
.zav.win{transform:translate(-50%,-58%) scale(1.15)}
.zav.win .zph{box-shadow:0 0 0 3px #fff,0 0 26px #fff,0 0 44px var(--c)}
.arena.zoomed .ztag{opacity:.9}
/* ---- custom bet input ---- */
.betpanel{margin-top:2px}
.betin{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.betin .stp{flex:0 0 46px;height:46px;border-radius:16px;border:1px solid rgba(236,210,255,.35);color:#fff;font-size:22px;font-weight:800;
  background:linear-gradient(180deg,rgba(150,100,255,.55),rgba(80,40,190,.55));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35),0 4px 10px rgba(10,0,40,.35)}
.betin .stp:active{transform:scale(.94)}
.bfield{flex:1;display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(20,6,64,.85),rgba(40,14,110,.8));border:1.5px solid rgba(200,160,255,.55);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.12),0 0 0 0 rgba(255,47,220,0);transition:box-shadow .2s,border-color .2s}
.bfield:focus-within{border-color:#ff8ae8;box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 0 0 3px rgba(255,47,220,.25),0 0 18px rgba(255,47,220,.35)}
.bfield input{flex:1;min-width:0;width:100%;border:0;outline:0;background:none;color:#fff;font:inherit;font-size:20px;font-weight:900;letter-spacing:.01em;text-align:center;font-variant-numeric:tabular-nums;padding:0}
.betpanel.bad .bfield{border-color:#ff6b8b}
.bhint{text-align:center;font-size:11.5px;font-weight:700;color:#b9a6ea;margin:0 0 8px;min-height:15px}
.bhint.bad{color:#ff8fa8}
.bhint .star{width:11px;height:11px}
.qchip.no{opacity:.45}
.betpanel .betmain{width:100%}
.betpanel.bad .betmain{filter:saturate(.6) brightness(.85)}
.betpanel.closed .betin,.betpanel.closed .quick{opacity:.55;pointer-events:none}
.arenap .thumbs{display:none}
.arhead .sub{display:none}
.betin{gap:8px}
.bctl{flex:1 1 52%;display:flex;align-items:center;gap:5px;min-width:0}
.betin .stp{flex:0 0 38px;height:46px;border-radius:14px;font-size:20px}
.bfield{padding:0 8px;gap:4px}
.bfield .star{width:18px;height:18px;flex:none}
.bfield input{font-size:18px}
.betin .betmain{flex:1 1 48%;width:auto;min-width:0;height:46px;padding:0 10px;font-size:15px;white-space:nowrap}
.betin .betmain>span{white-space:nowrap}
.bhint{margin:0 0 6px}
.ze{stroke:rgba(255,240,255,.8);stroke-width:3}
.zav .ztag{font-size:9.5px;padding:1px 6px;line-height:13px;top:calc(100% + 3px)}
.betpanel.closed #betAmtM,.betpanel.closed .betmain .star{display:none}
/* v4: winner modal for non-winners ("Забрал банк") */
.wbox .wa.bank{flex-direction:row;flex-wrap:wrap;justify-content:center;font-size:34px;gap:6px}
.wbox .wa.bank .wcap{flex-basis:100%;text-align:center;font-size:14px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:#ffd6fb;text-shadow:0 0 12px rgba(255,120,230,.5)}
.wbox .wa.bank .star.big{width:30px;height:30px}
.hcard .pay .cap{display:block}
/* ===== v4: fully FLAT players like @trade (no shading / glow / bevel / sheen / shadows) ===== */
.arena .zone .zi{display:none}
.arena .zone .zp,.arena .zone.hot .zp,.arena .zone.win .zp{filter:none!important;stroke:none;animation:none}
.arena .ze{filter:none!important;stroke:rgba(10,2,40,.35);stroke-width:2;animation:none!important}
.arena .ze.me{stroke:rgba(255,255,255,.75);stroke-width:2.5}
.arena .ze.hot{stroke:rgba(255,255,255,.9);stroke-width:3}
.arena .ze.win{stroke:#fff;stroke-width:4}
.arena .zone.dim .zp{opacity:.45}.arena .ze.dim{opacity:.4}
.arena .zone.win .zp{opacity:1}
.arena .zsvg{background:none}
.arena .glass{display:none!important}
.arena .zav{transform:translate(-50%,-50%)!important;filter:none}
.arena .zav .zph{background:var(--c1);background-size:cover;background-position:center;box-shadow:none!important;border:0!important}
.arena .zav .zph b{text-shadow:none;font-weight:800;color:#fff}
.arena .zav .ztag{display:none!important}
.arena .zav.me .zph{box-shadow:0 0 0 2px #fff!important}
.arena .zav.win .zph{box-shadow:0 0 0 3px #fff!important}
.arena .zav.dim{opacity:.5!important}
.arena .zav.hot,.arena .zav.win{transform:translate(-50%,-50%)!important}
/* ===== v4: one big "Поставить" button + bet bottom sheet (@virus style) ===== */
.betpanel{margin-top:12px}
.btn.betbig{width:100%;height:58px;border-radius:999px;font-size:19px;font-weight:900;letter-spacing:.01em}
.btn.betbig:disabled{filter:saturate(.35) brightness(.75);opacity:.85}
.betpanel.closed .betbig{pointer-events:none}
.betsheet{margin:12px 0 6px}
.betsheet .bctl{width:100%;flex:none;gap:8px}
.betsheet .stp{flex:0 0 52px;height:54px;border-radius:18px;border:1px solid rgba(236,210,255,.35);color:#fff;font-size:24px;font-weight:800;
  background:linear-gradient(180deg,rgba(150,100,255,.55),rgba(80,40,190,.55));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35),0 4px 10px rgba(10,0,40,.35)}
.betsheet .stp:active{transform:scale(.94)}
.betsheet .bfield{height:54px;border-radius:18px}
.betsheet .bfield input{font-size:24px}
.betsheet .bhint{margin:8px 0 10px}
.betsheet .quick{display:flex;gap:6px;flex-wrap:nowrap}
.betsheet .qchip{flex:1;min-width:0;height:34px;padding:0 4px;font-size:12.5px}
#betGo.bad{filter:saturate(.5) brightness(.8)}
/* v4: waiting state — no centre avatar, just «Ожидание» with breathing neon glow + dots, below the centre puck */
.arena.solo .avs{opacity:0;pointer-events:none}
.arena .empty>.waitl{transform:translateY(clamp(34px,13vw,58px));display:flex;flex-direction:row;align-items:baseline;gap:2px;padding:0;margin:0;background:none}
.waitl b{font-size:clamp(17px,5vw,22px);font-weight:800;letter-spacing:.06em;color:#fff;animation:waitGlow 2.4s ease-in-out infinite}
.waitl .wd{display:inline-flex;gap:3px;margin-left:3px}
.waitl .wd i{width:5px;height:5px;border-radius:50%;background:#ff63dc;box-shadow:0 0 8px rgba(255,90,220,.9);animation:waitDot 1.4s ease-in-out infinite}
.waitl .wd i:nth-child(2){animation-delay:.2s}.waitl .wd i:nth-child(3){animation-delay:.4s}
@keyframes waitGlow{0%,100%{text-shadow:0 0 6px rgba(255,90,220,.35),0 0 0 rgba(255,90,220,0);opacity:.82}50%{text-shadow:0 0 10px rgba(255,90,220,.9),0 0 22px rgba(200,70,255,.55);opacity:1}}
@keyframes waitDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
/* v9 — bets closed window: «Ставки закрыты» + 3-2-1 over the field */
.cdov{position:absolute;inset:0;z-index:6;pointer-events:none;display:grid;place-items:center}
.cdov:empty{display:none}
.arena.closedw .field::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(60% 70% at 50% 50%,rgba(12,3,48,.55),rgba(12,3,48,.25));animation:cdfade .25s ease-out}
.cdbox{display:flex;flex-direction:column;align-items:center;gap:2px;text-shadow:0 2px 12px rgba(10,0,40,.85)}
.cdl{font-size:clamp(13px,3.8vw,16px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#ffd6f6;padding:4px 12px;border-radius:9999px;background:rgba(20,6,70,.7);border:1px solid rgba(255,140,230,.6);box-shadow:0 0 16px rgba(255,60,220,.45)}
.cdn{font-size:clamp(54px,17vw,78px);line-height:1;font-weight:900;color:#fff;text-shadow:0 0 22px #ff2fdc,0 0 44px rgba(255,47,220,.6),0 4px 14px rgba(10,0,40,.8);animation:cdpop .9s cubic-bezier(.2,1.4,.4,1) both;font-variant-numeric:tabular-nums}
@keyframes cdpop{0%{transform:scale(1.9);opacity:0}25%{transform:scale(1);opacity:1}80%{opacity:1}100%{transform:scale(.85);opacity:.35}}
@keyframes cdfade{from{opacity:0}}