.embedded header,.embedded .intro,.embedded footer,.embedded .skip{display:none}
.embedded main{max-width:1140px;margin:0 auto;padding:14px}
.embedded .layout{margin:0}
.embedded body{background:#0b101a}
.embedded #storage-note:empty{display:none}
@media(max-width:650px){.embedded main{padding:4px}}

.stats .audio-controls {
  display: flex;
  gap: 6px;
  margin-inline-start: auto;
}
.stats .audio-controls button {
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .stats { flex-wrap: wrap; column-gap: 14px; row-gap: 8px; }
  .stats .audio-controls button { padding-inline: 8px; }
}

/* One oak floor, with a dark recess and a separately hinged board in each cell. */
.arena, .finale {
  --oak: url("assets/vault/aged-oak.webp");
  background-color: #514d44;
  background-image:
    radial-gradient(ellipse at 53% 45%, transparent 22%, #11171c61 100%),
    linear-gradient(180deg, #18213035, #4441390a 50%, #1c252b25),
    var(--oak);
  background-size: cover;
  background-position: center;
}
.scene-caption {
  background: linear-gradient(#14191bd4, #14191b94 75%, transparent);
  color: #f4eddb;
  text-shadow: 0 1px 3px #101113;
}
.scene-caption span { color: #e0dccf; }
.board::before { background: none; }

.hole, .final-target {
  --lid-angle: 132deg;
  --grain: 16% 36%;
  --rise-time: 560ms;
  isolation: isolate;
}
.hole:nth-child(3n + 2) { --lid-angle: 142deg; --grain: 61% 72%; --rise-time: 510ms; }
.hole:nth-child(3n) { --lid-angle: 136deg; --grain: 90% 16%; --rise-time: 610ms; }
.hole:nth-child(4n) { --grain: 28% 89%; }
.hole:nth-child(5n) { --grain: 75% 54%; }
.hatch-mount {
  position: absolute;
  top: 70%;
  height: 41%;
  inset-inline: 4%;
  perspective: 470px;
  pointer-events: none;
  z-index: 1;
}
.hatch-well, .hatch-lid {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  transform-origin: center top;
  transform: rotateX(59deg);
}
.hatch-well {
  background: linear-gradient(176deg, #0c0e0c 28%, #171916 80%, #36352d);
  border: 2px solid #282824;
  box-shadow: inset 0 8px 10px #070908eb, 0 2px 1px #b1a18985;
}
.hatch-lid {
  transform-style: preserve-3d;
  transition: transform 185ms cubic-bezier(.47,.03,.8,.33) 125ms;
}
.hatch-lid::before, .hatch-lid::after {
  content: "";
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: inherit;
  border: 1px solid #403c32;
  background-color: #786d58;
  background-image:
    radial-gradient(circle at 6% 20%, #2d2e2b 0 1.6px, #a89e88 2px, transparent 2.7px),
    radial-gradient(circle at 94% 20%, #292a27 0 1.6px, #a79e89 2px, transparent 2.7px),
    linear-gradient(180deg, #d0b68c16, transparent 28%, #372f2428),
    var(--oak);
  background-size: auto, auto, auto, 540px 360px;
  background-position: center, center, center, var(--grain);
  box-shadow: inset 0 2px 1px #c5b79b9c, inset 0 -2px 1px #4a4235,
              0 3px 0 #3e372e, 0 5px 2px #1e201d94;
}
.hatch-lid::after {
  transform: rotateX(180deg);
  background-image:
    linear-gradient(90deg, transparent 0 15%, #1b1b18ab 15% 16%, #544936 16% 22%, #9b896659 22% 23%, transparent 23% 78%, #1b1b18ab 78% 79%, #544936 79% 85%, #9b896659 85% 86%, transparent 86%),
    linear-gradient(0deg, #1c1b19a8, #3b342e33),
    var(--oak);
  background-size: auto, auto, 540px 360px;
  background-position: center, center, var(--grain);
  border-color: #3f382a;
  box-shadow: inset 0 2px 1px #a99a7a8c, 0 2px 0 #2f2b22;
}
.up:not(.struck) .hatch-lid {
  transform: rotateX(var(--lid-angle));
  transition: transform 235ms cubic-bezier(.18,.78,.25,1.08);
}
.hole .goblin-clip, .final-target .goblin-clip {
  inset: 0 5% 11%;
  border-radius: 0 0 3% 3%;
}
.hole .puppet, .final-target .puppet {
  transform: translateY(106%);
  transition: transform 170ms ease-in;
}
.up .puppet {
  transform: translateY(0);
  animation: lift-through-boards var(--rise-time) both;
}
@keyframes lift-through-boards {
  0%, 18% { transform: translateY(106%); }
  43%, 55% { transform: translateY(72%); }
  88% { transform: translateY(-2%); }
  100% { transform: translateY(0); }
}
.hole.hit .puppet, .final-target.struck .puppet {
  animation: duck-under-boards 310ms ease-in both;
}
@keyframes duck-under-boards {
  0% { transform: translateY(0); }
  27% { transform: translateY(10%) scale(1.06,.91); }
  100% { transform: translateY(106%); }
}
.hatch-dust {
  position: absolute;
  top: 73%;
  height: 25%;
  inset-inline: 2%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 11% 17% at 11% 69%, #d3c0a878, transparent),
    radial-gradient(ellipse 12% 22% at 83% 68%, #d8c3a785, transparent),
    radial-gradient(circle at 10% 39%, #cdb498 0 1.5px, transparent 2px),
    radial-gradient(circle at 23% 24%, #dfcfb8 0 1px, transparent 1.7px),
    radial-gradient(circle at 70% 46%, #d0ba94 0 1.4px, transparent 2px),
    radial-gradient(circle at 87% 17%, #ddc7a6 0 1.6px, transparent 2.1px);
}
.hit .hatch-dust, .struck .hatch-dust { animation: board-dust 260ms ease-out 140ms both; }
@keyframes board-dust {
  0% { opacity: 0; transform: translateY(6px) scale(.72); }
  23% { opacity: .96; }
  100% { opacity: 0; transform: translateY(-13px) scale(1.14); }
}
.hole b {
  right: 6%;
  bottom: 2%;
  padding: 2px 4px;
  background: #292923;
  color: #ecdebd;
  border: 1px solid #9d927a;
  border-radius: 2px;
  font-size: 10px;
}

.arena .finale {
  background-image: linear-gradient(#10171ce8, #151a20a8 64%, #131616de), var(--oak);
}
.finale .final-target {
  --rise-time: 660ms;
  --lid-angle: 139deg;
  flex-shrink: 1;
  max-height: 53%;
}
.final-target:disabled { opacity: 1; }
.final-target .goblin-clip { inset-inline: 8%; }
.final-target .puppet > .goblin { width: auto; height: 100%; max-width: 100%; }
.final-target .hatch-mount { inset-inline: 2%; }
.finale.prize .hatch-well {
  border-bottom-color: #ffd578;
  box-shadow: inset 0 -4px 9px #d99a2a9c, 0 2px 2px #fff4c9, 0 4px 12px #ffb52aa8;
}
.finale.prize .hatch-lid::before {
  border-bottom-color: #ffe1a5;
  box-shadow: inset 0 2px 1px #c5b79b9c, 0 2px 1px #fff0bb, 0 4px 8px #ffb634;
}
body[data-phase="revealing"] .arena { filter: none; }
.reduce-motion .up .puppet { transform: translateY(0); }
.reduce-motion .hatch-dust { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hatch-lid, .hole .puppet, .final-target .puppet { transition: none; animation: none !important; }
  .up .puppet { transform: translateY(0); }
  .hatch-dust { display: none; }
}

.game-bottom { flex-wrap: wrap; }
.game-bottom #hint { flex: 1 1 150px; }
@media (max-width: 520px) {
  .game-bottom #hint { flex-basis: 100%; margin: 0; }
}
aside > #motion { margin-top: 12px; }