/* ——— Rewards beyond gems: Royal chests, special paints, royal requests, room hearts, the Royal Album ——— */

/* ——— Results: the round's stars on the left, the Royal chest on the right ——— */

.rs-main { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.rs-left, .rs-right { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.rs-right { width: 100%; max-width: 460px; }
.results.has-chest .results-row { margin-top: 18px; }

@media (min-width: 900px) and (min-aspect-ratio: 5 / 4) {
  .results.has-chest { max-width: 1040px; }
  .results.has-chest .rs-main { flex-direction: row; align-items: center; justify-content: center; gap: 30px; }
  .results.has-chest .rs-left { flex: 1 1 0; }
  .results.has-chest .rs-right { flex: 0 1 430px; }
}

.rc-stage {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 26 / 21;
  border-radius: 30px;
  border: 5px solid #fff;
  background: radial-gradient(circle at 50% 62%, #fff3fa 0%, #ffd9ec 55%, #e9d8ff 100%);
  box-shadow: 0 7px 0 #efcfe2, var(--shadow);
  overflow: hidden;
  animation: pop-in 0.6s var(--bounce) 0.3s backwards;
}
.rc-stage-royal { background: radial-gradient(circle at 50% 62%, #fffbe8 0%, #ffe0ef 50%, #ffd27a 120%); }
.rc-stage-wood { background: radial-gradient(circle at 50% 62%, #fff8ee 0%, #fbe5d0 60%, #f1d7ff 110%); }
.rc-slot { position: absolute; inset: 4% 6% 0; }

.rc-chest {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.rc-chest:focus-visible { outline-offset: -6px; border-radius: 24px; }
.rc-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rc-wob { transform-box: fill-box; transform-origin: 50% 100%; }
.rc-lid { transform-box: fill-box; transform-origin: 8% 100%; }
.rc-rays { opacity: 0; transition: opacity 0.4s; }
.rc-glow { opacity: 0; transition: opacity 0.3s; }
.rc-open .rc-rays { opacity: 0.55; animation: rc-spin 9s linear infinite; }
.rc-open .rc-glow { opacity: 1; }
.rc-open { cursor: default; }
/* A closed chest shuffles now and then, asking to be opened. */
.rc-idle .rc-wob { animation: rc-shuffle 2.6s ease-in-out 1.2s infinite; }

.rc-tap {
  position: absolute;
  left: 50%;
  bottom: 10px;
  translate: -50% 0;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--pink-deep);
  pointer-events: none;
  animation: bob 1.8s ease-in-out infinite;
}
.rc-stage.opened .rc-tap { display: none; }

/* The bonus card that pops out of the chest. */
.rc-loot {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 92%;
  padding: 8px 16px 8px 8px;
  border-radius: 20px;
  border: 3px solid var(--outline);
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 10px 24px rgba(91, 58, 110, 0.25);
}
.rc-stage .rc-loot {
  position: absolute;
  left: 50%;
  top: 8px;
  z-index: 2;
  translate: -50% 0;
  animation: rc-loot-in 0.6s var(--bounce) 0.15s backwards;
}
.rc-loot-icon { display: grid; place-items: center; flex: none; width: 58px; height: 58px; }
.rc-loot-icon > svg, .rc-loot-icon .t-icon { width: 100%; height: 100%; }
.rc-loot-icon .t-icon svg { width: 100%; height: 100%; }
.rc-emoji { font-size: 44px; line-height: 1; }
.rc-loot-text { display: grid; min-width: 0; }
.rc-loot small { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8a6aa0; }
.rc-loot strong { font-size: 20px; line-height: 1.15; }
.rc-plus { font-size: 15px; font-weight: 600; color: var(--pink-deep); }
.rc-found { font-size: 17px; font-weight: 500; color: var(--ink-soft); animation: pop-in 0.5s var(--bounce) 0.4s backwards; }
.rc-found .link-btn { display: inline; margin: 0 0 0 4px; font-size: 17px; font-weight: 600; color: var(--pink-deep); }
.results.has-chest .gems-won { padding: 4px 30px; font-size: 44px; animation-delay: 0.6s; }

/* ——— Special paint pots ——— */

.paint-swatch.special { position: relative; }
.paint-swatch.special::after {
  content: '✨';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}
.paint-glow { animation: paint-glow 2.2s ease-in-out infinite alternate; }
.room.mini .paint-glow, .t-icon .paint-glow { animation: none; opacity: 0.6; }

/* ——— Room hearts ——— */

.rh-hearts { display: flex; align-items: center; gap: 4px; }
.rh-heart {
  position: relative;
  width: 44px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  transition: transform 0.15s var(--bounce);
}
.rh-heart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rh-heart path { fill: rgba(255, 255, 255, 0.85); stroke: #e3bcd6; stroke-width: 3; stroke-dasharray: 5 4; stroke-linejoin: round; }
.rh-heart.on path { fill: #ff6b9a; stroke: var(--outline); stroke-dasharray: none; }
.rh-icon {
  position: absolute;
  left: 50%;
  top: 48%;
  translate: -50% -50%;
  font-size: 15px;
  line-height: 1;
  filter: grayscale(1) opacity(0.55);
}
.rh-heart.on .rh-icon { filter: none; }
.rh-heart:active { transform: scale(0.9); }
.rh-heart.rh-new { animation: rh-pop 0.9s var(--bounce); }
.rh-count { margin-left: 4px; font-size: 16px; font-weight: 600; color: var(--ink-soft); }

/* Small hearts under each room on the palace map. */
.rh-mini { display: flex; justify-content: center; gap: 2px; }
.rh-mini i { display: block; width: 14px; height: 13px; }
.rh-mini svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rh-mini path { fill: rgba(255, 255, 255, 0.9); stroke: #e3bcd6; stroke-width: 4; }
.rh-mini .on path { fill: #ff6b9a; stroke: var(--outline); }

/* ——— Royal requests ——— */

.rq-card { padding: 12px 14px 14px; background: linear-gradient(180deg, #fffaf0, #fff); border-color: #ffe7a8; }
.rq-card.ready { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 197, 61, 0.35), var(--shadow); animation: pulse 1.4s ease-in-out 3; }
.rq-card.done { padding: 8px 12px; background: linear-gradient(90deg, #fff0f7, #fff); border-color: #fff; }
.rq-head { display: flex; align-items: center; gap: 10px; }
.rq-head p { display: grid; min-width: 0; font-size: 17px; line-height: 1.2; }
.rq-head small { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.rq-face {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: radial-gradient(circle at 50% 40%, #fff 0 40%, #ffe0ee 100%);
  box-shadow: 0 0 0 2px var(--outline);
  font-size: 32px;
  line-height: 1;
}
.rq-card.done .rq-face { width: 42px; height: 42px; font-size: 26px; }
.rq-head[data-action] { cursor: pointer; }
.rq-say { padding: 0; cursor: pointer; }
.rq-say:active { transform: scale(0.92); }
.rq-face.rq-talk .lp-res-art { animation: lp-hop 0.6s var(--bounce); }
.rq-needs { display: grid; gap: 6px; margin-top: 10px; }
.rq-need {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 16px;
  border: 3px solid #fff;
  background: var(--lilac-soft);
  box-shadow: 0 3px 0 #dccdf6;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
}
.rq-need:active { transform: translateY(2px); }
.rq-need.done { background: #dff8ee; box-shadow: 0 3px 0 #b6ead6; }
.rq-need-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; }
.rq-need-icon .t-icon { width: 34px; height: 34px; }
.rq-emoji { font-size: 26px; line-height: 1; }
.rq-need-label { flex: 1; min-width: 0; }
.rq-need-count { flex: none; color: var(--ink-soft); }
.rq-need.done .rq-need-count { color: var(--mint-deep); font-size: 20px; }
.rq-ready { margin-top: 10px; font-size: 16px; font-weight: 600; color: #a46d00; }

/* The ribbon across a room whose request is done: tap it to cut. */
.rq-ribbon {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  z-index: 5;
  height: 13%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.rq-band {
  position: absolute;
  top: 25%;
  height: 50%;
  width: 50%;
  border-block: 3px solid var(--outline);
  background: linear-gradient(180deg, #ff8fbf 0 45%, #ff5fa2 46% 100%);
  box-shadow: 0 6px 10px rgba(91, 58, 110, 0.25);
  transition: transform 0.6s cubic-bezier(.5, 0, .7, .4), opacity 0.6s;
}
.rq-band.l { left: 0; transform-origin: 0 50%; }
.rq-band.r { right: 0; transform-origin: 100% 50%; }
.rq-bow {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-size: clamp(42px, 9cqw, 72px);
  line-height: 1;
  filter: drop-shadow(0 4px 3px rgba(91, 58, 110, 0.3));
  animation: pulse 1.2s ease-in-out infinite;
}
.rq-cut-label {
  position: absolute;
  left: 50%;
  top: 100%;
  translate: -50% 10px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--pink-deep);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow);
  animation: bob 1.8s ease-in-out infinite;
}
.rq-ribbon.rq-drop { animation: rq-drop 0.7s var(--bounce); }
.rq-ribbon.rq-snip .rq-band.l { transform: rotate(32deg) translateY(30%); opacity: 0; }
.rq-ribbon.rq-snip .rq-band.r { transform: rotate(-32deg) translateY(30%); opacity: 0; }
.rq-ribbon.rq-snip .rq-bow { animation: rq-bow-fly 0.6s ease-in forwards; }
.rq-ribbon.rq-snip .rq-cut-label { display: none; }

/* The grand-opening pop-up. */
.rq-portrait {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 5px solid #fff;
  background: radial-gradient(circle at 50% 40%, #fff 0 40%, #ffe0ee 100%);
  box-shadow: 0 0 0 3px var(--outline), var(--shadow);
  font-size: 66px;
  animation: m-dance 1s ease-in-out infinite;
}
.rq-reward.rc-loot { margin: 14px auto 6px; }
.rq-where { display: block; font-size: 16px; }

/* Request badges on the palace map. */
.rq-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  padding: 1px 7px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #fffaf0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 2px 4px rgba(91, 58, 110, 0.2);
}
.rq-badge.done { padding: 0 4px; background: #fff0f7; font-size: 16px; }
.rq-badge.ready { background: var(--gold); font-size: 16px; animation: pulse 1s ease-in-out infinite; }

/* ——— Royal Album ——— */

.album { max-width: 980px; margin: 0 auto; display: grid; gap: 16px; }
.ab-page { padding: 16px 18px 20px; }
.ab-page h2 { margin-bottom: 12px; font-size: 24px; }
.ab-page h2 small { margin-left: 6px; font-size: 16px; font-weight: 500; color: var(--ink-soft); }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.ab-slot {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 6px 8px;
  border-radius: 22px;
  border: 3px dashed #e9c9df;
  background: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  font-weight: 600;
}
.ab-slot.has { border: 3px solid #fff; background: linear-gradient(#fff7fb, #fff); box-shadow: 0 4px 0 #ecd6e6; }
.ab-art { display: grid; place-items: center; width: 76px; height: 76px; }
.ab-art > svg { width: 100%; height: 100%; }
.ab-clothes .ab-art { width: 70px; height: 96px; }
.ab-slot:not(.has) .ab-art svg { filter: brightness(0) opacity(0.14); }
.ab-slot:not(.has) .ab-name { color: #c9a9c0; font-size: 18px; }
.ab-slot.ab-wiggle { animation: wiggle 0.3s ease-in-out 2; }

@media (max-width: 640px) {
  .rc-stage { width: min(100%, 300px); }
  .rc-loot strong { font-size: 17px; }
  .rc-loot-icon { width: 46px; height: 46px; }
  .results.has-chest .gems-won { font-size: 36px; }
  .rq-needs { display: flex; flex-wrap: wrap; gap: 6px; }
  .rq-need { padding: 2px 10px 2px 2px; font-size: 14px; }
  .rq-need-icon { width: 30px; height: 30px; }
  .rq-need-icon .t-icon { width: 28px; height: 28px; }
  .rq-emoji { font-size: 22px; }
  .rh-heart { width: 36px; height: 33px; }
  .rh-icon { font-size: 12px; }
  .rq-cut-label { font-size: 14px; }
  .rq-badge { top: 2px; right: 2px; padding: 0 4px; font-size: 10px; }
  .rq-badge.done, .rq-badge.ready { font-size: 12px; }
  .rh-mini i { width: 10px; height: 9px; }
  .ab-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .ab-art { width: 60px; height: 60px; }
  .palace-head { flex-wrap: wrap; }
}

@keyframes rc-spin { to { transform: rotate(360deg); } }
@keyframes rc-shuffle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-4deg) scale(1.02, 0.98); } 82% { transform: rotate(4deg); } 88% { transform: rotate(-3deg); } 94% { transform: rotate(2deg); } }
@keyframes rc-loot-in { from { opacity: 0; transform: translateY(70px) scale(0.3); } 65% { opacity: 1; transform: translateY(-6px) scale(1.08); } }
@keyframes paint-glow { from { opacity: 0.15; } to { opacity: 0.9; } }
@keyframes rh-pop { 0% { transform: scale(0.3); } 50% { transform: scale(1.5) rotate(-10deg); } 100% { transform: scale(1); } }
@keyframes rq-drop { from { transform: translateY(-120%) scaleX(0.6); opacity: 0; } }
@keyframes rq-bow-fly { to { transform: translateY(-160%) rotate(40deg) scale(1.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rc-idle .rc-wob, .rc-open .rc-rays, .paint-glow, .rq-bow, .rq-cut-label, .rc-tap, .rq-badge.ready { animation: none; }
}