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

/* ---------- 2D kutija ---------- */
.box2d{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.bx-frame{--tw:clamp(31px,7.6vw,70px);width:min(800px,100%);padding:clamp(8px,1.6vw,18px);border-radius:18px;display:flex;flex-direction:column;gap:clamp(8px,1.4vw,14px);
  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)}
/* letvica sa pločicama */
.bx-tiles{display:flex;justify-content:center;gap:clamp(3px,.8vw,8px);padding:clamp(8px,1.4vw,14px) clamp(4px,1vw,12px) 0;border-radius:10px;
  background:linear-gradient(180deg,#5a3216,#3e220d);box-shadow:inset 0 3px 8px rgba(0,0,0,.55)}
.box2d .tile{position:relative;width:var(--tw);height:calc(var(--tw) * 1.55);min-height:64px;flex:none;padding:0;border:0;border-radius:6px 6px 3px 3px;cursor:pointer;
  font:800 clamp(22px,4.6vw,40px)/1 var(--serif);color:#3a2410;transform-origin:50% 100%;
  background:linear-gradient(180deg,#fdf4df,#e6d2a6);box-shadow:inset 0 0 0 2px rgba(110,70,25,.35),0 4px 6px rgba(0,0,0,.4),inset 0 -5px 0 rgba(120,80,30,.18);
  transition:transform .32s cubic-bezier(.3,1.4,.5,1),opacity .2s,box-shadow .2s,filter .2s}
.box2d .tile .face{display:grid;place-items:center;height:100%}
.box2d .tile:hover:not(.down):not(.dim){transform:translateY(-3px)}
/* zatvorena: pala napred, vidi se poleđina (bez broja) */
.box2d .tile.down{transform:perspective(420px) rotateX(-74deg);background:linear-gradient(180deg,#a87a48,#7a5128);box-shadow:inset 0 0 0 2px rgba(60,30,8,.4);cursor:help}
.box2d .tile.down .face{visibility:hidden}
.box2d .tile.sel{transform:translateY(-10px);box-shadow:0 0 0 3px var(--brass-hi),0 0 18px rgba(240,212,145,.6),0 10px 14px rgba(0,0,0,.45)}
.box2d .tile.can{box-shadow:inset 0 0 0 2px rgba(110,70,25,.35),0 0 0 2px rgba(240,212,145,.75),0 4px 6px rgba(0,0,0,.4)}
.box2d .tile.dim{filter:brightness(.62) saturate(.6);cursor:help}
.box2d .tile.hint{box-shadow:0 0 0 3px #8ee09b,0 0 18px rgba(142,224,155,.7),0 4px 6px rgba(0,0,0,.4)}
.tile.nope{animation:stbnope .3s}
@keyframes stbnope{25%{translate:-4px 0}75%{translate:4px 0}}
.tile:focus-visible{outline:3px solid var(--brass-hi);outline-offset:2px}
/* filc sa kockicama */
.bx-felt{min-height:clamp(96px,18vh,150px);border-radius:10px;display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,34px);padding:12px;
  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)}
.bx-felt .die2d{--s:clamp(54px,11vw,76px);cursor:default}
.bx-felt .die2d:hover{transform:none}

/* ---------- 3D kutija: platno + providna dugmad tačno preko pločica ---------- */
.box3d{position:absolute;inset:0}
.box3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}
.box3d .bx-tiles{position:absolute;inset:0;padding:0;background:none;box-shadow:none;pointer-events:none}
.box3d .tile{position:absolute;padding:0;border:0;border-radius:6px;background:transparent;color:transparent;cursor:pointer;pointer-events:auto}
.box3d .tile .face{opacity:0}
.box3d .tile.down,.box3d .tile.dim{cursor:help}
.bx-dice3d{position:absolute;pointer-events:none}

/* ---------- pločice igrača ---------- */
.stb-plate{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border-radius:22px;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}
.stb-plate b{font:700 15px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:8em}
.stb-plate small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-3)}
.stb-plate .st{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--brass-hi);white-space:nowrap;font-variant-numeric:tabular-nums}
.stb-plate .st svg{width:16px;height:16px}
.stb-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)}
.stb-plate.win .st{color:#8ee09b}

/* izbor jedne ili dve kockice (kad su 7, 8 i 9 zatvorene) */
/* svoj red ispod trake, uvek zauzet (nevidljiv dok nije dozvoljeno), da se kutija ne pomera kad se pojavi */
.stb-dice{align-self:center;display:flex;align-items:center;gap:10px;font-weight:700;color:var(--cream-2);
  padding:3px 4px 3px 14px;border-radius:24px;background:rgba(20,10,4,.6);border:1px solid rgba(212,176,106,.3)}
.stb-dice[hidden]{display:flex;visibility:hidden}
/* nizak ekran (telefon položeno): red bi oteo mesto kutiji, pa stoji preko filca */
@media (max-height:520px){
  .stb-dice{position:absolute;z-index:5;left:50%;top:52px;transform:translateX(-50%)}
}
#b-roll{min-width:150px}

/* imena za "Pass the phone" */
.stb-names{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 0 8px}
.stb-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){
  .stb-bar{min-height:48px}
  .stb-bar b{font-size:19px}
  .stb-bar span{font-size:14px}
  .stb-plate{min-height:40px;padding:4px 10px;gap:6px}
  .stb-plate b{font-size:13px;max-width:6.5em}
  .stb-plate small{display:none}
  #b-roll{min-width:100px}
  /* 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){
  .bx-tiles{gap:2px;padding:5px 3px 0}
  #b-roll{min-width:0;padding:0 18px}
}
/* uspravan telefon: ima mesta u visinu, pa su pločice više (lakše se pogađaju) i filc veći */
@media (max-width:640px){
  /* pločice dele celu širinu kutije (svaki piksel je važan za prst) */
  .stb-wrap{padding:8px 6px}
  .bx-frame{padding:6px}
  .bx-tiles{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;padding:6px 4px 0}
  .box2d .tile{width:auto}
}
@media (max-width:640px) and (orientation:portrait){
  .box2d .tile{height:clamp(84px,24vw,112px)}
  .bx-felt{min-height:clamp(150px,26vh,220px)}
}
/* nizak ekran (mali telefon, položen telefon): kutija mora da stane iznad pločica igrača */
@media (max-height:620px){
  .box2d .tile{height:clamp(56px,11vh,72px);min-height:0}
  .bx-felt{min-height:clamp(72px,15vh,96px);padding:6px}
  .bx-felt .die2d{--s:clamp(44px,9vh,56px)}
}