/* PlayOrbit — main styles. Colors per region come from js/regions.js (--a --a2 --bgc). System font stacks only (no webfonts needed). */
:root{--a:#7C5CFF;--a2:#29E6FF;--bgc:linear-gradient(160deg,#0c1033,#03040e);--ink:#F4F6FF;--mut:rgba(236,240,255,.68);--card:rgba(255,255,255,.07);--line:rgba(255,255,255,.13);
 --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html{background:#05060c}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Noto Sans","Noto Sans Arabic","Noto Nastaliq Urdu",Tahoma,"Segoe UI",sans-serif;color:var(--ink);min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
.bg{position:fixed;inset:0;z-index:-1;background:var(--bgc)}
.bg-img{position:absolute;inset:0 0 35% 0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s;filter:saturate(1.15)}
.bg-img.in{opacity:.62;animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.08) translateY(-10px)}}
.bg-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,12,.15) 0%,rgba(5,6,12,.55) 32%,rgba(5,6,12,.96) 60%,#05060c 100%),radial-gradient(80% 40% at 80% 10%,color-mix(in srgb,var(--a) 30%,transparent),transparent)}
.bg-motif{position:absolute;inset:0;opacity:.13;mix-blend-mode:screen}
.m-cloud{background-image:radial-gradient(circle at 20px 20px,transparent 11px,var(--a) 12px,transparent 13px),radial-gradient(circle at 40px 20px,transparent 11px,var(--a) 12px,transparent 13px);background-size:60px 40px}
.m-seigaiha{background-image:radial-gradient(circle at 50% 100%,transparent 8px,var(--a) 9px,transparent 10px,transparent 15px,var(--a) 16px,transparent 17px,transparent 22px,var(--a) 23px,transparent 24px);background-size:48px 24px}
.m-girih{background-image:linear-gradient(45deg,var(--a) 1px,transparent 1px),linear-gradient(-45deg,var(--a) 1px,transparent 1px);background-size:34px 34px;opacity:.09}
.m-rangoli{background-image:radial-gradient(circle,var(--a) 2px,transparent 3px),radial-gradient(circle,var(--a2) 1.5px,transparent 2.5px);background-size:28px 28px;background-position:0 0,14px 14px}
.m-lai,.m-batik{background-image:radial-gradient(ellipse 10px 18px,transparent 8px,var(--a) 9px,transparent 10px);background-size:36px 36px}
.m-cini,.m-azulejo{background-image:radial-gradient(circle at 50% 50%,transparent 9px,var(--a) 10px,transparent 11px),linear-gradient(90deg,transparent 19px,var(--a) 20px,transparent 21px),linear-gradient(0deg,transparent 19px,var(--a) 20px,transparent 21px);background-size:40px 40px}
.m-grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;opacity:.5}
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--st) + 12px) 18px 10px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:linear-gradient(180deg,rgba(5,6,12,.55),rgba(5,6,12,0))}
.logo{display:flex;gap:8px;align-items:center;font-size:17px;letter-spacing:.02em}
.pts{display:flex;gap:4px;align-items:center;border:1px solid var(--line);background:rgba(0,0,0,.35);border-radius:99px;padding:6px 12px;font-size:13px}.pts span{color:var(--a)}
main{padding:0 18px}
.view{display:none;animation:in .5s cubic-bezier(.2,.8,.2,1)}.view.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(14px)}}
.hero{padding:34px 0 18px}
.kick{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--a);background:color-mix(in srgb,var(--a) 15%,transparent);border:1px solid color-mix(in srgb,var(--a) 40%,transparent);padding:5px 11px;border-radius:99px}
.kick:before{content:"";width:7px;height:7px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 0 0 #ff3b3b;animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}}
h1{font-size:clamp(30px,9vw,40px);line-height:1.12;margin:14px 0 10px;font-weight:850;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 4px 30px rgba(0,0,0,.5)}
:lang(ar) h1,:lang(fa) h1,:lang(ur) h1,:lang(hi) h1,:lang(th) h1{line-height:1.4}
.sub{color:var(--mut);font-size:14.5px;line-height:1.6;max-width:36em}
.hero-cta{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:14px;border:0;font-weight:800;font-size:15px;background:linear-gradient(135deg,var(--a),color-mix(in srgb,var(--a) 60%,var(--a2)));color:#0b0b12;box-shadow:0 10px 30px color-mix(in srgb,var(--a) 40%,transparent)}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.full{width:100%;margin-top:14px}
.ticker{overflow:hidden;border-block:1px solid var(--line);margin:6px -18px 4px;background:rgba(0,0,0,.35);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tk{display:flex;gap:28px;padding:10px 0;width:max-content;animation:tk 26s linear infinite;font-size:13px;white-space:nowrap}
[dir=rtl] .tk{animation-name:tkr}
@keyframes tk{to{transform:translateX(-50%)}}@keyframes tkr{to{transform:translateX(50%)}}
.tk i{color:var(--a);font-style:normal;font-size:11px}
.sec{font-size:15px;margin:20px 0 10px;color:var(--mut);font-weight:700}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cat{position:relative;padding:14px 14px 13px;border-radius:18px;background:var(--card);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:3px;min-height:112px;animation:in .6s both;animation-delay:var(--d);overflow:hidden}
.cat:active{transform:scale(.98)}
.cat.big{grid-column:1/-1;min-height:96px;background:linear-gradient(135deg,color-mix(in srgb,var(--a) 28%,transparent),rgba(255,255,255,.05));padding-inline-start:74px;justify-content:center}
.cat.big .ci{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);font-size:30px;width:48px;height:48px}
.cat.wide{grid-column:1/-1;min-height:70px;padding-inline-start:74px;justify-content:center}.cat.wide .ci{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%)}
.ci{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:rgba(0,0,0,.3);margin-bottom:6px}
.cat b{font-size:15px}.cat small{font-size:12px;color:var(--mut);line-height:1.4}
.arr{position:absolute;inset-inline-end:12px;top:12px;opacity:.5;font-size:20px}[dir=rtl] .arr{transform:scaleX(-1)}
.live{position:absolute;inset-inline-end:34px;top:14px;font-style:normal;font-size:10.5px;font-weight:800;color:#ff5b5b;display:flex;gap:4px;align-items:center}.live i{width:6px;height:6px;border-radius:50%;background:#ff3b3b;animation:pulse 1.6s infinite}
.fine{font-size:11.5px;color:rgba(236,240,255,.45);line-height:1.55;margin:16px 0}
.vhead{padding:14px 0 8px}.vhead h2{font-size:26px;margin:12px 0 4px}.vhead p{color:var(--mut);font-size:13.5px}
.back{font-size:14px;color:var(--a);font-weight:700}
.demo{font-size:11.5px;display:inline-block;margin:6px 0 10px;padding:4px 10px;border-radius:8px;background:rgba(255,200,0,.12);color:#ffd257;border:1px solid rgba(255,200,0,.3)}
.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:14px 12px;border-radius:16px;background:var(--card);border:1px solid var(--line);margin-bottom:8px;font-size:13.5px}
.match.is-live{border-color:color-mix(in srgb,var(--a) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 20%,transparent)}
.tm{display:flex;align-items:center;gap:8px;font-weight:700}.tm.r{justify-content:flex-end;text-align:end}
.crest{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--a);color:#111;font-weight:900}.crest.b{background:var(--a2)}
.sc{text-align:center;font-variant-numeric:tabular-nums}.sc b{font-size:20px}.sc span{margin:0 4px;opacity:.5}.sc i{display:block;font-style:normal;font-size:11px;color:var(--a)}
.bars{margin-top:12px;padding:14px;border-radius:16px;background:rgba(0,0,0,.3);display:grid;gap:8px;font-size:12.5px}.bars>div{display:grid;grid-template-columns:90px 1fr 38px;gap:8px;align-items:center}
.bar{height:8px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}.bar i{display:block;height:100%;background:var(--a);border-radius:9px;animation:grow 1.2s ease}.bar i.b{background:var(--a2)}@keyframes grow{from{width:0}}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}.pick{padding:16px 12px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-align:start}.pick b{display:block;font-size:16px}.pick span{font-size:11.5px;color:var(--mut)}.pick.on{border-color:var(--a);background:color-mix(in srgb,var(--a) 22%,transparent)}
.lb{list-style:none;padding:0;counter-reset:r}.lb li{counter-increment:r;display:flex;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);font-size:14px}.lb li:before{content:counter(r);color:var(--a);font-weight:800;width:24px}.lb li span{flex:1}
.dial{--r:0deg;position:relative;width:250px;height:250px;margin:20px auto 6px;border-radius:50%;border:2px solid var(--line);background:radial-gradient(circle,color-mix(in srgb,var(--a) 18%,transparent),transparent 70%)}
.dial.spin .core{animation:spin 1.2s cubic-bezier(.2,.8,.2,1) forwards}@keyframes spin{to{transform:translate(-50%,-50%) rotate(var(--r))}}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:24px;display:grid;place-items:center;font-size:46px;background:linear-gradient(145deg,#fffef6,#e9e2cf);box-shadow:0 10px 30px rgba(0,0,0,.5);color:#111}
.seat{position:absolute;padding:6px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-weight:800;font-size:14px;transition:.3s;white-space:nowrap}
.s0{top:-14px;left:50%;transform:translateX(-50%)}.s1{right:-10px;top:50%;transform:translateY(-50%)}.s2{bottom:-14px;left:50%;transform:translateX(-50%)}.s3{left:-10px;top:50%;transform:translateY(-50%)}
.seat.on{background:var(--a);color:#111;box-shadow:0 0 24px var(--a)}
.q{text-align:center;margin-top:22px;font-weight:700}.q.big{font-size:18px;text-align:start;line-height:1.5}
.res{text-align:center;font-size:18px;font-weight:800;color:var(--a);min-height:28px;margin-top:12px}
.balls{display:flex;gap:8px;justify-content:center;margin:26px 0 6px;flex-wrap:wrap}.balls span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:17px;color:#111;background:radial-gradient(circle at 35% 30%,#fff,var(--a) 60%);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.balls span:last-child{background:radial-gradient(circle at 35% 30%,#fff,var(--a2) 60%)}.pop{animation:pop .45s both;animation-delay:var(--d)}@keyframes pop{from{transform:scale(0)}}
.nolot{margin-top:16px;font-size:12.5px;line-height:1.5;padding:12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px dashed var(--line);color:var(--mut)}
.quiz{display:grid;gap:10px;margin-top:14px}.quiz button{padding:15px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-align:start;font-weight:700}.quiz .ok{background:#1f9d5a;border-color:#1f9d5a}.quiz .no{opacity:.4}
.tap{width:200px;height:200px;margin:30px auto;border-radius:50%;display:grid;place-items:center;align-content:center;background:radial-gradient(circle at 35% 30%,var(--a2),var(--a));color:#111;box-shadow:0 20px 60px color-mix(in srgb,var(--a) 50%,transparent);user-select:none}.tap b{font-size:56px}.tap:active{transform:scale(.95)}
.foot{padding:20px 18px calc(var(--sb) + 26px);border-top:1px solid var(--line);margin-top:20px}.foot nav{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:var(--mut)}.foot p{font-size:11px;color:rgba(236,240,255,.4);margin-top:10px;line-height:1.5}
.toast{position:fixed;left:50%;bottom:calc(var(--sb) + 24px);transform:translate(-50%,30px);opacity:0;transition:.3s;background:#fff;color:#111;padding:11px 18px;border-radius:99px;font-weight:700;font-size:14px;z-index:300;white-space:nowrap}.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}