/*
 * The board. Two SVG layers and a grain overlay, with the HUD and the tool
 * tray in HTML on top.
 *
 * A note on transforms: everything that moves in the SVG is positioned with
 * its `transform` attribute, and a CSS `transform` on the same element would
 * override it. So the animations below change opacity, fill and stroke on
 * moving things, and only use CSS transforms on the lounge props — which are
 * positioned by an outer group and wrecked through an inner one.
 */

.board {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  touch-action: none;
}

.board.is-armed {
  cursor: crosshair;
}

.layer {
  position: absolute;
  inset: 0;
  width: 390px;
  height: 844px;
  pointer-events: none;
}

/*
 * Paper grain, as a static image. A live SVG filter on a layer that repaints
 * every frame would cost frames on a phone; an image is decoded once.
 */
.grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .14 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: .22;
}

/* --------------------------------------------------------------- hud --- */

.hud {
  position: absolute;
  top: 54px;
  left: 12px;
  right: 12px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud-pause {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 22px;
  background: var(--charcoal);
  color: var(--paper);
}

.hud-block {
  flex: 1;
  min-width: 0;
  height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 2px;
  color: var(--cream);
}

.hud-bed { background: var(--teal-dark); }
.hud-mayhem { background: var(--tomato-dark); }

.hud-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  line-height: 1;
}

.hud-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.hud-n {
  font-family: var(--serif);
  font-size: 19px;
}

.hud-pips {
  display: flex;
  gap: 2px;
}

.hud-pips span {
  flex: 1;
  height: 4px;
  background: var(--cream);
  opacity: .3;
  transition: opacity .25s;
}

.hud-pips span.is-full {
  opacity: 1;
}

/* -------------------------------------------------------------- tray --- */

.tray {
  position: absolute;
  top: 762px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.tool {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px 0 14px;
  border: none;
  border-radius: 24px;
  color: var(--cream);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  transition: transform .12s, box-shadow .12s;
}

.tool-treat { background: var(--teal-dark); }
.tool-squeak { background: var(--plum); }

.tool:disabled {
  opacity: .38;
}

.tool.is-armed {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--teal-dark);
  transform: translateY(-3px);
}

.tool-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--charcoal);
  box-shadow: inset 0 0 0 1.5px var(--charcoal);
  font-size: 11px;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
}

/* ------------------------------------------------------------ asides --- */

.aside {
  position: absolute;
  top: 322px;
  left: 50%;
  max-width: 300px;
  margin: 0;
  padding: 8px 12px;
  transform: translate(-50%, -6px);
  border-radius: 2px;
  background: var(--charcoal);
  color: var(--cream);
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}

.aside.is-showing {
  opacity: 1;
  transform: translate(-50%, 0);
}

.armed-tip {
  position: absolute;
  top: 718px;
  left: 50%;
  margin: 0;
  padding: 6px 12px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--charcoal);
  color: var(--cream);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.board.is-armed .armed-tip {
  opacity: 1;
}

/* ------------------------------------------------------------ actors --- */

.cat {
  transition: opacity .4s;
}

.cat.is-to-bed,
.cat.is-to-hole {
  opacity: 0;
}

.door .door-light {
  transition: fill .6s;
}

.door.is-glowing .door-light {
  animation: door-glow .9s ease-out;
}

@keyframes door-glow {
  0% { fill: #FFF8E2; }
  100% { fill: #F3D59A; }
}

.board.is-won .door .door-light {
  fill: #FFF3C8;
}

.fx-burst {
  animation: fade-out .5s ease-out forwards;
}

.fx-ring {
  animation: ring-out .7s ease-out forwards;
}

@keyframes fade-out {
  0% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes ring-out {
  0% { opacity: .9; stroke-width: 3; }
  100% { opacity: 0; stroke-width: 14; }
}

/* ---------------------------------------------- the lounge, wrecked --- */

.lounge-cat {
  animation: tumble-in .5s cubic-bezier(.3, 1.5, .5, 1) both;
}

@keyframes tumble-in {
  0% { opacity: 0; transform: translateY(-40px); }
  100% { opacity: 1; transform: translateY(0); }
}

#scene .clock-face,
#scene .lamp-body,
#scene #prop-frame,
#scene #prop-plant > *,
#scene #prop-rug,
#scene #prop-papers {
  transform-box: fill-box;
  transition: transform .7s cubic-bezier(.3, 1.6, .5, 1), opacity .5s;
}

#scene .clock-face { transform-origin: 50% 50%; }
#scene .lamp-body,
#scene #prop-plant > * { transform-origin: 50% 100%; }
#scene #prop-frame { transform-origin: 50% 0; }
#scene #prop-rug { transform-origin: 50% 50%; }
#scene #prop-papers { opacity: 0; }

/* 1: the clock comes off the wall. */
#scene:is([data-stage="1"], [data-stage="2"], [data-stage="3"], [data-stage="4"], [data-stage="5"], [data-stage="6"]) .clock-face {
  transform: translate(10px, 42px) rotate(28deg);
}

/* 2: the lamp goes over. */
#scene:is([data-stage="2"], [data-stage="3"], [data-stage="4"], [data-stage="5"], [data-stage="6"]) .lamp-body {
  transform: rotate(-70deg);
}

/* 3: the picture hangs by one nail. */
#scene:is([data-stage="3"], [data-stage="4"], [data-stage="5"], [data-stage="6"]) #prop-frame {
  transform: rotate(16deg);
}

/* 4: the plant is on its side. */
#scene:is([data-stage="4"], [data-stage="5"], [data-stage="6"]) #prop-plant > * {
  transform: rotate(84deg);
}

/* 5: paper everywhere; the rug is rucked up. */
#scene:is([data-stage="5"], [data-stage="6"]) #prop-papers {
  opacity: 1;
}

#scene:is([data-stage="5"], [data-stage="6"]) #prop-rug {
  transform: rotate(-7deg) scaleX(.94);
}

/* The limit: the whole lounge shudders. */
.board.is-lost #scene #lounge,
.board.is-lost .lounge-cats {
  animation: shudder .18s linear 6;
}

@keyframes shudder {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  75% { transform: translate(2px, -1px); }
}