:root{color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;line-height:1.5;--action-button-size: clamp(88px, 17vw, 120px);--game-symbol-size: clamp(4rem, 23vw, 9rem);text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{height:100%;min-height:100%;margin:0;width:100%}body{background:inherit}button{-webkit-tap-highlight-color:transparent;border:0;color:inherit;font:inherit}.app-shell{align-items:center;background:var(--app-background);display:flex;height:100dvh;min-height:100dvh;overflow-x:hidden;padding:max(122px,calc(env(safe-area-inset-top) + 104px)) 18px max(30px,calc(env(safe-area-inset-bottom) + 22px));position:relative;width:100%}.app-shell:before{background:var(--app-background);content:"";top:-2px;right:-2px;bottom:-2px;left:-2px;pointer-events:none;position:fixed;z-index:0}.app-shell:after{background:var(--background-texture, none);content:"";top:-2px;right:-2px;bottom:-2px;left:-2px;opacity:var(--texture-opacity, 1);pointer-events:none;position:fixed;z-index:0}.theme-classic{background:#a75df0;--modal-surface: rgba(255, 235, 249, .88);--modal-border: rgba(255, 255, 255, .34);--modal-shadow: rgba(118, 40, 105, .34);--tile-surface: rgba(255, 255, 255, .52);--board-surface: rgba(255, 255, 255, .16);--cell-surface: rgba(255, 255, 255, .42);--app-background: radial-gradient(circle at 18% 14%, rgba(255, 255, 255, .24), transparent 20%), radial-gradient(circle at 82% 18%, rgba(255, 180, 218, .28), transparent 22%), radial-gradient(circle at 52% 88%, rgba(255, 94, 139, .24), transparent 26%), linear-gradient(145deg, #7f8df0 0%, #a75df0 44%, #f05b9d 100%);--background-texture: radial-gradient(circle, rgba(255, 255, 255, .28) 0 2px, transparent 2.8px) 12px 18px / 68px 58px, radial-gradient(ellipse at center, rgba(255, 101, 148, .34) 0 3px, transparent 4px) 40px 38px / 92px 82px, linear-gradient(135deg, transparent 0 46%, rgba(255, 255, 255, .08) 47% 53%, transparent 54% 100%) 0 0 / 54px 54px;--texture-opacity: .46}.theme-space{background:#101044;--modal-surface: rgba(29, 18, 76, .84);--modal-border: rgba(198, 202, 255, .26);--modal-shadow: rgba(9, 8, 42, .42);--tile-surface: rgba(255, 255, 255, .1);--board-surface: rgba(255, 255, 255, .1);--cell-surface: rgba(255, 255, 255, .36);--app-background: radial-gradient(circle at 72% 14%, rgba(255, 255, 255, .2), transparent 5%), radial-gradient(circle at 18% 24%, rgba(113, 215, 255, .22), transparent 18%), radial-gradient(circle at 78% 78%, rgba(255, 79, 158, .24), transparent 22%), linear-gradient(155deg, #101044 0%, #32136d 48%, #751b78 100%);--background-texture: radial-gradient(circle, rgba(255, 255, 255, .95) 0 1px, transparent 1.4px) 8px 18px / 58px 58px, radial-gradient(circle, rgba(255, 255, 255, .72) 0 1px, transparent 1.4px) 32px 4px / 86px 86px, radial-gradient(circle, rgba(130, 227, 255, .72) 0 1.2px, transparent 1.7px) 14px 34px / 112px 112px;--texture-opacity: .72}.theme-garden{background:#4cbd8d;--modal-surface: rgba(225, 255, 236, .88);--modal-border: rgba(255, 255, 255, .34);--modal-shadow: rgba(19, 90, 66, .34);--tile-surface: rgba(255, 255, 255, .46);--board-surface: rgba(255, 255, 255, .14);--cell-surface: rgba(255, 255, 255, .4);--app-background: radial-gradient(circle at 16% 18%, rgba(255, 255, 255, .18), transparent 18%), radial-gradient(circle at 82% 20%, rgba(255, 234, 149, .2), transparent 20%), linear-gradient(145deg, #2fa778 0%, #4cbd8d 42%, #d85ca5 100%);--background-texture: radial-gradient(circle, rgba(255, 238, 150, .9) 0 2px, transparent 2.8px) 13px 18px / 74px 62px, radial-gradient(circle, rgba(255, 142, 196, .78) 0 2.4px, transparent 3.2px) 42px 45px / 88px 76px, radial-gradient(ellipse at center, rgba(18, 113, 70, .24) 0 2px, transparent 2.6px) 4px 0 / 24px 18px;--texture-opacity: .5}.theme-sunset{background:#d95a95;--modal-surface: rgba(255, 226, 219, .88);--modal-border: rgba(255, 255, 255, .34);--modal-shadow: rgba(92, 39, 94, .38);--tile-surface: rgba(255, 255, 255, .46);--board-surface: rgba(255, 255, 255, .14);--cell-surface: rgba(255, 255, 255, .4);--app-background: radial-gradient(circle at 20% 18%, rgba(255, 250, 187, .78), transparent 12%), radial-gradient(circle at 20% 18%, rgba(255, 180, 82, .36), transparent 26%), radial-gradient(circle at 82% 17%, rgba(235, 238, 255, .32), transparent 10%), radial-gradient(circle at 80% 22%, rgba(108, 121, 255, .2), transparent 24%), linear-gradient(180deg, transparent 0%, transparent 48%, rgba(255, 105, 96, .28) 74%, rgba(235, 67, 146, .32) 100%), linear-gradient(135deg, transparent 0%, transparent 52%, rgba(19, 24, 82, .52) 100%), linear-gradient(90deg, #ffd36e 0%, #ff9569 33%, #e25c9d 50%, #48309f 72%, #141a54 100%);--background-texture: radial-gradient(circle, rgba(255, 255, 255, .82) 0 1px, transparent 1.5px) 82% 16% / 64px 64px, radial-gradient(circle, rgba(255, 255, 255, .46) 0 1px, transparent 1.5px) 94% 38% / 88px 88px, linear-gradient(90deg, rgba(255, 255, 255, .16), transparent 34%, rgba(255, 255, 255, .08) 50%, transparent 66%, rgba(255, 255, 255, .12));--texture-opacity: .54}.theme-ocean{background:#19b4bd;--modal-surface: rgba(213, 247, 255, .84);--modal-border: rgba(255, 255, 255, .34);--modal-shadow: rgba(14, 81, 116, .38);--tile-surface: rgba(255, 255, 255, .42);--board-surface: rgba(255, 255, 255, .12);--cell-surface: rgba(255, 255, 255, .38);--app-background: radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .2), transparent 18%), radial-gradient(circle at 72% 82%, rgba(57, 230, 218, .2), transparent 23%), linear-gradient(155deg, #1d87c9 0%, #19b4bd 45%, #6759d8 100%);--background-texture: radial-gradient(circle, rgba(255, 255, 255, .34) 0 2px, transparent 2.8px) 10px 16px / 58px 58px, radial-gradient(circle, rgba(212, 255, 255, .26) 0 4px, transparent 5px) 34px 6px / 92px 84px, radial-gradient(ellipse at center, rgba(255, 255, 255, .13) 0 2px, transparent 2.8px) 0 0 / 38px 26px;--texture-opacity: .56}.theme-candy{background:#b967ff;--modal-surface: rgba(255, 226, 249, .88);--modal-border: rgba(255, 255, 255, .34);--modal-shadow: rgba(118, 40, 105, .34);--tile-surface: rgba(255, 255, 255, .5);--board-surface: rgba(255, 255, 255, .14);--cell-surface: rgba(255, 255, 255, .4);--app-background: radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .24), transparent 17%), linear-gradient(145deg, #ff6db5 0%, #b967ff 48%, #50c6ff 100%);--background-texture: radial-gradient(circle, rgba(255, 255, 255, .42) 0 3px, transparent 3.8px) 8px 10px / 72px 60px, radial-gradient(circle, rgba(255, 236, 120, .5) 0 3px, transparent 4px) 40px 38px / 88px 76px, linear-gradient(135deg, rgba(255, 255, 255, .14) 25%, transparent 25% 50%, rgba(255, 255, 255, .14) 50% 75%, transparent 75%) 0 0 / 36px 36px;--texture-opacity: .42}.theme-random{background:var(--random-primary, #8b5cf6);--modal-surface: rgba(255, 255, 255, .62);--modal-border: rgba(255, 255, 255, .34);--modal-shadow: rgba(31, 14, 50, .34);--tile-surface: rgba(255, 255, 255, .46);--board-surface: rgba(255, 255, 255, .13);--cell-surface: rgba(255, 255, 255, .39);--app-background: radial-gradient(circle at 18% 18%, var(--random-glow, rgba(255, 255, 255, .24)), transparent 23%), radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--random-accent, #ff7ac8) 38%, transparent), transparent 24%), radial-gradient(circle at 52% 86%, color-mix(in srgb, var(--random-secondary, #7dd3fc) 34%, transparent), transparent 28%), linear-gradient(145deg, var(--random-primary, #8b5cf6) 0%, var(--random-secondary, #ec4899) 48%, var(--random-deep, #1d1b64) 100%);--background-texture: radial-gradient(circle, var(--random-texture, rgba(255, 255, 255, .34)) 0 2px, transparent 2.8px) 14px 18px / 72px 62px, linear-gradient(135deg, rgba(255, 255, 255, .1) 25%, transparent 25% 50%, rgba(255, 255, 255, .1) 50% 75%, transparent 75%) 0 0 / 46px 46px;--texture-opacity: .45}.theme-midnight{background:#0b102f;--modal-surface: rgba(20, 22, 58, .78);--modal-border: rgba(219, 226, 255, .24);--modal-shadow: rgba(5, 7, 30, .46);--tile-surface: rgba(255, 255, 255, .1);--board-surface: rgba(255, 255, 255, .1);--cell-surface: rgba(255, 255, 255, .32);--app-background: radial-gradient(circle at 72% 20%, rgba(198, 205, 255, .28), transparent 13%), radial-gradient(circle at 24% 80%, rgba(101, 91, 255, .22), transparent 24%), linear-gradient(155deg, #0b102f 0%, #1b245b 54%, #2f1557 100%);--background-texture: radial-gradient(circle, rgba(255, 255, 255, .88) 0 1px, transparent 1.5px) 12px 20px / 76px 76px, radial-gradient(circle, rgba(177, 211, 255, .62) 0 1px, transparent 1.5px) 44px 10px / 104px 104px;--texture-opacity: .62}.theme-neon{background:#071022;--modal-surface: rgba(12, 15, 36, .76);--modal-border: rgba(111, 255, 238, .24);--modal-shadow: rgba(4, 9, 24, .48);--tile-surface: rgba(255, 255, 255, .1);--board-surface: rgba(255, 255, 255, .1);--cell-surface: rgba(255, 255, 255, .32);--app-background: radial-gradient(circle at 18% 18%, rgba(57, 255, 226, .3), transparent 20%), radial-gradient(circle at 82% 28%, rgba(255, 60, 193, .28), transparent 22%), linear-gradient(145deg, #071022 0%, #23105a 48%, #041c35 100%);--background-texture: linear-gradient(90deg, rgba(57, 255, 226, .16) 1px, transparent 1px) 0 0 / 42px 42px, linear-gradient(rgba(255, 60, 193, .13) 1px, transparent 1px) 0 0 / 42px 42px;--texture-opacity: .6}.theme-jungle{background:#26a455;--modal-surface: rgba(226, 255, 223, .82);--modal-border: rgba(255, 255, 255, .3);--modal-shadow: rgba(14, 78, 36, .38);--tile-surface: rgba(255, 255, 255, .42);--board-surface: rgba(255, 255, 255, .12);--cell-surface: rgba(255, 255, 255, .36);--app-background: radial-gradient(circle at 18% 18%, rgba(255, 238, 134, .18), transparent 20%), radial-gradient(circle at 76% 84%, rgba(29, 165, 88, .24), transparent 24%), linear-gradient(145deg, #0f6f3d 0%, #26a455 48%, #6f4f1c 100%);--background-texture: radial-gradient(ellipse at center, rgba(7, 78, 37, .24) 0 3px, transparent 3.6px) 8px 8px / 34px 24px, radial-gradient(circle, rgba(255, 236, 120, .5) 0 2px, transparent 2.8px) 18px 28px / 86px 70px;--texture-opacity: .5}.theme-blackout{background:#000;--modal-surface: rgba(18, 18, 18, .74);--modal-border: rgba(255, 255, 255, .18);--modal-shadow: rgba(0, 0, 0, .58);--tile-surface: rgba(255, 255, 255, .08);--board-surface: rgba(255, 255, 255, .08);--cell-surface: rgba(255, 255, 255, .24);--app-background: #000000;--background-texture: radial-gradient(circle, rgba(255, 255, 255, .38) 0 1px, transparent 1.4px) 20px 18px / 92px 92px;--texture-opacity: .32}.app-shell.game-over{box-shadow:inset 0 0 140px #ffffff24}.game{display:grid;gap:clamp(22px,4.5dvh,44px);margin:0 auto;max-width:660px;position:relative;width:min(100%,80dvh)}.player-chip:active,.cell:active,.icon-button:active,.symbol-choice:active{transform:scale(.96)}.symbol-x{color:#ff4e83;text-shadow:0 4px 0 #d72f67,0 11px 18px rgba(104,16,86,.3)}.symbol-o{color:#050209;text-shadow:0 7px 16px rgba(43,5,57,.18)}.player-strip{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));left:0;padding:max(12px,env(safe-area-inset-top)) 14px 0;pointer-events:none;position:fixed;right:0;top:0;z-index:4}.background-button{align-items:center;background:#ffffff26;border:3px solid rgba(255,255,255,.24);border-radius:999px;box-shadow:inset 0 1px #ffffff2e,0 10px 24px #3d157024;cursor:pointer;display:inline-flex;height:var(--action-button-size);justify-content:center;bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));left:max(16px,env(safe-area-inset-left));padding:0;position:fixed;top:auto;transform:none;transition:background .16s ease,border-color .16s ease,transform .16s ease;width:var(--action-button-size);z-index:4}.background-button svg{height:76%;stroke-width:3;width:76%}.background-button:active{transform:scale(.96)}.player-chip{align-items:center;aspect-ratio:1;background:#ffffff26;border:3px solid rgba(255,255,255,.24);border-radius:999px;box-shadow:inset 0 1px #ffffff2e,0 10px 24px #3d157024;cursor:pointer;display:flex;font-weight:900;justify-content:center;justify-self:start;min-height:0;pointer-events:auto;padding:0;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;width:clamp(88px,22vw,132px)}.player-chip:nth-child(2){justify-self:end}.player-chip.active{animation:turn-pulse 1.3s ease-in-out infinite;background:#ffffff52;border-color:#fff;box-shadow:0 0 0 5px #ffffff3d,0 0 26px #ffffff80,0 16px 34px #3d157038;transform:scale(1.07)}.player-chip.winner-player{animation:winner-player-pop .85s ease-in-out infinite alternate;background:#ffffff61;border-color:#fff;box-shadow:0 0 0 7px #ffffff3d,0 0 36px #ffffff9e,0 18px 40px #3d157042;transform:scale(1.1)}.player-chip.draw-player{animation:winner-player-pop .85s ease-in-out infinite alternate;background:#ffffff57;border-color:#fff;box-shadow:0 0 0 6px #fff3,0 0 30px #ffffff80,0 18px 40px #3d15703d}.chip-symbol{align-items:center;display:flex;font-size:var(--game-symbol-size);justify-content:center;line-height:1;transform:translateY(0)}.chip-symbol.symbol-offset-up{transform:translateY(-.2em)}.board-wrap{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--board-surface, rgba(255, 255, 255, .14));border-radius:clamp(16px,4vw,24px);box-shadow:inset 0 1px #ffffff24,0 18px 38px #1f0e321f;padding:clamp(12px,3.1vw,18px)}.board{display:grid;gap:clamp(10px,3vw,18px);grid-template-columns:repeat(3,minmax(0,1fr))}.cell{align-items:center;aspect-ratio:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--cell-surface, rgba(255, 255, 255, .4));border-radius:clamp(14px,4vw,20px);box-shadow:inset 0 1px #fff3,0 14px 28px #571a9014;cursor:pointer;display:flex;justify-content:center;min-width:0;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background .16s ease,transform .16s ease,box-shadow .16s ease}.cell:active,.cell:focus,.cell:focus-visible{background:var(--cell-surface, rgba(255, 255, 255, .4));outline:none}.cell:disabled{cursor:default;opacity:1}.cell:disabled:active,.cell:disabled:focus,.cell:disabled:focus-visible{background:var(--cell-surface, rgba(255, 255, 255, .4))}.cell:not(:disabled):hover{background:#ffffff80}.winner-cell{animation:winner-pulse .72s ease-in-out infinite alternate;background:#ffeeffe6;box-shadow:inset 0 0 0 4px #fff6,0 0 0 5px #ffffff2e,0 16px 30px #571a901f}.winner-cell:active,.winner-cell:focus,.winner-cell:focus-visible,.winner-cell:disabled:active,.winner-cell:disabled:focus,.winner-cell:disabled:focus-visible{background:#ffeeffe6}.winner-cell .mark{animation:winning-mark .52s ease-in-out infinite alternate}.settled-cell{background:#180c281a;box-shadow:inset 0 0 0 2px #ffffff08,0 6px 12px #1f0e320a;filter:grayscale(.8) saturate(.35);opacity:.16}.settled-cell .mark{filter:grayscale(1) saturate(.2);opacity:.2;transform:scale(.84)}.draw-cell{animation:draw-cell-glow .76s ease-in-out infinite alternate;background:#ffeeffc7;box-shadow:inset 0 0 0 3px #ffffff47,0 0 0 4px #ffffff1f,0 14px 28px #571a901a}.draw-cell .mark{animation:winning-mark .56s ease-in-out infinite alternate}.mark{font-size:var(--game-symbol-size);font-weight:950;line-height:.9}.controls{display:flex;gap:clamp(14px,4vw,26px);bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));justify-content:end;padding:0;position:fixed;right:max(16px,env(safe-area-inset-right));z-index:4}.close-button{align-items:center;background:#ffffff24;border:3px solid rgba(255,255,255,.45);border-radius:999px;cursor:pointer;display:inline-flex;justify-content:center;transition:opacity .16s ease,transform .16s ease,background .16s ease}.restart-button{align-items:center;background:#ffffff29;border:3px solid rgba(255,255,255,.45);border-radius:999px;cursor:pointer;display:inline-flex;font-size:clamp(1.25rem,5vw,1.55rem);justify-content:center;height:var(--action-button-size);overflow:hidden;padding:0;position:relative;transition:background .16s ease,box-shadow .16s ease,transform .16s ease;width:var(--action-button-size)}.restart-button:before{animation:restart-sheen 10s ease-in-out infinite;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 66%,transparent 100%);content:"";inset:-18px auto -18px -72%;pointer-events:none;position:absolute;transform:translate(0) skew(-18deg);width:62%;z-index:0}.restart-button>*{position:relative;z-index:1}.restart-button svg{height:68%;stroke-width:3;width:68%}.restart-button:active{transform:scale(.96)}.restart-button.attention{animation:restart-complete-beacon 2375ms cubic-bezier(.22,.8,.32,1) .48s infinite;background:#4ade8061;border-color:#dcffe8f5;box-shadow:0 0 0 7px #4ade802e,0 0 28px #4ade8066}.restart-button.attention:before{animation-delay:1.3s;animation-duration:7.8s}.winning-rain{top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;position:fixed;z-index:3}.winning-rain span{animation:winning-rain-fall 4.3s cubic-bezier(.3,.02,.55,.95) both;animation-delay:var(--delay);font-size:clamp(4rem,15vmax,8rem);font-weight:950;left:var(--x);line-height:1;opacity:0;position:absolute;top:-96px;transform:translateZ(0) rotate(var(--start-spin))}.winning-rain span:nth-child(2n){animation-duration:4.9s;font-size:clamp(3.2rem,12vmax,6.6rem)}.winning-rain span:nth-child(3n){animation-duration:5.4s}.tie-rain{top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;position:fixed;z-index:3}.tie-rain span{animation:tie-rain-fall 4.3s cubic-bezier(.3,.02,.55,.95) both;animation-delay:var(--tie-delay);font-size:clamp(4rem,15vmax,8rem);font-weight:950;left:var(--tie-x);line-height:1;opacity:0;position:absolute;text-shadow:0 8px 18px rgba(43,5,57,.2);top:-96px}.tie-rain span:nth-child(2n){animation-duration:4.9s;font-size:clamp(3.2rem,12vmax,6.6rem)}.tie-rain span:nth-child(3n){animation-duration:5.4s}.tie-rain .symbol-x,.tie-rain .symbol-o{filter:saturate(.85);opacity:0}.ocean-bubbles{top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;position:fixed;z-index:0}.ocean-bubbles span{animation:ocean-bubble-rise var(--bubble-duration) ease-in infinite;animation-delay:var(--bubble-delay);border:2px solid rgba(224,255,255,.34);border-radius:999px;box-shadow:inset 2px 2px 5px #ffffff47,0 0 10px #adf6ff1f;height:var(--bubble-size);left:var(--bubble-x);opacity:0;position:absolute;top:110dvh;width:var(--bubble-size)}.space-stars{top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;position:fixed;z-index:0}.twinkle-star{animation:space-twinkle var(--star-duration) ease-in-out infinite;animation-delay:var(--star-delay);background:#fffffffa;border-radius:999px;box-shadow:0 0 8px #ffffffb8,0 0 14px #93d7ffad;height:4px;left:var(--star-x);opacity:.35;position:absolute;top:var(--star-y);width:4px}.twinkle-star:nth-child(3n){height:2px;width:2px}.twinkle-star:nth-child(5n){height:5px;width:5px}.modal-backdrop{align-items:end;background:#220e344d;display:flex;top:0;right:0;bottom:0;left:0;padding:18px 18px max(50px,calc(env(safe-area-inset-bottom) + 34px));position:fixed;z-index:5}.background-backdrop{align-items:stretch;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0c082029;overflow-y:auto;padding:14px}.symbol-backdrop{align-items:stretch;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0c082029;padding:14px}.symbol-modal{align-self:stretch;background:transparent;border:0;border-radius:0;box-shadow:none;color:#271335;display:flex;flex-direction:column;justify-content:flex-start;margin:0 auto;max-width:min(860px,calc(100vw - 28px));overflow:visible;padding:max(72px,calc(env(safe-area-inset-top) + 60px)) 0 max(18px,env(safe-area-inset-bottom));position:relative;width:100%}.symbol-modal .modal-header{height:0;left:0;margin:0;pointer-events:none;position:absolute;right:0;top:max(18px,calc(env(safe-area-inset-top) + 6px));z-index:6}.symbol-modal .close-button{left:50%;margin-left:0;pointer-events:auto;position:fixed;top:max(18px,calc(env(safe-area-inset-top) + 6px));transform:translate(-50%)}.visually-hidden{height:1px;margin:-1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.background-modal{align-self:stretch;background:transparent;border:0;box-shadow:none;color:#271335;display:flex;flex-direction:column;justify-content:flex-start;margin:0 auto;max-width:min(860px,calc(100vw - 28px));padding:max(72px,calc(env(safe-area-inset-top) + 60px)) 0 max(18px,env(safe-area-inset-bottom));position:relative;width:100%}.background-modal .modal-header{height:0;left:0;margin:0;pointer-events:none;position:absolute;right:0;top:max(18px,calc(env(safe-area-inset-top) + 6px));z-index:6}.background-modal .close-button{left:50%;margin-left:0;pointer-events:auto;position:fixed;top:max(18px,calc(env(safe-area-inset-top) + 6px));transform:translate(-50%)}.modal-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.modal-header h2{font-size:1.1rem;line-height:1.2;margin:0}.close-button{background:#ffffff2e;border-color:#ffffff47;color:#442353;height:40px;width:40px}.close-button svg{height:22px;width:22px}.theme-close-button{color:#050209;height:clamp(48px,12vw,64px);width:clamp(48px,12vw,64px)}.theme-close-button svg{height:52%;stroke-width:3;width:52%}.symbol-grid{display:grid;gap:clamp(10px,2.2vw,16px);grid-template-columns:repeat(3,minmax(0,1fr));max-height:calc(100dvh - max(104px,calc(env(safe-area-inset-top) + 92px)));overflow-y:auto;overscroll-behavior:contain;padding:4px 6px 8px;scrollbar-color:rgba(255,78,131,.58) rgba(91,46,130,.1)}.background-grid{display:grid;gap:clamp(12px,2.4vw,18px);grid-template-columns:repeat(2,minmax(0,1fr))}.background-choice{align-items:center;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:var(--tile-surface, rgba(255, 255, 255, .58));border:2px solid rgba(255,255,255,.28);border-radius:8px;box-shadow:inset 0 1px #ffffff47,0 8px 18px #1f0e321f;cursor:pointer;display:flex;justify-content:center;min-width:0;padding:clamp(7px,1.5vw,10px);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.background-choice:active{transform:scale(.98)}.background-choice.selected{border-color:#ff4e83;box-shadow:inset 0 0 0 2px #ff4e8347,0 0 0 3px #ff4e832e,0 10px 22px #1f0e3224}.background-swatch{align-items:center;aspect-ratio:1;border-radius:6px;box-shadow:inset 0 0 0 1px #fff3,inset 0 -26px 48px #2713350f;display:flex;justify-content:center;overflow:hidden;position:relative;width:100%}.swatch-random .background-swatch{background:#fff}.swatch-icons{align-items:center;display:flex;gap:clamp(8px,2.5vw,16px);justify-content:center;position:relative;z-index:1}.swatch-icons span{align-items:center;display:flex;font-size:clamp(2.5rem,7.5vw,4.4rem);justify-content:center;line-height:1;text-shadow:0 7px 16px rgba(43,5,57,.28)}.swatch-icons.random-icons span{font-size:clamp(4.2rem,12vw,7rem);text-shadow:0 8px 18px rgba(43,5,57,.16)}.swatch-icons .symbol-x{text-shadow:0 3px 0 #d72f67,0 8px 16px rgba(104,16,86,.26)}.swatch-icons .symbol-o{text-shadow:0 7px 16px rgba(43,5,57,.18)}.swatch-classic .background-swatch{background:radial-gradient(circle at 18% 14%,rgba(255,255,255,.24),transparent 20%),radial-gradient(circle at 82% 18%,rgba(255,180,218,.28),transparent 22%),radial-gradient(ellipse at center,rgba(255,101,148,.34) 0 3px,transparent 4px) 20px 18px / 40px 34px,linear-gradient(145deg,#7f8df0,#a75df0 44%,#f05b9d)}.swatch-space .background-swatch{background:radial-gradient(circle,rgba(255,255,255,.96) 0 1px,transparent 1.5px) 8px 8px / 28px 28px,radial-gradient(circle at 75% 22%,rgba(255,255,255,.24),transparent 12%),linear-gradient(155deg,#101044,#32136d 48%,#751b78)}.swatch-garden .background-swatch{background:radial-gradient(circle,rgba(255,238,150,.9) 0 2px,transparent 2.6px) 8px 8px / 28px 24px,radial-gradient(circle,rgba(255,142,196,.8) 0 2px,transparent 2.8px) 20px 18px / 34px 30px,radial-gradient(ellipse at center,rgba(18,113,70,.28) 0 2px,transparent 2.5px) 0 0 / 14px 10px,linear-gradient(145deg,#2fa778,#4cbd8d 42%,#d85ca5)}.swatch-sunset .background-swatch{background:radial-gradient(circle at 20% 25%,rgba(255,250,187,.78),transparent 14%),radial-gradient(circle at 82% 25%,rgba(235,238,255,.38),transparent 12%),radial-gradient(circle,rgba(255,255,255,.78) 0 1px,transparent 1.5px) 86% 18% / 28px 28px,linear-gradient(180deg,transparent 0%,transparent 48%,rgba(255,105,96,.28) 74%,rgba(235,67,146,.32) 100%),linear-gradient(135deg,transparent 0%,transparent 52%,rgba(19,24,82,.52) 100%),linear-gradient(90deg,#ffd36e,#ff9569 33%,#e25c9d 50%,#48309f 72%,#141a54)}.swatch-ocean .background-swatch{background:radial-gradient(circle,rgba(255,255,255,.42) 0 2px,transparent 2.8px) 8px 8px / 28px 28px,radial-gradient(circle,rgba(212,255,255,.3) 0 3px,transparent 4px) 20px 4px / 42px 38px,radial-gradient(ellipse at center,rgba(255,255,255,.22) 0 2px,transparent 2.8px) 0 0 / 24px 16px,linear-gradient(155deg,#1d87c9,#19b4bd 45%,#6759d8)}.swatch-candy .background-swatch{background:radial-gradient(circle,rgba(255,255,255,.5) 0 3px,transparent 3.8px) 8px 8px / 32px 28px,radial-gradient(circle,rgba(255,236,120,.56) 0 3px,transparent 4px) 18px 18px / 38px 34px,linear-gradient(135deg,rgba(255,255,255,.18) 25%,transparent 25% 50%,rgba(255,255,255,.18) 50% 75%,transparent 75%) 0 0 / 20px 20px,linear-gradient(145deg,#ff6db5,#b967ff 48%,#50c6ff)}.swatch-midnight .background-swatch{background:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.5px) 12px 10px / 32px 32px,radial-gradient(circle at 72% 22%,rgba(198,205,255,.34),transparent 15%),linear-gradient(155deg,#0b102f,#1b245b 54%,#2f1557)}.swatch-neon .background-swatch{background:linear-gradient(90deg,rgba(57,255,226,.18) 1px,transparent 1px) 0 0 / 18px 18px,linear-gradient(rgba(255,60,193,.16) 1px,transparent 1px) 0 0 / 18px 18px,linear-gradient(145deg,#071022,#23105a 48%,#041c35)}.swatch-jungle .background-swatch{background:radial-gradient(ellipse at center,rgba(7,78,37,.28) 0 3px,transparent 3.6px) 8px 8px / 24px 18px,radial-gradient(circle,rgba(255,236,120,.5) 0 2px,transparent 2.8px) 18px 22px / 38px 34px,linear-gradient(145deg,#0f6f3d,#26a455 48%,#6f4f1c)}.swatch-blackout .background-swatch{background:radial-gradient(circle,rgba(255,255,255,.54) 0 1px,transparent 1.4px) 10px 10px / 36px 36px,#000}.symbol-choice{align-items:center;aspect-ratio:1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffff9e;border:2px solid rgba(255,255,255,.28);border-radius:8px;box-shadow:inset 0 1px #ffffff47,0 8px 18px #1f0e321f;color:#1c0e25;cursor:pointer;display:flex;font-size:var(--game-symbol-size);font-weight:850;justify-content:center;line-height:1;min-width:0;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}.symbol-choice.emoji-choice{font-size:var(--game-symbol-size)}.symbol-choice.symbol-x{color:#ff4e83;text-shadow:0 2px 0 #d72f67,0 7px 13px rgba(104,16,86,.26)}.symbol-choice.symbol-o{color:#050209;text-shadow:0 5px 12px rgba(43,5,57,.16)}.symbol-choice.emoji-choice{color:#1c0e25;text-shadow:0 5px 12px rgba(43,5,57,.12)}.symbol-choice.selected.symbol-x{background:#fee8f0;border-color:#ff4e83}.symbol-choice.selected.symbol-o{background:#f0e8ff;border-color:#1d0a2d}.symbol-choice.selected.emoji-choice{background:#fff6fb;border-color:#ff4e83}.symbol-choice.taken{background:#ffffff70;border-color:#5b2e8214;cursor:not-allowed;filter:grayscale(1);opacity:.28;text-shadow:none}@media(min-width:700px){.modal-backdrop{align-items:center}}@media(orientation:portrait)and (min-width:700px)and (max-width:1100px){.symbol-modal{max-width:min(660px,calc(100vw - 56px))}.symbol-grid{gap:clamp(14px,2.4vw,22px)}}@media(max-width:430px){.app-shell{padding-inline:12px}.game{gap:clamp(20px,4dvh,34px);width:100%}.player-strip{gap:10px;padding-inline:10px}.player-chip{width:clamp(96px,27vw,120px)}}@media(max-height:760px){.game{gap:clamp(14px,3dvh,24px);width:min(100%,74dvh)}.player-chip{min-height:42px;padding-block:5px}.board-wrap{padding:10px}.board{gap:10px}}@keyframes winning-rain-fall{0%{opacity:0;transform:translate3d(0,-80px,0) rotate(var(--start-spin)) scale(.86)}10%{opacity:.95}82%{opacity:.95}to{opacity:0;transform:translate3d(var(--drift),132dvh,0) rotate(var(--end-spin)) scale(1)}}@keyframes tie-rain-fall{0%{opacity:0;transform:translate3d(0,-80px,0) rotate(var(--tie-start-spin)) scale(.86)}10%{opacity:.95}82%{opacity:.95}to{opacity:0;transform:translate3d(var(--tie-drift),132dvh,0) rotate(var(--tie-end-spin)) scale(1)}}@keyframes winner-pulse{0%{transform:scale(1)}to{transform:scale(1.035)}}@keyframes turn-pulse{0%,to{box-shadow:0 0 0 5px #ffffff38,0 0 24px #ffffff6b,0 16px 34px #3d157038;transform:scale(1.06)}50%{box-shadow:0 0 0 9px #ffffff24,0 0 34px #fff9,0 18px 36px #3d15703d;transform:scale(1.1)}}@keyframes winner-player-pop{0%{filter:brightness(1);transform:scale(1.08) rotate(-2deg)}to{filter:brightness(1.16);transform:scale(1.18) rotate(2deg)}}@keyframes draw-player-wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}@keyframes winning-mark{0%{filter:brightness(1);transform:scale(1) rotate(-2deg)}to{filter:brightness(1.18);transform:scale(1.13) rotate(2deg)}}@keyframes draw-cell-glow{0%{filter:brightness(1);transform:scale(1)}to{filter:brightness(1.08);transform:scale(1.025)}}@keyframes restart-sheen{0%,76%{transform:translate(0) skew(-18deg)}90%,to{transform:translate(355%) skew(-18deg)}}@keyframes restart-complete-beacon{0%,12%,to{background:#4ade8061;border-color:#dcffe8f5;transform:scale(1);box-shadow:0 0 0 7px #4ade802e,0 0 28px #4ade8066,0 12px 28px #3d157029}24%{background:#4ade8094;border-color:#f0fff5;transform:scale(1.14);box-shadow:0 0 0 14px #4ade801f,0 0 42px #4ade8094,0 16px 34px #3d157033}38%{background:#38bdf86b;border-color:#dbf8fffa;transform:scale(1.04);box-shadow:0 0 0 9px #38bdf824,0 0 32px #38bdf86b}52%{background:#f472b666;border-color:#ffe1f2f5;transform:scale(1.09);box-shadow:0 0 0 11px #f472b61f,0 0 36px #f472b666}68%{background:#4ade806b;border-color:#dcffe8f5;transform:scale(1);box-shadow:0 0 0 7px #4ade8029,0 0 28px #4ade8061}}@keyframes ocean-bubble-rise{0%{opacity:0;transform:translateZ(0) scale(.78)}16%{opacity:.42}82%{opacity:.3}to{opacity:0;transform:translate3d(var(--bubble-drift),-124dvh,0) scale(1.08)}}@keyframes space-twinkle{0%,to{opacity:.28;transform:scale(.78)}48%{opacity:1;transform:scale(1.55)}}@media(max-height:680px){.app-shell{align-items:start;padding-top:max(86px,calc(env(safe-area-inset-top) + 72px))}.game{gap:12px}}@supports (-webkit-touch-callout: none){:root{--action-button-size: clamp(96px, 24vw, 132px);--game-symbol-size: clamp(4.2rem, 24vw, 9.4rem)}.chip-symbol{font-size:var(--game-symbol-size)}.chip-symbol.symbol-x{transform:translateY(.03em)}.chip-symbol.symbol-o{transform:translateY(.02em)}.mark{font-size:var(--game-symbol-size)}.mark.symbol-x{display:inline-block;transform:translateY(-.06em)}.mark.symbol-o{display:inline-block;transform:translateY(-.05em)}.symbol-choice.emoji-choice{font-size:var(--game-symbol-size)}.winning-rain span{font-size:clamp(4.4rem,16vmax,8.6rem)}.winning-rain span:nth-child(2n){font-size:clamp(3.55rem,12.8vmax,7rem)}.tie-rain span{font-size:clamp(4.4rem,16vmax,8.6rem)}.tie-rain span:nth-child(2n){font-size:clamp(3.55rem,12.8vmax,7rem)}.restart-button svg{height:82%;width:82%}}@media(orientation:landscape)and (max-height:760px){:root{--action-button-size: clamp(108px, 30dvh, 136px);--game-symbol-size: clamp(3.6rem, 21dvh, 7.8rem)}.app-shell{align-items:center;padding:env(safe-area-inset-top) 8px env(safe-area-inset-bottom)}.game{gap:clamp(8px,2dvh,16px);width:min(66vw,calc(100dvh - 18px),640px)}.player-strip{padding:max(8px,env(safe-area-inset-top)) 12px 0}.player-chip{min-height:0;padding:0;width:clamp(80px,23dvh,124px)}.chip-symbol{font-size:var(--game-symbol-size)}.symbol-modal{max-width:min(560px,calc(100vw - 96px),118dvh);padding-top:max(24px,env(safe-area-inset-top))}.background-modal{max-width:min(620px,calc(100vw - 96px),138dvh);padding-top:max(24px,env(safe-area-inset-top))}.symbol-modal .close-button,.background-modal .close-button{left:auto;right:max(18px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));transform:none}.symbol-grid{gap:clamp(8px,2dvh,12px);max-height:calc(100dvh - max(42px,calc(env(safe-area-inset-top) + 30px)))}.background-grid{gap:clamp(8px,2dvh,12px)}.background-button svg{height:76%;width:76%}.board-wrap{padding:clamp(8px,2dvh,14px)}.board{gap:clamp(8px,2dvh,12px)}.controls{bottom:max(10px,calc(env(safe-area-inset-bottom) + 6px))}.restart-button svg{height:76%;width:76%}}@media(orientation:portrait)and (max-width:700px){:root{--action-button-size: clamp(108px, 24vw, 140px)}.app-shell{align-items:center;padding:max(104px,calc(env(safe-area-inset-top) + 88px)) 4px max(128px,calc(env(safe-area-inset-bottom) + 112px))}.game{gap:0;width:min(100%,84dvh)}.controls{bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));justify-content:end;padding:0;position:fixed;right:max(16px,env(safe-area-inset-right));z-index:4}.restart-button svg{height:78%;width:78%}.background-button{bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));left:max(16px,env(safe-area-inset-left));top:auto;transform:none}.background-button svg{height:76%;width:76%}.background-button:active{transform:scale(.96)}}