:root{--bg:#08061a;--card:#120d2b;--card2:#1a143a;--purple:#7c3aed;--pink:#f0469a;--teal:#16d6b8;--gold:#fbb034;--text:#fff;--muted:#aaa4c8;--line:rgba(255,255,255,.1);--radius:24px;--shadow:0 24px 70px rgba(0,0,0,.42)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Cairo,sans-serif;overflow-x:hidden}button,input,select{font:inherit}body:before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(70% 55% at 10% 0%,rgba(124,58,237,.3),transparent 62%),radial-gradient(60% 50% at 94% 94%,rgba(240,70,154,.18),transparent 58%),radial-gradient(48% 38% at 85% 8%,rgba(22,214,184,.1),transparent 60%)}body:after{content:"";position:fixed;inset:0;z-index:-1;opacity:.35;background-image:radial-gradient(1px 1px at 10% 20%,#fff 0,transparent 100%),radial-gradient(1px 1px at 80% 15%,#fff 0,transparent 100%),radial-gradient(1px 1px at 35% 70%,#fff 0,transparent 100%),radial-gradient(1.5px 1.5px at 68% 82%,#b99cff 0,transparent 100%)}
.shell{width:min(1180px,calc(100% - 32px));margin:auto}.topbar{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line);background:rgba(8,6,26,.78);backdrop-filter:blur(22px)}.topbar-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font:900 21px Tajawal,sans-serif}.logo{width:43px;height:43px;filter:drop-shadow(0 8px 18px rgba(124,58,237,.35))}.nav-actions,.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.btn{appearance:none;border:0;min-height:48px;padding:0 20px;border-radius:16px;color:#fff;background:transparent;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn:focus-visible,.mode-card:focus-visible,.chip:focus-visible,.icon-btn:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.btn.primary{background:linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 14px 34px rgba(124,58,237,.35)}.btn.secondary{border:1px solid var(--line);background:rgba(255,255,255,.055)}.btn.teal{background:linear-gradient(135deg,#0ebda4,var(--teal));color:#061713}.btn.danger{border:1px solid rgba(255,84,112,.22);background:rgba(255,84,112,.08);color:#ff9aae}.btn.large{min-height:58px;padding:0 28px;font-size:17px}.btn.full{width:100%}.btn:disabled{opacity:.45;pointer-events:none}
.view{display:none;padding:52px 0 80px}.view.active{display:block}.hero{display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:52px;min-height:560px}.eyebrow,.status{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-size:13px;font-weight:800}.eyebrow{padding:8px 13px;border:1px solid rgba(22,214,184,.24);background:rgba(22,214,184,.07);color:#8ff4e3}.hero h1{margin:20px 0 16px;font:900 clamp(42px,6vw,76px)/1.06 Tajawal,sans-serif;letter-spacing:-1.4px}.gradient{background:linear-gradient(90deg,#b996ff,var(--pink),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{max-width:620px;color:var(--muted);font-size:18px;line-height:1.95}.hero .actions{margin-top:28px}.device{position:relative;min-height:430px}.tv{position:absolute;inset:22px 10px 44px 34px;padding:14px;border:1px solid rgba(255,255,255,.11);border-radius:34px;background:linear-gradient(145deg,#17102f,#090714);box-shadow:var(--shadow)}.tv-screen{height:100%;padding:28px;border-radius:24px;background:radial-gradient(circle at 15% 0%,rgba(124,58,237,.42),transparent 45%),linear-gradient(165deg,#0d0921,#080616);display:flex;flex-direction:column}.tv-head{display:flex;justify-content:space-between;color:#bbb5d5;font-size:12px}.room{margin:auto;text-align:center}.room small{display:block;color:#aaa3c5}.code{margin:7px 0;font:900 54px Tajawal,sans-serif;letter-spacing:9px}.avatars{display:flex;justify-content:center;margin-top:16px}.avatar{width:40px;height:40px;margin-inline-start:-7px;border:2px solid #161128;border-radius:14px;background:linear-gradient(145deg,var(--purple),var(--pink));display:grid;place-items:center;font-weight:900}.phone{position:absolute;left:-4px;bottom:0;width:174px;height:322px;padding:18px 13px;border:8px solid #201a32;border-radius:34px;background:#0b0818;box-shadow:0 24px 55px rgba(0,0,0,.55);text-align:center}.notch{width:58px;height:7px;margin:-8px auto 24px;border-radius:10px;background:#2c2640}.phone-field{height:48px;margin:18px 0;border:1px solid var(--line);border-radius:13px;background:#151027;display:grid;place-items:center;color:#aaa4c8}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}.card,.panel,.step{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));box-shadow:0 16px 42px rgba(0,0,0,.2)}.step{padding:22px}.step-num{width:37px;height:37px;border-radius:12px;background:rgba(124,58,237,.16);color:#c8b1ff;display:grid;place-items:center;font-weight:900}.step h3{margin:15px 0 7px;font:800 18px Tajawal,sans-serif}.step p{margin:0;color:var(--muted);font-size:13px;line-height:1.8}
.page-head{margin-bottom:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.page-head h2{margin:0;font:900 clamp(31px,4vw,48px) Tajawal,sans-serif}.page-head p{margin:8px 0 0;color:var(--muted)}.back{margin-bottom:20px}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.mode-card{position:relative;min-height:275px;padding:24px;overflow:hidden;cursor:pointer}.mode-card:before{content:"";position:absolute;left:-60px;top:-70px;width:190px;height:190px;border-radius:50%;background:var(--accent);filter:blur(18px);opacity:.19}.mode-icon{width:62px;height:62px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:19px;background:color-mix(in srgb,var(--accent) 14%,transparent);display:grid;place-items:center;font-size:29px}.mode-card h3{margin:18px 0 8px;font:900 23px Tajawal,sans-serif}.mode-card p{min-height:72px;margin:0;color:var(--muted);font-size:13px;line-height:1.75}.mode-kind{display:inline-flex;margin-top:16px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:#d2cde2;font-size:11px}.mode-actions{margin-top:18px;display:flex;gap:8px}.mode-actions .btn{flex:1;min-height:44px;padding:0 10px;font-size:12px}
.setup-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.panel{padding:24px}.panel h3{margin:0 0 18px;font:800 20px Tajawal,sans-serif}.teams{display:grid;grid-template-columns:1fr 1fr;gap:14px}.team{padding:18px;border:1px solid var(--line);border-radius:19px;background:rgba(255,255,255,.035);box-shadow:inset 0 3px 0 var(--team-color)}.team-head{margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.team-title{font-weight:900;color:var(--team-color)}.label{display:block;margin-bottom:7px;color:#c7c1dc;font-size:12px;font-weight:800}.input,.select{width:100%;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:13px;background:#0e0a20;color:#fff;font-weight:600;outline:none}.input:focus,.select:focus{border-color:#9d5cff;box-shadow:0 0 0 3px rgba(124,58,237,.13)}.players{display:grid;gap:8px;margin-top:12px}.player{display:flex;gap:8px}.player .input{height:43px}.icon-btn{width:43px;height:43px;flex:0 0 43px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:#fff;cursor:pointer}.add-link{margin-top:10px;padding:0;border:0;background:transparent;color:#bda7ff;font-size:13px;font-weight:800;cursor:pointer}.field{margin-bottom:14px}.settings{display:grid;grid-template-columns:1fr 1fr;gap:12px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);color:#c9c4da;font-size:12px;font-weight:800;cursor:pointer}.chip.active{border-color:rgba(157,92,255,.55);background:rgba(124,58,237,.22);color:#fff}.summary{position:sticky;top:104px;height:max-content}.summary-row{padding:13px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font-size:14px}.summary-row span{color:var(--muted)}.notice{margin-top:16px;padding:13px;border:1px solid rgba(22,214,184,.18);border-radius:14px;background:rgba(22,214,184,.06);color:#a6eade;font-size:12px;line-height:1.7}.error-box{margin:0 0 16px;padding:12px 15px;border:1px solid rgba(255,84,112,.3);border-radius:14px;background:rgba(255,84,112,.08);color:#ffb0bd;font-size:13px}.error-box[hidden]{display:none}
.runtime{position:fixed;inset:0;z-index:1000;background:#08061a}.runtime[hidden]{display:none}.runtime iframe{width:100%;height:100%;border:0;background:#08061a}.runtime-tools{position:fixed;left:12px;top:12px;z-index:1003}.runtime-loading{position:absolute;inset:0;z-index:1002;background:#08061a;display:grid;place-items:center;text-align:center}.runtime-loading[hidden]{display:none}.spinner{width:54px;height:54px;margin:0 auto 18px;border:5px solid rgba(255,255,255,.12);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;right:50%;bottom:24px;z-index:2000;transform:translateX(50%) translateY(30px);opacity:0;padding:12px 18px;border:1px solid var(--line);border-radius:14px;background:#17122e;color:#fff;box-shadow:0 16px 40px rgba(0,0,0,.45);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translateX(50%) translateY(0)}
@media(max-width:900px){.mode-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr;gap:24px}.device{min-height:360px}.steps{grid-template-columns:1fr}.setup-grid{grid-template-columns:1fr}.summary{position:static}}
@media(max-width:620px){.shell{width:min(100% - 22px,680px)}.topbar-inner{height:68px}.brand{font-size:18px}.logo{width:38px;height:38px}.nav-actions .home-label{display:none}.view{padding-top:32px}.hero h1{font-size:45px}.hero p{font-size:16px}.tv{inset:10px 0 30px 18px}.phone{width:138px;height:260px;padding:15px 10px;border-width:6px}.notch{margin-bottom:15px}.code{font-size:35px}.mode-grid,.teams,.settings{grid-template-columns:1fr}.mode-card{min-height:240px}.page-head{align-items:flex-start;flex-direction:column}.runtime-tools{left:8px;top:8px}}
@media(min-width:1600px){.shell{width:min(1380px,calc(100% - 70px))}.hero{min-height:680px}.hero h1{font-size:88px}.device{min-height:520px}.mode-card{min-height:300px}}