:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;--bg:#12101f;--bg-deep:#0b0a14;--surface:#1d1a30;--surface-2:#27223f;--surface-3:#302a4d;--text:#f8f6ff;--muted:#a8a2bd;--coral:#ff795b;--coral-soft:#ff9d84;--mint:#62d9cf;--purple:#9681ff;--blue:#6ba8ff;--danger:#ff5f74;--line:#ffffff17;--shadow:0 24px 70px #03020c61;--radius-sm:12px;--radius:20px;--radius-lg:30px;--ease:.18s cubic-bezier(.2, .8, .2, 1);font-family:Inter,ui-rounded,SF Pro Rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}*,:before,:after{box-sizing:border-box;-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important}html,body,#root{overscroll-behavior:none;width:100%;min-width:0;height:100%;min-height:0;margin:0;overflow:hidden}html{-webkit-text-size-adjust:100%;position:fixed;top:0;bottom:0;left:0;right:0}body{background:var(--bg);min-height:0;color:var(--text);touch-action:manipulation;position:fixed;top:0;bottom:0;left:0;right:0}body:before{content:"";pointer-events:none;background:radial-gradient(circle at 12% 14%,#9681ff1f,#0000 30%),radial-gradient(circle at 88% 85%,#62d9cf14,#0000 28%);position:fixed;top:0;bottom:0;left:0;right:0}button,input{font:inherit}button,input,img{-webkit-tap-highlight-color:transparent;-webkit-user-drag:none}input,textarea{-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important}textarea[data-clipboard-helper]{-webkit-user-select:text!important;user-select:text!important}button{color:inherit;touch-action:manipulation}button:not(:disabled){cursor:pointer}button:focus-visible{outline-offset:3px;outline:3px solid #62d9cfb8}input:focus-visible{outline-offset:3px;outline:3px solid #62d9cfb8}.screen{width:100%;height:100dvh;min-height:0;padding:max(20px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));animation:.2s fade;position:relative;overflow:hidden}.icon{flex:none}.button{min-height:50px;transition:transform var(--ease), filter var(--ease), background var(--ease);border:0;border-radius:15px;justify-content:center;align-items:center;gap:10px;padding:0 20px;font-weight:800;display:inline-flex}.button:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-2px)}.button:active{transform:translateY(0)scale(.98)}.button:disabled{opacity:.45;cursor:not-allowed}.button--primary{color:#171226;background:linear-gradient(135deg, var(--coral-soft), var(--coral));box-shadow:0 10px 28px #ff795b38}.button--secondary{color:var(--text);background:var(--surface-3);border:1px solid var(--line)}.button--ghost{min-height:44px;color:var(--muted);background:0 0}.button--danger{color:#fff;background:#ff5f7421;border:1px solid #ff5f743d}.icon-button{border:1px solid var(--line);width:46px;height:46px;transition:background var(--ease), transform var(--ease);background:#27223fd6;border-radius:14px;place-items:center;padding:0;display:grid}.icon-button:hover{background:var(--surface-3);transform:translateY(-1px)}.loading-screen,.fatal-error{text-align:center;background:radial-gradient(circle at center, #24203e, var(--bg) 60%);place-content:center;justify-items:center;gap:20px;min-height:100dvh;padding:28px;display:grid}.loading-logo{background:var(--surface-2);width:112px;height:112px;box-shadow:var(--shadow);border-radius:30px;place-items:center;animation:2s ease-in-out infinite float;display:grid;position:relative}.loading-logo span{color:var(--coral);font-size:74px;font-weight:300;line-height:1;transform:rotate(1deg)}.loading-logo i{color:var(--mint);font-size:42px;font-style:normal;position:absolute;bottom:8px;right:14px}.loading-screen>strong{letter-spacing:.1em;font-size:19px}.loading-screen>strong em{color:var(--coral);font-style:normal}.loading-bar{background:var(--surface-3);border-radius:10px;width:min(260px,70vw);height:5px;overflow:hidden}.loading-bar i{border-radius:inherit;background:linear-gradient(90deg, var(--purple), var(--mint));width:42%;height:100%;animation:1.2s ease-in-out infinite alternate load;display:block}.fatal-error div{width:64px;height:64px;color:var(--danger);background:#ff5f741f;border-radius:50%;place-items:center;font-size:36px;display:grid}.fatal-error h1,.fatal-error p{margin:0}.fatal-error p{color:var(--muted)}.home-screen{flex-direction:column;display:flex}.home-header{justify-content:space-between;align-items:center;gap:18px;width:min(1180px,100%);margin:0 auto;display:flex}.brand{text-align:left;background:0 0;border:0;align-items:center;gap:12px;padding:0;display:flex}.brand__logo{background:var(--surface-2);border-radius:14px;place-items:center;width:48px;height:48px;display:grid;position:relative;box-shadow:0 8px 24px #0003}.brand__logo b{color:var(--coral);font-size:34px;font-weight:400}.brand__logo i{color:var(--mint);font-size:19px;font-style:normal;position:absolute;bottom:1px;right:4px}.brand>span:last-child{letter-spacing:.11em;flex-direction:column;font-size:15px;line-height:.95;display:flex}.brand em{color:var(--coral);font-style:normal;font-weight:900}.home-header__actions{align-items:center;gap:10px;display:flex}.language-button{border:1px solid var(--line);background:var(--surface);border-radius:13px;min-width:48px;height:43px;font-size:12px;font-weight:900}.profile-pill{border:1px solid var(--line);background:var(--surface);text-align:left;border-radius:16px;align-items:center;gap:9px;height:52px;padding:5px 12px 5px 6px;display:flex}.profile-pill .avatar{width:40px;height:40px}.profile-pill>span{flex-direction:column;max-width:150px;display:flex}.profile-pill strong{white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.profile-pill small{color:var(--mint);align-items:center;gap:4px;font-weight:800;display:flex}.home-content{flex:1;grid-template-columns:minmax(270px,.86fr) minmax(440px,1.25fr);align-items:center;gap:clamp(38px,7vw,88px);width:min(1100px,100%);margin:auto;padding:clamp(34px,7vh,80px) 0 26px;display:grid}.mobile-game-title{color:var(--text);text-align:center;letter-spacing:-.04em;grid-column:1/-1;margin:0 0 13px;line-height:1;display:none}.mobile-game-title em{color:var(--coral);font-style:normal}.hero-copy .eyebrow,.choice-card .eyebrow{color:var(--mint);text-transform:uppercase;letter-spacing:.12em;align-items:center;gap:7px;font-size:11px;font-weight:900;display:inline-flex}.hero-copy h1{letter-spacing:-.055em;max-width:500px;margin:14px 0 10px;font-size:clamp(44px,6vw,76px);line-height:.96}.hero-copy p{color:var(--coral-soft);margin:0;font-size:clamp(18px,2vw,24px);font-weight:700}.hero-rule{border:1px solid var(--line);color:var(--muted);background:#1d1a30a6;border-radius:17px;align-items:center;gap:14px;margin-top:36px;padding:14px 16px;font-size:13px;line-height:1.4;display:flex}.hero-rule__marks{align-items:center;min-width:88px;display:flex}.hero-rule__marks b,.hero-rule__marks i{background:var(--surface-3);width:27px;height:27px;color:var(--coral);border-radius:8px;place-items:center;margin-left:-5px;font-size:21px;font-style:normal;display:grid}.hero-rule__marks i{opacity:.32;border:1px dashed var(--coral)}.mode-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.mode-card{border:1px solid var(--line);border-radius:var(--radius);text-align:left;min-height:132px;transition:transform var(--ease), border-color var(--ease), box-shadow var(--ease);background:linear-gradient(145deg,#302a4de6,#1b182df5);grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:20px;display:grid;position:relative;overflow:hidden}.mode-card:after{content:"";opacity:.07;background:currentColor;border-radius:50%;width:100px;height:100px;position:absolute;top:-50px;right:-45px}.mode-card:hover{border-color:currentColor;transform:translateY(-4px);box-shadow:0 18px 38px #0000002e}.mode-card:disabled{cursor:not-allowed;opacity:.52;filter:saturate(.55)}.mode-card:disabled:hover{border-color:var(--line);box-shadow:none;transform:none}.mode-card--coral{color:var(--coral)}.mode-card--purple{color:var(--purple)}.mode-card--mint{color:var(--mint)}.mode-card--blue{color:var(--blue)}.mode-card__icon{background:color-mix(in srgb, currentColor 15%, transparent);border-radius:16px;place-items:center;width:53px;height:53px;display:grid}.mode-card>span:nth-child(2){min-width:0;color:var(--text);flex-direction:column;display:flex}.mode-card strong{font-size:16px}.mode-card small{color:var(--muted);margin-top:5px;line-height:1.3}.mode-card__arrow{font-size:27px;font-weight:400}.online-initialization-error{color:var(--muted);background:#ff7d6714;border:1px solid #ff7d6759;border-radius:16px;justify-content:space-between;align-items:center;gap:14px;margin-top:14px;padding:14px 16px;display:flex}.quick-links{grid-column:1/-1;justify-content:center;gap:8px;margin-top:10px;display:flex}.quick-links button{min-height:44px;color:var(--muted);transition:background var(--ease), color var(--ease);background:0 0;border:0;border-radius:13px;align-items:center;gap:7px;padding:9px 15px;font-weight:700;display:flex}.quick-links button:hover{background:var(--surface);color:var(--text)}.quick-links .icon{width:18px}.home-footer{color:#6f6a83;letter-spacing:.04em;justify-content:space-between;width:min(1180px,100%);margin:0 auto;font-size:11px;display:flex}.online-dot{align-items:center;gap:6px;display:flex}.online-dot i{background:var(--mint);width:7px;height:7px;box-shadow:0 0 10px var(--mint);border-radius:50%}.centered-screen{place-items:center;display:grid}.floating-back{top:max(22px, env(safe-area-inset-top));left:max(22px, env(safe-area-inset-left));position:absolute}.choice-card,.waiting-card{border:1px solid var(--line);border-radius:var(--radius-lg);width:min(520px,100%);box-shadow:var(--shadow);background:linear-gradient(145deg,#27223ff5,#161425f5);padding:clamp(26px,5vw,46px)}.choice-card h1,.waiting-card h1{letter-spacing:-.035em;margin:12px 0 28px;font-size:clamp(30px,5vw,44px)}.difficulty-list{gap:12px;display:grid}.difficulty-option{border:1px solid var(--line);text-align:left;min-height:82px;transition:transform var(--ease), border-color var(--ease), background var(--ease);background:#12101f85;border-radius:18px;grid-template-columns:54px 1fr auto;align-items:center;gap:14px;padding:12px 18px;display:grid}.difficulty-option:hover{background:var(--surface-3);transform:translate(5px)}.difficulty-option>span{background:var(--surface-3);border-radius:15px;place-items:center;width:52px;height:52px;font-size:27px;display:grid}.difficulty-option>div{flex-direction:column;display:flex}.difficulty-option strong{font-size:17px}.difficulty-option small{color:var(--muted);margin-top:4px}.difficulty-option>b{font-size:25px}.difficulty-option--easy:hover{border-color:var(--mint)}.difficulty-option--medium:hover{border-color:var(--purple)}.difficulty-option--hard:hover{border-color:var(--coral)}.game-screen{flex-direction:column;display:flex}.game-topbar{grid-template-columns:48px 1fr 48px;align-items:center;gap:14px;width:min(1180px,100%);margin:0 auto;display:grid}.game-topbar__status{text-align:center;grid-template-columns:auto auto;justify-self:center;align-items:center;column-gap:8px;display:grid}.game-topbar__status small{color:var(--muted);grid-column:1/-1;margin-top:2px;font-size:11px}.status-dot{background:var(--mint);width:8px;height:8px;box-shadow:0 0 12px var(--mint);border-radius:50%}.status-dot--thinking{background:var(--purple);animation:1s infinite pulse}.timer{border:3px solid var(--mint);border-radius:50%;place-items:center;width:46px;height:46px;font-weight:900;display:grid}.timer--danger{border-color:var(--danger);color:var(--danger);animation:.8s infinite pulse}.game-stage{flex:1;grid-template-columns:minmax(150px,1fr) minmax(280px,min(56vh,520px)) minmax(150px,1fr);align-items:center;gap:clamp(18px,4vw,62px);width:min(1180px,100%);margin:auto;display:grid}.board-column{flex-direction:column;align-items:center;gap:14px;min-width:0;display:flex}.turn-pill,.connection-pill{border:1px solid var(--line);min-height:34px;color:var(--muted);background:#1d1a30cc;border-radius:99px;padding:7px 15px;font-size:12px;font-weight:800}.connection-pill{align-items:center;gap:8px;display:flex}.connection-pill>span:first-child{background:var(--mint);border-radius:50%;width:7px;height:7px}.connection-pill b{color:var(--text);letter-spacing:.1em}.connection-pill--lost{color:var(--danger);border-color:#ff5f7447}.connection-pill--lost>span:first-child{background:var(--danger);box-shadow:0 0 10px var(--danger);animation:.8s infinite pulse}.board-wrap{aspect-ratio:1;background:linear-gradient(145deg,#ffffff14,#ffffff03);border-radius:30px;width:100%;padding:7px;box-shadow:0 32px 68px #04030d5c}.game-board{background:#0d0b18d6;border-radius:25px;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:9px;width:100%;height:100%;padding:10px;display:grid;position:relative}.cell{min-width:0;min-height:0;transition:transform var(--ease), border-color var(--ease), background var(--ease);background:linear-gradient(145deg,#27223e,#1d1a31);border:1px solid #ffffff13;border-radius:clamp(13px,2.5vw,22px);place-items:center;display:grid;position:relative}.cell:not(:disabled):hover{background:#2d2748;border-color:#9681ff8c;transform:translateY(-2px)}.cell:not(:disabled):active{transform:scale(.96)}.cell--filled{cursor:default}.mark{width:53%;height:53%;animation:.26s cubic-bezier(.1,.9,.3,1.4) pop;display:block;position:relative}.mark--x i{background:linear-gradient(90deg, var(--coral), var(--coral-soft));border-radius:99px;height:clamp(7px,1.4vw,13px);position:absolute;top:46%;bottom:auto;left:-6%;right:-6%;transform:rotate(45deg);box-shadow:0 5px 17px #ff795b33}.mark--x i:last-child{transform:rotate(-45deg)}.mark--o{border:clamp(7px, 1.4vw, 13px) solid var(--mint);border-radius:50%;box-shadow:inset 0 0 16px #62d9cf1a,0 5px 17px #62d9cf29}.cell--oldest{border-style:dashed}.cell--next-out{border-color:var(--purple);animation:1.5s ease-in-out infinite old-mark}.cell--next-out .mark{opacity:.64;transform:scale(.9)}.vanish-badge{color:#171226;background:var(--purple);border-radius:50%;place-items:center;width:21px;height:21px;font-size:13px;font-weight:900;display:grid;position:absolute;top:7px;right:8px}.ghost-mark{place-items:center;animation:.42s forwards vanish;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.ghost-mark .mark{width:53%;height:53%}.cell--winning{background:color-mix(in srgb, var(--mint) 15%, var(--surface-2));border-color:var(--mint)}.winning-line{pointer-events:none;width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;top:10px;bottom:10px;left:10px;right:10px;overflow:visible}.winning-line line{stroke:#fff;stroke-width:10px;stroke-linecap:round;filter:drop-shadow(0 0 10px var(--mint));stroke-dasharray:430;animation:.55s forwards draw}.queue-legend{width:100%;color:var(--muted);justify-content:space-between;align-items:center;font-size:11px;font-weight:800;display:flex}.queue-legend>span{align-items:center;gap:5px;display:flex}.legend-note{opacity:.75}.mini-mark{background:var(--surface-2);border-radius:8px;place-items:center;width:24px;height:24px;display:grid}.mini-mark--x{color:var(--coral)}.mini-mark--o{color:var(--mint)}.player-panel{opacity:.55;min-width:0;transition:opacity var(--ease), background var(--ease), transform var(--ease), border var(--ease);border:1px solid #0000;border-radius:20px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;display:grid}.player-panel--right{grid-template-columns:auto minmax(0,1fr) auto}.player-panel--right .avatar{order:3}.player-panel--right .player-panel__text{text-align:right}.player-panel--right .symbol-chip{order:-1}.player-panel.is-active{opacity:1;border-color:var(--line);background:#27223fb3;transform:translateY(-3px)}.player-panel__text{flex-direction:column;min-width:0;display:flex}.player-panel__text strong{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.player-panel__text span{color:var(--muted);font-size:12px}.symbol-chip{border-radius:9px;place-items:center;width:30px;height:30px;font-weight:900;display:grid}.symbol-chip--x{color:var(--coral);background:#ff795b21}.symbol-chip--o{color:var(--mint);background:#62d9cf21}.avatar{border-radius:16px;flex:none;place-items:center;width:50px;height:50px;font-size:19px;font-weight:900;display:grid;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.avatar--purple{background:linear-gradient(145deg, var(--purple), #6655c7)}.avatar--coral{color:#35140e;background:linear-gradient(145deg, var(--coral-soft), var(--coral))}.avatar--mint{color:#08302d;background:linear-gradient(145deg, #8ce9e1, var(--mint))}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#07060eb8;place-items:center;padding:20px;animation:.2s fade;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}.modal{width:min(430px,100%);max-height:calc(100dvh - 40px);box-shadow:var(--shadow);text-align:center;background:linear-gradient(145deg,#30294d,#1b182d);border:1px solid #ffffff21;border-radius:28px;padding:34px;animation:.28s cubic-bezier(.1,.9,.2,1.2) modal-in;position:relative;overflow:hidden}.modal__spark{width:55px;height:55px;color:var(--mint);background:#62d9cf1f;border-radius:18px;place-items:center;margin:0 auto 12px;display:grid}.modal h2{margin:0;font-size:29px}.modal__body{color:var(--muted)}.modal__actions{grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;display:grid}.result-symbol{border-radius:27px;place-items:center;width:90px;height:90px;margin:20px auto 5px;font-size:58px;font-weight:300;display:grid}.result-symbol--x{color:var(--coral);background:#ff795b1f}.result-symbol--o{color:var(--mint);background:#62d9cf1f}.rating-result{margin-top:18px}.rating-result>p{color:var(--muted);margin:10px 0}.rating-result__numbers{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;display:grid}.rating-result__numbers span{flex-direction:column;min-width:0;display:flex}.rating-result__numbers small{color:var(--muted);font-size:11px}.rating-result__numbers b{font-size:24px}.rating-result__numbers>strong{font-size:20px}.rating-result__numbers .positive{color:var(--mint)}.rating-result__numbers .negative{color:var(--danger)}.rating-result__progress{height:6px;margin:10px 0 0}.online-choice{flex-direction:column;min-width:0;display:flex}.online-choice h1{margin-bottom:22px}.divider{background:var(--line);text-align:center;height:1px;margin:28px 0}.divider span{color:var(--muted);background:#24203c;padding:0 12px;font-size:12px;position:relative;top:-9px}.code-input{width:100%;min-width:0;color:var(--muted);flex-direction:column;gap:7px;font-size:12px;font-weight:700;display:flex}.code-input input{border:1px solid var(--line);width:100%;min-width:0;max-width:100%;height:58px;color:var(--text);letter-spacing:.22em;text-transform:uppercase;background:#0b0a1473;border-radius:15px;margin-bottom:12px;padding:0 18px;font-size:23px;font-weight:900}.form-error{color:var(--danger);text-align:center;margin:14px 0 0;font-size:13px}.waiting-card{text-align:center}.waiting-card h1{margin-bottom:9px}.waiting-card p{color:var(--muted);margin:0 0 25px}.radar{background:radial-gradient(circle,#9681ff2e,#0000 65%);border:1px solid #9681ff59;border-radius:50%;place-items:center;width:120px;height:120px;margin:0 auto 25px;display:grid;position:relative}.radar i{border:1px solid #9681ff40;border-radius:50%;animation:1.8s ease-out infinite radar;position:absolute;top:16px;bottom:16px;left:16px;right:16px}.radar i:nth-child(2){animation-delay:.8s}.radar span{z-index:1;color:var(--purple);font-size:48px}.radar--search span{color:var(--mint)}.room-code{justify-content:center;gap:7px;margin:26px 0;display:flex}.room-code b{border:1px solid var(--line);background:var(--bg);width:clamp(38px,10vw,50px);height:56px;color:var(--mint);border-radius:13px;place-items:center;font-size:23px;display:grid}.waiting-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.waiting-actions--three{grid-template-columns:repeat(3,minmax(0,1fr))}.waiting-actions--three .button{padding-inline-start:10px;padding-inline-end:10px}.search-time{font-variant-numeric:tabular-nums;letter-spacing:.08em;margin:-10px 0 22px;font-size:30px;display:block}.online-choice form{grid-template-columns:minmax(0,1fr);width:100%;min-width:0;display:grid}.online-choice form>.button{width:100%;min-width:0;max-width:100%}.copy-notice,.rematch-status{color:var(--mint);margin:14px 0 0;font-size:13px}.surrender-button{min-height:38px;color:var(--danger)}.connection-lost-mark{width:64px;height:64px;color:var(--danger);background:#ff5f741f;border-radius:50%;place-items:center;margin:0 auto 18px;font-size:34px;font-weight:900;display:grid}.abandoned-card .button{width:100%}.abandoned-card .button+.button{margin-top:10px}.panel-screen{width:min(760px,100%);margin:0 auto}.screen-header{grid-template-columns:48px 1fr 48px;align-items:center;gap:12px;height:64px;display:grid}.screen-header h1{text-align:center;margin:0;font-size:20px}.screen-header__action{place-items:center;display:grid}.profile-hero{border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(145deg, #9681ff2e, var(--surface));align-items:center;gap:20px;margin-top:35px;padding:clamp(24px,5vw,38px);display:flex}.profile-hero .avatar{border-radius:25px;width:86px;height:86px;font-size:30px}.profile-hero>div{flex-direction:column;display:flex}.profile-hero span{color:var(--purple);font-weight:900}.profile-hero strong{font-size:42px;line-height:1.1}.profile-hero small{color:var(--muted)}.rank-progress{background:#0e0c19;border-radius:9px;height:8px;margin:-16px 28px 30px;overflow:hidden}.rank-progress span{border-radius:inherit;background:linear-gradient(90deg, var(--purple), var(--mint));height:100%;display:block}.stats-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.stat-card{border:1px solid var(--line);background:var(--surface);border-radius:18px;flex-direction:column;justify-content:space-between;min-height:105px;padding:18px;display:flex}.stat-card span{color:var(--muted);font-size:12px}.stat-card strong{font-size:25px}.stats-summary{grid-template-columns:1.4fr 1fr;gap:12px;margin:34px 0 16px;display:grid}.stats-summary>div{background:linear-gradient(145deg, #62d9cf26, var(--surface));border-radius:22px;flex-direction:column;align-items:flex-start;min-height:140px;padding:24px;display:flex}.stats-summary svg{color:var(--mint);margin-bottom:12px}.stats-summary span{color:var(--muted)}.stats-summary strong{font-size:36px}.stats-list,.settings-card,.leaderboard-card{border:1px solid var(--line);background:var(--surface);border-radius:21px;overflow:hidden}.stats-list div{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;min-height:62px;padding:0 20px;display:flex}.stats-list div:last-child{border:0}.stats-list span{color:var(--muted)}.stats-list b{color:var(--text)}.settings-card{margin:25px 0 16px;padding:20px}.settings-card+.settings-card{margin-top:0}.settings-card h2{align-items:center;gap:9px;margin:0 0 18px;font-size:16px;display:flex}.settings-card h2 svg{color:var(--purple)}.settings-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.segmented{background:var(--bg);border-radius:14px;grid-template-columns:1fr 1fr;padding:4px;display:grid}.segmented button{height:43px;color:var(--muted);background:0 0;border:0;border-radius:11px;font-weight:800}.segmented button.active{color:var(--text);background:var(--surface-3);box-shadow:0 5px 15px #0000002e}.toggle-row{border-top:1px solid var(--line);justify-content:space-between;align-items:center;min-height:56px;display:flex;position:relative}.toggle-row input{opacity:0;position:absolute}.toggle{width:48px;height:27px;transition:background var(--ease);background:#49435c;border-radius:99px;padding:3px}.toggle:after{content:"";width:21px;height:21px;transition:transform var(--ease);background:#fff;border-radius:50%;display:block}.toggle-row input:checked+.toggle{background:var(--mint)}.toggle-row input:checked+.toggle:after{transform:translate(21px)}.toggle-row input:focus-visible+.toggle{outline:3px solid var(--purple);outline-offset:3px}.tutorial-screen{width:min(700px,100%);margin:auto}.tutorial-card{text-align:center;width:min(530px,100%);margin:24px auto 0}.tutorial-visual{border:1px solid var(--line);background:radial-gradient(circle at 50% 42%,#9681ff2e,#1d1a30f5 68%);border-radius:28px;place-items:center;gap:12px;min-height:270px;margin-bottom:18px;padding:22px 24px 14px;display:grid;box-shadow:inset 0 1px #ffffff0d}.mini-board{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:7px;width:190px;height:190px;display:grid}.tutorial-cell{transition:border-color var(--ease), background var(--ease);background:linear-gradient(145deg,#302a4d,#211d37);border:1px solid #ffffff0d;border-radius:14px;place-items:center;font-style:normal;display:grid;position:relative;overflow:hidden}.tutorial-cell>span{font-size:45px;font-weight:300;line-height:1}.tutorial-cell.is-x>span{color:var(--coral)}.tutorial-cell.is-o>span{color:var(--mint)}.tutorial-cell.is-focus{border-color:var(--coral);box-shadow:0 0 0 3px #ff795b1f,inset 0 0 24px #ff795b14}.tutorial-cell.is-oldest{border:2px dashed var(--purple)}.tutorial-cell.is-oldest>span{opacity:.62}.tutorial-cell.is-winning{border-color:var(--mint);background:#62d9cf24;box-shadow:inset 0 0 18px #62d9cf1f}.tutorial-cell.is-vanishing{border:2px dashed var(--purple)}.tutorial-cell.is-vanishing>span{opacity:.26;transform:scale(.78)}.tutorial-cell.is-new{border-color:var(--coral);box-shadow:0 0 18px #ff795b33}.tutorial-cell>b{width:17px;height:17px;color:var(--text);background:#0a0812b8;border-radius:50%;place-items:center;font-size:9px;display:grid;position:absolute;top:4px;left:5px}.tutorial-cell>em{color:var(--purple);font-size:16px;font-style:normal;font-weight:900;position:absolute;top:3px;right:4px}.tutorial-visual__legend{width:min(340px,100%);color:var(--muted);justify-content:space-between;align-items:center;gap:8px;font-size:11px;font-weight:800;display:flex}.tutorial-visual__legend>span{align-items:center;gap:5px;display:flex}.tutorial-visual__legend>span:nth-child(2){color:var(--purple)}.step-count{color:var(--purple);font-size:12px;font-weight:900}.tutorial-card h1{margin:8px 0;font-size:28px}.tutorial-card p{min-height:48px;color:var(--muted);margin:0 auto 14px;line-height:1.5}.tutorial-dots{justify-content:center;gap:7px;margin-bottom:14px;display:flex}.tutorial-dots button{width:8px;height:8px;transition:width var(--ease), background var(--ease);background:#4b455f;border:0;border-radius:8px;padding:0}.tutorial-dots button.active{background:var(--purple);width:25px}.tutorial-actions{grid-template-columns:1fr 1.4fr;gap:10px;display:grid}.tutorial-actions--single{grid-template-columns:1fr}.tutorial-card .button{width:100%}.leaderboard-card{min-height:160px;margin-top:30px;padding:8px}.leaderboard-card>p{color:var(--muted);text-align:center;padding:45px 20px}.leaderboard-card article{border-bottom:1px solid var(--line);grid-template-columns:32px 43px 1fr auto;align-items:center;gap:12px;min-height:66px;padding:8px 14px;display:grid}.leaderboard-card article:last-child{border:0}.leaderboard-card article>b{color:var(--muted);text-align:center}.leaderboard-card article .avatar{border-radius:13px;width:42px;height:42px}.leaderboard-card article strong{color:var(--mint)}.loader-dots{justify-content:center;align-items:center;gap:8px;height:140px;display:flex}.loader-dots i{background:var(--purple);border-radius:50%;width:10px;height:10px;animation:.8s infinite alternate pulse}.loader-dots i:nth-child(2){animation-delay:.2s}.loader-dots i:nth-child(3){animation-delay:.4s}@keyframes pop{0%{opacity:0;transform:scale(.5)rotate(-10deg)}}@keyframes vanish{0%{opacity:.65;transform:scale(.9)}to{opacity:0;transform:scale(.3)rotate(18deg)}}@keyframes old-mark{50%{border-color:#9681ff40;box-shadow:inset 0 0 18px #9681ff14}}@keyframes draw{0%{stroke-dashoffset:430px}to{stroke-dashoffset:0}}@keyframes fade{0%{opacity:0}}@keyframes modal-in{0%{opacity:0;transform:translateY(16px)scale(.96)}}@keyframes pulse{0%{opacity:.45;transform:scale(.9)}to{opacity:1;transform:scale(1.05)}}@keyframes float{50%{transform:translateY(-7px)rotate(1deg)}}@keyframes load{0%{transform:translate(-20%)}to{transform:translate(155%)}}@keyframes radar{0%{opacity:.8;transform:scale(.45)}to{opacity:0;transform:scale(1.4)}}@media (max-width:900px){.home-content{grid-template-columns:1fr;gap:32px;padding-top:42px}.hero-copy{text-align:center}.hero-copy h1{margin-inline-start:auto;margin-inline-end:auto}.hero-rule{text-align:left;width:min(520px,100%);margin-inline-start:auto;margin-inline-end:auto}.quick-links{justify-content:flex-start;padding-bottom:4px;overflow-x:auto}.quick-links button{flex:none}.game-stage{grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr;max-width:600px;padding-top:16px}.board-column{grid-area:2/1/auto/-1;justify-self:center;width:min(78vw,53vh,510px)}.player-panel{padding:9px}.player-panel--right{grid-column:2}.player-panel .avatar{width:42px;height:42px}.player-panel--right .avatar,.player-panel--right .symbol-chip{order:0}.player-panel--right .player-panel__text{text-align:left}}@media (max-width:580px){.screen{padding-inline-start:14px;padding-inline-end:14px}.home-header{align-items:flex-start}.brand>span:last-child{display:none}.profile-pill>span strong{max-width:90px}.home-content{padding-top:30px}.hero-copy h1{font-size:43px}.hero-copy p{font-size:17px}.hero-rule{margin-top:24px}.mode-grid{grid-template-columns:1fr;gap:10px}.mode-card{min-height:94px;padding:14px 16px}.mode-card__icon{width:48px;height:48px}.quick-links button span{display:none}.quick-links{justify-content:center}.quick-links button{justify-content:center;width:45px;padding:0}.home-footer{display:none}.floating-back{top:12px;left:10px}.choice-card,.waiting-card{padding:25px 18px}.centered-screen{padding-top:75px}.difficulty-option{padding-inline-start:12px;padding-inline-end:12px}.game-topbar{grid-template-columns:43px 1fr 43px}.game-topbar .icon-button{width:43px;height:43px}.game-stage{align-content:center;gap:8px;padding-top:8px}.board-column{gap:8px;width:min(92vw,54vh)}.turn-pill{display:none}.player-panel{gap:7px}.player-panel__text strong{font-size:12px}.player-panel__text span{font-size:10px}.player-panel .avatar{border-radius:11px;width:36px;height:36px}.symbol-chip{width:26px;height:26px}.board-wrap{border-radius:22px;padding:5px}.game-board{border-radius:19px;gap:6px;padding:7px}.cell{border-radius:13px}.mark--x i{height:8px}.mark--o{border-width:8px}.vanish-badge{width:18px;height:18px;top:4px;right:4px}.legend-note{text-align:center;max-width:130px}.modal{padding:26px 18px}.modal__actions,.waiting-actions{grid-template-columns:1fr}.room-code{gap:4px}.room-code b{height:49px;font-size:19px}.stats-grid,.stats-summary{grid-template-columns:1fr 1fr}.profile-hero .avatar{width:68px;height:68px}.profile-hero strong{font-size:34px}.tutorial-visual{height:210px}.mini-board{width:155px;height:155px}}@media (max-width:380px){.screen{padding-inline-start:10px;padding-inline-end:10px}.home-header{gap:7px}.home-header__actions{gap:5px}.language-button{min-width:42px}.profile-pill{max-width:150px;padding-right:7px}.profile-pill>span,.profile-pill strong{max-width:88px}.profile-pill strong{font-size:11px}.profile-pill small{font-size:10px}.hero-copy h1{font-size:37px}.stats-summary,.settings-actions{grid-template-columns:1fr}.stats-grid{gap:8px}.stat-card{min-height:92px;padding:14px}}@media (max-height:650px) and (orientation:landscape) and (min-width:760px){.game-topbar{z-index:2;width:auto;position:absolute;left:16px;right:16px}.game-stage{grid-template-rows:1fr;grid-template-columns:minmax(130px,1fr) min(74vh,450px) minmax(130px,1fr);padding-top:0}.board-column{grid-area:1/2;width:min(74vh,450px)}.player-panel--right{grid-column:3}.turn-pill{display:none}}@media (max-width:900px),(max-height:720px){.home-content{grid-template-columns:minmax(0,1fr);align-content:center;gap:10px;padding:12px 0 4px}.hero-copy{display:none}.quick-links{grid-column:1;margin-top:0;padding-bottom:0;overflow:hidden}.panel-screen,.tutorial-screen{flex-direction:column;display:flex}.screen-header{flex:none}.profile-hero{margin-top:12px;padding:18px}.rank-progress{margin:-4px 20px 12px}.stats-grid{gap:8px}.stat-card{min-height:72px;padding:12px}.stats-summary{gap:8px;margin:12px 0}.stats-summary>div{min-height:92px;padding:14px}.stats-summary svg{margin-bottom:5px}.stats-summary strong{font-size:29px}.stats-list div{min-height:46px;padding-inline-start:14px;padding-inline-end:14px}.settings-card{margin:12px 0 8px;padding:14px}.settings-card h2{margin-bottom:10px}.toggle-row{min-height:44px}.tutorial-card{margin-top:10px}.tutorial-visual{gap:8px;height:auto;min-height:min(34dvh,220px);margin-bottom:10px;padding:12px 16px 9px}.mini-board{width:min(22dvh,145px);height:min(22dvh,145px)}.tutorial-card h1{margin:5px 0;font-size:23px}.tutorial-card p{min-height:0;margin-bottom:9px;font-size:13px;line-height:1.35}.tutorial-dots{margin-bottom:9px}.leaderboard-card{min-height:0;margin-top:10px;padding:4px}.leaderboard-card article{grid-template-columns:24px 30px 1fr auto;gap:7px;min-height:39px;padding:3px 8px;font-size:12px}.leaderboard-card article .avatar{border-radius:9px;width:29px;height:29px;font-size:12px}.leaderboard-card>p{padding:28px 12px}}@media (max-width:580px){.screen{padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left))}.home-header{align-items:center}.home-content{padding-top:8px}.mode-card{min-height:72px;padding:9px 12px}.mode-card__icon{border-radius:13px;width:43px;height:43px}.mode-card small{margin-top:2px;font-size:11px}.quick-links button{min-height:38px}.screen-header{grid-template-columns:42px 1fr 42px;height:48px}.screen-header .icon-button{width:42px;height:42px}.profile-hero{gap:12px;padding:12px}.profile-hero .avatar{border-radius:17px;width:56px;height:56px}.profile-hero strong{font-size:28px}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stat-card{min-height:62px;padding:9px}.stat-card span{font-size:10px}.stat-card strong{font-size:20px}.settings-actions{gap:7px}.settings-actions .button{min-height:43px;padding-inline-start:10px;padding-inline-end:10px;font-size:12px}.choice-card,.waiting-card{max-height:calc(100dvh - 62px);padding:20px 16px}.choice-card h1,.waiting-card h1{margin:8px 0 16px;font-size:28px}.difficulty-list{gap:7px}.difficulty-option{grid-template-columns:42px 1fr auto;gap:9px;min-height:64px;padding:7px 11px}.difficulty-option>span{border-radius:12px;width:42px;height:42px}.difficulty-option strong{font-size:15px}.difficulty-option small{font-size:11px}.floating-back{top:max(7px, env(safe-area-inset-top));left:max(7px, env(safe-area-inset-left))}.modal-backdrop{padding:8px}.modal{max-height:calc(100dvh - 16px);padding:18px 14px;overflow:hidden}}@media (max-height:560px){.screen{padding:max(7px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left))}.brand__logo{border-radius:12px;width:40px;height:40px}.brand__logo b{font-size:29px}.profile-pill{height:42px}.profile-pill .avatar{width:32px;height:32px}.home-content{padding:5px 0 0}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.mode-card{gap:9px;min-height:66px;padding:7px 10px}.mode-card__icon{width:40px;height:40px}.mode-card small{display:none}.quick-links button{min-height:34px}.home-footer{display:none}.choice-card,.waiting-card{max-height:calc(100dvh - 20px);padding:12px 16px}.choice-card h1,.waiting-card h1{margin:4px 0 10px;font-size:25px}.difficulty-option{min-height:53px}.difficulty-option>span{width:37px;height:37px}.difficulty-option small{display:none}.radar{width:78px;height:78px;margin-bottom:10px}.waiting-card p{margin-bottom:10px}.room-code{margin:10px 0}.room-code b{height:40px}.divider{margin:12px 0}.code-input input{height:44px;margin-bottom:7px}.screen-header{height:42px}.profile-hero{margin-top:5px;padding:8px}.profile-hero .avatar{width:45px;height:45px}.rank-progress{margin:-3px 16px 6px}.stat-card{min-height:48px;padding:6px 8px}.stats-summary{margin:5px 0}.stats-summary>div{min-height:65px;padding:8px}.stats-summary svg{display:none}.stats-summary strong{font-size:23px}.stats-list div{min-height:36px}.settings-card{margin:5px 0;padding:9px 12px}.settings-card h2{margin-bottom:4px}.toggle-row{min-height:34px}.settings-actions .button{min-height:37px}.tutorial-card{margin-top:2px}.tutorial-visual{gap:4px;height:auto;min-height:min(43dvh,155px);margin-bottom:4px;padding:7px 12px 5px}.mini-board{gap:4px;width:min(28dvh,105px);height:min(28dvh,105px)}.tutorial-cell>span{font-size:30px}.tutorial-card h1{margin:2px 0;font-size:18px}.tutorial-card p{margin-bottom:4px;font-size:11px}.tutorial-dots{margin-bottom:4px}.tutorial-card .button{min-height:37px}.leaderboard-card{margin-top:4px}.leaderboard-card article{min-height:31px;padding-block-start:1px;padding-block-end:1px}.leaderboard-card article .avatar{width:25px;height:25px}.modal__spark{display:none}.modal h2{font-size:21px}.result-symbol{border-radius:15px;width:48px;height:48px;margin:6px auto 2px;font-size:34px}.rating-result{margin-top:4px}.rating-result>p{margin:3px 0}.rating-result__numbers b{font-size:18px}.modal__actions{margin-top:7px}.modal__actions .button{min-height:38px}}@media (max-width:580px),(hover:none) and (pointer:coarse) and (max-width:950px){.brand>span:last-child{display:none}.mobile-game-title{color:var(--text);text-align:center;letter-spacing:-.04em;grid-column:1/-1;margin:0 0 13px;font-size:clamp(26px,8vw,34px);line-height:1;display:block}.mobile-game-title em{color:var(--coral);font-style:normal}}@media (max-width:580px) and (orientation:portrait){.centered-screen{padding-top:max(8px, env(safe-area-inset-top));grid-template-rows:44px minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;display:grid}.centered-screen>.floating-back{grid-area:1/1;place-self:start;position:static}.centered-screen>.choice-card,.centered-screen>.waiting-card{grid-area:2/1;align-self:center;min-width:0}.friend-screen>.choice-card{align-self:start;margin-top:8px}.friend-screen .choice-card{width:min(100%,440px);max-height:none;padding:15px 16px}.friend-screen .online-choice h1{margin:5px 0 12px;font-size:27px}.friend-screen .online-choice>.button,.friend-screen .online-choice form>.button{min-height:44px}.friend-screen .divider{margin:15px 0}.friend-screen .code-input input{height:46px;margin-bottom:7px;font-size:20px}.waiting-room-screen .waiting-card{padding:14px}.waiting-room-screen .radar{width:72px;height:72px;margin-bottom:8px}.waiting-room-screen .radar i{top:10px;bottom:10px;left:10px;right:10px}.waiting-room-screen .radar span{font-size:34px}.waiting-room-screen .waiting-card h1{margin:4px 0 6px;font-size:25px}.waiting-room-screen .waiting-card p{margin-bottom:7px}.waiting-room-screen .room-code{margin:8px 0}.waiting-room-screen .room-code b{height:40px;font-size:18px}.waiting-room-screen .waiting-actions{grid-template-columns:1fr 1fr;gap:7px}.waiting-room-screen .waiting-actions .button{min-height:41px;padding-inline-start:7px;padding-inline-end:7px;font-size:11px}.tutorial-visual{min-height:min(31dvh,205px)}.tutorial-card p{font-size:12px}}@media (orientation:landscape) and (max-height:650px){.home-screen{padding-top:max(6px, env(safe-area-inset-top));padding-bottom:max(6px, env(safe-area-inset-bottom))}.home-header{flex:none;min-height:40px}.home-content{grid-template-rows:auto minmax(0,1fr) auto auto;align-content:stretch;gap:4px;width:min(780px,100%);min-height:0;margin:0 auto;padding:2px 0 0}.mobile-game-title{align-self:center;margin:0;font-size:clamp(18px,6dvh,24px);display:block}.mode-grid{grid-template-rows:repeat(2,minmax(0,1fr));gap:5px 7px;min-height:0}.mode-card{border-radius:15px;gap:7px;height:100%;min-height:0;padding:4px 9px}.mode-card__icon{border-radius:12px;width:clamp(32px,12dvh,40px);height:clamp(32px,12dvh,40px)}.mode-card strong{font-size:clamp(13px,4.5dvh,16px)}.mode-card__arrow{font-size:22px}.quick-links{justify-content:center;gap:clamp(5px,2vw,16px);min-width:0;min-height:30px;overflow:visible}.quick-links button{flex:0 0 40px;justify-content:center;width:40px;min-height:30px;padding:0}.quick-links button span{display:none}.centered-screen{padding-top:max(7px, env(safe-area-inset-top));grid-template-rows:minmax(0,1fr);grid-template-columns:52px minmax(0,520px) 10px;justify-content:space-between;align-items:center;display:grid}.centered-screen>.floating-back{grid-area:1/1;place-self:start;width:42px;min-height:42px;padding:0;font-size:0;position:static;overflow:hidden}.centered-screen>.floating-back .icon{width:21px;height:21px}.centered-screen>.choice-card,.centered-screen>.waiting-card{grid-area:1/2;align-self:center;width:100%;max-height:100%}.friend-screen .choice-card{padding:11px 15px}.friend-screen .online-choice h1{margin:3px 0 8px}.friend-screen .online-choice>.button,.friend-screen .online-choice form>.button{min-height:38px}.friend-screen .divider{margin:10px 0}.friend-screen .code-input{gap:3px}.friend-screen .code-input input{height:39px;margin-bottom:5px}.waiting-room-screen .waiting-actions{grid-template-columns:1fr 1fr;gap:6px}.waiting-room-screen .waiting-actions .button{min-height:36px;font-size:10px}.game-topbar{z-index:3;top:max(7px, env(safe-area-inset-top));left:max(9px, env(safe-area-inset-left));right:max(9px, env(safe-area-inset-right));width:auto;position:absolute}.game-stage{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(90px,1fr) auto minmax(90px,1fr);gap:clamp(8px,2vw,22px);width:100%;max-width:1180px;padding-top:48px}.board-column{grid-area:1/2;gap:5px;width:min(68dvh,46vw,430px)}.player-panel{grid-row:1;padding:8px}.player-panel--left{grid-column:1}.player-panel--right{grid-column:3}.player-panel--right .avatar{order:3}.player-panel--right .symbol-chip{order:-1}.player-panel--right .player-panel__text{text-align:right}.connection-pill,.turn-pill,.surrender-button{display:none}.queue-legend{font-size:10px}.mini-mark{width:20px;height:20px}.tutorial-screen{grid-template-rows:1fr;grid-template-columns:48px minmax(0,1fr);gap:10px;max-width:900px;display:grid}.tutorial-screen .screen-header{grid-column:1;align-self:start;width:42px;height:42px;display:block}.tutorial-screen .screen-header h1,.tutorial-screen .screen-header__action{display:none}.tutorial-screen .tutorial-card{grid-column:2;grid-template-rows:auto auto auto 1fr auto;grid-template-columns:minmax(180px,.9fr) minmax(230px,1.1fr);align-items:center;column-gap:16px;width:100%;max-width:760px;margin:0 auto;display:grid}.tutorial-screen .tutorial-visual{grid-area:1/1/-1;min-height:min(88dvh,310px);margin:0}.tutorial-screen .mini-board{width:min(43dvh,160px);height:min(43dvh,160px)}.tutorial-screen .step-count,.tutorial-screen .tutorial-card h1,.tutorial-screen .tutorial-card p,.tutorial-screen .tutorial-dots,.tutorial-screen .tutorial-actions{grid-column:2}.tutorial-screen .tutorial-card h1{margin:3px 0}.tutorial-screen .tutorial-card p,.tutorial-screen .tutorial-dots{margin-bottom:5px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}