/* Checkers: drvena tabla (zeleno i bež kao turnirska), crvene i crne figure, pločice igrača. Sve ostalo je iz base.css. */
.is-game .felt.checkers{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.ckwrap{position:absolute;inset:0}
.ckboard{position:absolute;border-radius:calc(var(--frame) * .7);
  background:var(--wood),linear-gradient(160deg,#8a5527,#5a3518);background-size:cover;
  box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,230,180,.35),inset 0 -2px 0 rgba(0,0,0,.35)}
/* polja: 8×8 kao pozadina (tamna polja su i elementi .sq za dodir) */
.ckboard::before{content:'';position:absolute;inset:var(--frame);border-radius:3px;
  background:repeating-conic-gradient(#2f5a3c 0 25%,#e9d7ac 0 50%) 0 0/calc(var(--sq) * 2) calc(var(--sq) * 2);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 0 24px rgba(0,0,0,.25)}
.ckboard::after{content:'';position:absolute;inset:var(--frame);pointer-events:none;border-radius:3px;background:var(--noise);opacity:.12;mix-blend-mode:overlay}
.sq{position:absolute;width:var(--sq);height:var(--sq);z-index:1}
.sq.last{background:rgba(240,212,145,.3);box-shadow:inset 0 0 0 2px rgba(240,212,145,.35)}
.sq.dest{cursor:pointer;z-index:30}
.sq.dest::after{content:'';position:absolute;left:50%;top:50%;width:34%;height:34%;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(240,212,145,.85);box-shadow:0 0 0 3px rgba(240,212,145,.3),0 0 16px rgba(240,212,145,.6);animation:ckdot 1.3s ease-in-out infinite}
@keyframes ckdot{50%{transform:translate(-50%,-50%) scale(1.15)}}
.sq.hint{box-shadow:inset 0 0 0 3px #8ee09b}
.sq:focus-visible{outline:3px solid var(--brass-hi);outline-offset:-3px}
/* figure */
.pc{position:absolute;left:0;top:0;width:var(--sq);height:var(--sq);z-index:10;display:grid;place-items:center;
  transition:transform .26s cubic-bezier(.3,.7,.3,1),opacity .3s}
.pc .disc{width:80%;height:80%;border-radius:50%;position:relative;
  box-shadow:0 calc(var(--sq) * .05) calc(var(--sq) * .08) rgba(0,0,0,.55),inset 0 calc(var(--sq) * -.05) 0 rgba(0,0,0,.35)}
.pc .disc::before{content:'';position:absolute;inset:14%;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.07) 0 6deg,rgba(0,0,0,.08) 6deg 12deg);box-shadow:inset 0 0 0 2px rgba(0,0,0,.18)}
.pc.b .disc{background:radial-gradient(circle at 35% 30%,#5b606c,#22252c 55%,#101114)}
.pc.r .disc{background:radial-gradient(circle at 35% 30%,#ef6a62,#b8242a 55%,#7d1218)}
.pc .crown{position:absolute;width:44%;height:44%;color:#f3d896;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s}
/* kralj: dva diska jedan na drugom i kruna */
.pc.king .disc{box-shadow:0 calc(var(--sq) * .05) 0 0 rgba(0,0,0,.45),0 calc(var(--sq) * .1) calc(var(--sq) * .1) rgba(0,0,0,.5),inset 0 calc(var(--sq) * -.05) 0 rgba(0,0,0,.35)}
.pc.king .crown{opacity:1;transform:none}
.pc.crowned .disc{animation:ckcrown .8s ease-out}
@keyframes ckcrown{30%{transform:scale(1.18);box-shadow:0 0 0 4px var(--brass-hi),0 0 30px 10px rgba(240,212,145,.7)}}
.pc.can{cursor:pointer}
.pc.can .disc{outline:2px solid rgba(240,212,145,.7);outline-offset:1px}
.pc.sel{z-index:20}
.pc.sel .disc{outline:3px solid var(--brass-hi);outline-offset:2px;transform:translateY(-6%) scale(1.06);box-shadow:0 calc(var(--sq) * .14) calc(var(--sq) * .16) rgba(0,0,0,.5)}
.pc.hint .disc{outline:3px solid #8ee09b;outline-offset:2px}
.pc.moving{z-index:25}
.pc.taken{opacity:.35}
.pc.gone{opacity:0;transform-origin:center;pointer-events:none}
.pc.nope .disc{animation:cknope .3s}
@keyframes cknope{25%{translate:-4px 0}75%{translate:4px 0}}
.pc:focus-visible{outline:3px solid var(--brass-hi);outline-offset:-2px;border-radius:50%}
/* pločice igrača */
.ckplate{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}
.ckplate b{font:700 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9em}
.ckplate small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-3)}
.ckplate .st{font-size:13px;font-weight:700;color:var(--brass-hi);white-space:nowrap}
.ckplate .left{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-width:30px;justify-content:center;padding:2px 9px;border-radius:12px;background:rgba(255,255,255,.1);font-weight:800;font-variant-numeric:tabular-nums}
.ckplate .k{display:inline-flex;align-items:center;gap:2px;color:#f3d896}
.ckplate .k .crown{width:14px;height:14px}
.ckplate.turn{border-color:var(--brass-hi);box-shadow:0 0 0 3px rgba(240,212,145,.25),0 6px 14px rgba(0,0,0,.35)}
.dot{display:inline-block;width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.35)}
.dot.b{background:radial-gradient(circle at 35% 30%,#5b606c,#17191f)}
.dot.r{background:radial-gradient(circle at 35% 30%,#ef6a62,#9a1a20)}
@media (max-width:640px){
  .ckplate{min-height:0;padding:0 10px;gap:6px;font-size:12px;flex-wrap:nowrap}
  .ckplate b{font-size:13px}
  .ckplate small{display:none}
  .ckplate .st{font-size:12px}
}
/* imena za dvoje na uređaju */
.cknames{display:grid;gap:10px;padding:4px 0 8px}
.cknames label{display:flex;align-items:center;gap:10px}
.cknames 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}
.cknames .dot{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)}