/* Prebaked materials. Decoration is cropped only by the viewport, never the mat.
   Export contract and sources: assets/scene/README.md. */
:root {
  --scene-wood-image: url("../assets/scene/wood.webp");
  --scene-plate-image: url("../assets/scene/plate-edge.webp");
  --scene-cloth-image: url("../assets/scene/checked-cloth.webp");
  --scene-bread-image: url("../assets/scene/bread-edge.webp");
  --scene-glass-image: url("../assets/scene/glass-base.webp");
  --scene-felt-image: url("../assets/scene/felt.webp");
  --scene-felt-print-image: url("../assets/scene/felt-print.webp");
  --scene-wood-size: cover;
  --scene-felt-size: 256px;
  --scene-print-width: clamp(86px, 10vw, 132px);
  /* Fixed physical scale: plate ~3.7 widths of a 106px hand card.
     Only 85px of its 400px canvas enter the viewport. */
  --scene-plate-size: 400px;
}
body {
  background-color: var(--pop-wood);
  background-image: var(--scene-plate-image), var(--scene-cloth-image),
    var(--scene-bread-image), var(--scene-glass-image), var(--scene-wood-image),
    repeating-linear-gradient(0deg, transparent 0 148px, #9b6b3420 148px 150px, transparent 150px 300px);
  background-position: right -315px bottom -110px, left -300px bottom -40px,
    left -150px top -90px, right -80px top -70px, left top, left top;
  background-size: var(--scene-plate-size) auto, 460px auto, 260px auto, 180px auto, var(--scene-wood-size), auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed, fixed, fixed, scroll;
  background-blend-mode: normal, normal, normal, soft-light, normal, normal;
}
.table-game .table-scene {
  background-color: var(--pop-felt);
  background-image: var(--scene-felt-print-image), var(--scene-felt-image);
  background-position: right 18px bottom 16px, left top;
  background-size: var(--scene-print-width) auto, var(--scene-felt-size) auto;
  background-repeat: no-repeat, repeat;
  background-blend-mode: soft-light, normal;
}
/* The widest visible decoration occupies 160px at the screen edge. With the
   1500px game shell, 1840px leaves >=170px of exterior wood on each side.
   Hide props below that budget instead of sliding them underneath the mat. */
@media (max-width: 1839px), (max-height: 649px) {
  body {
    --scene-plate-image: none;
    --scene-cloth-image: none;
    --scene-bread-image: none;
    --scene-glass-image: none;
  }
}