:root{--fb-secondary-bg:#f1f2f6;--fb-section-bg:#fff;--fb-text:#0f1419;--fb-hint:#868b94;--fb-link:#2481cc;--fb-button:#2481cc;--fb-button-text:#fff;--fb-destructive:#e5484d;--bg:var(--tg-theme-secondary-bg-color,var(--fb-secondary-bg));--card:var(--tg-theme-section-bg-color,var(--tg-theme-bg-color,var(--fb-section-bg)));--text:var(--tg-theme-text-color,var(--fb-text));--hint:var(--tg-theme-hint-color,var(--fb-hint));--accent:var(--tg-theme-button-color,var(--fb-button));--accent-text:var(--tg-theme-button-text-color,var(--fb-button-text));--danger:var(--tg-theme-destructive-text-color,var(--fb-destructive));--x:#ff5a5f;--o:#3b82f6;--good:#2fb344;--warn:#f08c00;--radius:18px;--c4-board:#2f6fed;--c4-p0:#ff4d57;--c4-p1:#ffc62e;--bs-water:#dcebfb;--bs-line:#2f6fed33;--bs-ship:#5c6f89;--bs-hit:#ff4d57;--bs-miss:#7f9cc0}@media (prefers-color-scheme:dark){:root{--fb-secondary-bg:#0f1013;--fb-section-bg:#1c1d22;--fb-text:#f1f3f5;--fb-hint:#8b8f99;--fb-link:#5eaeff;--fb-button:#3e8ef7;--x:#ff6b6f;--o:#4d94ff;--c4-board:#2558d6;--bs-water:#14283f;--bs-line:#78aaff24;--bs-ship:#8ea3c0;--bs-miss:#5f7ea6}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}body{min-height:var(--tg-viewport-stable-height,100vh);overscroll-behavior:none;-webkit-user-select:none;user-select:none}button{font:inherit;color:inherit}h1,h2,p{margin:0}.mono{letter-spacing:.06em;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}.screen{max-width:480px;padding:16px 16px calc(24px + env(safe-area-inset-bottom));margin:0 auto}.btn{background:var(--accent);color:var(--accent-text);cursor:pointer;border:none;border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:13px 18px;font-size:16px;font-weight:600;transition:transform .1s,opacity .2s;display:inline-flex}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.5;cursor:default}.btn.wide{width:100%}.btn.small{border-radius:10px;padding:8px 14px;font-size:14px}.btn.secondary{background:var(--bg);background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent)}.btn.pulse{animation:1.4s ease-in-out infinite pulse}.icon-btn{background:var(--card);cursor:pointer;border:none;border-radius:50%;place-items:center;width:36px;height:36px;display:grid}.avatar{color:#fff;object-fit:cover;border-radius:50%;flex-shrink:0;place-items:center;font-weight:700;display:grid}.avatar.placeholder{border:2px dashed var(--hint);opacity:.5;width:44px;height:44px}.banner{border-radius:14px;margin:12px 0;padding:12px 14px;font-size:14px;line-height:1.35;overflow:hidden}.banner.error{background:var(--card);background:color-mix(in srgb, var(--danger) 14%, var(--card));color:var(--danger)}.banner.warn{background:var(--card);background:color-mix(in srgb, var(--warn) 18%, var(--card))}.banner.resume{background:var(--card);justify-content:space-between;align-items:center;gap:12px;display:flex}.hint{color:var(--hint);font-size:14px;line-height:1.4}.hint.accent{color:var(--accent);font-weight:600}.panel{border-radius:var(--radius);background:var(--card);text-align:center;flex-direction:column;align-items:center;gap:10px;margin-top:16px;padding:20px 16px;display:flex}.toast{left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:10;color:#fff;text-align:center;pointer-events:none;background:#141418eb;border-radius:12px;max-width:90vw;padding:10px 16px;font-size:14px;position:fixed}.center-screen{min-height:var(--tg-viewport-stable-height,100vh);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex}.error-text{max-width:320px;line-height:1.4}.spinner{border:3.5px solid var(--card);border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}.home-header{align-items:center;gap:12px;display:flex}.home-hello{flex:1;min-width:0}.home-hello h1{text-overflow:ellipsis;white-space:nowrap;font-size:20px;font-weight:700;overflow:hidden}.home-hello p{color:var(--hint);margin-top:2px;font-size:14px}.lang-picker{background:var(--card);cursor:pointer;border-radius:999px;align-items:center;gap:5px;padding:7px 11px;font-size:13px;font-weight:700;display:inline-flex;position:relative}.lang-picker select{opacity:0;cursor:pointer;width:100%;position:absolute;inset:0}.section-title{color:var(--hint);letter-spacing:.06em;text-transform:uppercase;margin:22px 4px 10px;font-size:13px;font-weight:600}.game-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.game-card{border-radius:var(--radius);background:var(--card);text-align:left;cursor:pointer;border:none;flex-direction:column;align-items:flex-start;gap:4px;min-height:178px;padding:14px;display:flex}.game-card:disabled{cursor:default}.game-card.soon{opacity:.55}.game-icon{border-radius:16px;place-items:center;width:58px;height:58px;margin-bottom:8px;display:grid;box-shadow:0 6px 16px -6px #00000059}.game-name{font-size:16px;font-weight:700}.game-desc{color:var(--hint);flex:1;font-size:13px;line-height:1.3}.game-meta{color:var(--hint);flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:8px;font-size:12px;display:flex}.meta-players{align-items:center;gap:3px;display:inline-flex}.badge{background:var(--bg);border-radius:999px;padding:3px 9px;font-weight:600}.join-form{border-radius:var(--radius);background:var(--card);margin-top:16px;padding:14px}.join-form label{font-size:14px;font-weight:600}.join-row{gap:8px;margin-top:10px;display:flex}.join-row input{background:var(--bg);min-width:0;color:var(--text);text-transform:uppercase;-webkit-user-select:text;user-select:text;border:1.5px solid #0000;border-radius:14px;outline:none;flex:1;padding:12px 14px;font-size:18px}.join-row input::placeholder{color:var(--hint);letter-spacing:normal;text-transform:none;font-family:system-ui,sans-serif;font-size:16px}.join-row input:focus{border-color:var(--accent)}.room-header{align-items:center;gap:10px;display:flex}.room-header h1{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:19px;font-weight:700;overflow:hidden}.code-chip{background:var(--card);cursor:pointer;border:none;border-radius:999px;align-items:center;gap:6px;padding:7px 12px;font-size:14px;font-weight:700;display:inline-flex}.scoreboard{border-radius:var(--radius);background:var(--card);grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:14px 0 6px;padding:14px 8px;display:grid}.score{letter-spacing:.02em;font-size:28px;font-weight:800}.player-card{flex-direction:column;align-items:center;gap:6px;min-width:0;transition:opacity .3s;display:flex}.player-card.offline,.player-card.empty{opacity:.5}.player-avatar{border:2.5px solid #0000;border-radius:50%;padding:3px;transition:border-color .25s,box-shadow .25s;position:relative}.player-card.active .player-avatar{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent)}.player-mark{background:var(--card);border-radius:50%;place-items:center;width:26px;height:26px;display:grid;position:absolute;bottom:-5px;right:-5px;box-shadow:0 1px 4px #0003}.offline-dot{border:2px solid var(--card);background:var(--warn);border-radius:50%;width:12px;height:12px;position:absolute;top:1px;right:1px}.player-name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:14px;font-weight:600;overflow:hidden}.status-line{text-align:center;min-height:24px;margin:14px 0;font-size:17px;font-weight:700}.status-line.mine{color:var(--accent)}.status-line.good{color:var(--good)}.status-line.bad{color:var(--danger)}.status-line.warn{color:var(--warn)}.board-wrap{justify-content:center;display:flex}.lobby h2{align-items:baseline;margin-top:4px;font-size:18px;display:inline-flex}.big-code{background:var(--bg);letter-spacing:.18em;border-radius:14px;padding:8px 18px;font-size:34px;font-weight:800}.dots i{background:currentColor;border-radius:50%;width:5px;height:5px;margin-left:3px;animation:1.2s infinite blink;display:inline-block}.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}.xox-board{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,360px);display:grid}.xox-cell{aspect-ratio:1;background:var(--card);border:none;border-radius:20px;min-width:0;padding:0;transition:background .25s,opacity .35s,transform .1s;position:relative}.xox-cell.playable{cursor:pointer}.xox-cell.playable:active{transform:scale(.95)}.xox-cell.win{background:color-mix(in srgb, var(--good) 22%, var(--card))}.xox-cell.dim{opacity:.4}.xox-mark{position:absolute;inset:14%}.xox-mark svg{display:block}.c4-board{background:var(--c4-board);border-radius:20px;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;width:min(100%,400px);padding:8px;display:grid;overflow:hidden;box-shadow:inset 0 -5px #0000002e}.c4-col{background:0 0;border:none;border-radius:12px;flex-direction:column;gap:4px;min-width:0;padding:0;transition:background .15s;display:flex}.c4-col.playable{cursor:pointer}.c4-col.playable:active{background:#ffffff24}.c4-cell{aspect-ratio:1;background:var(--card);border-radius:50%;position:relative;box-shadow:inset 0 3px 5px #00000047}.c4-disc{border-radius:50%;transition:opacity .3s;position:absolute;inset:0;box-shadow:inset 0 -3px #0003}.c4-disc.p0{background:var(--c4-p0)}.c4-disc.p1{background:var(--c4-p1)}.c4-disc.pending{opacity:.5}.c4-disc.last:after,.c4-disc.win:after{content:"";border-radius:50%;position:absolute}.c4-disc.last:after{background:#ffffffbf;inset:38%}.c4-disc.win:after{border:3px solid #fffffff2;animation:.9s ease-in-out .45s 3 both ring;inset:18%}.c4-board.finished .c4-disc.dim{opacity:.35;transition-delay:.45s}.c4-mark{border-radius:50%;width:16px;height:16px;display:block;box-shadow:inset 0 -2px #0003}.c4-mark.p0{background:var(--c4-p0)}.c4-mark.p1{background:var(--c4-p1)}.bs{flex-direction:column;align-items:center;gap:10px;width:min(100%,360px);display:flex}.bs-label{color:var(--hint);letter-spacing:.02em;justify-content:space-between;align-self:stretch;padding:0 4px;font-size:13px;font-weight:700;display:flex}.bs-label.small{align-self:center;gap:12px;width:58%;margin-top:4px}.bs-grid{aspect-ratio:1;background:var(--bs-water);border-radius:14px;grid-template-columns:repeat(8,minmax(0,1fr));width:100%;transition:box-shadow .25s;display:grid;position:relative;overflow:hidden}.bs-grid.small{border-radius:10px;width:58%}.bs-grid.active{box-shadow:0 0 0 3px var(--accent)}.bs-cell{aspect-ratio:1;min-width:0;box-shadow:inset 0 0 0 .5px var(--bs-line);background:0 0;border:none;padding:0}.bs-cell.enabled{cursor:pointer}.bs-cell.enabled:active{background:#ffffff59}.bs-ship{z-index:1;pointer-events:none;position:absolute}.bs-ship:before{content:"";background:var(--bs-ship);border-radius:999px;transition:background .2s,box-shadow .2s;position:absolute;inset:3px}.bs-grid.small .bs-ship:before{inset:1.5px}.bs-ship.selected:before{background:var(--accent);box-shadow:0 0 0 2px var(--card)}.bs-ship.sunk:before{background:color-mix(in srgb, var(--bs-hit) 45%, var(--bs-ship))}.bs-ship.revealed:before{border:2px dashed var(--bs-ship);background:0 0}.bs-mark{z-index:2;pointer-events:none;place-items:center;width:12.5%;height:12.5%;animation:.25s ease-out pop;display:grid;position:absolute}.bs-mark:after{content:"";border-radius:50%}.bs-mark.miss:after{background:var(--bs-miss);width:22%;height:22%}.bs-mark.hit:after{background:var(--bs-hit);width:46%;height:46%;box-shadow:0 0 8px var(--bs-hit)}.bs-mark.last:before{content:"";border:2px solid var(--bs-miss);border-radius:50%;animation:1s ease-out 2 ripple;position:absolute;inset:8%}.bs-mark.hit.last:before{border-color:var(--bs-hit)}.bs-mark.pending:after{border:2.5px solid var(--accent);width:58%;height:58%;animation:1s ease-in-out infinite breathe}.bs-caption{text-align:center;min-height:22px;font-size:15px;font-weight:700}.bs-caption.good{color:var(--good)}.bs-caption.bad{color:var(--danger)}.bs-hint{min-height:38px;color:var(--hint);text-align:center;margin:0;font-size:13px;line-height:1.4}.bs-hint.error{color:var(--danger)}.bs-actions{grid-template-columns:1fr 1fr;gap:10px;width:100%;display:grid}.rps{flex-direction:column;gap:14px;width:min(100%,380px);display:flex}.rps-arena{border-radius:var(--radius);background:var(--card);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;padding:20px 8px 16px;display:grid}.rps-side{flex-direction:column;align-items:center;gap:8px;min-width:0;display:flex}.rps-hand{place-items:center;height:84px;font-size:66px;line-height:1;transition:opacity .3s;display:grid;position:relative}.rps-hand.ready{opacity:.55}.rps-hand.win{filter:drop-shadow(0 0 14px color-mix(in srgb, var(--good) 70%, transparent))}.rps-hand.lose{opacity:.35}.rps-unknown{border:2.5px dashed var(--hint);width:66px;height:66px;color:var(--hint);border-radius:50%;place-items:center;font-size:28px;font-weight:700;display:grid}.rps-unknown.thinking{animation:1.6s ease-in-out infinite breathe}.rps-ready-badge{background:var(--good);color:#fff;border-radius:50%;place-items:center;width:24px;height:24px;font-size:13px;font-weight:800;display:grid;position:absolute;bottom:4px;right:-8px}.rps-vs{color:var(--hint);letter-spacing:.08em;padding:0 6px;font-size:13px;font-weight:800}.rps-label{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:13px;font-weight:600;overflow:hidden}.rps-pips{gap:6px;display:flex}.rps-pip{border:2px solid var(--hint);opacity:.5;border-radius:50%;width:11px;height:11px;transition:background .3s,border-color .3s,opacity .3s}.rps-pip.on{border-color:var(--accent);background:var(--accent);opacity:1}.rps-caption{text-align:center;min-height:22px;font-size:15px;font-weight:700}.rps-caption.good{color:var(--good)}.rps-caption.bad{color:var(--danger)}.rps-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.rps-choice{background:var(--card);cursor:pointer;border:none;border-radius:18px;flex-direction:column;align-items:center;gap:6px;padding:14px 4px 12px;font-size:13px;font-weight:600;transition:opacity .2s,box-shadow .2s,background .2s;display:flex}.rps-choice:disabled{cursor:default}.rps-choice:disabled:not(.selected){opacity:.45}.rps-choice.selected{background:color-mix(in srgb, var(--accent) 12%, var(--card));box-shadow:inset 0 0 0 2.5px var(--accent)}.rps-emoji{font-size:40px;line-height:1}.rps-mark{color:var(--good);font-size:15px;font-weight:800}@keyframes spin{to{transform:rotate(360deg)}}@keyframes blink{0%,80%,to{opacity:.2}40%{opacity:1}}@keyframes pop{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes ripple{0%{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.7)}}@keyframes ring{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.18)}}@keyframes breathe{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}@keyframes pulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent)}50%{box-shadow:0 0 0 8px #0000}}