.royal-run-world {
  position: absolute;
  left: 0;
  bottom: 0;
  width: max(1180px, 100vw);
  height: 100%;
  transform: translateX(0);
  transition: transform 0.08s linear;
}
.royal-run-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 90px 64px,
      rgba(255, 255, 255, 0.95) 0 22px,
      transparent 23px
    ),
    radial-gradient(
      circle at 136px 72px,
      rgba(255, 255, 255, 0.85) 0 30px,
      transparent 31px
    ),
    radial-gradient(
      circle at 570px 54px,
      rgba(255, 245, 176, 0.92) 0 32px,
      transparent 33px
    ),
    radial-gradient(
      circle at 850px 90px,
      rgba(255, 255, 255, 0.88) 0 26px,
      transparent 27px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 50%);
}
.mini-world-depth {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.12) 58%,
      rgba(67, 126, 76, 0.16)
    ),
    radial-gradient(
      ellipse at 50% 78%,
      rgba(255, 255, 255, 0.34),
      transparent 38%
    );
  pointer-events: none;
}
.mini-world-depth.snow {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.18) 58%,
      rgba(120, 200, 240, 0.18)
    ),
    radial-gradient(
      ellipse at 50% 80%,
      rgba(255, 255, 255, 0.38),
      transparent 36%
    );
}
.royal-route-prop {
  right: 26px;
  bottom: 82px;
  z-index: 2;
  opacity: 0.9;
  transform: scale(0.82);
}
.royal-route-prop.theme-strawberry,
.royal-route-prop.theme-default {
  width: 204px;
  height: 198px;
  background-image: url("../../data/mini_game_art/prop_ruby_gate.png");
}
.royal-route-prop.theme-grape,
.royal-route-prop.theme-rainbow,
.royal-route-prop.theme-blueberry {
  width: 194px;
  height: 146px;
  background-image: url("../../data/mini_game_art/prop_kind_crown.png");
}
.royal-route-prop.theme-bubblegum {
  width: 172px;
  height: 236px;
  background-image: url("../../data/mini_game_art/prop_wish_crystal.png");
  transform: scale(0.58);
  right: 48px;
  bottom: 54px;
}
.royal-run-bg::before,
.royal-run-bg::after {
  content: "";
  position: absolute;
  bottom: 72px;
  width: 170px;
  height: 145px;
  border-radius: 90px 90px 12px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 40%), #ff9bce;
  box-shadow:
    28px -36px 0 -18px #ffd86b,
    58px -8px 0 -34px #7b4ad8,
    88px -44px 0 -22px #ff6fa8;
}
.royal-run-bg::before {
  left: 42px;
}
.royal-run-bg::after {
  left: 920px;
  transform: scale(0.9);
}
.royal-run-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background:
    radial-gradient(circle at 22px 10px, #fff1a6 0 8px, transparent 9px) 0 0 /
      76px 28px,
    linear-gradient(180deg, #64d970 0%, #38b85a 58%, #2f8848 100%);
  border-top: 5px solid #fff1a6;
}
.adventure-goal {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 7;
  max-width: calc(100vw - 96px);
  padding: 7px 12px;
  border: 2px solid rgba(107, 34, 71, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #6b2247;
  font:
    800 14px/1.1 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: 0 5px 12px rgba(107, 34, 71, 0.12);
  pointer-events: none;
}
.adventure-goal.snow {
  border-color: rgba(46, 122, 172, 0.26);
  color: #285c86;
}
.royal-run-platform {
  position: absolute;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff6df 0%, #ffd86b 48%, #ff9b6b 100%);
  border: 3px solid rgba(107, 34, 71, 0.22);
  box-shadow: 0 7px 0 rgba(107, 34, 71, 0.12);
}
.royal-run-princess {
  position: absolute;
  width: 58px;
  height: 82px;
  z-index: 5;
  background: url("../../data/princess4.png") 66.666% 0 / 400% 400% no-repeat;
  filter: drop-shadow(0 8px 7px rgba(107, 34, 71, 0.22));
}
.royal-run-princess::before {
  content: "";
  position: absolute;
  left: 21px;
  top: -10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #fff 0 20%,
    #ffd86b 24% 62%,
    transparent 66%
  );
  box-shadow:
    -13px 8px 0 -5px #fff1a6,
    16px 11px 0 -6px #fff1a6;
}
.royal-run-princess::after {
  content: "";
  position: absolute;
  left: 11px;
  bottom: -5px;
  width: 38px;
  height: 10px;
  border-radius: 50%;
  background: rgba(107, 34, 71, 0.22);
}
.royal-run-princess.run-left {
  transform: scaleX(-1);
}
.royal-run-princess.is-jumping {
  animation: royal-jump 0.28s ease-in-out infinite alternate;
}
.royal-run-gem {
  position: absolute;
  z-index: 4;
  width: 46px;
  height: 46px;
  margin-left: -15px;
  margin-bottom: -12px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 28%,
    #fff,
    #ffd86b 52%,
    #ff8ac0 100%
  );
  color: #fff;
  font-size: 24px;
  line-height: 46px;
  text-shadow: 0 2px 4px rgba(107, 34, 71, 0.28);
  box-shadow:
    0 0 20px rgba(255, 216, 107, 0.85),
    0 6px 0 rgba(107, 34, 71, 0.14);
  cursor: pointer;
  animation: royal-gem 1.4s ease-in-out infinite alternate;
}
.royal-run-gem.collected {
  opacity: 0;
  transform: scale(1.8) rotate(24deg);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.royal-run-gem::after {
  content: attr(data-count);
  position: absolute;
  right: -7px;
  top: -9px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(107, 34, 71, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #7a2a60;
  font:
    900 12px "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  text-shadow: none;
  box-shadow: 0 5px 9px rgba(107, 34, 71, 0.14);
}
.royal-run-word-charm {
  position: absolute;
  z-index: 5;
  min-width: 78px;
  max-width: 132px;
  min-height: 44px;
  padding: 0 10px;
  border: 3px solid rgba(107, 34, 71, 0.24);
  border-radius: 999px;
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255, 255, 255, 0.9),
      transparent 28%
    ),
    linear-gradient(180deg, #fffaf0, #ffd86b);
  color: #6b2247;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow:
    0 8px 0 rgba(107, 34, 71, 0.12),
    0 0 18px rgba(255, 216, 107, 0.62);
  cursor: pointer;
  animation: royal-word-charm 1.65s ease-in-out infinite alternate;
}
.royal-run-word-charm.next {
  border-color: rgba(255, 216, 107, 0.94);
  box-shadow:
    0 8px 0 rgba(107, 34, 71, 0.12),
    0 0 0 8px rgba(255, 255, 255, 0.34),
    0 0 24px rgba(255, 216, 107, 0.82);
}
.royal-run-word-charm::before {
  content: "✦";
  margin-right: 4px;
  color: #b03579;
}
.royal-run-word-charm.collected {
  opacity: 0;
  transform: translateY(-18px) scale(1.2);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.royal-run-proof {
  position: relative;
  z-index: 8;
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding: 9px 10px;
  border: 2px solid rgba(122, 78, 216, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #5a276f;
  box-shadow: 0 8px 18px rgba(107, 34, 71, 0.12);
}
.royal-run-proof b {
  font:
    900 12px/1 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  text-transform: uppercase;
}
.royal-run-proof em {
  font-style: normal;
  font-weight: 800;
  font-size: 13px;
}
.royal-run-proof-sequence {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.royal-run-proof-sequence span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 244, 170, 0.72);
  font-weight: 800;
  font-size: 12px;
}
.royal-run-proof-sequence .next {
  background: #fff1a6;
  box-shadow: inset 0 0 0 2px rgba(122, 78, 216, 0.22);
}
.royal-run-proof-sequence .done {
  background: rgba(124, 207, 153, 0.28);
  color: #2b7a55;
}
.royal-run-moment {
  position: absolute;
  z-index: 8;
  min-width: 62px;
  max-width: min(190px, 42vw);
  padding: 5px 10px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #6b2247;
  font:
    900 13px/1 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
  transform: translate(-50%, 0);
  animation: royal-run-moment 0.76s ease-out both;
  box-shadow: 0 8px 16px rgba(107, 34, 71, 0.16);
}
.royal-run-moment.good {
  color: #8a5a00;
}
.royal-run-moment.word {
  color: #7a2a60;
}
.royal-run-moment.spring {
  color: #256c52;
}
.royal-run-moment.bump {
  color: #8a264a;
}
@keyframes royal-run-moment {
  from {
    opacity: 0;
    translate: 0 -4px;
    scale: 0.88;
  }
  22% {
    opacity: 1;
    scale: 1.04;
  }
  to {
    opacity: 0;
    translate: 0 -30px;
    scale: 1;
  }
}
@keyframes royal-word-charm {
  from {
    transform: translateY(-4px);
  }
  to {
    transform: translateY(5px);
  }
}
.royal-run-enemy {
  position: absolute;
  z-index: 4;
  width: 42px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(180deg, #8a5cff 0%, #5b2fb2 100%);
  color: #fff1a6;
  font-size: 24px;
  border: 3px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 6px 0 rgba(107, 34, 71, 0.18);
}
.royal-run-spring {
  position: absolute;
  z-index: 4;
  width: 54px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 16px 16px 10px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), transparent 45%),
    repeating-linear-gradient(90deg, #ffd86b 0 8px, #ff8ac0 8px 16px);
  border: 3px solid rgba(107, 34, 71, 0.28);
  color: #6b2247;
  font-size: 20px;
  font-weight: 900;
  box-shadow:
    0 7px 0 rgba(107, 34, 71, 0.16),
    0 0 18px rgba(255, 216, 107, 0.62);
}
.royal-run-spring.boing {
  animation: spring-boing 0.26s ease;
}
@keyframes spring-boing {
  0%,
  100% {
    transform: scaleY(1);
  }
  45% {
    transform: translateY(6px) scaleY(0.62);
  }
  70% {
    transform: translateY(-7px) scaleY(1.2);
  }
}
.royal-run-crown {
  position: absolute;
  z-index: 3;
  width: 70px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 36px 36px 10px 10px;
  background: linear-gradient(180deg, #fff6df 0%, #ffb3d6 100%);
  border: 4px solid #ffd86b;
  color: #9b2d6a;
  font-size: 48px;
  box-shadow:
    0 0 28px rgba(255, 216, 107, 0.8),
    0 8px 0 rgba(107, 34, 71, 0.14);
  cursor: pointer;
}
.royal-run-crown.ready {
  animation: goal-ready 0.7s ease-in-out infinite alternate;
}
.royal-run-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.72)
  );
  pointer-events: none;
}
.royal-run-controls button {
  min-width: 76px;
  height: 44px;
  padding: 0 16px;
  border: 3px solid rgba(107, 34, 71, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #6b2247;
  font:
    800 18px "Georgia",
    serif;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  box-shadow: 0 4px 0 rgba(107, 34, 71, 0.16);
}
.royal-run-controls button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(107, 34, 71, 0.16);
}
@keyframes royal-gem {
  from {
    transform: translateY(-4px) rotate(-5deg);
  }
  to {
    transform: translateY(5px) rotate(6deg);
  }
}
@keyframes royal-jump {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.12);
  }
}
.mini-game-board.ruby-maze {
  display: block;
  min-height: clamp(410px, 58vh, 540px);
  padding: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 236, 245, 0.2),
      rgba(255, 209, 102, 0.18)
    ),
    url("../../data/mini_game_worlds/ruby_rescue_courtyard.png") center / cover
      no-repeat;
}
.ruby-maze-world {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
}
.ruby-maze-world::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 255, 255, 0.56) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 76% 22%,
      rgba(255, 216, 107, 0.46) 0 3px,
      transparent 4px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(107, 34, 71, 0.18));
  pointer-events: none;
}
.ruby-maze-grid {
  --cell: min(
    56px,
    calc((100vw - 34px) / var(--cols)),
    calc((100dvh - 168px) / var(--rows))
  );
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-template-rows: repeat(var(--rows), var(--cell));
  padding: 10px;
  border: 4px solid rgba(107, 34, 71, 0.26);
  border-radius: 22px;
  background: rgba(255, 247, 252, 0.82);
  box-shadow:
    0 18px 28px rgba(107, 34, 71, 0.18),
    inset 0 0 0 8px rgba(255, 255, 255, 0.38);
}
.ruby-maze-cell {
  position: relative;
  border-radius: 12px;
  background:
    radial-gradient(
      circle at 55% 35%,
      rgba(255, 255, 255, 0.56),
      transparent 38%
    ),
    rgba(255, 235, 244, 0.46);
}
.ruby-maze-cell.wall {
  background:
    radial-gradient(
      circle at 30% 24%,
      rgba(255, 255, 255, 0.42),
      transparent 32%
    ),
    linear-gradient(180deg, #ff8fb8, #c02457);
  border: 2px solid rgba(107, 34, 71, 0.24);
  box-shadow: inset 0 -5px 0 rgba(107, 34, 71, 0.14);
}
.ruby-maze-cell.gate {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.72), transparent 38%),
    linear-gradient(180deg, #ffd86b, #ff4d6d);
  border: 3px solid rgba(107, 34, 71, 0.34);
  box-shadow: 0 0 24px rgba(255, 77, 109, 0.58);
}
.ruby-maze-grid.gate-ready .ruby-maze-cell.gate {
  animation: ruby-gate-ready 0.8s ease-in-out infinite alternate;
}
.ruby-maze-player,
.ruby-maze-thief,
.ruby-maze-pickup,
.ruby-maze-word {
  z-index: 4;
  align-self: center;
  justify-self: center;
}
.ruby-maze-player {
  --maze-x: 1.5;
  --maze-y: 1.5;
  position: absolute;
  left: calc(var(--maze-x) * var(--cell, 52px));
  top: calc(var(--maze-y) * var(--cell, 52px));
  width: calc(var(--cell, 52px) * 0.58);
  height: calc(var(--cell, 52px) * 0.82);
  transform: translate(-50%, -50%);
  background: url("../../data/princess4.png") 66.666% 0 / 400% 400% no-repeat;
  filter: drop-shadow(0 8px 8px rgba(107, 34, 71, 0.22));
  transform-origin: 50% 82%;
  will-change: left, top, background-position, scale;
  pointer-events: none;
}
.ruby-maze-thief {
  --maze-x: 13.5;
  --maze-y: 1.5;
  position: absolute;
  left: calc(var(--maze-x) * var(--cell, 52px));
  top: calc(var(--maze-y) * var(--cell, 52px));
  z-index: 5;
  width: calc(var(--cell, 52px) * 0.68);
  height: calc(var(--cell, 52px) * 0.8);
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  background: url("../../data/thief_walk_3d_20260607.webp?v=ruby-thief-direction-1")
    0 0 / 400% 400% no-repeat;
  filter: drop-shadow(0 8px 8px rgba(57, 28, 74, 0.24)) saturate(1.05);
  pointer-events: none;
  will-change: left, top, background-position, scale;
}
.ruby-maze-thief.ready {
  cursor: pointer;
  pointer-events: auto;
}
.ruby-maze-thief.ready:focus-visible {
  outline: 4px solid #ffd86b;
  outline-offset: 4px;
}
.ruby-maze-thief::after {
  content: "";
  position: absolute;
  right: 6%;
  top: 10%;
  width: 30%;
  aspect-ratio: 1;
  background: url("../../data/mini_game_art/ruby_collectible_generated.png") center /
    contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 216, 107, 0.88));
}
.ruby-maze-thief.tagged {
  animation: ruby-thief-tagged 0.28s ease-in-out infinite alternate;
  filter: drop-shadow(0 10px 10px rgba(57, 28, 74, 0.22))
    drop-shadow(0 0 16px rgba(255, 216, 107, 0.82));
}
.ruby-maze-player.walking {
  animation: ruby-maze-step 0.21s ease-in-out infinite;
}
.ruby-maze-player.is-moving {
  filter: drop-shadow(0 10px 10px rgba(107, 34, 71, 0.24)) brightness(1.05);
}
.ruby-maze-player.blocked {
  animation: ruby-maze-blocked 0.18s ease;
}
.ruby-maze-pickup {
  width: calc(var(--cell, 52px) * 0.72);
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.74),
      transparent 58%
    ),
    url("../../data/mini_game_art/ruby_collectible_generated.png") center / 118% 118%
      no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 1;
  box-shadow:
    0 0 16px rgba(255, 77, 109, 0.78),
    0 6px 0 rgba(107, 34, 71, 0.16);
  cursor: pointer;
  animation: ruby-maze-gem 1.2s ease-in-out infinite alternate;
}
.ruby-maze-word {
  min-width: max(58px, calc(var(--cell, 52px) * 1.25));
  max-width: max(72px, calc(var(--cell, 52px) * 2));
  min-height: 44px;
  padding: 0 8px;
  border: 2px solid rgba(107, 34, 71, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #8f1d4f;
  font:
    900 clamp(11px, 2vw, 15px) "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: 0 7px 14px rgba(107, 34, 71, 0.14);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ruby-maze-word.next {
  border-color: rgba(255, 216, 107, 0.94);
  background: rgba(255, 250, 225, 0.96);
  box-shadow:
    0 7px 14px rgba(107, 34, 71, 0.14),
    0 0 0 6px rgba(255, 255, 255, 0.48),
    0 0 20px rgba(255, 216, 107, 0.72);
}
.ruby-maze-word.waiting {
  opacity: 0.58;
  filter: saturate(0.82);
}
.ruby-maze-pickup.collected,
.ruby-maze-word.collected {
  opacity: 0;
  scale: 1.45;
  transition:
    opacity 0.18s ease,
    scale 0.18s ease;
}
.ruby-maze-goal {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 5;
  max-width: min(360px, calc(100% - 28px));
  padding: 8px 13px;
  border: 2px solid rgba(107, 34, 71, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #7a2a60;
  font:
    900 13px "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: 0 8px 18px rgba(107, 34, 71, 0.14);
}
.ruby-maze-clue-board {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 6;
  width: min(310px, calc(100% - 28px));
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 3px solid rgba(107, 34, 71, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  color: #6b2247;
  font:
    900 12px "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: 0 12px 22px rgba(107, 34, 71, 0.14);
}
.ruby-maze-clue-board span,
.ruby-maze-clue-board button {
  min-height: 26px;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 4px;
  border: 2px solid rgba(176, 53, 121, 0.14);
  border-radius: 999px;
  background: rgba(255, 244, 249, 0.78);
  opacity: 0.7;
  color: inherit;
  font: inherit;
  text-align: left;
}
.ruby-maze-clue-board button {
  width: 100%;
  cursor: pointer;
  touch-action: manipulation;
}
.ruby-maze-clue-board button:focus-visible {
  outline: 4px solid rgba(255, 216, 107, 0.92);
  outline-offset: 3px;
}
.ruby-maze-clue-board b {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #b03579;
  font:
    900 12px "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: inset 0 0 0 2px rgba(255, 216, 107, 0.34);
}
.ruby-maze-clue-board span.current,
.ruby-maze-clue-board button.current {
  opacity: 1;
  border-color: rgba(255, 216, 107, 0.72);
  background: rgba(255, 250, 225, 0.94);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.42),
    0 0 18px rgba(255, 216, 107, 0.46);
}
.ruby-maze-clue-board span.done,
.ruby-maze-clue-board button.done {
  opacity: 1;
  border-color: rgba(123, 224, 200, 0.7);
  background: rgba(235, 255, 247, 0.94);
  color: #237c42;
}
.ruby-maze-clue-board span.done b,
.ruby-maze-clue-board button.done b {
  color: #237c42;
  font-size: 0;
}
.ruby-maze-clue-board span.done b::before,
.ruby-maze-clue-board button.done b::before {
  content: "✓";
  font-size: 14px;
}
.ruby-maze-action-clue {
  position: absolute;
  right: 18px;
  bottom: 70px;
  z-index: 8;
  min-height: 44px;
  padding: 9px 16px;
  border: 3px solid rgba(176, 53, 121, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #8a3a68;
  font:
    900 13px "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: 0 10px 20px rgba(107, 34, 71, 0.14);
}
.ruby-maze-action-clue.ready {
  border-color: rgba(255, 216, 107, 0.82);
  background: linear-gradient(180deg, #fff8d8, #ffd6ea);
  color: #6b2247;
  cursor: pointer;
}
.ruby-maze-action-clue:disabled {
  opacity: 0.72;
}
.ruby-maze-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(255, 238, 247, 0.78)
  );
}
.ruby-maze-controls button {
  min-width: 48px;
  height: 44px;
  border: 3px solid rgba(176, 53, 121, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #7a2a60;
  font:
    900 20px "Georgia",
    serif;
  box-shadow: 0 5px 0 rgba(107, 34, 71, 0.14);
  cursor: pointer;
}
@keyframes ruby-maze-gem {
  from {
    transform: translateY(-4px);
  }
  to {
    transform: translateY(5px);
  }
}
@keyframes ruby-maze-step {
  50% {
    scale: 1.04 0.98;
  }
}
@keyframes ruby-maze-blocked {
  35% {
    rotate: -5deg;
  }
  70% {
    rotate: 5deg;
  }
}
@keyframes ruby-thief-tagged {
  from {
    scale: 1;
    rotate: -3deg;
  }
  to {
    scale: 1.08;
    rotate: 3deg;
  }
}
@keyframes ruby-gate-ready {
  to {
    box-shadow:
      0 0 0 7px rgba(255, 216, 107, 0.32),
      0 0 30px rgba(255, 77, 109, 0.84);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ruby-maze-grid.gate-ready .ruby-maze-cell.gate,
  .ruby-maze-thief.tagged,
  .ruby-maze-player.walking,
  .ruby-maze-player.blocked,
  .ruby-maze-pickup {
    animation: none;
  }

  .ruby-maze-pickup.collected,
  .ruby-maze-word.collected {
    transition: none;
    scale: 1.08;
  }

  .ruby-maze-grid.gate-ready .ruby-maze-cell.gate {
    box-shadow:
      0 0 0 5px rgba(255, 216, 107, 0.26),
      0 0 24px rgba(255, 77, 109, 0.58);
  }
}
.mini-game-board.snow-run {
  position: relative;
  display: block;
  min-height: clamp(520px, 70vh, 680px);
  padding: 0;
  background: linear-gradient(180deg, #a8e8ff 0%, #e9fbff 50%, #ffffff 100%);
}
.snowboard-3d-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mini-game-board.snow-run.snowboard-3d-ready .snow-run-world {
  z-index: 1;
}
.mini-game-board.snow-run.snowboard-3d-ready .snow-run-sky,
.mini-game-board.snow-run.snowboard-3d-ready .snow-run-drift,
.mini-game-board.snow-run.snowboard-3d-ready .mini-world-depth.snow,
.mini-game-board.snow-run.snowboard-3d-ready .snow-run-flake {
  opacity: 0;
}
.mini-game-board.snow-run.snowboard-3d-ready .snow-run-princess {
  opacity: 0;
}
/* With the 3D scene live, the igloo architecture is real geometry inside the
   mountain (snowboard-3d-scene.js makeIgloo). The DOM element stays as the
   tap/keyboard goal target, restyled from a flat picture into a soft landing
   glow on the snow. */
.mini-game-board.snow-run.snowboard-3d-ready .snow-run-igloo {
  opacity: 0.82;
  background:
    radial-gradient(
      ellipse 62% 36% at 50% 76%,
      rgba(255, 214, 138, 0.5),
      rgba(139, 226, 255, 0.3) 52%,
      rgba(139, 226, 255, 0) 74%
    );
  transform: translateX(clamp(42px, 8vw, 112px)) scale(0.9);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 18px rgba(139, 226, 255, 0.62));
}
.mini-game-board.snow-run.snowboard-3d-ready .snow-run-igloo.ready {
  opacity: 1;
  background:
    radial-gradient(
      ellipse 66% 40% at 50% 76%,
      rgba(255, 224, 150, 0.68),
      rgba(139, 226, 255, 0.42) 52%,
      rgba(139, 226, 255, 0) 76%
    );
}
.mini-game-board.snow-run.snowboard-3d-ready .snow-run-sky,
.mini-game-board.snow-run.snowboard-3d-ready .snow-run-drift,
.mini-game-board.snow-run.snowboard-3d-ready .snow-run-flake,
.mini-game-board.snow-run.snowboard-3d-ready .snow-run-princess {
  transition: opacity 0.24s ease;
}
.mini-game-board.unicorn-trail {
  display: block;
  min-height: clamp(430px, 60vh, 560px);
  padding: 0;
  background: #dff9ff;
}

.mini-game-board.royal-map-adventure {
  display: block;
  min-height: clamp(430px, 62vh, 700px);
  padding: clamp(10px, 1.8vw, 18px);
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 216, 107, 0.22), transparent 34%),
    linear-gradient(180deg, #dff7ff 0%, #fff1f8 100%);
}
.mini-game-modal:has(.mini-game-board.royal-map-adventure) .mini-game-kicker,
.mini-game-modal:has(.mini-game-board.royal-map-adventure) .mini-game-title,
.mini-game-modal:has(.mini-game-board.royal-map-adventure) .mini-game-prompt,
.mini-game-modal:has(.mini-game-board.royal-map-adventure) .mini-game-brain,
.mini-game-modal:has(.mini-game-board.royal-map-adventure) .mini-game-coach,
.mini-game-modal:has(.mini-game-board.royal-map-adventure) .mini-guidance-toggle,
.mini-game-modal:has(.mini-game-board.royal-map-adventure) .mini-challenge-charm {
  display: none;
}
.mini-game-modal:has(.mini-game-board.royal-map-adventure) .mini-game-card {
  padding-top: 14px;
}
.mini-game-modal:has(.mini-game-board.royal-map-adventure) .mini-game-progress {
  position: fixed;
  top: 16px;
  right: 14px;
  z-index: 8;
}
.royal-map-shell {
  display: grid;
  gap: 10px;
  width: min(100%, 1120px);
  margin: 0 auto;
}
.royal-map-stage {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 3px solid rgba(107, 34, 71, 0.22);
  border-radius: 8px;
  background: #80d7f8;
  box-shadow:
    0 16px 28px rgba(107, 34, 71, 0.16),
    inset 0 0 0 2px rgba(255, 255, 255, 0.48);
  touch-action: none;
}
.royal-map-art,
.royal-map-route,
.royal-map-next-card,
.royal-map-compass {
  position: absolute;
}
.royal-map-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  transform-origin: 0 0;
  will-change: transform;
}
.royal-map-art {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.royal-map-route {
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.royal-map-route polyline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.86);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 30;
  filter: drop-shadow(0 2px 4px rgba(84, 36, 70, 0.28));
}
.royal-map-party,
.royal-map-hero,
.royal-map-follower,
.royal-map-waypoint,
.royal-map-adventure-portal,
.royal-map-creature,
.royal-map-encounter {
  position: absolute;
}
.royal-map-waypoint {
  z-index: 3;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 216, 107, 0.82) 0 34%, rgba(255, 216, 107, 0.12) 70%);
  box-shadow:
    0 0 0 7px rgba(255, 216, 107, 0.18),
    0 0 18px rgba(74, 24, 52, 0.24);
  animation: royal-map-waypoint-pulse 0.95s ease-in-out infinite alternate;
  pointer-events: none;
}
.royal-map-waypoint[hidden] {
  display: none;
}
.royal-map-party {
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.royal-map-hero,
.royal-map-follower {
  transform: translate(
    calc(-1 * var(--sprite-anchor-x, 25px)),
    calc(-1 * var(--sprite-anchor-y, 58px))
  );
  filter: drop-shadow(0 7px 6px rgba(74, 24, 52, 0.25));
  transition: filter 0.12s ease;
}
.royal-map-hero {
  z-index: 8;
}
.royal-map-follower {
  z-index: 7;
}
.royal-map-hero.walking,
.royal-map-follower.walking {
  filter:
    drop-shadow(0 9px 8px rgba(74, 24, 52, 0.28))
    drop-shadow(0 0 10px rgba(255, 216, 107, 0.42));
}
.royal-map-adventure-portal {
  z-index: 4;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -72%);
  border-radius: 50%;
  pointer-events: none;
}
.royal-map-adventure-portal::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 52px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 0 18px rgba(255, 216, 107, 0.42);
}
.royal-map-creature {
  left: 50%;
  top: 50%;
  transform: translate(
    calc(-1 * var(--sprite-anchor-x, 29px)),
    calc(-1 * var(--sprite-anchor-y, 54px))
  );
  filter: drop-shadow(0 7px 7px rgba(74, 24, 52, 0.26));
}
.royal-map-friendly-guardian {
  z-index: 3;
  pointer-events: none;
}
.royal-map-adventure-portal.nearby .royal-map-creature,
.royal-map-adventure-portal.ready .royal-map-creature {
  animation: royal-map-creature-ready 0.9s ease-in-out infinite alternate;
}
.royal-map-adventure-portal.complete {
  opacity: 0.72;
}
.royal-map-adventure-portal.locked {
  filter: grayscale(0.25);
}
.royal-map-next-card {
  z-index: 6;
  left: clamp(8px, 2vw, 18px);
  top: 72px;
  width: min(330px, calc(100% - 104px));
  padding: 10px 12px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: #4a1834;
  box-shadow: 0 8px 18px rgba(74, 24, 52, 0.18);
}
.royal-map-next-card b,
.royal-map-next-card span {
  display: block;
}
.royal-map-next-card b {
  font:
    900 13px "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  color: #b03579;
}
.royal-map-next-card span {
  margin-top: 3px;
  font: 700 13px/1.25 "Trebuchet MS", Arial, sans-serif;
}
.royal-map-compass {
  z-index: 6;
  right: clamp(8px, 2vw, 18px);
  top: 72px;
  width: clamp(42px, 5vw, 56px);
  height: clamp(42px, 5vw, 56px);
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px rgba(74, 24, 52, 0.18);
}
.royal-map-compass span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56%;
  height: 18%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ec407a 0 68%, #ffd86b 68%);
  transform: translate(-50%, -50%) rotate(var(--map-arrow-angle, 0rad));
  transform-origin: center;
}
.royal-map-compass span::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-left: 12px solid #ffd86b;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.royal-map-controls {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(120px, 160px);
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-inline: 12px;
}
.royal-map-move-pad {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(2, 48px);
  grid-template-areas:
    ". up ."
    "left down right";
  gap: 6px;
}
.royal-map-move-pad [data-map-move="left"] {
  grid-area: left;
}
.royal-map-move-pad [data-map-move="up"] {
  grid-area: up;
}
.royal-map-move-pad [data-map-move="down"] {
  grid-area: down;
}
.royal-map-move-pad [data-map-move="right"] {
  grid-area: right;
}
.royal-map-controls button {
  min-width: 48px;
  min-height: 48px;
  border: 2px solid rgba(176, 53, 121, 0.22);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #ffe5f1);
  color: #6b2247;
  font:
    900 18px "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: 0 6px 14px rgba(107, 34, 71, 0.14);
  cursor: pointer;
  touch-action: manipulation;
}
.royal-map-controls [data-map-explore] {
  min-width: 120px;
  min-height: 60px;
  background: linear-gradient(180deg, #fff9c4, #ffd86b);
}
.royal-map-controls button:disabled {
  opacity: 0.62;
}
.royal-map-near-adventure .royal-map-controls [data-map-explore] {
  border-color: rgba(35, 92, 81, 0.5);
  background: linear-gradient(180deg, #ffffff, #baf4df);
  box-shadow:
    0 0 0 4px rgba(186, 244, 223, 0.34),
    0 8px 18px rgba(35, 92, 81, 0.2);
}
.mini-game-modal:has(.mini-game-board.royal-map-adventure)
  .mini-game-feedback {
  bottom: max(118px, calc(env(safe-area-inset-bottom) + 118px));
}
.royal-map-encounter {
  left: 50%;
  bottom: 16px;
  z-index: 9;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(760px, calc(100% - 28px));
  padding: 12px;
  transform: translateX(-50%);
  border: 3px solid rgba(255, 216, 107, 0.82);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #4a1834;
  box-shadow: 0 14px 28px rgba(74, 24, 52, 0.24);
}
.royal-map-encounter[hidden] {
  display: none;
}
.royal-map-encounter-icon {
  position: relative;
  height: 78px;
}
.royal-map-encounter-copy b,
.royal-map-encounter-copy span,
.royal-map-encounter-copy em {
  display: block;
}
.royal-map-encounter-copy b {
  color: #b03579;
  font:
    900 16px "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
}
.royal-map-encounter-copy span {
  margin-top: 4px;
  font: 800 13px/1.25 "Trebuchet MS", Arial, sans-serif;
}
.royal-map-encounter-copy em {
  margin-top: 5px;
  color: #235c51;
  font: 900 12px "Trebuchet MS", Arial, sans-serif;
  font-style: normal;
}
.royal-map-encounter button {
  min-height: 46px;
  border: 2px solid rgba(176, 53, 121, 0.24);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff9c4, #ffd86b);
  color: #6b2247;
  font:
    900 13px "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  cursor: pointer;
}
@keyframes royal-map-creature-ready {
  from {
    transform: translate(
      calc(-1 * var(--sprite-anchor-x, 29px)),
      calc(-1 * var(--sprite-anchor-y, 54px))
    ) scale(1);
  }
  to {
    transform: translate(
      calc(-1 * var(--sprite-anchor-x, 29px)),
      calc(-1 * var(--sprite-anchor-y, 54px) - 5px)
    ) scale(1.08);
  }
}
@keyframes royal-map-waypoint-pulse {
  from {
    transform: translate(-50%, -50%) scale(0.88);
    opacity: 0.72;
  }
  to {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
}
@media (max-width: 640px) {
  .mini-game-board.royal-map-adventure {
    min-height: 360px;
    padding: 8px;
  }
  .royal-map-stage {
    aspect-ratio: auto;
    height: clamp(300px, 54vh, 420px);
  }
  .royal-map-shell {
    gap: 8px;
  }
  .royal-map-stage:has(.royal-map-encounter:not([hidden])) .royal-map-next-card {
    display: none;
  }
  .royal-map-next-card {
    top: max(112px, calc(env(safe-area-inset-top) + 108px));
    width: calc(100% - 78px);
    padding: 7px 8px;
  }
  .royal-map-compass {
    top: max(112px, calc(env(safe-area-inset-top) + 108px));
  }
  .royal-map-next-card span {
    font-size: 11px;
    line-height: 1.18;
  }
  .royal-map-controls {
    grid-template-columns: auto minmax(96px, 132px);
    gap: 8px;
    padding-inline: 4px;
  }
  .royal-map-move-pad {
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(2, 44px);
    gap: 4px;
  }
  .royal-map-controls button {
    min-width: 44px;
    min-height: 44px;
  }
  .royal-map-controls [data-map-explore] {
    min-width: 96px;
    min-height: 56px;
  }
  .mini-game-modal:has(.mini-game-board.royal-map-adventure)
    .mini-game-feedback {
    bottom: max(104px, calc(env(safe-area-inset-bottom) + 104px));
  }
  .royal-map-encounter {
    grid-template-columns: 44px minmax(0, 1fr) 76px;
    bottom: 6px;
    gap: 6px;
    width: calc(100% - 18px);
    padding: 6px;
  }
  .royal-map-encounter-icon {
    height: 44px;
  }
  .royal-map-encounter-icon .royal-map-creature {
    width: 40px;
    height: 40px;
  }
  .royal-map-encounter-copy b {
    font-size: 13px;
  }
  .royal-map-encounter-copy span {
    font-size: 11px;
    line-height: 1.12;
  }
  .royal-map-encounter-copy em {
    display: none;
  }
  .royal-map-encounter button {
    min-height: 44px;
    padding: 0 6px;
    font-size: 11px;
  }
  .royal-map-hero,
  .royal-map-follower {
    width: 44px;
    height: 54px;
  }
  .royal-map-creature {
    width: 48px;
    height: 48px;
  }
}