.castle-creations-modal {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  box-sizing: border-box;
  background: rgba(59, 36, 69, .44);
  backdrop-filter: blur(7px);
  color: #5d375a;
  overscroll-behavior: contain;
}
.castle-creations-modal[hidden] { display: none; }
.castle-creations-card {
  width: min(720px, 100%);
  max-height: 100%;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: clamp(16px, 3vw, 28px);
  border: 2px solid #fff;
  border-radius: 28px;
  background: #fff9ef;
  box-shadow: 0 20px 70px rgba(54, 35, 68, .25);
  font: 600 16px/1.4 system-ui, sans-serif;
}
.castle-creations-card header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.castle-creations-card header p { margin: 0; font-size: 13px; color: #805d75; }
.castle-creations-card h2 { margin: 0; font: 700 clamp(26px, 5vw, 36px)/1.2 Georgia, serif; }
.castle-creations-card h3 { margin: 0 0 14px; font: 700 22px/1.2 Georgia, serif; }
.castle-creations-card button {
  min-height: 46px;
  padding: 10px 14px;
  border: 2px solid #dcbccb;
  border-radius: 15px;
  background: #fff;
  color: #603455;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
}
.castle-creations-card button:hover { border-color: #b76893; background: #fff4f6; }
.castle-creations-card button:focus-visible { outline: 3px solid #6f4194; outline-offset: 3px; }
.castle-creations-card button[aria-pressed="true"] { background: #f8e7f2; border-color: #a64f82; }
.castle-creations-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.castle-creations-choices button { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; }
.castle-creations-choices img { display: block; width: 100%; height: clamp(74px, 15vw, 136px); object-fit: contain; }
.castle-creations-detail { padding: 20px; border-radius: 20px; background: #f3f2e7; }
.castle-creations-detail p { margin: 0 0 16px; }
.castle-creations-places, .castle-creations-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.castle-creations-places button { flex: 1 1 130px; }
.castle-creations-actions { margin-top: 16px; }
.castle-creations-actions [data-creation-visit], .castle-creations-detail > [data-creation-make] { background: #744772; color: #fff; border-color: #744772; }
.castle-creations-beats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
.castle-creations-beats span { display: grid; place-items: center; height: 35px; border: 2px solid #d8cece; border-radius: 9px; color: #735d73; background: #fff; }
.castle-creations-beats .has-note { background: #eed6e8; border-color: #c396b7; }
.castle-creations-beats .is-playing { color: #fff; background: #744772; border-color: #744772; transform: translateY(-4px); }
#castle-creations-status { margin: 16px 0 0; font-size: 14px; min-height: 20px; }
body.castle-creations-open { overflow: hidden; }
body.castle-creations-open .pet-companion-hud,
body.castle-creations-open #pet-companion,
body.castle-creations-open .touch-controls,
body.castle-creations-open #joystick { visibility: hidden; }
@media (max-width: 520px) {
  .castle-creations-card { border-radius: 22px; padding: 16px; font-size: 15px; }
  .castle-creations-choices { gap: 6px; margin: 18px 0; }
  .castle-creations-choices button { font-size: 12px; padding: 8px 4px; }
  .castle-creations-detail { padding: 16px; }
  .castle-creations-detail h3 { font-size: 20px; }
  .castle-creations-places { gap: 6px; }
  .castle-creations-places button { flex-basis: 76px; padding: 9px 6px; font-size: 13px; }
  .castle-creations-actions button { flex: 1 1 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .castle-creations-beats .is-playing { transform: none; }
}