/* Tic-tac-toe: drvena tabla 3 × 3 sa žlebovima, polja su dugmad, X (crven) i O (plav) se iscrtaju potezom. */
.is-game .felt.ttt{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.ttwrap{position:absolute;inset:0}
.ttboard{position:absolute;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:calc(var(--s)*.035);border-radius:calc(var(--s)*.05);
  background:radial-gradient(ellipse at 30% 20%,#f7ead0,#ead6ad 60%,#dcc293);box-shadow:0 0 0 calc(var(--s)*.022) #9a6a3a,0 0 0 calc(var(--s)*.03) #5b3a1c,0 18px 40px rgba(0,0,0,.45)}
.ttgrid{position:absolute;inset:calc(var(--s)*.035);width:calc(100% - var(--s)*.07);height:calc(100% - var(--s)*.07);pointer-events:none}
.ttgrid line{stroke:#9a6a3a;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.ttcell{position:relative;margin:0;padding:calc(var(--s)*.02);border:0;border-radius:10px;background:none;cursor:default;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ttboard.mine .ttcell:not([data-m="x"]):not([data-m="o"]){cursor:pointer}
.ttcell svg{display:block;width:100%;height:100%;overflow:visible}
.ttcell path,.ttcell circle{fill:none;stroke-linecap:round;stroke-width:11}
.ttcell[data-m="x"] path{stroke:#b8323a;filter:drop-shadow(0 2px 1px rgba(80,20,10,.35))}
.ttcell[data-m="o"] circle{stroke:#24508f;filter:drop-shadow(0 2px 1px rgba(10,30,70,.35))}
/* iscrtavanje potezom */
/* mirno stanje je nacrtano (dashoffset 0), animacija ide OD praznog: bez animacije (snimak, manje pokreta) znak se vidi */
.ttcell.draw path{stroke-dasharray:80;animation:ttdraw80 .16s ease-out backwards}
.ttcell.draw .s2{animation-delay:.12s}
.ttcell.draw circle{stroke-dasharray:170;animation:ttdraw170 .3s ease-out backwards}
@keyframes ttdraw80{from{stroke-dashoffset:80}}
@keyframes ttdraw170{from{stroke-dashoffset:170}}
@keyframes ttdraw420{from{stroke-dashoffset:420}}
/* prazno polje: blag sjaj pri prelazu mišem (svako prazno polje je dozvoljeno, pa nema tačkica) */
@media (hover:hover){.ttcell.can:hover{background:rgba(255,255,255,.45)}}
.ttcell.last{background:rgba(255,236,170,.4)}
.ttcell.hint{animation:glow 1.1s ease-in-out infinite;background:rgba(255,214,110,.45)}
.ttcell.nope{animation:ttnope .38s}
@keyframes ttnope{25%{transform:translateX(-5px)}60%{transform:translateX(4px)}100%{transform:none}}
.ttcell:focus-visible{outline:3px solid var(--brass-hi);outline-offset:-4px}
/* crta kroz pobednički red */
.ttwin{position:absolute;inset:calc(var(--s)*.035);width:calc(100% - var(--s)*.07);height:calc(100% - var(--s)*.07);pointer-events:none}
.ttwin line{stroke:#e2a92c;stroke-width:9;stroke-linecap:round;opacity:.92;stroke-dasharray:420;animation:ttdraw420 .45s .15s ease-out backwards;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
/* sledeća partija u meču */
/* centriranje kroz `translate`, ne `transform`: .btn:hover menja transform i dugme je bežalo ispod miša (2026-10-20) */
.ttnext{position:absolute;z-index:60;translate:-50% -50%;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.ttnext[hidden]{display:none}
/* pločice igrača */
.ttplate{position:absolute;left:0;top:0;z-index:50;display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 12px;border-radius:22px;
  background:rgba(20,10,4,.72);border:1px solid rgba(212,176,106,.3);box-shadow:0 6px 14px rgba(0,0,0,.35);font-size:14px;color:var(--cream);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.ttmk{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;font:800 16px var(--sans);font-style:normal;background:#fbf3dd}
.ttmk.m0{color:#b8323a}
.ttmk.m1{color:#24508f}
.ttplate b{font:700 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:2.6em;flex:0 1 auto}
.ttplate small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-3)}
.ttplate .st{margin-left:auto;min-width:0;overflow:hidden;font-size:13px;font-weight:700;color:var(--brass-hi);white-space:nowrap}
.ttplate .cnt{flex:none;min-width:30px;text-align:center;padding:2px 8px;border-radius:12px;background:rgba(255,255,255,.12);font-weight:800;font-variant-numeric:tabular-nums}
.ttplate.turn{border-color:var(--brass-hi);box-shadow:0 0 0 3px rgba(240,212,145,.3),0 6px 14px rgba(0,0,0,.35)}
.ttplate.won{background:#fbf6ea;color:var(--black)}
.ttplate.won small{display:none}
.ttplate.won .st{color:#7a4b22}
/* dvoje na uređaju */
.ttnames{display:grid;gap:8px;margin-bottom:12px}
.ttnames label{display:flex;align-items:center;gap:10px}
.ttnames input{flex:1;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid rgba(0,0,0,.2);font:600 16px var(--sans)}
@media (max-width:640px){
  .ttplate{gap:6px;padding:3px 10px;font-size:13px}
  .ttplate b{font-size:14px}
  .ttplate small{display:none}
  .ttplate .st{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.ttwin line{animation:none}.ttcell.hint{animation:none}}