.ttt-surface { text-align:center; padding:clamp(16px,4vw,40px) 8px 24px; }
.ttt-surface h2 { font-family:Georgia,serif; font-size:clamp(25px,4vw,42px); font-weight:400; line-height:1.15; margin:12px 0 24px; }
.ttt-surface h2 em { color:#ac365b; }
.ttt-players { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.ttt-player { color:#542b3a; opacity:1; display:flex; align-items:center; gap:8px; max-width:100%; padding:9px 14px; border:1px solid #e6cbd3; border-radius:30px; background:#fff9f8; font-size:14px; transition:box-shadow .2s,border-color .2s; }
.ttt-player.active { border-color:#b63c62; box-shadow:0 0 0 3px #b63c6212; }
.ttt-player > span:first-child { width:25px; height:25px; flex-shrink:0; }
.ttt-player > span:last-child { overflow-wrap:anywhere; }
.ttt-player.ttt-rose svg { color:#c5496c; }
.ttt-player.ttt-cream svg { color:#d85a88; }
.ttt-status { min-height:1.5em; margin:20px 0; font-size:clamp(14px,2.5vw,18px); }
.ttt-board-wrap { position:relative; width:min(100%,420px); margin:auto; padding:12px; border-radius:30px; background:linear-gradient(145deg,#e9bcc8,#f4ded0); box-shadow:0 12px 0 #d8a7b3,0 23px 38px #873a5120; }
.ttt-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ttt-cell { position:relative; display:grid; place-items:center; aspect-ratio:1; width:100%; min-width:0; padding:16%; border:1px solid #ffffff; border-radius:20%; background:linear-gradient(145deg,#fffdf9,#fcedeb); box-shadow:0 4px 0 #dab5bb; touch-action:manipulation; transition:background .2s,transform .15s; }
.ttt-cell[aria-disabled="false"] { cursor:pointer; }
.ttt-cell[aria-disabled="true"] { cursor:default; }
.ttt-cell[aria-disabled="false"]:hover { background:#fff; transform:translateY(-3px); }
.ttt-cell:focus-visible { outline:3px solid #a52c55; outline-offset:2px; z-index:2; }
.ttt-cell.winning { background:#ffe3e9; }
.ttt-piece { background:transparent; display:block; width:100%; height:100%; animation:ttt-bloom .36s cubic-bezier(.2,.8,.3,1.3) both; filter:drop-shadow(0 5px 0 #862d4d30); }
.ttt-piece.ttt-rose { color:#c5496c; }
.ttt-piece.ttt-cream { color:#d85a88; filter:drop-shadow(0 4px 0 #bc89754a); }
.ttt-piece svg { display:block; width:100%; height:100%; overflow:visible; }
.ttt-line { position:absolute; inset:12px; width:calc(100% - 24px); height:calc(100% - 24px); pointer-events:none; overflow:visible; }
.ttt-line line { stroke:#a62b53; stroke-width:5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; opacity:.8; animation:ttt-draw .6s ease-out both; }
.ttt-note { font-size:13px; opacity:.8; margin:30px 0 18px; }
@keyframes ttt-bloom { from { opacity:0; transform:scale(.3) rotate(-14deg); } to { opacity:1; transform:scale(1) rotate(0); } }
@keyframes ttt-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce) { .ttt-piece,.ttt-line line { animation:none; } .ttt-cell,.ttt-player { transition:none; } }