/* Game boxes in 3D (covers.js boxHTML): a square lid face, a spine on the right, the lid top.
   Size with --s (front edge) and --d (depth). The stage gives the perspective. */
.box-stage { --s: 120px; perspective: 900px; perspective-origin: 30% 20%; }
.box3d {
  --d: calc(var(--s) * .24);
  position: relative; width: var(--s); height: var(--s);
  transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(-28deg);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.box3d > div { position: absolute; backface-visibility: hidden; }
.box3d .bx-front { inset: 0; transform: translateZ(calc(var(--d) / 2)); border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.box3d .bx-front svg { display: block; width: 100%; height: 100%; }
/* the spine: lacquered colour, gilt rules, the name running down it */
.box3d .bx-side {
  top: 0; left: calc(var(--s) / 2 - var(--d) / 2); width: var(--d); height: var(--s);
  transform: rotateY(90deg) translateZ(calc(var(--s) / 2));
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .2) 40%, rgba(0, 0, 0, .5)),
    linear-gradient(180deg, var(--b2), var(--b3));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
}
.box3d .bx-side::before, .box3d .bx-side::after { content: ''; position: absolute; left: 12%; right: 12%; height: 1px; background: #c9a35a; opacity: .8; }
.box3d .bx-side::before { top: 7%; } .box3d .bx-side::after { bottom: 7%; }
.box3d .bx-side span {
  writing-mode: vertical-rl; font-family: 'DM Serif Display', Georgia, serif; font-size: calc(var(--d) * .5); line-height: 1; white-space: nowrap;
  max-height: 80%; overflow: hidden; text-overflow: clip;
  background: linear-gradient(90deg, #f6e2b0, #c99a48 60%, #f0d898); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* the lid top: catches the light */
.box3d .bx-top {
  left: 0; top: calc(var(--s) / 2 - var(--d) / 2); width: var(--s); height: var(--d);
  transform: rotateX(90deg) translateZ(calc(var(--s) / 2));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05)),
    linear-gradient(90deg, var(--b2), var(--b1) 60%, var(--b2));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 -2px 0 rgba(201, 163, 90, .6);
}
/* a soft shadow on the table under the box */
.box3d::after {
  content: ''; position: absolute; left: 4%; right: -14%; bottom: calc(var(--s) * -.07); height: calc(var(--s) * .14);
  transform: translateZ(calc(var(--d) * -.6)) rotateX(90deg); transform-origin: bottom;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), transparent 70%);
}

/* Vibrant style's box: a solid printed colour, white rules, the name in chunky white letters */
.box3d.vivid .bx-side { background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .12) 40%, rgba(0, 0, 0, .32)), var(--b2); }
.box3d.vivid .bx-side::before, .box3d.vivid .bx-side::after { background: #fff; opacity: .55; }
.box3d.vivid .bx-side span {
  font-family: 'Lilita One', 'Nunito', sans-serif; background: none; color: #fff;
  text-shadow: 0 0 1px #1b1352, 1px 1px 0 #1b1352, -1px -1px 0 #1b1352, 1px -1px 0 #1b1352, -1px 1px 0 #1b1352;
}
.box3d.vivid .bx-top { background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .08)), var(--b2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 -2px 0 rgba(255, 255, 255, .5); }