.gtictactoe-grid{aspect-ratio:1;-webkit-user-select:none;user-select:none;background:#d9b27a url(/img/board/wood.jpg) 50%/cover;border-radius:12px;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,360px);margin:0 auto;padding:10px;display:grid;box-shadow:inset 0 0 0 1px #5a371459,inset 0 0 18px #5a371440,0 3px 12px #0000002e}.game-stage:not(.is-fs)>#game.is-landbar .gtictactoe-grid{width:min(100%,360px,100vh - 84px)}.gtictactoe-cell{color:var(--text-3);font:800 clamp(34px, 13vw, 66px)/1 var(--font);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:#fff8e838;border:1px solid #5a371447;border-radius:10px;place-items:center;padding:0;transition:background 80ms,box-shadow 80ms;display:grid;position:relative;box-shadow:inset 0 2px 5px #46280a47,inset 0 -1px #ffffff59}.gtictactoe-cell:hover:not([data-v]){background:#fff8e873}.gtictactoe-cell:focus-visible{box-shadow:inset 0 2px 5px #46280a47, 0 0 0 3px var(--brand-soft);outline:none}.gtictactoe-cell[data-v]{cursor:default}.gtictactoe-cell[data-v=x]{color:var(--brand-dark)}.gtictactoe-cell[data-v=o]{color:#4a4038}.gtictactoe-cell.is-win{border-color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand), inset 0 2px 5px #46280a33;background:#ffd6aa99}.gtictactoe-mark{filter:drop-shadow(0 3px 3px #28140059);width:76%;height:76%;animation:.16s ease-out gtictactoe-pop;position:absolute;top:12%;left:12%}.gtictactoe-sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@keyframes gtictactoe-pop{0%{opacity:.3;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.gtictactoe-mark{animation:none}}.gtictactoe[data-art] .gtictactoe-mark{display:none}.gtictactoe[data-art] .gtictactoe-cell[data-v]:before{content:"";filter:drop-shadow(0 3px 3px #2814004d);pointer-events:none;background:url(/img/tictactoe/xo.webp) 0 0/200% 100% no-repeat;width:78%;height:78%;animation:.16s ease-out gtictactoe-pop;position:absolute;top:11%;left:11%}.gtictactoe[data-art] .gtictactoe-cell[data-v=o]:before{background-position:100% 0}@media (prefers-reduced-motion:reduce){.gtictactoe[data-art] .gtictactoe-cell[data-v]:before{animation:none}}html[data-skin-board=slate] .gtictactoe-grid{background-image:url(/img/board/slate.jpg)}html[data-skin-board=bamboo] .gtictactoe-grid{background-image:url(/img/board/bamboo.jpg)}html[data-skin-board=ocean] .gtictactoe-grid{background-image:url(/img/board/ocean.jpg)}html[data-skin-board=rouge] .gtictactoe-grid{background-image:url(/img/board/rouge.jpg)}html[data-skin-board=moyu] .gtictactoe-grid{background:#26352f url(/img/board/moyu.webp) 50%/cover;background-image:url(/img/board/moyu.webp), var(--board-gen-tex,none);background-size:cover,cover}html[data-skin-board=zitan] .gtictactoe-grid{background:#4a2320 url(/img/board/zitan.webp) 50%/cover;background-image:url(/img/board/zitan.webp), var(--board-gen-tex,none);background-size:cover,cover}html:-webkit-any([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell{background:#0000002e;border-color:#e2c48f59;box-shadow:inset 0 2px 5px #0006,inset 0 -1px #fff0d21f}html:-moz-any([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell{background:#0000002e;border-color:#e2c48f59;box-shadow:inset 0 2px 5px #0006,inset 0 -1px #fff0d21f}html:is([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell{background:#0000002e;border-color:#e2c48f59;box-shadow:inset 0 2px 5px #0006,inset 0 -1px #fff0d21f}html:-webkit-any([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell:hover:not([data-v]){background:#fff0d21a}html:-moz-any([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell:hover:not([data-v]){background:#fff0d21a}html:is([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell:hover:not([data-v]){background:#fff0d21a}html:-webkit-any([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell[data-v=o]{color:#efe6d6}html:-moz-any([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell[data-v=o]{color:#efe6d6}html:is([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell[data-v=o]{color:#efe6d6}html:-webkit-any([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe[data-art] .gtictactoe-cell[data-v=o]:before{filter:drop-shadow(0 0 1.5px #fff0d2e6)drop-shadow(0 0 5px #fff0d259)}html:-moz-any([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe[data-art] .gtictactoe-cell[data-v=o]:before{filter:drop-shadow(0 0 1.5px #fff0d2e6)drop-shadow(0 0 5px #fff0d259)}html:is([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe[data-art] .gtictactoe-cell[data-v=o]:before{filter:drop-shadow(0 0 1.5px #fff0d2e6)drop-shadow(0 0 5px #fff0d259)}html:-webkit-any([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell:focus-visible{box-shadow:inset 0 2px 5px #0006, 0 0 0 3px var(--brand-soft)}html:-moz-any([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell:focus-visible{box-shadow:inset 0 2px 5px #0006, 0 0 0 3px var(--brand-soft)}html:is([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell:focus-visible{box-shadow:inset 0 2px 5px #0006, 0 0 0 3px var(--brand-soft)}html:-webkit-any([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell.is-win{border-color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand), inset 0 2px 5px #0000004d;background:#ffd6aa52}html:-moz-any([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell.is-win{border-color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand), inset 0 2px 5px #0000004d;background:#ffd6aa52}html:is([data-skin-board=moyu],[data-skin-board=zitan]) .gtictactoe-cell.is-win{border-color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand), inset 0 2px 5px #0000004d;background:#ffd6aa52}.is-fs .gtictactoe-grid{width:min(100%,max(220px,100dvh - 170px),640px)}.gtictactoe-cell:after{content:attr(data-key);font:500 11px/1 var(--font);color:#5a3c1c;opacity:.5;position:absolute;top:5px;left:7px}.gtictactoe-cell[data-v]:after{content:""}@media (pointer:coarse){.gtictactoe-cell:after{content:""}}@media (max-width:480px){.gtictactoe-grid{gap:6px;padding:6px}}.gtictactoe[data-gz] .gtictactoe-grid{width:min(100% - var(--gz-room,0px), 360px * var(--gz,1))}.gtictactoe[data-gz] .gtictactoe-cell{font-size:calc(66px * var(--gz,1))}
