/* Dots and Boxes: list papira na filcu, tačke mastilom, crte u boji igrača, kutije sa inicijalom. Ostalo je iz base.css. */
.is-game .felt.dab{touch-action:manipulation;-webkit-user-select:none;user-select:none;--db0:#c23b2b;--db1:#2b5fb4;--db0l:#f5d3ca;--db1l:#d2def3}
.dbwrap{position:absolute;inset:0}
.dbboard{position:absolute;cursor:pointer}
.dbpaper{position:absolute;left:0;top:0;overflow:visible;filter:drop-shadow(0 12px 20px rgba(0,0,0,.45))}
.dbpaper .sheet{fill:#fbf6e8;stroke:rgba(120,90,50,.25);stroke-width:1}
/* vodilje: bleda tačkasta crta gde se sme povući */
.dbpaper .guides line{stroke:rgba(90,70,40,.13);stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round}
.dbpaper .ln{stroke:transparent;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.dbpaper .ln.on.p0{stroke:var(--db0)}
.dbpaper .ln.on.p1{stroke:var(--db1)}
.dbpaper .ln.on.op{stroke:#5b5148}
/* crta se povuče od tačke do tačke */
.dbpaper .ln.draw{animation:dbdraw .2s ease-out}
@keyframes dbdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* poslednja crta: blag sjaj */
.dbpaper .ln.on.last{filter:drop-shadow(0 0 3px rgba(255,214,120,.95))}
/* crta pod mišem ili izabrana (telefon): providna u boji onoga ko je na potezu */
.dbboard.t0 .dbpaper .ln.pre{stroke:var(--db0);opacity:.42}
.dbboard.t1 .dbpaper .ln.pre{stroke:var(--db1);opacity:.42}
.dbpaper .ln.hint:not(.on){stroke:#3fae5a;opacity:.85;animation:dbhint 1s ease-in-out infinite alternate}
@keyframes dbhint{from{opacity:.35}to{opacity:.95}}
/* lekcija: kutije o kojima korak govori */
.dbpaper .bx.glow rect{fill:rgba(255,214,110,.42);stroke:#d9a227;stroke-width:3;stroke-dasharray:6 5}
/* lekcija: crta koju korak traži */
.dbpaper .ln.aim:not(.on){stroke:var(--db0);stroke-dasharray:.12 .1;opacity:.8}
.dbpaper .dots circle{fill:#2a1d12}
/* kutije: boja igrača i inicijal */
.dbpaper .bx rect{fill:transparent}
.dbpaper .bx.on.p0 rect{fill:var(--db0l)}
.dbpaper .bx.on.p1 rect{fill:var(--db1l)}
.dbpaper .bx text{text-anchor:middle;dominant-baseline:central;font-family:var(--serif);font-weight:700;fill:transparent}
.dbpaper .bx.on.p0 text{fill:var(--db0)}
.dbpaper .bx.on.p1 text{fill:var(--db1)}
.dbpaper .bx.new{animation:dbpop .26s ease-out;transform-box:fill-box;transform-origin:center}
@keyframes dbpop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
/* crte kao prava dugmad (dodir ide na najbližu crtu, dugme je za tastaturu, čitač ekrana i testove) */
.dbedges{position:absolute;inset:0}
.dbedge{position:absolute;margin:0;padding:0;border:0;background:transparent;border-radius:8px;cursor:pointer;color:transparent}
.dbedge:disabled{cursor:default}
.dbedge:focus-visible{outline:3px solid var(--brass-hi);outline-offset:-3px}
.dbedge.hint{box-shadow:inset 0 0 0 3px rgba(142,224,155,.85)}
/* pločice igrača */
.dbplate{position:absolute;left:0;top:0;z-index:40;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:40px;padding:7px 12px;border-radius:20px;
  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;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.dbplate b{font:700 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9em}
.dbplate small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-3)}
.dbplate .st{font-size:13px;font-weight:700;color:var(--brass-hi);white-space:nowrap}
.dbplate .cnt{margin-left:auto;min-width:36px;text-align:center;padding:2px 9px;border-radius:12px;background:rgba(255,255,255,.1);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.dbplate.turn,.dbplate.won{border-color:var(--brass-hi);box-shadow:0 0 0 3px rgba(240,212,145,.25),0 6px 14px rgba(0,0,0,.35)}
.dbdot{display:inline-block;width:16px;height:16px;border-radius:4px;flex:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.dbdot.s0{background:#d9503f}
.dbdot.s1{background:#3f73c8}
@media (max-width:640px){
  .dbplate{min-height:0;padding:0 10px;gap:6px;font-size:12px;flex-wrap:nowrap}
  .dbplate b{font-size:13px}
  .dbplate small{display:none}
  .dbplate .st{font-size:12px}
  .dbplate .cnt{font-size:14px;min-width:30px}
}
/* imena za dvoje na uređaju */
.dbnames{display:grid;gap:10px;padding:4px 0 8px}
.dbnames label{display:flex;align-items:center;gap:10px}
.dbnames input{flex:1;min-width:0;height:48px;border-radius:12px;border:1px solid var(--brass-dim);background:rgba(0,0,0,.28);color:var(--cream);font:600 16px var(--sans);padding:0 12px}
.dbnames .dbdot{width:24px;height:24px}
/* poruka ide gore: dole je moja pločica */
.toast{bottom:auto;top:calc(var(--bar) + 14px);transform:translate(-50%,-20px)}
.toast.on{transform:translate(-50%,0)}