:root{--bg:#f1f3f6;--card:#fff;--text:#12151c;--sub:#6b7385;--line:#e3e6ec;--blue:#2257d8;--blue-soft:#e6ecfb;--blue-line:#b7c6f1;--chip:#f1f3f6;--sq-l:#efd9b5;--sq-d:#b58863;--pw1:#fbf6ea;--pw2:#e2d8c3;--pb1:#4a4a4a;--pb2:#1a1a1a}
[data-mode=dark]{--bg:#0f1218;--card:#181c25;--text:#eef1f7;--sub:#8e97ab;--line:#262b37;--blue:#5b8cff;--blue-soft:#1b2540;--blue-line:#2f4478;--chip:#222836}
[data-theme=sakura]{--pw1:#ffe3ee;--pw2:#ffb3cf;--pb1:#b4558f;--pb2:#7a2a5e}
[data-theme=yalpiz]{--pw1:#d9f7ea;--pw2:#9fe0c4;--pb1:#2c8a70;--pb2:#164f40}
[data-theme=okean]{--pw1:#d6ecff;--pw2:#9fcdf5;--pb1:#2f63b8;--pb2:#163a7a}
[data-theme=shafaq]{--pw1:#ffe0c2;--pw2:#ffb98a;--pb1:#c2456e;--pb2:#7e1f3d}
[data-theme=oltin]{--pw1:#fff0a8;--pw2:#e8c23c;--pb1:#6b5520;--pb2:#2c2208}
[data-theme=neon]{--pw1:#b5fbe8;--pw2:#52e8c0;--pb1:#e24df0;--pb2:#9a1fa8}
[data-theme=galaktika]{--pw1:#dcd7ff;--pw2:#a79eff;--pb1:#3a2b86;--pb2:#150f3d}
[data-theme=zevs]{--pw1:#eef4ff;--pw2:#b5c8f0;--pb1:#2a3470;--pb2:#0f1438}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:16px/1.3 -apple-system,"Segoe UI",Roboto,system-ui,sans-serif;overscroll-behavior:none}
main{padding:12px 12px 92px;max-width:560px;margin:0 auto}
button{font-family:inherit;color:inherit}
.ico{display:inline-flex;vertical-align:middle;flex:none}
.gold svg{fill:#f5b301;stroke:#f5b301}
.sub{color:var(--sub);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;margin-bottom:12px;overflow:hidden}
.pad{padding:14px}
h1{font-size:26px;font-weight:800;margin:6px 2px 14px}
.label{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--sub);text-transform:uppercase;margin:18px 2px 10px}
/* avatar */
.av{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:none;background:#ccd;display:block}
.av.ph{display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:20px;background:linear-gradient(135deg,#c98bff,#e46bff)}
.ring{padding:3px;border-radius:50%;flex:none;border:3px solid #cfd4de;line-height:0}
.ring.green{border-color:#27b155}.ring.orange{border-color:#f2a516}
.ring .av{width:44px;height:44px}
.ring.sm .av{width:38px;height:38px}
/* home */
.head{display:flex;align-items:center;gap:12px;margin:2px 0 14px}
.head .av{width:58px;height:58px}
.head b{font-size:21px}
.pill{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:10px 16px;font-weight:700;font-size:19px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.tile{display:flex;align-items:center;gap:10px;text-align:left;background:var(--blue-soft);border:1px solid var(--blue-line);border-bottom-width:4px;border-radius:18px;padding:14px 10px;min-width:0;color:var(--blue)}
.tile b{display:block;font-size:16px;font-weight:700;line-height:1.2}
.tile span.s{display:flex;align-items:center;gap:4px;color:var(--sub);font-size:14px;margin-top:2px}
.live{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid #f0c5c5;border-left:5px solid #e53935;border-radius:18px;padding:14px 12px;margin-bottom:6px}
.livepill{display:flex;align-items:center;gap:5px;background:#e53935;color:#fff;font-weight:800;font-size:15px;border-radius:9px;padding:7px 9px}
.livepill i{width:9px;height:9px;border-radius:50%;background:#ffb4b0}
.stack{display:flex}
.stack .av{width:34px;height:34px;font-size:15px;border:2px solid var(--card);margin-left:-12px}
.stack .av:first-child{margin-left:0}
.live b{font-size:17px}
.sec{display:flex;align-items:center;justify-content:space-between;margin:20px 2px 10px}
.sec .label{margin:0}
.sec a{color:var(--blue);font-weight:700;font-size:16px}
.dot{display:inline-block;flex:none;width:11px;height:11px;border-radius:50%;background:#cfd4de;margin-right:8px;vertical-align:middle}
.dot.green{background:#27b155}.dot.orange{background:#c98a24}.dot.gray{background:#d3d7e0}
.prow{display:flex;align-items:center;gap:10px;padding:11px 10px;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow.top{margin:6px;border-radius:18px;background:linear-gradient(90deg,#f6d6a8,#e6a76a);border:1px solid #d99a5c}
.prow .nm{display:flex;align-items:center;font-weight:700;font-size:17px;min-width:0}
.shield{margin-left:8px;display:inline-flex}
.sqbtn{width:42px;height:40px;border-radius:14px;border:1px solid var(--line);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--sub);flex:none}
.inv{min-width:80px;height:40px;border-radius:12px;border:1.5px solid var(--blue);background:transparent;color:var(--blue);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;gap:6px;flex:none}
.inv:disabled{opacity:.4}
/* tabs */
nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}
nav[hidden]{display:none}
nav button{flex:1;border:0;background:none;padding:9px 0 7px;color:var(--sub);font-size:13px;position:relative}
nav button .ico{display:block;margin:0 auto 4px}
nav button.on{color:var(--blue)}
nav button.on::before{content:"";position:absolute;top:-1px;left:50%;width:58px;margin-left:-29px;height:3px;background:var(--blue)}
/* rating */
.statbar{display:flex;gap:0;margin-bottom:12px}
.statbar .card{margin:0;display:flex;align-items:center;flex:1;border-radius:0;font-size:14px;padding:0 12px;height:56px;color:var(--sub);gap:6px;line-height:1.15}
.statbar .card:first-child{border-radius:18px 0 0 18px}
.statbar .card b{color:var(--text);font-size:20px;margin-left:auto}
.statbar .card.g{justify-content:space-between}
.statbar .card.g .dot{margin:0 0 0 0;background:#27b155}
.statbar .srch{flex:none;width:56px;margin-left:10px;border-radius:18px;justify-content:center;padding:0}
.podium{position:relative;border-radius:20px;padding:34px 8px 0;margin-bottom:14px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#7b3fc4 0,#3b1c78 55%,#1d1050 100%);box-shadow:inset 0 0 40px #0006;display:flex;align-items:flex-end;justify-content:center;gap:6px}
.pcol{flex:1;text-align:center;color:#fff;min-width:0}
.pcol .av{margin:0 auto}
.pc1 .av{width:96px;height:96px;font-size:44px}.pc2 .av,.pc3 .av{width:80px;height:80px;font-size:34px}
.pav{position:relative;display:inline-block;border-radius:50%;padding:4px;line-height:0}
.pc1 .pav{background:#f1b91d}.pc2 .pav{background:#c7ccd6}.pc3 .pav{background:#c78a54}
.pav .av{border:3px solid #241552}
.medal{position:absolute;right:-4px;bottom:-4px;width:34px;height:34px;border-radius:50%;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;border:3px solid #fff3}
.pc2 .medal{background:#b8bfcc}.pc3 .medal{background:#c78a54}
.crown{display:block;font-size:40px;line-height:1;margin-bottom:-14px;position:relative;z-index:2;filter:drop-shadow(0 2px 2px #0006)}
.pname{font-weight:700;font-size:17px;margin-top:8px}.prat{opacity:.8;font-size:15px}
.block{margin-top:10px;border-radius:14px 14px 0 0;color:#fff;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center}
.block small{font-size:15px;font-weight:600}
.block b{font-size:34px;line-height:1}
.pc1 .block{height:108px;background:linear-gradient(#ffd24a,#eca600)}
.pc2 .block{height:70px;background:linear-gradient(#cfd4de,#9aa2b2)}
.pc3 .block{height:56px;background:linear-gradient(#dba66f,#a7703c)}
.rk{width:24px;text-align:center;color:var(--sub);font-size:17px;font-weight:600}
.search{width:100%;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:14px;padding:13px 14px;font:inherit;margin-bottom:12px}
/* tournaments */
.seg{display:flex;border:1px solid var(--line);background:var(--card);border-radius:14px;overflow:hidden}
.seg button{flex:1;border:0;background:transparent;padding:15px 8px;font-size:19px;font-weight:600;color:var(--sub)}
.seg button.on{background:var(--blue);color:#fff}
.segwrap{margin-bottom:14px}
.trow{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid var(--line)}
.trow:last-child{border:0}
.trow b{font-size:21px}
.tag{border-radius:12px;padding:9px 16px;font-weight:700;font-size:17px;background:var(--chip);color:var(--sub);border:1px solid var(--line)}
.tag.end{background:transparent;color:#1e8a3c;border:1.5px solid #1e8a3c}
.empty{padding:26px;text-align:center;color:var(--sub)}
/* profile */
.pcard .big{font-size:34px;font-weight:800;text-align:right;line-height:1}
.pcard .bal{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.prog{display:flex;align-items:center;gap:12px;margin-top:18px}
.bar{height:8px;border-radius:6px;background:var(--line);flex:1;overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:6px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:0}
.stats div{padding:16px 2px 14px;text-align:center;border-right:1px solid var(--line)}
.stats div:last-child{border:0}
.stats b{display:block;font-size:30px}
.stats span{color:var(--sub);font-size:14px}
.wr{height:5px;background:var(--line);margin:0 4px 14px;border-radius:3px;overflow:hidden}
.wr i{display:block;height:100%;background:#1e8a3c}
.lrow{display:flex;align-items:center;gap:12px;padding:16px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:18px;margin-bottom:12px;text-align:left}
.lrow b{font-size:22px;font-weight:700}
.lrow .ic{color:var(--blue)}
.ach{display:flex;gap:10px;color:#b3bacb}.ach .on{color:var(--blue)}
.btnb{border:0;background:var(--blue);color:#fff;font-weight:700;font-size:20px;border-radius:14px;padding:18px 22px;display:flex;align-items:center;gap:6px}
.btnw{width:100%;border:1px solid var(--line);background:var(--card);border-radius:18px;padding:17px;font-size:20px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}
.pbadge{width:54px;height:54px;border-radius:16px;background:radial-gradient(#8b7bff,#5b4de0);display:flex;align-items:center;justify-content:center;color:#fff}
.stripe{background:repeating-linear-gradient(135deg,#b58863 0 16px,#efd9b5 16px 32px)}
.thgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.th{border:1px solid var(--line);background:var(--card);border-radius:18px;padding:8px 8px 10px;text-align:center}
.th.sel{border:2px solid var(--blue)}
.th .pv{border-radius:12px;height:76px;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}
.th b{font-size:19px;display:block}.th .pr{color:var(--sub);display:flex;align-items:center;justify-content:center;gap:4px;font-size:17px}
.th2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.th2 .th{padding:10px}
.th2 .pv{height:76px}
.th2 .buy{display:flex;width:100%;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;background:var(--blue);color:#fff;font-weight:700;font-size:19px;padding:14px;margin-top:6px}
.th2 .chosen{display:flex;width:100%;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:12px;color:var(--sub);font-size:19px;padding:13px;margin-top:6px}
.dc{width:34px;height:34px;border-radius:50%;box-shadow:0 2px 3px #0004,inset 0 0 0 3px #fff4;background:radial-gradient(circle at 35% 30%,var(--pw1),var(--pw2))}
.dc.b{background:radial-gradient(circle at 35% 30%,var(--pb1),var(--pb2))}
.dc.k::after{content:"♛";display:flex;align-items:center;justify-content:center;height:100%;color:#c89418;font-size:18px}
.sethd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
.sethd h2{margin:0;font-size:22px}
.sqback{width:52px;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--sub)}
.setrow{padding:16px 14px 6px}
.setrow .t{color:var(--sub);font-size:18px;margin-bottom:10px}
.setrow .seg{margin-bottom:14px}
.setrow .seg button{padding:17px 4px}
.chk{display:flex;align-items:center;gap:14px;padding:6px 14px 4px;font-size:20px;font-weight:600}
.chk input{width:28px;height:28px;accent-color:var(--blue)}
.hint{color:var(--sub);padding:2px 14px 16px;font-size:17px}
/* game */
.gtop{display:flex;justify-content:space-between;margin-bottom:12px}
.gbar{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px}
.gbar.turn{border:2px solid var(--blue);background:var(--blue-soft)}
.gbar b{font-size:22px}
.gbar .mini{display:flex;align-items:center;gap:8px;color:var(--sub);font-size:19px}
.mini .dc{width:26px;height:26px;box-shadow:0 1px 2px #0004,inset 0 0 0 2px #fff4}
.clock{font:700 24px ui-monospace,Menlo,monospace;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:8px 14px}
.gbar.turn .clock{background:var(--card)}
.clock.low{color:#d9382f}
#board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;width:100%;margin:12px 0;border-radius:12px;overflow:hidden;box-shadow:0 3px 10px #0003;user-select:none;touch-action:manipulation}
.sq{position:relative;display:flex;align-items:center;justify-content:center}
.sq.light{background:var(--sq-l)}.sq.dark{background:var(--sq-d)}
.sq.last::before{content:"";position:absolute;inset:0;background:#e9e35a66}
.sq.sel::before{content:"";position:absolute;inset:0;background:#4fb26a88}
.sq.can::after{content:"";position:absolute;inset:3px;border-radius:50%;box-shadow:0 0 0 3px #2257d8aa}
.sq.tgt::after{content:"";width:30%;height:30%;border-radius:50%;background:#2257d8aa;position:absolute}
.pc{width:78%;height:78%;border-radius:50%;position:relative;box-shadow:0 3px 4px #0006,inset 0 0 0 4px #ffffff40,inset 0 0 0 7px #00000012;background:radial-gradient(circle at 35% 30%,var(--pw1),var(--pw2))}
.pc.b{background:radial-gradient(circle at 35% 30%,var(--pb1),var(--pb2))}
.pc.k::after{content:"♛";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,6vw,30px);color:#d9a21b}
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.act{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 4px;font-size:17px;font-weight:500}
.act:disabled{opacity:.45}
.act.red{color:#d9382f}
/* overlay / misc */
#overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:22px;z-index:10}
#overlay[hidden]{display:none}
#overlay .card{width:100%;max-width:380px;text-align:center;margin:0;padding:20px}
#overlay h3{margin:0 0 8px;font-size:22px}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:15px;margin-top:10px;background:var(--blue);color:#fff;font-weight:700;font-size:18px}
.btn.ghost{background:transparent;color:var(--blue);border:1px solid var(--blue-line)}
.btn.red{background:#d9382f}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:100px;background:#222;color:#fff;padding:11px 18px;border-radius:14px;z-index:20;max-width:90%;text-align:center}
#toast[hidden]{display:none}
.center{text-align:center}
.spin{width:32px;height:32px;border:4px solid var(--blue-line);border-top-color:var(--blue);border-radius:50%;margin:12px auto;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.thgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.thgrid .th{padding:6px 4px 8px;min-width:0}
.thgrid .th .pv{height:60px;gap:5px}
.thgrid .dc{width:22px;height:22px}.thgrid .dc.k::after{font-size:12px}
.th b{font-size:16px}.th .pr{font-size:15px}
.ach{gap:6px}
.lrow .grow{min-width:0}.lrow b{font-size:19px}
.lrow .ach .ico svg{width:19px;height:19px}
.btnb{font-size:16px;padding:14px 12px;gap:4px;flex:none}
.pbadge{width:46px;height:46px;border-radius:14px;flex:none}
.seg button{font-size:16px;padding:14px 4px}
.setrow .t{font-size:16px}.setrow .seg button{padding:14px 2px}
.chk{font-size:17px}.hint{font-size:15px}
.label{font-size:13px}
.stats b{font-size:26px}.stats span{font-size:12px}
.pcard .big{font-size:30px}
.trow b{font-size:19px}.tag{font-size:15px;padding:8px 14px}
.th2 .th b{font-size:17px}.th2 .buy,.th2 .chosen{font-size:17px}
.gbar b{font-size:19px}.clock{font-size:21px}.act{font-size:14px}
.gbar .mini{font-size:16px}
.stack .av:nth-child(n+4){display:none}
.btnb{white-space:nowrap;font-size:14px;padding:12px 10px}
.pcard+.card b,.card.pad.row .grow b{min-width:0}

.block.ghost{opacity:.25}
.pc1 .block.ghost{height:108px;background:#fff3}.pc2 .block.ghost{height:70px;background:#fff3}.pc3 .block.ghost{height:56px;background:#fff3}
.live b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live .grow{overflow:hidden}

.gtop{align-items:center}
.mustcap{background:#fff3cd;color:#8a5a00;border:1px solid #f0d58a;border-radius:12px;padding:9px 14px;font-weight:700;font-size:15px}
[data-mode=dark] .mustcap{background:#3a2e10;color:#f5c862;border-color:#5a4a1a}
.sq.can::after{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px #2257d855}}