@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Kufi+Arabic:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap";:root{--bg-base:#0f1117;--bg-surface:#171c28;--bg-surface-2:#1e2535;--bg-surface-3:#262e42;--border-1:#ffffff0f;--border-2:#ffffff1f;--border-3:#fff3;--text-1:#eef0f6;--text-2:#8b92a8;--text-3:#4d5572;--team-a:#60a5fa;--team-a-dim:#60a5fa1f;--team-b:#fb923c;--team-b-dim:#fb923c1f;--accent:#a78bfa;--accent-dim:#a78bfa1f;--positive:#34d399;--positive-dim:#34d3991a;--negative:#f87171;--negative-dim:#f871711a;--gold:#fbbf24;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:40px;--sp-9:48px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-full:100px;--shadow-1:0 1px 3px #0000004d;--shadow-2:0 4px 12px #0006;--shadow-3:0 8px 24px #00000080;--ease-material:cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{color:var(--text-1);background:var(--bg-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Noto Kufi Arabic,Inter,Outfit,system-ui,sans-serif;font-size:16px;line-height:1.7}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:var(--r-full)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseGlow{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-shell{background:var(--bg-base);flex-direction:column;max-width:430px;min-height:100dvh;margin-inline:auto;display:flex;position:relative}.app-bar{z-index:50;padding:var(--sp-3) var(--sp-5);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-1);background:#0f1117cc;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.app-bar__brand{color:var(--text-1);align-items:center;gap:10px;font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:700;display:flex}.app-bar__logo{border-radius:var(--r-sm);background:var(--accent-dim);width:32px;height:32px;color:var(--accent);justify-content:center;align-items:center;display:flex}.app-bar__actions{align-items:center;gap:var(--sp-1);display:flex}.app-bar__btn{border-radius:var(--r-sm);width:40px;height:40px;color:var(--text-2);cursor:pointer;transition:background .2s var(--ease-material);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:relative}.app-bar__btn:hover{background:var(--bg-surface-2)}.page{gap:var(--sp-4);padding:var(--sp-5);flex-direction:column;flex:1;display:flex}.page-header{align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5);display:flex}.loading{justify-content:center;align-items:center;gap:var(--sp-4);flex-direction:column;min-height:60vh;display:flex}.loading__text{color:var(--text-3);font-size:.9rem;animation:1.5s ease-in-out infinite pulseGlow}.card{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);padding:var(--sp-5);box-shadow:var(--shadow-1)}.card--flush{padding:0}.btn{justify-content:center;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-5);border-radius:var(--r-md);cursor:pointer;transition:all .2s var(--ease-material);-webkit-user-select:none;user-select:none;border:none;font-family:inherit;font-size:.9rem;font-weight:600;line-height:1;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:var(--accent);color:#eef0f6}.btn--primary:hover:not(:disabled){filter:brightness(1.12)}.btn--positive{background:var(--positive);color:var(--bg-base)}.btn--positive:hover:not(:disabled){filter:brightness(1.1)}.btn--negative{background:var(--negative-dim);color:var(--negative);border:1px solid var(--negative-dim)}.btn--negative:hover:not(:disabled){background:#f871712e}.btn--ghost{color:var(--text-2);border:1px solid var(--border-2);background:0 0}.btn--ghost:hover:not(:disabled){background:var(--bg-surface-2)}.btn--icon{border-radius:var(--r-sm);justify-content:center;width:40px;height:40px;min-height:40px;padding:0}.btn--block{width:100%}.btn--lg{border-radius:var(--r-lg);height:52px;min-height:52px;font-size:1rem}.btn--sm{min-height:32px;padding:0 var(--sp-3);font-size:.8rem}.btn-tile{border-radius:var(--r-lg);background:var(--bg-surface);border:1px solid var(--border-2);justify-content:center;align-items:center;gap:var(--sp-2);min-height:88px;color:var(--text-1);cursor:pointer;padding:var(--sp-4);transition:all .2s var(--ease-material);flex-direction:column;font-family:inherit;font-size:.85rem;font-weight:600;display:flex}.btn-tile:hover{border-color:var(--border-3);background:var(--bg-surface-2)}.btn-tile:disabled{opacity:.35;cursor:not-allowed}.btn-tile__icon{border-radius:var(--r-full);justify-content:center;align-items:center;width:40px;height:40px;display:flex}.input{width:100%;height:44px;padding:0 var(--sp-4);background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-sm);color:var(--text-1);transition:border-color .2s var(--ease-material), box-shadow .2s var(--ease-material);outline:none;font-family:inherit;font-size:.9rem}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238b92a8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--sp-4) center;padding-right:var(--sp-8);cursor:pointer;background-size:16px}[dir=rtl] select.input{background-position:left var(--sp-4) center;padding-right:var(--sp-4);padding-left:var(--sp-8)}.input::placeholder{color:var(--text-3)}.input-group{gap:var(--sp-1);flex-direction:column;display:flex}.input-label{color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.toggle{cursor:pointer;align-items:center;display:inline-flex;position:relative}.toggle__input{opacity:0;width:0;height:0;position:absolute}.toggle__track{background:var(--bg-surface-3);border-radius:var(--r-full);border:1.5px solid var(--border-2);width:48px;height:26px;transition:all .3s var(--ease-material);position:relative}.toggle__track:after{content:"";top:50%;border-radius:var(--r-full);background:var(--text-2);width:20px;height:20px;transition:all .3s var(--ease-material);position:absolute;inset-inline-start:3px;transform:translateY(-50%)}.toggle__input:checked+.toggle__track{background:var(--accent-dim);border-color:var(--accent)}.toggle__input:checked+.toggle__track:after{background:var(--accent);inset-inline-start:calc(100% - 23px)}.stepper{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-sm);box-sizing:border-box;width:100%;height:44px;transition:border-color .2s var(--ease-material), box-shadow .2s var(--ease-material);gap:0;padding:2px;display:flex;direction:ltr!important;flex-direction:row!important}.stepper:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.stepper__btn{border-radius:calc(var(--r-sm) - 2px);width:38px;height:38px;color:var(--text-2);cursor:pointer;transition:all .15s var(--ease-material);background:0 0;border:none;justify-content:center;align-items:center;font-size:1.1rem;display:flex;flex-shrink:0!important}.stepper__btn:hover{background:var(--bg-surface-2);color:var(--text-1)}.stepper__btn:active{background:var(--border-1)}.stepper__value{text-align:center;width:100%;color:var(--text-1);background:0 0;border:none;outline:none;flex:1;font-family:Outfit,sans-serif;font-size:1rem;font-weight:700;min-width:0!important}.stepper__value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.stepper__value::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.stepper__value[type=number]{-moz-appearance:textfield}.tab-bar{background:var(--bg-surface);border-radius:var(--r-md);border:1px solid var(--border-1);gap:2px;padding:3px;display:flex}.tab-bar__tab{border-radius:var(--r-sm);height:36px;color:var(--text-3);cursor:pointer;transition:all .2s var(--ease-material);background:0 0;border:none;flex:1;justify-content:center;align-items:center;font-family:inherit;font-size:.8rem;font-weight:600;display:flex}.tab-bar__tab--active{background:var(--bg-surface-3);color:var(--text-1)}.badge{padding:2px var(--sp-3);border-radius:var(--r-full);background:var(--bg-surface-2);color:var(--text-2);border:1px solid var(--border-1);align-items:center;font-size:.7rem;font-weight:600;display:inline-flex}.badge--team-a{background:var(--team-a-dim);color:var(--team-a);border-color:#0000}.badge--team-b{background:var(--team-b-dim);color:var(--team-b);border-color:#0000}.match-badge{padding:2px var(--sp-3);border-radius:var(--r-full);background:var(--bg-surface-2);color:var(--text-2);border:1px solid var(--border-1);align-items:center;font-size:.7rem;font-weight:600;display:inline-flex}.match-badge--official{background:var(--team-a-dim);color:var(--team-a);border-color:#0000}.match-badge--custom{background:var(--team-b-dim);color:var(--team-b);border-color:#0000}.overlay{-webkit-backdrop-filter:blur(8px);z-index:100;background:#0009;animation:.2s ease-out fadeIn;position:fixed;inset:0}.overlay--transparent{-webkit-backdrop-filter:none;z-index:55;background:0 0}.sheet{z-index:101;background:var(--bg-surface);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--sp-5);box-shadow:var(--shadow-3);max-height:85vh;animation:slideUp .25s var(--ease-material);position:fixed;bottom:0;left:0;right:0;overflow-y:auto}.sheet__handle{width:40px;height:4px;margin:0 auto var(--sp-5);background:var(--border-3);border-radius:var(--r-full)}.banner{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);gap:var(--sp-2);align-items:center;font-size:.85rem;display:flex}.banner--error{background:var(--negative-dim);color:var(--negative);border:1px solid var(--negative-dim)}.error-banner{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);gap:var(--sp-2);background:var(--negative-dim);color:var(--negative);border:1px solid var(--negative-dim);align-items:center;font-size:.85rem;display:flex}.spinner{border:2px solid var(--border-2);border-top-color:var(--accent);border-radius:var(--r-full);width:20px;height:20px;animation:.6s linear infinite spin}.divider{background:var(--border-1);height:1px;margin:var(--sp-3) 0}.notif-badge{top:-6px;border-radius:var(--r-full);background:var(--negative);color:#eef0f6;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 4px;font-size:.65rem;font-weight:700;display:flex;position:absolute;inset-inline-end:-6px}.auth{flex-direction:column;justify-content:center;min-height:70vh;animation:.3s ease-out fadeIn;display:flex}.auth__brand{text-align:center;margin-bottom:var(--sp-7)}.auth__icon{color:var(--accent);margin-bottom:var(--sp-4)}.form-col{gap:var(--sp-4);flex-direction:column;display:flex}.phone-input-row{gap:var(--sp-2);align-items:center;display:flex}.phone-prefix{background:var(--bg-surface-2);border-radius:var(--r-sm);padding:0 var(--sp-3);height:44px;color:var(--text-2);border:1px solid var(--border-2);flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;font-weight:600;display:flex}.otp-input{text-align:center;letter-spacing:.5em;font-size:1.3rem;font-weight:700}.divider-or{text-align:center;color:var(--text-3);margin:var(--sp-4) 0;align-items:center;font-size:.8rem;display:flex}.divider-or:before,.divider-or:after{content:"";border-bottom:1px solid var(--border-2);flex:1}.divider-or:before{margin-inline-end:var(--sp-3)}.divider-or:after{margin-inline-start:var(--sp-3)}.auth__guest-trigger{margin-top:var(--sp-4);text-align:center}.home__welcome{margin-bottom:var(--sp-6)}.home__username{color:var(--text-3);margin-bottom:var(--sp-1);font-size:.8rem}.home__greeting{color:var(--text-1);font-size:1.25rem;font-weight:700}.home__actions{gap:var(--sp-3);margin-bottom:var(--sp-6);grid-template-columns:repeat(2,1fr);display:grid}.game-notice{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);border-inline-start:3px solid var(--accent);padding:var(--sp-4);margin-bottom:var(--sp-5);box-shadow:var(--shadow-1)}.game-notice__title{color:var(--accent);margin-bottom:var(--sp-1);font-size:.95rem;font-weight:700}.game-notice__desc{color:var(--text-2);font-size:.85rem}.game-notice__btns{gap:var(--sp-3);margin-top:var(--sp-3);display:flex}.section-title{color:var(--text-3);margin-bottom:var(--sp-3);align-items:center;gap:var(--sp-2);font-size:.8rem;font-weight:600;display:flex}.history-list{gap:var(--sp-2);flex-direction:column;display:flex}.history-card{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--shadow-1);cursor:pointer;transition:all .2s var(--ease-material)}.history-card:hover{border-color:var(--border-3);background:var(--bg-surface-2)}.history-card__header{margin-bottom:var(--sp-2);justify-content:space-between;align-items:center;display:flex}.history-card__date{color:var(--text-3);font-size:.7rem}.history-card__teams{justify-content:space-between;align-items:center;display:flex}.history-card__team-name{color:var(--text-1);font-size:.88rem;font-weight:600}.history-card__score{color:var(--text-1);font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:800}.history-card__withdrawal{color:var(--negative);font-size:.7rem;font-weight:600}.empty-state{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);text-align:center;padding:var(--sp-8);color:var(--text-3);box-shadow:var(--shadow-1)}.lobby{gap:var(--sp-4);flex-direction:column;animation:.3s ease-out fadeIn;display:flex}.team-block{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:0;overflow:hidden}.team-block__bar{width:100%;height:3px}.team-block--a .team-block__bar{background:var(--team-a)}.team-block--b .team-block__bar{background:var(--team-b)}.team-block__content{padding:var(--sp-4);gap:var(--sp-3);flex-direction:column;display:flex}.player-slot{gap:var(--sp-1);flex-direction:column;display:flex}.invite-section{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);padding:var(--sp-4);gap:var(--sp-3);box-shadow:var(--shadow-1);flex-direction:column;display:flex}.invite-section__title{color:var(--text-1);font-size:.9rem;font-weight:700}.invite-link{gap:var(--sp-2);background:var(--bg-surface-2);border-radius:var(--r-sm);padding:var(--sp-2);align-items:center;display:flex}.invite-link input{color:var(--text-2);text-overflow:ellipsis;background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:.78rem;overflow:hidden}.rules-panel{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:0;overflow:hidden}.rules-header{width:100%;padding:var(--sp-4);color:var(--text-1);cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;font-family:inherit;font-size:.95rem;font-weight:600;display:flex}.rules-header svg{transition:transform .2s var(--ease-material)}.rules-body{padding:0 var(--sp-4) var(--sp-4);gap:var(--sp-4);border-top:1px solid var(--border-1);padding-top:var(--sp-4);flex-direction:column;display:flex}.rules-row{justify-content:space-between;align-items:center;gap:var(--sp-4);display:flex}.rules-row__label{gap:var(--sp-1);flex-direction:column;flex:1;display:flex}.rules-row__title{color:var(--text-1);font-size:.88rem;font-weight:600}.rules-row__desc{color:var(--text-3);font-size:.75rem;line-height:1.4}.rules-row__control{flex-shrink:0;width:135px}.scoreboard{animation:.3s ease-out fadeIn}.status-pills{justify-content:center;gap:var(--sp-2);margin-bottom:var(--sp-4);flex-wrap:wrap;display:flex}.score-grid{gap:var(--sp-3);margin-bottom:var(--sp-4);grid-template-columns:repeat(2,1fr);display:grid}.score-tile{padding:var(--sp-5) var(--sp-4);background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-xl);text-align:center;cursor:pointer;transition:transform .15s var(--ease-material), box-shadow .15s var(--ease-material), border-color .15s var(--ease-material);-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden}.score-tile:before{content:"";top:0;height:3px;position:absolute;inset-inline:0}.score-tile--a:before{background:var(--team-a)}.score-tile--b:before{background:var(--team-b)}.score-tile:hover{box-shadow:var(--shadow-2);border-color:var(--border-3);transform:translateY(-2px)}.score-tile:active{transform:translateY(0)scale(.98)}.score-tile__value{margin-bottom:var(--sp-2);font-family:Outfit,sans-serif;font-size:3.5rem;font-weight:800;line-height:1}.score-tile--a .score-tile__value{color:var(--team-a)}.score-tile--b .score-tile__value{color:var(--team-b)}.score-tile__name{color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-3);font-size:.75rem;font-weight:600}.score-tile__dots{gap:var(--sp-2);align-items:center;display:flex}.score-dot{border-radius:var(--r-full);background:var(--bg-surface-3);width:8px;height:8px;transition:all .3s var(--ease-material)}.score-tile--a .score-dot--filled{background:var(--team-a);box-shadow:0 0 6px var(--team-a-dim)}.score-tile--b .score-dot--filled{background:var(--team-b);box-shadow:0 0 6px var(--team-b-dim)}.controls-row{justify-content:center;gap:var(--sp-3);margin-bottom:var(--sp-4);display:flex}.round-log{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);padding:var(--sp-5);box-shadow:var(--shadow-1)}.round-log__title{margin-bottom:var(--sp-3);font-size:.88rem;font-weight:700}.round-log__empty{color:var(--text-3);text-align:center;padding:var(--sp-5)}.round-item{padding:var(--sp-2) 0;border-bottom:1px solid var(--border-1);justify-content:space-between;display:flex}.round-item:last-child{border-bottom:none}.round-item__label{color:var(--text-2);font-size:.85rem}.round-item__score{font-size:.85rem;font-weight:700}.round-item__score--a{color:var(--team-a)}.round-item__score--b{color:var(--team-b)}.numpad__team{text-align:center;color:var(--text-2);margin-bottom:var(--sp-1);font-size:.85rem}.numpad__display{text-align:center;margin-bottom:var(--sp-4);font-family:Outfit,sans-serif;font-size:4rem;font-weight:800;line-height:1}.numpad__display--a{color:var(--team-a)}.numpad__display--b{color:var(--team-b)}.numpad__grid{gap:var(--sp-2);grid-template-columns:repeat(3,1fr);display:grid}.numpad__key{border-radius:var(--r-md);background:var(--bg-surface-2);border:1px solid var(--border-1);height:56px;color:var(--text-1);cursor:pointer;transition:all .15s var(--ease-material);justify-content:center;align-items:center;font-family:inherit;font-size:1.2rem;font-weight:600;display:flex}.numpad__key:active{background:var(--bg-surface-3);transform:scale(.95)}.numpad__key--action{color:var(--text-3)}.numpad__actions{gap:var(--sp-3);margin-top:var(--sp-4);display:flex}.victory{text-align:center;animation:.3s ease-out fadeIn}.victory__card{background:linear-gradient(135deg, var(--bg-surface-2), var(--bg-surface));border-radius:var(--r-md);padding:var(--sp-8) var(--sp-5);text-align:center;box-shadow:var(--shadow-1);border:1px solid #fbbf2426}.victory__trophy{margin-bottom:var(--sp-4);filter:drop-shadow(0 4px 12px #fbbf244d);font-size:4rem;animation:3s ease-in-out infinite float}.victory__title{color:var(--gold);margin-bottom:var(--sp-1);font-size:1.25rem;font-weight:800}.victory__winner{color:var(--text-2);margin-bottom:var(--sp-6);font-size:.9rem}.victory__scores{justify-content:center;gap:var(--sp-8);display:flex}.victory__team{text-align:center}.victory__team-score{color:var(--text-1);font-family:Outfit,sans-serif;font-size:3rem;font-weight:800}.victory__team-name{color:var(--text-2);margin-top:var(--sp-1);font-size:.85rem}.victory__sets{gap:var(--sp-2);margin-top:var(--sp-5);flex-direction:column;display:flex}.victory__set-item{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow-1);justify-content:space-between;display:flex}.victory__set-label{font-size:.85rem;font-weight:600}.victory__set-score{font-size:.85rem;font-weight:700}.settings{gap:var(--sp-5);flex-direction:column;animation:.3s ease-out fadeIn;display:flex}.settings-section{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:0;overflow:hidden}.settings-section__title{color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;padding:var(--sp-3) var(--sp-4);background:var(--bg-surface-2);border-bottom:1px solid var(--border-1);font-size:.7rem;font-weight:600}.settings-row{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-1);justify-content:space-between;align-items:center;gap:var(--sp-3);min-height:48px;display:flex}.settings-row:last-child{border-bottom:none}.settings-row--col{flex-direction:column;align-items:stretch}.settings-row__value{color:var(--text-2);font-size:.85rem}.settings-input{width:100%;height:44px;padding:0 var(--sp-4);background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-sm);color:var(--text-1);transition:border-color .2s var(--ease-material), box-shadow .2s var(--ease-material);outline:none;font-family:inherit;font-size:.9rem}.settings-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.settings-error{color:var(--negative);margin-top:var(--sp-1);font-size:.8rem}.settings-toggle{cursor:pointer;align-items:center;display:inline-flex;position:relative}.settings-toggle--active .settings-toggle__track{background:var(--accent-dim);border-color:var(--accent)}.settings-toggle__track{background:var(--bg-surface-3);border-radius:var(--r-full);border:1.5px solid var(--border-2);width:48px;height:26px;transition:all .3s var(--ease-material);position:relative}.settings-toggle__track:after{content:"";top:50%;border-radius:var(--r-full);background:var(--text-2);width:20px;height:20px;transition:all .3s var(--ease-material);position:absolute;inset-inline-start:3px;transform:translateY(-50%)}.settings-toggle--active .settings-toggle__track:after{background:var(--accent);inset-inline-start:calc(100% - 23px)}.friends{gap:var(--sp-4);flex-direction:column;animation:.3s ease-out fadeIn;display:flex}.friend-card{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);padding:var(--sp-4);margin-bottom:var(--sp-2);box-shadow:var(--shadow-1);justify-content:space-between;align-items:center;display:flex}.friend-request-card{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);padding:var(--sp-4);margin-bottom:var(--sp-2);box-shadow:var(--shadow-1);border-inline-start:3px solid var(--accent);justify-content:space-between;align-items:center;display:flex}.friend-card__info{gap:var(--sp-1);flex-direction:column;display:flex}.friend-card__name-row{align-items:center;gap:var(--sp-2);display:flex}.friend-card__name{font-size:.9rem;font-weight:700}.friend-card__username{color:var(--text-3);font-size:.8rem}.friend-card__status{font-size:.75rem;font-weight:600}.friend-card__actions{gap:var(--sp-2);display:flex}.status-dot{border-radius:var(--r-full);flex-shrink:0;width:8px;height:8px;display:inline-block}.status-dot--online{background:var(--positive);box-shadow:0 0 6px var(--positive)}.status-dot--playing{background:var(--team-b);box-shadow:0 0 6px var(--team-b)}@keyframes statusPulse{0%,to{opacity:1;transform:scale(1);box-shadow:0 0 4px}50%{opacity:.6;transform:scale(1.2);box-shadow:0 0 10px}}.status-indicator{border-radius:var(--r-full);flex-shrink:0;width:8px;height:8px;animation:2s ease-in-out infinite statusPulse;display:inline-block}.status-indicator--playing{background:var(--team-b);color:var(--team-b)}.status-indicator--idle{background:var(--positive);color:var(--positive)}.add-friend-input{align-items:center;gap:var(--sp-3);background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);padding:0 var(--sp-4);height:44px;display:flex}.add-friend-input input{color:inherit;font-size:inherit;background:0 0;border:none;outline:none;flex:1;height:100%;padding:0;font-family:inherit}.search-result-item{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-1);cursor:pointer;transition:background .15s var(--ease-material);justify-content:space-between;align-items:center;font-size:.88rem;display:flex}.search-result-item:hover{background:var(--bg-surface-2)}.search-result-item:last-child{border-bottom:none}.notif-bell{cursor:pointer;border-radius:var(--r-sm);width:40px;height:40px;color:var(--text-2);transition:background .15s var(--ease-material);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:relative}.notif-bell:hover{background:var(--bg-surface-2)}.notif-dropdown{top:100%;background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-lg);width:320px;max-height:400px;box-shadow:var(--shadow-3);padding:var(--sp-4);z-index:60;animation:.15s ease-out fadeIn;position:absolute;inset-inline-end:var(--sp-5);overflow-y:auto}.notif-dropdown__header{margin-bottom:var(--sp-3);justify-content:space-between;align-items:center;display:flex}.notif-dropdown__title{font-size:1rem;font-weight:700}.notif-item{gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);cursor:pointer;transition:background .15s var(--ease-material);display:flex}.notif-item:hover{background:var(--bg-surface-2)}.notif-item--unread{background:var(--accent-dim);border-inline-start:2px solid var(--accent)}.notif-item__icon{border-radius:var(--r-full);background:var(--bg-surface-2);width:32px;height:32px;color:var(--text-2);flex-shrink:0;justify-content:center;align-items:center;display:flex}.notif-item__content{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.notif-item__title{color:var(--text-1);font-size:.85rem;font-weight:600}.notif-item__body{color:var(--text-2);font-size:.8rem}.notif-item__time{color:var(--text-3);flex-shrink:0;font-size:.7rem}.detail-header{text-align:center;margin-bottom:var(--sp-5)}.detail-scores{margin-bottom:var(--sp-6);justify-content:space-around;align-items:center;display:flex}.detail-score-col{text-align:center}.detail-score-num{font-family:Outfit,sans-serif;font-size:2.5rem;font-weight:800}.detail-score-name{color:var(--text-2);margin-top:var(--sp-1);font-size:.85rem}.detail-vs{color:var(--text-3);font-size:.85rem;font-weight:700}.detail-withdrawal{text-align:center;color:var(--negative);margin:calc(-1 * var(--sp-3)) 0 var(--sp-4);font-size:.85rem;font-weight:700}.detail-set{background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-md);margin-bottom:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--bg-surface-2);box-shadow:var(--shadow-1)}.detail-set__header{margin-bottom:var(--sp-2);padding-bottom:var(--sp-2);border-bottom:1px solid var(--border-2);justify-content:space-between;align-items:center;font-weight:700;display:flex}.detail-set__rounds{gap:var(--sp-2);flex-direction:column;display:flex}.detail-round{justify-content:space-between;font-size:.85rem;display:flex}.detail-round__label{color:var(--text-2)}.detail-round__score{font-weight:700}.detail-round__score--a{color:var(--team-a)}.detail-round__score--b{color:var(--team-b)}.detail-empty{color:var(--text-3);text-align:center;padding:var(--sp-2);font-size:.8rem}.animate-fade-in{animation:.2s ease-out fadeIn}.text-center{text-align:center}.text-muted{color:var(--text-3)}[dir=rtl] .toggle__input:checked+.toggle__track:after,[dir=rtl] .settings-toggle--active .settings-toggle__track:after{inset-inline-start:calc(100% - 23px)}.segmented-control{background:var(--bg-surface-2);border:1px solid var(--border-2);border-radius:var(--r-sm);box-sizing:border-box;width:100%;padding:2px;display:flex}.segmented-control__btn{color:var(--text-2);border-radius:calc(var(--r-sm) - 2px);cursor:pointer;background:0 0;border:none;outline:none;flex:1;padding:6px 0;font-size:.88rem;font-weight:700;transition:all .15s}.segmented-control__btn:hover{color:var(--text-1)}.segmented-control__btn--active{background:var(--accent);color:var(--bg-base)!important}@supports (-webkit-touch-callout:none){.app-shell{min-height:-webkit-fill-available}}@media (width<=430px){.input,.settings-input,.otp-input{font-size:16px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}