.ttt-game{max-width:620px;margin:0 auto;text-align:center;box-sizing:border-box}
.ttt-game *{box-sizing:border-box}
.ttt-game [hidden]{display:none!important}
.ttt-game header{margin-bottom:12px}
.ttt-setup{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:end;margin:16px 0}
.ttt-setup label{display:grid;gap:5px;min-width:170px;text-align:left}
.ttt-setup select{min-height:44px;padding:.45rem .6rem;color:#202124;background:#fff;border:1px solid #777;border-radius:8px}
.ttt-btn{appearance:none!important;-webkit-appearance:none!important;min-height:44px;padding:.7rem 1rem;border:1px solid #202124!important;border-radius:10px!important;background:#f3f4f5!important;color:#202124!important;-webkit-text-fill-color:#202124!important;cursor:pointer;text-decoration:none!important;box-shadow:none!important}
.ttt-btn:hover,.ttt-btn:focus-visible{background:#e4e7ea!important;outline:3px solid #f0b400;outline-offset:2px}
.ttt-primary{background:#202124!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.ttt-primary:hover,.ttt-primary:focus-visible{background:#35383b!important}
.ttt-status{display:flex;align-items:center;justify-content:center;min-height:2.2em;margin:10px 0 14px;color:#202124}
.ttt-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;width:min(92vw,420px);aspect-ratio:1/1;margin:0 auto 16px;padding:10px;border-radius:20px;background:#294f76;box-shadow:0 12px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.24)}
.ttt-cell{appearance:none!important;-webkit-appearance:none!important;position:relative;display:block!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:13px!important;background:#fbfaf5!important;color:transparent!important;-webkit-text-fill-color:transparent!important;font-size:0!important;line-height:0!important;box-shadow:inset 0 2px 5px rgba(255,255,255,.8),inset 0 -3px 7px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.16)!important;cursor:pointer;overflow:hidden;opacity:1!important}
.ttt-cell:not(:disabled):hover,.ttt-cell:not(:disabled):focus-visible{background:#f0eee6!important;outline:4px solid #f0b400;outline-offset:-4px}
.ttt-cell:disabled{cursor:default!important;opacity:1!important}
.ttt-mark{position:absolute;inset:18%;display:block;pointer-events:none}
.ttt-mark-x::before,.ttt-mark-x::after{content:"";position:absolute;left:50%;top:50%;width:18%;height:118%;border-radius:999px;background:linear-gradient(90deg,#a71919,#e34a43 48%,#b52222);box-shadow:0 2px 4px rgba(0,0,0,.2);transform-origin:center}
.ttt-mark-x::before{transform:translate(-50%,-50%) rotate(45deg)}
.ttt-mark-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.ttt-mark-o{inset:19%;border:clamp(8px,2.1vw,14px) solid #1769aa;border-radius:50%;background:transparent;box-shadow:inset 0 2px 4px rgba(0,0,0,.13),0 2px 4px rgba(0,0,0,.16)}
.ttt-cell.is-winning{background:#fff4b5!important;outline:5px solid #f0b400;outline-offset:-6px}
.ttt-legend{display:flex;justify-content:center;gap:18px;margin:-2px 0 12px;color:#4a4a4a}
.ttt-legend strong{color:#202124}
@media(max-width:520px){.ttt-game{max-width:100%}.ttt-setup{display:grid}.ttt-setup label{min-width:0}.ttt-board{width:min(94vw,390px);gap:6px;padding:8px;border-radius:16px}.ttt-cell{border-radius:10px!important}.ttt-mark{inset:17%}.ttt-mark-o{inset:18%;border-width:clamp(7px,3vw,12px)}}

.ttt-game{position:relative}
.ttt-fireworks{position:absolute;inset:0;z-index:30;overflow:hidden;pointer-events:none;border-radius:18px}
.ttt-spark{position:absolute;left:var(--x);top:var(--y);width:9px;height:9px;border-radius:50%;background:var(--spark-color);box-shadow:0 0 10px var(--spark-color);opacity:0;animation:ttt-firework .85s ease-out var(--delay) forwards}
@keyframes ttt-firework{0%{opacity:0;transform:translate(0,0) scale(.2)}15%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35)}}