/* Build Me a Bracelet */
.mini-game-board.bracelet-builder-board {
  background:
    linear-gradient(
      180deg,
      rgba(255, 248, 252, 0.34),
      rgba(255, 241, 249, 0.16)
    ),
    url("../../data/mini_game_worlds/bracelet_workbench_imagegen.png") center/cover;
  border-color: rgba(201, 95, 127, 0.32);
  place-items: center;
}
.bracelet-stage {
  position: relative;
  z-index: 9;
  display: grid;
  width: min(100%, 720px);
  gap: 10px;
  justify-items: center;
}
.bracelet-string {
  position: relative;
  width: min(100%, 620px);
  min-height: clamp(220px, 32vh, 300px);
  border-radius: 32px;
}
.bracelet-string::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  top: 31%;
  bottom: 7%;
  border: 5px solid rgba(255, 255, 255, 0.58);
  border-top-color: rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  box-shadow:
    inset 0 0 18px rgba(120, 62, 93, 0.12),
    0 10px 28px rgba(120, 62, 93, 0.12);
  pointer-events: none;
}
.bracelet-pattern-proof {
  box-sizing: border-box;
  display: grid;
  width: min(100%, 560px);
  gap: 4px;
  padding: 9px 12px;
  border: 2px solid rgba(135, 69, 109, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: #5d2b55;
  box-shadow: 0 8px 18px rgba(75, 36, 76, 0.1);
}
.bracelet-pattern-proof strong {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bracelet-pattern-proof span {
  font-size: clamp(0.86rem, 2.8vw, 0.98rem);
  font-weight: 800;
  line-height: 1.28;
}
.bracelet-slot {
  position: absolute;
  left: var(--slot-x);
  top: var(--slot-y);
  width: clamp(44px, 7vmin, 60px);
  height: clamp(44px, 7vmin, 60px);
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, var(--bead-shine), transparent 32%),
    var(--bead, #ff8fb7);
  box-shadow:
    inset -7px -9px 13px rgba(93, 43, 74, 0.18),
    0 8px 18px rgba(91, 48, 75, 0.2);
  opacity: 0.5;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    opacity 0.16s ease,
    box-shadow 0.16s ease;
}
.bracelet-slot.filled {
  opacity: 1;
}
.bracelet-slot.next {
  opacity: 0.86;
  outline: 3px dashed rgba(255, 255, 255, 0.86);
  outline-offset: 4px;
  box-shadow:
    0 0 0 8px rgba(255, 232, 146, 0.28),
    inset -7px -9px 13px rgba(93, 43, 74, 0.18),
    0 10px 24px rgba(151, 83, 91, 0.26);
}
.bracelet-slot:hover,
.bracelet-slot:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  outline-color: #ffffff;
}
.bracelet-palette {
  display: grid;
  grid-template-columns: repeat(6, minmax(66px, 1fr));
  width: min(100%, 560px);
  gap: 8px;
}
.bracelet-bead-choice {
  min-height: 50px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  background:
    radial-gradient(circle at 24px 15px, var(--bead-shine), transparent 19px),
    linear-gradient(135deg, var(--bead), color-mix(in srgb, var(--bead) 66%, #4b244c));
  color: #2f1630;
  cursor: pointer;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52);
  box-shadow: 0 8px 18px rgba(75, 36, 76, 0.15);
}
.bracelet-bead-choice.selected {
  outline: 3px solid rgba(255, 255, 255, 0.88);
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px rgba(255, 232, 146, 0.32),
    inset 0 0 0 2px rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(75, 36, 76, 0.18);
}
.bracelet-actions,
.bracelet-saved-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.bracelet-action,
.bracelet-saved-preview {
  min-height: 44px;
  border: 2px solid rgba(135, 69, 109, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  color: #5d2b55;
  cursor: pointer;
  font-weight: 800;
}
.bracelet-action {
  padding: 8px 14px;
}
.bracelet-action:disabled {
  opacity: 0.48;
  cursor: default;
}
.bracelet-saved-row {
  max-width: min(100%, 560px);
  padding: 7px 9px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: #6b2247;
  font-weight: 800;
}
.bracelet-saved-preview {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
}
.bracelet-mini-bead {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, var(--bead-shine), transparent 34%),
    var(--bead);
  box-shadow: inset -2px -3px 4px rgba(93, 43, 74, 0.2);
}
@media (max-width: 560px) {
  .mini-game-board.bracelet-builder-board {
    padding: 14px 8px;
    background-position: center top;
  }
  .bracelet-stage {
    gap: 8px;
  }
  .bracelet-string {
    min-height: 220px;
  }
  .bracelet-palette {
    grid-template-columns: repeat(3, minmax(78px, 1fr));
    width: min(100%, 330px);
  }
  .bracelet-bead-choice {
    min-height: 44px;
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bracelet-slot {
    transition: none;
  }

  .bracelet-slot:hover,
  .bracelet-slot:focus-visible {
    transform: translate(-50%, -50%);
  }
}

.mini-game-board.swan-boat-glide {
  min-height: min(72vh, 760px);
  padding: 0;
  overflow: visible;
  background: #cdeefa;
}
.swan-boat-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: min(72vh, 760px);
}
.swan-boat-stage {
  position: relative;
  width: min(100%, 1280px);
  max-height: min(62vh, 720px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #a6e7f4;
  box-shadow: 0 16px 34px rgba(31, 74, 101, 0.22);
  touch-action: none;
  outline: none;
}
.swan-boat-stage:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: -8px;
}
.swan-boat-world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.swan-boat-token {
  position: absolute;
  z-index: 4;
  width: clamp(78px, 11vw, 154px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 12px 10px rgba(27, 68, 94, 0.24));
  transition: filter 0.18s ease;
  will-change: left, top, transform;
}
.swan-boat-ripple {
  position: absolute;
  z-index: 3;
  min-width: 74px;
  min-height: 48px;
  padding: 6px 10px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: #245673;
  font:
    900 14px/1.05 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: 0 8px 16px rgba(16, 72, 103, 0.16);
  cursor: pointer;
}
.swan-boat-ripple strong,
.swan-boat-ripple span {
  display: block;
}
.swan-boat-ripple span {
  margin-top: 3px;
  color: #8c2b61;
  font-size: 12px;
}
.swan-boat-ripple.collected {
  opacity: 0.48;
  transform: translate(-50%, -50%) scale(0.92);
}
.swan-boat-dock {
  position: absolute;
  z-index: 2;
  width: 12%;
  min-width: 84px;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: 3px dashed rgba(255, 246, 184, 0.78);
  border-radius: 50%;
  opacity: 0.42;
  pointer-events: none;
}
.swan-boat-dock.ready {
  opacity: 0.92;
  box-shadow: 0 0 22px rgba(255, 236, 150, 0.72);
}
.swan-boat-path-card {
  position: absolute;
  z-index: 5;
  left: 12px;
  bottom: 12px;
  width: min(360px, calc(100% - 24px));
  padding: 10px 12px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  color: #31556b;
  box-shadow: 0 10px 22px rgba(31, 74, 101, 0.2);
}
.swan-boat-path-card strong,
.swan-boat-path-card span {
  display: block;
}
.swan-boat-path-card strong {
  color: #7d2a68;
  font:
    900 15px/1.1 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
}
.swan-boat-path-card span {
  margin-top: 4px;
  font: 800 13px/1.25 "Trebuchet MS", Arial, sans-serif;
}
.swan-boat-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(48px, auto));
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 0 8px 2px;
}
.swan-boat-controls button {
  min-width: 48px;
  min-height: 46px;
  padding: 0 12px;
  border: 2px solid rgba(255, 255, 255, 0.84);
  border-radius: 8px;
  background: #fdf7ff;
  color: #5c2a65;
  font:
    900 15px/1 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: 0 8px 15px rgba(53, 61, 99, 0.12);
  cursor: pointer;
  touch-action: manipulation;
}
.swan-boat-controls [data-swan-action] {
  min-width: 118px;
  background: #fff4bf;
  color: #6b4a13;
}
.swan-boat-lantern-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 8px;
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 0 8px;
}
.swan-boat-lantern-panel[hidden] {
  display: none;
}
.swan-boat-lantern-panel button {
  min-height: 46px;
  border: 2px solid rgba(107, 74, 19, 0.24);
  border-radius: 8px;
  background: #fff8d8;
  color: #6b4a13;
  font:
    900 13px/1.1 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  cursor: pointer;
}
@media (max-width: 620px) {
  .mini-game-board.swan-boat-glide,
  .swan-boat-shell {
    min-height: auto;
  }
  .swan-boat-stage {
    max-height: none;
    border-radius: 6px;
  }
  .swan-boat-token {
    width: clamp(58px, 17vw, 84px);
  }
  .swan-boat-ripple {
    min-width: 58px;
    min-height: 44px;
    padding: 5px 7px;
    font-size: 11px;
  }
  .swan-boat-path-card {
    left: 8px;
    bottom: 8px;
    width: calc(100% - 16px);
    padding: 7px 8px;
  }
  .swan-boat-path-card strong {
    font-size: 13px;
  }
  .swan-boat-path-card span {
    font-size: 11px;
    line-height: 1.18;
  }
  .swan-boat-controls {
    grid-template-columns: repeat(5, minmax(42px, 1fr));
    gap: 6px;
  }
  .swan-boat-controls button {
    min-width: 0;
    min-height: 44px;
    padding: 0 6px;
    font-size: 13px;
  }
  .swan-boat-controls [data-swan-action] {
    min-width: 76px;
  }
  .swan-boat-lantern-panel {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .swan-boat-lantern-panel button {
    min-height: 44px;
  }
}

.mini-game-board.secret-garden-grow {
  min-height: min(70vh, 740px);
  padding: 0;
  overflow: visible;
  background: #dff7d8;
}
.secret-garden-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: min(70vh, 740px);
}
.secret-garden-stage {
  position: relative;
  width: min(100%, 1280px);
  max-height: min(60vh, 720px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #dff7d8;
  box-shadow: 0 16px 34px rgba(41, 83, 53, 0.2);
}
.secret-garden-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.secret-garden-bed {
  position: absolute;
  left: 50%;
  top: 58%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(150px, 22vw, 230px);
  min-height: clamp(118px, 17vw, 170px);
  padding: 12px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 70%, rgba(100, 62, 33, 0.86) 0 38%, rgba(74, 112, 49, 0.86) 39% 100%);
  color: #315c34;
  text-align: center;
  font:
    900 13px/1.08 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: 0 8px 16px rgba(36, 91, 56, 0.17);
  pointer-events: none;
  transition: scale 0.16s ease, box-shadow 0.16s ease;
}
.secret-garden-bed.ready {
  scale: 1.05;
  box-shadow:
    0 0 0 8px rgba(131, 218, 120, 0.26),
    0 8px 16px rgba(36, 91, 56, 0.17);
}
.secret-garden-bed strong {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 140px;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: #315c34;
}
.secret-garden-sprout {
  position: absolute;
  left: 50%;
  bottom: 46%;
  width: 22px;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(circle at 30% 18%, #ffb2d5 0 22%, transparent 23%),
    radial-gradient(circle at 70% 18%, #fff18b 0 22%, transparent 23%),
    linear-gradient(180deg, #60b461, #2f7a40);
  box-shadow: 0 0 18px rgba(255, 235, 132, 0.38);
  transition:
    height 0.28s ease,
    opacity 0.18s ease;
}
.secret-garden-card {
  position: absolute;
  z-index: 4;
  left: 12px;
  bottom: 12px;
  width: min(370px, calc(100% - 24px));
  padding: 10px 12px;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: #315c34;
  box-shadow: 0 10px 22px rgba(41, 83, 53, 0.2);
}
.secret-garden-card strong,
.secret-garden-card span {
  display: block;
}
.secret-garden-card strong {
  color: #7d2a68;
  font:
    900 15px/1.1 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
}
.secret-garden-card span {
  margin-top: 4px;
  font: 800 13px/1.25 "Trebuchet MS", Arial, sans-serif;
}
.secret-garden-path {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(94px, 0.5fr));
  gap: 8px;
  padding: 0 8px 2px;
  align-items: stretch;
}
.secret-garden-seeds {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 8px;
}
.secret-garden-step,
.secret-garden-water-can {
  min-height: 46px;
  border: 2px solid rgba(49, 92, 52, 0.2);
  border-radius: 8px;
  background: #fff;
  color: #315c34;
  font:
    900 13px/1.1 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  cursor: pointer;
}
.secret-garden-water-can {
  background: #e2f7ff;
  color: #265a70;
  touch-action: none;
  box-shadow: 0 8px 18px rgba(38, 90, 112, 0.13);
}
.secret-garden-water-can.dragging {
  box-shadow: 0 18px 30px rgba(38, 90, 112, 0.22);
  z-index: 20;
}
.secret-garden-step:disabled {
  opacity: 0.58;
  cursor: default;
}
.secret-garden-step.current {
  border-color: #d9941e;
  background: #fff5cf;
}
.secret-garden-step.done {
  border-color: #58a86a;
  background: #eaffdf;
}
.secret-garden-step.pollinator-choice {
  background: #f7fff2;
}
@media (max-width: 620px) {
  .mini-game-board.secret-garden-grow,
  .secret-garden-shell {
    min-height: auto;
  }
  .secret-garden-stage {
    max-height: none;
    border-radius: 6px;
  }
  .secret-garden-bed {
    top: 56%;
    width: 132px;
    min-height: 106px;
    padding: 8px;
    font-size: 11px;
  }
  .secret-garden-card {
    left: 8px;
    bottom: 8px;
    width: calc(100% - 16px);
    padding: 7px 8px;
  }
  .secret-garden-card strong {
    font-size: 13px;
  }
  .secret-garden-card span {
    font-size: 11px;
    line-height: 1.18;
  }
  .secret-garden-path {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .secret-garden-seeds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .secret-garden-step,
  .secret-garden-water-can {
    min-height: 44px;
    font-size: 11px;
  }
}

.mini-game-board.constellation-draw {
  min-height: min(70vh, 740px);
  padding: 0;
  overflow: visible;
  background: #151c46;
}
.constellation-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: min(70vh, 740px);
}
.constellation-stage {
  position: relative;
  width: min(100%, 1280px);
  max-height: min(61vh, 720px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #151c46;
  box-shadow: 0 18px 36px rgba(11, 15, 45, 0.28);
  touch-action: none;
  cursor: crosshair;
}
.constellation-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.constellation-line-layer,
.constellation-star-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.constellation-star-layer {
  z-index: 4;
}
.constellation-line {
  position: absolute;
  height: 5px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 248, 190, 0.18), rgba(255, 248, 190, 0.95), rgba(180, 245, 255, 0.72));
  box-shadow:
    0 0 10px rgba(255, 248, 190, 0.72),
    0 0 18px rgba(126, 217, 255, 0.34);
  transform-origin: left center;
}
.constellation-star {
  position: absolute;
  z-index: 4;
  min-width: 64px;
  min-height: 38px;
  padding: 5px 8px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 246, 178, 0.92);
  border-radius: 999px;
  background: rgba(255, 251, 221, 0.86);
  color: #25305f;
  font:
    900 12px/1.05 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: 0 0 16px rgba(255, 240, 158, 0.48);
  pointer-events: none;
}
.constellation-star.chosen {
  background: #d9fff0;
  color: #145848;
  box-shadow:
    0 0 0 5px rgba(217, 255, 240, 0.24),
    0 0 22px rgba(155, 255, 225, 0.78);
}
.constellation-order-card {
  box-sizing: border-box;
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  display: grid;
  gap: 3px;
  width: min(420px, calc(100% - 24px));
  padding: 10px 12px;
  border: 2px solid rgba(255, 246, 178, 0.6);
  border-radius: 8px;
  background: rgba(20, 24, 62, 0.78);
  color: #fff8cc;
  backdrop-filter: blur(5px);
}
.constellation-order-card strong {
  font:
    900 16px/1.1 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
}
.constellation-order-card span {
  font: 800 12px/1.28 "Trebuchet MS", Arial, sans-serif;
}
.constellation-order-card em {
  color: #dffdf7;
  font: 800 11px/1.22 "Trebuchet MS", Arial, sans-serif;
  font-style: normal;
}
.constellation-meaning {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.34fr);
  gap: 8px;
  align-items: center;
  padding: 0 8px 2px;
}
.constellation-meaning strong {
  color: #fff8cc;
  font:
    900 15px/1.15 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
}
.constellation-meaning button {
  min-height: 46px;
  border: 2px solid rgba(255, 246, 178, 0.76);
  border-radius: 8px;
  background: #fff8cc;
  color: #25305f;
  font:
    900 12px/1.12 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  cursor: pointer;
}
.constellation-meaning button:disabled {
  opacity: 0.58;
  cursor: default;
}
@media (max-width: 620px) {
  .mini-game-board.constellation-draw,
  .constellation-shell {
    min-height: auto;
  }
  .constellation-stage {
    max-height: none;
    border-radius: 6px;
  }
  .constellation-star {
    min-width: 46px;
    min-height: 34px;
    padding: 5px 7px;
    font-size: 10px;
  }
  .constellation-order-card {
    left: 8px;
    bottom: 8px;
    width: calc(100% - 16px);
    padding: 7px 8px;
  }
  .constellation-order-card strong {
    font-size: 13px;
  }
  .constellation-order-card span {
    font-size: 11px;
    line-height: 1.18;
  }
  .constellation-order-card em {
    font-size: 10px;
    line-height: 1.16;
  }
  .constellation-meaning {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .constellation-meaning button {
    min-height: 44px;
  }
}

.mini-game-board.royal-kitchen-cook {
  min-height: min(70vh, 740px);
  padding: 0;
  overflow: visible;
  background: #f6dcc7;
}
.royal-kitchen-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: min(70vh, 740px);
}
.royal-kitchen-stage {
  position: relative;
  width: min(100%, 1280px);
  max-height: min(61vh, 720px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #f6dcc7;
  box-shadow: 0 18px 36px rgba(89, 47, 38, 0.2);
}
.royal-kitchen-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.royal-kitchen-card {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 5;
  display: grid;
  gap: 3px;
  width: min(460px, calc(100% - 24px));
  padding: 10px 12px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: #5a2f28;
  backdrop-filter: blur(5px);
}
.royal-kitchen-card strong {
  font:
    900 16px/1.1 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
}
.royal-kitchen-card span {
  font: 800 12px/1.28 "Trebuchet MS", Arial, sans-serif;
}
.royal-kitchen-bowl {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: clamp(150px, 23vw, 230px);
  height: clamp(118px, 17vw, 168px);
  padding: 16px;
  transform: translate(-50%, -50%);
  border: 4px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.92), rgba(255, 238, 193, 0.88) 42%, rgba(155, 80, 44, 0.92) 43% 100%);
  color: #68371f;
  text-align: center;
  font:
    900 13px/1.18 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: 0 16px 26px rgba(89, 47, 38, 0.22);
  transition:
    scale 0.16s ease,
    box-shadow 0.16s ease;
}
.royal-kitchen-bowl.ready,
.royal-kitchen-bowl.pulse {
  scale: 1.06;
  box-shadow:
    0 0 0 8px rgba(255, 216, 107, 0.34),
    0 16px 26px rgba(89, 47, 38, 0.22);
}
.royal-kitchen-cake {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 5;
  min-width: 170px;
  max-width: min(300px, calc(100% - 24px));
  min-height: 46px;
  padding: 10px 12px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  background: rgba(255, 249, 230, 0.9);
  color: #7a3f24;
  font:
    900 13px/1.2 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  text-align: center;
}
.royal-kitchen-cake.ready {
  background: #fff1b8;
  color: #5a4020;
}
.royal-kitchen-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.6fr) minmax(130px, 0.45fr);
  gap: 8px;
  padding: 0 8px 2px;
  align-items: stretch;
}
.royal-kitchen-ingredients {
  display: grid;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  gap: 8px;
}
.royal-kitchen-actions button,
.royal-kitchen-stir {
  min-height: 46px;
  border: 2px solid rgba(106, 51, 30, 0.18);
  border-radius: 8px;
  background: #fff5cf;
  color: #6a331e;
  font:
    900 12px/1.12 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  cursor: pointer;
}
.royal-kitchen-ingredient {
  position: relative;
  touch-action: none;
  box-shadow: 0 8px 18px rgba(89, 47, 38, 0.14);
}
.royal-kitchen-ingredient.flour {
  background: #fff8e7;
}
.royal-kitchen-ingredient.berries {
  background: #ffe0ee;
  color: #7b1e52;
}
.royal-kitchen-ingredient.honey {
  background: #ffefb8;
  color: #76501a;
}
.royal-kitchen-ingredient.dragging {
  box-shadow: 0 18px 30px rgba(89, 47, 38, 0.24);
}
.royal-kitchen-stir {
  display: grid;
  place-items: center;
  min-height: 76px;
  padding: 8px 10px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.92) 0 34%, transparent 36%),
    #e9f7ff;
  color: #28566a;
  text-align: center;
  touch-action: none;
  user-select: none;
}
.royal-kitchen-stir[data-power="1"] {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.92) 0 34%, transparent 36%),
    #dfffee;
}
.royal-kitchen-stir[data-power="2"],
.royal-kitchen-stir[data-power="3"] {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.92) 0 34%, transparent 36%),
    #fff0b8;
}
.royal-kitchen-bake:disabled {
  opacity: 0.58;
  cursor: default;
}
@media (max-width: 620px) {
  .mini-game-board.royal-kitchen-cook,
  .royal-kitchen-shell {
    min-height: auto;
  }
  .royal-kitchen-stage {
    max-height: none;
    border-radius: 6px;
  }
  .royal-kitchen-card {
    left: 8px;
    top: 8px;
    width: calc(100% - 16px);
    padding: 7px 8px;
  }
  .royal-kitchen-cake {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 8px;
    max-width: none;
  }
  .royal-kitchen-bowl {
    top: 56%;
    width: 138px;
    height: 110px;
    font-size: 11px;
  }
  .royal-kitchen-card strong {
    font-size: 13px;
  }
  .royal-kitchen-card span {
    font-size: 11px;
    line-height: 1.18;
  }
  .royal-kitchen-actions {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .royal-kitchen-ingredients {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .royal-kitchen-actions button {
    min-height: 44px;
  }
  .royal-kitchen-stir {
    min-height: 56px;
  }
}

.mini-game-board.royal-mail-relay {
  min-height: min(70vh, 740px);
  padding: 0;
  overflow: visible;
  background: #dff3f5;
}
.royal-mail-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: min(70vh, 740px);
}
.royal-mail-stage {
  position: relative;
  width: min(100%, 1280px);
  max-height: min(61vh, 720px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #dff3f5;
  box-shadow: 0 18px 36px rgba(49, 72, 99, 0.2);
}
.royal-mail-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.royal-mail-stop {
  position: absolute;
  z-index: 4;
  min-width: 86px;
  min-height: 48px;
  padding: 6px 10px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  background: rgba(255, 250, 232, 0.92);
  color: #65305e;
  font:
    900 13px/1.05 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: 0 8px 18px rgba(45, 71, 93, 0.18);
  cursor: pointer;
}
.royal-mail-stop.current {
  border-color: #ffe58b;
  background: #fff4bf;
  color: #5b3a14;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.62),
    0 10px 20px rgba(45, 71, 93, 0.2);
}
.royal-mail-cue {
  position: absolute;
  z-index: 6;
  min-width: 74px;
  max-width: 150px;
  padding: 5px 8px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: #fff4bf;
  color: #5b3a14;
  text-align: center;
  font:
    900 12px/1.05 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: 0 8px 18px rgba(45, 71, 93, 0.18);
  pointer-events: none;
}
.royal-mail-cue[hidden] {
  display: none;
}
.royal-mail-stop.done,
.royal-mail-stop.checked {
  background: #e9ffe5;
  color: #23633a;
}
.royal-mail-card {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 5;
  display: grid;
  gap: 3px;
  width: min(430px, calc(100% - 24px));
  padding: 10px 12px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: #55345f;
  box-shadow: 0 10px 22px rgba(49, 72, 99, 0.2);
  backdrop-filter: blur(5px);
}
.royal-mail-card strong {
  font:
    900 16px/1.1 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
}
.royal-mail-card span {
  font: 800 12px/1.28 "Trebuchet MS", Arial, sans-serif;
}
.royal-mail-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(116px, 1fr));
  gap: 8px;
  padding: 0 8px 2px;
}
.royal-mail-actions button,
.royal-mail-note {
  min-height: 46px;
  border: 2px solid rgba(85, 52, 95, 0.18);
  border-radius: 8px;
  background: #fff5cf;
  color: #55345f;
  font:
    900 12px/1.12 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
}
.royal-mail-actions button {
  cursor: pointer;
}
.royal-mail-actions button.done {
  background: #e9ffe5;
  color: #23633a;
}
.royal-mail-actions button.current {
  border-color: #ffe58b;
  background: #fff4bf;
  color: #5b3a14;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.65);
}
.royal-mail-note {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  padding: 0 12px;
  text-align: center;
}
@media (max-width: 620px) {
  .mini-game-board.royal-mail-relay,
  .royal-mail-shell {
    min-height: auto;
  }
  .royal-mail-stage {
    max-height: none;
    border-radius: 6px;
  }
  .royal-mail-stop {
    min-width: 58px;
    min-height: 44px;
    padding: 5px 7px;
    font-size: 11px;
  }
  .royal-mail-cue {
    min-width: 58px;
    max-width: 112px;
    padding: 4px 6px;
    font-size: 10px;
  }
  .royal-mail-card {
    left: 8px;
    top: 8px;
    width: calc(100% - 16px);
    padding: 7px 8px;
  }
  .royal-mail-card strong {
    font-size: 13px;
  }
  .royal-mail-card span {
    font-size: 11px;
    line-height: 1.18;
  }
  .royal-mail-actions {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .royal-mail-actions button,
  .royal-mail-note {
    min-height: 44px;
  }
}