:root{--ink:#17251f;--muted:#788078;--paper:#f5f4ef;--white:#fff;--line:#e7e8e0;--lime:#d4f16b;--green:#416b56;--deep:#203d31;--font-body:"DM Sans",Arial,sans-serif;--font-display:"Manrope",Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}.page-shell{max-width:1440px;margin:auto;padding:0 7.1%}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5e5dd}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 19px var(--font-display);letter-spacing:-1.1px}.brand-light{font-weight:500;color:#7e857d}.brand-mark{width:23px;height:23px;display:grid;grid-template-columns:1fr 1fr;gap:2px;transform:rotate(-9deg)}.brand-mark span{background:var(--green);border-radius:1px 5px 1px 1px}.brand-mark span:nth-child(2){background:#a3c750}.brand-mark span:nth-child(3){background:#a3c750}.brand-mark span:nth-child(4){background:var(--green)}.top-actions{display:flex;align-items:center;gap:32px}.nav-link{color:#505a53;text-decoration:none;font-size:13px;font-weight:600}.nav-count{display:inline-flex;justify-content:center;align-items:center;width:20px;height:20px;margin-left:5px;border-radius:50%;background:#e7ebdb;color:#405343;font-size:10px}.button{border:0;border-radius:5px;padding:13px 17px;font:700 12px var(--font-body);cursor:pointer;transition:transform .18s,background .18s,color .18s;display:inline-flex;align-items:center;justify-content:center;gap:17px;text-decoration:none;white-space:nowrap}.button:hover{transform:translateY(-2px)}.button-dark{background:var(--ink);color:white}.button-dark:hover{background:#33463a}.button-small{padding:11px 17px}.button-lime{background:var(--lime);color:var(--ink)}.button-lime:hover{background:#c7eb4e}.button-outline{background:transparent;border:1px solid #aeb5ab;color:var(--ink)}.button-outline:hover{background:#e9ece2}.button-join{min-width:133px}.button-leave{background:#eff0e9;color:#556056;min-width:133px}.button-leave:hover{background:#e5e7de}.button-disabled{background:#eceee9;color:#8b9088;min-width:133px;cursor:not-allowed}.button-full{width:100%;justify-content:space-between;padding:16px 18px}.hero{min-height:500px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7%;padding:36px 0 43px}.hero-copy{padding:25px 0 10px}.eyebrow{font:700 9px var(--font-body);letter-spacing:1.6px;color:#607367;display:flex;align-items:center;gap:8px}.live-dot,.tag-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#91c44b;box-shadow:0 0 0 4px #91c44b26}.hero h1{font:600 clamp(55px,6.25vw,88px)/.99 var(--font-display);letter-spacing:-5.5px;margin:25px 0 18px;color:var(--ink)}.hero h1 span{font-weight:400;color:#86957b}.hero-text{max-width:360px;color:#69736a;font-size:14px;line-height:1.8;margin:0 0 27px}.hero-cta{font-size:12px;padding:14px 18px;min-width:145px;justify-content:space-between}.hero-note{display:flex;align-items:center;gap:12px;margin-top:38px;color:#778078;font-size:10px;font-weight:600}.avatar-stack{display:flex;padding-left:3px}.avatar-stack i{font-style:normal;width:23px;height:23px;display:grid;place-items:center;margin-left:-4px;border:2px solid var(--paper);border-radius:50%;font-size:8px;color:white;background:#c38c65}.avatar-stack i:nth-child(2){background:#737d5e}.avatar-stack i:nth-child(3){background:#657f8a}.hero-art{height:380px;position:relative;display:grid;place-items:center}.court-glow{position:absolute;width:76%;height:79%;background:#e7edda;border-radius:50%;filter:blur(2px)}.court{position:relative;width:78%;height:67%;border:2px solid rgba(255,255,255,.92);background:#689176;transform:rotate(-8deg) skewY(1deg);box-shadow:0 24px 55px #243f3126;overflow:hidden}.court:before,.court:after{content:"";position:absolute;top:0;bottom:0;width:1.5px;background:#ffffffba;left:13%}.court:after{left:auto;right:13%}.court-net{position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed #ffffffb0}.court-box{position:absolute;top:23%;bottom:23%;width:24%;border:1.5px solid #ffffffb0}.court-box-left{left:13%}.court-box-right{right:13%}.court-center{position:absolute;top:50%;width:12%;border-top:1.5px solid #ffffffb0}.court-center-left{left:25%}.court-center-right{right:25%}.court-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);font:700 8px var(--font-body);letter-spacing:3px;color:#ffffffa8}.court-ball{position:absolute;width:47px;height:47px;border-radius:50%;background:#daf078;left:68%;top:23%;box-shadow:0 9px 18px #18291c44;display:grid;place-items:center}.court-ball span{width:32px;height:16px;border-top:1px solid #536239;border-bottom:1px solid #536239;border-radius:50%;transform:rotate(-43deg)}.hero-sticker{position:absolute;right:3%;top:8%;width:90px;height:90px;border-radius:50%;background:var(--lime);display:grid;place-content:center;text-align:center;transform:rotate(11deg);font-size:9px;line-height:1.45;letter-spacing:1px;font-weight:800;box-shadow:0 10px 25px #1e35201c}.sticker-star{font-size:20px;line-height:1;margin-bottom:4px}.floating-tag{position:absolute;bottom:15%;left:0;background:white;padding:12px 16px;border-radius:4px;box-shadow:0 10px 30px #26352616;font-size:10px;font-weight:700;display:flex;align-items:center;gap:10px}.art-caption{position:absolute;bottom:1%;right:3%;font-size:8px;letter-spacing:1.3px;color:#858d82}.games-section{padding:51px 0 55px;border-top:1px solid #e3e5dc}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.eyebrow-muted{color:#889187}.section-heading h2{font:600 clamp(27px,3vw,39px)/1.2 var(--font-display);letter-spacing:-1.7px;margin:10px 0 0}.heading-period{color:#9bbc50}.heading-right{display:flex;align-items:center;gap:20px}.connection-status{font-size:10px;color:#778078;display:flex;align-items:center;gap:7px}.connection-status i{width:6px;height:6px;border-radius:50%;background:#9da69a}.connection-status i.online{background:#8dbf44;box-shadow:0 0 0 3px #8dbf4428}.connection-status i.offline{background:#c98264}.connection-status i.busy{background:#e6b454;animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.3}}.games-list{display:grid;gap:10px}.game-card{background:var(--white);border:1px solid #ebede6;border-radius:5px;min-height:161px;padding:21px 24px;display:grid;grid-template-columns:76px minmax(0,1fr) 150px;gap:21px;align-items:start;box-shadow:0 3px 9px #1e2d1c04;animation:rise .4s both;animation-delay:calc(var(--card-index)*.05s)}@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.date-block{border-right:1px solid #e9ebe4;min-height:114px;display:flex;flex-direction:column;gap:7px;padding-top:6px}.date-block span{color:#7b897d;font-size:9px;font-weight:700;letter-spacing:1px}.date-block strong{font:700 15px var(--font-display);letter-spacing:-.4px}.game-main{min-width:0}.game-title-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}.game-title-row h3{margin:1px 0;font:700 16px var(--font-display);letter-spacing:-.4px}.game-type{font-size:8px;font-weight:700;letter-spacing:.8px;border-radius:2px;background:#eff3e4;padding:5px 7px;color:#687859}.game-meta{display:flex;gap:17px;margin-top:10px;color:#7f887e;font-size:10px}.roster{display:flex;align-items:center;gap:13px;margin-top:19px;min-height:25px}.avatar-row{display:flex;align-items:center;padding-left:2px}.player-avatar,.avatar-open{margin-left:-2px;width:24px;height:24px;border-radius:50%;border:2px solid white;display:grid;place-items:center;font-weight:700;font-size:8px;background:#edc7a2;color:#735638}.avatar-0{background:#d7e4b4;color:#4e6443}.avatar-1{background:#d7e6e8;color:#4b6a6d}.avatar-2{background:#ead6c8;color:#8b6043}.avatar-3{background:#e2d8ec;color:#6d5b82}.avatar-4{background:#d8e3d1;color:#557150}.avatar-open{background:#f4f5f0;color:#778078;font-size:8px}.roster-names{display:flex;flex-wrap:wrap;gap:4px 9px;align-items:center}.player-name{font-size:9px;color:#657066}.player-name.is-you{font-weight:700;color:#435d43}.player-name small{font-size:7px;letter-spacing:.6px;color:#82915b}.no-players{font-size:9px;color:#8b938a}.game-side{display:flex;flex-direction:column;align-items:stretch;gap:12px}.spots{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;color:#778078}.spots strong{font:700 25px var(--font-display);letter-spacing:-1px;color:var(--ink)}.spots span{font-size:8px;letter-spacing:.8px;font-weight:700}.spots-full strong,.spots-full span{color:#a06f5e}.game-side .button{font-size:10px;padding:12px}.delete-game{background:none;border:0;color:#a27868;font:600 9px var(--font-body);cursor:pointer;text-decoration:underline}.empty-state{text-align:center;padding:54px 20px;background:#fff;border:1px solid var(--line);border-radius:5px}.empty-icon{font-size:30px;color:#91b444}.empty-state h3{font:700 17px var(--font-display);margin:15px 0 8px}.empty-state p{font-size:12px;color:#778078;margin:0}.loading-card,.setup-card{background:white;border:1px solid var(--line);padding:23px;border-radius:5px;color:#687268;font-size:12px;display:flex;align-items:center;gap:15px}.setup-card p{margin:7px 0 0;color:#778078;font-size:11px;line-height:1.7}.setup-card code{color:#304336;background:#f0f3e9;padding:2px 4px}.setup-symbol{width:28px;height:28px;border-radius:50%;background:#edf1e4;display:grid;place-items:center;color:#698052;font-size:16px}.loader{width:15px;height:15px;border:2px solid #e2e8d5;border-top-color:#829b48;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.notice{margin:0 0 14px;border-radius:4px;padding:12px 15px;font-size:11px;font-weight:600}.notice-success{background:#e9f1df;color:#425e3e}.notice-error{background:#f7e9e2;color:#844c37}.notice-info{background:#edf0e9;color:#4f5b50}.hidden{display:none!important}.bottom-banner{display:flex;align-items:center;gap:17px;background:#e9eddf;border-radius:5px;padding:24px 28px;margin:2px 0 45px}.banner-icon{width:35px;height:35px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-size:18px}.bottom-banner h3{font:700 14px var(--font-display);margin:0 0 4px}.bottom-banner p{margin:0;color:#7b8579;font-size:10px}.banner-link{margin-left:auto;color:#405444;text-decoration:none;font-weight:700;font-size:10px}.banner-link span{margin-left:9px}footer{height:70px;border-top:1px solid #e3e5dc;display:flex;align-items:center;justify-content:space-between;color:#8a9188;font-size:8px;letter-spacing:1px}.footer-brand{font-size:15px;color:var(--ink);letter-spacing:-.8px}.footer-brand .brand-mark{width:18px;height:18px}.footer-ball{color:#a8c75b;font-size:10px;margin-left:4px}.modal{width:min(440px,calc(100% - 30px));border:1px solid #e7e8e0;border-radius:8px;background:#fff;padding:34px;box-shadow:0 22px 80px #1e302c30;color:var(--ink)}.modal::backdrop{background:#18241e88;backdrop-filter:blur(3px)}.modal-close-form{position:absolute;right:16px;top:14px}.modal-close{border:0;background:transparent;color:#748076;font-size:25px;cursor:pointer}.modal-kicker{font-size:9px;font-weight:700;letter-spacing:1.4px;color:#71816f}.modal h2{font:700 25px/1.2 var(--font-display);letter-spacing:-1px;margin:12px 0 9px}.modal-description{font-size:12px;line-height:1.6;color:#788078;margin:0 0 22px}.form-stack{display:grid;gap:15px}.form-stack label{display:grid;gap:7px;font-size:10px;font-weight:700;color:#566258}.form-stack input{font:500 13px var(--font-body);color:#243329;border:1px solid #dfe3da;border-radius:4px;padding:12px 13px;width:100%;background:white;outline:0}.form-stack input:focus{border-color:#93ab65;box-shadow:0 0 0 3px #99b66c24}.form-stack input::placeholder{color:#b0b6af}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.auth-message{min-height:16px;margin:13px 0 0;color:#4d6b44;font-size:11px;line-height:1.6}.auth-message.message-error{color:#a54d37}.auth-switch{font-size:10px;color:#778078;margin:5px 0 0}.auth-switch button{border:0;background:none;padding:0;color:#425c40;text-decoration:underline;font:700 10px var(--font-body);cursor:pointer}@media(min-width:1200px){.hero{min-height:550px}.hero-art{height:430px}.game-card{grid-template-columns:86px minmax(0,1fr) 165px;padding:24px 28px}}@media(max-width:760px){.page-shell{padding:0 5%}.topbar{height:72px}.top-actions{gap:14px}.nav-link{font-size:11px}.hero{grid-template-columns:1fr;gap:4px;padding:35px 0 36px}.hero-copy{padding:5px 0}.hero h1{font-size:66px;margin:18px 0 13px;letter-spacing:-4px}.hero-text{max-width:430px;font-size:13px}.hero-note{margin-top:23px}.hero-art{height:300px;margin-top:1px}.court{width:75%;height:67%}.hero-sticker{right:7%;top:3%;width:78px;height:78px}.floating-tag{left:4%;bottom:10%}.section-heading{align-items:start;gap:16px;flex-direction:column;margin-bottom:20px}.heading-right{width:100%;justify-content:space-between}.game-card{grid-template-columns:54px minmax(0,1fr);gap:14px;padding:17px 15px;position:relative}.date-block{min-height:100%;padding-top:4px}.game-title-row h3{font-size:14px}.game-meta{flex-wrap:wrap;gap:7px 13px}.roster{align-items:flex-start;flex-direction:column;gap:7px;margin-top:15px}.roster-names{gap:5px 8px}.game-side{grid-column:2;display:grid;grid-template-columns:1fr auto;align-items:center;margin-top:2px;gap:9px}.spots{justify-content:flex-start}.spots strong{font-size:22px}.game-side .button{grid-column:2;grid-row:1 / span 2;min-width:120px}.delete-game{grid-column:1 / -1;text-align:left}.bottom-banner{padding:19px 16px;gap:12px}.bottom-banner h3{font-size:12px}.banner-link{font-size:9px;white-space:nowrap}footer{font-size:7px;letter-spacing:.5px}.footer-brand{font-size:13px}footer>span:nth-child(2){display:none}}@media(max-width:380px){.hero h1{font-size:58px}.button-small{padding:10px 12px}.nav-link{font-size:10px}.hero-art{height:260px}.game-card{padding:14px 11px;gap:11px}.game-side .button{min-width:103px;padding:10px 8px}.spots span{font-size:7px}.bottom-banner{gap:9px}.banner-icon{width:30px;height:30px}}
.language-picker{display:inline-flex;align-items:center;gap:7px;border:1px solid #dfe3da;border-radius:5px;background:#fff;padding:0 9px;color:#536158;height:36px}.language-picker>span{font-size:14px}.language-picker select{border:0;background:transparent;color:var(--ink);font:600 11px var(--font-body);outline:0;cursor:pointer;max-width:105px}.language-picker select option{background:#fff;color:var(--ink)}
html[lang="ar"] body{font-family:"Noto Sans Arabic","DM Sans",Arial,sans-serif}html[lang="ar"] .hero h1,html[lang="ar"] .section-heading h2,html[lang="ar"] .modal h2,html[lang="ar"] .game-title-row h3,html[lang="ar"] .empty-state h3,html[lang="ar"] .bottom-banner h3{font-family:"Noto Sans Arabic",var(--font-display),Arial,sans-serif;letter-spacing:0}html[dir="rtl"] .topbar,html[dir="rtl"] .section-heading,html[dir="rtl"] .bottom-banner,html[dir="rtl"] footer{direction:rtl}html[dir="rtl"] .nav-count{margin-left:0;margin-right:5px}html[dir="rtl"] .date-block{border-right:0;border-left:1px solid #e9ebe4}html[dir="rtl"] .game-side .delete-game{text-align:right}html[dir="rtl"] .avatar-row,html[dir="rtl"] .avatar-stack{padding-left:0;padding-right:2px}html[dir="rtl"] .player-avatar,html[dir="rtl"] .avatar-open{margin-left:0;margin-right:-2px}html[dir="rtl"] .modal-close-form{right:auto;left:16px}html[dir="rtl"] .auth-switch button{margin-right:3px}html[dir="rtl"] .hero-cta,html[dir="rtl"] .button-full{flex-direction:row-reverse}html[dir="rtl"] .banner-link{margin-left:0;margin-right:auto}html[dir="rtl"] .banner-link span{margin-left:0;margin-right:9px}
@media(max-width:760px){.language-picker{height:33px;padding:0 6px}.language-picker select{max-width:85px;font-size:10px}.top-actions{gap:9px}}