@font-face{font-family:Space Grotesk;font-weight:300 700;font-display:swap;src:url(/assets/SpaceGrotesk-latin-BhU9QXUp.woff2)format("woff2");unicode-range:U+??,U+2013-2014,U+2018-201D,U+2026,U+2190-2193}@font-face{font-family:Noto Sans Thai;font-weight:100 900;font-display:swap;src:url(/assets/NotoSansThai-thai-CtQSZ1tK.woff2)format("woff2");unicode-range:U+E01-E5B}:root{--paper:#fff4dc;--paper-dot:#e2c4828c;--ink:#1b1b1f;--muted:#5d584f;--white:#fff;--sun:#ffd23f;--sun-soft:#fff0b3;--mint:#3ddc97;--mint-soft:#c8f5df;--pink:#ff5fa2;--pink-soft:#ffd3e6;--online:#1fae6c;--disabled:#d9d2c3;--scrim:#1b1b1f73;--font-ui:"Noto Sans Thai", "PingFang TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Sukhumvit Set", "Thonburi", "Leelawadee UI", system-ui, sans-serif;--font-display:"Space Grotesk", var(--font-ui);--fs-11:11px;--fs-12:12px;--fs-13:13px;--fs-15:15px;--fs-17:17px;--fs-19:19px;--fs-22:22px;--fs-28:28px;--fs-40:40px;--fs-56:56px;--bw:3px;--bw-thin:2px;--r-pill:999px;--r-card:20px;--r-btn:15px;--r-input:13px;--r-board:24px;--sh-card:6px 6px 0 var(--ink);--sh-btn:4px 4px 0 var(--ink);--sh-btn-pressed:1px 1px 0 var(--ink);--sh-board:8px 8px 0 var(--ink);--slot:84px;--slot-gap:12px;--board-pad:14px;--ease-out:cubic-bezier(.2, .8, .2, 1);--ease-in:cubic-bezier(.55, 0, 1, .45);--ease-back:cubic-bezier(.34, 1.56, .64, 1);--dur-fast:.12s;--dur-base:.18s;--dur-slow:.32s}@media (width<=620px),(orientation:landscape) and (height<=500px){:root{--bw:2px;--r-card:18px;--r-board:18px;--sh-card:4px 4px 0 var(--ink);--sh-btn:3px 3px 0 var(--ink);--sh-board:5px 5px 0 var(--ink)}}*{box-sizing:border-box}html,body{margin:0}body{min-width:320px;min-height:100dvh;color:var(--ink);background:radial-gradient(var(--paper-dot) 1.3px, transparent 1.6px) 0 0 / 20px 20px, var(--paper);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;font-synthesis:none;overflow-x:hidden}button,input,select{min-height:44px;font:inherit;color:inherit}button{cursor:pointer}h1,h2,p{margin:0}:root{--sat:max(16px, env(safe-area-inset-top));--sab:max(18px, env(safe-area-inset-bottom));--sx:18px;--sxl:max(var(--sx), env(safe-area-inset-left));--sxr:max(var(--sx), env(safe-area-inset-right))}.app{min-height:100dvh;padding:var(--sat) var(--sxr) var(--sab) var(--sxl);flex-direction:column;display:flex;position:relative}.app>main{flex-direction:column;flex:1;display:flex}.icon{flex:none}.token{border:var(--bw) solid var(--ink);border-radius:50%;flex:none;display:block;position:relative}.token.green{background:var(--mint)}.token.pink{background:var(--pink)}.token:before{content:"";background:#ffffffb3;border-radius:50%;width:26%;height:16%;position:absolute;top:11%;left:17%;transform:rotate(-30deg)}.token:after{content:"";position:absolute}.token.green:after{border:var(--pattern-w,3px) solid var(--ink);border-radius:50%;inset:27%}.token.pink:after{border-top:var(--pattern-w,3px) solid var(--ink);border-bottom:var(--pattern-w,3px) solid var(--ink);inset:21%;transform:rotate(-28deg)}.token.mini,.token.stat-token{border-width:2px}.token.mini:before,.token.mini:after,.token.stat-token:before,.token.stat-token:after{display:none}.token.status-token,.token.player-token,.token.emblem{--pattern-w:2.5px}.token.ghost{border-style:dashed}.token.ghost.green{background:#3ddc9773}.token.ghost.pink{background:#ff5fa266}.token.ghost:before{display:none}.token.ghost:after{opacity:.4}.topbar{z-index:5;justify-content:space-between;align-items:center;gap:12px;width:min(1120px,100%);min-height:58px;margin:0 auto;display:flex;position:relative}.app-banner{min-height:68px;margin:calc(env(safe-area-inset-top) - var(--sat)) calc(-1 * var(--sxr)) calc(var(--sat) - env(safe-area-inset-top)) calc(-1 * var(--sxl));padding:0 var(--sxr) 0 env(safe-area-inset-left);color:var(--ink);background:var(--white);border-bottom:var(--bw-thin) solid var(--ink);flex:none;align-items:center;gap:8px;display:flex}.app-banner-close{width:44px;height:44px;color:inherit;font-family:var(--font-ui);background:0 0;border:0;flex:none;place-items:center;margin:0;padding:0;font-size:16px;font-weight:400;display:grid}.app-banner-icon{border:var(--bw-thin) solid var(--ink);border-radius:11px;flex:none;width:44px;height:44px}.app-banner-copy{flex:1;gap:1px;min-width:0;display:grid}.app-banner-name{font-size:var(--fs-15);white-space:nowrap;text-overflow:ellipsis;font-weight:800;overflow:hidden}.app-banner-text{color:var(--muted);font-size:var(--fs-13);font-weight:700}.app-banner-open{border:var(--bw-thin) solid var(--ink);min-height:44px;color:var(--ink);background:var(--mint);box-shadow:2px 2px 0 var(--ink);font-size:var(--fs-15);white-space:nowrap;border-radius:999px;flex:none;align-items:center;padding:0 16px;font-weight:800;text-decoration:none;display:flex}.app-banner-open:active{box-shadow:none;transform:translate(2px,2px)}.app-banner-open.is-busy{opacity:.45}.brand{color:var(--ink);font-family:var(--font-display);letter-spacing:-.01em;align-items:center;gap:12px;font-size:22px;font-weight:700;text-decoration:none;display:inline-flex}.brand-mark{width:44px;height:34px;position:relative}.token.mini{width:28px;height:28px;position:absolute}.token.mini:first-child{z-index:1;top:0;left:0}.token.mini:last-child{bottom:0;right:0}.topbar-actions{align-items:center;gap:10px;display:flex}.connection-pill{border:var(--bw-thin) solid var(--ink);border-radius:var(--r-pill);background:var(--sun-soft);min-height:34px;font-size:var(--fs-13);align-items:center;gap:8px;padding:4px 12px 4px 10px;font-weight:700;display:flex}.connection-pill.offline{background:var(--pink-soft)}.status-dot{border:1.5px solid var(--ink);background:var(--sun);border-radius:50%;width:9px;height:9px}.offline .status-dot{background:var(--pink)}.profile{border:var(--bw-thin) solid var(--ink);border-radius:var(--r-pill);background:var(--white);box-shadow:3px 3px 0 var(--ink);align-items:center;gap:9px;padding:5px 13px 5px 5px;display:flex}.avatar{border:2px solid var(--ink);background:var(--pink);border-radius:50%;place-items:center;width:34px;height:34px;font-weight:800;display:grid}.profile-name{font-size:var(--fs-15);font-weight:700}.btn{border:var(--bw) solid var(--ink);border-radius:var(--r-btn);background:var(--white);min-height:48px;box-shadow:var(--sh-btn);font-size:var(--fs-17);white-space:nowrap;transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);justify-content:center;align-items:center;gap:9px;padding:10px 18px;font-weight:800;display:inline-flex}.btn:active:not(:disabled){box-shadow:var(--sh-btn-pressed);transform:translate(3px,3px)}.btn.primary{background:var(--mint)}.btn.dark{color:var(--white);background:var(--ink);box-shadow:4px 4px 0 var(--pink)}.btn.ghost{box-shadow:none;text-underline-offset:4px;background:0 0;border-color:#0000;text-decoration:underline;text-decoration-thickness:2px}.btn.big{min-height:56px;font-size:var(--fs-19)}.btn.is-done{background:var(--mint-soft)}.btn:disabled{color:var(--muted);border-color:var(--muted);background:repeating-linear-gradient(-45deg, transparent 0 6px, #5d584f1f 6px 8px), var(--disabled);box-shadow:none;cursor:not-allowed}.btn.is-waiting:disabled{color:var(--ink);border-color:var(--ink);background:var(--mint-soft)}.btn .icon{width:20px;height:20px}.card,.mode-card,.center-card{border:var(--bw) solid var(--ink);border-radius:var(--r-card);background:var(--white);box-shadow:var(--sh-card)}.lobby{width:min(1120px,100%);margin:auto;padding:28px 0}.lobby-grid{grid-template-rows:auto auto;grid-template-columns:540px 1fr;gap:24px 28px;display:grid}.mode-card{flex-direction:column;gap:18px;min-width:0;padding:24px;display:flex}.ai-card{background:var(--sun-soft);grid-row:span 2}.card-head{grid-template-columns:52px minmax(0,1fr);align-items:start;gap:16px;display:grid;position:relative}.card-icon{border:var(--bw) solid var(--ink);width:52px;height:52px;box-shadow:3px 3px 0 var(--ink);border-radius:16px;place-items:center;display:grid}.card-icon .icon{width:28px;height:28px}.card-icon.ai{background:var(--mint)}.card-icon.friends{background:var(--pink)}.card-icon.match{background:var(--sun)}.card-copy h2{letter-spacing:-.01em;margin-bottom:6px;font-size:26px;font-weight:900}.card-copy p{color:var(--muted);font-size:var(--fs-15);line-height:1.55}.card-toggle{display:none}.card-panel{gap:12px;margin-top:auto;display:grid}.join-row{grid-template-columns:minmax(0,1fr) auto;gap:10px;display:grid}input,select{border:var(--bw-thin) solid var(--ink);border-radius:var(--r-input);background:var(--white);appearance:none;width:100%;height:48px;padding:0 14px;font-size:16px}.code-input{font-family:var(--font-display);letter-spacing:.18em;text-transform:uppercase;font-weight:700}.code-input::placeholder{font-family:var(--font-ui);letter-spacing:normal;color:var(--muted);font-weight:400}.code-input.filled{background:var(--sun-soft)}.meta-chip .dot{border:1.5px solid var(--ink);background:var(--online);border-radius:50%;width:9px;height:9px}.btn.with-arrow .icon{width:22px;height:22px}.mini-board{--m:40px;--mg:7px;border:var(--bw) solid var(--ink);background:var(--sun);box-shadow:5px 5px 0 var(--ink);border-radius:18px;align-self:center;margin:4px 0;padding:10px}.mini-board .grid{grid-template-columns:repeat(7, var(--m));grid-auto-rows:var(--m);gap:var(--mg);display:grid}.mini-board .cell{border:2px solid var(--ink);background:var(--paper);border-radius:50%;position:relative}.mini-board .cell .token{--pattern-w:2px;border-width:2px;position:absolute;inset:-2px}.notice-banner{border:var(--bw) solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:var(--pink-soft);border-radius:16px;align-items:center;gap:12px;margin-bottom:22px;padding:12px 16px;font-weight:700;display:flex}.code{font-family:var(--font-display);letter-spacing:.12em}.center-screen{place-items:center;width:min(1120px,100%);margin:auto;padding:28px 0;display:grid}.center-card{text-align:center;flex-direction:column;align-items:center;gap:14px;width:min(520px,100%);padding:36px 32px 32px;display:flex}.eyebrow{border:var(--bw-thin) solid var(--ink);border-radius:var(--r-pill);background:var(--sun);font-size:var(--fs-13);letter-spacing:.06em;padding:3px 12px;font-weight:800}.center-card h1{letter-spacing:-.01em;font-size:36px;font-weight:900;line-height:1.2}.lead{max-width:420px;color:var(--muted);font-size:var(--fs-17);line-height:1.6}.meta-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.meta-chip{border:var(--bw-thin) solid var(--ink);border-radius:var(--r-pill);background:var(--paper);font-family:var(--font-display), var(--font-ui);font-size:var(--fs-15);align-items:center;gap:8px;padding:5px 12px;font-weight:700;display:inline-flex}.center-card>.btn{min-width:220px;margin-top:8px}.searching-anim{border:var(--bw) solid var(--ink);background:var(--sun);width:188px;height:92px;box-shadow:5px 5px 0 var(--ink);border-radius:18px;align-items:center;margin-bottom:6px;padding:10px 14px;display:flex}.searching-anim .lane{justify-content:space-between;width:100%;display:flex}.searching-anim .token{width:44px;height:44px}.searching-anim .token:nth-child(2){transform:translateY(-12px)rotate(-12deg)}.room-code-block{border:var(--bw) dashed var(--ink);background:var(--sun-soft);border-radius:18px;width:100%;margin-top:6px;padding:16px}.room-code-block span{color:var(--muted);font-size:var(--fs-13);font-weight:700;display:block}.room-code-block strong{font-family:var(--font-display);letter-spacing:.16em;text-indent:.16em;margin-top:2px;font-size:52px;font-weight:700;line-height:1.1;display:block}.waiting-card{text-align:left;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:36px;width:min(880px,100%);padding:36px;display:grid}.waiting-main{flex-direction:column;align-items:flex-start;gap:14px;display:flex}.waiting-actions{grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:6px;display:grid}.waiting-actions .btn.ghost{grid-column:1/-1;justify-self:start;padding-left:4px}.qr-card{border:var(--bw) solid var(--ink);background:var(--white);box-shadow:var(--sh-card);text-align:center;border-radius:20px;margin:0;padding:20px 20px 16px;transform:rotate(2deg)}.qr-card img{width:100%;image-rendering:pixelated;display:block}.qr-card figcaption{font-size:var(--fs-15);margin-top:12px;font-weight:800}.big-icon{border:var(--bw) solid var(--ink);background:var(--sun);width:76px;height:76px;box-shadow:4px 4px 0 var(--ink);border-radius:22px;place-items:center;display:grid}.big-icon .icon{width:40px;height:40px}.game{--board-w:calc(7 * var(--slot) + 6 * var(--slot-gap) + 2 * var(--board-pad) + 2 * var(--bw));grid-template-columns:var(--board-w) 352px;justify-content:space-between;align-items:start;width:min(1120px,100%);margin:22px auto 0;display:grid}.board-unit{width:var(--board-w)}.board-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;min-height:48px;padding:0 4px 0 0;display:flex;position:relative}.board-head.in-side{display:none}.turn-status{border:var(--bw) solid var(--ink);border-radius:var(--r-pill);background:var(--white);box-shadow:4px 4px 0 var(--ink);align-items:center;gap:10px;padding:5px 16px 5px 6px;display:flex;transform:rotate(-1.5deg)}.mine .turn-status,.back .turn-status{background:var(--mint)}.theirs .turn-status{background:var(--white)}.thinking .turn-status{background:var(--pink-soft)}.paused .turn-status{background:var(--sun)}.error .turn-status{background:var(--pink)}.muted .turn-status{background:var(--disabled);box-shadow:none;transform:none}.turn-status strong{font-size:var(--fs-22);white-space:nowrap;font-weight:900}.turn-status .hint{font-size:var(--fs-15);font-weight:600}.token.status-token{width:32px;height:32px}.draw-pair{display:flex}.draw-pair .token+.token{margin-left:-10px}.status-icon{place-items:center;width:32px;height:32px;display:grid}.move-chip{border:var(--bw) solid var(--ink);border-radius:var(--r-pill);background:var(--white);min-height:36px;box-shadow:3px 3px 0 var(--ink);font-family:var(--font-display), var(--font-ui);font-size:var(--fs-15);font-variant-numeric:tabular-nums;white-space:nowrap;align-items:center;gap:8px;padding:5px 14px;font-weight:700;display:inline-flex;position:relative}.move-chip .ring,.token-ring{background:conic-gradient(var(--ink) calc(var(--p) * 360deg), transparent 0);border-radius:50%;width:20px;height:20px;-webkit-mask:radial-gradient(circle,#0000 5px,#000 5.5px);mask:radial-gradient(circle,#0000 5px,#000 5.5px)}.move-chip .ring{outline:1.5px solid var(--ink);outline-offset:-1px;display:inline-block}.countdown{background:var(--sun);font-size:var(--fs-19)}.head-note{color:var(--muted);font-size:var(--fs-15);flex-basis:100%;padding-left:6px;font-weight:600}.rail{height:calc(var(--slot) + 18px);position:relative}.hand{top:6px;left:calc(var(--bw) + var(--board-pad) + var(--col) * (var(--slot) + var(--slot-gap)));width:var(--slot);height:var(--slot);position:absolute}.hand .token{position:absolute;inset:0}.token.in-hand{box-shadow:5px 5px 0 var(--ink);transform:rotate(-10deg)}.drop-cue{border-top:10px solid var(--ink);border-left:8px solid #0000;border-right:8px solid #0000;position:absolute;bottom:-15px;left:50%;transform:translate(-50%)}.board{width:var(--board-w);padding:var(--board-pad);border:var(--bw) solid var(--ink);border-radius:var(--r-board);background:var(--sun);box-shadow:var(--sh-board);position:relative}.board .grid{z-index:1;grid-template-columns:repeat(7, var(--slot));grid-auto-rows:var(--slot);gap:var(--slot-gap);display:grid;position:relative}.board .cell{border:var(--bw) solid var(--ink);background:var(--paper);border-radius:50%;position:relative;box-shadow:inset 0 5px #1b1b1f24}.board .cell>.token{inset:calc(-1 * var(--bw));position:absolute}.board .cell.is-last{box-shadow:0 0 0 4px var(--ink)}.board .cell.is-win>.token{z-index:2;box-shadow:0 0 0 4px var(--white), 0 0 0 7px var(--ink);transform:scale(1.06)}.col-hover{z-index:0;top:calc(var(--board-pad) - var(--slot-gap) / 2);bottom:calc(var(--board-pad) - var(--slot-gap) / 2);left:calc(var(--board-pad) + var(--hc) * (var(--slot) + var(--slot-gap)) - var(--slot-gap) / 2);width:calc(var(--slot) + var(--slot-gap));border-radius:calc(var(--slot) / 2 + var(--slot-gap) / 2);outline:2px dashed var(--ink);outline-offset:-2px;background:#ffffff73;position:absolute}.board.is-disabled:not(.is-finished) .grid{filter:saturate(.85)}.win-line{z-index:3;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.win-line line{stroke:var(--ink);stroke-width:10px;stroke-linecap:round;filter:drop-shadow(0 0 0 var(--white)) drop-shadow(3px 3px 0 var(--white))}.board-overlay{z-index:4;border-radius:calc(var(--r-board) - var(--bw));background:repeating-linear-gradient(-45deg,#fff4dcb3 0 10px,#fff4dc73 10px 20px);place-items:center;display:grid;position:absolute;inset:0}.overlay-card{border:var(--bw) solid var(--ink);background:var(--white);max-width:78%;box-shadow:var(--sh-card);text-align:center;border-radius:18px;justify-items:center;gap:6px;padding:18px 22px;display:grid}.overlay-card .icon{width:32px;height:32px}.overlay-card strong{font-size:var(--fs-19);font-weight:900}.overlay-card small{color:var(--muted);font-size:var(--fs-15)}.side{gap:16px;display:grid}.match-card{padding:18px}.mode-label{border:var(--bw-thin) solid var(--ink);border-radius:var(--r-pill);background:var(--sun);font-size:var(--fs-13);margin-bottom:12px;padding:3px 11px;font-weight:800;display:inline-block}.player{border:var(--bw-thin) solid transparent;border-radius:16px;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:76px;padding:12px 14px;display:grid}.player.is-current{border-color:var(--ink);background:var(--mint-soft)}.player.is-current:not(.is-me){background:var(--paper)}.player.is-away .token.player-token,.player.is-away .player-copy{opacity:.5}.player-token-wrap{width:44px;height:44px;position:relative}.token.player-token{width:44px;height:44px}.token-ring{background:conic-gradient(var(--pink) calc(var(--p) * 360deg), #1b1b1f1f 0);width:auto;height:auto;position:absolute;inset:-7px;-webkit-mask:radial-gradient(circle,#0000 26px,#000 26.5px);mask:radial-gradient(circle,#0000 26px,#000 26.5px)}.player-copy strong,.player-copy small{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.player-copy strong{font-size:18px;font-weight:900}.player-copy small{color:var(--muted);font-size:var(--fs-13);margin-top:2px}.turn-tag,.presence-tag{border:var(--bw-thin) solid var(--ink);border-radius:var(--r-pill);font-size:var(--fs-12);white-space:nowrap;align-items:center;gap:6px;padding:4px 10px;font-weight:800;display:inline-flex}.turn-tag{background:var(--mint);transform:rotate(3deg)}.presence-tag{color:var(--muted);border-color:#0000}.presence-tag i{border:1.5px solid var(--ink);background:var(--online);border-radius:50%;width:8px;height:8px}.presence-tag.off{border-color:var(--ink);color:var(--ink);background:var(--sun)}.versus{place-items:center;height:26px;font-size:14px;font-weight:800;display:grid;position:relative}.versus:before{background:var(--ink);content:"";height:2px;position:absolute;top:50%;left:12px;right:12px}.versus span{background:var(--white);padding:0 10px;position:relative}.series{border-top:2px dashed var(--ink);font-family:var(--font-display), var(--font-ui);align-items:baseline;gap:8px;margin-top:12px;padding-top:12px;display:flex}.series span{color:var(--muted);font-family:var(--font-ui);font-size:var(--fs-13);margin-right:auto;font-weight:700}.series b{font-size:var(--fs-28);font-weight:700}.series i{font-style:normal;font-weight:700}.info-card{grid-template-columns:1fr 1.7fr;padding:16px 18px;display:grid}.info-card>div+div{border-left:2px dashed var(--ink);padding-left:16px}.info-card small{color:var(--muted);font-size:var(--fs-12);margin-bottom:3px;font-weight:700;display:block}.info-card strong{font-size:var(--fs-22);white-space:nowrap;align-items:center;gap:8px;font-weight:900;display:flex}.token.stat-token{width:20px;height:20px}.actions .btn,.result-actions .btn{border-radius:17px;width:100%;min-height:56px}.kbd-hint{color:var(--muted);font-size:var(--fs-13);text-align:center}kbd{border:2px solid var(--ink);background:var(--white);min-width:26px;box-shadow:2px 2px 0 var(--ink);color:var(--ink);font-family:var(--font-display), var(--font-ui);font-size:var(--fs-12);text-align:center;border-radius:7px;margin:0 2px;padding:1px 6px;font-weight:700;display:inline-block}.result-card{padding:0;overflow:hidden}.result-top{border-bottom:var(--bw) solid var(--ink);grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;padding:20px 20px 18px;display:grid}.win .result-top{background:repeating-conic-gradient(from 0deg at 12% 50%, var(--sun) 0 9deg, #ffe38a 9deg 18deg)}.lose .result-top{color:var(--white);background:var(--ink)}.lose .result-top .emblem-icon{box-shadow:4px 4px #5d584f}.draw .result-top{background:var(--white);border-bottom-style:dashed}.error .result-top{background:var(--sun-soft)}.result-top h2{font-size:var(--fs-28);font-weight:900;line-height:1.2}.result-top p{font-size:var(--fs-15);margin-top:4px;font-weight:600;line-height:1.5}.token.emblem{width:60px;height:60px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-10deg)}.emblem-pair{display:flex}.emblem-pair .token+.token{margin-left:-22px;transform:rotate(10deg)}.emblem-icon{border:var(--bw) solid var(--ink);background:var(--white);width:60px;height:60px;box-shadow:4px 4px 0 var(--ink);border-radius:18px;place-items:center;display:grid}.emblem-icon .icon{width:32px;height:32px}.rematch-row{border-bottom:var(--bw) dashed var(--ink);background:var(--paper);align-items:center;gap:14px;padding:14px 20px;display:flex}.rematch-row strong,.rematch-row small{display:block}.rematch-row strong{font-size:var(--fs-15)}.rematch-row small{color:var(--muted);font-size:var(--fs-13)}.dots{gap:4px;display:flex}.dots i{border:1.5px solid var(--ink);background:var(--mint);border-radius:50%;width:9px;height:9px}.dots i:nth-child(2){background:var(--sun);transform:translateY(-4px)}.thinking-dots{margin-left:-2px}.dots.thinking-dots i,.dots.thinking-dots i:nth-child(n){background:var(--ink);width:8px;height:8px}.dots i:nth-child(3){background:var(--pink)}.result-actions{gap:12px;padding:18px;display:grid}.toast{z-index:20;right:var(--sx);bottom:var(--sab);width:min(460px, calc(100% - 2 * var(--sx)));border:var(--bw) solid var(--ink);background:var(--pink-soft);box-shadow:var(--sh-card);border-radius:16px;align-items:center;gap:12px;padding:10px 10px 10px 14px;font-weight:700;display:flex;position:fixed}.toast>span:nth-child(2){flex:1}.toast-icon{border:2px solid var(--ink);background:var(--pink);width:30px;height:30px;font-family:var(--font-display);border-radius:50%;place-items:center;font-weight:700;display:grid}.toast button{background:0 0;border:0;place-items:center;width:44px;height:44px;display:grid}.scrim{z-index:30;padding:var(--sat) var(--sx) var(--sab);background:var(--scrim);place-items:center;display:grid;position:fixed;inset:0}.profile-sheet{border:var(--bw) solid var(--ink);background:var(--white);width:min(440px,100%);box-shadow:8px 8px 0 var(--ink);border-radius:24px;padding:26px}.profile-sheet h2{margin-bottom:20px;font-size:26px;font-weight:900}.profile-sheet label{margin-bottom:16px;display:block}.field-label{font-size:var(--fs-13);margin-bottom:7px;font-weight:800;display:block}input.has-error{border-color:var(--ink);background:var(--pink-soft);box-shadow:0 0 0 3px var(--pink)}input.is-focused{outline:3px solid var(--ink);outline-offset:2px}.form-error{font-size:var(--fs-13);align-items:center;gap:6px;margin:-8px 0 14px;font-weight:800;display:flex}.form-error .icon{width:16px;height:16px}.select-field{display:block;position:relative}.select-field .icon{pointer-events:none;width:18px;height:18px;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.sheet-handle{display:none}.sheet-actions{grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;display:grid}@media (width>=901px) and (height<=820px){:root{--slot:68px;--slot-gap:10px;--board-pad:12px}.game{margin-top:12px}.rail{height:calc(var(--slot) + 14px)}.lobby{padding:12px 0}.mini-board{--m:32px;--mg:6px}.result-top{padding:16px 18px 14px}.is-finished .info-card{display:none}}@media (width>=621px) and (width<=900px){:root{--slot:76px;--slot-gap:10px;--board-pad:12px}.lobby-grid{grid-template-columns:1fr 1fr}.ai-card{grid-area:auto/1/auto/-1;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;display:grid}.ai-card .mini-board{--m:34px;--mg:6px;grid-area:1/2/span 2}.ai-card>.btn{align-self:end}.game{width:var(--board-w);grid-template-columns:1fr;gap:16px}}@media (width<=620px){:root{--slot:min(48px, calc((100vw - 86px) / 7));--slot-gap:6px;--board-pad:9px;--sx:14px}.topbar{min-height:52px}.brand{gap:10px;font-size:20px}.brand-mark{width:38px;height:30px}.token.mini{width:25px;height:25px}.profile{padding:3px}.profile-name{display:none}.avatar{width:38px;height:38px}.connection-pill{font-size:var(--fs-12)}.view-lobby{padding-right:max(20px, env(safe-area-inset-right));padding-left:max(20px, env(safe-area-inset-left))}.view-lobby .app-banner{margin-right:calc(-1 * max(20px, env(safe-area-inset-right)));margin-left:calc(-1 * max(20px, env(safe-area-inset-left)))}.lobby{padding:16px 0}.lobby-grid{grid-template-columns:1fr;gap:16px}.ai-card{grid-row:auto;gap:14px;padding:16px}.mode-card{padding:16px}.card-head{grid-template-columns:44px minmax(0,1fr);gap:12px}.collapsible .card-head{grid-template-columns:44px minmax(0,1fr) 28px;align-items:center}.card-icon{border-radius:13px;width:44px;height:44px}.card-icon .icon{width:24px;height:24px}.card-copy h2{margin-bottom:3px;font-size:21px}.card-copy p{font-size:14px;line-height:1.45}.collapsible:not(.is-expanded) .card-copy p,.collapsible:not(.is-expanded) .card-panel{display:none}.collapsible:not(.is-expanded) .card-copy h2{margin:0}.card-toggle{background:0 0;border:0;justify-content:flex-end;align-items:center;padding:0 12px 0 0;display:flex;position:absolute;inset:-16px}.is-expanded .card-toggle{align-items:flex-start;padding-top:26px}.is-expanded .card-toggle .icon{transform:rotate(180deg)}.collapsible.is-expanded .card-panel{margin-top:0}.mini-board{--m:34px;--mg:5px;padding:8px}.notice-banner{font-size:var(--fs-15);margin-bottom:16px;padding:10px 12px}.center-screen{padding:12px 0}.center-card{padding:26px 18px 22px}.center-card h1{font-size:28px}.lead{font-size:var(--fs-15)}.waiting-card{text-align:center;gap:14px;display:flex}.waiting-main{display:contents}.waiting-card .room-code-block{order:1;margin:0}.room-code-block{padding:10px}.room-code-block strong{font-size:40px}.qr-card{order:2;width:172px;padding:12px 12px 10px}.qr-card figcaption{font-size:var(--fs-13);margin-top:6px}.waiting-actions{order:3;grid-template-columns:1fr;gap:10px}.waiting-actions .btn.ghost{justify-self:center;min-height:44px}.game{flex-direction:column;flex:1;align-items:stretch;width:100%;margin-top:10px;display:flex}.side{display:contents}.match-card{order:1;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);align-items:center;padding:6px;display:grid}.mode-label,.turn-tag,.presence-tag:not(.off),.info-card,.kbd-hint{display:none}.presence-tag.off{font-size:var(--fs-11);padding:1px 7px;position:absolute;bottom:-9px;right:8px}.player{border-radius:13px;grid-template-columns:34px minmax(0,1fr);gap:9px;min-height:56px;padding:7px 9px;position:relative}.match-card>.player.right{text-align:right;grid-template-columns:minmax(0,1fr) 34px}.match-card>.player.right .player-token-wrap{order:2}.match-card>.player.right .presence-tag.off{left:8px;right:auto}.player-token-wrap,.token.player-token{width:34px;height:34px}.token-ring{inset:-6px;-webkit-mask:radial-gradient(circle,#0000 20px,#000 20.5px);mask:radial-gradient(circle,#0000 20px,#000 20.5px)}.player-copy strong{font-size:15px}.player-copy small{font-size:var(--fs-11)}.versus{height:auto;font-size:12px}.versus:before{display:none}.versus span{background:0 0;padding:0}.series{grid-column:1/-1;margin:4px 6px 2px;padding-top:6px}.series b{font-size:var(--fs-19)}.board-unit{order:2;width:100%;margin-block:auto;padding-top:14px}.board-head{min-height:40px}.turn-status{box-shadow:3px 3px 0 var(--ink);gap:8px;padding:3px 12px 3px 4px}.turn-status strong{font-size:var(--fs-19)}.turn-status .hint{font-size:var(--fs-13)}.token.status-token{width:26px;height:26px}.move-chip{min-height:32px;font-size:var(--fs-13);padding:3px 11px}.countdown{font-size:var(--fs-17)}.head-note{font-size:var(--fs-13)}.rail,.board{width:var(--board-w);margin-inline:auto}.rail{height:calc(var(--slot) + 16px)}.drop-cue{border-top-width:8px;border-left-width:6px;border-right-width:6px;bottom:-12px}.token.in-hand{box-shadow:3px 3px 0 var(--ink)}.is-finished .rail,.status-error .rail,.status-paused .rail{height:10px}.board .cell.is-last{box-shadow:0 0 0 3px var(--ink)}.board .cell.is-win>.token{box-shadow:0 0 0 3px var(--white), 0 0 0 5px var(--ink)}.win-line line{stroke-width:6px}.overlay-card{padding:14px 16px}.overlay-card strong{font-size:var(--fs-17)}.overlay-card small{font-size:var(--fs-13)}.result-card{order:3;margin-top:16px}.result-top{gap:12px;padding:14px 14px 12px}.result-top h2{font-size:22px}.result-top p{font-size:var(--fs-13)}.token.emblem,.emblem-icon{width:46px;height:46px}.emblem-icon .icon{width:26px;height:26px}.emblem-pair .token+.token{margin-left:-18px}.rematch-row{padding:10px 14px}.result-actions{grid-template-columns:1fr 1fr;gap:10px;padding:12px}.result-actions .btn:only-child{grid-column:1/-1}.result-actions .btn,.actions .btn{border-radius:var(--r-btn);min-height:48px;font-size:var(--fs-17)}.result-actions .btn.primary{order:2}.actions{order:4;margin-top:16px}.actions .btn{width:100%}.toast{right:var(--sx);left:var(--sx);width:auto}.scrim{align-items:end;padding:0}.profile-sheet{width:100%;padding:12px 20px calc(20px + var(--sab));border-width:var(--bw) 0 0;box-shadow:none;border-radius:24px 24px 0 0}.sheet-handle{background:var(--ink);border-radius:3px;width:44px;height:5px;margin:0 auto 16px;display:block}.profile-sheet h2{font-size:22px}}@media (width<=620px) and (height<=780px){.game{margin-top:6px}.board-unit{padding-top:6px}.board-head{min-height:36px}.is-finished .rail,.status-error .rail,.status-paused .rail{height:6px}.result-card{margin-top:10px}.result-top{padding:10px 12px}.result-actions{padding:10px}.series{margin-top:2px;padding-top:4px}}@media (width<=620px) and (height>=501px),(width<=620px) and (orientation:portrait){.game:before{content:"";flex:1 1 0;order:2}.board-unit{order:3;margin-block:0}.result-card{order:4}.actions{flex-direction:column;flex-grow:1;order:5;display:flex}.actions:before{content:"";flex:1000 1 0;max-height:44px}.actions:after{content:"";flex:1 1 0}.game.has-result:after{content:"";flex:1 1 0;order:6}}@media (width<=620px){.lobby-grid.has-expanded .ai-card .mini-board,.lobby-grid.has-expanded .ai-card .card-copy p{display:none}}@media (orientation:landscape) and (height<=500px){:root{--slot:56px;--slot-gap:5px;--board-pad:8px;--sat:max(8px, env(safe-area-inset-top));--sab:max(8px, env(safe-area-inset-bottom));--sx:16px}.app-banner{display:none}.topbar{top:var(--sat);right:var(--sx);width:auto;min-height:44px;position:absolute;left:auto}.view-game .brand-text{display:none}.view-game .topbar{left:auto}.profile-name{display:none}.profile{padding:3px}.avatar{width:36px;height:36px}.game{grid-template-columns:var(--board-w) minmax(0, 1fr);align-items:center;gap:20px;width:100%;margin:0}.view-game main{flex-direction:row}.board-head.in-unit,.rail,.info-card,.kbd-hint,.mode-label{display:none}.board-head.in-side{padding-top:2px;display:flex}.side{gap:12px;padding-top:40px}.turn-status{box-shadow:3px 3px 0 var(--ink);padding:3px 12px 3px 4px}.turn-status strong{font-size:var(--fs-17)}.turn-status .hint{display:none}.token.status-token{width:24px;height:24px}.move-chip{min-height:30px;font-size:var(--fs-13);padding:2px 10px}.match-card{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);align-items:center;padding:6px;display:grid}.turn-tag,.presence-tag:not(.off){display:none}.player{border-radius:12px;grid-template-columns:30px minmax(0,1fr);gap:8px;min-height:48px;padding:6px 8px;position:relative}.match-card>.player.right{text-align:right;grid-template-columns:minmax(0,1fr) 30px}.match-card>.player.right .player-token-wrap{order:2}.player-token-wrap,.token.player-token{width:30px;height:30px}.player-copy strong{font-size:14px}.player-copy small{font-size:var(--fs-11)}.versus{height:auto;font-size:11px}.versus:before{display:none}.versus span{background:0 0;padding:0}.presence-tag.off{font-size:var(--fs-11);padding:1px 6px;position:absolute;bottom:-9px;right:6px}.series{grid-column:1/-1;margin:2px 6px 0;padding-top:4px}.series b{font-size:var(--fs-19)}.turn-tag{font-size:var(--fs-11)}.result-top{gap:10px;padding:10px 12px}.result-top h2{font-size:var(--fs-19)}.result-top p{font-size:var(--fs-12)}.token.emblem{width:38px;height:38px}.result-actions{grid-template-columns:1fr 1fr;gap:10px;padding:10px}.result-actions .btn,.actions .btn{min-height:44px;font-size:var(--fs-15)}.result-actions .btn.primary{order:2}.actions .btn{width:100%}.board .cell.is-last{box-shadow:0 0 0 3px var(--ink)}.board .cell.is-win>.token{box-shadow:0 0 0 3px var(--white), 0 0 0 5px var(--ink)}.win-line line{stroke-width:6px}.lobby{width:100%;margin:0;padding:58px 0 0}.view-lobby .topbar{left:var(--sx);width:auto}.lobby-grid{grid-template-rows:auto auto 1fr;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:12px 16px}.ai-card{grid-row:1/span 3;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;padding:12px 14px;display:grid}.ai-card .card-head{grid-template-columns:1fr;gap:8px}.ai-card .mini-board{--m:24px;--mg:4px;grid-area:1/2/span 2;padding:6px}.ai-card>.btn{min-height:48px;font-size:var(--fs-17);grid-column:1;align-self:end}.mode-card{padding:12px 14px}.card-icon{border-radius:12px;width:40px;height:40px}.card-head{grid-template-columns:40px minmax(0,1fr);gap:10px}.collapsible .card-head{grid-template-columns:40px minmax(0,1fr) 28px;align-items:center}.card-copy h2{margin-bottom:2px;font-size:19px}.card-copy p{font-size:13px;line-height:1.4}.ai-card .card-icon,.collapsible:not(.is-expanded) .card-copy p,.collapsible:not(.is-expanded) .card-panel{display:none}.collapsible:not(.is-expanded) .card-copy h2{margin:0}.card-toggle{background:0 0;border:0;justify-content:flex-end;align-items:center;padding:0 12px 0 0;display:flex;position:absolute;inset:-12px -14px}}@media (prefers-reduced-motion:no-preference){.searching-anim .token:first-child{animation:hop .9s var(--ease-out) infinite}.searching-anim .token:nth-child(2){animation:hop .9s var(--ease-out) .15s infinite}.searching-anim .token:nth-child(3){animation:hop .9s var(--ease-out) .3s infinite}}@keyframes hop{0%,to{transform:translateY(0)rotate(0)}40%{transform:translateY(-18px)rotate(-12deg)}}@property --p{syntax:"<number>";inherits:true;initial-value:1}@property --col{syntax:"<number>";inherits:true;initial-value:0}@keyframes c4-drop{0%{transform:translateY(calc(-1 * var(--fall)));animation-timing-function:cubic-bezier(.55,0,1,.45)}62%{animation-timing-function:ease-out;transform:translateY(0)scale(1)}70%{animation-timing-function:ease-out;transform:translateY(4%)scale(1.1,.86)}82%{animation-timing-function:ease-in;transform:translateY(-12%)scale(.98,1.03)}92%{animation-timing-function:ease-out;transform:translateY(0)scale(1.03,.97)}96%{transform:translateY(-3%)scale(1)}to{transform:translateY(0)scale(1)}}.token.is-dropping{z-index:5;transform-origin:50% 100%;animation:c4-drop var(--drop-dur,.44s) both}@keyframes c4-fade-scale-in{0%{opacity:0;transform:scale(.85)}}.hand{transition:left .14s var(--ease-out)}.col-hover,.token.ghost{animation:c4-fade-scale-in .1s var(--ease-out) both}@keyframes c4-win-pop{0%{transform:scale(1)}50%{transform:scale(1.18)}to{transform:scale(1.06)}}@keyframes c4-win-glow{0%,to{transform:scale(1.06)}50%{transform:scale(1.13)}}@keyframes c4-line-draw{0%{stroke-dashoffset:var(--len,400)}to{stroke-dashoffset:0}}@keyframes c4-star{0%{opacity:0;transform:scale(.2)rotate(0)}40%{opacity:1;transform:scale(1.1)rotate(20deg)}to{opacity:0;transform:scale(.6)rotate(45deg)}}.star{animation:c4-star .7s var(--ease-out) .9s both}@keyframes c4-panel-in{0%{opacity:0;transform:translate(var(--from-x,24px), var(--from-y,0))}}.result-card.is-entering{animation:c4-panel-in .42s var(--ease-back) both}.result-card.is-entering.lose,.result-card.is-entering.draw{animation-timing-function:var(--ease-out)}.result-card.is-entering.error{animation-delay:.9s}@keyframes c4-trophy{0%{transform:scale(.4)rotate(-30deg)}70%{transform:scale(1.2)rotate(8deg)}to{transform:scale(1)rotate(0)}}.result-card.is-entering .emblem-icon{animation:c4-trophy .5s var(--ease-back) .2s both}.result-card.is-entering.lose .emblem-icon,.result-card.is-entering.draw .emblem-icon{animation:none}.result-card.is-entering.error .emblem-icon{animation-delay:1s}.confetti{top:-24px;left:var(--x);border:2px solid var(--ink);background:var(--c);width:14px;height:18px;animation:c4-confetti 1.7s cubic-bezier(.3, .1, .6, 1) var(--d) both;position:absolute}.confetti.round{border-radius:50%;width:15px;height:15px}.confetti.strip{border-radius:3px;width:9px;height:24px}@keyframes c4-confetti{0%{opacity:0;transform:translateY(-30px)rotate(0)}8%{opacity:1}80%{opacity:1}to{opacity:0;transform:translate(var(--dx), var(--fall-h,360px)) rotate(var(--r))}}@media (width<=620px){.result-card{--from-x:0;--from-y:40px}}@keyframes c4-dots{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-5px)}}.thinking-dots i{animation:.9s ease-in-out infinite c4-dots}.thinking-dots i:nth-child(2){animation-delay:.15s}.thinking-dots i:nth-child(3){animation-delay:.3s}.board-head.is-late{animation:.12s linear both c4-fade}.countdown .ring,.token-ring{transition:--p 1s linear}@keyframes c4-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.countdown.is-urgent{background:var(--pink);animation:1s ease-in-out infinite c4-pulse}@keyframes c4-pop{50%{transform:scale(1.06)}}.btn.is-done{animation:c4-pop .18s var(--ease-back)}@keyframes c4-view-out{to{opacity:0;transform:translateY(12px)}}@keyframes c4-view-in{0%{opacity:0;transform:translateY(24px)}}@keyframes c4-chip-pop{0%{transform:scale(.9)rotate(-1.5deg)}}.view-leave{animation:c4-view-out .16s var(--ease-in) both}.view-enter{animation:c4-view-in .24s var(--ease-out) both}.view-enter .turn-status{animation:c4-chip-pop .16s var(--ease-back) .24s both}@media (prefers-reduced-motion:reduce){.token.is-dropping,.result-card.is-entering .emblem-icon,.star,.thinking-dots i,.countdown.is-urgent,.searching-anim .token,.btn.is-done,.view-enter .turn-status{animation:none}.result-card.is-entering,.view-enter,.view-leave,.col-hover,.token.ghost{animation-name:c4-fade;animation-duration:.12s}.hand,.countdown .ring,.token-ring{transition:none}}@keyframes c4-fade{0%{opacity:0}}html{overflow-x:clip}#app{min-height:100%}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}input:focus-visible,select:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.btn span{pointer-events:none}.profile,.brand{-webkit-user-select:none;user-select:none}.profile:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.col-targets{z-index:2;inset:calc(var(--board-pad) - var(--slot-gap) / 2);grid-template-columns:repeat(7,minmax(0,1fr));display:grid;position:absolute}.col-target{border-radius:calc(var(--slot) / 2 + var(--slot-gap) / 2);cursor:default;background:0 0;border:0;min-height:0;margin:0;padding:0}.board.is-interactive .col-target{cursor:pointer}.board.is-interactive .col-targets{touch-action:none}.col-target:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}.board.is-disabled .col-target:focus-visible{outline-color:var(--muted)}.star{z-index:6;background:var(--sun);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);pointer-events:none;width:26px;height:26px;position:absolute}.mini-board{position:relative}.mini-board .win-line line{stroke-width:5px}.mini-board .cell.is-win>.token{z-index:2;box-shadow:0 0 0 2px var(--white), 0 0 0 4px var(--ink);transform:scale(1.06)}.mini-board .grid{transition:opacity 1.2s linear}.mini-board.is-fading .grid,.mini-board.is-fading .win-line{opacity:.25}.mini-board .win-line{transition:opacity 1.2s linear}@keyframes c4-blink{50%{opacity:.3}}.mini-board.is-demo .token.ghost{animation:.8s ease-in-out infinite c4-blink}.mini-board.is-celebrating .cell.is-win>.token{animation:c4-win-pop .24s var(--ease-back) both;animation-delay:calc(var(--i,0) * 70ms)}.mini-board.is-celebrating .win-line line{stroke-dasharray:var(--len,200);animation:c4-line-draw .32s var(--ease-out) .3s both}.qr-card .qr{width:100%;height:auto;fill:var(--ink);display:block}.toast-icon{flex:none}@media (width<=620px){.btn{padding-top:9px;padding-bottom:9px}}.fade-enter-active,.fade-leave-active{transition:opacity var(--dur-base) var(--ease-out)}.fade-enter-from,.fade-leave-to{opacity:0}@media (prefers-reduced-motion:reduce){.star{display:none}.mini-board .grid,.mini-board .win-line{transition:none}.mini-board.is-celebrating .cell.is-win>.token,.mini-board.is-celebrating .win-line line{stroke-dasharray:none;animation:none}.fade-enter-active,.fade-leave-active{transition-duration:.12s}}.waiting-actions.single{grid-template-columns:1fr}.waiting-actions.single .btn.ghost{justify-self:center}.invite-card{width:min(480px,100%)}.invite-card .room-code-block{margin-top:4px}.invite-card>.btn.big{width:100%}.invite-card.is-gone .big-icon{background:var(--pink-soft)}.invite-name{text-align:left;gap:6px;width:100%;display:grid}.invite-name .field-label{font-size:var(--fs-15);margin:0}.invite-name input{height:56px;font-size:20px;font-weight:700}.invite-name-msg{text-align:left;width:100%;margin:-6px 0 2px}.invite-name-msg.hint{color:var(--muted);font-size:var(--fs-13)}.emblem-icon{color:var(--ink);background:var(--white)}@media (width<=620px),(orientation:landscape) and (height<=500px){.invite-card>.btn.big{min-height:56px}}.join-error{margin:-4px 0 0}@media (width>=901px){.game{align-items:end}}input.has-error:focus-visible,input.has-error:focus{outline:none}.token.is-queued,.result-card.is-held{visibility:hidden}.result-card.is-held{transform:translate(var(--from-x,24px), var(--from-y,0))}.you-pink .mine .turn-status,.you-pink .turn-tag{background:var(--pink)}.you-pink .player.is-current.is-me{background:var(--pink-soft)}.you-green .back .turn-status{background:var(--pink)}.you-pink .back .turn-status{background:var(--mint)}.you-green .theirs .turn-status,.you-green .player.is-current:not(.is-me){background:var(--pink-soft)}.you-pink .theirs .turn-status,.you-pink .thinking .turn-status,.you-pink .player.is-current:not(.is-me){background:var(--mint-soft)}.picker-scrim{z-index:40;background:var(--scrim);place-items:end center;display:grid;position:fixed;inset:0}.ai-picker{--picker-gap:12px;width:min(460px,100%);max-height:100%;padding:22px 20px calc(20px + var(--sab));gap:var(--picker-gap);border:var(--bw) solid var(--ink);background:var(--paper);box-shadow:var(--sh-card);border-bottom:0;border-radius:24px 24px 0 0;display:grid;overflow:auto}.ai-picker:focus{outline:none}.ai-picker h2{font-size:var(--fs-22)}.picker-levels{gap:var(--picker-gap);display:grid}.picker-level{border:var(--bw-thin) solid var(--ink);background:var(--white);cursor:pointer;border-radius:16px;grid-template-columns:22px 1fr;align-items:center;column-gap:10px;min-height:56px;padding:8px 14px;display:grid;position:relative}.picker-level.is-on,.picker-seg .is-on{background:var(--sun-soft)}.picker-dot{border:var(--bw-thin) solid var(--ink);background:var(--white);border-radius:50%;width:22px;height:22px}.is-on>.picker-dot{background:var(--ink);box-shadow:inset 0 0 0 4px var(--white)}.picker-level b{font-size:var(--fs-17);font-weight:800}.picker-level small{color:var(--muted);font-size:var(--fs-13);grid-column:2;font-weight:700}.picker-row{gap:5px;display:grid}.picker-label{color:var(--muted);font-size:var(--fs-13);font-weight:800}.picker-seg{border:var(--bw-thin) solid var(--ink);background:var(--white);border-radius:14px;grid-auto-columns:1fr;grid-auto-flow:column;display:grid;overflow:hidden}.picker-seg label{min-width:0;min-height:44px;font-size:var(--fs-15);white-space:nowrap;cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:0 6px;font-weight:800;display:flex;position:relative}.picker-seg label+label{border-left:var(--bw-thin) solid var(--ink)}.picker-seg .token.picker-swatch{--pattern-w:2px;border-width:2px;width:20px;height:20px}.picker-level:has(:focus-visible){z-index:1;outline:3px solid var(--ink);outline-offset:2px}.picker-seg label:has(:focus-visible){z-index:1;outline:3px solid var(--ink);outline-offset:2px}.picker-seg label:has(:focus-visible){outline-offset:-5px}.picker-warn{font-size:var(--fs-13);align-items:flex-start;gap:6px;font-weight:800;display:flex}.picker-warn:before{box-sizing:border-box;border:var(--bw-thin) solid var(--ink);background:var(--sun);content:"!";text-align:center;border-radius:50%;flex:0 0 18px;height:18px;margin-top:1px;font-size:12px;line-height:15px}.ai-picker .btn{width:100%}@media (width>=901px){.picker-scrim{align-items:center}.ai-picker{border-bottom:var(--bw) solid var(--ink);border-radius:24px;padding-bottom:22px}}@media (height<=700px){.ai-picker{--picker-gap:8px;padding-top:16px}.ai-picker h2{font-size:var(--fs-19)}.picker-level{min-height:50px;padding:5px 12px}.picker-row{gap:3px}}@keyframes c4-board-flash{0%{opacity:.95}to{opacity:0}}@keyframes c4-board-shake{0%,to{transform:translate(0)}15%{transform:translate(-10px)rotate(-.6deg)}30%{transform:translate(10px)rotate(.6deg)}45%{transform:translate(-8px)}60%{transform:translate(8px)}75%{transform:translate(-4px)}}@keyframes c4-line-glow{50%{filter:drop-shadow(0 0 10px #ffd23f)drop-shadow(0 0 4px #fff)}}.board-flash{z-index:7;border-radius:inherit;pointer-events:none;background:#fff;animation:.45s ease-out both c4-board-flash;position:absolute;inset:0}.board.ending-win{animation:.5s ease-in-out both c4-board-shake}.board.ending-win .cell.is-win>.token{animation:c4-win-pop .3s var(--ease-back) calc(var(--i,0) * .12s) both, c4-win-glow .9s ease-in-out 3s 2}.board.ending-win .win-line line{stroke-dasharray:var(--len,400);animation:c4-line-draw .5s var(--ease-out) .45s both}.board.ending-win .win-line line.under{stroke-width:17px}.board.ending-win .win-line line.gold{stroke:var(--sun);stroke-width:9px;filter:none;animation:c4-line-draw .5s var(--ease-out) .45s both, c4-line-glow .8s ease-in-out .95s 4}@keyframes c4-sink{0%{transform:none}60%{transform:translateY(9%)scale(1.02,.95)}to{transform:translateY(7%)}}@keyframes c4-dim{to{filter:brightness(.86)}}.board.ending-lose{animation:.5s ease-in-out 2.8s both c4-board-shake}.board.ending-lose .cell:not(.is-win){animation:.7s ease-out 1s both c4-dim}.board.ending-lose .cell.is-mine>.token{animation:c4-sink .6s ease-in-out calc(1s + var(--k,0) * 70ms) both}.board.ending-lose .cell.is-win>.token{animation:c4-win-pop .3s var(--ease-back) calc(var(--i,0) * .12s) both, c4-win-glow 1.2s ease-in-out 2s 3}.board.ending-lose .win-line line{stroke-dasharray:var(--len,400);animation:c4-line-draw .5s var(--ease-out) .45s both}@keyframes c4-hop{0%,to{transform:translateY(0)}45%{transform:translateY(-14%)scale(1.04)}}.board.ending-draw .cell>.token{animation:c4-hop .42s var(--ease-out) calc(.25s + var(--row,0) * 90ms) both}.board.is-ending-skipped,.board.is-ending-skipped *{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important}.ending-scene{z-index:40;pointer-events:none;position:fixed;inset:0;overflow:hidden}.ending-skip{z-index:10;cursor:pointer;pointer-events:auto;background:0 0;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.ending-skip:focus-visible{outline:3px solid var(--ink);outline-offset:-6px}@keyframes c4-scrim{0%{opacity:0}8%,75%{opacity:1}to{opacity:0}}.ending-scrim{z-index:1;background:#1b1b1f2e;position:absolute;inset:0}.ending-win .ending-scrim{animation:2.4s linear 1.1s both c4-scrim}.ending-draw .ending-scrim{animation:3.6s linear .9s both c4-scrim}@keyframes c4-rays-in{0%{opacity:0;scale:.4}12%,78%{opacity:1;scale:1}to{opacity:0;scale:1.1}}@keyframes c4-spin{to{rotate:360deg}}.ending-rays{z-index:3;background:repeating-conic-gradient(from 0deg, #ffd23fd9 0 10deg, #fff4dc00 10deg 20deg);border-radius:50%;width:1100px;height:1100px;margin:-550px 0 0 -550px;animation:2.4s linear 1.05s both c4-rays-in,6s linear 1.05s infinite c4-spin;position:absolute;top:50%;left:50%;-webkit-mask:radial-gradient(circle,#000 18%,#0000 62%);mask:radial-gradient(circle,#000 18%,#0000 62%)}@keyframes c4-shot{0%{opacity:0;transform:translate(0)rotate(0)}6%{opacity:1}45%{transform:translate(var(--dx), var(--up)) rotate(calc(var(--r) * .5))}85%{opacity:1}to{opacity:0;transform:translate(calc(var(--dx) * 1.35), calc(var(--up) + 420px)) rotate(var(--r))}}.ending-cannon{z-index:4;position:absolute;inset:0;overflow:hidden}.ending-cannon .shot{border:2px solid var(--ink);background:var(--c);width:14px;height:18px;animation:c4-shot var(--dur) cubic-bezier(.2, .7, .4, 1) calc(var(--d) + .4s) both;position:absolute;bottom:-20px}.ending-cannon .shot.left{left:-10px}.ending-cannon .shot.right{right:-10px}.ending-cannon .shot.round{border-radius:50%;width:15px;height:15px}.ending-cannon .shot.strip{border-radius:3px;width:9px;height:24px}@keyframes c4-slap{0%{opacity:0;transform:scale(2.4)rotate(4deg)}70%{opacity:1;transform:scale(.92)rotate(-7deg)}to{opacity:1;transform:scale(1)rotate(-6deg)}}@keyframes c4-slap-soft{0%{opacity:0;transform:translateY(40px)scale(.9)rotate(0)}to{opacity:1;transform:translateY(0)scale(1)rotate(-3deg)}}@keyframes c4-bob{0%,to{translate:0}50%{translate:0 -10px}}@keyframes c4-sob{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(3px)rotate(-3deg)}75%{transform:translateY(3px)rotate(3deg)}}@keyframes c4-fly{to{opacity:0;transform:translate(var(--fly-x,400px), var(--fly-y,-200px)) scale(.18) rotate(-12deg)}}.ending-sticker{z-index:6;border:5px solid var(--ink);background:var(--white);width:460px;box-shadow:12px 12px 0 var(--ink);text-align:center;border-radius:32px;justify-items:center;gap:8px;margin:-190px 0 0 -230px;padding:30px 30px 20px;display:grid;position:absolute;top:50%;left:50%}.ending-sticker strong{font-size:66px;font-weight:900;line-height:1.1}.ending-sticker>span:not(.big-trophy){font-size:20px;font-weight:700}.ending-sticker small{color:var(--muted);margin-top:6px;font-size:15px;font-weight:700}.ending-sticker .big-trophy{border:5px solid var(--ink);background:repeating-conic-gradient(from 0deg, var(--sun) 0 12deg, #ffe38a 12deg 24deg);width:130px;height:130px;box-shadow:6px 6px 0 var(--ink);border-radius:50%;place-items:center;display:grid}.ending-sticker .big-trophy .icon{stroke-width:2.2px;width:72px;height:72px}.ending-sticker.is-win{animation:c4-slap .38s var(--ease-back) 1.1s both, c4-bob .7s ease-in-out 1.5s 2, c4-fly .52s cubic-bezier(.55, 0, .8, .4) 3s forwards}.ending-sticker.is-lose,.ending-sticker.is-draw{width:420px;margin:-215px 0 0 -210px}.ending-sticker.is-lose strong,.ending-sticker.is-draw strong{font-size:56px}.ending-sticker.is-lose{animation:c4-slap-soft .42s var(--ease-back) 1.2s both, c4-sob .5s ease-in-out 1.6s 2, c4-sob .5s ease-in-out 2.8s 2, c4-fly .52s cubic-bezier(.55, 0, .8, .4) 3.7s forwards}.ending-sticker.is-draw{width:400px;animation:c4-slap-soft .42s var(--ease-back) 4.3s both, c4-fly .52s cubic-bezier(.55, 0, .8, .4) 5s forwards;margin:-110px 0 0 -200px}@keyframes c4-raindrop{0%{opacity:0;transform:translateY(-6px)}20%{opacity:1}to{opacity:0;transform:translateY(26px)}}@keyframes c4-thunder{0%,to{fill:#fff}20%,60%{fill:#c9cfdc}}.ending-sticker .cloud{width:150px;height:140px;animation:.9s ease-in-out 1.6s 2 c4-bob;overflow:visible}.cloud .puff{fill:#fff;animation:.6s linear 1.55s both c4-thunder,.6s linear 2.75s both c4-thunder}.cloud .drop{fill:#a8dcff;stroke:var(--ink);stroke-width:3px;transform-box:fill-box;animation:.6s ease-in 1.5s infinite c4-raindrop}.cloud .d2{animation-delay:1.65s}.cloud .d3{animation-delay:1.8s}.cloud .d4{animation-delay:1.95s}@keyframes c4-storm-dim{0%{opacity:0}10%,80%{opacity:.38}to{opacity:0}}@keyframes c4-rain{0%{translate:0}to{translate:-230px 980px}}@keyframes c4-rain-life{0%,to{opacity:0}8%,80%{opacity:1}}@keyframes c4-lightning{0%{opacity:0}10%{opacity:.85}25%{opacity:.1}40%{opacity:.7}to{opacity:0}}@keyframes c4-bolt{0%{opacity:0;transform-origin:50% 0;transform:scaleY(.2)}15%,60%{opacity:1;transform-origin:50% 0;transform:scaleY(1)}to{opacity:0;transform-origin:50% 0;transform:scaleY(1)}}.ending-storm{z-index:2;position:absolute;inset:0;overflow:hidden}.storm-dim{background:#2c3345;animation:5.2s linear .8s both c4-storm-dim;position:absolute;inset:0}.ending-storm .streak{width:3px;height:34px;animation:c4-rain var(--dur) linear var(--d) infinite, c4-rain-life 5.4s linear .8s both;background:linear-gradient(#a8dcff00,#a8dcfff2);border-radius:2px;position:absolute;top:-40px;transform:rotate(14deg)}.storm-flash{opacity:0;background:#fff;animation:.42s linear 1.55s both c4-lightning,.42s linear 2.75s both c4-lightning;position:absolute;inset:0}.ending-scene .bolt{opacity:0;filter:drop-shadow(0 0 14px #ffd23fe6);width:110px;height:220px;position:absolute}.ending-scene .bolt.b1{animation:.52s linear 1.55s both c4-bolt;top:60px;left:18%}.ending-scene .bolt.b2{z-index:2;width:130px;height:260px;animation:.52s linear 2.75s both c4-bolt}@keyframes c4-stage{0%{opacity:0;transform:scale(.6)}10%,88%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@keyframes c4-tug{0%{transform:translate(0)}12%{transform:translate(-22px)}28%{transform:translate(18px)}44%{transform:translate(-14px)}60%{transform:translate(10px)}76%{transform:translate(-5px)}to{transform:translate(0)}}@keyframes c4-lean-l{0%,to{transform:rotate(0)}20%,80%{transform:rotate(-14deg)}}@keyframes c4-lean-r{0%,to{transform:rotate(0)}20%,80%{transform:rotate(14deg)}}@keyframes c4-fall-l{0%{transform:translate(0)rotate(0)}to{transform:translate(-28px,10px)rotate(-38deg)}}@keyframes c4-fall-r{0%{transform:translate(0)rotate(0)}to{transform:translate(28px,10px)rotate(38deg)}}@keyframes c4-rope-l{to{transform:translate(-26px)rotate(12deg)}}@keyframes c4-rope-r{to{transform:translate(26px)rotate(-12deg)}}@keyframes c4-tear{0%{opacity:0;transform:translateY(0)}15%{opacity:1}to{opacity:0;transform:translateY(46px)}}.tug-stage{z-index:5;aspect-ratio:2;width:min(960px,92vw);animation:3.4s ease-in-out .9s both c4-stage;position:absolute;top:50%;left:50%;translate:-50% -55%}.tug-stage .tug{width:100%;height:100%;overflow:visible}.tug .pull{animation:1.3s ease-in-out 1.25s both c4-tug}.tug .lean-l,.tug .lean-r{transform-box:fill-box;transform-origin:50% 100%}.tug .lean-l{animation:c4-lean-l 1.3s ease-in-out 1.25s both, c4-fall-l .45s var(--ease-back) 2.6s forwards}.tug .lean-r{animation:c4-lean-r 1.3s ease-in-out 1.25s both, c4-fall-r .45s var(--ease-back) 2.6s forwards}.tug .rope-l,.tug .rope-r{transform-box:fill-box}.tug .rope-l{transform-origin:0;animation:.4s ease-out 2.6s both c4-rope-l}.tug .rope-r{transform-origin:100%;animation:.4s ease-out 2.6s both c4-rope-r}.tug .snap-star{transform-box:fill-box;transform-origin:50%;animation:c4-star .8s var(--ease-out) 2.55s both}.tug .sweat{transform-box:fill-box;animation:.7s ease-in 1.7s infinite c4-tear}.ending-rain{z-index:8;position:absolute;inset:0;overflow:hidden}.ending-rain .confetti{animation-duration:var(--dur,2.6s);top:-30px}@media (width<=620px){.ending-sticker{--sw:min(460px, calc(100vw - 48px));width:var(--sw);margin:-140px 0 0 calc(var(--sw) / -2);box-shadow:8px 8px 0 var(--ink);border-width:4px;border-radius:26px;gap:6px;padding:22px 18px 14px;top:38%}.ending-sticker .big-trophy{border-width:4px;width:96px;height:96px}.ending-sticker .big-trophy .icon{width:54px;height:54px}.ending-sticker strong{font-size:clamp(40px,12vw,56px)}.ending-sticker>span:not(.big-trophy){font-size:17px}.ending-sticker small{font-size:13px}.ending-sticker.is-lose{--sw:min(420px, calc(100vw - 48px));width:var(--sw);margin:-130px 0 0 calc(var(--sw) / -2)}.ending-sticker.is-draw{--sw:min(400px, calc(100vw - 48px));width:var(--sw);margin:-80px 0 0 calc(var(--sw) / -2)}.ending-sticker.is-lose strong,.ending-sticker.is-draw strong{font-size:clamp(38px,11vw,48px)}.ending-sticker .cloud{width:118px;height:110px}.ending-rays{width:190vw;height:190vw;margin:-95vw 0 0 -95vw;top:38%}.ending-scene .bolt{width:72px;height:144px}.ending-scene .bolt.b2{z-index:7;width:90px;height:180px}.tug-stage{width:80vw;top:40%}}.privacy-line{color:var(--muted);font-size:var(--fs-13);justify-content:center;align-items:center;gap:8px;margin:10px 0 0;display:flex}.privacy-link{min-height:44px;color:var(--muted);text-underline-offset:3px;align-items:center;text-decoration:underline;text-decoration-thickness:1px;display:inline-flex}@media (prefers-reduced-motion:reduce){.ending-scene{display:none}}.clauses{text-wrap:balance}.clauses>span{display:inline-block}.needs-internet{border:2px solid var(--ink);color:var(--ink);background:var(--disabled);vertical-align:3px;white-space:nowrap;border-radius:999px;margin-left:8px;padding:2px 9px;font-size:12px;font-weight:800;line-height:1.4;display:inline-block}.is-unavailable .card-icon{filter:grayscale();opacity:.55}@media (width<=359px){.app.has-connection-short .brand-text{display:none}}@media (width<=389px){html:lang(en) .app.is-app.has-connection-short .brand-text{display:none}}@media (width<=620px){.app.has-connection .brand-text{display:none}.connection-pill{white-space:nowrap}}.result-actions.is-stacked{grid-template-columns:1fr}.result-actions.is-stacked .btn.primary{order:0}@media (width<=620px){.ai-card .mini-board{--m:min(34px, calc((100vw - 122px) / 7))}}@media (width<=359px){.match-card{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)}.player{grid-template-columns:28px minmax(0,1fr);gap:6px;padding:7px 6px}.match-card>.player.right{grid-template-columns:minmax(0,1fr) 28px}.player-token-wrap,.token.player-token{width:28px;height:28px}.token-ring{inset:-5px;-webkit-mask:radial-gradient(circle,#0000 16.5px,#000 17px);mask:radial-gradient(circle,#0000 16.5px,#000 17px)}}:lang(th) :is(.eyebrow,.card-copy h2,.center-card h1){letter-spacing:0}html:lang(th){text-wrap-style:pretty}:is(.result-card,.ending-sticker) :has(>.clauses){text-wrap:balance}