/* Playfellow glass components: .glass panel, .btn, .pill, .tile, .toggle, .meter, .rail, .bar. Every spacing and alignment is logical so Arabic mirrors for free. */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--ink);font:400 15px/1.55 var(--font-body);background:var(--bg-0) url("../img/bg-app-dark.jpg") center/cover fixed;overflow:hidden}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(900px 520px at 15% -10%,rgba(67,227,255,.10),transparent 60%),radial-gradient(900px 600px at 100% 10%,rgba(155,107,255,.16),transparent 60%),linear-gradient(180deg,rgba(4,6,26,.35),rgba(4,6,26,.75));pointer-events:none}
h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:700;letter-spacing:.005em;text-wrap:balance}
h1{font-size:clamp(30px,3.6vw,46px);line-height:1.1} h2{font-size:24px} h3{font-size:18px}
p{margin:0}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* the frosted panel, with a gradient light edge drawn by a masked pseudo-element */
.glass{position:relative;background:linear-gradient(180deg,var(--glass-top),var(--glass-bot));backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border-radius:var(--r-l);box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;background:linear-gradient(135deg,rgba(67,227,255,.75),rgba(155,107,255,.25) 45%,rgba(155,107,255,.75));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.glass.soft::before{background:linear-gradient(135deg,rgba(170,180,255,.32),rgba(170,180,255,.10))}
.glass.pad{padding:var(--s-5)}

/* frame: rail + main */
.app{position:relative;display:grid;grid-template-columns:84px 1fr;gap:var(--s-4);height:100vh;padding:var(--s-4)}
.rail{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-4) var(--s-2);border-radius:var(--r-l)}
.rail .logo{width:48px;height:48px;border-radius:14px;margin-bottom:var(--s-3);box-shadow:var(--glow-violet)}
.rail a{display:grid;place-items:center;gap:2px;width:64px;padding:10px 0;border-radius:var(--r-m);color:var(--ink-2);text-decoration:none;font-size:11px;transition:background var(--t-fast),color var(--t-fast)}
.rail a svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail a:hover{background:rgba(255,255,255,.07);color:var(--ink)}
.rail a.on{background:linear-gradient(180deg,rgba(67,227,255,.20),rgba(155,107,255,.18));color:#fff;box-shadow:inset 0 0 0 1px rgba(67,227,255,.45),var(--glow-cyan)}
.rail .sp{flex:1}
.main{display:grid;grid-template-rows:auto 1fr;gap:var(--s-4);min-width:0;min-height:0}
.topbar{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-5);border-radius:var(--r-l)}
.topbar .brand{font:700 22px var(--font-display)} .topbar .brand i{font-style:normal;color:var(--ink-3);font-weight:500}
.topbar .grow{flex:1}
.view{min-height:0;overflow:auto;padding:2px;scrollbar-width:thin;scrollbar-color:rgba(170,180,255,.35) transparent}
.view>.stack{display:grid;gap:var(--s-4);padding-bottom:var(--s-5)}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-5);border-radius:var(--r-pill);border:1px solid var(--glass-line);background:rgba(255,255,255,.07);color:var(--ink);font:500 15px var(--font-body);cursor:pointer;transition:transform var(--t-fast) var(--ease),background var(--t-fast),box-shadow var(--t-fast)}
.btn:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{border:0;background:linear-gradient(120deg,var(--cyan),var(--violet));color:#05061c;font-weight:700;box-shadow:var(--glow-violet)}
.btn.primary:hover{box-shadow:0 0 34px rgba(67,227,255,.5);background:linear-gradient(120deg,#7cecff,#b393ff)}
.btn.danger{border-color:rgba(255,107,129,.55);color:#ffb3c0}
.btn.small{min-height:34px;padding:0 var(--s-4);font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill);font:500 12.5px var(--font-body);border:1px solid var(--glass-line);background:rgba(255,255,255,.06);color:var(--ink-2)}
.pill.good{color:var(--good);border-color:rgba(61,220,151,.5)} .pill.warn{color:var(--warn);border-color:rgba(255,204,77,.5)} .pill.cyan{color:var(--cyan);border-color:rgba(67,227,255,.5)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.seg{display:inline-flex;border:1px solid var(--glass-line);border-radius:var(--r-pill);overflow:hidden}
.seg button{border:0;background:transparent;color:var(--ink-2);padding:6px 14px;font:500 13px var(--font-body);cursor:pointer}
.seg button.on{background:linear-gradient(120deg,rgba(67,227,255,.3),rgba(155,107,255,.3));color:#fff}
.check{display:flex;gap:var(--s-3);align-items:flex-start;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--cyan);margin-top:2px}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;min-height:340px;overflow:hidden}
.hero .copy{display:grid;gap:var(--s-4);align-content:center;padding:var(--s-7) var(--s-6);position:relative;z-index:1}
.hero .art{position:relative;background:url("../img/key-art-lightfolk.jpg") center/cover;border-radius:0 var(--r-l) var(--r-l) 0;-webkit-mask:linear-gradient(90deg,transparent,#000 35%);mask:linear-gradient(90deg,transparent,#000 35%)}
[dir=rtl] .hero .art{border-radius:var(--r-l) 0 0 var(--r-l);-webkit-mask:linear-gradient(270deg,transparent,#000 35%);mask:linear-gradient(270deg,transparent,#000 35%);transform:scaleX(-1)}
.hero .row{display:flex;gap:var(--s-3);flex-wrap:wrap}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-4)}
.kpi{padding:var(--s-5);display:grid;gap:var(--s-2)}
.kpi .n{font:700 38px/1 var(--font-display);background:linear-gradient(90deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.kpi .l{color:var(--ink-2);font-size:13.5px}

/* games hub */
.group-head{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);align-items:center;overflow:hidden}
.group-head .pic{width:230px;height:130px;border-radius:var(--r-m);background-size:cover;background-position:center;box-shadow:var(--glow-violet)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-3)}
.tile{display:grid;gap:var(--s-2);padding:var(--s-4);border-radius:var(--r-m);border:1px solid var(--glass-line);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));cursor:pointer;text-align:start;color:inherit;font:inherit;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast),border-color var(--t-fast)}
.tile:hover{transform:translateY(-3px);border-color:rgba(67,227,255,.7);box-shadow:var(--glow-cyan)}
.tile .no{font:700 12px var(--font-display);color:var(--cyan);letter-spacing:.08em}
.tile .nm{font:700 18px var(--font-display)}
.tile .go{margin-top:var(--s-2);color:var(--ink-2);font-size:13px}

/* settings */
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media(max-width:980px){.two,.hero{grid-template-columns:1fr}.hero .art{min-height:200px}}
.part{display:grid;grid-template-columns:1fr auto auto;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);border-radius:var(--r-m);border:1px solid var(--glass-line);background:rgba(255,255,255,.045)}
.part .sz{font:600 15px var(--font-body);color:var(--ink-2);font-variant-numeric:tabular-nums}
.facts{display:grid;gap:var(--s-3)}
.fact{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-m);border:1px solid var(--glass-line);background:rgba(255,255,255,.045)}
.fact b{font-weight:600}
.meter{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-4)}
.step{padding:var(--s-5);display:grid;gap:var(--s-2)} .step .no{font:700 14px var(--font-display);color:var(--cyan)}

/* first run */
.welcome{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(4,6,26,.72);backdrop-filter:blur(8px)}
.welcome .card{width:min(980px,94vw);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.welcome .card .art{background:url("../img/play-together.jpg") 72% 0/auto 122% no-repeat;min-height:420px}
.welcome .card .copy{display:grid;gap:var(--s-4);align-content:center;padding:var(--s-6)}
@media(max-width:820px){.welcome .card{grid-template-columns:1fr}.welcome .card .art{min-height:180px}}
.toast{position:fixed;inset-inline:0;bottom:24px;margin:auto;width:max-content;max-width:90vw;z-index:30;padding:10px 18px;border-radius:var(--r-pill);background:rgba(20,26,74,.92);border:1px solid var(--glass-line)}
@media (prefers-reduced-motion:no-preference){.view>.stack>*{animation:rise .45s var(--ease) both}@keyframes rise{from{opacity:0;transform:translateY(10px)}}}

.world{min-height:230px;overflow:hidden;background-image:linear-gradient(90deg,rgba(4,6,26,.92) 8%,rgba(4,6,26,.15) 70%),url("../img/world-hero.jpg");background-size:cover;background-position:right center}
[dir=rtl] .world{background-image:linear-gradient(270deg,rgba(4,6,26,.92) 8%,rgba(4,6,26,.15) 70%),url("../img/world-hero.jpg")}
.world .copy{display:grid;gap:var(--s-3);max-width:520px;padding:var(--s-6)}

.stageview{min-height:300px;display:grid;place-items:center;border-radius:var(--r-m);border:1px solid var(--glass-line);background:rgba(4,6,26,.55);overflow:hidden;padding:var(--s-3);text-align:center}
.stageview img{max-width:100%;max-height:calc(100vh - 290px);width:auto;height:auto;border-radius:12px;display:block;margin:0 auto}
.field{min-height:44px;border-radius:var(--r-pill);border:1px solid var(--glass-line);background:rgba(255,255,255,.07);color:var(--ink);padding:0 var(--s-4);font:500 15px var(--font-body)}
.field option{background:#0a1030;color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.evlog{display:grid;gap:6px;max-height:200px;overflow:auto}.ev{padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.05);font-size:13px;color:var(--ink-2)}