/* Star Checkers: drvena zvezda sa rupama, krakovi obojeni po igraču, klikeri sa sjajem, pločice u uglovima. Ostalo je iz base.css. */
.is-game .felt.star-checkers{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.scboard{position:absolute;--u:30px}
/* drvo isečeno u zvezdu (unutrašnji i); senka ide na omotač, jer filter roditelja dolazi posle isecanja */
.scwood{position:absolute;inset:0;pointer-events:none;filter:drop-shadow(0 16px 24px rgba(0,0,0,.55))}
.scwood>i{position:absolute;inset:0;background:var(--wood),linear-gradient(160deg,#9a6531,#5d3818);background-size:cover}
.scwood>i::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(255,226,170,.16),rgba(0,0,0,.3) 75%),var(--noise);mix-blend-mode:overlay}
.scart{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.scart .scedge{fill:none;stroke:rgba(40,20,6,.55);stroke-width:.07}
/* krakovi: obojeno drvo (boja igrača), krak bez igrača bled */
.sctri{stroke-width:.06;stroke:rgba(0,0,0,.25)}
.sctri.p0{fill:rgba(205,58,46,.42)} .sctri.p1{fill:rgba(232,185,58,.42)} .sctri.p2{fill:rgba(60,160,78,.42)}
.sctri.p3{fill:rgba(46,98,190,.45)} .sctri.p4{fill:rgba(128,78,184,.45)} .sctri.p5{fill:rgba(240,232,214,.4)}
.sctri.idle{fill:rgba(0,0,0,.08)}
/* rupe: prazni elementi za dodir i tastaturu (crtež rupe je u SVG-u) */
.schole{position:absolute;width:calc(var(--u) * .86);height:calc(var(--u) * .86);transform:translate(-50%,-50%);border-radius:50%;z-index:2}
.schole.mine,.schole.dest{cursor:pointer}
.schole:focus-visible{outline:3px solid var(--brass-hi);outline-offset:0}
/* gde sme: zlatna tačka u rupi */
.schole.dest::after{content:'';position:absolute;left:50%;top:50%;width:46%;height:46%;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 14px rgba(240,212,145,.65);animation:scdot 1.3s ease-in-out infinite}
@keyframes scdot{50%{transform:translate(-50%,-50%) scale(1.18)}}
/* put skokova pod mišem */
.schole.via::before{content:'';position:absolute;left:50%;top:50%;width:26%;height:26%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(240,212,145,.9);z-index:4}
/* poslednji potez: odakle je krenuo i kuda je skakao */
.schole.trail::before{content:'';position:absolute;left:50%;top:50%;width:30%;height:30%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(240,212,145,.45);box-shadow:0 0 0 1.5px rgba(0,0,0,.25)}
.schole.hint-to::after{background:#8ee09b;box-shadow:0 0 0 3px rgba(142,224,155,.35),0 0 16px rgba(142,224,155,.7)}
.schole.nope{animation:scnope .3s}
@keyframes scnope{25%{translate:-4px 0}75%{translate:4px 0}}
/* klikeri */
.scmarbles{position:absolute;inset:0;pointer-events:none;z-index:3}
.scm{position:absolute;left:0;top:0;width:calc(var(--u) * .76);height:calc(var(--u) * .76);border-radius:50%;
  box-shadow:0 calc(var(--u) * .06) calc(var(--u) * .1) rgba(0,0,0,.55),inset 0 calc(var(--u) * -.06) calc(var(--u) * .08) rgba(0,0,0,.35)}
.scm::after{content:'';position:absolute;left:20%;top:14%;width:34%;height:26%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.85),rgba(255,255,255,0) 70%)}
.scm.moving{z-index:5}
.scm.sel{box-shadow:0 0 0 3px var(--brass-hi),0 0 18px rgba(240,212,145,.75),0 calc(var(--u) * .1) calc(var(--u) * .16) rgba(0,0,0,.55)}
.scm.p0,.scdot.p0{background:radial-gradient(circle at 35% 30%,#ff8d80,#d23a2e 50%,#7e1610)}
.scm.p1,.scdot.p1{background:radial-gradient(circle at 35% 30%,#fff0a6,#e6b53a 50%,#8d6410)}
.scm.p2,.scdot.p2{background:radial-gradient(circle at 35% 30%,#a6efab,#3f9a4f 50%,#1b5426)}
.scm.p3,.scdot.p3{background:radial-gradient(circle at 35% 30%,#9cc2ff,#2f62b5 50%,#13306a)}
.scm.p4,.scdot.p4{background:radial-gradient(circle at 35% 30%,#d9b3ff,#7a4bb0 50%,#3a1d63)}
.scm.p5,.scdot.p5{background:radial-gradient(circle at 35% 30%,#ffffff,#e6dfcc 50%,#9c937c)}
.schole.hint{box-shadow:0 0 0 3px #8ee09b,0 0 16px rgba(142,224,155,.7)}
/* pločice igrača u uglu pored svog kraka */
.scplate{position:absolute;z-index:6;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:14px;
  background:rgba(20,10,4,.74);border:1px solid rgba(212,176,106,.3);box-shadow:0 6px 14px rgba(0,0,0,.35);cursor:pointer;transition:border-color .2s,box-shadow .2s;overflow:hidden}
.scplate .nm{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.scplate b{font:700 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scplate small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-3)}
.scplate .nm>small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scplate .nm b small{display:none}
.scplate .st{font-size:13px;font-weight:700;color:var(--brass-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scplate .st:empty{display:none}
.scplate .cnt{margin-left:auto;flex:none;padding:2px 9px;border-radius:12px;background:rgba(255,255,255,.1);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.scplate .cnt small{font-size:11px;letter-spacing:0;color:var(--cream-3);text-transform:none}
.scplate.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)}
.scplate.win{border-color:#8ee09b}
.scdot{display:inline-block;width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.3)}
@media (max-width:640px){
  .scplate{gap:6px;padding:0 7px;border-radius:11px}
  .scplate b{font-size:13px}
  .scplate .nm>small{display:none}
  /* na telefonu je pločica uska (115-150 px): ko je na potezu vidi se po zlatnom okviru, bez teksta */
  .scplate .st{display:none}
  .scplate .st{font-size:11px}
  .scplate .cnt{font-size:13px;padding:1px 6px}
  .scplate .cnt small{font-size:10px}
  .scdot{width:12px;height:12px}
}
/* uska pločica (najuži telefoni): samo boja i broj kod kuće; ime je u objašnjenju na dodir i u poruci ko je na potezu */
.scplate.tight{justify-content:center;gap:8px}
.scplate.tight .nm{display:none}
.scplate.tight .cnt{margin-left:0}
/* imena za igru na jednom uređaju */
.scnames{display:grid;gap:8px;padding:4px 0 8px}
.scnames label{display:flex;align-items:center;gap:10px}
.scnames label[hidden]{display:none}
.scnames input{flex:1;min-width:0;height:44px;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}
.scnames .scdot{width:22px;height:22px}
/* 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)}