/* Train Dominoes: stanica sa engine-om, redovi vozova, ruka, meta na kraju voza. Domina iz domino.css. */
.is-game .felt.trains{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.tdboard{position:absolute;inset:0;isolation:isolate;touch-action:manipulation}
.tdboard .dom{touch-action:manipulation;transition:transform .38s cubic-bezier(.3,.7,.3,1),width .3s,height .3s,opacity .25s;will-change:transform}
.tdboard .dom.gone{opacity:0;pointer-events:none;transition:opacity .2s}
.tdboard .dom.mine{cursor:pointer;border-radius:8px}
.tdboard .dom.mine:focus-visible{outline:3px solid var(--brass-hi);outline-offset:2px}
.tdboard .dom.legal svg{filter:drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 4px rgba(240,212,145,.95)) drop-shadow(0 5px 8px rgba(0,0,0,.3))}
.tdboard .dom.dim{filter:brightness(.9) saturate(.8)}
.tdboard .dom.sel svg{filter:drop-shadow(0 0 0 3px var(--brass-hi)) drop-shadow(0 0 6px #f0d491) drop-shadow(0 12px 14px rgba(0,0,0,.45))}
.tdboard .dom.hint{border-radius:9px;box-shadow:0 0 0 3px #ffe39a,0 0 18px 4px rgba(255,227,154,.75);filter:none}
.tdboard .dom.dbl svg{filter:drop-shadow(0 0 6px #ff9b6a) drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.tdboard .dom.nope{animation:tdnope .32s}
@keyframes tdnope{25%{margin-left:-6px}75%{margin-left:6px}}
/* stanica levo: engine i kost */
.tdhub{position:absolute;left:0;top:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  border-radius:16px;background:rgba(20,10,4,.38);border:1px solid rgba(212,176,106,.22)}
.tdeng,.tdbone{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;color:var(--cream);font:inherit;cursor:pointer;padding:4px;min-width:40px;min-height:40px}
.tdeng svg{width:calc(var(--rowh)*.62);height:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.tdeng .dbody{fill:#fbf5e6;stroke:#c39a4b;stroke-width:4}
.tdeng .dline line{stroke:#a39370;stroke-width:3}
.tdeng .dnail{fill:#c39a4b}
.tdeng small,.tdbone small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-3)}
.tdbone b{display:grid;place-items:center;min-width:38px;height:30px;padding:0 6px;border-radius:9px;background:#6d1f1c;border:1px solid #3d0f0d;color:#fff3d6;font:800 16px var(--sans);font-variant-numeric:tabular-nums;box-shadow:0 3px 6px rgba(0,0,0,.35)}
/* red voza */
.tdrow{position:absolute;left:0;top:0;z-index:2}
.tdgroove{position:absolute;right:0;top:8%;bottom:8%;border-radius:12px;background:rgba(0,0,0,.16);box-shadow:inset 0 2px 6px rgba(0,0,0,.28)}
.tdrow.shared .tdgroove{background:rgba(212,176,106,.12);box-shadow:inset 0 0 0 1px rgba(212,176,106,.3),inset 0 2px 6px rgba(0,0,0,.25)}
.tdrow.marked .tdgroove{background:rgba(255,190,120,.12);box-shadow:inset 0 0 0 1px rgba(255,190,120,.45)}
.tdrow.mine .tdgroove{box-shadow:inset 4px 0 0 var(--brass),inset 0 2px 6px rgba(0,0,0,.28)}
.tdplate{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:3;display:flex;align-items:center;gap:8px;width:172px;min-height:40px;padding:4px 10px;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);color:var(--cream);font:inherit;font-size:14px;cursor:pointer;text-align:left;white-space:nowrap}
.tdplate b{font:700 15px var(--sans)}
.tdplate small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-3)}
.tdplate .tdr{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.tdboard.small .tdplate .tdr{margin-left:0;gap:3px}
.tdplate .tdn{display:inline-flex;align-items:center;gap:2px;font-weight:800;font-variant-numeric:tabular-nums}
.tdplate .tdi{width:16px;height:16px;opacity:.75}
.tdplate .tdopen{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:9px;background:#e9a35c;color:#2e1607}
.tdrow.shared .tdplate{border-color:rgba(212,176,106,.55);background:rgba(60,38,12,.8)}
.tdrow.mine .tdplate{box-shadow:inset 4px 0 0 var(--brass),0 6px 14px rgba(0,0,0,.35)}
.tdrow.turn .tdplate{border-color:var(--brass-hi);box-shadow:0 0 0 3px rgba(240,212,145,.25),0 6px 14px rgba(0,0,0,.35)}
.tdrow.dbl .tdgroove{box-shadow:inset 0 0 0 2px rgba(255,155,106,.7),inset 0 2px 6px rgba(0,0,0,.25)}
.tdmore{position:absolute;top:50%;transform:translateY(-50%);z-index:3;font:800 13px var(--sans);color:var(--cream-3);padding:3px 6px;border-radius:9px;background:rgba(0,0,0,.25)}
.tdmore:empty{display:none}
/* meta: otvoren kraj voza, broj koji treba */
.tdtgt{position:absolute;z-index:40;display:grid;place-items:center;min-width:40px;min-height:24px;border-radius:8px;border:2px dashed rgba(240,212,145,.28);background:transparent;color:rgba(255,243,214,.5);font:800 15px var(--sans);pointer-events:none;padding:0}
.tdtgt.on{pointer-events:auto;cursor:pointer;border:2px solid var(--brass-hi);background:rgba(240,212,145,.22);color:#fff3d6;box-shadow:0 0 0 4px rgba(240,212,145,.2),0 0 18px rgba(240,212,145,.5);animation:tdpulse 1.2s ease-in-out infinite}
.tdtgt.hint{box-shadow:0 0 0 4px #ffe39a,0 0 22px #ffe39a}
@keyframes tdpulse{50%{background:rgba(240,212,145,.36)}}
/* natpis iznad ruke */
.tdbanner{position:absolute;left:50%;transform:translate(-50%,0);z-index:60;pointer-events:none;opacity:0;transition:opacity .25s;
  font:italic 700 clamp(18px,2.2vw,24px)/1.2 var(--serif);color:#fff3d6;text-shadow:0 2px 10px rgba(0,0,0,.6);text-align:center;white-space:nowrap}
.tdbanner.on{opacity:1}
.tdbanner span{font:800 14px var(--sans);font-style:normal;padding:3px 9px;border-radius:10px;background:rgba(0,0,0,.35);margin-left:6px;vertical-align:3px}
/* tabele u lampi */
.tdtable{width:100%;border-collapse:collapse;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.tdtable th,.tdtable td{padding:7px 6px;text-align:center;border-bottom:1px solid rgba(212,176,106,.2)}
.tdtable tbody th,.tdtable tfoot th:first-child{text-align:left;font-weight:600;color:var(--cream-3)}
.tdtable tbody th small{font-size:12px;color:var(--brass-hi);font-weight:700}
.tdtable tr.me th,.tdtable tr.me td{color:#fff3d6;font-weight:700}
.tdtable td.out{color:var(--brass-hi);font-weight:800}
.tdtable thead th{font-size:13px;color:var(--brass-hi)}
.tdtable tfoot th{font-size:17px;border-bottom:0}
#b-draw.hint{box-shadow:0 0 0 3px var(--brass-hi)}
/* telefon i uzan sto (layout() pali .small): stanica je traka na vrhu, pločice uske */
.tdboard.small .tdplate{width:66px;min-height:40px;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:2px 8px;border-radius:12px;font-size:12px}
.tdboard.small .tdplate b{font-size:13px}
.tdboard.small .tdplate .tdn{margin-left:0;font-size:12px}
.tdboard.small .tdplate .tdi{width:12px;height:12px}
.tdboard.small .tdplate .tdopen{font-size:9px;padding:1px 4px;letter-spacing:0}
.tdboard.small .tdhub{flex-direction:row;gap:18px;border-radius:12px}
.tdboard.small .tdeng,.tdboard.small .tdbone{flex-direction:row;gap:8px;padding:2px 8px}
.tdboard.small .tdeng svg{width:auto;height:30px}
.tdboard.small .tdbone b{min-width:32px;height:26px;font-size:14px}
/* niski redovi (mali telefon): ime i broj u jednom redu, pločica visoka koliko red */
.tdboard.tiny .tdplate{min-height:0;height:calc(var(--rowh) - 2px);flex-direction:row;align-items:center;gap:4px;padding:0 6px}
.tdboard.tiny .tdplate b{font-size:12px}
.tdboard.tiny .tdplate .tdn{font-size:11px}
@media (max-width:640px){
  .tdbanner{font-size:16px;white-space:normal;width:94%}
  .tdbanner span{font-size:12px}
}
/* poruka ide gore: dole je ruka */
.toast{bottom:auto;top:calc(var(--bar) + 14px);transform:translate(-50%,-20px)}
.toast.on{transform:translate(-50%,0)}