/* Four in a Row: plava uspravna tabla sa rupama, crveni i žuti žetoni koji padaju iza ploče. Ostalo je iz base.css. */
.is-game .felt.fiar{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.frwrap{position:absolute;inset:0}
.frstage{position:absolute}
.frdiscs{position:absolute;inset:0;z-index:1}
/* žeton: krug sa udubljenim prstenom kao pravi plastični žeton */
.frdisc{position:absolute;left:0;top:0;width:var(--d);height:var(--d);border-radius:50%;opacity:0;pointer-events:none;
  box-shadow:inset 0 calc(var(--d) * -.06) 0 rgba(0,0,0,.25),inset 0 calc(var(--d) * .05) 0 rgba(255,255,255,.25)}
.frdisc::after{content:'';position:absolute;inset:18%;border-radius:50%;box-shadow:inset 0 2px 3px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.3)}
.frdisc.on{opacity:1}
.frdisc.r{background:radial-gradient(circle at 38% 32%,#f26a57,#d23626 55%,#a8201a)}
.frdisc.y{background:radial-gradient(circle at 38% 32%,#ffe78a,#f5c12e 55%,#d29a0e)}
.frdisc.drop{animation:frbounce .2s ease-out}
@keyframes frbounce{40%{translate:0 calc(var(--sq) * -.12)}100%{translate:0 0}}
/* žeton u ruci iznad kolone i providan žeton u rupi gde pada */
.frghost{z-index:3;transition:left .12s ease-out;box-shadow:0 6px 12px rgba(0,0,0,.4)}
.frghost.on{opacity:1}
.frland.on{opacity:.38}
/* pobeda: pobednički žetoni svetle, ostali se priguše */
.frstage.over .frdisc.on:not(.win){filter:brightness(.55) saturate(.7)}
.frdisc.win{animation:frwin 1.1s ease-in-out infinite alternate;box-shadow:0 0 0 3px #fff7d6,0 0 18px 4px rgba(255,240,180,.9)}
@keyframes frwin{from{scale:1}to{scale:1.06}}
/* poslednji potez: mala tačka */
.frdisc.last::before{content:'';position:absolute;left:50%;top:50%;width:16%;height:16%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.85);z-index:1}
/* ploča (SVG sa rupama) */
.frfront{position:absolute;left:0;z-index:2;pointer-events:none;overflow:visible;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45))}
.frfront .rim circle{fill:none;stroke:rgba(10,30,90,.55);stroke-width:2.5}
.frfront .edge{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2}
.frfoot{position:absolute;z-index:1;border-radius:0 0 6px 6px;background:linear-gradient(#1f4aa6,#163a86);box-shadow:0 6px 10px rgba(0,0,0,.4)}
/* kolone: prava dugmad preko table */
.frcol{position:absolute;z-index:4;margin:0;padding:0;border:0;background:transparent;border-radius:calc(var(--sq) * .2);cursor:pointer;color:transparent}
.frcol:disabled{cursor:default}
.frcol.full{cursor:not-allowed}
.frstage.mine .frcol:not(.full):hover,.frcol.sel{background:linear-gradient(rgba(255,240,190,0),rgba(255,240,190,.13) 18%,rgba(255,240,190,.13))}
.frcol:focus-visible{outline:3px solid var(--brass-hi);outline-offset:-3px}
.frcol.hint{background:linear-gradient(rgba(142,224,155,0),rgba(142,224,155,.3) 18%,rgba(142,224,155,.3));box-shadow:inset 0 0 0 3px #8ee09b}
.frcol.nope{animation:frnope .3s}
@keyframes frnope{25%{translate:-4px 0}75%{translate:4px 0}}
/* pločice igrača */
.frplate{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}
.frplate b{font:700 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9em}
.frplate small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-3)}
.frplate .st{font-size:13px;font-weight:700;color:var(--brass-hi);white-space:nowrap}
.frplate .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}
.frplate.turn,.frplate.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)}
.frdot{display:inline-block;width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.3)}
.frdot.r{background:radial-gradient(circle at 38% 32%,#f26a57,#b8261c)}
.frdot.y{background:radial-gradient(circle at 38% 32%,#ffe78a,#d9a514)}
@media (max-width:640px){
  .frplate{min-height:0;padding:0 10px;gap:6px;font-size:12px;flex-wrap:nowrap}
  .frplate b{font-size:13px}
  .frplate small{display:none}
  .frplate .st{font-size:12px}
  .frplate .cnt{font-size:14px;min-width:30px}
}
/* imena za dvoje na uređaju */
.frnames{display:grid;gap:10px;padding:4px 0 8px}
.frnames label{display:flex;align-items:center;gap:10px}
.frnames 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}
.frnames .frdot{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)}