/* One cut-paper illustration, using the existing stock and printed ink.
   The Royale layout owns its footprint; the engine owns all ten fuse steps. */
.royale-stage .royale-bomb {
  --bomb-cut: polygon(33% 1%, 43% 0, 57% 3%, 68% 2%, 79% 9%, 87% 19%, 91% 21%, 97% 37%, 96% 45%, 100% 55%, 96% 70%, 91% 75%, 85% 88%, 70% 95%, 58% 94%, 47% 100%, 30% 95%, 21% 91%, 12% 78%, 8% 76%, 1% 57%, 3% 43%, 0 35%, 9% 20%, 20% 10%, 23% 5%);
  transform-origin: 51% 72%;
}

.royale-stage .bomb-case {
  position: absolute;
  inset: 32% 9% 4% 10%;
  z-index: 2;
  background: var(--paper) var(--stock) 37px 92px / 360px;
  clip-path: var(--bomb-cut);
}
.royale-stage .bomb-case::before {
  content: "";
  position: absolute;
  inset: 3% 5% 5% 3%;
  background: var(--dark) var(--xerox) 18px 53px / 470px;
  clip-path: var(--bomb-cut);
}
.royale-stage .bomb-glint {
  position: absolute;
  z-index: 1;
  top: 13%;
  left: 12%;
  width: 32%;
  height: 43%;
  background: var(--accent) var(--stock) 130px 5px / 380px;
  background-blend-mode: multiply;
  clip-path: polygon(40% 4%, 77% 0, 100% 8%, 80% 20%, 62% 28%, 47% 46%, 43% 66%, 31% 69%, 28% 100%, 11% 92%, 0 72%, 4% 50%, 19% 23%);
}
.royale-stage .bomb-neck {
  position: absolute;
  z-index: 3;
  top: 27%;
  left: 40%;
  width: 25%;
  height: 14%;
  rotate: -7deg;
  background: var(--dark) var(--xerox) 130px 130px / 480px;
  clip-path: polygon(7% 6%, 80% 0, 99% 17%, 91% 52%, 100% 93%, 8% 100%, 0 68%, 5% 41%);
}
.royale-stage .bomb-neck::before {
  content: "";
  position: absolute;
  inset: 16% 11% 31% 13%;
  background: var(--paper) var(--stock) 20px 145px / 240px;
  clip-path: polygon(0 9%, 45% 0, 97% 8%, 100% 84%, 59% 100%, 3% 90%);
}
.royale-stage .bomb-neck::after {
  content: "";
  position: absolute;
  left: 30%;
  top: 14%;
  width: 10%;
  height: 57%;
  background: var(--dark) var(--xerox) 30px 10px / 400px;
  clip-path: polygon(50% 0, 100% 0, 46% 100%, 0 91%);
}

.royale-stage .bomb-wick { position: absolute; z-index: 1; inset: 0; }
.royale-stage .bomb-wick svg { display: block; width: 100%; height: 100%; overflow: visible; }
.royale-stage .bomb-wick path {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: .7;
  stroke-linejoin: bevel;
  paint-order: stroke fill;
}
.royale-stage .bomb-spark {
  --spark-cut: polygon(47% 0, 59% 26%, 86% 7%, 77% 37%, 100% 44%, 73% 59%, 95% 87%, 63% 77%, 53% 100%, 36% 74%, 8% 93%, 20% 61%, 0 42%, 32% 34%);
  position: absolute;
  z-index: 4;
  width: 21%;
  height: 21%;
  left: var(--spark-x);
  top: var(--spark-y);
  translate: -50% -50%;
  background: var(--ink) var(--xerox) 30px 0 / 200px;
  clip-path: var(--spark-cut);
}
.royale-stage .bomb-spark::before {
  content: "";
  position: absolute;
  inset: 12% 10% 13% 14%;
  background: var(--time) var(--stock) 10px 0 / 160px;
  background-blend-mode: multiply;
  clip-path: var(--spark-cut);
}

.royale-stage[data-phase="running"] .bomb-spark { animation: spark-cut 1s steps(1, end) infinite; }
.royale-stage[data-phase="running"][data-danger="warm"] .royale-bomb { animation: bomb-cut .9s steps(1, end) infinite; }
.royale-stage[data-phase="running"][data-danger="hot"] .royale-bomb { --shake: 4px; animation: bomb-cut .55s steps(1, end) infinite; }
.royale-stage[data-phase="running"][data-danger="critical"] .royale-bomb { --shake: 6px; animation: bomb-cut .38s steps(1, end) infinite; }
.royale-stage:is([data-danger="hot"], [data-danger="critical"]) .bomb-case::before {
  background-color: #702d38;
  background-blend-mode: screen;
}
@keyframes spark-cut { 0%, 100% { rotate: -8deg; } 50% { rotate: 24deg; } }
@keyframes bomb-cut {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  33% { transform: translate(calc(-1 * var(--shake, 2px)), -2px) rotate(-4deg); }
  66% { transform: translate(var(--shake, 2px), 1px) rotate(1deg); }
}

.royale-stage .bomb-burst {
  --burst-cut: polygon(43% 0, 57% 23%, 86% 3%, 78% 32%, 100% 43%, 76% 57%, 94% 90%, 63% 78%, 50% 100%, 36% 78%, 3% 96%, 21% 63%, 0 47%, 23% 36%, 6% 10%, 35% 24%);
  display: none;
  position: absolute;
  z-index: 5;
  inset: 0;
  background: var(--ink) var(--xerox) 0 0 / 370px;
  clip-path: var(--burst-cut);
}
.royale-stage .bomb-burst::before {
  content: "";
  position: absolute;
  inset: 8% 6% 7% 9%;
  background: var(--time) var(--stock) 0 0 / 370px;
  background-blend-mode: multiply;
  clip-path: var(--burst-cut);
}
.royale-stage[data-phase="exploding"] .bomb-burst { display: block; animation: bomb-burst-cut .4s steps(1, end) 1; }
.royale-stage[data-phase="exploding"] :is(.bomb-case, .bomb-neck, .bomb-wick, .bomb-spark),
.royale-stage:is([data-phase="roundEnd"], [data-phase="matchEnd"]) .royale-bomb { visibility: hidden; }
@keyframes bomb-burst-cut { 0%, 50% { rotate: -5deg; } 25%, 75% { rotate: 3deg; } 100% { rotate: 0deg; } }

@media (prefers-reduced-motion: reduce) {
  .royale-stage :is(.royale-bomb, .bomb-spark, .bomb-burst) { animation: none !important; }
}
@media (forced-colors: active) {
  .royale-stage .bomb-case, .royale-stage .bomb-neck::before, .royale-stage .bomb-glint { background: Canvas; }
  .royale-stage .bomb-case::before,
  .royale-stage:is([data-danger="hot"], [data-danger="critical"]) .bomb-case::before,
  .royale-stage .bomb-neck, .royale-stage .bomb-neck::after,
  .royale-stage .bomb-spark, .royale-stage .bomb-burst { background: CanvasText; }
  .royale-stage .bomb-spark::before, .royale-stage .bomb-burst::before { background: Highlight; }
  .royale-stage .bomb-wick path { fill: Canvas; stroke: CanvasText; }
}