@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&display=swap";:root{--color-bg:#0a0a14;--color-surface:#14141f;--color-cell:#1c1c2a;--color-cell-hover:#252536;--color-border:#2a2a3d;--color-text:#e8e8f0;--color-muted:#6b6b80;--color-x:#ff6b6b;--color-o:#4ecdc4;--font-display:"Outfit", system-ui, sans-serif;--font-body:"Outfit", system-ui, sans-serif}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-body);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(80% 60% at 50% -10%,#4ecdc414,#0000),radial-gradient(60% 50% at 100% 100%,#ff6b6b0f,#0000);min-height:100svh;margin:0;font-size:16px;line-height:1.5}#root{min-height:100svh}button{font:inherit}:root{--font-display:"Outfit", system-ui, -apple-system, sans-serif;--font-body:"Outfit", system-ui, -apple-system, sans-serif;--color-bg:#090913;--color-surface:#131322;--color-surface-hover:#1c1c30;--color-card-border:#232338;--color-cell:#1a1a2c;--color-cell-hover:#262640;--color-text:#f0f0f8;--color-muted:#797994;--color-x:#ff5e6c;--color-x-glow:#ff5e6c73;--color-o:#00e5c9;--color-o-glow:#00e5c973;--color-accent:#7952ec}.app-container{background:var(--color-bg);width:100%;min-height:100svh;color:var(--color-text);box-sizing:border-box;background-image:radial-gradient(70% 50% at 20% 0,#ff5e6c14,#0000 70%),radial-gradient(70% 50% at 80% 0,#00e5c914,#0000 70%),radial-gradient(80% 60% at 50% 100%,#7952ec12,#0000 70%);flex-direction:column;display:flex}.app-header{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#131322a6;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex}.header-left,.header-right{align-items:center;gap:.75rem;min-width:120px;display:flex}.header-right{justify-content:flex-end}.header-brand{font-family:var(--font-display);letter-spacing:-.02em;text-align:center;margin:0;font-size:1.5rem;font-weight:800}.brand-x{color:var(--color-x);text-shadow:0 0 16px var(--color-x-glow)}.brand-o{color:var(--color-o);text-shadow:0 0 16px var(--color-o-glow)}.header-mode-badge{text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);text-align:center;margin-top:.15rem;font-size:.75rem;font-weight:600}.btn-nav{font-family:var(--font-body);border:1px solid var(--color-card-border);color:var(--color-text);cursor:pointer;background:#ffffff0f;border-radius:999px;align-items:center;gap:.4rem;padding:.45rem .9rem;font-size:.85rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-nav:hover{background:#ffffff1f;border-color:#fff3;transform:translate(-2px)}.btn-icon-sound{border:1px solid var(--color-card-border);cursor:pointer;background:#ffffff0f;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.1rem;transition:background .2s,transform .1s;display:flex}.btn-icon-sound:hover{background:#ffffff26;transform:scale(1.05)}.header-presence-badge{letter-spacing:.03em;color:#2ed573;background:#2ed5731a;border:1px solid #2ed57347;border-radius:999px;align-items:center;gap:.45rem;padding:.35rem .75rem;font-size:.78rem;font-weight:700;display:flex}.lobby-presence-pill{color:#2ed573;background:#2ed5731f;border:1px solid #2ed5734d;border-radius:999px;align-items:center;gap:.45rem;margin-top:.45rem;padding:.35rem .85rem;font-size:.82rem;font-weight:700;display:inline-flex}.live-pulse-dot{background:#2ed573;border-radius:50%;width:7px;height:7px;animation:1.4s ease-in-out infinite alternate live-blink;box-shadow:0 0 10px #2ed573}@keyframes live-blink{0%{opacity:.6;transform:scale(.85)}to{opacity:1;transform:scale(1.25)}}.app-main{box-sizing:border-box;flex:1;justify-content:center;align-items:center;width:100%;padding:1.5rem 2rem 2.5rem;display:flex}.home-menu-container{flex-direction:column;align-items:center;gap:2.25rem;width:100%;max-width:1050px;margin:0 auto;padding:1rem 0;display:flex}.home-menu-hero{text-align:center}.home-logo-badge{letter-spacing:.16em;color:#c4b5fd;background:#7952ec26;border:1px solid #7952ec4d;border-radius:999px;align-items:center;gap:.5rem;margin-bottom:.75rem;padding:.35rem .9rem;font-size:.75rem;font-weight:700;display:inline-flex}.home-title{letter-spacing:-.03em;margin:0;font-size:clamp(2.5rem,6vw,4.25rem);font-weight:800;line-height:1.1}.glow-x{color:var(--color-x);text-shadow:0 0 28px var(--color-x-glow)}.glow-amp{color:#fff;opacity:.6;padding:0 .2rem;font-weight:300}.glow-o{color:var(--color-o);text-shadow:0 0 28px var(--color-o-glow)}.home-subtitle{max-width:520px;color:var(--color-muted);margin:.75rem auto 0;font-size:1.05rem}.menu-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem;width:100%;display:grid}.menu-card{background:var(--color-surface);border:1px solid var(--color-card-border);border-radius:20px;flex-direction:column;justify-content:space-between;padding:1.6rem;transition:transform .25s cubic-bezier(.2,0,0,1),border-color .25s,box-shadow .25s;display:flex;position:relative;overflow:hidden}.menu-card:hover{border-color:#ffffff2e;transform:translateY(-4px);box-shadow:0 16px 36px #00000073}.menu-card-top{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.menu-icon-circle{border-radius:14px;justify-content:center;align-items:center;width:50px;height:50px;font-size:1.65rem;display:flex}.icon-circle--bot{background:#00e5c91f;border:1px solid #00e5c940}.icon-circle--local{background:#ff5e6c1f;border:1px solid #ff5e6c40}.icon-circle--online{background:#7952ec24;border:1px solid #7952ec4d}.icon-circle--quit{background:#ffffff0d;border:1px solid #ffffff1a}.menu-card-pill{letter-spacing:.08em;color:var(--color-muted);background:#ffffff0f;border-radius:999px;padding:.25rem .65rem;font-size:.7rem;font-weight:700}.menu-card-body{flex-direction:column;flex:1;margin-bottom:1.25rem;display:flex}.menu-card-title{color:var(--color-text);margin:0 0 .4rem;font-size:1.35rem;font-weight:700}.menu-card-desc{color:var(--color-muted);margin:0;font-size:.92rem;line-height:1.45}.difficulty-selector{flex-direction:column;gap:.4rem;margin-top:1rem;display:flex}.diff-label{color:var(--color-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.diff-buttons{gap:.4rem;display:flex}.diff-btn{color:var(--color-muted);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;flex:1;padding:.35rem .5rem;font-size:.78rem;font-weight:600;transition:all .15s}.diff-btn:hover{color:var(--color-text);background:#ffffff1a}.diff-btn--active{border-color:var(--color-o);color:var(--color-o);background:#00e5c92e;box-shadow:0 0 12px #00e5c940}.menu-action-btn{font-family:var(--font-body);cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;width:100%;padding:.75rem 1.25rem;font-size:.95rem;font-weight:700;transition:all .2s;display:flex}.btn-glow--teal{color:#061517;background:linear-gradient(135deg,#00e5c9,#00b4d8);box-shadow:0 4px 18px #00e5c94d}.btn-glow--teal:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 8px 24px #00e5c973}.btn-glow--coral{color:#1a0808;background:linear-gradient(135deg,#ff5e6c,#ff8c42);box-shadow:0 4px 18px #ff5e6c4d}.btn-glow--coral:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 8px 24px #ff5e6c73}.btn-glow--blue{color:#fff;background:linear-gradient(135deg,#7952ec,#4361ee);box-shadow:0 4px 18px #7952ec4d}.btn-glow--blue:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 8px 24px #7952ec73}.btn-ghost-quit{color:var(--color-muted);background:#ffffff0d;border:1px solid #ffffff1f}.btn-ghost-quit:hover{color:#ff6b6b;background:#ff3c3c1f;border-color:#ff3c3c59}.game-arena{grid-template-columns:minmax(240px,310px) 1fr minmax(240px,310px);justify-content:center;align-items:stretch;gap:2rem;width:100%;max-width:1300px;min-height:580px;margin:0 auto;display:grid}.player-panel{flex-direction:column;transition:all .3s;display:flex}.player-card{background:var(--color-surface);border:1px solid var(--color-card-border);box-sizing:border-box;border-radius:24px;flex-direction:column;flex:1;justify-content:space-between;align-items:center;padding:1.75rem 1.25rem 1.5rem;transition:border-color .3s,box-shadow .3s,transform .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 12px 32px #00000059}.player-panel--left.player-panel--active .player-card{border-color:var(--color-x);transform:translateY(-2px);box-shadow:0 0 32px #ff5e6c47,0 16px 40px #00000080}.player-panel--right.player-panel--active .player-card{border-color:var(--color-o);transform:translateY(-2px);box-shadow:0 0 32px #00e5c947,0 16px 40px #00000080}.player-panel--winner .player-card{animation:1.5s ease-in-out infinite alternate winner-glow}@keyframes winner-glow{0%{box-shadow:0 0 20px #ffd7004d}to{box-shadow:0 0 45px #ffd700b3}}.player-badge{align-items:center;gap:.5rem;display:flex}.player-tag{letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);background:#ffffff0d;border-radius:999px;padding:.2rem .6rem;font-size:.72rem;font-weight:700}.winner-pill{letter-spacing:.05em;color:#120d00;background:linear-gradient(135deg,gold,#ff9f1c);border-radius:999px;padding:.2rem .6rem;font-size:.72rem;font-weight:800;animation:.3s ease-out pop-in}.player-avatar-wrapper{margin:1.25rem 0 .75rem}.player-avatar{border:2px solid var(--color-card-border);background:#ffffff0a;border-radius:50%;justify-content:center;align-items:center;width:96px;height:96px;transition:all .3s;display:flex;position:relative}.avatar-icon{-webkit-user-select:none;user-select:none;font-size:2.75rem}.player-symbol-bubble{width:34px;height:34px;font-family:var(--font-display);border:2px solid var(--color-surface);border-radius:50%;justify-content:center;align-items:center;font-size:1.15rem;font-weight:800;display:flex;position:absolute;bottom:-4px;right:-4px;box-shadow:0 4px 10px #00000080}.symbol--x{background:var(--color-x);color:#120404}.symbol--o{background:var(--color-o);color:#021412}.player-identity{text-align:center;margin-bottom:.75rem}.player-name{color:var(--color-text);letter-spacing:-.01em;margin:0;font-size:1.45rem;font-weight:700}.player-details{color:var(--color-muted);margin:.25rem 0 0;font-size:.82rem}.player-score-box{background:#ffffff08;border:1px solid #ffffff0d;border-radius:14px;flex-direction:column;align-items:center;width:85%;margin-bottom:1.5rem;padding:.75rem 1rem;display:flex}.player-score-label{letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);font-size:.72rem;font-weight:700}.player-score-value{font-family:var(--font-display);color:var(--color-text);font-size:2.25rem;font-weight:800;line-height:1.1}.player-turn-widget{width:100%}.turn-switch{-webkit-user-select:none;user-select:none;border:1px solid #0000;border-radius:14px;justify-content:center;align-items:center;gap:.75rem;padding:.85rem 1rem;transition:all .3s;display:flex}.turn-switch-track{box-sizing:border-box;background:#252538;border-radius:999px;align-items:center;width:44px;height:24px;padding:2px;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative}.turn-switch-thumb{background:#606078;border-radius:50%;width:20px;height:20px;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 4px #0000004d}.turn-switch-info{align-items:center;gap:.5rem;display:flex}.turn-indicator-dot{background:#505068;border-radius:50%;width:8px;height:8px;transition:all .25s}.turn-label{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;font-size:.88rem;font-weight:800;transition:all .25s}.turn-switch--on{background:#ffffff0f}.player--x .turn-switch--on{background:#ff5e6c1f;border-color:#ff5e6c66;box-shadow:0 0 20px #ff5e6c33}.player--x .turn-switch--on .turn-switch-track{background:var(--color-x)}.player--x .turn-switch--on .turn-switch-thumb{background:#fff;transform:translate(20px);box-shadow:0 0 10px #fffc}.player--x .turn-switch--on .turn-indicator-dot{background:var(--color-x);box-shadow:0 0 10px var(--color-x);animation:1s ease-in-out infinite alternate dot-pulse}.player--x .turn-switch--on .turn-label{color:var(--color-x);text-shadow:0 0 12px var(--color-x-glow)}.player--o .turn-switch--on{background:#00e5c91f;border-color:#00e5c966;box-shadow:0 0 20px #00e5c933}.player--o .turn-switch--on .turn-switch-track{background:var(--color-o)}.player--o .turn-switch--on .turn-switch-thumb{background:#fff;transform:translate(20px);box-shadow:0 0 10px #fffc}.player--o .turn-switch--on .turn-indicator-dot{background:var(--color-o);box-shadow:0 0 10px var(--color-o);animation:1s ease-in-out infinite alternate dot-pulse}.player--o .turn-switch--on .turn-label{color:var(--color-o);text-shadow:0 0 12px var(--color-o-glow)}.turn-switch--off{opacity:.55;background:#00000026;border-color:#ffffff0a}.turn-switch--off .turn-switch-thumb{transform:translate(0)}.turn-switch--off .turn-label{color:var(--color-muted)}@keyframes dot-pulse{0%{opacity:.7;transform:scale(.9)}to{opacity:1;transform:scale(1.3)}}.game-center{flex-direction:column;justify-content:center;align-items:center;gap:1.25rem;width:100%;display:flex}.turn-banner{background:var(--color-surface);border:1px solid var(--color-card-border);font-family:var(--font-display);color:var(--color-text);text-align:center;border-radius:999px;align-items:center;gap:.6rem;padding:.6rem 1.4rem;font-size:1.05rem;font-weight:700;transition:all .25s;display:flex;box-shadow:0 4px 18px #00000040}.turn-banner--x{color:var(--color-x);border-color:#ff5e6c80;box-shadow:0 0 24px #ff5e6c40}.turn-banner--o{color:var(--color-o);border-color:#00e5c980;box-shadow:0 0 24px #00e5c940}.turn-banner--gameover:not(.turn-banner--x):not(.turn-banner--o){color:#ffca3a;border-color:#ffffff26}.match-stats-bar{color:var(--color-muted);align-items:center;gap:.75rem;font-size:.85rem;display:flex}.stat-item strong{color:var(--color-text)}.stat-separator{opacity:.3}.board-wrapper{justify-content:center;align-items:center;width:100%;max-width:440px;display:flex}.board{aspect-ratio:1;background:var(--color-surface);border:1px solid var(--color-card-border);box-sizing:border-box;border-radius:24px;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:12px;width:100%;padding:16px;display:grid;box-shadow:0 24px 60px #00000080,inset 0 1px #ffffff0f}.square{aspect-ratio:1;background:var(--color-cell);cursor:pointer;box-sizing:border-box;border:none;border-radius:16px;justify-content:center;align-items:center;width:100%;min-width:0;height:100%;min-height:0;margin:0;padding:0;transition:background .18s,transform .12s,box-shadow .18s;display:flex;position:relative;overflow:hidden}.square--empty:not(:disabled):hover{background:var(--color-cell-hover);transform:scale(1.03);box-shadow:0 6px 16px #0000004d}.square--empty:not(:disabled):active{transform:scale(.97)}.square:disabled{cursor:default}.mark{-webkit-user-select:none;user-select:none;pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.mark-svg{width:60%;max-width:68px;height:60%;max-height:68px;animation:.22s cubic-bezier(.34,1.56,.64,1) mark-pop}.mark-svg--x{color:var(--color-x);filter:drop-shadow(0 0 10px var(--color-x-glow))}.mark-svg--o{color:var(--color-o);filter:drop-shadow(0 0 10px var(--color-o-glow))}@keyframes mark-pop{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}.square--winning{animation:.8s ease-in-out infinite alternate pulse-winning-cell}.square--winning.square--x{background:#ff5e6c38;box-shadow:0 0 28px #ff5e6c73}.square--winning.square--o{background:#00e5c938;box-shadow:0 0 28px #00e5c973}@keyframes pulse-winning-cell{0%{transform:scale(1)}to{transform:scale(1.04)}}.arena-actions{align-items:center;gap:.75rem;display:flex}.btn{font-family:var(--font-body);border:1px solid var(--color-card-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;border-radius:999px;padding:.7rem 1.4rem;font-size:.92rem;font-weight:700;transition:all .18s}.btn--icon{justify-content:center;align-items:center;gap:.5rem;display:inline-flex}.btn--icon svg{flex-shrink:0}.btn:hover{background:var(--color-cell-hover);border-color:#fff3;transform:translateY(-1px)}.btn:active{transform:scale(.98)}.btn--primary{background:linear-gradient(135deg, var(--color-x), var(--color-o));color:#0c0915;border-color:#0000;box-shadow:0 4px 18px #00e5c940}.btn--primary:hover{filter:brightness(1.1);box-shadow:0 6px 24px #00e5c966}.btn--secondary{background:#ffffff14;border-color:#ffffff26}.btn--ghost{color:var(--color-muted);background:0 0;border-color:#0000}.btn--ghost:hover{color:var(--color-text);background:#ffffff0d}.btn--danger{color:#fff;background:#ff4757;border-color:#ff4757}.btn--danger:hover{background:#ff6b81}.online-lobby-wrapper{width:100%;max-width:640px;margin:0 auto}.lobby-card{background:var(--color-surface);border:1px solid var(--color-card-border);border-radius:24px;padding:2.25rem 2rem;box-shadow:0 20px 50px #00000073}.lobby-header{text-align:center;margin-bottom:1.5rem;position:relative}.btn-back{color:var(--color-muted);cursor:pointer;background:0 0;border:none;padding:0;font-size:.85rem;font-weight:600;position:absolute;top:0;left:0}.btn-back:hover{color:var(--color-text)}.lobby-tag{letter-spacing:.1em;color:#c4b5fd;background:#7952ec26;border-radius:999px;margin-bottom:.5rem;padding:.25rem .65rem;font-size:.72rem;font-weight:700;display:inline-block}.lobby-title{margin:0 0 .25rem;font-size:2rem;font-weight:800}.lobby-desc{color:var(--color-muted);margin:0;font-size:.95rem}.lobby-tabs{background:#00000040;border-radius:14px;gap:.5rem;margin-bottom:1.75rem;padding:.35rem;display:flex}.lobby-tab{color:var(--color-muted);cursor:pointer;background:0 0;border:none;border-radius:10px;flex:1;padding:.65rem;font-size:.9rem;font-weight:700;transition:all .2s}.lobby-tab--active{background:var(--color-cell-hover);color:var(--color-text);box-shadow:0 4px 12px #0003}.server-status{color:var(--color-muted);align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.85rem;display:flex}.status-ping-dot{background:#2ed573;border-radius:50%;width:8px;height:8px;box-shadow:0 0 8px #2ed573}.quick-start-box{text-align:center;flex-direction:column;align-items:center;padding:1.5rem 1rem;display:flex}.quick-info{color:var(--color-muted);margin-bottom:1.5rem;font-size:.92rem}.btn-large{padding:.9rem 2.2rem;font-size:1.05rem}.searching-indicator{flex-direction:column;align-items:center;padding:2rem 1rem;display:flex}.radar-spinner{border:3px solid #00e5c933;border-top-color:var(--color-o);border-radius:50%;width:64px;height:64px;margin-bottom:1.25rem;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.searching-title{margin:0;font-size:1.25rem;font-weight:700}.searching-timer{color:var(--color-muted);margin:.25rem 0;font-size:.9rem}.searching-hint{color:#7952ec;font-size:.8rem}.room-box{flex-direction:column;gap:1.5rem;display:flex}.room-section{text-align:center;flex-direction:column;align-items:center;display:flex}.room-section h3{margin:0 0 .75rem;font-size:1.05rem}.room-divider{text-align:center;color:var(--color-muted);letter-spacing:.1em;align-items:center;font-size:.8rem;font-weight:700;display:flex}.room-divider:before,.room-divider:after{content:"";border-bottom:1px solid var(--color-card-border);flex:1}.room-divider:not(:empty):before{margin-right:1em}.room-divider:not(:empty):after{margin-left:1em}.code-display{letter-spacing:.15em;border:1px dashed var(--color-o);color:var(--color-o);background:#0006;border-radius:12px;padding:.75rem 1.5rem;font-family:monospace;font-size:1.75rem;font-weight:800}.join-input-group{gap:.5rem;width:100%;max-width:360px;display:flex}.room-input{border:1px solid var(--color-card-border);color:var(--color-text);background:#0000004d;border-radius:12px;outline:none;flex:1;padding:.7rem 1rem;font-family:inherit;font-size:.95rem}.room-input:focus{border-color:var(--color-o)}.host-actions-row{justify-content:center;display:flex}.network-status-box{background:#00000059;border:1px solid #ffffff14;border-radius:12px;align-items:center;gap:.65rem;padding:.75rem 1rem;font-size:.88rem;display:flex}.network-status-text{color:var(--color-text);font-weight:600}.modal-backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;background:#000000bf;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.modal-card{background:var(--color-surface);border:1px solid var(--color-card-border);text-align:center;border-radius:24px;width:100%;max-width:440px;padding:2.5rem 2rem;animation:.25s cubic-bezier(.34,1.56,.64,1) pop-in;box-shadow:0 24px 60px #0009}.modal-icon-badge{margin-bottom:.5rem;font-size:2.75rem}.modal-title{margin:0 0 .5rem;font-size:1.6rem;font-weight:800}.modal-desc{color:var(--color-muted);margin:0 0 1.75rem;font-size:.95rem;line-height:1.5}.modal-actions{flex-direction:column;gap:.75rem;display:flex}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}@media (width<=960px){.game-arena{grid-template-columns:1fr;gap:1.5rem}.player-panel{width:100%;max-width:500px;margin:0 auto}.player-card{flex-flow:wrap;align-items:center;gap:1rem;padding:1.25rem 1.5rem}.player-badge{justify-content:space-between;width:100%}.player-avatar-wrapper{margin:0}.player-avatar{width:64px;height:64px}.avatar-icon{font-size:1.8rem}.player-identity{text-align:left;flex:1;margin-bottom:0}.player-score-box{width:auto;margin-bottom:0;padding:.4rem .8rem}.player-score-value{font-size:1.5rem}.player-turn-widget{width:100%;margin-top:.5rem}.menu-grid{grid-template-columns:1fr}}@media (width<=520px){.app-header{padding:.85rem 1rem}.app-main{padding:1rem .75rem 2rem}.board{gap:8px;padding:10px}.square{border-radius:12px}}.install-app-wrapper{display:inline-flex;position:relative}.install-app-btn-group{background:#ffffff0f;border:1px solid #00e5c959;border-radius:999px;align-items:center;transition:all .2s;display:inline-flex;overflow:hidden;box-shadow:0 0 12px #00e5c91f}.install-app-btn-group:hover{background:#ffffff1a;border-color:#00e5c9b3;box-shadow:0 0 18px #00e5c940}.btn-install-primary{color:#00e5c9;font-family:var(--font-body);letter-spacing:.02em;cursor:pointer;white-space:nowrap;background:0 0;border:none;align-items:center;gap:.45rem;padding:.42rem .75rem .42rem .85rem;font-size:.8rem;font-weight:700;transition:color .15s;display:inline-flex}.btn-install-primary:hover{color:#fff}.install-icon{stroke:currentColor;flex-shrink:0}.btn-install-dropdown-toggle{color:#00e5c9;cursor:pointer;background:0 0;border:none;border-left:1px solid #00e5c940;justify-content:center;align-items:center;padding:.42rem .55rem;transition:all .15s;display:inline-flex}.btn-install-dropdown-toggle:hover,.btn-install-dropdown-toggle.is-active{color:#fff;background:#00e5c92e}.install-dropdown-menu{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:1000;background:#121424f2;border:1px solid #ffffff26;border-radius:14px;flex-direction:column;gap:.25rem;width:280px;padding:.5rem;animation:.15s ease-out dropdownFade;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 16px 40px #0000008c,0 0 20px #00e5c926}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.install-dropdown-header{text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted);padding:.4rem .6rem .25rem;font-size:.7rem;font-weight:700}.install-dropdown-item{text-align:left;cursor:pointer;color:var(--color-text);font-family:var(--font-body);background:0 0;border:1px solid #0000;border-radius:10px;align-items:center;gap:.65rem;padding:.5rem .65rem;transition:all .15s;display:flex}.install-dropdown-item:hover{background:#ffffff14;border-color:#ffffff1a;transform:translate(2px)}.dropdown-item-icon{flex-shrink:0;font-size:1.25rem}.dropdown-item-info{flex-direction:column;flex:1;min-width:0;display:flex}.dropdown-item-title{color:var(--color-text);font-size:.85rem;font-weight:600}.dropdown-item-desc{color:var(--color-muted);font-size:.72rem}.dropdown-detected-pill{color:#00e5c9;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;background:#00e5c91f;border:1px solid #00e5c94d;border-radius:999px;padding:.15rem .45rem;font-size:.65rem;font-weight:700}.mobile-tip-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2000;background:#06070fcc;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.mobile-tip-modal{background:#141624;border:1px solid #ffffff26;border-radius:18px;width:100%;max-width:380px;padding:1.5rem;animation:.2s cubic-bezier(.16,1,.3,1) modalScale;box-shadow:0 20px 50px #0009}@keyframes modalScale{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.mobile-tip-header{align-items:center;gap:.6rem;margin-bottom:.6rem;display:flex}.mobile-tip-header h3{flex:1;margin:0;font-size:1.15rem;font-weight:700}.mobile-tip-close{color:var(--color-muted);cursor:pointer;background:0 0;border:none;padding:.25rem;font-size:1rem}.mobile-tip-close:hover{color:#fff}.mobile-tip-subtitle{color:var(--color-muted);margin-bottom:1rem;font-size:.85rem;line-height:1.4}.mobile-tip-steps{color:var(--color-text);flex-direction:column;gap:.65rem;margin:0;padding-left:1.25rem;font-size:.85rem;line-height:1.5;display:flex}.install-toast{color:#fff;z-index:3000;background:#121424f2;border:1px solid #00e5c966;border-radius:12px;align-items:center;gap:.6rem;padding:.75rem 1.25rem;font-size:.85rem;font-weight:600;animation:.25s cubic-bezier(.16,1,.3,1) toastSlide;display:flex;position:fixed;bottom:2rem;right:2rem;box-shadow:0 12px 30px #00000080,0 0 20px #00e5c933}.toast-dot{background:#00e5c9;border-radius:50%;flex-shrink:0;width:8px;height:8px;box-shadow:0 0 10px #00e5c9}@keyframes toastSlide{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}