/* Dice Bloom gameplay only.
 * Replace this file for another game; keep page.css unchanged.
 * Owns: board, dice, incoming tray, rotation control, dragging and pop animation.
 */

.dice-stage {
  direction:ltr;
  width:min(100%,calc((100svh - 240px)*.73),680px);
  margin:12px auto 0;
  --die-size:calc((100cqw - 24px)/5);
  container-type:inline-size;
}

.dice-board {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  aspect-ratio:1;
  padding:8px;
  gap:0;
  border:2px solid #d5ae62;
  border-radius:24px;
  background:linear-gradient(145deg,#d8ae61,#4b3317 12%,#0a0c10 18%,#080a10 82%,#b28b45);
  box-shadow:inset 0 0 0 3px #332513,0 15px 45px #000a;
  touch-action:none;
}

.cell {
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  border:0;
  padding:0;
  background:none;
  aspect-ratio:1;
  cursor:pointer;
  border-radius:15px;
  touch-action:none;
}

.cell-art,.die {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.cell-art {
  position:absolute;
  inset:0;
}

.cell .die {
  position:relative;
  z-index:1;
  width:91%;
  height:91%;
  filter:drop-shadow(0 3px 3px #000a);
}

.cell:focus-visible {
  outline:2px solid #ffe5a0;
  outline-offset:-5px;
  z-index:2;
}

.cell.valid {
  box-shadow:inset 0 0 0 3px #d8c488;
}

.cell.invalid {
  box-shadow:inset 0 0 0 3px #b34b4b;
}

.dock {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:0;
  height:calc(2*var(--die-size) + 34px);
}

.tray-space {
  display:grid;
  place-items:center;
  width:calc(2*var(--die-size) + 18px);
  height:100%;
}

.tray {
  position:relative;
  display:block;
  width:calc(var(--die-size)*var(--cols) + 18px);
  height:calc(var(--die-size)*var(--rows) + 18px);
  border:2px solid #c2a060;
  border-radius:21px;
  background:linear-gradient(145deg,#232938,#07090e 70%);
  box-shadow:inset 0 0 0 3px #08090b,inset 0 1px #fff7,0 12px 30px #0009;
  cursor:grab;
  touch-action:none;
  transition:width .22s,height .22s;
  --cols:2;
  --rows:1;
  padding:7px;
}

.tray .die {
  position:absolute;
  width:var(--die-size);
  height:var(--die-size);
  left:calc(7px + var(--x)*var(--die-size));
  top:calc(7px + var(--y)*var(--die-size));
  transition:left .22s,top .22s;
}

.tray:active {
  cursor:grabbing;
}

.tray:focus-visible,.rotation-button:focus-visible {
  outline:3px solid #fff1b8;
  outline-offset:3px;
}

.rotation-button {
  display:grid;
  place-items:center;
  justify-self:center;
  width:var(--die-size);
  height:var(--die-size);
  border:0;
  border-radius:50%;
  padding:0;
  background:transparent;
  cursor:pointer;
  transition:transform .15s,filter .15s;
}

.rotation-button img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 5px 6px #0009);
}

.rotation-button:hover:not(:disabled) {
  filter:brightness(1.12);
}

.rotation-button:active:not(:disabled) {
  transform:translateY(1px) scale(.96);
}

.rotation-button:disabled {
  opacity:.25;
}

.drag-piece {
  position:fixed;
  z-index:190;
  pointer-events:none;
  margin:0;
  filter:drop-shadow(0 12px 12px #000a);
  transition:none;
}

.drag-piece .die {
  position:absolute;
}

.drag-source {
  opacity:.35;
}

.pop .die {
  animation:dice-pop .36s ease-out forwards;
}

@keyframes dice-pop {
  30% {
    transform:scale(1.13);
    filter:brightness(1.5);
  }
  100% {
    transform:scale(.3);
    opacity:0;
  }
}

.preview-capture .dice-stage {
  width:min(100%,570px);
}

@media(max-width:370px) {
  .dice-board {
    padding:5px;
    border-radius:20px;
  }
  .dice-stage {
    --die-size:calc((100cqw - 18px)/5);
  }
}

@media(orientation:landscape) and (max-height:700px) {
  .dice-stage {
    width:min(52vw,420px);
  }
}