/* =============================================================
   GAME: Shut the Box — wooden box, flip-down tiles, felt dice tray
   ============================================================= */
.board-shutthebox {
  --stb-glow: #ffc24a;
  --stb-glow-a: rgba(255, 194, 74, .35);
  --stb-die: min(calc((100vw - 120px) / 5), 60px);
  width: min(calc(100vw - 44px), 640px);
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
}

/* ----- the box: a wooden frame with a recessed tile rack and a felt tray ----- */
.stb-box {
  position: relative; padding: 12px; border-radius: 18px;
  background:
    repeating-linear-gradient(97deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 15px),
    linear-gradient(160deg, #a0672f, #74441b 45%, #5a3212);
  box-shadow: 0 0 0 2px var(--stb-glow), 0 0 28px var(--stb-glow-a), inset 0 2px 0 rgba(255, 220, 160, .35), inset 0 -3px 6px rgba(0, 0, 0, .35);
}
.stb-tiles {
  --n: 9;
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px 4px;
  padding: 10px 8px 14px; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(#1e0f05, #331b0a 70%, #4a2810);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7), inset 0 -2px 0 rgba(255, 210, 150, .12);
}
.stb-tile {
  position: relative; aspect-ratio: .64; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: #3b1f08; perspective: 900px; perspective-origin: 50% -60%;
  font: 800 clamp(15px, calc(100cqw / var(--n) * .5), 30px) / 1 Georgia, "Times New Roman", serif;
  -webkit-tap-highlight-color: transparent;
}
.stb-tile:disabled { cursor: default; }
/* the number burnt into the rack behind each tile (seen when the tile is down) */
.stb-slot {
  position: absolute; inset: 6% 8% 0; display: grid; place-items: center; border-radius: 4px;
  color: rgba(255, 196, 110, .28); background: rgba(0, 0, 0, .25); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
}
.stb-flap {
  position: absolute; inset: 0; transform-origin: 50% 100%; transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), filter .2s;
}
.stb-front, .stb-back { position: absolute; inset: 0; border-radius: 5px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.stb-front {
  display: grid; place-items: center;
  background: linear-gradient(180deg, #fff3d6, #f2d9a6 55%, #ddb979);
  box-shadow: inset 0 0 0 1px rgba(120, 70, 20, .35), inset 0 2px 0 #fffaf0, inset 0 -4px 6px rgba(140, 80, 20, .3), 0 3px 4px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.stb-back {
  transform: rotateX(180deg);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 6px), linear-gradient(#8a531f, #5e3410);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
/* shut: the tile falls forward and lies flat */
.stb-tile.down .stb-flap { transform: rotateX(-92deg); }
.stb-tile.down .stb-front { box-shadow: none; }
.stb-tile:not(:disabled):hover .stb-front { background: linear-gradient(180deg, #fffaf0, #f8e4b9 55%, #e7c68a); }
.stb-tile:focus-visible { outline: none; }
.stb-tile:focus-visible .stb-front { outline: 3px solid var(--focus); outline-offset: 2px; }
/* picked: lifted with an amber glow */
.stb-tile.picked .stb-flap { transform: translateY(-5px); }
.stb-tile.picked .stb-front {
  background: linear-gradient(180deg, #fff1c2, #ffd36b 60%, #f0a830); color: #3a1600;
  box-shadow: 0 0 0 2px var(--stb-glow), 0 0 16px rgba(255, 194, 74, .8), 0 6px 8px rgba(0, 0, 0, .4);
}
.stb-tile.cpu .stb-front { background: linear-gradient(180deg, #e9fbff, #a9ecf7 60%, #6cc7da); box-shadow: 0 0 0 2px var(--p2), 0 0 16px rgba(61, 245, 255, .7), 0 6px 8px rgba(0, 0, 0, .4); }
.stb-tile.tip:not(.picked) .stb-front { box-shadow: 0 0 0 2px rgba(255, 194, 74, .9), 0 0 12px rgba(255, 194, 74, .5); animation: stb-pulse 1.2s ease-in-out infinite; }
@keyframes stb-pulse { 50% { filter: brightness(1.12); } }

/* felt tray where the dice land */
.stb-tray {
  position: relative; margin-top: 10px; min-height: calc(var(--stb-die) + 26px);
  display: flex; align-items: center; justify-content: center; gap: 16px; border-radius: 6px 6px 12px 12px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .06), transparent 70%),
    repeating-radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .015) 0 1px, transparent 1px 3px),
    linear-gradient(#0f3a2a, #0a2a1e);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(0, 0, 0, .25);
}
.stb-dice { display: flex; gap: 14px; }
.stb-sum {
  min-width: 2.6em; font: 800 1.5rem var(--font-head); color: var(--stb-glow);
  text-shadow: 0 0 12px rgba(255, 194, 74, .7); transition: opacity .2s;
}
.stb-sum.stale { opacity: .35; }

/* ----- 3D dice ----- */
.stb-die { transition: opacity .25s; }
.stb-face {
  --c: calc(var(--stb-die) * .72);
  position: relative; width: var(--stb-die); height: var(--stb-die); display: grid; place-items: center; perspective: calc(var(--stb-die) * 5);
}
.stb-face::before {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 24%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent);
}
.stb-cube {
  position: relative; width: var(--c); height: var(--c); transform-style: preserve-3d;
  transition: transform .74s cubic-bezier(.2, .75, .3, 1.06); transition-delay: calc(var(--k, 0) * 40ms);
}
.stb-die.instant .stb-cube { transition: none; }
.stb-side {
  position: absolute; inset: 0; padding: 15%; border-radius: 19%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); place-items: center;
  background: radial-gradient(circle at 30% 25%, #fffdf6, #f6ecd6 55%, #d9c49b);
  box-shadow: inset 0 0 0 1px rgba(90, 50, 10, .2), inset -2px -3px 5px rgba(120, 80, 30, .3), inset 2px 2px 4px #fff;
}
.stb-side.f1 { transform: translateZ(calc(var(--c) / 2)); }
.stb-side.f6 { transform: rotateY(180deg) translateZ(calc(var(--c) / 2)); }
.stb-side.f3 { transform: rotateY(90deg) translateZ(calc(var(--c) / 2)); }
.stb-side.f4 { transform: rotateY(-90deg) translateZ(calc(var(--c) / 2)); }
.stb-side.f2 { transform: rotateX(90deg) translateZ(calc(var(--c) / 2)); }
.stb-side.f5 { transform: rotateX(-90deg) translateZ(calc(var(--c) / 2)); }
.stb-side i { width: 74%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5a3a1c, #1d0d02 70%); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .8); }
.stb-side.f1 i { width: 92%; background: radial-gradient(circle at 40% 35%, #ff8a6a, #b0240c 70%); }
.stb-die.blank .stb-cube { opacity: 0; }
.stb-die.blank .stb-face { border-radius: 22%; box-shadow: inset 0 0 0 2px rgba(255, 194, 74, .25); }
.stb-die.blank .stb-face::before { opacity: 0; }
.stb-die.off { display: none; }
.stb-die.stale { opacity: .5; }
.stb-die.rolling .stb-face { animation: stb-toss .76s ease-out both; animation-delay: calc(var(--k, 0) * 40ms); }
@keyframes stb-toss {
  0% { transform: translate(-30px, 0) rotate(-20deg); }
  35% { transform: translate(-8px, -18px) rotate(8deg); }
  65% { transform: translate(2px, 1px); }
  82% { transform: translate(0, -4px); }
  100% { transform: none; }
}

/* ----- buttons, note, hints ----- */
.stb-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.stb-roll { min-width: 150px; }
.stb-shut {
  min-width: 170px; color: #2a1400; background: linear-gradient(135deg, #ffd66b, #ff9a1f);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 6px 22px rgba(255, 170, 40, .4);
}
.stb-shut:disabled { opacity: .55; color: #3a2200; background: linear-gradient(135deg, #8a7240, #7a5420); box-shadow: none; }
.stb-hintbtn[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--stb-glow); }
.stb-note { margin: 0; min-height: 1.4em; text-align: center; color: var(--muted); font-weight: 600; font-size: .92rem; }
.stb-hints { text-align: center; padding: 10px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(255, 194, 74, .4); }
.stb-hints[hidden] { display: none; }
.stb-hints p { margin: 0 0 8px; font-weight: 700; font-size: .9rem; }
.stb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.stb-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 .95rem var(--font-body); color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
.stb-chip:hover, .stb-chip.on { box-shadow: inset 0 0 0 2px var(--stb-glow); }
.stb-chip em { font-style: normal; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 999px; background: var(--stb-glow); color: #2a1400; }
.stb-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ----- score panel ----- */
.stb-panel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stb-stats { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-weight: 700; font-size: .9rem; }
.stb-keys { margin: 0; color: var(--muted); font-size: .8rem; text-align: center; }
.stb-table {
  width: 100%; max-width: 440px; border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; background: var(--bg);
  box-shadow: 0 0 0 1px rgba(255, 194, 74, .5); font-variant-numeric: tabular-nums; text-align: center;
}
.stb-table th, .stb-table td { padding: 5px 4px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.stb-table tbody tr:last-child th, .stb-table tbody tr:last-child td { border-bottom: 0; }
.stb-table thead th { background: var(--surface-2); color: var(--muted); font-size: .78rem; text-transform: uppercase; }
.stb-table thead th.cur { color: #2a1400; background: var(--stb-glow); }
.stb-table tbody th { text-align: left; padding-left: 10px; white-space: nowrap; }
.stb-table tbody th .dot { width: 10px; height: 10px; margin-right: 6px; vertical-align: 0; }
.stb-table td { font-weight: 700; }
.stb-table td.zero { color: var(--stb-glow); }
.stb-table td.tot { font-weight: 800; color: #fff; background: rgba(255, 194, 74, .08); }

@media (max-width: 560px) {
  .stb-tiles.twelve { grid-template-columns: repeat(6, 1fr); row-gap: 14px; }
  .stb-tiles.twelve .stb-tile { font-size: clamp(15px, calc(100cqw / 6 * .45), 30px); aspect-ratio: .74; }
  .stb-box { padding: 8px; }
  .stb-tiles { padding: 8px 6px 12px; gap: 12px 3px; }
  .stb-roll, .stb-shut { min-width: 0; flex: 1 1 140px; }
}