/* Word Grid: drvena posuda sa kockicama slova na filcu, traka sa rečju iznad, lista reči pored (široko) ili ispod
   (usko). Raspored računa client/word-grid/game.ts (--cell, .side ili .stack). Ostalo je iz base.css. */
.is-game .felt.wgrid{-webkit-user-select:none;user-select:none}
.wgboard{position:absolute;--wgink:#2a1d12}
/* traka sa rečju koja se slaže */
.wgbar{position:absolute;display:flex;align-items:center;gap:8px;box-sizing:border-box;padding:6px 6px 6px 14px;border-radius:12px;
  background:rgba(12,24,18,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.wgword{flex:1;min-width:0;overflow:hidden;white-space:nowrap;color:var(--cream);font:600 15px/1.2 var(--sans)}
.wgword span{color:var(--cream-3)}
.wgword b{font:800 26px/1 var(--sans);letter-spacing:.06em;color:#fff6dc}
.wgword.bad b{color:#ff9d93;text-decoration:line-through;text-decoration-thickness:2px}
.wgboard.tight .wgword b{font-size:21px}
.wgclear{appearance:none;flex:none;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:var(--cream);
  font:500 26px/1 var(--sans);cursor:pointer}
.wgenter{appearance:none;flex:none;height:42px;min-width:84px;padding:0 16px;border-radius:21px;border:0;cursor:pointer;
  font:800 17px/1 var(--sans);background:rgba(255,255,255,.14);color:var(--cream-3)}
.wgenter.on{background:var(--brass);color:#2a1d12}
.wgenter:disabled{cursor:default}
.wgclear:focus-visible,.wgenter:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
/* posuda i kockice */
.wgtray{position:absolute;border-radius:calc(var(--cell)*.22);touch-action:pinch-zoom;
  background:linear-gradient(160deg,#7a4b2b,#5a341c);box-shadow:0 16px 28px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.14),inset 0 -3px 6px rgba(0,0,0,.35)}
.wgcubes{position:absolute;z-index:1;left:calc(var(--cell)*.3);top:calc(var(--cell)*.3);display:grid;gap:calc(var(--cell)*.12);
  grid-template-columns:repeat(var(--n),var(--cell));grid-auto-rows:var(--cell)}
.wgc{appearance:none;margin:0;padding:0;border:0;border-radius:calc(var(--cell)*.16);cursor:pointer;touch-action:pinch-zoom;
  background:linear-gradient(160deg,#fffaf0,#efe3c8);color:var(--wgink);display:grid;place-items:center;
  box-shadow:0 calc(var(--cell)*.05) 0 #c9b48c,0 calc(var(--cell)*.09) calc(var(--cell)*.12) rgba(0,0,0,.45),inset 0 1px 0 #fff;
  font:800 calc(var(--cell)*.56)/1 var(--sans);transition:background .12s,transform .12s}
.wgc.qu{font-size:calc(var(--cell)*.42)}
.wgc span{pointer-events:none}
.wgc:disabled{cursor:default;color:var(--wgink)}
.wgc.on{background:linear-gradient(160deg,#ffe08a,#f2c964);transform:translateY(1px)}
.wgc.last{box-shadow:0 0 0 3px #b81f2a,0 calc(var(--cell)*.05) 0 #c9a24e,0 calc(var(--cell)*.09) calc(var(--cell)*.12) rgba(0,0,0,.45)}
.wgc.hinted{box-shadow:0 0 0 4px #3fae5a,0 calc(var(--cell)*.05) 0 #c9b48c,0 calc(var(--cell)*.09) calc(var(--cell)*.12) rgba(0,0,0,.45)}
.wgc.hinted.pulse{animation:wgpulse .9s ease-in-out 3}
@keyframes wgpulse{50%{box-shadow:0 0 0 8px #3fae5a,0 0 18px #7fd08f}}
.wgc.shown{background:linear-gradient(160deg,#cfe8ff,#9fcbf4)}
.wgc.ok{background:linear-gradient(160deg,#d6f5d8,#9fdca6)}
.wgc.bad{background:linear-gradient(160deg,#ffd9d4,#f4a59b)}
.wgc:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.wgpath{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.wgpath polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}
.wgpath .live polyline{stroke:#f2c964;opacity:.95}
.wgpath .live polyline,.wgpath .ok polyline,.wgpath .bad polyline,.wgpath .show polyline{fill:none}
.wgpath .ok polyline{stroke:#7fd08f}
.wgpath .bad polyline{stroke:#f4a59b}
.wgpath .bad{animation:wgnope .6s ease-out forwards}
@keyframes wgnope{to{opacity:0}}
.wgpath .show polyline{stroke:#9fcbf4}
.wgpath circle{display:none}
.wgboard.shake .wgc{animation:wgshake .44s ease-out both;animation-delay:calc(var(--i,0)*22ms)}
@keyframes wgshake{0%{opacity:0;transform:translate(0,-10px) rotate(-14deg)}60%{opacity:1;transform:translate(0,2px) rotate(5deg)}100%{transform:none}}
/* lista reči */
.wglist{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;padding:10px 12px 12px;border-radius:12px;color:var(--ink);
  background:linear-gradient(180deg,#fffaf0,#f1e5c9);box-shadow:0 10px 22px rgba(0,0,0,.4)}
.wghead{appearance:none;border:0;background:none;padding:0 0 6px;margin:0 0 6px;width:100%;text-align:left;cursor:pointer;flex:none;
  border-bottom:2px solid rgba(122,30,42,.25);color:var(--ink)}
.wghead b{display:block;font:italic 800 19px/1.2 var(--serif);color:#7a1e2a}
.wghead span{display:block;font:600 14px/1.3 var(--sans);color:#6b5a44}
.wgboard.stack .wghead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-bottom:4px;margin-bottom:4px}
.wgboard.stack .wghead b{font-size:17px}
.wgfound{list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow:hidden;display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px}
.wgw{appearance:none;border:0;margin:0;padding:3px 8px;border-radius:14px;cursor:pointer;white-space:nowrap;min-height:30px;
  font:700 16px/1.2 var(--sans);color:var(--ink);background:rgba(120,90,50,.1)}
.wgw i{font-style:normal;font-weight:800;font-size:12px;margin-left:5px;color:#2f7a45}
.wgw.miss{background:transparent;box-shadow:inset 0 0 0 1px rgba(120,90,50,.3);color:#5d4c38}
.wgw.miss i{color:#8a7a62}
.wgw.sel{background:#cfe8ff;box-shadow:inset 0 0 0 2px #1d4f9a}
.wgw.fresh{animation:wgfound .7s ease-out}
@keyframes wgfound{0%{background:rgba(242,201,100,.9)}100%{background:rgba(120,90,50,.1)}}
.wgmore{display:inline-block;padding:5px 8px;font:600 14px/1.2 var(--sans);color:#6b5a44}
.wgboard.tight .wgw{font-size:14px;padding:2px 6px;min-height:26px}
.wghead:focus-visible,.wgw:focus-visible{outline:3px solid var(--brass);outline-offset:1px}
@media (prefers-reduced-motion:reduce){
  .wgboard.shake .wgc,.wgc.hinted.pulse,.wgw.fresh,.wgpath .bad{animation:none}
  .wgc{transition:none}
}