/* Hot Dice: posuda (2D i providna dugmad preko 3D), red odloženih kockica, traka poteza, pločice igrača.
   Kockica (2D) je zajednička: die.css. Boje i dugmad iz base.css. */
.is-game .felt.hd{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.hd-wrap{position:absolute;inset:0;display:flex;flex-direction:column;gap:clamp(4px,1vw,10px);padding:clamp(8px,1.4vw,18px)}
.hd-bar{text-align:center;min-height:56px;padding:2px 8px 0;pointer-events:none}
.hd-bar 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)}
.hd-bar span{display:block;font-size:15px;font-weight:600;color:var(--cream-2)}
.hd-bar strong{color:var(--brass-hi);font-size:17px}
.hd-host{position:relative;flex:1;min-height:0}
.hd-plates{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}

/* ---------- 2D posuda ---------- */
/* safe: posuda koja ne stane ne sme da se popne preko trake poteza */
.hd-tray2d{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:14px;padding:4px}
.hd-box{width:min(620px,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)}
.hd-in{min-height:120px;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)}
.hd-keep{min-height:76px;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,14px);padding:6px 12px;width:min(620px,100%)}
.hd-tray2d .cell{--s:clamp(54px,9vw,72px);width:var(--s);height:var(--s);display:block;flex:none}
.hd-keep .cell{border-radius:calc(var(--s)*.2);box-shadow:inset 0 0 0 2px rgba(232,200,130,.28)}
.hd-tray2d .die2d{cursor:default}
.hd-tray2d .die2d:hover{transform:none}
.hd-tray2d .die2d.can{cursor:pointer;box-shadow:0 0 0 2px rgba(240,212,145,.75),0 6px 12px rgba(0,0,0,.4),inset 0 -4px 0 rgba(0,0,0,.12)}
.hd-tray2d .die2d.can:hover{transform:translateY(-3px)}
.hd-tray2d .die2d.held{cursor:pointer}
.hd-tray2d .die2d.dim{filter:brightness(.6) saturate(.6);cursor:help}
/* odložena u ranijem bacanju: zaključana (tamnija, bez okvira) */
.hd-tray2d .die2d.locked{filter:brightness(.78) sepia(.25);box-shadow:0 3px 6px rgba(0,0,0,.35);cursor:help}
.hd-tray2d .die2d.hint{box-shadow:0 0 0 3px #8ee09b,0 0 18px rgba(142,224,155,.7),0 6px 12px rgba(0,0,0,.4)}
.hd-die.nope{animation:hdnope .3s}
@keyframes hdnope{25%{translate:-4px 0}75%{translate:4px 0}}
.hd-die:focus-visible{outline:3px solid var(--brass-hi);outline-offset:2px}

/* ---------- 3D posuda: platno + providna dugmad tačno preko kockica ---------- */
.hd-tray3d{position:absolute;inset:0}
.hd-tray3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}
.hd-hits{position:absolute;inset:0;pointer-events:none}
.hd-hits .hd-die{position:absolute;padding:0;border:0;border-radius:10px;background:transparent;pointer-events:auto;cursor:default}
.hd-hits .hd-die.can,.hd-hits .hd-die.held{cursor:pointer}
.hd-hits .hd-die.dim,.hd-hits .hd-die.locked{cursor:help}

/* ---------- pločice igrača ---------- */
.hd-plate{display:flex;flex-direction:column;gap:4px;min-width:118px;min-height:44px;padding:6px 14px 7px;border-radius:16px;cursor:pointer;
  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;transition:border-color .2s,box-shadow .2s}
.hd-pt{display:flex;align-items:center;gap:8px}
.hd-plate b{font:700 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:8em}
.hd-plate small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-3)}
.hd-plate small:empty{display:none}
.hd-plate .st{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--brass-hi);white-space:nowrap;font-variant-numeric:tabular-nums}
.hd-plate .st svg{width:16px;height:16px}
.hd-prog{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.hd-prog i{display:block;height:100%;background:linear-gradient(90deg,#c9a24e,#f0d491);transition:width .5s}
.hd-plate.turn{border-color:var(--brass-hi);box-shadow:0 0 0 3px rgba(240,212,145,.25),0 6px 14px rgba(0,0,0,.35)}
.hd-plate.win .st{color:#8ee09b}

#b-roll{min-width:140px}
#b-bank{min-width:150px}

/* imena za "Pass the phone" */
.hd-names{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 0 8px}
.hd-names input{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}

/* poruka ide gore: dole su pločice igrača */
.toast{bottom:auto;top:calc(var(--bar) + 14px);transform:translate(-50%,-20px)}
.toast.on{transform:translate(-50%,0)}
@media (max-width:640px){
  .hd-wrap{padding:8px 6px}
  .hd-bar{min-height:48px}
  .hd-bar b{font-size:19px}
  .hd-bar span{font-size:14px}
  .hd-plate{min-width:0;padding:4px 10px 6px;gap:3px}
  .hd-plate b{font-size:13px;max-width:6.5em}
  .hd-plate small{display:none}
  /* šest kockica u jednom redu: 6 × kockica + razmaci + okvir moraju da stanu u širinu stola */
  .hd-in{min-height:92px;padding:8px;gap:6px;flex-wrap:nowrap}
  .hd-box{padding:6px}
  .hd-keep{min-height:60px;padding:4px;gap:6px}
  .hd-tray2d .die2d,.hd-tray2d .cell{--s:clamp(40px,11vw,58px)}
  /* Roll i Bank bez ikonice, uži razmak: pet dugmadi u jednom redu i sa "Bank 1,250" */
  .controls{gap:6px;padding-left:6px;padding-right:6px}
  #b-roll svg,#b-bank svg{display:none}
  #b-roll,#b-bank{min-width:0;padding:0 16px}
  /* na telefonu New i Hint samo ikonica (ime ostaje u aria-label), da traka stane u jedan red */
  #b-new,#b-hint{width:50px;padding:0}
  #b-new span,#b-hint span{display:none}
}
@media (max-width:400px){
  /* najuži telefon: kockica ostaje bar 40 px (meta za prst), razmaci i okvir se skupljaju */
  .hd-in{gap:3px;padding:4px}
  .hd-box{padding:4px}
  .hd-keep{gap:3px;padding:2px}
  .hd-tray2d .die2d,.hd-tray2d .cell{--s:clamp(40px,11vw,54px)}
  #b-roll{min-width:0;padding:0 14px}
  #b-bank{min-width:0;padding:0 14px}
}
/* nizak ekran (položen telefon): posuda mora da stane iznad pločica */
@media (max-height:620px){
  .hd-in{min-height:72px;padding:6px}
  .hd-keep{min-height:52px}
  .hd-tray2d{gap:6px}
  .hd-tray2d .die2d,.hd-tray2d .cell{--s:clamp(40px,9vh,54px)}
}