/* Five Dice: posuda (2D i 3D), tablica, traka poteza. Boje i dugmad iz base.css. */
.fd{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,440px);gap:clamp(8px,1.4vw,18px);padding:clamp(10px,1.4vw,18px)}
.fd-tray{position:relative;min-height:0;display:flex;flex-direction:column}
.fd-card{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(212,176,106,.35) transparent;border-radius:14px}
.turnbar{position:relative;z-index:2;text-align:center;padding:6px 8px 4px;min-height:58px;pointer-events:none}
.turnbar b{display:block;font:italic 700 clamp(20px,2.4vw,26px)/1.2 var(--serif);color:#fff3d6;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.turnbar span{display:block;font-size:14px;font-weight:600;color:var(--cream-2)}

/* 3D posuda */
.tray3d{position:relative;flex:1;min-height:0}
.tray3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;touch-action:pinch-zoom}

/* 2D posuda (slab telefon, reduced-motion, ili isključen 3D) */
/* safe: posuda koja ne stane ne sme da se popne preko trake poteza */
.tray2d{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:16px;padding:6px}
.tray-box{width:min(560px,100%);padding:12px;border-radius:18px;background:linear-gradient(180deg,rgba(255,225,180,.18),rgba(0,0,0,.28)),var(--wood),linear-gradient(90deg,#6e3f1c,#93592a 50%,#6e3f1c);
  box-shadow:0 18px 30px rgba(0,0,0,.45),inset 0 2px 1px rgba(255,222,170,.4)}
.tray-in{min-height:110px;border-radius:10px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(8px,2vw,16px);padding:16px;
  background:radial-gradient(ellipse 80% 70% at 50% 30%,rgba(255,240,200,.16),transparent 70%),var(--noise),linear-gradient(#237a4c,#175838);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),inset 0 6px 18px rgba(0,0,0,.5)}
.keep-row{min-height:76px;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,14px);padding:6px 12px;border-radius:14px;border:2px dashed rgba(232,200,130,.35);width:min(560px,100%)}
.tray2d .cell{--s:clamp(54px,9vw,72px);width:var(--s);height:var(--s);display:block;flex:none}
.keep-row .cell{border-radius:calc(var(--s)*.2);box-shadow:inset 0 0 0 2px rgba(232,200,130,.28)}
.keep-row{border:0}
.tray2d.locked .die2d{cursor:default}
.tray2d.locked .die2d:hover{transform:none}

/* dugme Roll sa tri tačkice (preostala bacanja) */
#b-roll{min-width:170px}
#b-roll .pips{display:inline-flex;gap:5px;margin-left:4px}
#b-roll .pips i{width:9px;height:9px;border-radius:50%;background:#3a2410;opacity:.85}
#b-roll .pips i.used{opacity:.2}

/* tablica */
.scorecard{background:linear-gradient(180deg,#fffaf0,#f3e8cf);color:var(--ink);border-radius:14px;box-shadow:0 14px 28px rgba(0,0,0,.4);padding:10px 10px 12px;font-variant-numeric:tabular-nums}
.scorecard table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.scorecard th,.scorecard td{padding:0;border-bottom:1px solid rgba(120,80,30,.15);height:38px;text-align:center}
.scorecard thead th{font:700 13px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);height:34px;border-bottom:2px solid rgba(120,80,30,.3);padding:0 2px}
.scorecard thead th.cur{color:#1f5a3d}
.scorecard tbody th{text-align:left;font-weight:700;padding:0 6px 0 4px;line-height:1.1}
.scorecard tbody th .rl{display:block;font-size:15px}
.scorecard tbody th small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-2)}
.scorecard td.f{font-weight:800;font-size:17px}
.scorecard td.f.zero{color:#a0896a}
.scorecard td.f.last{animation:inked 1.4s ease-out}
@keyframes inked{0%{background:rgba(240,212,145,.9)}100%{background:transparent}}
.scorecard td.can button,.scorecard td.ann button{width:100%;height:36px;border:0;border-radius:8px;cursor:pointer;font:700 16px var(--sans);color:#1f6b3f;background:rgba(31,107,63,.1);box-shadow:inset 0 0 0 1.5px rgba(31,107,63,.35)}
.scorecard td.can button:hover,.scorecard td.ann button:hover{background:rgba(31,107,63,.22)}
.scorecard td.can.z button{color:#a0896a;background:rgba(0,0,0,.03);box-shadow:inset 0 0 0 1px rgba(120,80,30,.2)}
.scorecard td.ann button{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7a4b10;background:rgba(201,162,78,.16);box-shadow:inset 0 0 0 1.5px rgba(201,162,78,.6)}
.scorecard td.called,.scorecard td.can.called button{box-shadow:inset 0 0 0 2.5px #c9a24e;background:rgba(240,212,145,.35)}
.scorecard td.called span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7a4b10}
.scorecard tr.sum th,.scorecard tr.sum td{background:rgba(120,80,30,.07);font-weight:700;height:34px}
.scorecard tr.sum th{font-size:13px}
.scorecard tr.sum th small{display:inline;font-size:11px;margin-left:4px}
.scorecard tr.sum td em{font-style:normal;color:#1f6b3f;font-size:12px;margin-left:3px}
.scorecard tr.tot th,.scorecard tr.tot td{font-size:17px;font-weight:800;border-bottom:0;background:rgba(120,80,30,.13)}
.scorecard table.yamb th,.scorecard table.yamb td{min-width:46px}
.scorecard .tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.scorecard .tabs button{flex:1;min-height:40px;border:1px solid rgba(120,80,30,.25);background:#fff;border-radius:10px;font:600 14px var(--sans);color:var(--ink);cursor:pointer}
.scorecard .tabs button[aria-selected=true]{background:#2a1a0c;color:#f3d896}
.scorecard .tabs button.turn::after{content:' •';color:#1f6b3f}
.scorecard .grand{text-align:right;padding:8px 6px 0;font-size:15px}
.scorecard .grand b{font-size:20px}

/* nova partija */
.seg.multi button[aria-pressed=true]{background:linear-gradient(180deg,#f3d896,#c39a4b);color:#3a2410}
.names{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 0 8px}
.names input{height:46px;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}

@media (max-width:820px){
  .fd{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(220px,42%) minmax(0,1fr);padding:8px}
  .turnbar{min-height:48px;padding-top:2px}
  .turnbar b{font-size:19px}
  .turnbar span{font-size:13px}
  .scorecard{padding:6px 6px 8px}
  .scorecard table{font-size:14px}
  .scorecard th,.scorecard td{height:34px}
  .scorecard tbody th .rl{font-size:14px}
  .scorecard tbody th small{display:none}
  /* polje mora da ostane bar 40 px široko i na 320 px (pet kolona sa Hand); ime reda se skuplja */
  .scorecard table.yamb th,.scorecard table.yamb td{min-width:38px}
  .scorecard td.can button,.scorecard td.ann button{height:32px;font-size:15px}
  .tray2d{gap:8px}
  .tray-in{min-height:84px;padding:10px}
  .die2d,.tray2d .cell{--s:clamp(44px,12vw,58px)}
  .keep-row{min-height:60px}
  #b-roll{min-width:150px}
}
@media (max-width:400px){
  /* najuži telefoni (320 px): Yamb sa svih pet kolona (i Hand) mora da stane, a polje da ostane bar 40 px široko;
     zaglavlja kolona su sitnija, ime reda se lomi u dva reda, napomena uz zbir ide ispod */
  .scorecard{padding:6px 4px 8px}
  .scorecard thead th{font-size:11px;letter-spacing:0}
  .scorecard tbody th{padding:0 2px;font-size:13px}
  .scorecard tbody th .rl{font-size:13px}
  .scorecard tr.sum th small{display:block;margin-left:0;line-height:1}
  .scorecard table.yamb th,.scorecard table.yamb td{min-width:0}
  .scorecard td{min-width:42px}
  .scorecard table.yamb td{width:42px}
  /* šest kockica u jednom redu: kockica 40 px i uži razmak, da red ne gura sto u stranu i da posuda ne prekrije traku poteza */
  .die2d,.tray2d .cell{--s:clamp(40px,12vw,58px)}
  .fd{grid-template-rows:minmax(236px,42%) minmax(0,1fr)}
  .tray2d{padding:2px;gap:6px}
  .tray-box{padding:4px}
  .tray-in{gap:3px;padding:4px;min-height:56px}
  .keep-row{gap:3px;padding:4px 2px;min-height:50px}
}
.turnbar strong{color:var(--brass-hi)}
/* naziv reda, zbira i kolone: dodir otvara objašnjenje (help.ts) */
.scorecard .rh{all:unset;width:100%;box-sizing:border-box;min-height:34px;cursor:help;display:flex;flex-direction:column;justify-content:center;border-radius:6px}
.scorecard thead .rh{align-items:center;text-decoration:underline dotted rgba(120,80,30,.45);text-underline-offset:3px}
.scorecard tr.sum .rh{display:block;line-height:34px}
.scorecard .rh:hover .rl,.scorecard thead .rh:hover{color:#1f5a3d}
.scorecard .rh:focus-visible{outline:2px solid #1f6b3f;outline-offset:1px}