/* Cryptogram: list papira sa citatom (kućica: upisano slovo gore, šifra dole), ispod tastatura. Raspored računa
   client/cryptogram/game.ts (--box, --key). Ostalo je iz base.css. */
.is-game .felt.cryptogram{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.cgboard{position:absolute;display:flex;flex-direction:column;align-items:center;gap:14px;--cgink:#2a1d12}
.cgpaper{box-sizing:border-box;padding:calc(var(--box)*.45) calc(var(--box)*.35);border-radius:10px;background:#fbf6e8;
  box-shadow:0 14px 26px rgba(0,0,0,.45),inset 0 0 0 1px rgba(120,90,50,.22)}
.cgquote{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--box)*.32) calc(var(--box)*.5)}
.cgword{display:inline-flex;align-items:flex-end;gap:calc(var(--box)*.08)}
.cgbox{appearance:none;margin:0;padding:0;border:0;background:transparent;cursor:pointer;width:calc(var(--box)*.78);display:flex;flex-direction:column;align-items:center;border-radius:6px}
.cgbox b{display:block;width:100%;height:calc(var(--box)*.86);border-bottom:2.5px solid var(--cgink);font:800 calc(var(--box)*.66)/calc(var(--box)*.86) var(--sans);color:#1d4f9a;text-align:center}
.cgbox small{font:600 calc(var(--box)*.36)/1.3 var(--sans);color:#7a6a55}
.cgbox.shown b{color:var(--cgink)}
.cgbox.sel{background:rgba(242,201,100,.75)}
.cgbox.wrong b{color:#c0281f}
.cgbox:focus-visible{outline:3px solid var(--brass)}
.cgmark{font:800 calc(var(--box)*.66)/1 var(--sans);color:var(--cgink);padding-bottom:calc(var(--box)*.5)}
.cgby{margin:calc(var(--box)*.4) 0 0;text-align:center;font:italic 600 calc(var(--box)*.42)/1.3 var(--serif);color:#7a1e2a}
.cgboard.reveal .cgbox{animation:cgin .3s ease-out both}
@keyframes cgin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.cgboard.won .cgbox b{animation:cgwin .7s ease-in-out}
@keyframes cgwin{50%{color:#2f8a4f}}
/* tastatura */
.cgkeys{display:flex;flex-direction:column;gap:6px}
.cgrow{display:flex;justify-content:center;gap:5px}
.cgkey{appearance:none;width:var(--key);height:calc(var(--key)*1.15);min-height:40px;border:1px solid rgba(120,90,50,.35);border-radius:8px;
  background:linear-gradient(180deg,#fffaf0,#efe2c4);color:var(--cgink);font:700 calc(var(--key)*.5)/1 var(--sans);cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.35);display:grid;place-items:center;padding:0}
.cgkey.used{opacity:.42}
.cgkey.locked{opacity:.25}
.cgerase{width:calc(var(--key)*1.5)}
.cgerase svg{width:60%;height:60%}
.cgkey:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.cgboard.reveal .cgbox,.cgboard.won .cgbox b{animation:none}}